vue-intergrall-plugins 1.0.1 → 1.0.2

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,3419 @@
1
+
2
+ .btn-red button {
3
+ background-color: red;
4
+ }
5
+
6
+ .btn-red svg {
7
+ color: rgb(182, 0, 0);
8
+ }
9
+
10
+ .container-btns {
11
+ display: flex;
12
+ flex-direction: column;
13
+ justify-content: center;
14
+ align-items: center;
15
+ gap: 10px;
16
+ }
17
+
18
+
19
+ .box-shadow {
20
+ -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
21
+ -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
22
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
23
+ }
24
+
25
+ .ov__skeleton--animation {
26
+ animation: skeleton-loading 1s linear infinite alternate;
27
+ }
28
+ @keyframes skeleton-loading {
29
+ 0% {
30
+ background-color: #F7F7F7;
31
+ }
32
+ 70% {
33
+ background-color: #EDEDED;
34
+ }
35
+ 100% {
36
+ background-color: #EDEDED;
37
+ }
38
+ }
39
+
40
+ .skeleton-picker {
41
+ position: absolute;
42
+ width: 100%;
43
+ height: 100%;
44
+ z-index: 91;
45
+ border-radius: 5px;
46
+ background-color: #FFF;
47
+ border: 1px solid #CCC;
48
+ }
49
+
50
+ .skeleton-options {
51
+ width: 100%;
52
+ height: 48px;
53
+ display: flex;
54
+ justify-content: space-between;
55
+ align-items: center;
56
+ padding: 0 15px;
57
+ border-bottom: 1px solid #CCC;
58
+ }
59
+ .skeleton-options .opt {
60
+ width: 25px;
61
+ height: 50%;
62
+ }
63
+
64
+ .skeleton-input {
65
+ width: calc(100% - 30px);
66
+ height: 25px;
67
+ margin: 7px 15px;
68
+ border-radius: 2.5px;
69
+ }
70
+
71
+ .skeleton-label {
72
+ margin: 15px 0;
73
+ width: 100%;
74
+ height: 30px;
75
+ }
76
+
77
+ .skeleton-list {
78
+ width: 100%;
79
+ padding-left: 7.5px;
80
+ display: flex;
81
+ align-items: center;
82
+ flex-wrap: wrap;
83
+ }
84
+
85
+ .skeleton-list .opt {
86
+ margin: 0 5px 15px 6px;
87
+ width: 25px;
88
+ height: 25px;
89
+ }
90
+
91
+
92
+ .box-shadow {
93
+ -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
94
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
95
+ -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
96
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
97
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
98
+ 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
99
+ }
100
+
101
+ .sm-emoji-picker {
102
+ width: 310px;
103
+ z-index: 2;
104
+ border: 1px solid #ccc;
105
+ border-radius: 5px;
106
+ background-color: #fff;
107
+ display: flex;
108
+ flex-direction: column;
109
+ }
110
+
111
+ .sm-emoji-header {
112
+ width: 100%;
113
+ display: flex;
114
+ align-items: center;
115
+ justify-content: space-between;
116
+ margin: 10px 0;
117
+ border-bottom: 1px solid #ccc;
118
+ }
119
+
120
+ .sm-emoji-link {
121
+ padding: 0 5px 5px 5px;
122
+ display: flex;
123
+ justify-content: center;
124
+ align-items: center;
125
+ cursor: pointer;
126
+ opacity: 0.9;
127
+ transition: all 200ms;
128
+ border-bottom: 2px solid transparent;
129
+ }
130
+ .sm-emoji-link a {
131
+ margin: 0;
132
+ padding: 0;
133
+ fill: #999;
134
+ }
135
+ .sm-emoji-link:hover a > svg,
136
+ .sm-emoji-link.active a > svg {
137
+ opacity: 1;
138
+ fill: #666;
139
+ }
140
+ .sm-emoji-link:hover a > svg[stroke-linecap],
141
+ .sm-emoji-link.active a > svg[stroke-linecap] {
142
+ opacity: 1;
143
+ fill: transparent;
144
+ stroke: #666;
145
+ }
146
+ .sm-emoji-link.active {
147
+ border-bottom: 2px solid #666;
148
+ }
149
+
150
+ .sm-emoji-scroll {
151
+ width: 100%;
152
+ height: calc(100% - 52px);
153
+ max-height: calc(100% - 52px);
154
+ scroll-behavior: smooth;
155
+ overflow-y: auto;
156
+ overflow-x: hidden;
157
+ scrollbar-color: #888 rgba(0, 0, 0, 0.2);
158
+ scrollbar-width: 8px;
159
+ position: relative;
160
+ }
161
+ .sm-emoji-scroll::-webkit-scrollbar {
162
+ width: 8px;
163
+ }
164
+
165
+ .sm-emoji-scroll::-webkit-scrollbar-track {
166
+ background-color: rgba(0, 0, 0, 0.2);
167
+ }
168
+
169
+ .sm-emoji-scroll::-webkit-scrollbar-thumb {
170
+ transition-duration: 0.5s;
171
+ background-color: #666;
172
+ }
173
+
174
+ .sm-emoji-scroll::-webkit-scrollbar-thumb:hover {
175
+ background-color: #555;
176
+ }
177
+
178
+ .sm-emoji-search {
179
+ width: 100%;
180
+ display: flex;
181
+ align-items: center;
182
+ justify-content: center;
183
+ position: sticky;
184
+ top: 0;
185
+ z-index: 1;
186
+ background: #fff;
187
+ padding-bottom: 10px;
188
+ }
189
+ .sm-emoji-search > input {
190
+ width: 90%;
191
+ outline: none;
192
+ border: 1px solid #ccc;
193
+ border-radius: 2.5px;
194
+ padding: 5px 10px;
195
+ transition: border 200ms;
196
+ }
197
+ .sm-emoji-search > input:focus,
198
+ .sm-emoji-search > input:active,
199
+ .sm-emoji-search > input:hover {
200
+ outline: none;
201
+ border: 1px solid #999;
202
+ }
203
+ .sm-emoji-search.sticky {
204
+ position: fixed;
205
+ width: 310px;
206
+ background-color: #fff;
207
+ }
208
+
209
+ .sm-emoji-selection {
210
+ width: 100%;
211
+ margin-bottom: 10px;
212
+ }
213
+ .sm-emoji-title {
214
+ width: 100%;
215
+ display: flex;
216
+ justify-content: flex-start;
217
+ align-items: center;
218
+ background-color: #f7f7f7;
219
+ padding: 5px 0;
220
+ white-space: nowrap;
221
+ text-overflow: ellipsis;
222
+ overflow: hidden;
223
+ }
224
+ .sm-emoji-title svg {
225
+ margin: 0 5px;
226
+ }
227
+
228
+ .sm-emoji-group {
229
+ width: 100%;
230
+ display: flex;
231
+ flex-wrap: wrap;
232
+ font-size: 22px;
233
+ }
234
+
235
+ .sm-emoji-item {
236
+ cursor: pointer;
237
+ opacity: 0.8;
238
+ transition: opacity 200ms;
239
+ margin: 3.5px;
240
+ }
241
+ .sm-emoji-item:hover {
242
+ opacity: 1;
243
+ }
244
+
245
+
246
+ .emoji-text-container {
247
+ position: relative;
248
+ }
249
+ .emoji-text-container .emoji-text-btn {
250
+ font-size: 19.2px;
251
+ cursor: pointer;
252
+ }
253
+
254
+
255
+ .req-loader-container {
256
+ position: absolute;
257
+ z-index: 1;
258
+ top: 0;
259
+ left: 0;
260
+ width: 100%;
261
+ height: 100%;
262
+ display: flex;
263
+ justify-content: center;
264
+ align-items: center;
265
+ }
266
+ .req-loader-container.light-bg {
267
+ background-color: rgba(0, 0, 0, 0.3);
268
+ border-radius: inherit;
269
+ }
270
+ .req-loader-container.align-right {
271
+ justify-content: flex-end;
272
+ }
273
+ .req-loader-container.align-right .req-loader {
274
+ margin-right: 15px;
275
+ }
276
+
277
+ .req-loader {
278
+ border: 2px solid #CCC;
279
+ border-top: 2px solid #333;
280
+ border-radius: 50%;
281
+ width: 20px;
282
+ height: 20px;
283
+ min-width: 20px;
284
+ min-height: 20px;
285
+ animation: spin 2s linear infinite;
286
+ }
287
+ .req-loader.big {
288
+ width: 40px;
289
+ height: 40px;
290
+ animation: spin 3s linear infinite;
291
+ }
292
+ .req-loader.slow {
293
+ animation: spin 4s linear infinite;
294
+ }
295
+
296
+ @keyframes spin {
297
+ 0% { transform: rotate(0deg); }
298
+ 100% { transform: rotate(360deg); }
299
+ }
300
+
301
+
302
+
303
+ .single-file-preview .close-icon {
304
+ color: #E74C3C;
305
+ cursor: pointer;
306
+ opacity: .9;
307
+ transition: opacity 300ms;
308
+ }
309
+ .single-file-preview .close-icon:hover {
310
+ opacity: 1;
311
+ }
312
+ .text-footer-invalid-format {
313
+ color: #222;
314
+ padding: 10px;
315
+ }
316
+ .text-footer-invalid-format h3 {
317
+ font-weight: 500;
318
+ }
319
+ .text-footer-invalid-format h4 {
320
+ font-size: 14.4px;
321
+ }
322
+ .text-footer-preview-title {
323
+ font-size: 16px;
324
+ padding: 10px 0 0 10px;
325
+ white-space: nowrap;
326
+ overflow: hidden;
327
+ text-overflow: ellipsis;
328
+ }
329
+ .text-footer-image-preview {
330
+ display: flex;
331
+ justify-content: center;
332
+ align-items: center;
333
+ width: 100%;
334
+ }
335
+ .text-footer-image-preview img {
336
+ cursor: pointer;
337
+ max-width: 98%;
338
+ max-height: 98%;
339
+ padding: 2%;
340
+ }
341
+
342
+
343
+ .multiple-file-preview {
344
+ position: relative;
345
+ display: flex;
346
+ flex-direction: column;
347
+ width: 100%;
348
+ height: 100%;
349
+ max-height: 100%;
350
+ overflow-y: auto;
351
+ overflow-x: hidden;
352
+ border-top-left-radius: 2.5px;
353
+ border-top-right-radius: 2.5px;
354
+ transition: background-color 150ms;
355
+ scrollbar-color: #888 rgba(0, 0, 0, 0.2);
356
+ scrollbar-width: 4px;
357
+ }
358
+ .multiple-file-preview::-webkit-scrollbar{
359
+ width: 4px;
360
+ }
361
+
362
+ .multiple-file-preview .close-icon {
363
+ color: #E74C3C;
364
+ cursor: pointer;
365
+ opacity: .9;
366
+ transition: opacity 300ms;
367
+ }
368
+ .multiple-file-preview .close-icon:hover {
369
+ opacity: 1;
370
+ }
371
+
372
+ .multiple-file-preview::-webkit-scrollbar-track{
373
+ background-color: rgba(0, 0, 0, 0.2);
374
+ }
375
+
376
+ .multiple-file-preview::-webkit-scrollbar-thumb{
377
+ transition-duration: .5s;
378
+ background-color: #222
379
+ }
380
+
381
+ .multiple-file-preview::-webkit-scrollbar-thumb:hover{
382
+ background-color: #555
383
+ }
384
+
385
+ .text-footer-invalid-format {
386
+ color: #222;
387
+ padding: 10px;
388
+ }
389
+ .text-footer-invalid-format h3 {
390
+ text-overflow: ellipsis;
391
+ overflow: hidden;
392
+ font-weight: 500;
393
+ }
394
+ .text-footer-invalid-format h4 {
395
+ text-overflow: ellipsis;
396
+ overflow: hidden;
397
+ font-size: 14.4px;
398
+ }
399
+
400
+ .text-footer-exclude-file {
401
+ position: absolute;
402
+ top: 5px;
403
+ right: 5px;
404
+ cursor: pointer;
405
+ display: flex;
406
+ justify-content: center;
407
+ align-items: center;
408
+ min-width: 16px;
409
+ min-height: 16px;
410
+ background-color: #FFF;
411
+ border-radius: 50%;
412
+ }
413
+ .text-footer-exclude-file svg {
414
+ transition: color 200ms;
415
+ color: #e9594a;
416
+ }
417
+ .text-footer-exclude-file svg:hover {
418
+ color: #E74C3C;
419
+ }
420
+
421
+ .file-preview {
422
+ display: flex;
423
+ width: 100%;
424
+ align-items: center;
425
+ padding: 5px 10px;
426
+ transition: background-color 150ms;
427
+ }
428
+ .file-preview:hover {
429
+ background-color: rgba(0, 0, 0, .1)
430
+ }
431
+
432
+ .file-title {
433
+ color: #222;
434
+ display: flex;
435
+ align-items: center;
436
+ white-space: nowrap;
437
+ text-overflow: ellipsis;
438
+ overflow: hidden;
439
+ padding: 4px 10px;
440
+ background-color: #FFF;
441
+ border-radius: 30px;
442
+ display: inline-block;
443
+ }
444
+ .file-title.red {
445
+ color: #E74C3C;
446
+ margin-right: 5px;
447
+ }
448
+ .file-title > svg {
449
+ margin-right: 5px;
450
+ color: #333;
451
+ }
452
+
453
+ .small-img {
454
+ flex: 1;
455
+ margin: 0 15px;
456
+ display: flex;
457
+ justify-content: center;
458
+ align-items: center;
459
+ position: relative;
460
+ }
461
+ .small-img img {
462
+ height: 40px;
463
+ cursor: pointer;
464
+ }
465
+ .small-img .pdf, .small-img .doc {
466
+ display: flex;
467
+ justify-content: center;
468
+ align-items: center;
469
+ font-size: 30px;
470
+ }
471
+ .small-img .pdf {
472
+ color: #E74C3C;
473
+ }
474
+ .small-img .doc {
475
+ color: #006bc9;
476
+ }
477
+ .small-img .pdf svg, .small-img .doc svg{
478
+ z-index: 1;
479
+ }
480
+ .small-img .pdf::after, .small-img .doc::after {
481
+ content: "";
482
+ position: absolute;
483
+ bottom: 2px;
484
+ transform: translateY(2px);
485
+ width: 20px;
486
+ height: 20px;
487
+ background-color: #FFF;
488
+ }
489
+ .img-container {
490
+ padding: 5px;
491
+ border-radius: 2.5px;
492
+ background-color: rgba(0, 0, 0, .15);
493
+ display: flex;
494
+ justify-content: center;
495
+ align-items: center;
496
+ }
497
+
498
+ .delete-file {
499
+ display: flex;
500
+ justify-content: center;
501
+ align-items: center;
502
+ cursor: pointer;
503
+ }
504
+ .delete-file > svg {
505
+ font-size: 16px;
506
+ color: #E74C3C;
507
+ }
508
+
509
+
510
+ .fade-enter-active,
511
+ .fade-leave-active {
512
+ transition: opacity 0.3s;
513
+ }
514
+ .fade-enter,
515
+ .fade-leave-to {
516
+ opacity: 0;
517
+ }
518
+
519
+ .files-counter {
520
+ position: absolute;
521
+ top: unset;
522
+ transform: translate(17.5px, -15px);
523
+ background-color: #888;
524
+ z-index: 1;
525
+ font-size: 8px;
526
+ width: 15px;
527
+ height: 15px;
528
+ border-radius: 50%;
529
+ display: flex;
530
+ justify-content: center;
531
+ align-items: center;
532
+ cursor: pointer;
533
+ opacity: 0.9;
534
+ transition: all 300ms;
535
+ color: #fff;
536
+ font-weight: 900;
537
+ }
538
+ .files-counter:hover {
539
+ opacity: 1;
540
+ }
541
+ .files-counter-2 {
542
+ transform: translate(-15px, 28px);
543
+ opacity: 0.9;
544
+ position: absolute;
545
+ display: flex;
546
+ justify-content: center;
547
+ align-items: center;
548
+ color: #888;
549
+ font-size: 12.8px;
550
+ }
551
+ .files-counter-2 svg {
552
+ margin-left: 5px;
553
+ }
554
+ .files-counter-2:hover {
555
+ opacity: 1;
556
+ text-decoration: underline;
557
+ }
558
+
559
+
560
+ .transition-selects {
561
+ min-height: 80px;display: flex; flex-direction: column; width: 100%;
562
+ }
563
+ .loader-select {
564
+ position: relative; min-height: 35px;background: #FFF;width: 100%; border: 1px solid #ccc;border-radius: 5px;z-index: 1;
565
+ }
566
+ .loading-message {
567
+ background-color: #555!important;
568
+ }
569
+
570
+
571
+ .text-footer-actions--btn {
572
+ position: relative;
573
+ }
574
+ .text-footer-actions--btn > svg:nth-child(1) {
575
+ font-size: 19.2px;
576
+ }
577
+ .text-footer-actions--btn > svg:nth-child(2) {
578
+ font-size: 9.6px;
579
+ position: absolute;
580
+ transform: translateY(-2px);
581
+ }
582
+
583
+
584
+ .multiplos {
585
+ display: flex;
586
+ }
587
+ .multiplos svg {
588
+ font-size: 15.2px;
589
+ }
590
+ .multiplos svg.small {
591
+ font-size: 11.2px !important;
592
+ }
593
+
594
+
595
+ .text-footer-container {
596
+ display: flex;
597
+ justify-content: center;
598
+ align-items: center;
599
+ flex-direction: column;
600
+ width: 100%;
601
+ position: relative;
602
+ }
603
+ .text-footer-container .text-footer {
604
+ min-height: 48px;
605
+ box-shadow: 0px 3px 7px -2px rgba(0, 0, 0, 0.45);
606
+ position: relative;
607
+ display: flex;
608
+ justify-content: center;
609
+ align-items: center;
610
+ border: 1px solid #ccc;
611
+ padding: 5px 2px 5px 5px;
612
+ border-radius: 5px;
613
+ }
614
+ .text-footer-container .text-footer.full {
615
+ width: 100%;
616
+ }
617
+ .text-footer-container .text-footer.almostFull {
618
+ width: 95%;
619
+ }
620
+ .text-footer-container .text-footer.medium {
621
+ width: 75%;
622
+ }
623
+ .text-footer-container.bigger .text-footer {
624
+ height: 80px;
625
+ }
626
+ .text-footer-container.bigger .text-footer > textarea {
627
+ font-size: 14px;
628
+ height: 75px;
629
+ max-height: 75px;
630
+ min-height: 75px;
631
+ }
632
+ .text-footer-container textarea {
633
+ margin: 0 5px;
634
+ border: unset;
635
+ flex: 1;
636
+ resize: none;
637
+ min-height: 30px;
638
+ max-height: 60px;
639
+ font-size: 14px;
640
+ font-family: inherit;
641
+ background: inherit;
642
+ }
643
+ .text-footer-container textarea:focus {
644
+ outline: unset;
645
+ }
646
+ .text-footer-container textarea::placeholder {
647
+ font-size: 12px;
648
+ }
649
+ .text-footer-container .text-footer-audio {
650
+ flex: 1;
651
+ display: flex;
652
+ justify-content: center;
653
+ align-items: center;
654
+ }
655
+ .text-footer-container audio {
656
+ flex: 1;
657
+ outline: unset;
658
+ width: auto;
659
+ height: 38px;
660
+ }
661
+ .text-footer-container .delete-audio {
662
+ display: flex;
663
+ justify-content: center;
664
+ align-items: center;
665
+ color: #e74c3c;
666
+ transition: background 300ms;
667
+ border-radius: 50%;
668
+ font-size: 16px;
669
+ padding: 10px;
670
+ cursor: pointer;
671
+ margin: 0 5px;
672
+ width: 31px;
673
+ height: 31px;
674
+ }
675
+ .text-footer-container .delete-audio:hover {
676
+ background-color: rgba(208, 0, 0, 0.2);
677
+ }
678
+ .text-footer-container .max-characters {
679
+ font-size: 9.2px;
680
+ z-index: 1;
681
+ color: #444;
682
+ position: relative;
683
+ top: 30px;
684
+ left: -30px;
685
+ }
686
+ .text-footer-container .max-characters.no-width {
687
+ width: 0;
688
+ }
689
+ .text-footer-container .text-footer-actions {
690
+ display: flex;
691
+ }
692
+ .text-footer-container .text-footer-actions.outside-buttons {
693
+ display: flex;
694
+ align-items: center;
695
+ justify-content: flex-end;
696
+ position: absolute;
697
+ top: -30px;
698
+ right: 35px;
699
+ background-color: #fafafa;
700
+ }
701
+ .text-footer-container .text-footer-actions .text-footer-actions--btn {
702
+ display: flex;
703
+ justify-content: center;
704
+ align-items: center;
705
+ color: #777;
706
+ border-radius: 50%;
707
+ transition: background 300ms;
708
+ padding: 10px;
709
+ font-size: 16px;
710
+ width: 36px;
711
+ height: 36px;
712
+ cursor: pointer;
713
+ margin-right: 2.5px;
714
+ }
715
+ .text-footer-container .text-footer-actions .text-footer-actions--btn:last-child {
716
+ margin-right: unset;
717
+ }
718
+ .text-footer-container .text-footer-actions .text-footer-actions--btn:hover {
719
+ background-color: rgba(0, 0, 0, 0.1);
720
+ }
721
+ .text-footer-container .text-footer-actions .text-footer-actions--btn.files-activated {
722
+ background-color: rgba(0, 0, 0, 0.1);
723
+ }
724
+ .text-footer-container .text-footer-actions .text-footer-actions--btn.audio-activated {
725
+ background-color: rgba(208, 0, 0, 0.7);
726
+ color: #fff;
727
+ }
728
+ .text-footer-container .text-footer-actions .text-footer-actions--btn.left-button {
729
+ position: absolute;
730
+ left: 0;
731
+ }
732
+ .text-footer-container .text-footer-hsm-container {
733
+ margin: 12px 0 7px 0;
734
+ }
735
+ .text-footer-container .text-footer-hsm-container.full {
736
+ width: 100%;
737
+ }
738
+ .text-footer-container .text-footer-hsm-container.almostFull {
739
+ width: 95%;
740
+ }
741
+ .text-footer-container .text-footer-hsm-container.medium {
742
+ width: 75%;
743
+ }
744
+ .text-footer-container .text-footer-hsm-container .text-footer-v-select {
745
+ border-radius: 5px;
746
+ margin-bottom: 5px;
747
+ }
748
+ .text-footer-container .text-footer-hsm-container .text-footer-select-03 {
749
+ display: flex;
750
+ align-items: center;
751
+ flex: 1;
752
+ width: 100%;
753
+ }
754
+ .text-footer-container
755
+ .text-footer-hsm-container
756
+ .text-footer-select-03
757
+ .text-footer-v-select {
758
+ flex: 1;
759
+ }
760
+ .text-footer-container
761
+ .text-footer-hsm-container
762
+ .text-footer-select-03
763
+ .text-footer--btn-select-03 {
764
+ transition-duration: 300ms;
765
+ user-select: none;
766
+ cursor: pointer;
767
+ box-shadow: inset 0 -3px rgba(0, 0, 0, 0.2);
768
+ opacity: 0.9;
769
+ border-radius: 2.5px;
770
+ display: flex;
771
+ justify-content: center;
772
+ align-items: center;
773
+ margin-left: 5px;
774
+ margin-bottom: 5px;
775
+ background-color: #f7fe72;
776
+ width: 32px;
777
+ height: 32px;
778
+ }
779
+ .text-footer-container
780
+ .text-footer-hsm-container
781
+ .text-footer-select-03
782
+ .text-footer--btn-select-03:hover {
783
+ opacity: 1;
784
+ }
785
+ .text-footer-container
786
+ .text-footer-hsm-container
787
+ .text-footer-select-03
788
+ .text-footer--btn-select-03:active {
789
+ opacity: 1;
790
+ box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
791
+ -webkit-transform: translateY(1px);
792
+ -moz-transform: translateY(1px);
793
+ -o-transform: translateY(1px);
794
+ -ms-transform: translateY(1px);
795
+ transform: translateY(1px);
796
+ }
797
+ .text-footer-container
798
+ .text-footer-hsm-container
799
+ .text-footer-select-03
800
+ .text-footer--btn-select-03
801
+ svg {
802
+ font-size: 16px;
803
+ }
804
+ .text-footer-container .text-footer-files-container {
805
+ position: absolute;
806
+ right: 0;
807
+ top: -55px;
808
+ padding: 5px;
809
+ background-color: rgba(0, 0, 0, 0.4);
810
+ border-radius: 5px;
811
+ display: flex;
812
+ align-items: center;
813
+ justify-content: space-between;
814
+ z-index: 1;
815
+ }
816
+ .text-footer-container .text-footer-files-container.horizontal {
817
+ right: -55px;
818
+ flex-direction: column;
819
+ }
820
+ .text-footer-container .text-footer-files-container .files-btn {
821
+ transition-duration: 300ms;
822
+ transition-property: opacity;
823
+ opacity: 0.8;
824
+ cursor: pointer;
825
+ display: flex;
826
+ justify-content: center;
827
+ align-items: center;
828
+ border-radius: 10px;
829
+ padding: 3px;
830
+ width: 40px;
831
+ height: 40px;
832
+ font-size: 16px;
833
+ color: #fff;
834
+ }
835
+ .text-footer-container .text-footer-files-container .files-btn:hover {
836
+ opacity: 1;
837
+ }
838
+ .text-footer-container .text-footer-files-container .files-btn svg {
839
+ color: #fff;
840
+ }
841
+ .text-footer-container .text-footer-files-container .files-btn.images {
842
+ background-color: #9575cd;
843
+ margin-right: 5px;
844
+ }
845
+ .text-footer-container .text-footer-files-container .files-btn.images.margin-bottom {
846
+ margin-right: unset;
847
+ margin-bottom: 5px;
848
+ }
849
+ .text-footer-container .text-footer-files-container .files-btn.docs {
850
+ background-color: #7986cb;
851
+ }
852
+ .text-footer-container .text-footer-files-container .files-btn.system {
853
+ background-color: #49a349;
854
+ margin-left: 5px;
855
+ }
856
+ .text-footer-container .text-footer-files-container .files-btn.both {
857
+ font-size: 15.2px;
858
+ background-color: rgb(85, 85, 236);
859
+ flex-direction: column;
860
+ }
861
+ .text-footer-container .text-footer-files-container .files-btn.both svg:nth-child(1) {
862
+ transform: translateX(5px);
863
+ }
864
+ .text-footer-container .text-footer-files-container .files-btn.both svg:nth-child(2) {
865
+ transform: translateX(-5px);
866
+ }
867
+
868
+ .text-footer-container .text-footer-preview-container {
869
+ width: 100%;
870
+ cursor: default;
871
+ position: absolute;
872
+ left: 0;
873
+ background-color: #f1f1f1;
874
+ border: 2px solid #ccc;
875
+ border-bottom: unset;
876
+ border-top-left-radius: 2.5px;
877
+ border-top-right-radius: 2.5px;
878
+ }
879
+ .text-footer-container .text-footer-preview-container.isDoc {
880
+ top: -50px;
881
+ width: 100%;
882
+ height: 45px;
883
+ }
884
+ .text-footer-container .text-footer-preview-container.isImg,
885
+ .text-footer-container .text-footer-preview-container.isMultiple {
886
+ top: -205px;
887
+ width: 100%;
888
+ height: 200px;
889
+ }
890
+ .text-footer-container .text-footer-preview-container.isImg .text-footer-image-preview {
891
+ height: 170px;
892
+ }
893
+ .text-footer-container .text-footer-preview-container.isError {
894
+ top: -80px;
895
+ width: 100%;
896
+ height: 75px;
897
+ }
898
+
899
+ .text-footer-container .text-footer-alt {
900
+ margin-top: -12px;
901
+ width: 100%;
902
+ padding: 0 10px;
903
+ }
904
+ .text-footer-container .text-footer-alt .text-footer-out-session {
905
+ margin-top: 12px;
906
+ }
907
+ .text-footer-container .text-footer-alt .text-footer-sem-24h {
908
+ font-size: 12.8px;
909
+ text-align: right;
910
+ font-weight: 600;
911
+ letter-spacing: -0.5px;
912
+ color: #dd7f0c;
913
+ margin-top: 5px;
914
+ position: absolute;
915
+ right: 0;
916
+ }
917
+ .text-footer-container .text-footer-alt .sem-templates {
918
+ margin-top: 10px;
919
+ font-size: 12.8px;
920
+ text-align: right;
921
+ font-weight: 600;
922
+ letter-spacing: -0.5px;
923
+ color: #921e12;
924
+ }
925
+ .text-footer-container .text-footer-alt .text-footer-templates {
926
+ position: relative;
927
+ width: 100%;
928
+ }
929
+ .text-footer-container
930
+ .text-footer-alt
931
+ .text-footer-templates
932
+ .text-footer-group-selection {
933
+ width: 100%;
934
+ display: flex;
935
+ align-items: center;
936
+ }
937
+ .text-footer-container
938
+ .text-footer-alt
939
+ .text-footer-templates
940
+ .text-footer-group-selection
941
+ h4 {
942
+ margin-right: 5px;
943
+ }
944
+ .text-footer-container
945
+ .text-footer-alt
946
+ .text-footer-templates
947
+ .text-footer-group-selection
948
+ .sm__select {
949
+ flex: 1;
950
+ }
951
+
952
+ .vs__dropdown-menu {
953
+ font-size: 13.6px !important;
954
+ }
955
+
956
+ .emoji-mart-anchor,
957
+ .emoji-mart-emoji span {
958
+ cursor: pointer !important;
959
+ }
960
+
961
+ .emoji-mart {
962
+ z-index: 2 !important;
963
+ }
964
+
965
+ .emoji-mart-scroll {
966
+ overflow-x: hidden;
967
+ }
968
+
969
+
970
+ .tg-container {
971
+ width: 100%;
972
+ max-width: 800px;
973
+ display: flex;
974
+ flex-direction: column;
975
+ overflow-x: hidden;
976
+ overflow-y: auto;
977
+ }
978
+
979
+ .tg-options {
980
+ width: 100%;
981
+ display: flex;
982
+ }
983
+ .tg-options.column {
984
+ flex-direction: column;
985
+ }
986
+ .tg-options h4 {
987
+ margin-right: 5px;
988
+ }
989
+
990
+ .ts-image-type {
991
+ display: flex;
992
+ align-items: center;
993
+ }
994
+
995
+ .ts-image-type img {
996
+ cursor: pointer;
997
+ }
998
+
999
+ .ts-image-type svg {
1000
+ font-size: 25px;
1001
+ cursor: pointer;
1002
+ }
1003
+
1004
+ .ts-image-type .select-image {
1005
+ color: #838383;
1006
+ }
1007
+
1008
+ .color-red {
1009
+ color: #e74c3c;
1010
+ }
1011
+
1012
+ .color-blue {
1013
+ color: #007bff;
1014
+ }
1015
+
1016
+ .color-black {
1017
+ color: #333;
1018
+ }
1019
+
1020
+ .color-purple {
1021
+ color: #a312a3;
1022
+ }
1023
+
1024
+ .custom-tooltip-image {
1025
+ display: flex;
1026
+ justify-content: center;
1027
+ align-items: center;
1028
+ overflow: visible;
1029
+ padding: 5px;
1030
+ }
1031
+
1032
+ .custom-tooltip-image img {
1033
+ max-width: 75px;
1034
+ max-height: 75px;
1035
+ }
1036
+
1037
+ .ts-button {
1038
+ background-color: #fff;
1039
+ border-radius: 10px;
1040
+ display: flex;
1041
+ justify-content: center;
1042
+ align-items: center;
1043
+ padding: 3px 15px;
1044
+ transition: background-color 150ms ease-in-out;
1045
+ }
1046
+
1047
+ .ts-button:hover {
1048
+ background-color: rgb(253, 253, 253);
1049
+ }
1050
+
1051
+ .tg-select {
1052
+ flex: 1;
1053
+ height: 34px;
1054
+ overflow: hidden;
1055
+ }
1056
+ .tg-select .vs__dropdown-toggle {
1057
+ background-color: #fff;
1058
+ height: 34px;
1059
+ overflow: hidden;
1060
+ display: flex;
1061
+ align-items: center;
1062
+ }
1063
+ .tg-select .vs__selected-options {
1064
+ height: 34px;
1065
+ overflow: hidden;
1066
+ }
1067
+ .tg-select .vs__selected-options > span {
1068
+ white-space: nowrap;
1069
+ text-overflow: ellipsis;
1070
+ flex: 1;
1071
+ }
1072
+
1073
+ .vs__dropdown-option.vs__dropdown-option--selected {
1074
+ background-color: rgb(26, 95, 173) !important;
1075
+ color: white;
1076
+ }
1077
+
1078
+ .vs__dropdown-menu li {
1079
+ padding: 10px 15px;
1080
+ }
1081
+
1082
+ .vs__dropdown-option {
1083
+ transition: background-color 150ms;
1084
+ white-space: normal;
1085
+ }
1086
+ .vs__dropdown-option:nth-child(odd) {
1087
+ background-color: #f1f1f1;
1088
+ }
1089
+ .vs__dropdown-option:hover,
1090
+ .vs__dropdown-option:focus,
1091
+ .vs__dropdown-option:active,
1092
+ .vs__dropdown-option:focus,
1093
+ .vs__dropdown-option--selected,
1094
+ .vs__dropdown-option--highlight {
1095
+ background-color: #5897fb !important;
1096
+ color: #fff;
1097
+ }
1098
+
1099
+ .tg-component {
1100
+ width: 100%;
1101
+ }
1102
+
1103
+ .ts-container {
1104
+ width: 100%;
1105
+ display: flex;
1106
+ justify-content: space-between;
1107
+ gap: 10px;
1108
+ }
1109
+
1110
+ .ts-content {
1111
+ --border-color: #ccc;
1112
+ --background-color: #dff0d8;
1113
+ --input-background-color: #fff;
1114
+ --input-border-default: #007bff;
1115
+ --input-border-error: #e74c3c;
1116
+ --placeholder-color: #bbb;
1117
+ --border-radius: 5px;
1118
+
1119
+ flex: 2;
1120
+ font-size: 11.2px;
1121
+ padding: 10px 0;
1122
+ display: flex;
1123
+ flex-direction: column;
1124
+ }
1125
+ .order-1 {
1126
+ order: 1;
1127
+ }
1128
+ .custom-box-shadow-bottom {
1129
+ box-shadow: 0px 3px 4px -3px rgba(0, 0, 0, 0.3);
1130
+ }
1131
+ .custom-border-gray {
1132
+ border: 1px solid var(--border-color) !important;
1133
+ }
1134
+ .ts-content header,
1135
+ .ts-content section,
1136
+ .ts-content footer {
1137
+ padding: 3px 5px;
1138
+ background-color: var(--background-color);
1139
+ }
1140
+ .ts-content header,
1141
+ .ts-content section {
1142
+ border-right: 1px solid var(--border-color);
1143
+ border-left: 1px solid var(--border-color);
1144
+ }
1145
+ .ts-content header {
1146
+ border-top-left-radius: var(--border-radius);
1147
+ border-top-right-radius: var(--border-radius);
1148
+ border-top: 1px solid var(--border-color);
1149
+ }
1150
+ .ts-content header {
1151
+ font-weight: 550;
1152
+ }
1153
+ .ts-content section {
1154
+ line-height: 25px;
1155
+ }
1156
+ .ts-content section.margin-bottom {
1157
+ border-bottom-left-radius: var(--border-radius);
1158
+ border-bottom-right-radius: var(--border-radius);
1159
+ border-bottom: 1px solid var(--border-color);
1160
+ }
1161
+ .ts-content footer,
1162
+ .custom-footer-style {
1163
+ border: 1px solid var(--border-color);
1164
+ border-top: unset;
1165
+ border-bottom-left-radius: var(--border-radius);
1166
+ border-bottom-right-radius: var(--border-radius);
1167
+ }
1168
+ .ts-content input {
1169
+ border: 1px solid transparent;
1170
+ outline: 0;
1171
+ font-size: 12.8px;
1172
+ padding: 2.5px 5px;
1173
+ background-color: var(--input-background-color);
1174
+ }
1175
+ .ts-content input::placeholder {
1176
+ color: var(--placeholder-color);
1177
+ }
1178
+ .ts-content input.active,
1179
+ .ts-content input:focus {
1180
+ border: 1px solid var(--input-border-default);
1181
+ }
1182
+ .ts-content input.invalid {
1183
+ border: 1px solid var(--input-border-error) !important;
1184
+ }
1185
+ .ts-content__var {
1186
+ display: inline-block;
1187
+ position: relative;
1188
+ }
1189
+
1190
+ .ts-dropdown {
1191
+ margin: 0;
1192
+ padding: 0;
1193
+ position: absolute;
1194
+ top: 19px;
1195
+ left: 0;
1196
+ background: #eee;
1197
+ width: 100%;
1198
+ z-index: 1;
1199
+ transition: all 150ms;
1200
+ visibility: hidden;
1201
+ opacity: 0;
1202
+ list-style-type: none;
1203
+ border: 1px solid #444;
1204
+ border-top: unset;
1205
+ }
1206
+ .ts-dropdown li {
1207
+ width: 100%;
1208
+ opacity: 0.9;
1209
+ cursor: pointer;
1210
+ font-weight: 550;
1211
+ padding: 2px 3px;
1212
+ font-size: 12.8px;
1213
+ transition: background-color 150ms;
1214
+ }
1215
+ .ts-dropdown li:hover,
1216
+ .ts-dropdown li:focus-within,
1217
+ .ts-dropdown li:focus {
1218
+ opacity: 1;
1219
+ background-color: #555;
1220
+ color: #fff;
1221
+ }
1222
+ .ts-dropdown.visible {
1223
+ visibility: visible;
1224
+ opacity: 1;
1225
+ }
1226
+ .tg-btn {
1227
+ width: auto;
1228
+ display: flex;
1229
+ justify-content: center;
1230
+ align-items: center;
1231
+ }
1232
+ .tg-btn button {
1233
+ border: unset;
1234
+ display: block;
1235
+ min-width: 180px;
1236
+ height: 35px;
1237
+ padding: 0 10px;
1238
+ font-weight: 500;
1239
+ background-color: #007bff;
1240
+ color: #fff;
1241
+ transition: transform 300ms ease-in-out;
1242
+ user-select: none;
1243
+ cursor: pointer;
1244
+ box-shadow: inset 0 -2px rgba(0, 0, 0, 0.2);
1245
+ opacity: 0.9;
1246
+ border-radius: 2.5px;
1247
+ }
1248
+ .tg-btn button > svg {
1249
+ margin-right: 5px;
1250
+ color: #003166;
1251
+ }
1252
+ .tg-btn button:hover {
1253
+ opacity: 1;
1254
+ }
1255
+ .tg-btn button:active {
1256
+ opacity: 1;
1257
+ box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
1258
+ -webkit-transform: translateY(1px);
1259
+ -moz-transform: translateY(1px);
1260
+ -o-transform: translateY(1px);
1261
+ -ms-transform: translateY(1px);
1262
+ transform: translateY(1px);
1263
+ }
1264
+ .tg-btn button:active {
1265
+ opacity: 1;
1266
+ box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
1267
+ -webkit-transform: translateY(1px);
1268
+ -moz-transform: translateY(1px);
1269
+ -o-transform: translateY(1px);
1270
+ -ms-transform: translateY(1px);
1271
+ transform: translateY(1px);
1272
+ }
1273
+ .tg-btn button:focus,
1274
+ .tg-btn button:active {
1275
+ outline: 2px solid black;
1276
+ }
1277
+ .tg-btn.small-btn {
1278
+ width: auto;
1279
+ margin: 0 5px;
1280
+ }
1281
+ .tg-btn.small-btn svg {
1282
+ margin-right: 0;
1283
+ }
1284
+ .tg-btn.small-btn button {
1285
+ min-width: 35px;
1286
+ width: 35px;
1287
+ padding: 0;
1288
+ display: flex;
1289
+ justify-content: center;
1290
+ align-items: center;
1291
+ }
1292
+
1293
+ .tm-container {
1294
+ border: 1px solid var(--border-color);
1295
+ border-radius: 5px;
1296
+ display: flex;
1297
+ }
1298
+
1299
+
1300
+ .sc-icone-fechar.sc-icone-fechar--externo {
1301
+ top: -10px;
1302
+ right: -10px;
1303
+ }
1304
+ .sc-icone-fechar.sc-icone-fechar--interno {
1305
+ top: 10px;
1306
+ right: 10px;
1307
+ }
1308
+
1309
+ .expand-textarea {
1310
+ position: relative;
1311
+ width: 90%;
1312
+ height: 90%;
1313
+ z-index: 1;
1314
+ }
1315
+
1316
+ .expand-textarea-content {
1317
+ overflow-x: hidden;
1318
+ overflow-y: auto;
1319
+ background-color: #fff;
1320
+ width: 100%;
1321
+ height: 100%;
1322
+ display: flex;
1323
+ flex-direction: column;
1324
+ }
1325
+ .expand-textarea-title {
1326
+ padding: 2.5px 8px;
1327
+ min-height: 38px;
1328
+ display: flex;
1329
+ align-items: center;
1330
+ width: 100%;
1331
+ font-size: 20.8px;
1332
+ background-color: #222;
1333
+ color: #fff;
1334
+ }
1335
+ .expand-textarea-content textarea {
1336
+ padding: 10px;
1337
+ flex: 1;
1338
+ width: 100%;
1339
+ border: unset;
1340
+ resize: none;
1341
+ outline: none;
1342
+ overflow-x: hidden;
1343
+ }
1344
+ .expand-textarea-content textarea:hover,
1345
+ .expand-textarea-content textarea:active {
1346
+ outline: none;
1347
+ }
1348
+ .expand-textarea-footer {
1349
+ display: flex;
1350
+ justify-content: flex-end;
1351
+ align-items: center;
1352
+ padding: 10px;
1353
+ background-color: #f7f7f7;
1354
+ position: relative;
1355
+ }
1356
+ .expand-textarea-footer .text-footer-preview-container {
1357
+ position: absolute;
1358
+ top: -200px;
1359
+ right: 145px;
1360
+ height: 200px;
1361
+ background: #f7f7f7;
1362
+ }
1363
+ .expand-textarea-footer .text-footer-actions--btn {
1364
+ width: 36px;
1365
+ height: 36px;
1366
+ border-radius: 50%;
1367
+ background-color: rgba(255, 255, 255, 0);
1368
+ color: #333;
1369
+ padding: 2.5px;
1370
+ margin: 0 15px 0 10px;
1371
+ display: flex;
1372
+ justify-content: center;
1373
+ align-items: center;
1374
+ font-size: 20.8px;
1375
+ cursor: pointer;
1376
+ opacity: 0.9;
1377
+ transition: all 300ms;
1378
+ }
1379
+ .expand-textarea-footer .text-footer-actions--btn:hover {
1380
+ opacity: 1;
1381
+ background-color: rgba(30, 30, 30, 0.1);
1382
+ }
1383
+
1384
+ .expand-textarea-button {
1385
+ width: 125px;
1386
+ height: 30px;
1387
+ display: flex;
1388
+ justify-content: center;
1389
+ align-items: center;
1390
+
1391
+ transition-duration: 300ms;
1392
+ user-select: none;
1393
+ cursor: pointer;
1394
+ box-shadow: inset 0 -2px rgba(0, 0, 0, 0.2);
1395
+ opacity: 0.9;
1396
+ border-radius: 5px;
1397
+
1398
+ padding: 5px 10px;
1399
+ border-radius: 2.5px;
1400
+ position: relative;
1401
+ }
1402
+ .expand-textarea-button.green {
1403
+ background-color: #2a963a;
1404
+ color: #fff;
1405
+ margin-right: 10px;
1406
+ }
1407
+ .expand-textarea-button.red {
1408
+ background-color: #e74c3c;
1409
+ color: #fff;
1410
+ }
1411
+ .expand-textarea-button:hover {
1412
+ opacity: 1;
1413
+ }
1414
+ .expand-textarea-button:active {
1415
+ opacity: 1;
1416
+ box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
1417
+ -webkit-transform: translateY(1px);
1418
+ -moz-transform: translateY(1px);
1419
+ -o-transform: translateY(1px);
1420
+ -ms-transform: translateY(1px);
1421
+ transform: translateY(1px);
1422
+ }
1423
+ .expand-textarea-button.carregando {
1424
+ background-color: #777;
1425
+ }
1426
+
1427
+
1428
+ .fade-enter-active, .fade-leave-active {
1429
+ transition: opacity .5s;
1430
+ }
1431
+ .fade-enter, .fade-leave-to {
1432
+ opacity: 0;
1433
+ }
1434
+
1435
+
1436
+ .file-item {
1437
+ width: 100%;
1438
+ height: 100%;
1439
+ display: flex;
1440
+ justify-content: center;
1441
+ align-items: center;
1442
+ position: relative;
1443
+ }
1444
+ .file-item-transition {
1445
+ max-width: 100%;
1446
+ max-height: 100%;
1447
+ display: flex;
1448
+ justify-content: center;
1449
+ align-items: center;
1450
+ position: relative;
1451
+ }
1452
+ .file-item .req-loader {
1453
+ position: absolute;
1454
+ top: calc(50% - 12.5px);
1455
+ right: calc(50% - 12.5px);
1456
+ }
1457
+ .file-item-transition img {
1458
+ max-width: 45px;
1459
+ max-height: 45px;
1460
+ }
1461
+ .file-item a {
1462
+ margin-left: 5px;
1463
+ text-decoration: none;
1464
+ color: #333;
1465
+ }
1466
+
1467
+ .file-icon {
1468
+ display: flex;
1469
+ justify-content: center;
1470
+ align-items: center;
1471
+ font-size: 30px;
1472
+ cursor: pointer;
1473
+ }
1474
+ .file-icon:hover {
1475
+ opacity: 1
1476
+ }
1477
+ .file-icon:visited {
1478
+ color: inherit;
1479
+ }
1480
+ svg {
1481
+ font-size: 30px;
1482
+ z-index: 1;
1483
+ }
1484
+ .file-icon.pdf {
1485
+ position: relative;
1486
+ }
1487
+ .file-icon.pdf svg {
1488
+ color: rgb(231, 76, 60);
1489
+ }
1490
+ .file-icon.pdf::after {
1491
+ content: "";
1492
+ position: absolute;
1493
+ bottom: 2px;
1494
+ transform: translateY(2px);
1495
+ width: 20px;
1496
+ height: 20px;
1497
+ background-color: #FFF;
1498
+ }
1499
+ .file-icon.doc {
1500
+ color: #15517F;
1501
+ }
1502
+ .file-icon.doc::after {
1503
+ content: "";
1504
+ position: absolute;
1505
+ width: 20px;
1506
+ height: 20px;
1507
+ background-color: #FFF;
1508
+ }
1509
+ .file-img {
1510
+ display: flex;
1511
+ justify-content: center;
1512
+ align-items: center;
1513
+ width: 100%;
1514
+ height: 100%;
1515
+ overflow: hidden;
1516
+ background-color: rgba(0, 0, 0, .2);
1517
+ border-radius: 2.5px;
1518
+ cursor: pointer;
1519
+ opacity: .9;
1520
+ transition: opacity 150ms;
1521
+ }
1522
+
1523
+ .file-img:hover {
1524
+ opacity: 1;
1525
+ }
1526
+ .file-img img {
1527
+ width: 95%;
1528
+ }
1529
+
1530
+
1531
+ .fade-enter-active,
1532
+ .fade-leave-active {
1533
+ transition: opacity 200ms;
1534
+ }
1535
+ .fade-enter,
1536
+ .fade-leave-to {
1537
+ opacity: 0;
1538
+ }
1539
+
1540
+ .card-cli,
1541
+ .card-ope {
1542
+ display: flex;
1543
+ width: 95%;
1544
+ margin: 5px 0;
1545
+ position: relative;
1546
+ }
1547
+ .card-cli.newMessage,
1548
+ .card-ope.newMessage {
1549
+ margin-top: 30px;
1550
+ }
1551
+
1552
+ .new-messages {
1553
+ position: absolute;
1554
+ top: -30px;
1555
+ width: 100%;
1556
+ display: flex;
1557
+ justify-content: center;
1558
+ align-items: center;
1559
+ margin: 2.5px 0;
1560
+ background-color: lighten(#fff249, 15);
1561
+ }
1562
+
1563
+ .card-cli .card {
1564
+ border-left: 3px solid #90b823;
1565
+ }
1566
+
1567
+ .card-ope {
1568
+ align-self: flex-end;
1569
+ background-color: lighten(#007535, 72);
1570
+ }
1571
+ .card-ope .card {
1572
+ border-right: 3px solid #007535;
1573
+ }
1574
+
1575
+ .card {
1576
+ background-color: rgba(255, 255, 255, 0.9);
1577
+ overflow: hidden;
1578
+ width: 100%;
1579
+ padding: 2.5px 5px;
1580
+ }
1581
+ .card p {
1582
+ word-break: break-all;
1583
+ }
1584
+
1585
+ .card-header {
1586
+ width: 100%;
1587
+ border-bottom: 1px solid #ddd;
1588
+ margin-bottom: 5px;
1589
+ display: flex;
1590
+ justify-content: space-between;
1591
+ }
1592
+ .card-header svg {
1593
+ font-size: 16px;
1594
+ }
1595
+
1596
+ .card-author {
1597
+ display: flex;
1598
+ align-items: center;
1599
+ }
1600
+ .card-author svg {
1601
+ margin-right: 5px;
1602
+ }
1603
+
1604
+ .card-canal {
1605
+ flex: 1;
1606
+ margin-right: 10px;
1607
+ }
1608
+
1609
+ .card-dates {
1610
+ display: flex;
1611
+ flex-direction: column;
1612
+ margin-right: 10px;
1613
+ font-size: 14.4px;
1614
+ }
1615
+
1616
+ .card-date {
1617
+ overflow: hidden;
1618
+ display: flex;
1619
+ align-content: center;
1620
+ }
1621
+ .card-date span {
1622
+ white-space: nowrap;
1623
+ text-overflow: ellipsis;
1624
+ overflow: hidden;
1625
+ }
1626
+ .card-date svg {
1627
+ margin-right: 5px;
1628
+ color: #232323;
1629
+ }
1630
+
1631
+ .card-expand {
1632
+ display: flex;
1633
+ justify-content: center;
1634
+ align-items: center;
1635
+ margin: 2.5px;
1636
+ cursor: pointer;
1637
+ opacity: 0.8;
1638
+ transition: opacity 150ms;
1639
+ }
1640
+ .card-expand:hover {
1641
+ opacity: 1;
1642
+ }
1643
+
1644
+ .card-footer {
1645
+ margin-top: 5px;
1646
+ border-top: 1px solid #ddd;
1647
+ display: flex;
1648
+ flex-wrap: wrap;
1649
+ min-height: 25px;
1650
+ }
1651
+
1652
+ .card-chip {
1653
+ font-size: 12.8px;
1654
+ width: fit-content;
1655
+ border-radius: 15px;
1656
+ transition: all 150ms ease-in-out;
1657
+ padding: 2.5px 7px;
1658
+ color: rgb(31, 105, 193);
1659
+ background-color: rgba(207, 216, 244, 0.6);
1660
+ margin-bottom: 5px;
1661
+ }
1662
+ .card-chip:hover {
1663
+ background-color: rgba(207, 216, 244, 1);
1664
+ }
1665
+ .card-chip.orange {
1666
+ color: #e14924;
1667
+ background-color: rgba(228, 92, 58, 0.15);
1668
+ }
1669
+ .card-chip.orange:hover {
1670
+ background-color: rgba(228, 92, 58, 0.2);
1671
+ }
1672
+ .card-chip.yellow {
1673
+ color: #f4a304;
1674
+ background-color: rgba(252, 191, 73, 0.15);
1675
+ }
1676
+ .card-chip.yellow:hover {
1677
+ background-color: rgba(252, 191, 73, 0.2);
1678
+ }
1679
+ .card-chip.red {
1680
+ color: rgb(231, 76, 60);
1681
+ background-color: rgba(231, 76, 60, 0.2);
1682
+ }
1683
+ .card-chip.red:hover {
1684
+ background-color: rgba(231, 76, 60, 0.25);
1685
+ }
1686
+
1687
+ .card-file {
1688
+ width: 60px;
1689
+ height: 50px;
1690
+ margin-right: 5px;
1691
+ display: flex;
1692
+ justify-content: center;
1693
+ align-items: center;
1694
+ }
1695
+
1696
+ .card-reply {
1697
+ cursor: pointer;
1698
+ position: absolute;
1699
+ right: 30px;
1700
+ bottom: 5px;
1701
+ font-size: 9.6px;
1702
+ color: #67a332;
1703
+ width: 14.4px;
1704
+ height: 14.4px;
1705
+ display: flex;
1706
+ justify-content: center;
1707
+ align-items: center;
1708
+ border-radius: 50%;
1709
+ background-color: #fff;
1710
+ }
1711
+ .card-reply svg {
1712
+ margin-top: -1px;
1713
+ margin-right: -1px;
1714
+ }
1715
+
1716
+ .card-check {
1717
+ position: absolute;
1718
+ bottom: 5px;
1719
+ right: 5px;
1720
+ cursor: pointer;
1721
+ font-size: 11.2px;
1722
+ }
1723
+ .card-check svg {
1724
+ font-size: 12.8px;
1725
+ }
1726
+ .card-check.seen,
1727
+ .card-check.seen svg {
1728
+ color: #006daa;
1729
+ }
1730
+ .card-check.green,
1731
+ .card-check.green svg {
1732
+ color: #4f772d;
1733
+ }
1734
+ .card-check.red,
1735
+ .card-check.red svg {
1736
+ color: #ba181b;
1737
+ }
1738
+ .card-check.gray,
1739
+ .card-check.gray svg {
1740
+ color: #999;
1741
+ }
1742
+ .card-check.black,
1743
+ .card-check.black svg {
1744
+ color: #666;
1745
+ }
1746
+
1747
+
1748
+ .box-shadow {
1749
+ -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
1750
+ -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
1751
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
1752
+ }
1753
+
1754
+ .interatividade-popup {
1755
+ position: absolute;
1756
+ top: 15px;
1757
+ right: 0;
1758
+ width: 250px;
1759
+ height: auto;
1760
+ max-height: 300px;
1761
+ overflow-y: auto;
1762
+ overflow-x: hidden;
1763
+ background-color: #FFF;
1764
+ border-radius: 15px;
1765
+ color: #333;
1766
+ font-size: 14px;
1767
+ }
1768
+
1769
+ .interatividade-popup-titulo h1 {
1770
+ padding: 4px 10px;
1771
+ background-color: #333;
1772
+ color: #FFF;
1773
+ font-size: 1.2em;
1774
+ display: flex;
1775
+ justify-content: space-between;
1776
+ align-items: center;
1777
+ }
1778
+ .interatividade-popup-titulo h1 svg{
1779
+ color: #E74C3C;
1780
+ cursor: pointer;
1781
+ font-size: .9em;
1782
+ }
1783
+
1784
+ .interatividade-popup-item {
1785
+ padding: 10px;
1786
+ border-bottom: 1px solid #D7D7D7;
1787
+ }
1788
+
1789
+ .interatividade-popup-item-desc {
1790
+ font-size: .9em;
1791
+ color: #767676;
1792
+ }
1793
+
1794
+
1795
+ .divisor-form-info-aditional {
1796
+ display: flex;
1797
+ align-items: center;
1798
+ justify-content: space-around;
1799
+ }
1800
+ .info-aditional {
1801
+ border-bottom: 1px solid #ccc;
1802
+ width: 49%;
1803
+ }
1804
+ .interatividade-form-header {
1805
+ background-color: #efefef;
1806
+ margin-top: 5px;
1807
+ border-top-right-radius: 10px;
1808
+ border-top-left-radius: 10px;
1809
+ padding-left: 10px;
1810
+ padding-right: 10px;
1811
+ padding-top: 5px;
1812
+ padding-bottom: 5px;
1813
+ justify-content: space-between;
1814
+ display: flex;
1815
+ color: #333;
1816
+ font-weight: 700;
1817
+ font-size: 14.4px;
1818
+ }
1819
+ .interatividade-form-body {
1820
+ padding: 0px 10px;
1821
+ background: white;
1822
+ border-right: 1px solid rgb(239, 239, 239);
1823
+ border-left: 1px solid rgb(239, 239, 239);
1824
+ border-bottom-left-radius: 10px;
1825
+ border-bottom-right-radius: 10px;
1826
+ padding-bottom: 10px;
1827
+ }
1828
+ .interatividade {
1829
+ margin: 10px 0;
1830
+ }
1831
+ .interatividade-titulo-form {
1832
+ white-space: nowrap;
1833
+ text-overflow: ellipsis;
1834
+ font-weight: bold;
1835
+ overflow: hidden;
1836
+ max-width: 100%;
1837
+ margin: 0;
1838
+ padding: 0;
1839
+ padding-top: 5px;
1840
+ }
1841
+ .interatividade-description-form {
1842
+ overflow: hidden;
1843
+ max-width: 100%;
1844
+ margin: 0;
1845
+ padding: 0;
1846
+ }
1847
+ .text-dark {
1848
+ color: #333;
1849
+ }
1850
+ .ml-3 {
1851
+ margin-left: 3px;
1852
+ }
1853
+ .flex-wrap {
1854
+ flex-wrap: wrap;
1855
+ }
1856
+ .align-items-center {
1857
+ align-items: center;
1858
+ }
1859
+ .d-flex {
1860
+ display: flex;
1861
+ }
1862
+ .align-items-end {
1863
+ align-items: flex-end;
1864
+ }
1865
+ .flex-column {
1866
+ flex-direction: column;
1867
+ }
1868
+ .text-bold {
1869
+ font-weight: bold;
1870
+ }
1871
+ .m-5 {
1872
+ margin: 5px;
1873
+ }
1874
+ .mb-5 {
1875
+ margin-bottom: 5px;
1876
+ }
1877
+ .mx-5 {
1878
+ margin-left: 5px;
1879
+ margin-right: 5px;
1880
+ }
1881
+ .cursor-pointer {
1882
+ cursor: pointer;
1883
+ }
1884
+ .bg-dark-white-2 {
1885
+ background-color: #f7f7f7;
1886
+ }
1887
+ .border-radius-10 {
1888
+ border-radius: 10px;
1889
+ }
1890
+ .w-100 {
1891
+ width: 100%;
1892
+ }
1893
+ .overflow-hidden {
1894
+ overflow: hidden;
1895
+ }
1896
+ .mt-10 {
1897
+ margin-top: 10px;
1898
+ }
1899
+ .flex-wrap {
1900
+ flex-wrap: wrap;
1901
+ }
1902
+ .d-flex {
1903
+ display: flex;
1904
+ }
1905
+ .p-10 {
1906
+ padding: 10px;
1907
+ }
1908
+ .mb-5 {
1909
+ margin-bottom: 5px;
1910
+ }
1911
+ .mb-10 {
1912
+ margin-bottom: 10px;
1913
+ }
1914
+ .d-flex-center {
1915
+ display: flex;
1916
+ justify-content: center;
1917
+ align-items: center;
1918
+ }
1919
+ .fs-_85 {
1920
+ font-size: 13.6px;
1921
+ }
1922
+ .text-ellipsis {
1923
+ text-overflow: ellipsis;
1924
+ }
1925
+ .text-left {
1926
+ text-align: left;
1927
+ }
1928
+ .text-ellipsis {
1929
+ white-space: nowrap;
1930
+ overflow: hidden;
1931
+ }
1932
+ .ml-5 {
1933
+ margin-left: 5px;
1934
+ }
1935
+ .text-shadow {
1936
+ text-shadow: 0 0 #000;
1937
+ }
1938
+ .justify-content-between {
1939
+ justify-content: space-between;
1940
+ }
1941
+ .mr-5 {
1942
+ margin-right: 5px;
1943
+ }
1944
+
1945
+
1946
+ .fade-enter-active, .fade-leave-active {
1947
+ transition: opacity .5s;
1948
+ }
1949
+ .fade-enter, .fade-leave-to {
1950
+ opacity: 0;
1951
+ }
1952
+
1953
+
1954
+ .fade-enter-active,
1955
+ .fade-leave-active {
1956
+ transition: opacity 200ms;
1957
+ }
1958
+ .fade-enter,
1959
+ .fade-leave-to {
1960
+ opacity: 0;
1961
+ }
1962
+
1963
+ .card-cli,
1964
+ .card-ope {
1965
+ display: flex;
1966
+ width: 95%;
1967
+ margin: 5px 0;
1968
+ position: relative;
1969
+ }
1970
+ .card-cli.msgNova,
1971
+ .card-ope.msgNova {
1972
+ margin-top: 30px;
1973
+ }
1974
+
1975
+ .novas-mensagens {
1976
+ position: absolute;
1977
+ top: -30px;
1978
+ width: 100%;
1979
+ display: flex;
1980
+ justify-content: center;
1981
+ align-items: center;
1982
+ margin: 2.5px 0;
1983
+ background-color: lighten(#fff249, 15);
1984
+ }
1985
+
1986
+ .card-cli .card {
1987
+ border-left: 3px solid #90b823;
1988
+ }
1989
+
1990
+ .card-ope {
1991
+ align-self: flex-end;
1992
+ background-color: lighten(#007535, 72);
1993
+ }
1994
+ .card-ope .card {
1995
+ border-right: 3px solid #007535;
1996
+ }
1997
+
1998
+ .card {
1999
+ background-color: rgba(255, 255, 255, 0.9);
2000
+ overflow: hidden;
2001
+ width: 100%;
2002
+ padding: 2.5px 5px;
2003
+ border-radius: 7px;
2004
+ box-shadow: rgba(0, 0, 0, 0.15) 1px 2px 3px 0px;
2005
+ }
2006
+ .card p {
2007
+ word-break: break-all;
2008
+ }
2009
+
2010
+ .card-header {
2011
+ width: 100%;
2012
+ border-bottom: 1px solid #ddd;
2013
+ margin-bottom: 5px;
2014
+ display: flex;
2015
+ justify-content: space-between;
2016
+ padding: 10px 5px;
2017
+ }
2018
+ .card-header svg {
2019
+ font-size: 16px;
2020
+ }
2021
+
2022
+ .card-canal {
2023
+ flex: 1;
2024
+ margin-right: 10px;
2025
+ }
2026
+
2027
+ .card-datas {
2028
+ display: flex;
2029
+ flex-direction: column;
2030
+ margin-right: 10px;
2031
+ background: rgb(0, 136, 69);
2032
+ padding: 5px 10px;
2033
+ border-top-left-radius: 15px;
2034
+ border-bottom-left-radius: 15px;
2035
+ color: #fff;
2036
+ }
2037
+
2038
+ .card-right {
2039
+ margin-right: -20px;
2040
+ display: flex;
2041
+ flex-direction: row-reverse;
2042
+ align-items: center;
2043
+ }
2044
+ .card-data {
2045
+ overflow: hidden;
2046
+ display: flex;
2047
+ align-content: center;
2048
+ }
2049
+ .card-data span {
2050
+ white-space: nowrap;
2051
+ text-overflow: ellipsis;
2052
+ overflow: hidden;
2053
+ }
2054
+ .card-data svg {
2055
+ margin-right: 5px;
2056
+ color: #232323;
2057
+ }
2058
+
2059
+ .card-expand {
2060
+ display: flex;
2061
+ justify-content: center;
2062
+ align-items: center;
2063
+ margin: 0 10px;
2064
+ cursor: pointer;
2065
+ opacity: 0.8;
2066
+ transition: opacity 150ms;
2067
+ }
2068
+ .card-expand:hover {
2069
+ opacity: 1;
2070
+ }
2071
+
2072
+ .card-footer {
2073
+ margin-top: 5px;
2074
+ border-top: 1px solid #ddd;
2075
+ display: flex;
2076
+ flex-wrap: wrap;
2077
+ }
2078
+
2079
+ .card-chip-container {
2080
+ display: flex;
2081
+ flex-wrap: wrap;
2082
+ width: 100%;
2083
+ gap: 5px;
2084
+ }
2085
+
2086
+ .card-autor {
2087
+ display: flex;
2088
+ align-items: center;
2089
+ margin-right: 10px;
2090
+ overflow: hidden;
2091
+ min-width: 14px;
2092
+ max-width: calc(100% - 215px);
2093
+ gap: 5px;
2094
+ }
2095
+
2096
+ .card-chip {
2097
+ font-size: 12.8px;
2098
+ width: fit-content;
2099
+ border-radius: 15px;
2100
+ transition: all 150ms ease-in-out;
2101
+ padding: 2.5px 7px;
2102
+ color: rgb(31, 105, 193);
2103
+ background-color: rgba(207, 216, 244, 0.6);
2104
+ margin-bottom: 5px;
2105
+ }
2106
+ .card-chip:hover {
2107
+ background-color: rgba(207, 216, 244, 1);
2108
+ }
2109
+ .card-chip.orange {
2110
+ color: #e14924;
2111
+ background-color: rgba(228, 92, 58, 0.15);
2112
+ }
2113
+ .card-chip.orange:hover {
2114
+ background-color: rgba(228, 92, 58, 0.2);
2115
+ }
2116
+ .card-chip.yellow {
2117
+ color: #f4a304;
2118
+ background-color: rgba(252, 191, 73, 0.15);
2119
+ }
2120
+ .card-chip.yellow:hover {
2121
+ background-color: rgba(252, 191, 73, 0.2);
2122
+ }
2123
+ .card-chip.red {
2124
+ color: rgb(231, 76, 60);
2125
+ background-color: rgba(231, 76, 60, 0.2);
2126
+ }
2127
+ .card-chip.red:hover {
2128
+ background-color: rgba(231, 76, 60, 0.25);
2129
+ }
2130
+ .card-chip.green {
2131
+ color: #0e3213;
2132
+ background-color: rgba(15, 177, 39, 0.3);
2133
+ }
2134
+ .card-chip.green:hover {
2135
+ background-color: rgba(15, 177, 39, 0.4);
2136
+ }
2137
+
2138
+ .card-anexo {
2139
+ width: 50px;
2140
+ height: 50px;
2141
+ margin-right: 5px;
2142
+ display: flex;
2143
+ justify-content: center;
2144
+ align-items: center;
2145
+ }
2146
+ .anexo-item {
2147
+ width: 100%;
2148
+ height: 100%;
2149
+ display: flex;
2150
+ justify-content: center;
2151
+ align-items: center;
2152
+ position: relative;
2153
+ }
2154
+ .anexo-item .transition-anexo-item {
2155
+ max-width: 100%;
2156
+ max-height: 100%;
2157
+ }
2158
+ .anexo-item .req-loader {
2159
+ position: absolute;
2160
+ top: calc(50% - 12.5px);
2161
+ right: calc(50% - 12.5px);
2162
+ }
2163
+ .anexo-item .transition-anexo-item img {
2164
+ max-width: 45px;
2165
+ max-height: 45px;
2166
+ }
2167
+
2168
+ .anexo-icone {
2169
+ opacity: 0.9;
2170
+ transition: opacity 200ms;
2171
+ color: #222;
2172
+ cursor: pointer;
2173
+ display: flex;
2174
+ justify-content: center;
2175
+ align-items: center;
2176
+ }
2177
+ .anexo-icone:hover {
2178
+ opacity: 1;
2179
+ }
2180
+ .anexo-icone:visited {
2181
+ color: inherit;
2182
+ }
2183
+ svg {
2184
+ font-size: 30px;
2185
+ z-index: 1;
2186
+ }
2187
+ .anexo-icone.pdf {
2188
+ position: relative;
2189
+ }
2190
+ .anexo-icone.pdf svg {
2191
+ color: rgb(231, 76, 60);
2192
+ }
2193
+ .anexo-icone.pdf::after {
2194
+ content: "";
2195
+ position: absolute;
2196
+ bottom: 2px;
2197
+ transform: translateY(2px);
2198
+ width: 20px;
2199
+ height: 20px;
2200
+ background-color: #fff;
2201
+ }
2202
+ .anexo-icone.doc {
2203
+ color: #15517f;
2204
+ }
2205
+ .anexo-icone.doc::after {
2206
+ content: "";
2207
+ position: absolute;
2208
+ width: 20px;
2209
+ height: 20px;
2210
+ background-color: #fff;
2211
+ }
2212
+ .anexo-img {
2213
+ display: flex;
2214
+ justify-content: center;
2215
+ align-items: center;
2216
+ width: 100%;
2217
+ height: 100%;
2218
+ overflow: hidden;
2219
+ background-color: rgba(0, 0, 0, 0.2);
2220
+ border-radius: 2.5px;
2221
+ cursor: pointer;
2222
+ opacity: 0.9;
2223
+ transition: opacity 150ms;
2224
+ }
2225
+
2226
+ .anexo-img:hover {
2227
+ opacity: 1;
2228
+ }
2229
+ .anexo-img img {
2230
+ width: 95%;
2231
+ }
2232
+
2233
+ .card-interatividade {
2234
+ display: flex;
2235
+ flex-direction: column;
2236
+ margin-top: 10px;
2237
+ margin-bottom: 5px;
2238
+ font-size: 0.9em;
2239
+ }
2240
+
2241
+ .card-interatividade-title {
2242
+ font-weight: bold;
2243
+ margin-bottom: 5px;
2244
+ }
2245
+
2246
+ .card-interatividade-list {
2247
+ margin: 0;
2248
+ padding: 0;
2249
+ font-size: 0.9em;
2250
+ }
2251
+
2252
+ .card-interatividade-list hr {
2253
+ height: 1px;
2254
+ background-color: #ccc;
2255
+ width: 100%;
2256
+ border: 0;
2257
+ }
2258
+
2259
+ .card-interatividade-list button {
2260
+ margin-left: 5px;
2261
+ border-radius: 5px;
2262
+ border: unset;
2263
+ cursor: pointer;
2264
+ padding: 5px 10px;
2265
+ background-color: #b5f778;
2266
+ }
2267
+
2268
+ .card-interatividade-list button:hover {
2269
+ text-decoration: underline;
2270
+ }
2271
+
2272
+
2273
+ .audio-speed-control {
2274
+ display: flex;
2275
+ align-items: center;
2276
+ cursor: pointer;
2277
+ margin-left: 10px;
2278
+ }
2279
+
2280
+ .speed-circle {
2281
+ width: 40px;
2282
+ height: 40px;
2283
+ background-color: #f1f3f4; /* Cor do círculo */
2284
+ border: solid black 1px;
2285
+ color: black;
2286
+ display: flex;
2287
+ justify-content: center;
2288
+ align-items: center;
2289
+ border-radius: 50%;
2290
+ font-weight: bold;
2291
+ transition: background-color 0.3s;
2292
+ }
2293
+
2294
+ .speed-circle.active {
2295
+ background-color: #f1f3f4; /* Cor quando ativo */
2296
+ border: solid blue 1px;
2297
+
2298
+ }
2299
+
2300
+
2301
+ .tippy-tooltip.light-theme .tippy-backdrop {
2302
+ background-color: #fff;
2303
+ }
2304
+
2305
+ .tippy-tooltip.light-theme {
2306
+ /* .tippy-box[data-theme~='light'] { */
2307
+ background-color: #fff;
2308
+ border: 1px solid #ccc;
2309
+ color: #333;
2310
+ -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
2311
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
2312
+ -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
2313
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
2314
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
2315
+ 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
2316
+ }
2317
+
2318
+ .tippy-confirmation p {
2319
+ margin-bottom: 3px;
2320
+ }
2321
+
2322
+ .tippy-confirmation button {
2323
+ border: unset;
2324
+ background-color: #f1f1f1;
2325
+ border-radius: 3px;
2326
+ padding: 5px 8px;
2327
+ cursor: pointer;
2328
+ font-size: 12px;
2329
+ }
2330
+
2331
+ .tippy-confirmation button.cancel {
2332
+ border-bottom: 2px solid red;
2333
+ margin-right: 15px;
2334
+ }
2335
+
2336
+ .tippy-confirmation button.confirm {
2337
+ border-bottom: 2px solid green;
2338
+ }
2339
+
2340
+
2341
+ .mensagem__principal .default-doc {
2342
+ background-color: var(--files-bg);
2343
+ }
2344
+
2345
+ .mensagem__principal .default-doc:hover {
2346
+ background-color: var(--files-bg-hover);
2347
+ }
2348
+
2349
+ .mensagem__outros .default-doc {
2350
+ background-color: rgba(100, 100, 100, 0.1);
2351
+ }
2352
+
2353
+ .mensagem__outros .default-doc:hover {
2354
+ background-color: rgba(100, 100, 100, 0.3);
2355
+ }
2356
+
2357
+ .default-doc:hover p {
2358
+ text-decoration: underline;
2359
+ }
2360
+
2361
+ .default-doc {
2362
+ display: flex;
2363
+ align-items: center;
2364
+ padding: 10px;
2365
+ border-radius: 5px;
2366
+ width: 100%;
2367
+ max-width: 100%;
2368
+ cursor: pointer;
2369
+ transition: background-color 150ms ease-in-out;
2370
+ }
2371
+
2372
+ .default-doc svg {
2373
+ font-size: 19.2px;
2374
+ margin-right: 5px;
2375
+ }
2376
+
2377
+ .default-doc p {
2378
+ overflow: hidden;
2379
+ text-overflow: ellipsis;
2380
+ white-space: nowrap;
2381
+ }
2382
+
2383
+ .file-actions {
2384
+ display: flex;
2385
+ justify-content: flex-end;
2386
+ width: 100%;
2387
+ padding: 5px;
2388
+ }
2389
+
2390
+ .file-actions a {
2391
+ margin-right: 0;
2392
+ }
2393
+
2394
+ .mensagem__principal .file-action-button {
2395
+ background-color: var(--files-bg);
2396
+ }
2397
+
2398
+ .mensagem__outros .file-action-button {
2399
+ background-color: rgba(100, 100, 100, 0.1);
2400
+ }
2401
+
2402
+ .mensagem__principal .file-action-button:hover {
2403
+ background-color: var(--files-bg-hover);
2404
+ }
2405
+
2406
+ .mensagem__outros .file-action-button:hover {
2407
+ background-color: rgba(100, 100, 100, 0.3);
2408
+ }
2409
+
2410
+ .file-action-button {
2411
+ display: flex;
2412
+ justify-content: center;
2413
+ align-items: center;
2414
+ margin-left: 12px;
2415
+ cursor: pointer;
2416
+ padding: 5px;
2417
+ border-radius: 5px;
2418
+ transition: background-color 150ms ease-in-out;
2419
+ }
2420
+
2421
+ .file-action-button a {
2422
+ margin: 0;
2423
+ }
2424
+
2425
+ .fade-enter-active,
2426
+ .fade-leave-active {
2427
+ transition: opacity 0.5s;
2428
+ }
2429
+
2430
+ .fade-enter,
2431
+ .fade-leave-to {
2432
+ opacity: 0;
2433
+ }
2434
+
2435
+ .mensagem-div-anexo {
2436
+ width: 100%;
2437
+ display: flex;
2438
+ justify-content: center;
2439
+ align-items: center;
2440
+ flex-direction: column;
2441
+ overflow: hidden;
2442
+ }
2443
+
2444
+ .anexo-container {
2445
+ width: 100%;
2446
+ margin-top: 5px;
2447
+ overflow: hidden;
2448
+ display: flex;
2449
+ max-height: 300px;
2450
+ }
2451
+
2452
+ .anexo-container a,
2453
+ .anexo-container .arquivo-erro {
2454
+ padding: 10px 15px 15px 15px;
2455
+ display: flex;
2456
+ justify-content: center;
2457
+ align-items: center;
2458
+ }
2459
+
2460
+ .anexo-container p {
2461
+ text-overflow: ellipsis;
2462
+ overflow: hidden;
2463
+ }
2464
+
2465
+ .anexo-container p,
2466
+ .anexo-container .arquivo-erro {
2467
+ margin: 0;
2468
+ margin-left: 15px;
2469
+ font-size: 14.4px;
2470
+ }
2471
+
2472
+ .anexo-container svg {
2473
+ font-size: 32px;
2474
+ }
2475
+
2476
+ .anexo-mensagem audio .divAudioPai {
2477
+ outline: none;
2478
+ width: 100%;
2479
+ margin-bottom: 5px;
2480
+ }
2481
+ .audioStyle {
2482
+ width: 370px;
2483
+ }
2484
+
2485
+ .divAudioPai {
2486
+ display: flex;
2487
+ /* justify-content: space-between; */
2488
+ background-color: #f1f3f4;
2489
+ border-radius: 50%;
2490
+ width: 100%;
2491
+ border-bottom-right-radius: 26px;
2492
+ border-top-right-radius: 26px;
2493
+ }
2494
+
2495
+ .anexo-mensagem video {
2496
+ flex: 1;
2497
+ width: 100%;
2498
+ max-width: 350px;
2499
+ cursor: pointer;
2500
+ margin-bottom: 5px;
2501
+ }
2502
+
2503
+ .anexos-links-container {
2504
+ width: 100%;
2505
+ display: flex;
2506
+ justify-content: center;
2507
+ align-items: center;
2508
+ }
2509
+
2510
+ .anexos-links-container a {
2511
+ white-space: nowrap;
2512
+ text-overflow: ellipsis;
2513
+ overflow: hidden;
2514
+ margin-right: 5px;
2515
+ font-weight: 550;
2516
+ color: inherit;
2517
+ text-decoration: none;
2518
+ }
2519
+
2520
+ .anexos-links-container svg {
2521
+ cursor: pointer;
2522
+ }
2523
+
2524
+ .mensagem-div-anexo img {
2525
+ cursor: pointer;
2526
+ margin: 10px 0;
2527
+ min-width: 35px;
2528
+ width: 100%;
2529
+ max-width: 250px;
2530
+ }
2531
+
2532
+ .anexo-transition {
2533
+ width: 100%;
2534
+ height: 100%;
2535
+ }
2536
+
2537
+ .anexo-mensagem {
2538
+ display: flex;
2539
+ justify-content: center;
2540
+ align-items: center;
2541
+ flex-direction: column;
2542
+ width: 100%;
2543
+ }
2544
+
2545
+ .alert-danger {
2546
+ color: #721c24;
2547
+ background-color: #f8d7da;
2548
+ border-color: #f5c6cb;
2549
+ }
2550
+
2551
+ .alert {
2552
+ position: relative;
2553
+ padding: 10.4px 19.2px;
2554
+ margin: 5px 0;
2555
+ border: 1px solid transparent;
2556
+ border-radius: 4px;
2557
+ text-align: center;
2558
+ }
2559
+
2560
+ .alert svg {
2561
+ font-size: 1.025em;
2562
+ margin-right: 2px;
2563
+ }
2564
+
2565
+ .pdf {
2566
+ color: #e74c3c;
2567
+ }
2568
+
2569
+ .doc {
2570
+ color: #006bc9;
2571
+ }
2572
+
2573
+
2574
+ .interatividade-btn {
2575
+ width: 100%;
2576
+ display: flex;
2577
+ justify-content: center;
2578
+ align-items: center;
2579
+ background-color: #fff;
2580
+ color: #111b21;
2581
+ padding: 10px 12px;
2582
+ border-radius: 5px;
2583
+ margin-bottom: 10px;
2584
+ }
2585
+ .interatividade-btn:nth-child(1) {
2586
+ margin-top: 10px;
2587
+ }
2588
+ .interatividade-titulo {
2589
+ white-space: nowrap;
2590
+ text-overflow: ellipsis;
2591
+ overflow: hidden;
2592
+ max-width: 100%;
2593
+ margin: 0;
2594
+ padding: 0;
2595
+ }
2596
+
2597
+ .interatividade-lista {
2598
+ width: 100%;
2599
+ min-width: 200px;
2600
+ border-radius: 15px;
2601
+ background-color: #fff;
2602
+ color: #333;
2603
+ margin: 10px 0;
2604
+ }
2605
+
2606
+ .interatividade-lista-conteudo {
2607
+ padding: 10px;
2608
+ border-bottom: 1px solid #d7d7d7;
2609
+ }
2610
+ .interatividade-lista-titulo {
2611
+ font-weight: bold;
2612
+ font-size: 1.2em;
2613
+ margin-bottom: 10px;
2614
+ }
2615
+ .interatividade-lista-rodape {
2616
+ color: #818181;
2617
+ margin-top: 5px;
2618
+ }
2619
+ .interatividade-lista-link {
2620
+ width: 100%;
2621
+ text-align: center;
2622
+ padding: 10px;
2623
+ color: rgb(0, 110, 255);
2624
+ cursor: pointer;
2625
+ transition: color 200ms ease-in-out;
2626
+ }
2627
+ .interatividade-lista-link:hover {
2628
+ color: rgb(0, 98, 143);
2629
+ }
2630
+
2631
+
2632
+ .link-preview {
2633
+ display: flex;
2634
+ flex-direction: column;
2635
+ background-color: #eee;
2636
+ color: #333;
2637
+ cursor: pointer;
2638
+ margin: 5px 0;
2639
+ border-radius: 5px;
2640
+ opacity: 0.95;
2641
+ transition: opacity 300ms ease-in-out;
2642
+ font-size: 13.6px;
2643
+ }
2644
+
2645
+ .link-preview-image {
2646
+ display: flex;
2647
+ justify-content: center;
2648
+ align-items: center;
2649
+ padding: 1px;
2650
+ border-top-left-radius: 5px;
2651
+ border-top-right-radius: 5px;
2652
+ }
2653
+
2654
+ .link-preview-author {
2655
+ margin: 5px;
2656
+ font-size: 0.615em;
2657
+ font-weight: bold;
2658
+ }
2659
+ .link-preview-author.mb-0 {
2660
+ margin-bottom: 0;
2661
+ }
2662
+ .link-preview-author h1 {
2663
+ overflow: hidden;
2664
+ text-overflow: ellipsis;
2665
+ white-space: nowrap;
2666
+ }
2667
+
2668
+ .link-preview-image img {
2669
+ min-width: 100px;
2670
+ max-width: 200px;
2671
+ border-top-left-radius: 5px;
2672
+ border-top-right-radius: 5px;
2673
+ }
2674
+
2675
+ .link-preview-infos {
2676
+ background-color: #2626261a;
2677
+ padding: 5px;
2678
+ margin: 5px;
2679
+ font-size: 0.83em;
2680
+ border-radius: 5px;
2681
+ }
2682
+
2683
+ .link-preview:hover {
2684
+ opacity: 1;
2685
+ }
2686
+ .link-preview:hover .link-preview-infos p {
2687
+ text-decoration: underline;
2688
+ }
2689
+
2690
+
2691
+ :root {
2692
+ --message-color: #373737;
2693
+ --text-color: #fff;
2694
+ --files-bg: rgba(255, 255, 255, 0.1);
2695
+ --files-bg-hover: rgba(255, 255, 255, 0.1);
2696
+
2697
+ --light: 80;
2698
+ --threshold: 60;
2699
+ }
2700
+
2701
+ .fade-enter-active,
2702
+ .fade-leave-active {
2703
+ transition: opacity 0.5s;
2704
+ }
2705
+ .fade-enter,
2706
+ .fade-leave-to {
2707
+ opacity: 0;
2708
+ }
2709
+
2710
+ .mensagem-reply {
2711
+ padding: 5px 10px;
2712
+ font-size: 12px;
2713
+ color: #666;
2714
+ transition: background-color 150ms ease-in-out;
2715
+ border-radius: 5px;
2716
+ margin: 5px 0;
2717
+ overflow: hidden;
2718
+ max-width: 100%;
2719
+ }
2720
+ .mensagem-reply p {
2721
+ overflow: hidden;
2722
+ text-overflow: ellipsis;
2723
+ white-space: nowrap;
2724
+ }
2725
+
2726
+ .message-reply-principal {
2727
+ border-left: 3px solid transparent;
2728
+ background-color: rgba(100, 100, 100, 0.1);
2729
+ }
2730
+ .message-reply-principal:hover {
2731
+ background-color: rgba(100, 100, 100, 0.2);
2732
+ }
2733
+
2734
+ .message-reply-outros {
2735
+ background-color: rgb(245, 245, 245);
2736
+ border-left: 3px solid var(--message-color);
2737
+ }
2738
+ .message-reply-outros:hover {
2739
+ background-color: rgb(235, 235, 235);
2740
+ }
2741
+
2742
+ .mensagem-reply-vazia {
2743
+ display: flex;
2744
+ align-items: center;
2745
+ }
2746
+ .mensagem-reply-vazia svg {
2747
+ margin-right: 5px;
2748
+ color: #ba181b;
2749
+ }
2750
+
2751
+ .mensagem {
2752
+ padding: 20px 7px 14px 7px;
2753
+ border-radius: 5px;
2754
+ min-width: 150px;
2755
+ min-height: 60px;
2756
+ width: -webkit-fit-content;
2757
+ width: -moz-fit-content;
2758
+ width: fit-content;
2759
+ position: relative;
2760
+ max-width: 80%;
2761
+ margin-bottom: 10px;
2762
+ font-size: 12px;
2763
+ word-break: break-word;
2764
+
2765
+ -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
2766
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
2767
+ -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
2768
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
2769
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
2770
+ 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
2771
+ }
2772
+ .mensagem.max-w-60 {
2773
+ max-width: 60%;
2774
+ }
2775
+ .mensagem.mapa {
2776
+ width: 100%;
2777
+ }
2778
+ .mensagem.hist-msg {
2779
+ animation: show 1s;
2780
+ }
2781
+ .mensagem a {
2782
+ margin-right: 5px;
2783
+ font-weight: 550;
2784
+ color: inherit;
2785
+ text-decoration: none;
2786
+ }
2787
+ .mensagem a:hover {
2788
+ text-decoration: underline;
2789
+ }
2790
+ .message p {
2791
+ white-space: pre-wrap;
2792
+ }
2793
+ .mensagem:hover .menu-primario {
2794
+ visibility: visible;
2795
+ opacity: 1;
2796
+ }
2797
+
2798
+ .mensagem-anexo a,
2799
+ .mensagem-div-mapa a {
2800
+ white-space: nowrap;
2801
+ text-overflow: ellipsis;
2802
+ overflow: hidden;
2803
+ }
2804
+
2805
+ .reply {
2806
+ cursor: pointer;
2807
+ position: absolute;
2808
+ right: 53px;
2809
+ bottom: 5px;
2810
+ font-size: 9.6px;
2811
+ color: #67a332;
2812
+ width: 14.4px;
2813
+ height: 14.4px;
2814
+ display: flex;
2815
+ justify-content: center;
2816
+ align-items: center;
2817
+ border-radius: 50%;
2818
+ background-color: #fff;
2819
+ }
2820
+ .reply svg {
2821
+ margin-top: -1px;
2822
+ margin-right: -1px;
2823
+ }
2824
+ .reply-with-2-icons {
2825
+ right: 30px;
2826
+ }
2827
+
2828
+ .check {
2829
+ cursor: pointer;
2830
+ position: absolute;
2831
+ right: 10px;
2832
+ bottom: 2px;
2833
+ font-size: 11.2px;
2834
+ }
2835
+ .check.visualizado,
2836
+ .check.visualizado svg {
2837
+ color: #006daa;
2838
+ }
2839
+ .check.verde,
2840
+ .check.verde svg {
2841
+ color: #4f772d;
2842
+ }
2843
+ .check.vermelho,
2844
+ .check.vermelho svg {
2845
+ color: #ba181b;
2846
+ }
2847
+ .check.cinza,
2848
+ .check.cinza svg {
2849
+ color: #999;
2850
+ }
2851
+ .check.preto,
2852
+ .check.preto svg {
2853
+ color: #666;
2854
+ }
2855
+ .star {
2856
+ cursor: pointer;
2857
+ position: absolute;
2858
+ right: 30px;
2859
+ bottom: 2px;
2860
+ font-size: 6.4px;
2861
+ width: 11.2px;
2862
+ }
2863
+ .default-stick-size {
2864
+ width: 180px;
2865
+ height: auto;
2866
+ }
2867
+ .horario-envio {
2868
+ margin-right: 15px;
2869
+ font-size: 11.2px;
2870
+ position: absolute;
2871
+ left: 10px;
2872
+ bottom: 2px;
2873
+ }
2874
+
2875
+ .autor-mensagem {
2876
+ position: absolute;
2877
+ font-size: 9.6px;
2878
+ white-space: nowrap;
2879
+ text-overflow: ellipsis;
2880
+ overflow: hidden;
2881
+ max-width: 90%;
2882
+ font-weight: bold;
2883
+ top: 2px;
2884
+ }
2885
+
2886
+ .menu-primario {
2887
+ visibility: hidden;
2888
+ opacity: 0;
2889
+ transition: opacity 150ms ease-in-out;
2890
+ position: absolute;
2891
+ font-size: 11.2px;
2892
+ top: 3px;
2893
+ display: flex;
2894
+ gap: 5px;
2895
+ padding: 2px 4px;
2896
+ }
2897
+ .menu-primario.principal {
2898
+ left: 4px;
2899
+ color: var(--text-color);
2900
+ background-color: var(--message-color);
2901
+ }
2902
+ .menu-primario.outros {
2903
+ right: 4px;
2904
+ color: var(--text-color);
2905
+ background-color: #fff;
2906
+ }
2907
+
2908
+ .menu-primario.outros > span:nth-child(1) {
2909
+ order: 10;
2910
+ }
2911
+
2912
+ .menu-mensagem {
2913
+ cursor: pointer;
2914
+ padding: 1px;
2915
+ }
2916
+
2917
+ .menu-flutuante {
2918
+ background-color: #fff;
2919
+ -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
2920
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
2921
+ -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
2922
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
2923
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
2924
+ 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
2925
+ border-radius: 10px;
2926
+ position: absolute;
2927
+ top: 20px;
2928
+ width: 120px;
2929
+ min-height: 50px;
2930
+ height: 50px;
2931
+ max-height: 50px;
2932
+ overflow-x: hidden;
2933
+ overflow-y: auto;
2934
+ margin: 0;
2935
+ padding: 0;
2936
+ display: flex;
2937
+ flex-direction: column;
2938
+ z-index: 1;
2939
+ }
2940
+
2941
+ .menu-flutuante.principal {
2942
+ left: 3px;
2943
+ }
2944
+
2945
+ .menu-flutuante.outros {
2946
+ right: 3px;
2947
+ }
2948
+
2949
+ .menu-flutuante li {
2950
+ transition: background-color 300ms ease-in-out;
2951
+ width: 100%;
2952
+ cursor: pointer;
2953
+ padding: 5px 10px;
2954
+ display: flex;
2955
+ align-items: center;
2956
+ }
2957
+
2958
+ .menu-flutuante li:hover {
2959
+ background-color: #e9e9e9;
2960
+ }
2961
+
2962
+ /* Principal */
2963
+ .mensagem__principal {
2964
+ width: 100%;
2965
+ display: flex;
2966
+ justify-content: flex-end;
2967
+ }
2968
+ .mensagem__principal > .mensagem::after {
2969
+ content: "";
2970
+ width: 0;
2971
+ height: 0;
2972
+ position: absolute;
2973
+ border-left: 10px solid transparent;
2974
+ border-right: 10px solid transparent;
2975
+ border-top: 10px solid var(--message-color);
2976
+ bottom: 5px;
2977
+ right: -10px;
2978
+ transform: rotate(-90deg);
2979
+ }
2980
+ .mensagem__principal > .mensagem {
2981
+ background-color: var(--message-color);
2982
+ color: var(--text-color);
2983
+ }
2984
+
2985
+ .mensagem__principal > .mensagem .horario-envio {
2986
+ color: var(--text-color);
2987
+ }
2988
+ .mensagem__principal > .mensagem .autor-mensagem {
2989
+ right: 5px;
2990
+ color: var(--text-color);
2991
+ }
2992
+ /* Outros */
2993
+ .mensagem__outros {
2994
+ width: 100%;
2995
+ display: flex;
2996
+ }
2997
+ .mensagem__outros > .mensagem {
2998
+ background-color: #fff;
2999
+ color: #333;
3000
+ }
3001
+ .mensagem__outros > .mensagem::after {
3002
+ content: "";
3003
+ width: 0;
3004
+ height: 0;
3005
+ position: absolute;
3006
+ border-left: 10px solid transparent;
3007
+ border-right: 10px solid transparent;
3008
+ border-top: 10px solid #fff;
3009
+ bottom: 5px;
3010
+ left: -10px;
3011
+ transform: rotate(90deg);
3012
+ }
3013
+ /* .mensagem__outros .check{
3014
+ display: none
3015
+ } */
3016
+ .mensagem__outros > .autor-mensagem {
3017
+ left: 5px;
3018
+ color: #333;
3019
+ }
3020
+ /* Mapa */
3021
+ .mensagem-div-mapa {
3022
+ width: 100%;
3023
+ display: flex;
3024
+ justify-content: center;
3025
+ align-items: center;
3026
+ flex-direction: column;
3027
+ margin-bottom: 5px;
3028
+ }
3029
+
3030
+ .msg-mapa {
3031
+ width: 100%;
3032
+ min-height: 225px;
3033
+ height: 100%;
3034
+ box-sizing: initial;
3035
+ }
3036
+ .msg-mapa img {
3037
+ max-width: none !important;
3038
+ }
3039
+
3040
+ .info-mapa {
3041
+ list-style-type: none;
3042
+ }
3043
+ .info-mapa li.title {
3044
+ font-size: 0.85em;
3045
+ }
3046
+ .info-mapa li.address,
3047
+ .info-mapa li.url {
3048
+ font-size: 0.85em;
3049
+ }
3050
+ .info-mapa li.url {
3051
+ font-size: 0.85em;
3052
+ }
3053
+
3054
+ .tooltip-list {
3055
+ margin: 0;
3056
+ padding: 0;
3057
+ display: flex;
3058
+ flex-direction: column;
3059
+ justify-content: center;
3060
+ align-items: flex-start;
3061
+ }
3062
+
3063
+ .emoji-message-container {
3064
+ position: absolute;
3065
+ top: 0;
3066
+ z-index: 1;
3067
+ width: 300px;
3068
+ height: 250px;
3069
+ }
3070
+ /* .emoji-message-container {
3071
+ z-index: 1;
3072
+ overflow: hidden;
3073
+ width: 300px;
3074
+ height: 250px;
3075
+
3076
+ >.sm-emoji-picker {
3077
+ position: relative;
3078
+ width: 300px;
3079
+ height: 250px;
3080
+ }
3081
+ }
3082
+
3083
+ .mensagem .reaction {
3084
+ $size: 1.8em;
3085
+ width: $size;
3086
+ height: $size;
3087
+ min-width: $size;
3088
+ min-height: $size;
3089
+ max-width: $size;
3090
+ max-height: $size;
3091
+ } */
3092
+
3093
+ .emoji-message-container .sm-emoji-picker {
3094
+ width: 300px;
3095
+ height: 250px;
3096
+ }
3097
+ .emoji-message-container .sm-emoji-picker .sm-emoji-header {
3098
+ overflow-x: auto;
3099
+ overflow-y: hidden;
3100
+ }
3101
+
3102
+ .reaction {
3103
+ position: absolute;
3104
+ bottom: 0;
3105
+ border-radius: 50%;
3106
+ display: flex;
3107
+ justify-content: center;
3108
+ align-items: center;
3109
+ background-color: rgba(100, 100, 100, 0.4);
3110
+ padding: 5px;
3111
+ font-size: 1.3em;
3112
+ min-width: 1.8em;
3113
+ min-height: 1.8em;
3114
+ max-width: 1.8em;
3115
+ max-height: 1.8em;
3116
+ }
3117
+
3118
+ .reaction > span {
3119
+ display: block;
3120
+ transform: translateY(-1px);
3121
+ }
3122
+
3123
+ .mensagem__outros .reaction {
3124
+ right: -30px;
3125
+ }
3126
+
3127
+ .mensagem__principal .reaction {
3128
+ left: -30px;
3129
+ }
3130
+
3131
+
3132
+ .simple-btn--icon.custom > span {
3133
+ width: 20px;
3134
+ height: 20px;
3135
+ }
3136
+
3137
+
3138
+ .default-btn-style {
3139
+ transition-duration: 300ms;
3140
+ user-select: none;
3141
+ cursor: pointer;
3142
+ box-shadow: inset 0 -2px rgba(0, 0, 0, 0.2);
3143
+ opacity: .9;
3144
+ border-radius: 5px;
3145
+ display: flex;
3146
+ justify-content: center;
3147
+ align-items: center;
3148
+ padding: 5px;
3149
+ cursor: pointer;
3150
+ min-height: 28px;
3151
+ }
3152
+ .default-btn-style:hover{
3153
+ opacity: 1;
3154
+ }
3155
+ .default-btn-style:active{
3156
+ opacity: 1;
3157
+ box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
3158
+ -webkit-transform: translateY(1px);
3159
+ -moz-transform: translateY(1px);
3160
+ -o-transform: translateY(1px);
3161
+ -ms-transform: translateY(1px);
3162
+ transform: translateY(1px);
3163
+ }
3164
+
3165
+ .simple-btn {
3166
+ position: relative;
3167
+ }
3168
+
3169
+ .simple-btn--icon {
3170
+ display: flex;
3171
+ justify-content: center;
3172
+ align-items: center;
3173
+ margin-right: 5px;
3174
+ }
3175
+ .simple-btn--icon.custom {
3176
+ min-width: 25px;
3177
+ }
3178
+
3179
+ .simple-btn--text {
3180
+ white-space: nowrap;
3181
+ text-overflow: ellipsis;
3182
+ overflow: hidden;
3183
+ }
3184
+
3185
+ .icon-container {
3186
+ position: absolute;
3187
+ left: -15px;
3188
+ padding: 5px;
3189
+ width: 40px;
3190
+ height: 40px;
3191
+ display: flex;
3192
+ justify-content: center;
3193
+ align-items: center;
3194
+ border-radius: 50%;
3195
+ }
3196
+ .icon-container svg {
3197
+ color: rgba(255, 255, 255, .5);
3198
+ width: 23px;
3199
+ height: 23px;
3200
+ }
3201
+
3202
+
3203
+
3204
+ .fade-enter-active,
3205
+ .fade-leave-active {
3206
+ transition: opacity 0.3s;
3207
+ }
3208
+ .fade-enter,
3209
+ .fade-leave-to {
3210
+ opacity: 0;
3211
+ }
3212
+
3213
+
3214
+ .btn-rolagem {
3215
+ position: absolute;
3216
+ bottom: 10px;
3217
+ right: 20px;
3218
+ }
3219
+ .btn-rolagem.higher {
3220
+ bottom: 36px;
3221
+ }
3222
+ .btn-rolagem svg {
3223
+ font-size: 38.4px;
3224
+ color: #757575;
3225
+ transition-duration: 300ms;
3226
+ transition-property: opacity;
3227
+ opacity: 0.8;
3228
+ cursor: pointer;
3229
+ }
3230
+ .btn-rolagem svg:hover {
3231
+ opacity: 1;
3232
+ }
3233
+ .sinalizar-msg-nova {
3234
+ position: absolute;
3235
+ top: -10px;
3236
+ left: -10px;
3237
+ background-color: #4f772d;
3238
+ width: 12.5px;
3239
+ height: 12.5px;
3240
+ border-radius: 50%;
3241
+ animation-name: blink;
3242
+ animation-duration: 1000ms;
3243
+ animation-direction: alternate;
3244
+ animation-iteration-count: infinite;
3245
+ }
3246
+
3247
+ @keyframes blink {
3248
+ from {
3249
+ opacity: 0.8 - 0.1;
3250
+ }
3251
+ to {
3252
+ opacity: 1;
3253
+ }
3254
+ }
3255
+
3256
+
3257
+ .mr-5 {
3258
+ margin-right: 5px;
3259
+ }
3260
+ .anexo-img {
3261
+ display: flex;
3262
+ justify-content: center;
3263
+ align-items: center;
3264
+ width: 100%;
3265
+ height: 100%;
3266
+ overflow: hidden;
3267
+ background-color: rgba(0, 0, 0, .2);
3268
+ border-radius: 2.5px;
3269
+ cursor: pointer;
3270
+ opacity: .9;
3271
+ transition: opacity 150ms;
3272
+ }
3273
+ .anexo-img:hover {
3274
+ opacity: 1;
3275
+ }
3276
+ .anexo-img img {
3277
+ width: 95%;
3278
+ max-height: 50px;
3279
+ }
3280
+ .box-shadow {
3281
+ -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
3282
+ -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
3283
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
3284
+ }
3285
+ .anexo-icone {
3286
+ display: flex;
3287
+ justify-content: center;
3288
+ align-items: center;
3289
+ font-size: 30px;
3290
+ cursor: pointer;
3291
+ }
3292
+ .anexo-icone:hover {
3293
+ opacity: 1
3294
+ }
3295
+ .anexo-icone:visited {
3296
+ color: inherit;
3297
+ }
3298
+ .anexo-icone.pdf {
3299
+ position: relative;
3300
+ }
3301
+ .anexo-icone.pdf svg {
3302
+ color: rgb(231, 76, 60);
3303
+ }
3304
+ .anexo-icone.pdf::after {
3305
+ content: "";
3306
+ position: absolute;
3307
+ bottom: 2px;
3308
+ transform: translateY(2px);
3309
+ width: 20px;
3310
+ height: 20px;
3311
+ }
3312
+ .anexo-icone.doc {
3313
+ color: #15517F;
3314
+ }
3315
+ .anexo-icone.doc::after {
3316
+ content: "";
3317
+ position: absolute;
3318
+ width: 20px;
3319
+ height: 20px;
3320
+ }
3321
+ .align-items-center {
3322
+ align-items: center;
3323
+ }
3324
+ .flex-wrap {
3325
+ flex-wrap: wrap;
3326
+ }
3327
+ .d-flex {
3328
+ display: flex;
3329
+ }
3330
+ .mb-5 {
3331
+ margin-bottom: 5px;
3332
+ }
3333
+ .mx-5 {
3334
+ margin-left: 5px;
3335
+ margin-right: 5px;
3336
+ }
3337
+
3338
+
3339
+ .w-100 {
3340
+ width: 100%;
3341
+ }
3342
+ .text-dark {
3343
+ color: #333
3344
+ }
3345
+ .min-h-60 {
3346
+ min-height: 60px;
3347
+ }
3348
+ .d-flex {
3349
+ display: flex;
3350
+ }
3351
+ .flex-wrap {
3352
+ flex-wrap: wrap;
3353
+ }
3354
+ .border-bottom-1 {
3355
+ border-bottom: 1px solid;
3356
+ }
3357
+ .border-color-gray {
3358
+ border-color: #CCC
3359
+ }
3360
+ .transition-150 {
3361
+ transition: all 150ms ease-in-out;
3362
+ }
3363
+ .cursor-pointer {
3364
+ cursor: pointer;
3365
+ }
3366
+ .justify-content-between {
3367
+ justify-content: space-between;
3368
+ }
3369
+ .align-items-center {
3370
+ align-items: center;
3371
+ }
3372
+ .align-self-start {
3373
+ align-self: flex-start;
3374
+ }
3375
+ .border-radius-round {
3376
+ border-radius: 50%!important;
3377
+ }
3378
+ .w-36px {
3379
+ width: 36px;
3380
+ }
3381
+ .h-36px {
3382
+ height: 36px;
3383
+ }
3384
+ .border-1 {
3385
+ border: 1px solid;
3386
+ }
3387
+ .mr-10 {
3388
+ margin-right: 10px;
3389
+ }
3390
+ .flex-column {
3391
+ display: flex;
3392
+ flex-direction: column
3393
+ }
3394
+ .text-bold {
3395
+ font-weight: bold;
3396
+ }
3397
+ .fs-_9 {
3398
+ font-size: 14.4px;
3399
+ }
3400
+ .fs-_8 {
3401
+ font-size: 12.8px;
3402
+ }
3403
+ .text-gray {
3404
+ color: gray;
3405
+ }
3406
+ .p-15 {
3407
+ padding: 15px;
3408
+ }
3409
+ .text-ellipsis{
3410
+ white-space: nowrap;
3411
+ text-overflow: ellipsis;
3412
+ overflow: hidden
3413
+ }
3414
+ .d-flex-center{
3415
+ display: flex;
3416
+ justify-content: center;
3417
+ align-items: center
3418
+ }
3419
+