totalum-api-sdk 2.0.19 → 2.0.21

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,4775 @@
1
+ /*
2
+ * App Global CSS
3
+ * ----------------------------------------------------------------------------
4
+ * Put style rules here that you want to apply globally. These styles are for
5
+ * the entire app and not just one component. Additionally, this file can be
6
+ * used as an entry point to import other CSS/Sass files to be included in the
7
+ * output CSS.
8
+ * For more information on global stylesheets, visit the documentation:
9
+ * https://ionicframework.com/docs/layout/global-stylesheets
10
+ */
11
+
12
+ .tree-element {
13
+ width: 100%;
14
+ padding: 8px 0;
15
+ padding-left: 8px;
16
+ cursor: pointer;
17
+ border-bottom: 1px solid gray;
18
+ }
19
+ .tree-element:hover {
20
+ background: gray;
21
+ }
22
+
23
+ .aside {
24
+ width: 300px;
25
+ border-right: 1px solid gray;
26
+ height: 100%;
27
+ }
28
+
29
+ .tree-aside {
30
+ width: 300px;
31
+ border-right: 1px solid gray;
32
+ height: 100%;
33
+ }
34
+ .tree-aside-element {
35
+ padding: 14px 12px;
36
+ border-bottom: 1px solid gray;
37
+ background: white;
38
+ cursor: pointer;
39
+ }
40
+ .tree-aside-element:hover {
41
+ background: rgb(217, 217, 217);
42
+ }
43
+
44
+ .row-expanded-tree-element {
45
+ display: flex;
46
+ align-items: center;
47
+ padding: 2px 8px;
48
+ padding-right: 12px;
49
+ cursor: pointer;
50
+ justify-content: flex-start;
51
+ color: rgb(70, 70, 70);
52
+ }
53
+ .row-expanded-tree-element-title {
54
+ max-width: 100%;
55
+ white-space: nowrap;
56
+ overflow: hidden;
57
+ text-overflow: ellipsis;
58
+ font-size: 13px;
59
+ }
60
+ .row-expanded-tree-element-left {
61
+ width: 100%;
62
+ display: flex;
63
+ align-items: center;
64
+ justify-content: flex-start;
65
+ }
66
+ .row-expanded-tree-element-left i {
67
+ font-size: 13px;
68
+ width: 28px !important;
69
+ min-width: 28px !important;
70
+ height: 30px !important;
71
+ min-height: 30px !important;
72
+ display: flex;
73
+ align-items: center;
74
+ justify-content: center;
75
+ }
76
+ .row-expanded-tree-element-left span {
77
+ font-size: 13px;
78
+ }
79
+ .row-expanded-tree-element:hover {
80
+ background: rgb(244, 244, 244);
81
+ }
82
+ .row-expanded-tree-element-selected {
83
+ padding: 2px 8px;
84
+ padding-right: 12px;
85
+ cursor: pointer;
86
+ background: rgb(244, 244, 244);
87
+ }
88
+ .row-expanded-tree-element-selected .row-expanded-tree-element-title {
89
+ color: black;
90
+ font-weight: bold;
91
+ }
92
+ .row-expanded-tree-element-selected-left span {
93
+ font-weight: bold;
94
+ }
95
+
96
+ .tree-objtype-title {
97
+ margin-top: 4px;
98
+ margin-bottom: 4px;
99
+ color: #2b2b2b;
100
+ display: flex;
101
+ justify-content: space-between;
102
+ align-items: center;
103
+ }
104
+ .tree-objtype-title-left {
105
+ display: flex;
106
+ align-items: center;
107
+ font-weight: 600;
108
+ font-size: 13px;
109
+ }
110
+ .tree-objtype-title-left i {
111
+ font-size: 14px;
112
+ width: 24px;
113
+ height: 24px;
114
+ display: flex;
115
+ align-items: center;
116
+ justify-content: center;
117
+ color: rgb(132, 133, 135);
118
+ margin-right: 6px;
119
+ }
120
+ .tree-objtype-title-left-icon {
121
+ font-size: 15.5px !important;
122
+ margin-right: 0px !important;
123
+ padding-top: 0px !important;
124
+ color: rgb(159, 159, 159);
125
+ background-image: linear-gradient(to bottom, rgb(178, 178, 178), rgb(155, 155, 155));
126
+ -webkit-background-clip: text;
127
+ -moz-background-clip: text;
128
+ background-clip: text;
129
+ color: transparent;
130
+ margin-left: -4px;
131
+ }
132
+ .tree-objtype-title-right {
133
+ display: flex;
134
+ align-items: center;
135
+ }
136
+ .tree-objtype-title-right i {
137
+ font-size: 16px;
138
+ width: 24px;
139
+ height: 24px;
140
+ display: flex;
141
+ align-items: center;
142
+ justify-content: center;
143
+ color: rgb(132, 133, 135);
144
+ padding-top: 2px;
145
+ border-radius: 4px;
146
+ cursor: pointer;
147
+ }
148
+ .tree-objtype-title-right i:hover {
149
+ background: #f4f4f4;
150
+ }
151
+
152
+ .no-elements-title {
153
+ margin-bottom: 12px;
154
+ }
155
+
156
+ .padding-left-24 {
157
+ padding-left: 24px !important;
158
+ }
159
+
160
+ .padding-left-48 {
161
+ padding-left: 48px !important;
162
+ }
163
+
164
+ .padding-left-72 {
165
+ padding-left: 72px !important;
166
+ }
167
+
168
+ .padding-left-96 {
169
+ padding-left: 96px !important;
170
+ }
171
+
172
+ .padding-left-120 {
173
+ padding-left: 120px !important;
174
+ }
175
+
176
+ .padding-left-144 {
177
+ padding-left: 144px !important;
178
+ }
179
+
180
+ .padding-left-25 {
181
+ padding-left: 28px !important;
182
+ }
183
+
184
+ .padding-left-50 {
185
+ padding-left: 60px !important;
186
+ }
187
+
188
+ .padding-left-75 {
189
+ padding-left: 93px !important;
190
+ }
191
+
192
+ .padding-left-100 {
193
+ padding-left: 100px !important;
194
+ }
195
+
196
+ .padding-left-125 {
197
+ padding-left: 125px !important;
198
+ }
199
+
200
+ .padding-left-150 {
201
+ padding-left: 150px !important;
202
+ }
203
+
204
+ .padding-left-25-2 {
205
+ padding-left: 28px !important;
206
+ }
207
+
208
+ .padding-left-50-2 {
209
+ padding-left: 60px !important;
210
+ }
211
+
212
+ .padding-left-75-2 {
213
+ padding-left: 93px !important;
214
+ }
215
+
216
+ .padding-left-100-2 {
217
+ padding-left: 140px !important;
218
+ }
219
+
220
+ .padding-left-125-2 {
221
+ padding-left: 115px !important;
222
+ }
223
+
224
+ .padding-left-150-2 {
225
+ padding-left: 140px !important;
226
+ }
227
+
228
+ .table {
229
+ position: relative;
230
+ height: 100%;
231
+ }
232
+ .table-margin-top {
233
+ margin-top: 70px;
234
+ }
235
+ .table-grid {
236
+ margin: 0 16px;
237
+ }
238
+ .table-grid-header {
239
+ position: relative;
240
+ }
241
+ .table-grid-header-delete-col {
242
+ cursor: pointer;
243
+ margin-top: 8px;
244
+ margin-left: 3px;
245
+ font-size: 18px;
246
+ }
247
+ .table-grid-header-editing-col {
248
+ padding: 6px 8px;
249
+ background: #D4D4D4;
250
+ border-radius: 6px;
251
+ color: black;
252
+ display: flex;
253
+ align-items: center;
254
+ justify-content: space-between;
255
+ cursor: pointer;
256
+ }
257
+ .table-grid-header-editing-col:hover {
258
+ background: rgb(187, 187, 187);
259
+ }
260
+ .table-grid-header-editing-col ion-icon {
261
+ font-size: 16px;
262
+ color: #5C5C5C;
263
+ margin-left: 8px;
264
+ }
265
+ .table-grid-header-editing-add-button {
266
+ color: rgb(0, 140, 255);
267
+ display: flex;
268
+ align-items: center;
269
+ border-radius: 6px;
270
+ padding: 6px 8px;
271
+ cursor: pointer;
272
+ }
273
+ .table-grid-header-editing-add-button:hover {
274
+ background: rgb(219, 219, 219);
275
+ }
276
+ .table-grid-header-editing-add-button ion-icon {
277
+ color: rgb(0, 140, 255);
278
+ font-size: 16px;
279
+ margin-right: 8px;
280
+ }
281
+ .table-grid-header-col {
282
+ padding: 6px 8px;
283
+ border-radius: 6px;
284
+ }
285
+ .table-grid-header-settings {
286
+ position: absolute;
287
+ right: 0px;
288
+ top: 0;
289
+ bottom: 0;
290
+ margin: auto;
291
+ font-size: 12px;
292
+ }
293
+ .table-bar {
294
+ margin-bottom: 16px;
295
+ padding: 0 16px;
296
+ border-bottom: 1px solid #FAFAFA;
297
+ position: fixed;
298
+ top: 0;
299
+ background: white;
300
+ z-index: 100000;
301
+ width: 100%;
302
+ background: #f8f8f8;
303
+ height: 55px;
304
+ display: flex;
305
+ align-items: center;
306
+ justify-content: space-between;
307
+ }
308
+ .table-bar-title {
309
+ font-size: 16px;
310
+ font-weight: bold;
311
+ }
312
+ .table-bar-tools {
313
+ display: flex;
314
+ align-items: center;
315
+ }
316
+ .table-bar-tools-itemsperpage {
317
+ display: flex;
318
+ margin-right: 30px;
319
+ }
320
+ .table-bar-tools-itemsperpage-number {
321
+ margin-left: 20px;
322
+ color: gray;
323
+ cursor: pointer;
324
+ }
325
+ .table-bar-tools-tool {
326
+ display: flex;
327
+ align-items: center;
328
+ background: var(--button-background);
329
+ padding: 9px;
330
+ margin-left: 16px;
331
+ border-radius: 6px;
332
+ }
333
+ .table-bar-tools-tool-title {
334
+ margin-left: var(--margin-icon-text);
335
+ color: var(--button-icon-color);
336
+ white-space: nowrap;
337
+ overflow: hidden;
338
+ text-overflow: ellipsis;
339
+ font-size: 13px;
340
+ }
341
+ .table-bar-tools-tool ion-icon {
342
+ color: var(--button-icon-color);
343
+ font-size: var(--button-icon-size);
344
+ min-width: 22px;
345
+ }
346
+ .table-bar-tools .tool-searchbar {
347
+ min-width: 250px;
348
+ font-size: 13px;
349
+ }
350
+ .table-bar-tools .tool-searchbar ion-icon {
351
+ margin-right: var(--margin-icon-text);
352
+ }
353
+ .table-bar-tools .tool-button {
354
+ user-select: none;
355
+ cursor: pointer;
356
+ }
357
+ .table-bar-tools .tool-button:hover {
358
+ background: var(--button-background-active);
359
+ }
360
+ .table-bar-tools .tool-button-add-elements {
361
+ max-width: 180px;
362
+ }
363
+ .table-bar-tools .tool-button-cancellable {
364
+ display: flex;
365
+ align-items: center;
366
+ }
367
+ .table-bar-tools .tool-button-cancellable .tool-button:last-child {
368
+ margin-left: -4px;
369
+ z-index: 100000;
370
+ padding: 9px;
371
+ }
372
+ .table-bar-tools .tool-button-cancellable .tool-button:first-child {
373
+ background: var(--button-bg-primary);
374
+ z-index: 100020;
375
+ }
376
+ .table-bar-tools .tool-button-cancellable .tool-button:first-child ion-icon {
377
+ color: white;
378
+ }
379
+
380
+ .table-form {
381
+ margin-bottom: 16px;
382
+ display: flex;
383
+ width: 100%;
384
+ margin: 0 16px;
385
+ }
386
+
387
+ .table-navbar {
388
+ width: 100%;
389
+ margin-bottom: 8px;
390
+ display: flex;
391
+ justify-content: space-between;
392
+ align-items: center;
393
+ }
394
+ .table-navbar-tools {
395
+ display: flex;
396
+ }
397
+ .table-navbar-tools-icon {
398
+ margin-left: 20px;
399
+ }
400
+
401
+ ion-col {
402
+ width: 290px;
403
+ max-width: 290px;
404
+ min-width: 290px;
405
+ }
406
+
407
+ ion-row {
408
+ display: flex;
409
+ flex-wrap: nowrap;
410
+ }
411
+
412
+ .sp-grid {
413
+ width: 100%;
414
+ padding: 0;
415
+ padding-bottom: 110px;
416
+ background: white;
417
+ }
418
+ .sp-grid .ion-row-container {
419
+ position: relative;
420
+ }
421
+ .sp-grid .ion-row-container .rapid-editor-button {
422
+ position: absolute;
423
+ top: 6px;
424
+ right: 12px;
425
+ padding: 6px 12px;
426
+ display: flex;
427
+ align-items: center;
428
+ justify-content: center;
429
+ background: var(--button-bg-primary);
430
+ border-radius: 6px;
431
+ z-index: 100000;
432
+ cursor: pointer;
433
+ }
434
+ .sp-grid .ion-row-container .rapid-editor-button:hover {
435
+ background: var(--button-bg-primary-hover);
436
+ }
437
+ .sp-grid .ion-row-container .rapid-editor-button ion-icon {
438
+ font-size: 20px;
439
+ color: white;
440
+ margin-right: 8px;
441
+ }
442
+ .sp-grid .ion-row-container .rapid-editor-button div {
443
+ color: white;
444
+ }
445
+ .sp-grid .ion-row-container .rapid-editor-button-success {
446
+ background: var(--button-bg-special);
447
+ }
448
+ .sp-grid .ion-row-container .rapid-editor-button-success-completed {
449
+ display: flex;
450
+ align-items: center;
451
+ }
452
+ .sp-grid .ion-row-container .rapid-editor-button-success-undo {
453
+ display: none;
454
+ }
455
+ .sp-grid .ion-row-container .rapid-editor-button-success:hover {
456
+ background: var(--button-background);
457
+ }
458
+ .sp-grid .ion-row-container .rapid-editor-button-success:hover .rapid-editor-button-success-completed {
459
+ display: none;
460
+ }
461
+ .sp-grid .ion-row-container .rapid-editor-button-success:hover .rapid-editor-button-success-undo {
462
+ display: flex;
463
+ align-items: center;
464
+ }
465
+ .sp-grid .ion-row-container .rapid-editor-button-success:hover .rapid-editor-button-success-undo div {
466
+ color: black;
467
+ }
468
+ .sp-grid .ion-row-container .rapid-editor-button-success:hover .rapid-editor-button-success-undo ion-icon {
469
+ color: black;
470
+ }
471
+ .sp-grid .ion-row-container .rapid-editor-button-loading {
472
+ background: white;
473
+ }
474
+ .sp-grid .ion-row-container .rapid-editor-button-loading ion-spinner {
475
+ color: black;
476
+ width: 16px;
477
+ height: 20px;
478
+ margin-right: 10px;
479
+ }
480
+ .sp-grid .ion-row-container .rapid-editor-button-loading div {
481
+ color: black;
482
+ }
483
+ .sp-grid .ion-row-container .rapid-editor-button-loading:hover {
484
+ background: white;
485
+ }
486
+ .sp-grid .ion-row-container .rapid-editor-button-error {
487
+ background: var(--button-bg-error);
488
+ }
489
+ .sp-grid .ion-row-container .rapid-editor-button-error:hover {
490
+ background: var(--button-bg-error);
491
+ }
492
+ .sp-grid ion-row {
493
+ width: 100%;
494
+ border-bottom: 1px solid #CDCDCD;
495
+ display: flex;
496
+ align-items: center;
497
+ justify-content: flex-start;
498
+ }
499
+ .sp-grid ion-row.sp-grid-row-result {
500
+ cursor: pointer;
501
+ padding: 8px 0;
502
+ }
503
+ .sp-grid ion-row.sp-grid-row-result:hover {
504
+ background: rgb(231, 231, 231);
505
+ }
506
+ .sp-grid ion-row.sp-grid-row-titles {
507
+ /*position: sticky;
508
+ top: 0;
509
+ background: white;
510
+ z-index: 100000;*/
511
+ user-select: none;
512
+ background: #F5F5F5;
513
+ border-bottom: 1px solid #4A4A4A;
514
+ }
515
+ .sp-grid ion-row.sp-grid-row-titles:hover {
516
+ background: #F5F5F5;
517
+ }
518
+ .sp-grid ion-col {
519
+ text-align: center;
520
+ display: flex;
521
+ justify-content: center;
522
+ font-family: "Inter", sans-serif;
523
+ font-size: 15px;
524
+ }
525
+ .sp-grid ion-col .sp-grid-image {
526
+ width: 50px;
527
+ height: 50px;
528
+ border-radius: 50%;
529
+ background-size: cover;
530
+ background-repeat: no-repeat;
531
+ background-position: center;
532
+ }
533
+ .sp-grid ion-col.sp-grid-col-titles {
534
+ color: #334D6E;
535
+ }
536
+ .sp-grid ion-col.sp-grid-col-result {
537
+ white-space: nowrap;
538
+ overflow: hidden;
539
+ text-overflow: ellipsis;
540
+ }
541
+ .sp-grid-button {
542
+ color: var(--preico-gold);
543
+ font-weight: bold;
544
+ font-family: "Poppins", sans-serif;
545
+ font-size: 15px;
546
+ user-select: none;
547
+ cursor: pointer;
548
+ }
549
+ .sp-grid-button:hover {
550
+ color: var(--preico-gold-dark);
551
+ }
552
+
553
+ .sp-grid-titles {
554
+ padding: 0;
555
+ }
556
+
557
+ ion-col {
558
+ width: 290px;
559
+ max-width: 290px;
560
+ min-width: 290px;
561
+ }
562
+
563
+ ion-row {
564
+ display: flex;
565
+ flex-wrap: nowrap;
566
+ }
567
+
568
+ .testing {
569
+ width: 300px;
570
+ margin: 64px;
571
+ }
572
+
573
+ .sp-button-base {
574
+ padding: 14px 16px;
575
+ border-radius: 6px;
576
+ background: #EDEDED;
577
+ color: #6D6D6D;
578
+ }
579
+ .sp-button-base ion-icon {
580
+ font-size: 23px;
581
+ }
582
+ .sp-button-base:hover {
583
+ background: #dfdfdf;
584
+ }
585
+
586
+ .sp-button-primary {
587
+ background: var(--button-bg-primary);
588
+ color: var(--header-font-color);
589
+ border-radius: 6px;
590
+ font-size: 14px;
591
+ min-width: 111px;
592
+ height: 42px;
593
+ display: flex;
594
+ align-items: center;
595
+ justify-content: center;
596
+ user-select: none;
597
+ cursor: pointer;
598
+ transition: 0.1s all ease;
599
+ padding: 0 8px;
600
+ }
601
+ .sp-button-primary span {
602
+ font-size: 13px;
603
+ }
604
+ .sp-button-primary-loader {
605
+ display: flex;
606
+ align-items: center;
607
+ justify-content: center;
608
+ }
609
+ .sp-button-primary-loader ion-spinner {
610
+ color: white;
611
+ width: 25px;
612
+ margin-right: 6px;
613
+ }
614
+ .sp-button-primary-loader span {
615
+ margin-top: 2px;
616
+ }
617
+ .sp-button-primary:hover {
618
+ background: var(--button-bg-primary-hover);
619
+ }
620
+ .sp-button-primary:disabled {
621
+ background: var(--button-bg-primary-disabled);
622
+ cursor: not-allowed;
623
+ }
624
+
625
+ .sp-button-special {
626
+ background: var(--button-bg-special);
627
+ color: var(--header-font-color);
628
+ padding: 0 12px;
629
+ border-radius: 6px;
630
+ font-size: 13px;
631
+ min-width: 111px;
632
+ width: auto;
633
+ height: 38px;
634
+ display: flex;
635
+ align-items: center;
636
+ justify-content: center;
637
+ user-select: none;
638
+ transition: 0.1s all ease;
639
+ }
640
+ .sp-button-special-loader {
641
+ display: flex;
642
+ align-items: center;
643
+ justify-content: center;
644
+ }
645
+ .sp-button-special-loader ion-spinner {
646
+ color: white;
647
+ width: 25px;
648
+ margin-right: 6px;
649
+ }
650
+ .sp-button-special-loader span {
651
+ margin-top: 2px;
652
+ }
653
+ .sp-button-special:hover {
654
+ background: var(--button-bg-special-hover);
655
+ }
656
+ .sp-button-special:disabled {
657
+ background: var(--button-bg-special-disabled);
658
+ cursor: not-allowed;
659
+ }
660
+
661
+ .sp-button-clear {
662
+ background: white;
663
+ color: var(--button-bg-primary);
664
+ border: 2px solid var(--button-bg-primary);
665
+ padding: 14px 16px;
666
+ border-radius: 6px;
667
+ font-size: 14px;
668
+ min-width: 130px;
669
+ transition: 0.1s all ease;
670
+ display: flex;
671
+ align-items: center;
672
+ justify-content: center;
673
+ user-select: none;
674
+ cursor: pointer;
675
+ }
676
+ .sp-button-clear:disabled {
677
+ cursor: not-allowed;
678
+ color: var(--button-bg-primary-disabled);
679
+ border: 2px solid var(--button-bg-primary-disabled);
680
+ }
681
+ .sp-button-clear:hover {
682
+ background: white;
683
+ }
684
+
685
+ .sp-buttons-toright {
686
+ display: flex;
687
+ justify-content: right;
688
+ align-items: center;
689
+ margin-top: 16px;
690
+ }
691
+ .sp-buttons-toright button {
692
+ margin-right: 16px;
693
+ }
694
+
695
+ .sp-button-gray-base {
696
+ display: flex;
697
+ align-items: center;
698
+ user-select: none;
699
+ cursor: pointer;
700
+ transition: 0.1s all ease;
701
+ background: var(--button-background);
702
+ padding: 13px;
703
+ margin-left: 12px;
704
+ border-radius: 6px;
705
+ height: 42px;
706
+ }
707
+ .sp-button-gray-base-title {
708
+ margin-left: var(--margin-icon-text);
709
+ color: var(--button-icon-color);
710
+ }
711
+ .sp-button-gray-base ion-icon {
712
+ color: var(--button-icon-color);
713
+ font-size: var(--button-icon-size);
714
+ }
715
+ .sp-button-gray-base:hover {
716
+ background: var(--button-background-active);
717
+ }
718
+
719
+ .sp-button-gray-base-2 {
720
+ color: var(--button-icon-color);
721
+ background: var(--button-background);
722
+ padding: 6px 8px;
723
+ border-radius: 6px;
724
+ font-size: 16px;
725
+ min-width: 130px;
726
+ display: flex;
727
+ align-items: center;
728
+ justify-content: center;
729
+ user-select: none;
730
+ cursor: pointer;
731
+ }
732
+ .sp-button-gray-base-2:hover {
733
+ background: var(--button-background-active);
734
+ }
735
+
736
+ .sp-button-clear-arrow-right {
737
+ display: flex;
738
+ align-items: center;
739
+ user-select: none;
740
+ cursor: pointer;
741
+ background: none;
742
+ padding: 8px 12px;
743
+ }
744
+ .sp-button-clear-arrow-right .button-text {
745
+ text-transform: uppercase;
746
+ font-size: 15px;
747
+ color: #387CCC;
748
+ font-weight: 500;
749
+ }
750
+ .sp-button-clear-arrow-right ion-icon {
751
+ margin-left: 8px;
752
+ font-size: 18px;
753
+ color: #387CCC;
754
+ }
755
+ .sp-button-clear-arrow-right:hover {
756
+ background: none;
757
+ }
758
+
759
+ .add-container {
760
+ padding: 18px;
761
+ border: 1px solid #F2F2F2;
762
+ border-radius: 6px;
763
+ margin-bottom: 24px;
764
+ width: 100%;
765
+ cursor: pointer;
766
+ user-select: none;
767
+ }
768
+ .add-container-add {
769
+ cursor: pointer;
770
+ display: flex;
771
+ align-items: center;
772
+ justify-content: center;
773
+ }
774
+ .add-container-add-button {
775
+ margin-right: 0;
776
+ display: flex;
777
+ justify-content: center;
778
+ flex-wrap: wrap;
779
+ }
780
+ .add-container-add-button ion-icon {
781
+ font-size: 40px;
782
+ color: #898989;
783
+ margin-bottom: 4px;
784
+ }
785
+ .add-container-add-button div {
786
+ font-size: 16px;
787
+ color: #898989;
788
+ width: 100%;
789
+ text-align: center;
790
+ }
791
+
792
+ .ion-button-clear {
793
+ --padding-top: 0 !important;
794
+ --padding-bottom: 0 !important;
795
+ --padding-start: 0 !important;
796
+ }
797
+
798
+ .smart-input-vertical-wrapper {
799
+ margin-bottom: 12px;
800
+ }
801
+
802
+ .smart-inputs-max-width .smart-input {
803
+ max-width: 400px;
804
+ }
805
+
806
+ .smart-input-inline-wrapper {
807
+ display: inline-block;
808
+ }
809
+ .smart-input-inline-wrapper .smart-input {
810
+ width: 100%;
811
+ }
812
+
813
+ .smart-input {
814
+ /*height: 48px;
815
+ max-height: 48px;*/
816
+ min-width: 300px;
817
+ font-size: 13px;
818
+ }
819
+ .smart-input-top {
820
+ margin-bottom: 5px;
821
+ color: #3a3a3a;
822
+ }
823
+ .smart-input-bottom {
824
+ border: 1px solid #d8d7d7;
825
+ border-radius: 6px;
826
+ padding: 1.5px 2px;
827
+ position: relative;
828
+ display: flex;
829
+ align-items: center;
830
+ }
831
+ .smart-input-bottom:focus-within {
832
+ border-color: var(--header-bg-color);
833
+ }
834
+ .smart-input-tag {
835
+ font-weight: bold;
836
+ margin-right: 12px;
837
+ margin-left: 12px;
838
+ }
839
+ .smart-input-tag:first-child {
840
+ font-weight: bold;
841
+ margin-right: 12px;
842
+ margin-left: 0;
843
+ }
844
+ .smart-input ion-input {
845
+ width: auto;
846
+ }
847
+ .smart-input ion-select {
848
+ width: 100%;
849
+ --padding-start: 6px;
850
+ }
851
+ .smart-input-note {
852
+ position: absolute;
853
+ right: 0;
854
+ bottom: -24px;
855
+ z-index: 1000000;
856
+ font-size: 14px;
857
+ color: var(--font-color-lighter);
858
+ }
859
+ .smart-input-symbol {
860
+ width: 20px;
861
+ text-align: center;
862
+ }
863
+ .smart-input-button {
864
+ padding-left: 4px;
865
+ padding-right: 4px;
866
+ display: flex;
867
+ align-items: center;
868
+ justify-content: center;
869
+ }
870
+ .smart-input-button ion-icon {
871
+ color: var(--button-bg-primary);
872
+ font-size: 17px;
873
+ padding: 6px;
874
+ border-radius: 6px;
875
+ cursor: pointer;
876
+ }
877
+ .smart-input-button ion-icon:hover {
878
+ background: rgba(56, 152, 204, 0.09);
879
+ }
880
+
881
+ .smart-input-large {
882
+ max-width: 400px;
883
+ min-width: 400px;
884
+ }
885
+ .smart-input-large ion-select {
886
+ width: 100%;
887
+ }
888
+ .smart-input-large .smart-input-tag {
889
+ width: 100% !important;
890
+ }
891
+
892
+ .smart-input-long {
893
+ max-width: 400px;
894
+ min-width: 400px;
895
+ }
896
+
897
+ .smart-input-checkbox {
898
+ max-width: 300px;
899
+ min-width: 200px;
900
+ display: flex;
901
+ justify-content: space-between;
902
+ background: white;
903
+ border: 1px solid #e4e4e4;
904
+ border-radius: 6px;
905
+ padding: 12.5px 14px;
906
+ position: relative;
907
+ display: flex;
908
+ align-items: center;
909
+ }
910
+
911
+ .smart-input-objectReference {
912
+ height: auto;
913
+ max-height: none;
914
+ }
915
+
916
+ .smart-input-textarea {
917
+ display: block;
918
+ max-height: 500px;
919
+ height: auto;
920
+ }
921
+ .smart-input-textarea-tag {
922
+ width: 100%;
923
+ margin-bottom: 4px;
924
+ }
925
+ .smart-input-textarea ion-textarea {
926
+ --padding-start: 0px;
927
+ overflow-y: auto;
928
+ max-height: 300px;
929
+ }
930
+
931
+ .checkbox-selector-title {
932
+ font-weight: bold;
933
+ margin-bottom: 12px;
934
+ font-size: 13px;
935
+ }
936
+ .checkbox-selector-group {
937
+ display: flex;
938
+ align-items: center;
939
+ flex-wrap: wrap;
940
+ }
941
+
942
+ .group-checkbox {
943
+ display: flex;
944
+ align-items: center;
945
+ padding: 4px 8px;
946
+ cursor: pointer;
947
+ }
948
+ .group-checkbox-checkbox {
949
+ margin-right: 12px;
950
+ width: 22px;
951
+ height: 22px;
952
+ display: flex;
953
+ align-items: center;
954
+ }
955
+ .group-checkbox-checkbox ion-checkbox::part(container) {
956
+ width: 22px;
957
+ height: 22px;
958
+ padding: 4px;
959
+ }
960
+ .group-checkbox-checkbox-smaller {
961
+ margin-right: 12px;
962
+ width: 19px;
963
+ height: 19px;
964
+ display: flex;
965
+ align-items: center;
966
+ }
967
+ .group-checkbox-checkbox-smaller ion-checkbox::part(container) {
968
+ width: 19px;
969
+ height: 19px;
970
+ padding: 4px;
971
+ }
972
+ .group-checkbox-tag {
973
+ font-size: 13px;
974
+ }
975
+
976
+ .element-reference-box {
977
+ position: absolute;
978
+ display: flex;
979
+ align-items: center;
980
+ width: 100%;
981
+ max-width: 100%;
982
+ height: 100%;
983
+ background: #EDEDED;
984
+ z-index: 100000000000000;
985
+ pointer-events: none;
986
+ }
987
+ .element-reference-box-content {
988
+ display: flex;
989
+ align-items: center;
990
+ }
991
+ .element-reference-box-content-reference {
992
+ max-width: 130px;
993
+ display: flex;
994
+ align-items: center;
995
+ padding: 4px 6px;
996
+ background: #D4D4D4;
997
+ border-radius: 6px;
998
+ cursor: pointer;
999
+ }
1000
+ .element-reference-box-content-reference-label {
1001
+ margin-right: 2px;
1002
+ max-width: 100%;
1003
+ white-space: nowrap;
1004
+ overflow: hidden;
1005
+ text-overflow: ellipsis;
1006
+ font-size: 13px;
1007
+ }
1008
+ .element-reference-box-content-reference-value {
1009
+ font-size: 13px;
1010
+ }
1011
+ .element-reference-box-content-reference-delete {
1012
+ display: flex;
1013
+ align-items: center;
1014
+ font-size: 20px;
1015
+ pointer-events: all;
1016
+ }
1017
+
1018
+ .smart-input-fileselector {
1019
+ max-width: inherit;
1020
+ min-width: 250px;
1021
+ }
1022
+
1023
+ .smart-input-filebox {
1024
+ height: 100%;
1025
+ display: flex;
1026
+ align-items: center;
1027
+ justify-content: center;
1028
+ border-radius: 6px;
1029
+ position: relative;
1030
+ }
1031
+ .smart-input-filebox .element-reference-box {
1032
+ left: 0;
1033
+ max-width: 220px;
1034
+ }
1035
+ .smart-input-filebox .element-reference-box .element-reference-box-content-reference {
1036
+ max-width: 220px;
1037
+ }
1038
+ .smart-input-filebox-placeholder {
1039
+ max-width: 100%;
1040
+ display: flex;
1041
+ align-items: center;
1042
+ color: var(--button-bg-primary);
1043
+ white-space: nowrap;
1044
+ overflow: hidden;
1045
+ text-overflow: ellipsis;
1046
+ }
1047
+ .smart-input-filebox-placeholder ion-icon {
1048
+ width: 20px;
1049
+ min-width: 20px;
1050
+ margin-right: 6px;
1051
+ font-size: 20px;
1052
+ }
1053
+
1054
+ .smart-input-filebox {
1055
+ height: 35px;
1056
+ }
1057
+ .smart-input-filebox-box {
1058
+ display: flex;
1059
+ align-items: center;
1060
+ padding: 4px 6px;
1061
+ background: #D4D4D4;
1062
+ background: #bdd7f3;
1063
+ border-radius: 6px;
1064
+ color: #515151;
1065
+ cursor: pointer;
1066
+ position: relative;
1067
+ height: 100%;
1068
+ }
1069
+ .smart-input-filebox-box-text {
1070
+ white-space: nowrap;
1071
+ overflow: hidden;
1072
+ text-overflow: ellipsis;
1073
+ max-width: 230px;
1074
+ height: 100%;
1075
+ display: flex;
1076
+ align-items: center;
1077
+ }
1078
+ .smart-input-filebox-box ion-icon {
1079
+ margin-right: 6px;
1080
+ width: 20px;
1081
+ min-width: 20px;
1082
+ max-width: 20px;
1083
+ }
1084
+ .smart-input-filebox-box-delete {
1085
+ position: absolute;
1086
+ right: 0;
1087
+ min-width: initial;
1088
+ max-width: initial;
1089
+ width: initial;
1090
+ font-size: 25px;
1091
+ padding-left: 4px;
1092
+ background: #bdd7f3;
1093
+ z-index: 100000000000000000000000000000000;
1094
+ }
1095
+
1096
+ .smart-input-objselectorwidth {
1097
+ width: 100%;
1098
+ }
1099
+
1100
+ .sp-content-body {
1101
+ width: 80%;
1102
+ margin-left: 10%;
1103
+ }
1104
+
1105
+ .panel-aside {
1106
+ margin-top: 16px;
1107
+ width: 300px;
1108
+ min-height: 400px;
1109
+ border-right: 1px solid #e8e8e8;
1110
+ }
1111
+ .panel-aside-element {
1112
+ width: 100%;
1113
+ display: flex;
1114
+ align-items: center;
1115
+ cursor: pointer;
1116
+ padding: 8px;
1117
+ border-bottom: 1px solid #e8e8e8;
1118
+ }
1119
+ .panel-aside-element-left {
1120
+ margin-right: 8px;
1121
+ }
1122
+ .panel-aside-element-img {
1123
+ width: 40px;
1124
+ border-radius: 50%;
1125
+ }
1126
+ .panel-aside-element-img img {
1127
+ width: 100%;
1128
+ }
1129
+ .panel-aside-element-title {
1130
+ color: var(--font-color);
1131
+ font-weight: bold;
1132
+ font-size: 15px;
1133
+ }
1134
+ .panel-aside-element-subtitle {
1135
+ color: var(--font-color-lighter);
1136
+ font-size: 15px;
1137
+ }
1138
+ .panel-aside-element:hover {
1139
+ background: var(--element-bg-color-active);
1140
+ }
1141
+
1142
+ .modal-header {
1143
+ width: 100%;
1144
+ display: flex;
1145
+ justify-content: space-between;
1146
+ align-items: center;
1147
+ background: white;
1148
+ position: fixed;
1149
+ top: 0;
1150
+ z-index: 10000000000000;
1151
+ padding: 16px;
1152
+ }
1153
+ .modal-header-title {
1154
+ font-size: 15px;
1155
+ font-weight: 600;
1156
+ color: #000000;
1157
+ margin: 0;
1158
+ }
1159
+ .modal-header-buttons {
1160
+ display: flex;
1161
+ align-items: center;
1162
+ }
1163
+ .modal-header-buttons button {
1164
+ margin-left: 8px;
1165
+ height: 42px;
1166
+ }
1167
+
1168
+ .modal-content {
1169
+ margin-top: 82px;
1170
+ }
1171
+
1172
+ .aside-modal-header {
1173
+ display: flex;
1174
+ justify-content: space-between;
1175
+ align-items: center;
1176
+ }
1177
+ .aside-modal-header-title {
1178
+ font-size: 18px;
1179
+ font-weight: bold;
1180
+ }
1181
+
1182
+ .types-accordion svg {
1183
+ width: 8px !important;
1184
+ }
1185
+ .types-accordion ion-accordion {
1186
+ width: 94%;
1187
+ --background: gray!important;
1188
+ }
1189
+ .types-accordion ion-accordion ion-item {
1190
+ --padding-top: 8px;
1191
+ --padding-bottom: 8px;
1192
+ }
1193
+ .types-accordion ion-accordion ion-item ion-label {
1194
+ font-size: 18px;
1195
+ }
1196
+ .types-accordion ion-accordion ion-item[slot=header] {
1197
+ --background: rgba(245, 245, 245, 0.548)!important;
1198
+ }
1199
+
1200
+ .filter-secundary-btn {
1201
+ padding-left: 10px;
1202
+ cursor: pointer;
1203
+ color: var(--header-bg-color);
1204
+ }
1205
+
1206
+ .small-padding {
1207
+ padding: 6px;
1208
+ }
1209
+
1210
+ .text-red {
1211
+ color: rgb(228, 65, 65);
1212
+ }
1213
+
1214
+ .sp-modal2 {
1215
+ margin-top: 80px;
1216
+ padding: 16px;
1217
+ }
1218
+ .sp-modal2-advanced-filters b {
1219
+ font-size: 15px;
1220
+ }
1221
+ .sp-modal2-title {
1222
+ font-weight: bold;
1223
+ margin-bottom: 12px;
1224
+ font-size: 15px;
1225
+ }
1226
+ .sp-modal2-title:first-child {
1227
+ padding-bottom: 0;
1228
+ }
1229
+ .sp-modal2-subtitle {
1230
+ color: var(--subtitle-font-color-darker);
1231
+ margin-bottom: 24px;
1232
+ line-height: 22px;
1233
+ }
1234
+ .sp-modal2-content {
1235
+ margin-top: 24px;
1236
+ }
1237
+ .sp-modal2-content-section {
1238
+ margin-bottom: 16px;
1239
+ }
1240
+ .sp-modal2-card {
1241
+ border-radius: 6px;
1242
+ box-shadow: 1px 1px 5px 1px rgba(241, 241, 241, 0.7);
1243
+ margin-bottom: 16px;
1244
+ }
1245
+ .sp-modal2-card-title {
1246
+ font-weight: 600;
1247
+ font-size: 15px;
1248
+ padding: 16px;
1249
+ cursor: pointer;
1250
+ user-select: none;
1251
+ position: relative;
1252
+ display: flex;
1253
+ align-items: center;
1254
+ }
1255
+ .sp-modal2-card-title i {
1256
+ margin-right: 8px;
1257
+ color: rgb(70, 70, 70);
1258
+ font-size: 20px;
1259
+ }
1260
+ .sp-modal2-card-title-tag {
1261
+ position: absolute;
1262
+ top: 7px;
1263
+ left: 8px;
1264
+ font-size: 14px;
1265
+ color: var(--subtitle-font-color-darker);
1266
+ display: flex;
1267
+ align-items: center;
1268
+ }
1269
+ .sp-modal2-card-title-tag ion-icon {
1270
+ margin-right: 4px;
1271
+ }
1272
+ .sp-modal2-card-title-buttons {
1273
+ position: absolute;
1274
+ top: 53%;
1275
+ transform: translateY(-50%);
1276
+ right: 18px;
1277
+ display: flex;
1278
+ align-items: center;
1279
+ }
1280
+ .sp-modal2-card-title-buttons-button {
1281
+ margin-left: 8px;
1282
+ color: var(--subtitle-font-color-darker);
1283
+ font-size: 18px;
1284
+ }
1285
+ .sp-modal2-card-title-span {
1286
+ color: var(--subtitle-font-color-darker);
1287
+ }
1288
+ .sp-modal2-card-title-withtag {
1289
+ padding-top: 28px;
1290
+ }
1291
+ .sp-modal2-card-content {
1292
+ padding: 16px;
1293
+ }
1294
+ .sp-modal2-card-title-collapsed {
1295
+ margin-bottom: 0;
1296
+ }
1297
+ .sp-modal2-card-title-no-bottom {
1298
+ margin-bottom: 0;
1299
+ }
1300
+ .sp-modal2-card-subtitle {
1301
+ font-size: 16px;
1302
+ color: var(--subtitle-font-color-darker);
1303
+ line-height: 22px;
1304
+ margin-bottom: 16px;
1305
+ padding: 0 16px;
1306
+ }
1307
+ .sp-modal2-card-input {
1308
+ margin-bottom: 20px;
1309
+ }
1310
+
1311
+ .checkbox-and-text {
1312
+ display: flex;
1313
+ align-items: center;
1314
+ margin-bottom: 12px;
1315
+ }
1316
+ .checkbox-and-text ion-checkbox {
1317
+ margin-right: 8px;
1318
+ }
1319
+
1320
+ .modtemplate-header {
1321
+ width: 100%;
1322
+ border-bottom: 1px solid rgb(226, 226, 226);
1323
+ display: flex;
1324
+ justify-content: space-between;
1325
+ align-items: center;
1326
+ padding: 6px 16px;
1327
+ }
1328
+ .modtemplate-header-left {
1329
+ font-size: 18px;
1330
+ }
1331
+ .modtemplate-header-right {
1332
+ width: 40px;
1333
+ height: 40px;
1334
+ display: flex;
1335
+ justify-content: center;
1336
+ align-items: center;
1337
+ cursor: pointer;
1338
+ }
1339
+ .modtemplate-header-right ion-icon {
1340
+ font-size: 20px;
1341
+ }
1342
+ .modtemplate-content {
1343
+ padding: 16px;
1344
+ height: 600px;
1345
+ overflow-y: scroll;
1346
+ }
1347
+ .modtemplate-item1 {
1348
+ width: 100%;
1349
+ border: 1px solid rgb(226, 226, 226);
1350
+ padding: 16px;
1351
+ cursor: pointer;
1352
+ border-radius: 6px;
1353
+ margin-bottom: 16px;
1354
+ }
1355
+ .modtemplate-item1-header {
1356
+ font-size: 18px;
1357
+ font-weight: bold;
1358
+ max-width: 500px;
1359
+ }
1360
+ .modtemplate-item1-properties {
1361
+ display: flex;
1362
+ align-items: flex-start;
1363
+ margin-top: 16px;
1364
+ }
1365
+ .modtemplate-item1-property {
1366
+ margin-right: 32px;
1367
+ }
1368
+ .modtemplate-item1-property-title {
1369
+ font-size: 14px;
1370
+ color: gray;
1371
+ }
1372
+ .modtemplate-item1-property-value {
1373
+ font-size: 16px;
1374
+ white-space: nowrap;
1375
+ overflow: hidden;
1376
+ text-overflow: ellipsis;
1377
+ max-width: 250px;
1378
+ }
1379
+
1380
+ ion-alert.confirmation-alert {
1381
+ --width: 150px;
1382
+ z-index: 1000000000000000000000000000000000000000000000000000000000 !important;
1383
+ --height: 100px;
1384
+ }
1385
+
1386
+ .confirmation-alert {
1387
+ z-index: 1000000000000000000000000000000000000000000000000000000000;
1388
+ }
1389
+ .confirmation-alert .alert-wrapper {
1390
+ --max-width: auto;
1391
+ --width: 350px;
1392
+ --height: auto;
1393
+ padding: 8px;
1394
+ }
1395
+
1396
+ .alert-button-confirm {
1397
+ background: var(--button-bg-primary) !important;
1398
+ color: var(--header-font-color) !important;
1399
+ padding: 16px !important;
1400
+ border-radius: 6px !important;
1401
+ font-size: 16px !important;
1402
+ min-width: 130px !important;
1403
+ margin: 10px !important;
1404
+ display: flex !important;
1405
+ align-items: center !important;
1406
+ justify-content: center !important;
1407
+ user-select: none !important;
1408
+ }
1409
+
1410
+ .alert-button-cancel {
1411
+ background: white !important;
1412
+ color: var(--button-bg-primary) !important;
1413
+ border: 2px solid var(--button-bg-primary) !important;
1414
+ padding: 16px !important;
1415
+ border-radius: 6px !important;
1416
+ font-size: 16px !important;
1417
+ min-width: 130px !important;
1418
+ margin: 10px !important;
1419
+ display: flex !important;
1420
+ align-items: center !important;
1421
+ justify-content: center !important;
1422
+ user-select: none !important;
1423
+ }
1424
+
1425
+ .mb-0 {
1426
+ margin-bottom: 0 !important;
1427
+ }
1428
+
1429
+ .pt-16 {
1430
+ padding-top: 16px !important;
1431
+ }
1432
+
1433
+ .tree-level {
1434
+ list-style-type: none;
1435
+ margin-left: 40px;
1436
+ padding-left: 15px;
1437
+ border-left: 2px solid #ddd;
1438
+ width: 540px;
1439
+ }
1440
+
1441
+ .tree-level > li {
1442
+ margin-top: 10px;
1443
+ position: relative;
1444
+ }
1445
+
1446
+ .tree-level > li > div {
1447
+ display: flex;
1448
+ align-items: center;
1449
+ background-color: #f5f5f5;
1450
+ border-radius: 5px;
1451
+ padding: 10px;
1452
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
1453
+ transition: all 0.3s ease;
1454
+ gap: 15px;
1455
+ }
1456
+
1457
+ .tree-level > li > div > * {
1458
+ margin-right: 15px;
1459
+ }
1460
+
1461
+ .tree-level > li > div:hover {
1462
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
1463
+ transform: translateY(-2px);
1464
+ }
1465
+
1466
+ .tree-add-button {
1467
+ background-color: #3F51B5;
1468
+ border: none;
1469
+ border-radius: 3px;
1470
+ color: white;
1471
+ cursor: pointer;
1472
+ font-size: 14px;
1473
+ padding: 5px 15px;
1474
+ text-align: center;
1475
+ text-decoration: none;
1476
+ display: inline-block;
1477
+ transition-duration: 0.4s;
1478
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
1479
+ margin-left: 10px;
1480
+ }
1481
+
1482
+ .tree-delete-button {
1483
+ font-size: 18px;
1484
+ color: red;
1485
+ }
1486
+
1487
+ .tree-delete-button:hover {
1488
+ transform: scale(1.18);
1489
+ }
1490
+
1491
+ .tree-add-button:hover {
1492
+ background-color: #303F9F;
1493
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
1494
+ }
1495
+
1496
+ .tree-add-button:active {
1497
+ transform: scale(0.98);
1498
+ }
1499
+
1500
+ .tree-level select {
1501
+ background-color: #f9f9f9;
1502
+ border: 1px solid #ccc;
1503
+ border-radius: 3px;
1504
+ padding: 5px 10px;
1505
+ font-size: 14px;
1506
+ outline: none;
1507
+ transition: border-color 0.3s ease;
1508
+ }
1509
+
1510
+ .tree-level select:hover {
1511
+ border-color: #3F51B5;
1512
+ }
1513
+
1514
+ .type-label {
1515
+ color: #696868;
1516
+ font-size: 0.9em;
1517
+ margin-right: 5px;
1518
+ }
1519
+
1520
+ :root {
1521
+ --ds-white-font: white;
1522
+ --ds-gray-font: #5B5B5B;
1523
+ --ds-light-gray-font: #797979;
1524
+ --ds-dark-gray-font: #3D3D3D;
1525
+ --ds-black-font: black;
1526
+ --ds-white-background: white;
1527
+ --ds-light-gray-background: #fbfbfb;
1528
+ --ds-gray-background: #B9B9B9;
1529
+ --ds-white-background-hover: #f0f0f0;
1530
+ --ds-primary-color: #184ED9;
1531
+ --ds-primary-color-hover: #1648c7;
1532
+ --ds-primary-color-ripple: #4671df;
1533
+ --ds-primary-color-smooth-background: rgba(24, 78, 216, .1);
1534
+ --ds-primary-color-apagado: #4A69B9;
1535
+ --ds-danger-color: #DA6453;
1536
+ --ds-danger-color-hover: #d15a47;
1537
+ --ds-danger-color-ripple: #e27e6a;
1538
+ --ds-secondary-color: #F0F0F0;
1539
+ --ds-secondary-color-hover: #e7e7e7;
1540
+ --ds-secondary-color-ripple: #f0f0f0;
1541
+ --ds-tertiary-color: #21BB1E;
1542
+ --ds-tertiary-color-hover: #1eaf1c;
1543
+ --ds-tertiary-color-ripple: rgb(49, 187, 47);
1544
+ --ds-empty-color: transparent;
1545
+ --ds-empty-color-hover: #f5f5f5;
1546
+ --ds-empty-color-ripple: #f8f8f8;
1547
+ --ds-border-color: #ebeaea;
1548
+ --ds-scrollbar-color: #b9b9b9;
1549
+ --ds-label-margin-bottom: 5px;
1550
+ --ds-header-and-content-margin-bottom: 16px;
1551
+ --ds-box-padding: 16px;
1552
+ --ds-box-padding-small: 8px;
1553
+ --ds-box-border-radius: 6px;
1554
+ --ds-margin-icon-and-content: 8px;
1555
+ --ds-margin-icon-and-content-smaller: 4px;
1556
+ --ds-input-margin-bottom: 18px;
1557
+ --ds-big-resizer-width: 3.5px;
1558
+ --ds-margin-between-items: 8px;
1559
+ --ds-global-font-size: 13px;
1560
+ --ds-global-font-size-bigger: 14px;
1561
+ --ds-global-font-size-large: 15px;
1562
+ --ds-input-font-family: "Inter", sans-serif;
1563
+ --ds-input-font-size: 13px;
1564
+ --ds-input-height: 39px;
1565
+ --ds-input-border-radius: 6px;
1566
+ --ds-input-border: 1px solid var(--ds-border-color);
1567
+ --ds-input-border-active: 2px solid var(--ds-primary-color);
1568
+ --ds-input-padding-horizontal: 16px;
1569
+ --ds-input-padding-end: 20px;
1570
+ --ds-input-placeholder-color: #9496A3;
1571
+ --ds-input-transition: 0.1s all ease;
1572
+ --ds-input-suggestions-padding: 8px;
1573
+ --ds-input-suggestions-max-height: 300px;
1574
+ --ds-input-symbol-margin-right: 8px;
1575
+ --ds-input-textarea-height: 100px;
1576
+ --ds-input-textarea-padding: 8px;
1577
+ --ds-item-font-family: "Inter", sans-serif;
1578
+ --ds-item-font-size: 13px;
1579
+ --ds-item-font-color: var(--ds-gray-font);
1580
+ --ds-item-height: 38px;
1581
+ --ds-item-padding-horizontal: 10px;
1582
+ --ds-item-background: #F9F9F9;
1583
+ --ds-item-background-hover: var(--ds-white-background-hover);
1584
+ --ds-item-border-radius: 6px;
1585
+ --ds-item-checkbox-margin-right: 8px;
1586
+ --ds-item-margin-between-items: 10px;
1587
+ --ds-item-icon-font-size: 20px;
1588
+ --ds-item-icon-font-size-smaller: 18px;
1589
+ --ds-item-small-height: 28px;
1590
+ --ds-item-small-padding-horizontal: 12px;
1591
+ --ds-item-small-font-size: 12px;
1592
+ --ds-item-small-icon-font-size: 15px;
1593
+ --ds-item-small-background: var(--ds-primary-color-apagado);
1594
+ --ds-item-tree-background: var(--ds-white-background);
1595
+ --ds-item-tree-background-active: #F9F9F9;
1596
+ --ds-item-tree-height: 31px;
1597
+ --ds-item-tree-color: var(--ds-gray-font);
1598
+ --ds-item-tree-arrow-font-size: 11px;
1599
+ --ds-item-tree-icon-font-size: 15px;
1600
+ --ds-item-tree-icons-margin-right: 4px;
1601
+ --ds-item-tree-folder-margin-right: 6px;
1602
+ --ds-item-tree-border-radius: 4px;
1603
+ --ds-item-chip-padding: 3px 8px;
1604
+ --ds-item-chip-border-radius: 6px;
1605
+ --ds-item-chip-font-size: 11px;
1606
+ --ds-item-chip-primary-background: rgba(24, 78, 216, .1);
1607
+ --ds-item-chip-primary-font-color: var(--ds-primary-color);
1608
+ --ds-item-title-font-size: 13px;
1609
+ --ds-item-title-font-color: var(--ds-dark-gray-font);
1610
+ --ds-item-title-font-weight: 500;
1611
+ --ds-item-title-margin-bottom: 4px;
1612
+ --ds-item-subtitle-font-size: 12px;
1613
+ --ds-item-subtitle-font-color: var(--ds-light-gray-font);
1614
+ --ds-item-danger-background: var(--ds-danger-color);
1615
+ --ds-item-danger-background-hover: var(--ds-danger-color-hover);
1616
+ --ds-item-danger-font-color: var(--ds-white-font);
1617
+ --ds-element-reference-content-font-family: "Inter", sans-serif;
1618
+ --ds-element-reference-title-font-family: "Poppins", sans-serif;
1619
+ --ds-element-reference-title-font-size: 13px;
1620
+ --ds-element-reference-title-font-color: var(--ds-dark-gray-font);
1621
+ --ds-element-reference-subtitle-font-family: "Poppins", sans-serif;
1622
+ --ds-element-reference-subtitle-font-size: 12px;
1623
+ --ds-element-reference-subtitle-bigger-font-size: 13px;
1624
+ --ds-element-reference-subtitle-font-color: var(--ds-light-gray-font);
1625
+ --ds-element-reference-padding: 16px;
1626
+ --ds-element-reference-padding-bottom: 8px;
1627
+ --ds-element-reference-border-radius: 6px;
1628
+ --ds-element-reference-heading-margin-bottom: 16px;
1629
+ --ds-element-references-margin-bottom: 12px;
1630
+ --ds-element-reference-hover-background: var(--ds-white-background-hover);
1631
+ --ds-modal-background: var(--ds-white-background);
1632
+ --ds-modal-z-index: 1000000000000 !important;
1633
+ --ds-modal-border-radius: 6px;
1634
+ --ds-modal-header-title-font-family: "Poppins", sans-serif;
1635
+ --ds-modal-header-title-font-size: 16px;
1636
+ --ds-modal-header-title-font-color: var(--ds-black-font);
1637
+ --ds-modal-header-title-margin-right: 16px;
1638
+ --ds-modal-header-subtitle-font-family: "Poppins", sans-serif;
1639
+ --ds-modal-header-subtitle-font-size: 12px;
1640
+ --ds-modal-header-subtitle-font-color: var(--ds-light-gray-font);
1641
+ --ds-modal-header-padding: var(--ds-box-padding);
1642
+ --ds-modal-header-padding-small: var(--ds-box-padding-small);
1643
+ --ds-modal-header-padding-vertical: 12px;
1644
+ --ds-modal-header-border-bottom: 1px solid var(--ds-border-color);
1645
+ --ds-modal-header-buttons-margin-right: 16px;
1646
+ --ds-modal-border-radius: var(--ds-box-border-radius);
1647
+ --ds-modal-primary-width: 400px;
1648
+ --ds-modal-primary-height: 100%;
1649
+ --ds-modal-secondary-width: 600px;
1650
+ --ds-modal-secondary-width-2: 700px;
1651
+ --ds-modal-secondary-height: 100%;
1652
+ --ds-modal-row-expanded-width: 95%;
1653
+ --ds-modal-row-expanded-height: 600px;
1654
+ --ds-button-font-size: 13px;
1655
+ --ds-button-border-radius: 6px;
1656
+ --ds-button-padding-horizontal: 16px;
1657
+ --ds-button-padding-horizontal-smaller: 10px;
1658
+ --ds-button-height: 36px;
1659
+ --ds-button-small-font-size: 11px;
1660
+ --ds-button-small-border-radius: 6px;
1661
+ --ds-button-small-padding-horizontal: 9.5px;
1662
+ --ds-button-small-height: 28px;
1663
+ --ds-button-primary-background: var(--ds-primary-color);
1664
+ --ds-button-primary-color: white;
1665
+ --ds-button-secondary-background: var(--ds-secondary-color);
1666
+ --ds-button-secondary-color: var(--ds-gray-font);
1667
+ --ds-button-tertiary-background: var(--ds-tertiary-color);
1668
+ --ds-button-tertiary-color: var(--ds-white-font);
1669
+ --ds-button-empty-background: transparent;
1670
+ --ds-button-empty-color: var(--ds-gray-font);
1671
+ --ds-button-empty-border: 0 0 0 1px var(--ds-border-color);
1672
+ --ds-input-label-font-size: 13px;
1673
+ --ds-input-label-color: var(--ds-dark-gray-font);
1674
+ --ds-input-searchbar-icon-size: 18px;
1675
+ --ds-buttonsgroup-navigation-background: var(--ds-white-background);
1676
+ --ds-buttonsgroup-navigation-content-margin: 0 5px;
1677
+ --ds-buttonsgroup-navigation-button-color: var(--ds-gray-font);
1678
+ --ds-buttonsgroup-navigation-button-icon-size: 17px;
1679
+ --ds-screen-kanban-column-width: 290px;
1680
+ --ds-screen-kanban-column-height: 100%;
1681
+ --ds-screen-kanban-top-border-radius: 16px;
1682
+ --ds-screen-kanban-bottom-border-radius: 10px;
1683
+ --ds-screen-kanba-column-margin-right: 18px;
1684
+ --ds-screen-kanban-content-padding: 5px;
1685
+ --ds-screen-kanban-content-min-height: 200px;
1686
+ --ds-screen-kanban-content-border-radius: 10px;
1687
+ --ds-screen-kanban-content-background-color: rgb(250, 250, 250);
1688
+ --ds-screen-background: #F1F3F5;
1689
+ --ds-screen-header-background: var(--ds-white-background);
1690
+ --ds-screen-header-padding-vertical: 8px;
1691
+ --ds-screen-header-padding-horizontal: 16px;
1692
+ --ds-screen-header-border-color: var(--ds-border-color);
1693
+ --ds-screen-header-border-radius: 12px;
1694
+ --ds-screen-header-title-font-family: "Poppins", sans-serif;
1695
+ --ds-screen-header-title-font-size: 16px;
1696
+ --ds-screen-header-results-count-font-size: 13px;
1697
+ --ds-screen-header-title-font-color: var(--ds-black-font);
1698
+ --ds-screen-header-elements-margin-right: 16px;
1699
+ --ds-screen-header-col-background: var(--ds-light-gray-background);
1700
+ --ds-screen-table-background: var(--ds-white-background);
1701
+ --ds-screen-table-border-radius: 6px;
1702
+ --ds-screen-table-resizer-width: 2px;
1703
+ --ds-screen-table-resizer-background: var(--ds-border-color);
1704
+ --ds-screen-table-header-col-padding-vertical: 7px;
1705
+ --ds-screen-table-header-col-padding-horizontal: 8px;
1706
+ --ds-screen-table-content-row-height: 36px;
1707
+ --ds-screen-table-content-row-hover-background: var(--ds-white-background-hover);
1708
+ --ds-screen-calendar-header-cell-font-family: "Inter", sans-serif;
1709
+ --ds-screen-calendar-header-cell-border: 1px solid var(--ds-border-color);
1710
+ --ds-screen-calendar-header-cell-font-size: 14px;
1711
+ --ds-screen-calendar-header-cell-font-color: var(--ds-light-gray-font);
1712
+ --ds-screen-calendar-header-cell-padding: 12px;
1713
+ --ds-screen-table-row-expanded-resizer-height: 2.5px;
1714
+ --ds-screen-table-row-expanded-resizer-background: var(--ds-border-color);
1715
+ --ds-row-expanded-aside-resizer-width: 2px;
1716
+ --ds-row-expanded-aside-resizer-background: var(--ds-border-color);
1717
+ --ds-row-expanded-aside-padding-vertical: 8px;
1718
+ --ds-row-expanded-aside-padding-horizontal: 8px;
1719
+ --ds-row-expanded-body-padding: var(--ds-box-padding);
1720
+ --ds-row-expanded-secondary-aside-padding: var(--ds-box-padding);
1721
+ --ds-floating-block-box-shadow: 0 1px 3px #E5E5E5 !important;
1722
+ --ds-popover-border-radius: 6px;
1723
+ --ds-popover-padding: 8px;
1724
+ --ds-popover-primary-width: auto;
1725
+ --ds-popover-z-index: 200030000 !important;
1726
+ --ds-totalum-aside-background: var(--ds-white-background);
1727
+ --ds-aside-width: 350px;
1728
+ --ds-card-margin-bottom-between-data: 12px;
1729
+ --ds-card-background: var(--ds-white-background);
1730
+ --ds-card-background-hover: var(--ds-white-background-hover);
1731
+ --ds-card-border-radius: 6px;
1732
+ --ds-card-box-shadow: var(--ds-floating-block-box-shadow);
1733
+ --ds-card-padding: var(--ds-box-padding);
1734
+ --ds-card-gallery-height: 400px;
1735
+ --ds-card-gallery-width: 300px;
1736
+ --ds-card-kanban-height: 190px;
1737
+ --ds-card-kanban-max-width: 274px;
1738
+ --ds-card-kanban-width: 100%;
1739
+ --ds-card-image-footer-font-size: 9px;
1740
+ --ds-card-image-width: 100%;
1741
+ --ds-card-image-height: 180px;
1742
+ --ds-header-notsavedchanges-color: var(--ds-danger-color);
1743
+ --ds-header-notsavedchanges-font-size: 14px;
1744
+ --ds-font-family: "Poppins", sans-serif;
1745
+ --ds-font-color: var(--ds-dark-gray-font);
1746
+ --ds-h1-font-color: var(--ds-black-font);
1747
+ --ds-h1-font-size: 16px;
1748
+ --ds-h2-font-size: 15px;
1749
+ --ds-text-font-size: 13px;
1750
+ --ds-text-font-family: "Inter", sans-serif;
1751
+ --ds-text-font-color: var(--ds-dark-gray-font);
1752
+ }
1753
+
1754
+ * {
1755
+ font-family: "Inter", sans-serif;
1756
+ }
1757
+
1758
+ .ds-buttonsgroup-navigation, .ds-button-icon-only, .ds-button-empty-icon-only, .ds-button-empty-dropdown, .ds-button-empty, .ds-button-tertiary, .ds-button-secondary, .ds-button-primary {
1759
+ display: flex;
1760
+ align-items: center;
1761
+ justify-content: center;
1762
+ font-size: var(--ds-button-font-size);
1763
+ border-radius: var(--ds-button-border-radius);
1764
+ padding: 0 var(--ds-button-padding-horizontal);
1765
+ height: var(--ds-button-height);
1766
+ user-select: none;
1767
+ transition: 0.2s all ease;
1768
+ }
1769
+ .ds-buttonsgroup-navigation ion-icon, .ds-button-icon-only ion-icon, .ds-button-empty-icon-only ion-icon, .ds-button-empty-dropdown ion-icon, .ds-button-empty ion-icon, .ds-button-tertiary ion-icon, .ds-button-secondary ion-icon, .ds-button-primary ion-icon {
1770
+ font-size: 20px;
1771
+ width: 20px;
1772
+ min-width: 20px;
1773
+ max-width: 20px;
1774
+ margin-right: 4px;
1775
+ }
1776
+ .ds-buttonsgroup-navigation:disabled, .ds-button-icon-only:disabled, .ds-button-empty-icon-only:disabled, .ds-button-empty-dropdown:disabled, .ds-button-empty:disabled, .ds-button-tertiary:disabled, .ds-button-secondary:disabled, .ds-button-primary:disabled, [disabled].ds-buttonsgroup-navigation, [disabled].ds-button-icon-only, [disabled].ds-button-empty-icon-only, [disabled].ds-button-empty-dropdown, [disabled].ds-button-empty, [disabled].ds-button-tertiary, [disabled].ds-button-secondary, [disabled].ds-button-primary {
1777
+ cursor: not-allowed;
1778
+ pointer-events: none;
1779
+ opacity: 0.4;
1780
+ transition: 0.2s all ease;
1781
+ }
1782
+ .ds-buttonsgroup-navigation ion-spinner, .ds-button-icon-only ion-spinner, .ds-button-empty-icon-only ion-spinner, .ds-button-empty-dropdown ion-spinner, .ds-button-empty ion-spinner, .ds-button-tertiary ion-spinner, .ds-button-secondary ion-spinner, .ds-button-primary ion-spinner {
1783
+ color: white;
1784
+ width: 23px;
1785
+ margin-right: 8px;
1786
+ }
1787
+ .ds-buttonsgroup-navigation ion-spinner circle, .ds-button-icon-only ion-spinner circle, .ds-button-empty-icon-only ion-spinner circle, .ds-button-empty-dropdown ion-spinner circle, .ds-button-empty ion-spinner circle, .ds-button-tertiary ion-spinner circle, .ds-button-secondary ion-spinner circle, .ds-button-primary ion-spinner circle {
1788
+ stroke-width: 6px;
1789
+ }
1790
+
1791
+ .ds-button-magicwand-completed, .ds-button-tertiary-small, .ds-button-secondary-small, .ds-button-primary-small {
1792
+ display: flex;
1793
+ align-items: center;
1794
+ justify-content: center;
1795
+ font-size: var(--ds-button-small-font-size);
1796
+ border-radius: var(--ds-button-small-border-radius);
1797
+ padding: 0 var(--ds-button-small-padding-horizontal);
1798
+ height: var(--ds-button-small-height);
1799
+ user-select: none;
1800
+ }
1801
+ .ds-button-magicwand-completed ion-icon, .ds-button-tertiary-small ion-icon, .ds-button-secondary-small ion-icon, .ds-button-primary-small ion-icon {
1802
+ font-size: 16px;
1803
+ margin-right: 4px;
1804
+ }
1805
+ .ds-button-magicwand-completed ion-spinner, .ds-button-tertiary-small ion-spinner, .ds-button-secondary-small ion-spinner, .ds-button-primary-small ion-spinner {
1806
+ color: white;
1807
+ width: 16px;
1808
+ margin-right: 8px;
1809
+ }
1810
+ .ds-button-magicwand-completed ion-spinner circle, .ds-button-tertiary-small ion-spinner circle, .ds-button-secondary-small ion-spinner circle, .ds-button-primary-small ion-spinner circle {
1811
+ stroke-width: 4px;
1812
+ }
1813
+
1814
+ .ds-button-primary {
1815
+ background: var(--ds-button-primary-background);
1816
+ color: var(--ds-button-primary-color);
1817
+ min-width: 85px;
1818
+ /*&:disabled, &[disabled] {
1819
+ background: var(--ds-primary-color-disabled);
1820
+ }*/
1821
+ background-position: center;
1822
+ transition: background 0.6s;
1823
+ }
1824
+ .ds-button-primary:hover {
1825
+ background: var(--ds-button-primary-background) radial-gradient(circle, transparent 1%, var(--ds-primary-color-hover) 1%) center/15000%;
1826
+ transition: 0.6s all ease;
1827
+ }
1828
+ .ds-button-primary:active {
1829
+ background-color: var(--ds-primary-color-ripple);
1830
+ background-size: 100%;
1831
+ transition: background 0s;
1832
+ }
1833
+
1834
+ .ds-button-primary-small {
1835
+ background: var(--ds-button-primary-background);
1836
+ color: var(--ds-button-primary-color);
1837
+ background-position: center;
1838
+ transition: background 0.6s;
1839
+ }
1840
+ .ds-button-primary-small:hover {
1841
+ background: var(--ds-button-primary-background) radial-gradient(circle, transparent 1%, var(--ds-primary-color-hover) 1%) center/15000%;
1842
+ transition: 0.6s all ease;
1843
+ }
1844
+ .ds-button-primary-small:active {
1845
+ background-color: var(--ds-primary-color-ripple);
1846
+ background-size: 100%;
1847
+ transition: background 0s;
1848
+ }
1849
+
1850
+ .ds-button-primary-small-danger {
1851
+ background: var(--ds-danger-color);
1852
+ color: var(--ds-button-primary-color);
1853
+ background-position: center;
1854
+ transition: background 0.6s;
1855
+ }
1856
+ .ds-button-primary-small-danger:hover {
1857
+ background: var(--ds-danger-color) radial-gradient(circle, transparent 1%, var(--ds-danger-color-hover) 1%) center/15000%;
1858
+ transition: 0.6s all ease;
1859
+ }
1860
+ .ds-button-primary-small-danger:active {
1861
+ background-color: var(--ds-danger-color-ripple);
1862
+ background-size: 100%;
1863
+ transition: background 0s;
1864
+ }
1865
+
1866
+ .ds-button-secondary {
1867
+ background: var(--ds-button-secondary-background);
1868
+ color: var(--ds-button-secondary-color);
1869
+ background-position: center;
1870
+ transition: background 0.6s;
1871
+ }
1872
+ .ds-button-secondary:hover {
1873
+ background: var(--ds-button-secondary-background) radial-gradient(circle, transparent 1%, var(--ds-secondary-color-hover) 1%) center/15000%;
1874
+ transition: 0.6s all ease;
1875
+ }
1876
+ .ds-button-secondary:active {
1877
+ background-color: var(--ds-secondary-color-ripple);
1878
+ background-size: 100%;
1879
+ transition: background 0s;
1880
+ }
1881
+
1882
+ .ds-button-secondary-small {
1883
+ background: var(--ds-button-secondary-background);
1884
+ color: var(--ds-button-secondary-color);
1885
+ background-position: center;
1886
+ transition: background 0.6s;
1887
+ }
1888
+ .ds-button-secondary-small ion-spinner {
1889
+ color: var(--ds-button-secondary-color);
1890
+ }
1891
+ .ds-button-secondary-small:hover {
1892
+ background: var(--ds-button-secondary-background) radial-gradient(circle, transparent 1%, var(--ds-secondary-color-hover) 1%) center/15000%;
1893
+ transition: 0.6s all ease;
1894
+ }
1895
+ .ds-button-secondary-small:active {
1896
+ background-color: var(--ds-secondary-color-ripple);
1897
+ background-size: 100%;
1898
+ transition: background 0s;
1899
+ }
1900
+
1901
+ .ds-button-tertiary {
1902
+ background: var(--ds-button-tertiary-background);
1903
+ color: var(--ds-button-tertiary-color);
1904
+ background-position: center;
1905
+ transition: background 0.6s;
1906
+ }
1907
+ .ds-button-tertiary:hover {
1908
+ background: var(--ds-button-tertiary-background) radial-gradient(circle, transparent 1%, var(--ds-tertiary-color-hover) 1%) center/15000%;
1909
+ transition: 0.6s all ease;
1910
+ }
1911
+ .ds-button-tertiary:active {
1912
+ background-color: var(--ds-tertiary-color-ripple);
1913
+ background-size: 100%;
1914
+ transition: background 0s;
1915
+ }
1916
+
1917
+ .ds-button-tertiary-small {
1918
+ background: var(--ds-button-tertiary-background);
1919
+ color: var(--ds-button-tertiary-color);
1920
+ background-position: center;
1921
+ transition: background 0.6s;
1922
+ }
1923
+ .ds-button-tertiary-small:hover {
1924
+ background: var(--ds-button-tertiary-background) radial-gradient(circle, transparent 1%, var(--ds-tertiary-color-hover) 1%) center/15000%;
1925
+ transition: 0.6s all ease;
1926
+ }
1927
+ .ds-button-tertiary-small:active {
1928
+ background-color: var(--ds-tertiary-color-ripple);
1929
+ background-size: 100%;
1930
+ transition: background 0s;
1931
+ }
1932
+
1933
+ .ds-button-magicwand-completed {
1934
+ transition: none;
1935
+ background: var(--ds-button-tertiary-background);
1936
+ color: var(--ds-button-tertiary-color);
1937
+ }
1938
+ .ds-button-magicwand-completed:hover {
1939
+ transition: none;
1940
+ background: var(--ds-button-secondary-background);
1941
+ color: var(--ds-button-secondary-color);
1942
+ }
1943
+ .ds-button-magicwand-completed:hover .ds-button-magicwand-completed-completed {
1944
+ display: none;
1945
+ }
1946
+ .ds-button-magicwand-completed:hover .ds-button-magicwand-completed-undo {
1947
+ display: flex;
1948
+ align-items: center;
1949
+ }
1950
+ .ds-button-magicwand-completed-completed {
1951
+ display: flex;
1952
+ align-items: center;
1953
+ }
1954
+ .ds-button-magicwand-completed-undo {
1955
+ display: none;
1956
+ }
1957
+
1958
+ .ds-button-empty {
1959
+ padding: 0 var(--ds-button-padding-horizontal-smaller);
1960
+ background: var(--ds-button-empty-background);
1961
+ color: var(--ds-button-empty-color);
1962
+ box-shadow: var(--ds-button-empty-border);
1963
+ white-space: nowrap;
1964
+ background-position: center;
1965
+ transition: background 0.6s;
1966
+ }
1967
+ .ds-button-empty:hover {
1968
+ background: var(--ds-button-empty-background) radial-gradient(circle, transparent 1%, var(--ds-empty-color-hover) 1%) center/15000%;
1969
+ transition: 0.6s all ease;
1970
+ }
1971
+ .ds-button-empty:active {
1972
+ background-color: var(--ds-empty-color-ripple);
1973
+ background-size: 100%;
1974
+ transition: background 0s;
1975
+ }
1976
+
1977
+ .ds-button-empty-dropdown {
1978
+ padding: 0 var(--ds-button-padding-horizontal-smaller);
1979
+ background: var(--ds-button-empty-background);
1980
+ color: var(--ds-button-empty-color);
1981
+ box-shadow: var(--ds-button-empty-border);
1982
+ transition: 0.2s all ease;
1983
+ background-position: center;
1984
+ transition: background 0.6s;
1985
+ }
1986
+ .ds-button-empty-dropdown:hover {
1987
+ background: var(--ds-button-empty-background) radial-gradient(circle, transparent 1%, var(--ds-empty-color-hover) 1%) center/15000%;
1988
+ transition: 0.6s all ease;
1989
+ }
1990
+ .ds-button-empty-dropdown:active {
1991
+ background-color: var(--ds-empty-color-ripple);
1992
+ background-size: 100%;
1993
+ transition: background 0s;
1994
+ }
1995
+ .ds-button-empty-dropdown-active {
1996
+ border: 2px solid var(--ds-primary-color);
1997
+ }
1998
+ .ds-button-empty-dropdown ion-icon {
1999
+ font-size: 18px;
2000
+ margin-left: 4px;
2001
+ }
2002
+
2003
+ .ds-button-empty-icon-only {
2004
+ padding: 0 var(--ds-button-padding-horizontal-smaller);
2005
+ background: var(--ds-button-empty-background);
2006
+ color: var(--ds-button-empty-color);
2007
+ box-shadow: var(--ds-button-empty-border);
2008
+ background-position: center;
2009
+ transition: background 0.6s;
2010
+ }
2011
+ .ds-button-empty-icon-only:hover {
2012
+ background: var(--ds-button-empty-background) radial-gradient(circle, transparent 1%, var(--ds-empty-color-hover) 1%) center/15000%;
2013
+ transition: 0.6s all ease;
2014
+ }
2015
+ .ds-button-empty-icon-only:active {
2016
+ background-color: var(--ds-empty-color-ripple);
2017
+ background-size: 100%;
2018
+ transition: background 0s;
2019
+ }
2020
+ .ds-button-empty-icon-only ion-icon {
2021
+ margin: 0;
2022
+ font-size: 18px;
2023
+ }
2024
+
2025
+ .ds-button-icon-only {
2026
+ padding: 4px;
2027
+ background: var(--ds-button-empty-background);
2028
+ color: var(--ds-button-empty-color);
2029
+ height: auto;
2030
+ transition: 0.2s all ease;
2031
+ }
2032
+ .ds-button-icon-only ion-icon, .ds-button-icon-only i {
2033
+ margin: 0;
2034
+ font-size: 20px;
2035
+ min-width: 20px;
2036
+ }
2037
+ .ds-button-icon-only:hover {
2038
+ color: var(--ds-primary-color);
2039
+ background: var(--ds-light-gray-background);
2040
+ }
2041
+
2042
+ * {
2043
+ font-family: "Inter", sans-serif;
2044
+ }
2045
+
2046
+ .ds-buttonsgroup-navigation, .ds-button-primary, .ds-button-secondary, .ds-button-tertiary, .ds-button-empty, .ds-button-empty-dropdown, .ds-button-empty-icon-only, .ds-button-icon-only {
2047
+ display: flex;
2048
+ align-items: center;
2049
+ justify-content: center;
2050
+ font-size: var(--ds-button-font-size);
2051
+ border-radius: var(--ds-button-border-radius);
2052
+ padding: 0 var(--ds-button-padding-horizontal);
2053
+ height: var(--ds-button-height);
2054
+ user-select: none;
2055
+ transition: 0.2s all ease;
2056
+ }
2057
+ .ds-buttonsgroup-navigation ion-icon, .ds-button-primary ion-icon, .ds-button-secondary ion-icon, .ds-button-tertiary ion-icon, .ds-button-empty ion-icon, .ds-button-empty-dropdown ion-icon, .ds-button-empty-icon-only ion-icon, .ds-button-icon-only ion-icon {
2058
+ font-size: 20px;
2059
+ width: 20px;
2060
+ min-width: 20px;
2061
+ max-width: 20px;
2062
+ margin-right: 4px;
2063
+ }
2064
+ .ds-buttonsgroup-navigation:disabled, .ds-button-primary:disabled, .ds-button-secondary:disabled, .ds-button-tertiary:disabled, .ds-button-empty:disabled, .ds-button-empty-dropdown:disabled, .ds-button-empty-icon-only:disabled, .ds-button-icon-only:disabled, [disabled].ds-buttonsgroup-navigation, [disabled].ds-button-primary, [disabled].ds-button-secondary, [disabled].ds-button-tertiary, [disabled].ds-button-empty, [disabled].ds-button-empty-dropdown, [disabled].ds-button-empty-icon-only, [disabled].ds-button-icon-only {
2065
+ cursor: not-allowed;
2066
+ pointer-events: none;
2067
+ opacity: 0.4;
2068
+ transition: 0.2s all ease;
2069
+ }
2070
+ .ds-buttonsgroup-navigation ion-spinner, .ds-button-primary ion-spinner, .ds-button-secondary ion-spinner, .ds-button-tertiary ion-spinner, .ds-button-empty ion-spinner, .ds-button-empty-dropdown ion-spinner, .ds-button-empty-icon-only ion-spinner, .ds-button-icon-only ion-spinner {
2071
+ color: white;
2072
+ width: 23px;
2073
+ margin-right: 8px;
2074
+ }
2075
+ .ds-buttonsgroup-navigation ion-spinner circle, .ds-button-primary ion-spinner circle, .ds-button-secondary ion-spinner circle, .ds-button-tertiary ion-spinner circle, .ds-button-empty ion-spinner circle, .ds-button-empty-dropdown ion-spinner circle, .ds-button-empty-icon-only ion-spinner circle, .ds-button-icon-only ion-spinner circle {
2076
+ stroke-width: 6px;
2077
+ }
2078
+
2079
+ .ds-button-primary-small, .ds-button-secondary-small, .ds-button-tertiary-small, .ds-button-magicwand-completed {
2080
+ display: flex;
2081
+ align-items: center;
2082
+ justify-content: center;
2083
+ font-size: var(--ds-button-small-font-size);
2084
+ border-radius: var(--ds-button-small-border-radius);
2085
+ padding: 0 var(--ds-button-small-padding-horizontal);
2086
+ height: var(--ds-button-small-height);
2087
+ user-select: none;
2088
+ }
2089
+ .ds-button-primary-small ion-icon, .ds-button-secondary-small ion-icon, .ds-button-tertiary-small ion-icon, .ds-button-magicwand-completed ion-icon {
2090
+ font-size: 16px;
2091
+ margin-right: 4px;
2092
+ }
2093
+ .ds-button-primary-small ion-spinner, .ds-button-secondary-small ion-spinner, .ds-button-tertiary-small ion-spinner, .ds-button-magicwand-completed ion-spinner {
2094
+ color: white;
2095
+ width: 16px;
2096
+ margin-right: 8px;
2097
+ }
2098
+ .ds-button-primary-small ion-spinner circle, .ds-button-secondary-small ion-spinner circle, .ds-button-tertiary-small ion-spinner circle, .ds-button-magicwand-completed ion-spinner circle {
2099
+ stroke-width: 4px;
2100
+ }
2101
+
2102
+ .ds-button-primary {
2103
+ background: var(--ds-button-primary-background);
2104
+ color: var(--ds-button-primary-color);
2105
+ min-width: 85px;
2106
+ /*&:disabled, &[disabled] {
2107
+ background: var(--ds-primary-color-disabled);
2108
+ }*/
2109
+ background-position: center;
2110
+ transition: background 0.6s;
2111
+ }
2112
+ .ds-button-primary:hover {
2113
+ background: var(--ds-button-primary-background) radial-gradient(circle, transparent 1%, var(--ds-primary-color-hover) 1%) center/15000%;
2114
+ transition: 0.6s all ease;
2115
+ }
2116
+ .ds-button-primary:active {
2117
+ background-color: var(--ds-primary-color-ripple);
2118
+ background-size: 100%;
2119
+ transition: background 0s;
2120
+ }
2121
+
2122
+ .ds-button-primary-small {
2123
+ background: var(--ds-button-primary-background);
2124
+ color: var(--ds-button-primary-color);
2125
+ background-position: center;
2126
+ transition: background 0.6s;
2127
+ }
2128
+ .ds-button-primary-small:hover {
2129
+ background: var(--ds-button-primary-background) radial-gradient(circle, transparent 1%, var(--ds-primary-color-hover) 1%) center/15000%;
2130
+ transition: 0.6s all ease;
2131
+ }
2132
+ .ds-button-primary-small:active {
2133
+ background-color: var(--ds-primary-color-ripple);
2134
+ background-size: 100%;
2135
+ transition: background 0s;
2136
+ }
2137
+
2138
+ .ds-button-primary-small-danger {
2139
+ background: var(--ds-danger-color);
2140
+ color: var(--ds-button-primary-color);
2141
+ background-position: center;
2142
+ transition: background 0.6s;
2143
+ }
2144
+ .ds-button-primary-small-danger:hover {
2145
+ background: var(--ds-danger-color) radial-gradient(circle, transparent 1%, var(--ds-danger-color-hover) 1%) center/15000%;
2146
+ transition: 0.6s all ease;
2147
+ }
2148
+ .ds-button-primary-small-danger:active {
2149
+ background-color: var(--ds-danger-color-ripple);
2150
+ background-size: 100%;
2151
+ transition: background 0s;
2152
+ }
2153
+
2154
+ .ds-button-secondary {
2155
+ background: var(--ds-button-secondary-background);
2156
+ color: var(--ds-button-secondary-color);
2157
+ background-position: center;
2158
+ transition: background 0.6s;
2159
+ }
2160
+ .ds-button-secondary:hover {
2161
+ background: var(--ds-button-secondary-background) radial-gradient(circle, transparent 1%, var(--ds-secondary-color-hover) 1%) center/15000%;
2162
+ transition: 0.6s all ease;
2163
+ }
2164
+ .ds-button-secondary:active {
2165
+ background-color: var(--ds-secondary-color-ripple);
2166
+ background-size: 100%;
2167
+ transition: background 0s;
2168
+ }
2169
+
2170
+ .ds-button-secondary-small {
2171
+ background: var(--ds-button-secondary-background);
2172
+ color: var(--ds-button-secondary-color);
2173
+ background-position: center;
2174
+ transition: background 0.6s;
2175
+ }
2176
+ .ds-button-secondary-small ion-spinner {
2177
+ color: var(--ds-button-secondary-color);
2178
+ }
2179
+ .ds-button-secondary-small:hover {
2180
+ background: var(--ds-button-secondary-background) radial-gradient(circle, transparent 1%, var(--ds-secondary-color-hover) 1%) center/15000%;
2181
+ transition: 0.6s all ease;
2182
+ }
2183
+ .ds-button-secondary-small:active {
2184
+ background-color: var(--ds-secondary-color-ripple);
2185
+ background-size: 100%;
2186
+ transition: background 0s;
2187
+ }
2188
+
2189
+ .ds-button-tertiary {
2190
+ background: var(--ds-button-tertiary-background);
2191
+ color: var(--ds-button-tertiary-color);
2192
+ background-position: center;
2193
+ transition: background 0.6s;
2194
+ }
2195
+ .ds-button-tertiary:hover {
2196
+ background: var(--ds-button-tertiary-background) radial-gradient(circle, transparent 1%, var(--ds-tertiary-color-hover) 1%) center/15000%;
2197
+ transition: 0.6s all ease;
2198
+ }
2199
+ .ds-button-tertiary:active {
2200
+ background-color: var(--ds-tertiary-color-ripple);
2201
+ background-size: 100%;
2202
+ transition: background 0s;
2203
+ }
2204
+
2205
+ .ds-button-tertiary-small {
2206
+ background: var(--ds-button-tertiary-background);
2207
+ color: var(--ds-button-tertiary-color);
2208
+ background-position: center;
2209
+ transition: background 0.6s;
2210
+ }
2211
+ .ds-button-tertiary-small:hover {
2212
+ background: var(--ds-button-tertiary-background) radial-gradient(circle, transparent 1%, var(--ds-tertiary-color-hover) 1%) center/15000%;
2213
+ transition: 0.6s all ease;
2214
+ }
2215
+ .ds-button-tertiary-small:active {
2216
+ background-color: var(--ds-tertiary-color-ripple);
2217
+ background-size: 100%;
2218
+ transition: background 0s;
2219
+ }
2220
+
2221
+ .ds-button-magicwand-completed {
2222
+ transition: none;
2223
+ background: var(--ds-button-tertiary-background);
2224
+ color: var(--ds-button-tertiary-color);
2225
+ }
2226
+ .ds-button-magicwand-completed:hover {
2227
+ transition: none;
2228
+ background: var(--ds-button-secondary-background);
2229
+ color: var(--ds-button-secondary-color);
2230
+ }
2231
+ .ds-button-magicwand-completed:hover .ds-button-magicwand-completed-completed {
2232
+ display: none;
2233
+ }
2234
+ .ds-button-magicwand-completed:hover .ds-button-magicwand-completed-undo {
2235
+ display: flex;
2236
+ align-items: center;
2237
+ }
2238
+ .ds-button-magicwand-completed-completed {
2239
+ display: flex;
2240
+ align-items: center;
2241
+ }
2242
+ .ds-button-magicwand-completed-undo {
2243
+ display: none;
2244
+ }
2245
+
2246
+ .ds-button-empty {
2247
+ padding: 0 var(--ds-button-padding-horizontal-smaller);
2248
+ background: var(--ds-button-empty-background);
2249
+ color: var(--ds-button-empty-color);
2250
+ box-shadow: var(--ds-button-empty-border);
2251
+ white-space: nowrap;
2252
+ background-position: center;
2253
+ transition: background 0.6s;
2254
+ }
2255
+ .ds-button-empty:hover {
2256
+ background: var(--ds-button-empty-background) radial-gradient(circle, transparent 1%, var(--ds-empty-color-hover) 1%) center/15000%;
2257
+ transition: 0.6s all ease;
2258
+ }
2259
+ .ds-button-empty:active {
2260
+ background-color: var(--ds-empty-color-ripple);
2261
+ background-size: 100%;
2262
+ transition: background 0s;
2263
+ }
2264
+
2265
+ .ds-button-empty-dropdown {
2266
+ padding: 0 var(--ds-button-padding-horizontal-smaller);
2267
+ background: var(--ds-button-empty-background);
2268
+ color: var(--ds-button-empty-color);
2269
+ box-shadow: var(--ds-button-empty-border);
2270
+ transition: 0.2s all ease;
2271
+ background-position: center;
2272
+ transition: background 0.6s;
2273
+ }
2274
+ .ds-button-empty-dropdown:hover {
2275
+ background: var(--ds-button-empty-background) radial-gradient(circle, transparent 1%, var(--ds-empty-color-hover) 1%) center/15000%;
2276
+ transition: 0.6s all ease;
2277
+ }
2278
+ .ds-button-empty-dropdown:active {
2279
+ background-color: var(--ds-empty-color-ripple);
2280
+ background-size: 100%;
2281
+ transition: background 0s;
2282
+ }
2283
+ .ds-button-empty-dropdown-active {
2284
+ border: 2px solid var(--ds-primary-color);
2285
+ }
2286
+ .ds-button-empty-dropdown ion-icon {
2287
+ font-size: 18px;
2288
+ margin-left: 4px;
2289
+ }
2290
+
2291
+ .ds-button-empty-icon-only {
2292
+ padding: 0 var(--ds-button-padding-horizontal-smaller);
2293
+ background: var(--ds-button-empty-background);
2294
+ color: var(--ds-button-empty-color);
2295
+ box-shadow: var(--ds-button-empty-border);
2296
+ background-position: center;
2297
+ transition: background 0.6s;
2298
+ }
2299
+ .ds-button-empty-icon-only:hover {
2300
+ background: var(--ds-button-empty-background) radial-gradient(circle, transparent 1%, var(--ds-empty-color-hover) 1%) center/15000%;
2301
+ transition: 0.6s all ease;
2302
+ }
2303
+ .ds-button-empty-icon-only:active {
2304
+ background-color: var(--ds-empty-color-ripple);
2305
+ background-size: 100%;
2306
+ transition: background 0s;
2307
+ }
2308
+ .ds-button-empty-icon-only ion-icon {
2309
+ margin: 0;
2310
+ font-size: 18px;
2311
+ }
2312
+
2313
+ .ds-button-icon-only {
2314
+ padding: 4px;
2315
+ background: var(--ds-button-empty-background);
2316
+ color: var(--ds-button-empty-color);
2317
+ height: auto;
2318
+ transition: 0.2s all ease;
2319
+ }
2320
+ .ds-button-icon-only ion-icon, .ds-button-icon-only i {
2321
+ margin: 0;
2322
+ font-size: 20px;
2323
+ min-width: 20px;
2324
+ }
2325
+ .ds-button-icon-only:hover {
2326
+ color: var(--ds-primary-color);
2327
+ background: var(--ds-light-gray-background);
2328
+ }
2329
+
2330
+ .ds-buttonsgroup-navigation {
2331
+ padding: 0 var(--ds-button-padding-horizontal-smaller);
2332
+ background: var(--ds-buttonsgroup-navigation-background);
2333
+ color: var(--ds-button-empty-color);
2334
+ box-shadow: var(--ds-button-empty-border);
2335
+ display: inline-block;
2336
+ }
2337
+ .ds-buttonsgroup-navigation-box {
2338
+ display: flex;
2339
+ align-items: center;
2340
+ justify-content: center;
2341
+ height: 100%;
2342
+ width: 100%;
2343
+ }
2344
+ .ds-buttonsgroup-navigation-button {
2345
+ background: none;
2346
+ border: none;
2347
+ outline: none;
2348
+ cursor: pointer;
2349
+ display: flex;
2350
+ align-items: center;
2351
+ justify-content: center;
2352
+ }
2353
+ .ds-buttonsgroup-navigation-button ion-icon {
2354
+ color: var(--ds-buttonsgroup-navigation-button-color);
2355
+ font-size: var(--ds-buttonsgroup-navigation-button-icon-size);
2356
+ transition: 0.2s all ease;
2357
+ }
2358
+ .ds-buttonsgroup-navigation-button:hover ion-icon {
2359
+ color: var(--ds-primary-color);
2360
+ }
2361
+ .ds-buttonsgroup-navigation-content {
2362
+ width: 75px;
2363
+ text-align: center;
2364
+ margin: var(--ds-buttonsgroup-navigation-content-margin);
2365
+ color: var(--ds-black-font);
2366
+ }
2367
+ .ds-buttonsgroup-navigation-content span {
2368
+ color: var(--ds-buttonsgroup-navigation-button-color);
2369
+ }
2370
+
2371
+ .ds-input-searchbar ion-input, .ds-input-primary-range ion-input, .ds-input-primary-content ion-textarea, .ds-input-primary-content ion-input, .ds-input-primary-content ion-select, .ds-input-primary-content input {
2372
+ height: var(--ds-input-height);
2373
+ font-size: var(--ds-input-font-size);
2374
+ border-radius: var(--ds-input-border-radius);
2375
+ box-shadow: var(--ds-button-empty-border);
2376
+ padding: 0 var(--ds-input-padding-horizontal);
2377
+ --padding-start: var(--ds-input-padding-horizontal);
2378
+ --padding-end: var(--ds-input-padding-end);
2379
+ font-family: var(--ds-input-font-family) !important;
2380
+ transition: var(--ds-input-transition);
2381
+ }
2382
+ .ds-input-searchbar ion-input:focus-within, .ds-input-primary-range ion-input:focus-within, .ds-input-primary-content ion-textarea:focus-within, .ds-input-primary-content ion-input:focus-within, .ds-input-primary-content ion-select:focus-within, .ds-input-primary-content input:focus-within {
2383
+ box-shadow: 0 0 0 2px var(--ds-primary-color);
2384
+ transition: 0.1s all ease;
2385
+ }
2386
+ .ds-input-searchbar ion-input:disabled, .ds-input-primary-range ion-input:disabled, .ds-input-primary-content ion-textarea:disabled, .ds-input-primary-content ion-input:disabled, .ds-input-primary-content ion-select:disabled, .ds-input-searchbar ion-input[disabled], .ds-input-primary-range ion-input[disabled], .ds-input-primary-content ion-textarea[disabled], .ds-input-primary-content ion-input[disabled], .ds-input-primary-content ion-select[disabled], .ds-input-primary-content input:disabled {
2387
+ cursor: not-allowed;
2388
+ pointer-events: none;
2389
+ opacity: 0.4;
2390
+ }
2391
+
2392
+ .ds-input-primary {
2393
+ position: relative;
2394
+ font-family: var(--ds-input-font-family) !important;
2395
+ }
2396
+ .ds-input-primary-label {
2397
+ font-size: var(--ds-input-label-font-size);
2398
+ color: var(--ds-input-label-color);
2399
+ margin-bottom: var(--ds-label-margin-bottom);
2400
+ font-weight: 500;
2401
+ transition: var(--ds-input-transition);
2402
+ }
2403
+ .ds-input-primary-content {
2404
+ position: relative;
2405
+ }
2406
+ .ds-input-primary-content-filebox {
2407
+ display: flex;
2408
+ align-items: center;
2409
+ position: relative;
2410
+ }
2411
+ .ds-input-primary-content-insertfile {
2412
+ position: relative;
2413
+ }
2414
+ .ds-input-primary-content ion-textarea {
2415
+ height: var(--ds-input-textarea-height);
2416
+ --padding-start: var(--ds-input-textarea-padding);
2417
+ --padding-top: var(--ds-input-textarea-padding);
2418
+ --padding-bottom: var(--ds-input-textarea-padding);
2419
+ --padding-end: var(--ds-input-textarea-padding);
2420
+ padding: 0;
2421
+ overflow-y: auto;
2422
+ }
2423
+ .ds-input-primary-content ion-textarea .textarea-wrapper {
2424
+ height: 100%;
2425
+ }
2426
+ .ds-input-primary-content-symbol {
2427
+ position: absolute;
2428
+ right: 0;
2429
+ top: 50%;
2430
+ transform: translateY(-50%);
2431
+ font-size: var(--ds-global-font-size);
2432
+ right: var(--ds-input-symbol-margin-right);
2433
+ }
2434
+ .ds-input-primary-content .ds-block-checkboxandtext {
2435
+ margin-top: var(--ds-input-margin-bottom);
2436
+ }
2437
+ .ds-input-primary-content-references-buttons {
2438
+ display: flex;
2439
+ align-items: center;
2440
+ justify-content: flex-start;
2441
+ flex-wrap: nowrap;
2442
+ margin-bottom: var(--ds-header-and-content-margin-bottom);
2443
+ }
2444
+ .ds-input-primary-content-references-buttons button:first-child {
2445
+ margin-right: 12px;
2446
+ }
2447
+ .ds-input-primary-content .ds-element-reference {
2448
+ margin-bottom: var(--ds-input-margin-bottom);
2449
+ }
2450
+ .ds-input-primary-content-checkboxes {
2451
+ display: flex;
2452
+ flex-wrap: wrap;
2453
+ }
2454
+ .ds-input-primary-content-checkboxes .ds-block-checkboxandtext {
2455
+ margin-top: var(--ds-input-margin-bottom);
2456
+ width: 48%;
2457
+ margin-right: 2%;
2458
+ }
2459
+ .ds-input-primary-suggestions-container {
2460
+ width: 100%;
2461
+ position: relative;
2462
+ }
2463
+ .ds-input-primary-suggestions {
2464
+ position: absolute;
2465
+ z-index: 100000000000000000000000000000000000;
2466
+ background: var(--ds-white-background);
2467
+ width: 100%;
2468
+ border: var(--ds-input-border);
2469
+ border-bottom-left-radius: var(--ds-input-border-radius);
2470
+ border-bottom-right-radius: var(--ds-input-border-radius);
2471
+ border-top: 0;
2472
+ padding: var(--ds-input-suggestions-padding);
2473
+ max-height: var(--ds-input-suggestions-max-height);
2474
+ overflow-x: auto;
2475
+ }
2476
+ .ds-input-primary-suggestions .ds-item-checkbox {
2477
+ margin-bottom: var(--ds-item-margin-between-items);
2478
+ }
2479
+ .ds-input-primary-range {
2480
+ display: flex;
2481
+ align-items: center;
2482
+ }
2483
+ .ds-input-primary-range-separator {
2484
+ margin: 0 var(--ds-margin-icon-and-content);
2485
+ font-size: 13px;
2486
+ color: var(--ds-input-label-color);
2487
+ }
2488
+ .ds-input-primary-range .ds-button-icon-only {
2489
+ margin-left: var(--ds-margin-icon-and-content);
2490
+ }
2491
+ .ds-input-primary-range .ds-button-icon-only i, .ds-input-primary-range .ds-button-icon-only ion-icon {
2492
+ font-size: 16px;
2493
+ min-width: 16px;
2494
+ }
2495
+
2496
+ .ds-input-primary-with-icon {
2497
+ display: flex;
2498
+ }
2499
+ .ds-input-primary-with-icon-right {
2500
+ margin-left: var(--ds-margin-icon-and-content);
2501
+ display: flex;
2502
+ align-items: flex-end;
2503
+ padding-bottom: 8px;
2504
+ }
2505
+ .ds-input-primary-with-icon-right i, .ds-input-primary-with-icon-right ion-icon {
2506
+ font-size: 23px;
2507
+ min-width: 23px;
2508
+ cursor: pointer;
2509
+ color: var(--button-icon-color);
2510
+ }
2511
+
2512
+ .ds-input-primary-margin-bottom {
2513
+ margin-bottom: var(--ds-input-margin-bottom);
2514
+ }
2515
+
2516
+ .ds-input-primary:focus-within .ds-input-primary-label {
2517
+ color: var(--ds-primary-color); /* Replace with your desired color */
2518
+ }
2519
+
2520
+ .ds-input-primary:focus-within .ds-input-primary-content ion-input {
2521
+ box-shadow: 0 0 0 2px var(--ds-primary-color);
2522
+ }
2523
+
2524
+ input {
2525
+ border: none;
2526
+ outline: none;
2527
+ }
2528
+
2529
+ .ds-input-primary:focus-within .ds-input-primary-content input {
2530
+ box-shadow: 0 0 0 2px var(--ds-primary-color);
2531
+ }
2532
+
2533
+ .ds-input-references {
2534
+ font-family: var(--ds-input-font-family) !important;
2535
+ }
2536
+ .ds-input-references-label {
2537
+ font-size: var(--ds-input-label-font-size);
2538
+ color: var(--ds-input-label-color);
2539
+ margin-bottom: var(--ds-label-margin-bottom);
2540
+ font-weight: 500;
2541
+ transition: var(--ds-input-transition);
2542
+ }
2543
+ .ds-input-references-buttons {
2544
+ display: flex;
2545
+ align-items: center;
2546
+ justify-content: flex-start;
2547
+ flex-wrap: nowrap;
2548
+ margin-bottom: var(--ds-header-and-content-margin-bottom);
2549
+ }
2550
+ .ds-input-references-buttons button:first-child {
2551
+ margin-right: 12px;
2552
+ }
2553
+ .ds-input-searchbar ion-input, .ds-input-primary-content ion-input, .ds-input-primary-content ion-select, .ds-input-primary-content ion-textarea, .ds-input-primary-range ion-input, .ds-input-primary-content input {
2554
+ height: var(--ds-input-height);
2555
+ font-size: var(--ds-input-font-size);
2556
+ border-radius: var(--ds-input-border-radius);
2557
+ box-shadow: var(--ds-button-empty-border);
2558
+ padding: 0 var(--ds-input-padding-horizontal);
2559
+ --padding-start: var(--ds-input-padding-horizontal);
2560
+ --padding-end: var(--ds-input-padding-end);
2561
+ font-family: var(--ds-input-font-family) !important;
2562
+ transition: var(--ds-input-transition);
2563
+ }
2564
+ .ds-input-searchbar ion-input:focus-within, .ds-input-primary-content ion-input:focus-within, .ds-input-primary-content ion-select:focus-within, .ds-input-primary-content ion-textarea:focus-within, .ds-input-primary-range ion-input:focus-within, .ds-input-primary-content input:focus-within {
2565
+ box-shadow: 0 0 0 2px var(--ds-primary-color);
2566
+ transition: 0.1s all ease;
2567
+ }
2568
+ .ds-input-searchbar ion-input:disabled, .ds-input-primary-content ion-input:disabled, .ds-input-primary-content ion-select:disabled, .ds-input-primary-content ion-textarea:disabled, .ds-input-primary-range ion-input:disabled, .ds-input-searchbar ion-input[disabled], .ds-input-primary-content ion-input[disabled], .ds-input-primary-content ion-select[disabled], .ds-input-primary-content ion-textarea[disabled], .ds-input-primary-range ion-input[disabled], .ds-input-primary-content input:disabled {
2569
+ cursor: not-allowed;
2570
+ pointer-events: none;
2571
+ opacity: 0.4;
2572
+ }
2573
+
2574
+ .ds-input-primary {
2575
+ position: relative;
2576
+ font-family: var(--ds-input-font-family) !important;
2577
+ }
2578
+ .ds-input-primary-label {
2579
+ font-size: var(--ds-input-label-font-size);
2580
+ color: var(--ds-input-label-color);
2581
+ margin-bottom: var(--ds-label-margin-bottom);
2582
+ font-weight: 500;
2583
+ transition: var(--ds-input-transition);
2584
+ }
2585
+ .ds-input-primary-content {
2586
+ position: relative;
2587
+ }
2588
+ .ds-input-primary-content-filebox {
2589
+ display: flex;
2590
+ align-items: center;
2591
+ position: relative;
2592
+ }
2593
+ .ds-input-primary-content-insertfile {
2594
+ position: relative;
2595
+ }
2596
+ .ds-input-primary-content ion-textarea {
2597
+ height: var(--ds-input-textarea-height);
2598
+ --padding-start: var(--ds-input-textarea-padding);
2599
+ --padding-top: var(--ds-input-textarea-padding);
2600
+ --padding-bottom: var(--ds-input-textarea-padding);
2601
+ --padding-end: var(--ds-input-textarea-padding);
2602
+ padding: 0;
2603
+ overflow-y: auto;
2604
+ }
2605
+ .ds-input-primary-content ion-textarea .textarea-wrapper {
2606
+ height: 100%;
2607
+ }
2608
+ .ds-input-primary-content-symbol {
2609
+ position: absolute;
2610
+ right: 0;
2611
+ top: 50%;
2612
+ transform: translateY(-50%);
2613
+ font-size: var(--ds-global-font-size);
2614
+ right: var(--ds-input-symbol-margin-right);
2615
+ }
2616
+ .ds-input-primary-content .ds-block-checkboxandtext {
2617
+ margin-top: var(--ds-input-margin-bottom);
2618
+ }
2619
+ .ds-input-primary-content-references-buttons {
2620
+ display: flex;
2621
+ align-items: center;
2622
+ justify-content: flex-start;
2623
+ flex-wrap: nowrap;
2624
+ margin-bottom: var(--ds-header-and-content-margin-bottom);
2625
+ }
2626
+ .ds-input-primary-content-references-buttons button:first-child {
2627
+ margin-right: 12px;
2628
+ }
2629
+ .ds-input-primary-content .ds-element-reference {
2630
+ margin-bottom: var(--ds-input-margin-bottom);
2631
+ }
2632
+ .ds-input-primary-content-checkboxes {
2633
+ display: flex;
2634
+ flex-wrap: wrap;
2635
+ }
2636
+ .ds-input-primary-content-checkboxes .ds-block-checkboxandtext {
2637
+ margin-top: var(--ds-input-margin-bottom);
2638
+ width: 48%;
2639
+ margin-right: 2%;
2640
+ }
2641
+ .ds-input-primary-suggestions-container {
2642
+ width: 100%;
2643
+ position: relative;
2644
+ }
2645
+ .ds-input-primary-suggestions {
2646
+ position: absolute;
2647
+ z-index: 100000000000000000000000000000000000;
2648
+ background: var(--ds-white-background);
2649
+ width: 100%;
2650
+ border: var(--ds-input-border);
2651
+ border-bottom-left-radius: var(--ds-input-border-radius);
2652
+ border-bottom-right-radius: var(--ds-input-border-radius);
2653
+ border-top: 0;
2654
+ padding: var(--ds-input-suggestions-padding);
2655
+ max-height: var(--ds-input-suggestions-max-height);
2656
+ overflow-x: auto;
2657
+ }
2658
+ .ds-input-primary-suggestions .ds-item-checkbox {
2659
+ margin-bottom: var(--ds-item-margin-between-items);
2660
+ }
2661
+ .ds-input-primary-range {
2662
+ display: flex;
2663
+ align-items: center;
2664
+ }
2665
+ .ds-input-primary-range-separator {
2666
+ margin: 0 var(--ds-margin-icon-and-content);
2667
+ font-size: 13px;
2668
+ color: var(--ds-input-label-color);
2669
+ }
2670
+ .ds-input-primary-range .ds-button-icon-only {
2671
+ margin-left: var(--ds-margin-icon-and-content);
2672
+ }
2673
+ .ds-input-primary-range .ds-button-icon-only i, .ds-input-primary-range .ds-button-icon-only ion-icon {
2674
+ font-size: 16px;
2675
+ min-width: 16px;
2676
+ }
2677
+
2678
+ .ds-input-primary-with-icon {
2679
+ display: flex;
2680
+ }
2681
+ .ds-input-primary-with-icon-right {
2682
+ margin-left: var(--ds-margin-icon-and-content);
2683
+ display: flex;
2684
+ align-items: flex-end;
2685
+ padding-bottom: 8px;
2686
+ }
2687
+ .ds-input-primary-with-icon-right i, .ds-input-primary-with-icon-right ion-icon {
2688
+ font-size: 23px;
2689
+ min-width: 23px;
2690
+ cursor: pointer;
2691
+ color: var(--button-icon-color);
2692
+ }
2693
+
2694
+ .ds-input-primary-margin-bottom {
2695
+ margin-bottom: var(--ds-input-margin-bottom);
2696
+ }
2697
+
2698
+ .ds-input-primary:focus-within .ds-input-primary-label {
2699
+ color: var(--ds-primary-color); /* Replace with your desired color */
2700
+ }
2701
+
2702
+ .ds-input-primary:focus-within .ds-input-primary-content ion-input {
2703
+ box-shadow: 0 0 0 2px var(--ds-primary-color);
2704
+ }
2705
+
2706
+ .ds-input-primary:focus-within .ds-input-primary-content input {
2707
+ box-shadow: 0 0 0 2px var(--ds-primary-color);
2708
+ }
2709
+
2710
+ .ds-input-references {
2711
+ font-family: var(--ds-input-font-family) !important;
2712
+ }
2713
+ .ds-input-references-label {
2714
+ font-size: var(--ds-input-label-font-size);
2715
+ color: var(--ds-input-label-color);
2716
+ margin-bottom: var(--ds-label-margin-bottom);
2717
+ font-weight: 500;
2718
+ transition: var(--ds-input-transition);
2719
+ }
2720
+ .ds-input-references-buttons {
2721
+ display: flex;
2722
+ align-items: center;
2723
+ justify-content: flex-start;
2724
+ flex-wrap: nowrap;
2725
+ margin-bottom: var(--ds-header-and-content-margin-bottom);
2726
+ }
2727
+ .ds-input-references-buttons button:first-child {
2728
+ margin-right: 12px;
2729
+ }
2730
+ .ds-input-searchbar ion-icon {
2731
+ font-size: var(--ds-input-searchbar-icon-size);
2732
+ margin-left: var(--ds-margin-icon-and-content);
2733
+ color: var(--ds-light-gray-font);
2734
+ }
2735
+ .ds-input-searchbar ion-input {
2736
+ display: flex;
2737
+ align-items: center;
2738
+ height: 36px;
2739
+ --padding-start: var(--ds-margin-icon-and-content);
2740
+ }
2741
+
2742
+ .ds-input-searchbar-responsive {
2743
+ transition: 0.1s all ease;
2744
+ }
2745
+ .ds-input-searchbar-responsive:focus-within {
2746
+ width: 210px !important;
2747
+ }
2748
+
2749
+ .ds-item-blue-small, .ds-item-tree, .ds-item-checkbox, .ds-item-with-icon, .ds-item-with-right-icon, .ds-item-primary-no-background-only-icon, .ds-item-primary-no-background, .ds-item-primary-with-hover, .ds-item-primary {
2750
+ font-family: var(--ds-item-font-family) !important;
2751
+ font-size: var(--ds-item-font-size);
2752
+ height: var(--ds-item-height);
2753
+ min-height: var(--ds-item-height);
2754
+ padding: 0 var(--ds-item-padding-horizontal);
2755
+ background: var(--ds-item-background);
2756
+ border-radius: var(--ds-item-border-radius);
2757
+ color: var(--ds-item-font-color);
2758
+ display: flex;
2759
+ align-items: center;
2760
+ justify-content: flex-start;
2761
+ cursor: pointer;
2762
+ user-select: none;
2763
+ }
2764
+
2765
+ .ds-item-with-icon, .ds-item-with-right-icon, .ds-item-primary-no-background-only-icon, .ds-item-primary-no-background, .ds-item-primary-with-hover {
2766
+ transition: 0.2s all ease;
2767
+ }
2768
+ .ds-item-with-icon:hover, .ds-item-with-right-icon:hover, .ds-item-primary-no-background-only-icon:hover, .ds-item-primary-no-background:hover, .ds-item-primary-with-hover:hover {
2769
+ transition: 0.2s all ease;
2770
+ background: var(--ds-item-background-hover);
2771
+ }
2772
+
2773
+ .ds-item-list .ds-item-primary, .ds-item-list .ds-item-primary-with-hover, .ds-item-list .ds-item-with-icon, .ds-item-list .ds-item-checkbox, .ds-item-list .ds-item-tree, .ds-item-list .ds-item-tree-no-hover {
2774
+ margin-bottom: var(--ds-margin-between-items);
2775
+ }
2776
+ .ds-item-list .ds-item-primary:last-child, .ds-item-list .ds-item-primary-with-hover:last-child, .ds-item-list .ds-item-with-icon:last-child, .ds-item-list .ds-item-checkbox:last-child, .ds-item-list .ds-item-tree:last-child, .ds-item-list .ds-item-tree-no-hover:last-child {
2777
+ margin-bottom: 0;
2778
+ }
2779
+
2780
+ .ds-item-primary-with-ellipsis {
2781
+ white-space: nowrap;
2782
+ overflow: hidden;
2783
+ text-overflow: ellipsis;
2784
+ }
2785
+
2786
+ .ds-item-without-height {
2787
+ height: auto;
2788
+ }
2789
+
2790
+ .ds-item-primary-no-background {
2791
+ white-space: nowrap;
2792
+ overflow: hidden;
2793
+ text-overflow: ellipsis;
2794
+ background: transparent;
2795
+ }
2796
+ .ds-item-primary-no-background ion-icon, .ds-item-primary-no-background i {
2797
+ font-size: var(--ds-item-icon-font-size);
2798
+ width: var(--ds-item-icon-font-size);
2799
+ min-width: var(--ds-item-icon-font-size);
2800
+ margin-right: var(--ds-margin-icon-and-content);
2801
+ }
2802
+
2803
+ .ds-item-primary-no-background-only-icon {
2804
+ justify-content: center;
2805
+ text-align: center;
2806
+ background: transparent;
2807
+ }
2808
+ .ds-item-primary-no-background-only-icon ion-icon, .ds-item-primary-no-background-only-icon i {
2809
+ font-size: var(--ds-item-icon-font-size);
2810
+ width: var(--ds-item-icon-font-size);
2811
+ min-width: var(--ds-item-icon-font-size);
2812
+ text-align: center;
2813
+ }
2814
+
2815
+ .ds-item-with-right-icon {
2816
+ justify-content: space-between;
2817
+ align-items: center;
2818
+ white-space: nowrap;
2819
+ overflow: hidden;
2820
+ text-overflow: ellipsis;
2821
+ background: transparent;
2822
+ }
2823
+ .ds-item-with-right-icon ion-icon, .ds-item-with-right-icon i {
2824
+ font-size: var(--ds-item-icon-font-size-smaller);
2825
+ width: var(--ds-item-icon-font-size-smaller);
2826
+ min-width: var(--ds-item-icon-font-size-smaller);
2827
+ margin-right: var(--ds-margin-icon-and-content);
2828
+ }
2829
+ .ds-item-with-right-icon-left {
2830
+ display: flex;
2831
+ align-items: center;
2832
+ justify-content: flex-start;
2833
+ }
2834
+
2835
+ .ds-item-primary-active {
2836
+ background: var(--ds-item-background-hover);
2837
+ }
2838
+
2839
+ .ds-item-primary-active-blue {
2840
+ background: rgba(24, 78, 216, 0.1);
2841
+ }
2842
+
2843
+ .ds-item-with-button {
2844
+ display: flex;
2845
+ justify-content: space-between;
2846
+ }
2847
+ .ds-item-with-button-left {
2848
+ display: flex;
2849
+ align-items: center;
2850
+ }
2851
+
2852
+ .ds-item-with-icon ion-icon, .ds-item-with-icon i {
2853
+ font-size: var(--ds-item-icon-font-size);
2854
+ margin-right: var(--ds-margin-icon-and-content);
2855
+ width: var(--ds-item-icon-font-size);
2856
+ min-width: var(--ds-item-icon-font-size);
2857
+ }
2858
+ .ds-item-with-icon button {
2859
+ margin-left: var(--ds-margin-icon-and-content);
2860
+ }
2861
+
2862
+ .ds-item-checkbox ion-checkbox {
2863
+ --border-radius: 100px;
2864
+ --border-width: 1px;
2865
+ --border-color: var(--ds-border-color);
2866
+ --checkbox-background: var(--ds-primary-color);
2867
+ --background-checked: var(--ds-primary-color);
2868
+ margin-right: var(--ds-item-checkbox-margin-right);
2869
+ }
2870
+ .ds-item-checkbox ion-checkbox::part(container) {
2871
+ width: 20px;
2872
+ height: 20px;
2873
+ padding: 4px;
2874
+ }
2875
+
2876
+ .ds-item-tree {
2877
+ justify-content: space-between;
2878
+ height: var(--ds-item-tree-height);
2879
+ min-height: var(--ds-item-tree-height);
2880
+ max-height: var(--ds-item-tree-height);
2881
+ border-radius: var(--ds-item-tree-border-radius);
2882
+ background: var(--ds-item-tree-background);
2883
+ color: var(--ds-item-tree-color);
2884
+ transition: none;
2885
+ }
2886
+ .ds-item-tree-left {
2887
+ display: flex;
2888
+ align-items: center;
2889
+ justify-content: flex-start;
2890
+ }
2891
+ .ds-item-tree-left-folder {
2892
+ font-size: var(--ds-item-tree-icon-font-size);
2893
+ min-width: var(--ds-item-tree-icon-font-size);
2894
+ color: var(--ds-item-tree-color);
2895
+ margin-right: var(--ds-item-tree-folder-margin-right);
2896
+ }
2897
+ .ds-item-tree-left-arrow {
2898
+ font-size: var(--ds-item-tree-arrow-font-size);
2899
+ min-width: var(--ds-item-tree-arrow-font-size);
2900
+ color: var(--ds-item-tree-color);
2901
+ margin-right: var(--ds-item-tree-icons-margin-right);
2902
+ }
2903
+ .ds-item-tree-left-icon {
2904
+ font-size: var(--ds-item-tree-icon-font-size);
2905
+ min-width: var(--ds-item-tree-icon-font-size);
2906
+ color: var(--ds-item-tree-color);
2907
+ margin-right: var(--ds-item-tree-icons-margin-right);
2908
+ }
2909
+ .ds-item-tree-left-text {
2910
+ color: var(--ds-item-tree-color);
2911
+ white-space: nowrap;
2912
+ overflow: hidden;
2913
+ text-overflow: ellipsis;
2914
+ }
2915
+ .ds-item-tree-right ion-icon {
2916
+ font-size: 14px;
2917
+ min-width: 14px;
2918
+ }
2919
+ .ds-item-tree:hover {
2920
+ background: var(--ds-item-tree-background-active);
2921
+ }
2922
+ .ds-item-tree-active {
2923
+ background: rgba(24, 78, 216, 0.1);
2924
+ /*.ds-item-tree-left {
2925
+
2926
+ .ds-item-tree-left-icon {
2927
+ color: var(--ds-primary-color);
2928
+ }
2929
+
2930
+ .ds-item-tree-left-text {
2931
+ color: var(--ds-primary-color);
2932
+
2933
+ }
2934
+ }*/
2935
+ }
2936
+ .ds-item-tree-active:hover {
2937
+ background: none;
2938
+ background: rgba(0, 72, 255, 0.158) !important;
2939
+ }
2940
+
2941
+ .ds-item-tree-no-hover:hover {
2942
+ background: var(--ds-item-tree-background);
2943
+ }
2944
+
2945
+ .ds-item-chip {
2946
+ padding: var(--ds-item-chip-padding);
2947
+ border-radius: var(--ds-item-chip-border-radius);
2948
+ font-family: var(--ds-item-font-family) !important;
2949
+ font-size: var(--ds-item-chip-font-size);
2950
+ color: var(--ds-item-chip-primary-font-color);
2951
+ background-color: var(--ds-item-chip-primary-background);
2952
+ display: inline-block;
2953
+ white-space: nowrap;
2954
+ overflow: hidden;
2955
+ font-weight: 500;
2956
+ text-overflow: ellipsis;
2957
+ }
2958
+
2959
+ .ds-item-image {
2960
+ display: flex;
2961
+ align-items: center;
2962
+ justify-content: flex-start;
2963
+ padding: 0 var(--ds-item-padding-horizontal);
2964
+ height: auto;
2965
+ min-height: auto;
2966
+ }
2967
+ .ds-item-image-image {
2968
+ width: 40px;
2969
+ max-width: 40px;
2970
+ margin-right: 4px;
2971
+ }
2972
+ .ds-item-image-image img {
2973
+ width: 100%;
2974
+ }
2975
+ .ds-item-image-texts-title {
2976
+ font-family: var(--ds-modal-header-title-font-family);
2977
+ font-size: var(--ds-item-title-font-size);
2978
+ color: var(--ds-item-title-font-color);
2979
+ font-weight: bold;
2980
+ }
2981
+ .ds-item-image-texts-subtitle {
2982
+ font-family: var(--ds-modal-header-subtitle-font-family);
2983
+ font-size: var(--ds-item-subtitle-font-size);
2984
+ color: var(--ds-item-subtitle-font-color);
2985
+ }
2986
+
2987
+ .ds-items-list {
2988
+ display: flex;
2989
+ align-items: center;
2990
+ justify-content: space-between;
2991
+ flex-direction: row;
2992
+ flex-wrap: wrap;
2993
+ margin-bottom: var(--ds-header-and-content-margin-bottom);
2994
+ }
2995
+ .ds-items-list .ds-item-primary {
2996
+ margin-right: 16px;
2997
+ flex-grow: 1;
2998
+ margin-top: var(--ds-margin-between-items);
2999
+ width: 30%;
3000
+ max-width: 30%;
3001
+ min-width: 30%;
3002
+ }
3003
+
3004
+ .ds-items-vertical-list {
3005
+ overflow-x: hidden;
3006
+ }
3007
+ .ds-items-vertical-list .ds-item-primary, .ds-items-vertical-list .ds-item-primary-with-hover, .ds-items-vertical-list .ds-item-with-icon, .ds-items-vertical-list .ds-item-checkbox, .ds-items-vertical-list .ds-item-tree, .ds-items-vertical-list .ds-item-tree-no-hover {
3008
+ margin-bottom: var(--ds-margin-between-items);
3009
+ }
3010
+
3011
+ .ds-item-blue-small {
3012
+ border-radius: var(--ds-item-border-radius);
3013
+ background: var(--ds-item-small-background);
3014
+ color: var(--ds-white-font);
3015
+ height: var(--ds-item-small-height);
3016
+ min-height: var(--ds-item-small-height);
3017
+ padding: 0 var(--ds-item-small-padding-horizontal);
3018
+ display: flex;
3019
+ align-items: center;
3020
+ justify-content: center;
3021
+ }
3022
+ .ds-item-blue-small ion-icon {
3023
+ font-size: var(--ds-item-small-icon-font-size);
3024
+ width: var(--ds-item-small-icon-font-size);
3025
+ min-width: var(--ds-item-small-icon-font-size);
3026
+ margin-right: var(--ds-margin-icon-and-content);
3027
+ }
3028
+ .ds-item-blue-small span {
3029
+ font-weight: 500;
3030
+ }
3031
+
3032
+ .ds-item-danger {
3033
+ background: var(--ds-item-danger-background);
3034
+ color: var(--ds-item-danger-font-color);
3035
+ }
3036
+ .ds-item-danger ion-icon, .ds-item-danger i {
3037
+ color: var(--ds-item-danger-font-color);
3038
+ }
3039
+ .ds-item-danger:hover {
3040
+ background: var(--ds-item-danger-background-hover);
3041
+ }
3042
+
3043
+ .ds-element-reference {
3044
+ padding: var(--ds-element-reference-padding);
3045
+ padding-bottom: var(--ds-element-reference-padding-bottom);
3046
+ box-shadow: var(--ds-button-empty-border);
3047
+ border-radius: var(--ds-element-reference-border-radius);
3048
+ }
3049
+ .ds-element-reference-header {
3050
+ display: flex;
3051
+ justify-content: space-between;
3052
+ align-items: flex-start;
3053
+ margin-bottom: var(--ds-element-reference-heading-margin-bottom);
3054
+ overflow-x: hidden;
3055
+ }
3056
+ .ds-element-reference-header-title {
3057
+ font-family: var(--ds-element-reference-title-font-family);
3058
+ font-size: var(--ds-element-reference-title-font-size);
3059
+ color: var(--ds-element-reference-title-font-color);
3060
+ font-weight: bold;
3061
+ white-space: nowrap;
3062
+ overflow: hidden;
3063
+ text-overflow: ellipsis;
3064
+ }
3065
+ .ds-element-reference-header-buttons {
3066
+ display: flex;
3067
+ align-items: center;
3068
+ justify-content: flex-start;
3069
+ }
3070
+ .ds-element-reference-header-buttons .ds-button-primary-small:first-child, .ds-element-reference-header-buttons .ds-button-primary:first-child, .ds-element-reference-header-buttons .ds-button-tertiary:first-child {
3071
+ margin-right: 8px;
3072
+ }
3073
+ .ds-element-reference-header-subtitle {
3074
+ font-family: var(--ds-element-reference-subtitle-font-family);
3075
+ font-size: var(--ds-element-reference-subtitle-font-size);
3076
+ color: var(--ds-element-reference-subtitle-font-color);
3077
+ white-space: nowrap;
3078
+ overflow: hidden;
3079
+ text-overflow: ellipsis;
3080
+ }
3081
+ .ds-element-reference-header-subtitle-bigger {
3082
+ font-family: var(--ds-element-reference-subtitle-font-family);
3083
+ font-size: var(--ds-element-reference-subtitle-bigger-font-size);
3084
+ color: var(--ds-element-reference-subtitle-font-color);
3085
+ white-space: nowrap;
3086
+ overflow: hidden;
3087
+ text-overflow: ellipsis;
3088
+ }
3089
+ .ds-element-reference-content {
3090
+ display: flex;
3091
+ align-items: center;
3092
+ flex-wrap: wrap;
3093
+ justify-content: space-between;
3094
+ overflow-x: hidden;
3095
+ }
3096
+ .ds-element-reference-content .ds-block-propertyandvalue {
3097
+ margin-bottom: 8px;
3098
+ width: 30%;
3099
+ }
3100
+ .ds-element-reference-content .ds-block-propertyandvalue-history-value {
3101
+ width: 100%;
3102
+ margin-bottom: 8px;
3103
+ }
3104
+
3105
+ .ds-element-reference-margin-bottom {
3106
+ margin-bottom: var(--ds-element-references-margin-bottom);
3107
+ }
3108
+
3109
+ .ds-element-reference-clickable {
3110
+ cursor: pointer;
3111
+ transition: 0.2s all ease;
3112
+ }
3113
+ .ds-element-reference-clickable:hover {
3114
+ background-color: var(--ds-element-reference-hover-background);
3115
+ transition: 0.2s all ease;
3116
+ }
3117
+
3118
+ .ds-block-propertyandvalue {
3119
+ max-width: 140px;
3120
+ min-width: 80px;
3121
+ }
3122
+ .ds-block-propertyandvalue-property {
3123
+ color: var(--ds-light-gray-font);
3124
+ font-family: var(--ds-item-font-family);
3125
+ font-size: 13px;
3126
+ font-weight: 600;
3127
+ width: 100%;
3128
+ white-space: nowrap;
3129
+ overflow: hidden;
3130
+ text-overflow: ellipsis;
3131
+ }
3132
+ .ds-block-propertyandvalue-value {
3133
+ color: var(--ds-black-font);
3134
+ font-family: var(--ds-item-font-family);
3135
+ font-size: 13px;
3136
+ white-space: nowrap;
3137
+ overflow: hidden;
3138
+ text-overflow: ellipsis;
3139
+ }
3140
+
3141
+ .ds-block-propertyandvalue-large-property {
3142
+ color: var(--ds-light-gray-font);
3143
+ font-family: var(--ds-item-font-family);
3144
+ font-size: 14px;
3145
+ width: 100%;
3146
+ white-space: nowrap;
3147
+ overflow: hidden;
3148
+ text-overflow: ellipsis;
3149
+ }
3150
+ .ds-block-propertyandvalue-large-value {
3151
+ color: var(--ds-black-font);
3152
+ font-family: var(--ds-item-font-family);
3153
+ font-size: 14px;
3154
+ white-space: nowrap;
3155
+ overflow: hidden;
3156
+ text-overflow: ellipsis;
3157
+ }
3158
+
3159
+ .ds-block-propertyandvalue-history-property {
3160
+ color: var(--ds-black-font);
3161
+ font-family: var(--ds-item-font-family);
3162
+ font-size: 13px;
3163
+ width: 100%;
3164
+ white-space: nowrap;
3165
+ overflow: hidden;
3166
+ text-overflow: ellipsis;
3167
+ font-weight: 600;
3168
+ }
3169
+ .ds-block-propertyandvalue-history-value {
3170
+ font-family: var(--ds-item-font-family);
3171
+ font-size: 13px;
3172
+ white-space: nowrap;
3173
+ overflow: hidden;
3174
+ text-overflow: ellipsis;
3175
+ display: flex;
3176
+ align-items: center;
3177
+ flex-wrap: wrap;
3178
+ }
3179
+ .ds-block-propertyandvalue-history-value-old {
3180
+ color: var(--ds-light-gray-font);
3181
+ white-space: nowrap;
3182
+ overflow: hidden;
3183
+ text-overflow: ellipsis;
3184
+ }
3185
+ .ds-block-propertyandvalue-history-value ion-icon {
3186
+ margin: 0 var(--ds-margin-icon-and-content-smaller);
3187
+ }
3188
+ .ds-block-propertyandvalue-history-value-new {
3189
+ color: var(--ds-black-font);
3190
+ white-space: nowrap;
3191
+ overflow: hidden;
3192
+ text-overflow: ellipsis;
3193
+ }
3194
+
3195
+ .ds-block-toggleandtext {
3196
+ display: flex;
3197
+ align-items: center;
3198
+ }
3199
+ .ds-block-toggleandtext .ds-ion-toggle {
3200
+ margin-right: var(--ds-margin-icon-and-content);
3201
+ }
3202
+ .ds-block-toggleandtext-text {
3203
+ color: var(--ds-black-font);
3204
+ font-family: var(--ds-item-font-family);
3205
+ font-size: 13px;
3206
+ white-space: nowrap;
3207
+ overflow: hidden;
3208
+ text-overflow: ellipsis;
3209
+ }
3210
+
3211
+ .ds-block-checkboxandtext {
3212
+ display: flex;
3213
+ align-items: center;
3214
+ }
3215
+ .ds-block-checkboxandtext .ds-ion-checkbox {
3216
+ margin-right: var(--ds-margin-icon-and-content);
3217
+ }
3218
+ .ds-block-checkboxandtext-text {
3219
+ color: var(--ds-black-font);
3220
+ font-family: var(--ds-item-font-family);
3221
+ font-size: 13px;
3222
+ user-select: none;
3223
+ cursor: pointer;
3224
+ }
3225
+
3226
+ .ds-modal-row-expanded-modal, .ds-modal-secondary-modal, .ds-modal-primary-modal {
3227
+ z-index: var(--ds-modal-z-index);
3228
+ --box-shadow: var(--ds-floating-block-box-shadow);
3229
+ --border-radius: var(--ds-modal-border-radius);
3230
+ background-color: transparent !important;
3231
+ align-items: start;
3232
+ justify-content: end;
3233
+ border: 1px solid var(--ds-border-color);
3234
+ /*&::part(backdrop) {
3235
+ display: none !important;
3236
+ }*/
3237
+ }
3238
+
3239
+ .ds-modal-primary-modal {
3240
+ --width: var(--ds-modal-primary-width);
3241
+ --height: var(--ds-modal-primary-height);
3242
+ right: 0;
3243
+ }
3244
+ .ds-modal-primary-header {
3245
+ display: flex;
3246
+ align-items: center;
3247
+ justify-content: space-between;
3248
+ border-bottom: var(--ds-modal-header-border-bottom);
3249
+ padding: var(--ds-modal-header-padding-vertical) var(--ds-modal-header-padding);
3250
+ position: sticky;
3251
+ top: 0;
3252
+ background: var(--ds-white-background);
3253
+ z-index: 100000;
3254
+ }
3255
+ .ds-modal-primary-header-title {
3256
+ font-family: var(--ds-modal-header-title-font-family);
3257
+ font-size: var(--ds-modal-header-title-font-size);
3258
+ color: var(--ds-modal-header-title-font-color);
3259
+ font-weight: bold;
3260
+ }
3261
+ .ds-modal-primary-header-buttons {
3262
+ display: flex;
3263
+ align-items: center;
3264
+ flex-wrap: nowrap;
3265
+ }
3266
+ .ds-modal-primary-header-buttons button:first-child {
3267
+ margin-right: var(--ds-modal-header-buttons-margin-right);
3268
+ }
3269
+ .ds-modal-primary-content {
3270
+ padding: var(--ds-box-padding);
3271
+ margin-top: var(--ds-header-and-content-margin-bottom);
3272
+ /*.ds-block-toggleandtext, .ds-input-primary {
3273
+ margin-bottom: var(--ds-modal-header-buttons-margin-right);
3274
+ }*/
3275
+ }
3276
+ .ds-modal-secondary {
3277
+ padding: var(--ds-box-padding);
3278
+ display: flex;
3279
+ flex-direction: column;
3280
+ }
3281
+ .ds-modal-secondary-modal {
3282
+ --width: var(--ds-modal-secondary-width-2);
3283
+ --height: auto !important;
3284
+ align-items: center;
3285
+ justify-content: center;
3286
+ }
3287
+ .ds-modal-secondary-modal::part(backdrop) {
3288
+ display: block !important;
3289
+ }
3290
+ .ds-modal-secondary-content {
3291
+ overflow-y: auto;
3292
+ flex-grow: 1;
3293
+ max-height: 400px;
3294
+ margin-top: var(--ds-header-and-content-margin-bottom);
3295
+ padding: 2px;
3296
+ }
3297
+ .ds-modal-secondary-content .ds-element-reference {
3298
+ margin-bottom: var(--ds-element-references-margin-bottom);
3299
+ max-width: 500px;
3300
+ }
3301
+ .ds-modal-secondary-content-larger {
3302
+ max-height: 500px;
3303
+ }
3304
+ .ds-modal-secondary-content-larger .ds-element-reference {
3305
+ margin-bottom: var(--ds-element-references-margin-bottom);
3306
+ max-width: 100%;
3307
+ }
3308
+
3309
+ .ds-modal-row-expanded-modal {
3310
+ --width: var(--ds-modal-row-expanded-width);
3311
+ --height: var(--ds-modal-row-expanded-height);
3312
+ align-items: center;
3313
+ justify-content: center;
3314
+ }
3315
+
3316
+ .ds-item-list-column-selection .ds-item-primary {
3317
+ width: 30%;
3318
+ max-width: 30%;
3319
+ min-width: 30%;
3320
+ }
3321
+
3322
+ ion-popover.ds-popover-primary {
3323
+ --backdrop-opacity: 0;
3324
+ z-index: var(--ds-popover-z-index);
3325
+ --box-shadow: var(--ds-floating-block-box-shadow);
3326
+ --border-radius: var(--ds-popover-border-radius);
3327
+ }
3328
+
3329
+ ion-popover.ds-popover-primary {
3330
+ --width: var(--ds-popover-primary-width);
3331
+ margin-top: 8px;
3332
+ }
3333
+
3334
+ .ds-popover-body {
3335
+ padding: var(--ds-popover-padding);
3336
+ }
3337
+
3338
+ .ds-screen {
3339
+ background: var(--ds-screen-background);
3340
+ padding-left: 24px;
3341
+ padding-right: 24px;
3342
+ padding-top: 12px;
3343
+ padding-bottom: 12px;
3344
+ height: 100vh; /* 100% of the viewport height */
3345
+ width: 100%;
3346
+ display: flex;
3347
+ flex-direction: column;
3348
+ }
3349
+
3350
+ .ds-screen-loader {
3351
+ width: 100%;
3352
+ display: flex;
3353
+ justify-content: center;
3354
+ align-items: center;
3355
+ margin-top: 32px;
3356
+ }
3357
+
3358
+ .ds-screen-header {
3359
+ background: var(--ds-screen-header-background);
3360
+ padding: var(--ds-screen-header-padding-vertical) var(--ds-screen-header-padding-horizontal);
3361
+ border-color: 1px solid var(--ds-screen-header-border-color);
3362
+ border-radius: var(--ds-screen-header-border-radius);
3363
+ width: 100%;
3364
+ display: flex;
3365
+ justify-content: space-between;
3366
+ align-items: center;
3367
+ }
3368
+ .ds-screen-header-right {
3369
+ display: flex;
3370
+ align-items: center;
3371
+ }
3372
+ .ds-screen-header-title {
3373
+ font-family: var(--ds-screen-header-title-font-family);
3374
+ font-size: var(--ds-screen-header-title-font-size);
3375
+ font-weight: var(--ds-screen-header-title-font-weight);
3376
+ color: var(--ds-screen-header-title-font-color);
3377
+ font-weight: bold;
3378
+ }
3379
+ .ds-screen-header-results-count {
3380
+ font-family: var(--ds-screen-header-title-font-family);
3381
+ font-size: var(--ds-screen-header-results-count-font-size);
3382
+ color: var(--ds-screen-header-title-font-color);
3383
+ }
3384
+ .ds-screen-header-el {
3385
+ margin-right: var(--ds-screen-header-elements-margin-right);
3386
+ }
3387
+ .ds-screen-header .ds-input-searchbar {
3388
+ width: 160px;
3389
+ }
3390
+
3391
+ .ds-screen-customhtml {
3392
+ width: 100%;
3393
+ margin-top: 16px;
3394
+ position: relative;
3395
+ }
3396
+ .ds-screen-customhtml iframe {
3397
+ height: 100%;
3398
+ border: none;
3399
+ border-radius: 8px;
3400
+ }
3401
+
3402
+ .ds-screen-table {
3403
+ flex-grow: 1;
3404
+ margin-top: 16px;
3405
+ overflow-y: auto;
3406
+ overflow-x: auto;
3407
+ background: var(--ds-screen-table-background);
3408
+ border-radius: var(--ds-screen-table-border-radius);
3409
+ }
3410
+ .ds-screen-table-columns-header {
3411
+ display: flex;
3412
+ align-items: center;
3413
+ position: relative;
3414
+ border-bottom: 1px solid var(--ds-border-color);
3415
+ box-sizing: border-box;
3416
+ width: fit-content;
3417
+ min-width: 100%;
3418
+ }
3419
+ .ds-screen-table-columns-header button {
3420
+ margin-left: var(--ds-margin-between-items);
3421
+ }
3422
+ .ds-screen-table-header-col {
3423
+ position: relative;
3424
+ font-size: 13px;
3425
+ cursor: pointer;
3426
+ display: flex;
3427
+ justify-content: center;
3428
+ align-items: center;
3429
+ border-bottom: 1px solid var(--ds-border-color);
3430
+ margin-bottom: -1px;
3431
+ padding: var(--ds-screen-table-header-col-padding-vertical);
3432
+ white-space: nowrap;
3433
+ overflow: hidden;
3434
+ text-overflow: ellipsis;
3435
+ background: var(--ds-screen-header-col-background);
3436
+ user-select: none;
3437
+ }
3438
+ .ds-screen-table-header-col ion-icon {
3439
+ font-size: 16px;
3440
+ min-width: 16px;
3441
+ margin-left: var(--ds-margin-icon-and-content);
3442
+ }
3443
+ .ds-screen-table-header-col .ds-button-icon-only {
3444
+ margin-left: 0;
3445
+ padding: 0;
3446
+ }
3447
+ .ds-screen-table-header-col-sorticon {
3448
+ position: absolute;
3449
+ height: 100%;
3450
+ background: white;
3451
+ right: 2px;
3452
+ z-index: 1000000;
3453
+ display: flex;
3454
+ justify-content: center;
3455
+ align-items: center;
3456
+ background: var(--ds-screen-header-col-background);
3457
+ }
3458
+ .ds-screen-table-header-col-sorticon ion-icon {
3459
+ font-size: 14px;
3460
+ min-width: 14px;
3461
+ margin-left: 0;
3462
+ }
3463
+ .ds-screen-table-header-col-resizer {
3464
+ width: var(--ds-screen-table-resizer-width);
3465
+ background: var(--ds-screen-table-resizer-background);
3466
+ height: 100%;
3467
+ top: 0;
3468
+ position: absolute;
3469
+ right: 0;
3470
+ cursor: col-resize;
3471
+ user-select: none;
3472
+ z-index: 100000;
3473
+ transition: 0.2s all ease;
3474
+ }
3475
+ .ds-screen-table-header-col-resizer:hover {
3476
+ background: var(--ds-primary-color);
3477
+ width: 3px;
3478
+ }
3479
+ .ds-screen-table-header-col-resizer:focus-within {
3480
+ background: var(--ds-primary-color);
3481
+ width: 3px;
3482
+ }
3483
+ .ds-screen-table-header-col-editor {
3484
+ position: relative;
3485
+ font-size: 13px;
3486
+ width: 130px;
3487
+ cursor: pointer;
3488
+ display: flex;
3489
+ justify-content: center;
3490
+ align-items: center;
3491
+ border-bottom: 1px solid var(--ds-border-color);
3492
+ margin-bottom: -1px;
3493
+ padding: var(--ds-screen-table-header-col-padding-vertical);
3494
+ white-space: nowrap;
3495
+ overflow: hidden;
3496
+ text-overflow: ellipsis;
3497
+ user-select: none;
3498
+ background: var(--ds-primary-color);
3499
+ color: white;
3500
+ }
3501
+ .ds-screen-table-header-col-editor ion-icon {
3502
+ font-size: 16px;
3503
+ min-width: 16px;
3504
+ margin-right: var(--ds-margin-icon-and-content);
3505
+ }
3506
+ .ds-screen-table-header-col-editor .ds-button-icon-only {
3507
+ margin-left: 0;
3508
+ padding: 0;
3509
+ }
3510
+ .ds-screen-table-header-col-editor .ds-screen-table-header-col-sorticon {
3511
+ background: var(--ds-primary-color) !important;
3512
+ }
3513
+ .ds-screen-table-header-col-editor .ds-screen-table-header-col-sorticon ion-icon {
3514
+ color: white;
3515
+ }
3516
+ .ds-screen-table-content {
3517
+ width: fit-content;
3518
+ min-width: 100%;
3519
+ }
3520
+ .ds-screen-table-content-row {
3521
+ width: 100%;
3522
+ position: relative;
3523
+ display: flex;
3524
+ align-items: center;
3525
+ height: var(--ds-screen-table-content-row-height);
3526
+ border-bottom: 1px solid var(--ds-border-color);
3527
+ /*
3528
+ todo: poner esto cuando se clique en una row expanded
3529
+ border: 2px solid var(--ds-primary-color);
3530
+ border-radius: 6px;*/
3531
+ cursor: pointer;
3532
+ transition: 0.2s all ease;
3533
+ }
3534
+ .ds-screen-table-content-row:hover {
3535
+ background: var(--ds-screen-table-content-row-hover-background);
3536
+ }
3537
+ .ds-screen-table-content-row-magicWandButtons {
3538
+ position: absolute;
3539
+ left: 0;
3540
+ background: red;
3541
+ height: 20px;
3542
+ z-index: 1000000;
3543
+ }
3544
+ .ds-screen-table-content-row-rowexpandedlink {
3545
+ position: absolute;
3546
+ left: 50%;
3547
+ transform: translateX(-50%);
3548
+ width: 36px;
3549
+ height: 8px;
3550
+ background: white;
3551
+ bottom: -2px;
3552
+ z-index: 10000;
3553
+ border: 1px solid #dfdfdf;
3554
+ border-top-right-radius: 6px;
3555
+ border-top-left-radius: 6px;
3556
+ border-bottom: 0;
3557
+ display: flex;
3558
+ justify-content: center;
3559
+ align-items: center;
3560
+ transition: 0.2s all ease;
3561
+ display: none;
3562
+ }
3563
+ .ds-screen-table-content-row-rowexpandedlink ion-icon {
3564
+ font-size: 10px;
3565
+ color: #b1b1b1;
3566
+ }
3567
+ .ds-screen-table-content-row-activated {
3568
+ background: var(--ds-primary-color-smooth-background);
3569
+ border-radius: 6px;
3570
+ }
3571
+ .ds-screen-table-content-row-activated .ds-screen-table-content-col {
3572
+ margin-bottom: 0;
3573
+ }
3574
+ .ds-screen-table-content-row-activated .ds-screen-table-content-row-rowexpandedlink {
3575
+ display: flex;
3576
+ transition: 0.2s all ease;
3577
+ }
3578
+ .ds-screen-table-content-row-expanded {
3579
+ height: 50px;
3580
+ position: relative;
3581
+ }
3582
+ .ds-screen-table-content-row-expanded-resizer {
3583
+ height: var(--ds-screen-table-row-expanded-resizer-height);
3584
+ background: var(--ds-screen-table-row-expanded-resizer-background);
3585
+ width: 100%;
3586
+ bottom: 0;
3587
+ z-index: 100000;
3588
+ position: absolute;
3589
+ cursor: row-resize;
3590
+ user-select: none;
3591
+ transition: 0.2s all ease;
3592
+ }
3593
+ .ds-screen-table-content-row-expanded-resizer:hover {
3594
+ background: var(--ds-primary-color);
3595
+ height: 3px;
3596
+ }
3597
+ .ds-screen-table-content-row-expanded-resizer:focus-within {
3598
+ background: var(--ds-primary-color);
3599
+ height: 3px;
3600
+ }
3601
+ .ds-screen-table-content-col {
3602
+ height: 100%;
3603
+ border-bottom: 1px solid var(--ds-border-color);
3604
+ margin-bottom: -1px;
3605
+ white-space: nowrap;
3606
+ overflow: hidden;
3607
+ text-overflow: ellipsis;
3608
+ display: flex;
3609
+ justify-content: center;
3610
+ align-items: center;
3611
+ font-size: 13px;
3612
+ }
3613
+
3614
+ .ds-table-header-col-width-fastDataEditor {
3615
+ width: 130px;
3616
+ min-width: 130px;
3617
+ max-width: 130px;
3618
+ display: flex;
3619
+ justify-content: center;
3620
+ align-items: center;
3621
+ }
3622
+
3623
+ .ds-table-header-col-width-multipleSelect {
3624
+ width: 90px;
3625
+ min-width: 90px;
3626
+ max-width: 90px;
3627
+ display: flex;
3628
+ justify-content: center;
3629
+ align-items: center;
3630
+ }
3631
+ .ds-table-header-col-width-multipleSelect-header {
3632
+ background: var(--ds-screen-header-col-background) !important;
3633
+ }
3634
+ .ds-table-header-col-width-multipleSelect-header .ds-screen-table-header-col-sorticon {
3635
+ background: var(--ds-screen-header-col-background) !important;
3636
+ }
3637
+ .ds-table-header-col-width-multipleSelect-header .ds-screen-table-header-col-sorticon ion-icon {
3638
+ color: var(--ds-dark-gray-font);
3639
+ }
3640
+
3641
+ .ds-screen-gallery {
3642
+ flex-grow: 1;
3643
+ margin-top: 16px;
3644
+ overflow-y: auto;
3645
+ display: flex;
3646
+ flex-wrap: wrap;
3647
+ justify-content: flex-start;
3648
+ }
3649
+
3650
+ .ds-screen-kanban {
3651
+ flex-grow: 1;
3652
+ margin-top: 16px;
3653
+ overflow-y: auto;
3654
+ overflow-x: auto;
3655
+ display: flex;
3656
+ flex-wrap: nowrap;
3657
+ align-items: flex-start;
3658
+ justify-content: flex-start;
3659
+ }
3660
+
3661
+ .ds-screen-kanban-column {
3662
+ width: var(--ds-screen-kanban-column-width);
3663
+ min-width: var(--ds-screen-kanban-column-width);
3664
+ max-width: var(--ds-screen-kanban-column-width);
3665
+ height: var(--ds-screen-kanban-column-height);
3666
+ background: var(--ds-white-background);
3667
+ margin-right: var(--ds-screen-kanba-column-margin-right);
3668
+ border-top-right-radius: var(--ds-screen-kanban-top-border-radius);
3669
+ border-top-left-radius: var(--ds-screen-kanban-top-border-radius);
3670
+ border-bottom-right-radius: var(--ds-screen-kanban-bottom-border-radius);
3671
+ border-bottom-left-radius: var(--ds-screen-kanban-bottom-border-radius);
3672
+ display: flex;
3673
+ flex-direction: column;
3674
+ }
3675
+ .ds-screen-kanban-column-header {
3676
+ display: flex;
3677
+ align-items: center;
3678
+ justify-content: flex-start;
3679
+ border-top-right-radius: var(--ds-screen-kanban-top-border-radius);
3680
+ border-top-left-radius: var(--ds-screen-kanban-top-border-radius);
3681
+ padding: 12px 16px;
3682
+ background: #D4D4D4;
3683
+ font-size: var(--ds-global-font-size-large);
3684
+ color: var(--ds-black-font);
3685
+ font-weight: 500;
3686
+ }
3687
+ .ds-screen-kanban-column-content {
3688
+ min-height: var(--ds-screen-kanban-content-min-height);
3689
+ padding: var(--ds-screen-kanban-content-padding);
3690
+ padding-right: 0;
3691
+ flex-grow: 1;
3692
+ overflow-y: auto;
3693
+ background-color: var(--ds-screen-kanban-content-background-color);
3694
+ border-radius: var(--ds-screen-kanban-content-border-radius);
3695
+ }
3696
+ .ds-screen-kanban-column-content .ds-card-kanban {
3697
+ margin-bottom: var(--ds-header-and-content-margin-bottom);
3698
+ }
3699
+
3700
+ .ds-screen-calendar {
3701
+ flex-grow: 1;
3702
+ }
3703
+
3704
+ ::ng-deep .cal-month-view .cal-header .cal-cell {
3705
+ border: 3px solid red !important;
3706
+ }
3707
+
3708
+ .ds-row-expanded {
3709
+ display: flex;
3710
+ align-items: flex-start;
3711
+ height: 100%;
3712
+ border-right: 2px solid var(--ds-border-color);
3713
+ }
3714
+ .ds-row-expanded-aside {
3715
+ height: 100%;
3716
+ position: relative;
3717
+ width: 60px;
3718
+ }
3719
+ .ds-row-expanded-aside-container {
3720
+ overflow-y: auto;
3721
+ height: 100%;
3722
+ }
3723
+ .ds-row-expanded-aside-resizer {
3724
+ width: var(--ds-row-expanded-aside-resizer-width);
3725
+ background: var(--ds-row-expanded-aside-resizer-background);
3726
+ height: 100%;
3727
+ right: 0;
3728
+ top: 0;
3729
+ position: absolute;
3730
+ cursor: col-resize;
3731
+ user-select: none;
3732
+ z-index: 100000;
3733
+ transition: 0.2s all ease;
3734
+ }
3735
+ .ds-row-expanded-aside-resizer:hover {
3736
+ background: var(--ds-primary-color);
3737
+ width: 3px;
3738
+ }
3739
+ .ds-row-expanded-aside-resizer:focus-within {
3740
+ background: var(--ds-primary-color);
3741
+ width: 3px;
3742
+ }
3743
+ .ds-row-expanded-customhtmlcode {
3744
+ width: 100%;
3745
+ height: 100%;
3746
+ }
3747
+ .ds-row-expanded-body {
3748
+ height: 100%;
3749
+ position: relative;
3750
+ overflow-y: auto;
3751
+ }
3752
+ .ds-row-expanded-secondary-aside {
3753
+ height: 100%;
3754
+ position: relative;
3755
+ }
3756
+ .ds-row-expanded-secondary-aside-collapse-button {
3757
+ position: absolute;
3758
+ cursor: pointer;
3759
+ width: 22px;
3760
+ height: 22px;
3761
+ border-radius: 50%;
3762
+ border: 1px solid #eaeaea;
3763
+ top: 50%;
3764
+ left: -12px;
3765
+ transform: translateY(-50%);
3766
+ display: flex;
3767
+ align-items: center;
3768
+ justify-content: center;
3769
+ z-index: 10000000;
3770
+ background: white;
3771
+ }
3772
+ .ds-row-expanded-secondary-aside-collapse-button:hover {
3773
+ background: #f2f2f2;
3774
+ }
3775
+ .ds-row-expanded-secondary-aside-container {
3776
+ overflow-y: auto;
3777
+ overflow-x: hidden;
3778
+ height: 100%;
3779
+ padding: var(--ds-row-expanded-secondary-aside-padding);
3780
+ display: flex;
3781
+ flex-direction: column;
3782
+ }
3783
+ .ds-row-expanded-secondary-aside-container .ds-button-empty {
3784
+ margin-bottom: var(--ds-element-references-margin-bottom);
3785
+ }
3786
+ .ds-row-expanded-secondary-aside .ds-element-reference {
3787
+ margin-bottom: var(--ds-element-references-margin-bottom);
3788
+ }
3789
+ .ds-row-expanded-secondary-aside-resizer {
3790
+ width: var(--ds-row-expanded-aside-resizer-width);
3791
+ background: var(--ds-row-expanded-aside-resizer-background);
3792
+ height: 100%;
3793
+ left: 0;
3794
+ top: 0;
3795
+ bottom: 0;
3796
+ position: absolute;
3797
+ cursor: col-resize;
3798
+ z-index: 100000;
3799
+ user-select: none;
3800
+ transition: 0.2s all ease;
3801
+ }
3802
+ .ds-row-expanded-secondary-aside-resizer:hover {
3803
+ background: var(--ds-primary-color);
3804
+ width: 3px;
3805
+ }
3806
+ .ds-row-expanded-secondary-aside-resizer:focus-within {
3807
+ background: var(--ds-primary-color);
3808
+ width: 3px;
3809
+ }
3810
+
3811
+ .ds-row-expanded-aside {
3812
+ padding: var(--ds-row-expanded-aside-padding-vertical) var(--ds-row-expanded-aside-padding-horizontal);
3813
+ overflow-x: hidden;
3814
+ display: flex;
3815
+ flex-direction: column;
3816
+ }
3817
+ .ds-row-expanded-aside-header {
3818
+ margin-bottom: 8px;
3819
+ }
3820
+ .ds-row-expanded-aside-tree {
3821
+ overflow-y: auto;
3822
+ overflow-x: hidden;
3823
+ flex-grow: 1;
3824
+ }
3825
+ .ds-row-expanded-aside-tree .ds-item-tree {
3826
+ margin-bottom: 4px;
3827
+ }
3828
+
3829
+ .ds-row-expanded-body {
3830
+ width: 100%;
3831
+ position: relative;
3832
+ }
3833
+ .ds-row-expanded-body .ds-header-basic {
3834
+ width: auto;
3835
+ margin-bottom: var(--ds-header-and-content-margin-bottom);
3836
+ position: sticky;
3837
+ top: 0;
3838
+ padding: var(--ds-row-expanded-body-padding);
3839
+ z-index: 100000;
3840
+ }
3841
+ .ds-row-expanded-body-content {
3842
+ display: flex;
3843
+ align-items: center;
3844
+ flex-wrap: wrap;
3845
+ padding: var(--ds-row-expanded-body-padding);
3846
+ }
3847
+ .ds-row-expanded-body-content .ds-input-primary {
3848
+ margin-right: 1%;
3849
+ margin-bottom: var(--ds-input-margin-bottom);
3850
+ }
3851
+ .ds-row-expanded-body-lastusersactions {
3852
+ position: sticky;
3853
+ bottom: 0;
3854
+ z-index: 10000;
3855
+ width: 100%;
3856
+ display: flex;
3857
+ justify-content: flex-end;
3858
+ padding-right: 16px;
3859
+ padding-bottom: 16px;
3860
+ }
3861
+ .ds-row-expanded-body .ds-item-blue-small {
3862
+ width: fit-content;
3863
+ }
3864
+
3865
+ .ds-header-basic {
3866
+ display: flex;
3867
+ align-items: flex-start;
3868
+ justify-content: space-between;
3869
+ margin-bottom: var(--ds-header-and-content-margin-bottom);
3870
+ background: var(--ds-white-background);
3871
+ }
3872
+ .ds-header-basic-notsavedchanges {
3873
+ position: absolute;
3874
+ color: var(--ds-header-notsavedchanges-color);
3875
+ right: var(--ds-row-expanded-body-padding);
3876
+ bottom: 0;
3877
+ font-size: var(--ds-header-notsavedchanges-font-size);
3878
+ }
3879
+ .ds-header-basic-title {
3880
+ font-family: var(--ds-modal-header-title-font-family);
3881
+ font-size: var(--ds-modal-header-title-font-size);
3882
+ color: var(--ds-modal-header-title-font-color);
3883
+ margin-right: var(--ds-modal-header-title-margin-right);
3884
+ font-weight: bold;
3885
+ }
3886
+ .ds-header-basic-subtitle {
3887
+ font-family: var(--ds-modal-header-subtitle-font-family);
3888
+ font-size: var(--ds-modal-header-subtitle-font-size);
3889
+ color: var(--ds-modal-header-subtitle-font-color);
3890
+ }
3891
+ .ds-header-basic-buttons {
3892
+ display: flex;
3893
+ align-items: center;
3894
+ flex-wrap: nowrap;
3895
+ }
3896
+ .ds-header-basic-buttons button {
3897
+ margin-right: var(--ds-modal-header-buttons-margin-right);
3898
+ }
3899
+ .ds-header-basic-buttons button.ds-buttonsgroup-navigation-button {
3900
+ margin-right: 0;
3901
+ }
3902
+ .ds-header-basic-buttons button:last-child {
3903
+ margin-right: 0;
3904
+ }
3905
+
3906
+ .ds-header-basic.ds-header-basic--border {
3907
+ border-bottom: var(--ds-modal-header-border-bottom);
3908
+ }
3909
+
3910
+ .ds-header-basic.ds-header-basic--padding {
3911
+ padding: var(--ds-modal-header-padding-small);
3912
+ }
3913
+
3914
+ .ds-header-basic.ds-header-basic--itemscenter {
3915
+ align-items: center;
3916
+ }
3917
+
3918
+ .ds-header-basic.ds-header-basic--nomarginbottom {
3919
+ margin-bottom: 0;
3920
+ }
3921
+
3922
+ .ds-header-back {
3923
+ display: flex;
3924
+ align-items: center;
3925
+ }
3926
+ .ds-header-back button {
3927
+ margin-right: var(--ds-header-and-content-margin-bottom);
3928
+ }
3929
+ .ds-header-back-title {
3930
+ font-family: var(--ds-modal-header-title-font-family);
3931
+ font-size: var(--ds-modal-header-title-font-size);
3932
+ color: var(--ds-modal-header-title-font-color);
3933
+ margin-bottom: var(--ds-header-and-content-margin-bottom);
3934
+ font-weight: bold;
3935
+ }
3936
+
3937
+ .ds-header-secondary {
3938
+ display: flex;
3939
+ align-items: flex-start;
3940
+ justify-content: space-between;
3941
+ margin-bottom: var(--ds-header-and-content-margin-bottom);
3942
+ }
3943
+ .ds-header-secondary-title {
3944
+ font-family: var(--ds-modal-header-title-font-family);
3945
+ font-size: var(--ds-modal-header-title-font-size);
3946
+ color: var(--ds-modal-header-title-font-color);
3947
+ text-align: center;
3948
+ font-weight: bold;
3949
+ }
3950
+
3951
+ .ds-button-empty-active {
3952
+ box-shadow: 0 0 0 2px var(--ds-primary-color);
3953
+ transition: 0.1s all ease;
3954
+ }
3955
+
3956
+ .ds-ion-toggle {
3957
+ --handle-background: var(--ds-white-background);
3958
+ --handle-background-checked: var(--ds-white-background);
3959
+ --handle-height: 16px;
3960
+ --handle-width: 16px;
3961
+ --handle-box-shadow: none;
3962
+ height: 20px;
3963
+ width: 39px;
3964
+ --background-checked: var(--ds-primary-color);
3965
+ --background: var(--ds-gray-background);
3966
+ }
3967
+
3968
+ .ds-ion-checkbox {
3969
+ --border-width: 1px;
3970
+ --border-color: var(--ds-border-color);
3971
+ --border-radius: 4px;
3972
+ --checkbox-background: var(--ds-primary-color);
3973
+ --background-checked: var(--ds-primary-color);
3974
+ margin-right: var(--ds-item-checkbox-margin-right);
3975
+ --size: 20px;
3976
+ --transition: 0.1s all ease;
3977
+ min-width: 20px;
3978
+ max-width: 20px;
3979
+ width: 20px;
3980
+ }
3981
+ .ds-ion-checkbox ion-checkbox::part(container) {
3982
+ border-radius: 6px;
3983
+ width: 20px;
3984
+ height: 20px;
3985
+ padding: 4px;
3986
+ }
3987
+
3988
+ .ds-ion-checkbox-bigger {
3989
+ --border-width: 1px;
3990
+ --border-color: var(--ds-border-color);
3991
+ --border-radius: 4px;
3992
+ --checkbox-background: var(--ds-primary-color);
3993
+ --background-checked: var(--ds-primary-color);
3994
+ margin-right: var(--ds-item-checkbox-margin-right);
3995
+ --size: 22px;
3996
+ --transition: 0.1s all ease;
3997
+ min-width: 22px;
3998
+ max-width: 22px;
3999
+ width: 22px;
4000
+ }
4001
+ .ds-ion-checkbox-bigger ion-checkbox::part(container) {
4002
+ border-radius: 6px;
4003
+ width: 22px;
4004
+ height: 22px;
4005
+ padding: 0px;
4006
+ }
4007
+
4008
+ .ds-ion-checbox-round {
4009
+ --border-width: 1px;
4010
+ --border-color: var(--ds-border-color);
4011
+ --checkbox-background: var(--ds-primary-color);
4012
+ --background-checked: var(--ds-primary-color);
4013
+ --size: 20px;
4014
+ width: 20px;
4015
+ max-width: 20px;
4016
+ min-width: 20px;
4017
+ --transition: 0.1s all ease;
4018
+ }
4019
+ .ds-ion-checbox-round ion-checkbox::part(container) {
4020
+ width: 20px;
4021
+ height: 20px;
4022
+ padding: 4px;
4023
+ }
4024
+
4025
+ .ds-title-pages {
4026
+ font-family: "Inter", sans-serif;
4027
+ font-size: 11px;
4028
+ color: var(--ds-dark-gray-font);
4029
+ margin-bottom: 8px;
4030
+ }
4031
+
4032
+ .ds-title-h1 {
4033
+ font-family: var(--ds-font-family);
4034
+ font-size: var(--ds-h1-font-size);
4035
+ font-weight: bold;
4036
+ color: var(--ds-h1-font-color);
4037
+ margin-bottom: var(--ds-header-and-content-margin-bottom);
4038
+ }
4039
+
4040
+ .ds-title-h2 {
4041
+ font-family: var(--ds-font-family);
4042
+ font-size: var(--ds-h2-font-size);
4043
+ color: var(--ds-font-color);
4044
+ font-weight: 600;
4045
+ margin-bottom: var(--ds-header-and-content-margin-bottom);
4046
+ }
4047
+
4048
+ .ds-title-margin-bottom {
4049
+ margin-bottom: var(--ds-header-and-content-margin-bottom);
4050
+ }
4051
+
4052
+ .ds-titlecase {
4053
+ text-transform: capitalize;
4054
+ }
4055
+
4056
+ .ds-text {
4057
+ font-family: var(--ds-text-font-family);
4058
+ font-size: var(--ds-text-font-size);
4059
+ color: var(--ds-text-font-color);
4060
+ }
4061
+
4062
+ .ds-text-margin-bottom {
4063
+ margin-bottom: var(--ds-header-and-content-margin-bottom);
4064
+ }
4065
+
4066
+ .ds-title-pages-small {
4067
+ font-family: "Inter", sans-serif;
4068
+ font-size: 9px;
4069
+ color: var(--ds-dark-gray-font);
4070
+ margin-bottom: 8px;
4071
+ }
4072
+
4073
+ .ds-modal-title {
4074
+ font-family: "Poppins", sans-serif;
4075
+ font-size: var(--ds-global-font-size-bigger);
4076
+ font-weight: bold;
4077
+ color: var(--ds-dark-gray-font);
4078
+ margin-bottom: var(--ds-header-and-content-margin-bottom);
4079
+ }
4080
+
4081
+ .ds-link {
4082
+ text-decoration: none;
4083
+ }
4084
+
4085
+ .ds-block-inputs-full-width {
4086
+ display: flex;
4087
+ align-items: center;
4088
+ flex-wrap: wrap;
4089
+ }
4090
+ .ds-block-inputs-full-width app-smart-form {
4091
+ width: 100%;
4092
+ }
4093
+ .ds-block-inputs-full-width .ds-input-primary, .ds-block-inputs-full-width .ds-input-secondary, .ds-block-inputs-full-width .ds-input-tertiary {
4094
+ width: 100%;
4095
+ margin-bottom: var(--ds-input-margin-bottom);
4096
+ }
4097
+
4098
+ .ds-block-inputs-half-width {
4099
+ display: flex;
4100
+ align-items: center;
4101
+ flex-wrap: wrap;
4102
+ }
4103
+ .ds-block-inputs-half-width app-smart-input {
4104
+ width: 48%;
4105
+ margin-right: 1%;
4106
+ margin-bottom: var(--ds-input-margin-bottom);
4107
+ }
4108
+ .ds-block-inputs-half-width .ds-block-inputs-margin {
4109
+ display: flex;
4110
+ flex-wrap: wrap;
4111
+ }
4112
+
4113
+ .ds-block-buttons-end {
4114
+ width: 100%;
4115
+ display: flex;
4116
+ align-items: center;
4117
+ justify-content: flex-end;
4118
+ }
4119
+
4120
+ .ds-block-inputs-100w app-smart-input {
4121
+ width: 100%;
4122
+ }
4123
+
4124
+ /*::-webkit-scrollbar,
4125
+ *::-webkit-scrollbar-thumb {
4126
+ height: 28px;
4127
+ width: 28px;
4128
+ border-radius: 13px;
4129
+ background-clip: padding-box;
4130
+ border: 10px solid transparent;
4131
+ }
4132
+
4133
+ *::-webkit-scrollbar-thumb {
4134
+ box-shadow: inset 0 0 0 10px var(--ds-scrollbar-color);
4135
+ }*/
4136
+ .ds-totalum-aside {
4137
+ width: 250px;
4138
+ height: 100%;
4139
+ position: relative;
4140
+ background: var(--ds-totalum-aside-background);
4141
+ box-shadow: var(--ds-floating-block-box-shadow);
4142
+ display: flex;
4143
+ flex-direction: column;
4144
+ justify-content: space-between;
4145
+ }
4146
+ .ds-totalum-aside-collapse-button {
4147
+ position: absolute;
4148
+ cursor: pointer;
4149
+ width: 26px;
4150
+ height: 26px;
4151
+ border-radius: 50%;
4152
+ border: 1px solid #eaeaea;
4153
+ top: 50%;
4154
+ right: -12px;
4155
+ transform: translateY(-50%);
4156
+ display: flex;
4157
+ align-items: center;
4158
+ justify-content: center;
4159
+ z-index: 10000000;
4160
+ background: white;
4161
+ }
4162
+ .ds-totalum-aside-collapse-button:hover {
4163
+ background: #f2f2f2;
4164
+ }
4165
+ .ds-totalum-aside-top {
4166
+ flex-grow: 1;
4167
+ overflow-y: auto;
4168
+ overflow-x: hidden;
4169
+ display: flex;
4170
+ flex-direction: column;
4171
+ width: 100%;
4172
+ }
4173
+ .ds-totalum-aside-top-top-small {
4174
+ align-items: center;
4175
+ }
4176
+ .ds-totalum-aside-top-corporative {
4177
+ width: 100%;
4178
+ height: 52px;
4179
+ display: flex;
4180
+ justify-content: center;
4181
+ align-items: center;
4182
+ cursor: pointer;
4183
+ }
4184
+ .ds-totalum-aside-top-corporative img {
4185
+ width: 100%;
4186
+ max-height: 36px;
4187
+ max-width: 180px;
4188
+ }
4189
+ .ds-totalum-aside-top-pages {
4190
+ flex-grow: 1;
4191
+ overflow-y: auto;
4192
+ padding: var(--ds-box-padding);
4193
+ padding-left: 8px;
4194
+ padding-right: 8px;
4195
+ }
4196
+ .ds-totalum-aside-top-pages .ds-item-primary-no-background, .ds-totalum-aside-top-pages .ds-item-primary-no-background-only-icon, .ds-totalum-aside-top-pages .ds-item-with-right-icon {
4197
+ margin-bottom: var(--ds-margin-between-items);
4198
+ }
4199
+ .ds-totalum-aside-top-pages .ds-item-primary-no-background-only-icon {
4200
+ width: 100%;
4201
+ min-width: 100%;
4202
+ max-width: 100%;
4203
+ }
4204
+ .ds-totalum-aside-top-pages-group-pages {
4205
+ padding-left: var(--ds-box-padding);
4206
+ }
4207
+ .ds-totalum-aside-top-pages-emptyaside {
4208
+ display: flex;
4209
+ flex-direction: column;
4210
+ align-items: center;
4211
+ }
4212
+ .ds-totalum-aside-top-pages-emptyaside button {
4213
+ display: inline-block;
4214
+ }
4215
+ .ds-totalum-aside-bottom {
4216
+ border-top: 1px solid var(--ds-border-color);
4217
+ padding: var(--ds-box-padding);
4218
+ }
4219
+ .ds-totalum-aside-bottom .ds-item-primary-no-background, .ds-totalum-aside-bottom .ds-item-primary-no-background-only-icon {
4220
+ margin-bottom: var(--ds-margin-between-items);
4221
+ }
4222
+ .ds-totalum-aside-resizer {
4223
+ width: var(--ds-big-resizer-width);
4224
+ background: var(--ds-row-expanded-aside-resizer-background);
4225
+ height: 100%;
4226
+ right: 0;
4227
+ top: 0;
4228
+ position: absolute;
4229
+ cursor: col-resize;
4230
+ z-index: 100000;
4231
+ user-select: none;
4232
+ transition: 0.2s all ease;
4233
+ }
4234
+ .ds-totalum-aside-resizer:hover {
4235
+ background: var(--ds-primary-color);
4236
+ width: 4px;
4237
+ }
4238
+ .ds-totalum-aside-resizer:focus-within {
4239
+ background: var(--ds-primary-color);
4240
+ width: 4px;
4241
+ }
4242
+
4243
+ .ds-card-withimage, .ds-card-kanban, .ds-card-gallery {
4244
+ background: var(--ds-card-background);
4245
+ border-radius: var(--ds-card-border-radius);
4246
+ box-shadow: var(--ds-card-box-shadow);
4247
+ padding: var(--ds-card-padding);
4248
+ transition: transform 0.3s ease-in-out;
4249
+ }
4250
+
4251
+ .ds-card-gallery {
4252
+ height: var(--ds-card-gallery-height);
4253
+ max-height: var(--ds-card-gallery-height);
4254
+ min-height: var(--ds-card-gallery-height);
4255
+ width: var(--ds-card-gallery-width);
4256
+ max-width: var(--ds-card-gallery-width);
4257
+ min-width: var(--ds-card-gallery-width);
4258
+ margin: 16px;
4259
+ }
4260
+ .ds-card-gallery-nophoto {
4261
+ height: auto;
4262
+ max-height: auto;
4263
+ min-height: auto;
4264
+ }
4265
+ .ds-card-gallery-image {
4266
+ width: var(--ds-card-image-width);
4267
+ max-width: var(--ds-card-image-width);
4268
+ display: flex;
4269
+ justify-content: center;
4270
+ object-fit: cover;
4271
+ border-radius: var(--ds-card-border-radius);
4272
+ max-height: var(--ds-card-image-height);
4273
+ height: var(--ds-card-image-height);
4274
+ background-size: cover; /* Cover the entire div without stretching the image */
4275
+ background-position: center; /* Center the image within the div */
4276
+ background-repeat: no-repeat; /* Do not repeat the image */
4277
+ margin-bottom: var(--ds-card-margin-bottom-between-data);
4278
+ }
4279
+ .ds-card-gallery-image-footer {
4280
+ width: 100%;
4281
+ text-align: center;
4282
+ color: var(--ds-light-gray-font);
4283
+ font-size: var(--ds-card-image-footer-font-size);
4284
+ margin-bottom: var(--ds-header-and-content-margin-bottom);
4285
+ }
4286
+ .ds-card-gallery-properties .ds-block-propertyandvalue-large {
4287
+ margin-bottom: var(--ds-card-margin-bottom-between-data);
4288
+ }
4289
+
4290
+ .ds-card-hover {
4291
+ cursor: pointer;
4292
+ }
4293
+ .ds-card-hover:hover {
4294
+ transition: transform 0.3s ease-in-out;
4295
+ transform: translateY(-7px);
4296
+ }
4297
+
4298
+ .ds-card-kanban {
4299
+ width: var(--ds-card-kanban-max-width);
4300
+ max-width: var(--ds-card-kanban-max-width);
4301
+ min-width: var(--ds-card-kanban-max-width);
4302
+ user-select: none;
4303
+ }
4304
+ .ds-card-kanban:hover {
4305
+ cursor: grab;
4306
+ }
4307
+ .ds-card-kanban:focus {
4308
+ cursor: grabbing;
4309
+ }
4310
+ .ds-card-kanban-properties .ds-block-propertyandvalue-large {
4311
+ margin-bottom: var(--ds-card-margin-bottom-between-data);
4312
+ }
4313
+ .ds-card-kanban-properties .ds-block-propertyandvalue-large:last-child {
4314
+ margin-bottom: 0;
4315
+ }
4316
+
4317
+ .ds-card-withimage {
4318
+ padding: 0;
4319
+ display: inline-block;
4320
+ cursor: pointer;
4321
+ }
4322
+ .ds-card-withimage-image {
4323
+ display: flex;
4324
+ justify-content: center;
4325
+ object-fit: cover;
4326
+ border-radius: var(--ds-card-border-radius);
4327
+ background-size: cover; /* Cover the entire div without stretching the image */
4328
+ background-position: center; /* Center the image within the div */
4329
+ background-repeat: no-repeat; /* Do not repeat the image */
4330
+ margin-bottom: 0;
4331
+ }
4332
+ .ds-card-withimage-content {
4333
+ padding: var(--ds-card-padding);
4334
+ }
4335
+
4336
+ .ds-card-clicked {
4337
+ border: 2px solid var(--ds-primary-color);
4338
+ }
4339
+
4340
+ .ds-card-withimage-max-height .ds-card-withimage-image {
4341
+ max-height: var(--ds-card-image-height);
4342
+ height: var(--ds-card-image-height);
4343
+ }
4344
+
4345
+ .ds-card-p-title {
4346
+ font-size: var(--ds-global-font-size-large);
4347
+ color: var(--ds-black-font);
4348
+ margin-bottom: var(--ds-card-margin-bottom-between-data);
4349
+ font-weight: bold;
4350
+ }
4351
+
4352
+ .ds-calendar-cell {
4353
+ width: 100%;
4354
+ height: 100%;
4355
+ position: relative;
4356
+ display: flex;
4357
+ flex-direction: column;
4358
+ justify-content: space-between;
4359
+ padding: 8px;
4360
+ }
4361
+ .ds-calendar-cell-title {
4362
+ font-family: var(--ds-screen-calendar-header-cell-font-family);
4363
+ color: var(--ds-screen-calendar-header-cell-font-color);
4364
+ font-size: 18px;
4365
+ margin-bottom: 16px;
4366
+ }
4367
+ .ds-calendar-cell-events-chip-container {
4368
+ width: 100%;
4369
+ }
4370
+ .ds-calendar-cell-events-chip-container .ds-item-chip {
4371
+ margin-bottom: 8px;
4372
+ }
4373
+ .ds-calendar-cell-events-chip-container .ds-item-chip:last-child {
4374
+ margin-bottom: 0;
4375
+ }
4376
+
4377
+ .ds-structurator {
4378
+ background: var(--ds-white-background);
4379
+ height: 100vh; /* 100% of the viewport height */
4380
+ width: 100%;
4381
+ overflow: auto;
4382
+ display: flex;
4383
+ align-items: flex-start;
4384
+ }
4385
+ .ds-structurator .ds-aside-primary {
4386
+ height: 100vh;
4387
+ overflow-y: auto;
4388
+ }
4389
+ .ds-structurator-element-header {
4390
+ position: fixed;
4391
+ z-index: 100000000000000000000000;
4392
+ width: 60%;
4393
+ padding-left: 20px;
4394
+ padding-top: 20px;
4395
+ padding-bottom: 5px;
4396
+ }
4397
+ .ds-structurator-no-select-content {
4398
+ padding: 40px;
4399
+ }
4400
+ .ds-structurator-content {
4401
+ width: 100%;
4402
+ height: 100vh;
4403
+ display: flex;
4404
+ flex-direction: column;
4405
+ overflow: hidden;
4406
+ position: relative;
4407
+ }
4408
+ .ds-structurator-content-form {
4409
+ overflow-y: auto;
4410
+ padding: 20px;
4411
+ margin-top: 50px;
4412
+ padding-bottom: 50px;
4413
+ }
4414
+ .ds-structurator-content-form div {
4415
+ max-width: 600px;
4416
+ }
4417
+ .ds-structurator-content-structurator-block {
4418
+ padding: 16px;
4419
+ max-width: 600px;
4420
+ }
4421
+ .ds-structurator-content-swipedown {
4422
+ position: absolute;
4423
+ right: 12px;
4424
+ margin-bottom: -11px;
4425
+ width: 20px;
4426
+ height: 20px;
4427
+ bottom: 0;
4428
+ border-radius: 50%;
4429
+ background: var(--ds-light-gray-background);
4430
+ z-index: 100000000000000000000000;
4431
+ display: flex;
4432
+ justify-content: center;
4433
+ align-items: center;
4434
+ cursor: row-resize;
4435
+ border: 1px solid var(--ds-border-color);
4436
+ }
4437
+ .ds-structurator-content-swipedown ion-icon {
4438
+ font-size: 12px;
4439
+ color: var(--ds-dark-gray-font);
4440
+ rotate: 135deg;
4441
+ }
4442
+ .ds-structurator-content-top {
4443
+ width: 100%;
4444
+ padding: var(--ds-box-padding);
4445
+ flex-grow: 1;
4446
+ overflow-y: auto;
4447
+ position: relative;
4448
+ }
4449
+ .ds-structurator-content-bottom {
4450
+ position: fixed;
4451
+ bottom: 0px;
4452
+ width: 100%;
4453
+ overflow-x: hidden;
4454
+ overflow-y: hidden;
4455
+ z-index: 100000;
4456
+ flex-grow: 1;
4457
+ }
4458
+ .ds-structurator-content-bottom-resizer {
4459
+ height: 4px;
4460
+ background: var(--ds-primary-color);
4461
+ width: 100%;
4462
+ top: 0;
4463
+ position: absolute;
4464
+ cursor: row-resize;
4465
+ user-select: none;
4466
+ z-index: 100000;
4467
+ transition: 0.2s all ease;
4468
+ }
4469
+ .ds-structurator-content-bottom-resizer:hover {
4470
+ background: var(--ds-primary-color);
4471
+ height: 4px;
4472
+ }
4473
+ .ds-structurator-content-bottom-resizer:focus-within {
4474
+ background: var(--ds-primary-color);
4475
+ height: 4px;
4476
+ }
4477
+ .ds-structurator-content-bottom-code-editor-savebutton {
4478
+ position: absolute;
4479
+ top: 16px;
4480
+ right: 16px;
4481
+ margin: 4px;
4482
+ z-index: 100000000000000000000000;
4483
+ }
4484
+ .ds-structurator-content-code-editor {
4485
+ width: 100%;
4486
+ height: 100%;
4487
+ padding-top: 10px;
4488
+ z-index: 100000;
4489
+ }
4490
+
4491
+ .ds-aside-primary {
4492
+ width: var(--ds-aside-width);
4493
+ max-width: var(--ds-aside-width);
4494
+ min-width: var(--ds-aside-width);
4495
+ background: var(--ds-white-background);
4496
+ padding: var(--ds-box-padding);
4497
+ position: relative;
4498
+ }
4499
+ .ds-aside-primary-resizer {
4500
+ width: var(--ds-big-resizer-width);
4501
+ background: var(--ds-row-expanded-aside-resizer-background);
4502
+ height: 100%;
4503
+ right: 0;
4504
+ top: 0;
4505
+ position: absolute;
4506
+ cursor: col-resize;
4507
+ user-select: none;
4508
+ z-index: 100000;
4509
+ transition: 0.2s all ease;
4510
+ }
4511
+ .ds-aside-primary-resizer:hover {
4512
+ background: var(--ds-primary-color);
4513
+ width: 4px;
4514
+ }
4515
+ .ds-aside-primary-resizer:focus-within {
4516
+ background: var(--ds-primary-color);
4517
+ width: 4px;
4518
+ }
4519
+ .ds-aside-primary .ds-header-basic {
4520
+ align-items: center;
4521
+ margin-bottom: var(--ds-header-and-content-margin-bottom);
4522
+ overflow-x: hidden;
4523
+ }
4524
+ .ds-aside-primary-content {
4525
+ overflow-x: hidden;
4526
+ }
4527
+
4528
+ @media (max-width: 600px) {
4529
+ .ds-aside-primary {
4530
+ width: 190px !important;
4531
+ max-width: 190px !important;
4532
+ min-width: 190px !important;
4533
+ }
4534
+ }
4535
+ ::ng-deep ngs-code-editor {
4536
+ font-family: "Inconsolata", monospace !important;
4537
+ }
4538
+
4539
+ ion-modal {
4540
+ --height: 70%;
4541
+ --width: 97%;
4542
+ --border-radius: 16px;
4543
+ --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
4544
+ z-index: 10000000 !important;
4545
+ }
4546
+
4547
+ .modal-too-much-elements {
4548
+ --height: auto;
4549
+ --width: 700px;
4550
+ }
4551
+
4552
+ .popover-template-import {
4553
+ --width: 700px;
4554
+ --height: auto;
4555
+ }
4556
+
4557
+ .modal-choose-plantilla {
4558
+ --width: 1300px;
4559
+ --height: 85%;
4560
+ }
4561
+
4562
+ .loader-import-template {
4563
+ z-index: 10000000000000000000000000000000000 !important;
4564
+ }
4565
+
4566
+ .filter-modal {
4567
+ --height: 100%;
4568
+ --width: 24%;
4569
+ --min-width: 400px;
4570
+ align-items: start;
4571
+ justify-content: end;
4572
+ --backdrop-opacity: 0;
4573
+ }
4574
+
4575
+ ion-modal::part(backdrop) {
4576
+ background: rgb(209, 213, 219);
4577
+ opacity: 1;
4578
+ }
4579
+
4580
+ .filter-modal::part(backdrop) {
4581
+ opacity: 0;
4582
+ background: white;
4583
+ }
4584
+
4585
+ ion-modal ion-toolbar {
4586
+ --background: rgb(14 116 144);
4587
+ --color: white;
4588
+ }
4589
+
4590
+ .formulas-modal {
4591
+ --height: 100%;
4592
+ --width: 35%;
4593
+ --border-radius: 16px;
4594
+ --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
4595
+ --border-radius: 0;
4596
+ align-items: start;
4597
+ justify-content: end;
4598
+ --backdrop-opacity: 0;
4599
+ }
4600
+
4601
+ .formulas-modal::part(backdrop) {
4602
+ opacity: 0;
4603
+ background: white;
4604
+ }
4605
+
4606
+ .header-buttons {
4607
+ color: white;
4608
+ }
4609
+
4610
+ ion-modal.add-modal::part(content) {
4611
+ --height: 70%;
4612
+ position: absolute;
4613
+ top: 5%;
4614
+ --width: 50%;
4615
+ border-radius: 25px;
4616
+ display: block;
4617
+ }
4618
+
4619
+ ion-popover {
4620
+ --backdrop-opacity: 0;
4621
+ z-index: 200030000 !important;
4622
+ }
4623
+
4624
+ .popover-date-range {
4625
+ --width: auto;
4626
+ }
4627
+
4628
+ .modal-object-selector {
4629
+ --width: 600px;
4630
+ --height: 550px;
4631
+ }
4632
+
4633
+ .modal-object-creator {
4634
+ --height: 100%;
4635
+ --width: 400px;
4636
+ --min-width: 400px;
4637
+ align-items: start;
4638
+ justify-content: end;
4639
+ background-color: transparent !important;
4640
+ pointer-events: none !important;
4641
+ }
4642
+
4643
+ .modal-object-creator::part(backdrop) {
4644
+ display: none !important;
4645
+ }
4646
+
4647
+ .modal-object-creator-2 {
4648
+ margin-right: 40px;
4649
+ }
4650
+
4651
+ .modal-object-creator-3 {
4652
+ margin-right: 80px;
4653
+ }
4654
+
4655
+ .modal-object-creator-4 {
4656
+ margin-right: 120px;
4657
+ }
4658
+
4659
+ .modal-object-creator-5 {
4660
+ margin-right: 160px;
4661
+ }
4662
+
4663
+ .modal-object-creator-6 {
4664
+ margin-right: 200px;
4665
+ }
4666
+
4667
+ .modal-object-creator-7 {
4668
+ margin-right: 240px;
4669
+ }
4670
+
4671
+ .modal-object-creator-8 {
4672
+ margin-right: 280px;
4673
+ }
4674
+
4675
+ .modal-object-creator-9 {
4676
+ margin-right: 320px;
4677
+ }
4678
+
4679
+ .modal-object-creator-10 {
4680
+ margin-right: 360px;
4681
+ }
4682
+
4683
+ .modal-object-creator-11 {
4684
+ margin-right: 400px;
4685
+ }
4686
+
4687
+ .modal-object-creator-12 {
4688
+ margin-right: 440px;
4689
+ }
4690
+
4691
+ .modal-object-creator-13 {
4692
+ margin-right: 500px;
4693
+ }
4694
+
4695
+ .statistics-modal {
4696
+ --height: 100%;
4697
+ --width: 20%;
4698
+ --min-width: 400px;
4699
+ align-items: start;
4700
+ justify-content: end;
4701
+ --backdrop-opacity: 0;
4702
+ }
4703
+
4704
+ .sp-loader-spinner {
4705
+ position: absolute;
4706
+ top: 50%;
4707
+ left: 50%;
4708
+ transform: translate(-50%, -50%);
4709
+ display: flex;
4710
+ flex-direction: column;
4711
+ align-items: center;
4712
+ }
4713
+
4714
+ .data-values-modal {
4715
+ --width: 90%!important;
4716
+ }
4717
+
4718
+ ion-toast.toast-success {
4719
+ --background: #34a853;
4720
+ --color: white;
4721
+ --min-width: 800px;
4722
+ }
4723
+
4724
+ ion-toast.toast-success::part(message) {
4725
+ font-size: 18px;
4726
+ --color: white;
4727
+ }
4728
+
4729
+ ion-toast.toast-success::part(icon) {
4730
+ font-size: 24px;
4731
+ --color: white;
4732
+ }
4733
+
4734
+ ion-toast.toast-success::part(container) {
4735
+ padding: 8px 8px;
4736
+ }
4737
+
4738
+ ion-toast.toast-success-little {
4739
+ --background: #34a853;
4740
+ --color: white;
4741
+ --min-width: 800px;
4742
+ }
4743
+
4744
+ ion-toast.toast-success-little::part(message) {
4745
+ font-size: 18px;
4746
+ --color: white;
4747
+ }
4748
+
4749
+ ion-toast.toast-success-little::part(icon) {
4750
+ font-size: 24px;
4751
+ --color: white;
4752
+ }
4753
+
4754
+ ion-toast.toast-error-little {
4755
+ --background: #ea4335;
4756
+ --color: white;
4757
+ --min-width: 800px;
4758
+ }
4759
+
4760
+ ion-toast.toast-error-little::part(message) {
4761
+ font-size: 18px;
4762
+ --color: white;
4763
+ }
4764
+
4765
+ ion-toast.toast-error-little::part(icon) {
4766
+ font-size: 24px;
4767
+ --color: white;
4768
+ }
4769
+
4770
+ .calendarDayItemsModal {
4771
+ --height: 70%;
4772
+ --width: 45%;
4773
+ }
4774
+
4775
+ /*# sourceMappingURL=totalum-styles.css.map */