@sankhyalabs/ez-design 1.0.51 → 1.0.54

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.
@@ -91,6 +91,108 @@
91
91
  --hover--inverted: #333333;
92
92
  --icon--color: #626e82; }
93
93
 
94
+ /*Medias*/
95
+ body {
96
+ margin: 0;
97
+ background-color: #fafcff; }
98
+
99
+ div {
100
+ box-sizing: border-box; }
101
+
102
+ .align--left {
103
+ display: flex;
104
+ justify-content: flex-start; }
105
+
106
+ .align--right {
107
+ display: flex;
108
+ justify-content: flex-end; }
109
+
110
+ .align--center {
111
+ display: flex;
112
+ justify-content: center; }
113
+
114
+ .align--top {
115
+ align-self: flex-start;
116
+ align-items: flex-start; }
117
+
118
+ .align--middle {
119
+ align-self: center;
120
+ align-items: center; }
121
+
122
+ .align--bottom {
123
+ align-self: flex-end;
124
+ align-items: flex-end; }
125
+
126
+ .content {
127
+ width: 100%;
128
+ box-sizing: border-box;
129
+ padding: 12px; }
130
+ @media only screen and (min-width: 768px) {
131
+ .content {
132
+ flex-direction: row;
133
+ padding: 6px 24px; } }
134
+
135
+ @media only screen and (min-width: 768px) {
136
+ .content--menu {
137
+ margin-left: 95px;
138
+ padding: 12px 24px; } }
139
+
140
+ .flex {
141
+ display: flex;
142
+ flex-direction: row; }
143
+ .flex--row-reverse {
144
+ flex-direction: row-reverse; }
145
+ .flex--column {
146
+ flex-direction: column; }
147
+ .flex--column-reverse {
148
+ flex-direction: column-reverse; }
149
+ .flex--wrap {
150
+ flex-wrap: wrap; }
151
+ .flex--wrap-reverse {
152
+ flex-wrap: wrap-reverse; }
153
+ .flex--justify-start {
154
+ justify-content: flex-start; }
155
+ .flex--justify-end {
156
+ justify-content: flex-end; }
157
+ .flex--justify-between {
158
+ justify-content: space-between; }
159
+ .flex--justify-around {
160
+ justify-content: space-around; }
161
+ .flex--justify-evenly {
162
+ justify-content: space-evenly; }
163
+ .flex--align-items-start {
164
+ align-items: flex-start; }
165
+ .flex--align-items-end {
166
+ align-items: flex-end; }
167
+ .flex--align-items-baseline {
168
+ align-items: baseline; }
169
+ .flex--align-items-center {
170
+ align-items: center; }
171
+ .flex--align-items-stretch {
172
+ align-items: stretch; }
173
+ .flex--align-content-start {
174
+ align-content: flex-start; }
175
+ .flex--align-content-end {
176
+ align-content: flex-end; }
177
+ .flex--align-content-around {
178
+ align-content: space-around; }
179
+ .flex--align-content-between {
180
+ align-content: space-between; }
181
+ .flex-item--first {
182
+ order: -1; }
183
+ .flex-item--last {
184
+ order: 1; }
185
+ .flex-item--align-start {
186
+ align-self: flex-start; }
187
+ .flex-item--align-end {
188
+ align-self: flex-end; }
189
+ .flex-item--align-baseline {
190
+ align-self: baseline; }
191
+ .flex-item--align-center {
192
+ align-self: center; }
193
+ .flex-item--align-stretch {
194
+ align-self: stretch; }
195
+
94
196
  .row {
95
197
  width: 100%;
96
198
  display: flex;
@@ -241,104 +343,58 @@
241
343
  .col--ld-12 {
242
344
  width: 100%; } }
243
345
 
244
- body {
245
- margin: 0;
246
- background-color: #fafcff; }
247
-
248
- div {
249
- box-sizing: border-box; }
250
-
251
- /*Medias*/
252
- .align--left {
253
- display: flex;
254
- justify-content: flex-start; }
255
-
256
- .align--right {
257
- display: flex;
258
- justify-content: flex-end; }
259
-
260
- .align--center {
346
+ .image {
261
347
  display: flex;
262
- justify-content: center; }
263
-
264
- .align--top {
265
- align-self: flex-start;
266
- align-items: flex-start; }
267
-
268
- .align--middle {
269
- align-self: center;
270
- align-items: center; }
271
-
272
- .align--bottom {
273
- align-self: flex-end;
274
- align-items: flex-end; }
275
-
276
- .text {
277
- font-family: "Sora", "Algerian";
278
- text-shadow: 0 0 0 #353535, 0 0 1px transparent; }
279
-
280
- .text--xsmall {
281
- font-size: 10px; }
282
-
283
- .text--small {
284
- font-size: 12px; }
285
-
286
- .text--medium {
287
- font-size: 14px; }
288
-
289
- .text--large {
290
- font-size: 16px; }
291
-
292
- .text--xlarge {
293
- font-size: 20px; }
348
+ justify-content: center;
349
+ align-items: center;
350
+ width: 100%;
351
+ height: 100%; }
294
352
 
295
- .text--center {
296
- text-align: center; }
353
+ .image--extra-small {
354
+ max-width: 80px;
355
+ max-height: 60px; }
297
356
 
298
- .text--right {
299
- text-align: right; }
357
+ .image--small {
358
+ max-width: 160px;
359
+ max-height: 120px; }
300
360
 
301
- .text--left {
302
- text-align: left; }
361
+ .image--medium {
362
+ max-width: 240px;
363
+ max-height: 180px; }
303
364
 
304
- .text--inverted {
305
- color: #fff;
306
- text-shadow: 0 0 0 #fff, 0 0 1px transparent; }
365
+ .image--large {
366
+ max-width: 360px;
367
+ max-height: 270px; }
307
368
 
308
- .text--bold {
309
- font-weight: 600; }
369
+ .image--extra-large {
370
+ max-width: 640px;
371
+ max-height: 480px; }
310
372
 
311
- .text--full {
312
- width: 100%; }
373
+ .image--border {
374
+ border: 2px #dce0e8; }
313
375
 
314
- .text--primary {
315
- color: #626e82;
316
- text-shadow: 0 0 0 #353535, 0 0 1px transparent; }
376
+ .info {
377
+ display: flex;
378
+ width: 100%;
379
+ flex-wrap: wrap; }
317
380
 
318
- .text--secondary {
381
+ .info__title {
382
+ display: flex;
319
383
  color: #a2abb9;
320
- text-shadow: 0 0 0 #353535, 0 0 1px transparent; }
321
-
322
- .text--tertiary {
323
- color: #da3688;
324
- text-shadow: 0 0 0 #353535, 0 0 1px transparent; }
325
-
326
- .text--error {
384
+ font-family: "Sora", "Algerian";
327
385
  font-size: 12px;
328
- color: #BD0025;
329
- margin-top: 3px;
330
- line-height: 14px;
331
- flex-grow: 1;
332
- min-width: 50%;
333
- min-height: 16px; }
334
-
335
- .text--uppercase {
386
+ text-shadow: 0 0 0 #353535, 0 0 1px transparent;
336
387
  text-transform: uppercase; }
337
388
 
338
- .text--ellipsis {
339
- white-space: nowrap;
340
- overflow: hidden;
341
- text-overflow: ellipsis; }
389
+ .info__text {
390
+ display: flex;
391
+ color: #626e82;
392
+ font-family: "Sora", "Algerian";
393
+ font-size: 14px;
394
+ font-weight: 600;
395
+ width: 100%;
396
+ word-break: break-word;
397
+ padding-bottom: 3px; }
342
398
 
343
399
  .label {
344
400
  color: #626e82;
@@ -373,79 +429,194 @@ div {
373
429
  flex-grow: 1;
374
430
  margin: 3px 0; }
375
431
 
376
- .padding--extra-small {
377
- padding: 3px; }
432
+ .margin--extra-small {
433
+ margin: 3px; }
378
434
 
379
- .padding--small {
380
- padding: 6px; }
435
+ .margin--small {
436
+ margin: 6px; }
381
437
 
382
- .padding--medium {
383
- padding: 12px; }
438
+ .margin--medium {
439
+ margin: 12px; }
384
440
 
385
- .padding--large {
386
- padding: 24px; }
441
+ .margin--large {
442
+ margin: 24px; }
387
443
 
388
- .padding--extra-large {
389
- padding: 48px; }
444
+ .margin--extra-large {
445
+ margin: 48px; }
390
446
 
391
- .padding-vertical--extra-small {
392
- padding-top: 3px;
393
- padding-bottom: 3px; }
447
+ .margin-vertical--extra-small {
448
+ margin-top: 3px;
449
+ margin-bottom: 3px; }
394
450
 
395
- .padding-vertical--small {
396
- padding-top: 6px;
397
- padding-bottom: 6px; }
451
+ .margin-vertical--small {
452
+ margin-top: 6px;
453
+ margin-bottom: 6px; }
398
454
 
399
- .padding-vertical--medium {
400
- padding-top: 12px;
401
- padding-bottom: 12px; }
455
+ .margin-vertical--medium {
456
+ margin-top: 12px;
457
+ margin-bottom: 12px; }
402
458
 
403
- .padding-vertical--large {
404
- padding-top: 24px;
405
- padding-bottom: 24px; }
459
+ .margin-vertical--large {
460
+ margin-top: 24px;
461
+ margin-bottom: 24px; }
406
462
 
407
- .padding-vertical--extra-large {
408
- padding-top: 48px;
409
- padding-bottom: 48px; }
463
+ .margin-vertical--extra-large {
464
+ margin-top: 48px;
465
+ margin-bottom: 48px; }
410
466
 
411
- .padding-horizontal--extra-large {
412
- padding-left: 48px;
413
- padding-right: 48px; }
467
+ .margin-horizontal--extra-small {
468
+ margin-left: 3px;
469
+ margin-right: 3px; }
414
470
 
415
- .padding-horizontal--extra-small {
416
- padding-left: 3px;
417
- padding-right: 3px; }
471
+ .margin-horizontal--small {
472
+ margin-left: 6px;
473
+ margin-right: 6px; }
418
474
 
419
- .padding-horizontal--small {
420
- padding-left: 6px;
421
- padding-right: 6px; }
475
+ .margin-horizontal--medium {
476
+ margin-left: 12px;
477
+ margin-right: 12px; }
422
478
 
423
- .padding-horizontal--medium {
424
- padding-left: 12px;
425
- padding-right: 12px; }
479
+ .margin-horizontal--large {
480
+ margin-left: 24px;
481
+ margin-right: 24px; }
426
482
 
427
- .padding-horizontal--large {
428
- padding-left: 24px;
429
- padding-right: 24px; }
483
+ .margin-horizontal--extra-large {
484
+ margin-left: 48px;
485
+ margin-right: 48px; }
430
486
 
431
- .padding-horizontal--extra-large {
432
- padding-left: 48px;
433
- padding-right: 48px; }
487
+ .margin-bottom--extra-small {
488
+ margin-bottom: 3px; }
434
489
 
435
- .padding-bottom--extra-small {
436
- padding-bottom: 3px; }
490
+ .margin-bottom--small {
491
+ margin-bottom: 6px; }
437
492
 
438
- .padding-bottom--small {
439
- padding-bottom: 6px; }
493
+ .margin-bottom--medium {
494
+ margin-bottom: 12px; }
440
495
 
441
- .padding-bottom--medium {
442
- padding-bottom: 12px; }
496
+ .margin-bottom--large {
497
+ margin-bottom: 24px; }
443
498
 
444
- .padding-bottom--large {
445
- padding-bottom: 24px; }
499
+ .margin-bottom--extra-large {
500
+ margin-bottom: 48px; }
446
501
 
447
- .padding-bottom--extra-large {
448
- padding-bottom: 48px; }
502
+ .margin-top--extra-small {
503
+ margin-top: 3px; }
504
+
505
+ .margin-top--small {
506
+ margin-top: 6px; }
507
+
508
+ .margin-top--medium {
509
+ margin-top: 12px; }
510
+
511
+ .margin-top--large {
512
+ margin-top: 24px; }
513
+
514
+ .margin-top--extra-large {
515
+ margin-top: 48px; }
516
+
517
+ .margin-left--extra-small {
518
+ margin-left: 3px; }
519
+
520
+ .margin-left--small {
521
+ margin-left: 6px; }
522
+
523
+ .margin-left--medium {
524
+ margin-left: 12px; }
525
+
526
+ .margin-left--large {
527
+ margin-left: 24px; }
528
+
529
+ .margin-left--extra-large {
530
+ margin-left: 48px; }
531
+
532
+ .margin-right--extra-small {
533
+ margin-right: 3px; }
534
+
535
+ .margin-right--small {
536
+ margin-right: 6px; }
537
+
538
+ .margin-right--medium {
539
+ margin-right: 12px; }
540
+
541
+ .margin-right--large {
542
+ margin-right: 24px; }
543
+
544
+ .margin-right--extra-large {
545
+ margin-right: 48px; }
546
+
547
+ .padding--extra-small {
548
+ padding: 3px; }
549
+
550
+ .padding--small {
551
+ padding: 6px; }
552
+
553
+ .padding--medium {
554
+ padding: 12px; }
555
+
556
+ .padding--large {
557
+ padding: 24px; }
558
+
559
+ .padding--extra-large {
560
+ padding: 48px; }
561
+
562
+ .padding-vertical--extra-small {
563
+ padding-top: 3px;
564
+ padding-bottom: 3px; }
565
+
566
+ .padding-vertical--small {
567
+ padding-top: 6px;
568
+ padding-bottom: 6px; }
569
+
570
+ .padding-vertical--medium {
571
+ padding-top: 12px;
572
+ padding-bottom: 12px; }
573
+
574
+ .padding-vertical--large {
575
+ padding-top: 24px;
576
+ padding-bottom: 24px; }
577
+
578
+ .padding-vertical--extra-large {
579
+ padding-top: 48px;
580
+ padding-bottom: 48px; }
581
+
582
+ .padding-horizontal--extra-large {
583
+ padding-left: 48px;
584
+ padding-right: 48px; }
585
+
586
+ .padding-horizontal--extra-small {
587
+ padding-left: 3px;
588
+ padding-right: 3px; }
589
+
590
+ .padding-horizontal--small {
591
+ padding-left: 6px;
592
+ padding-right: 6px; }
593
+
594
+ .padding-horizontal--medium {
595
+ padding-left: 12px;
596
+ padding-right: 12px; }
597
+
598
+ .padding-horizontal--large {
599
+ padding-left: 24px;
600
+ padding-right: 24px; }
601
+
602
+ .padding-horizontal--extra-large {
603
+ padding-left: 48px;
604
+ padding-right: 48px; }
605
+
606
+ .padding-bottom--extra-small {
607
+ padding-bottom: 3px; }
608
+
609
+ .padding-bottom--small {
610
+ padding-bottom: 6px; }
611
+
612
+ .padding-bottom--medium {
613
+ padding-bottom: 12px; }
614
+
615
+ .padding-bottom--large {
616
+ padding-bottom: 24px; }
617
+
618
+ .padding-bottom--extra-large {
619
+ padding-bottom: 48px; }
449
620
 
450
621
  .padding-top--extra-small {
451
622
  padding-top: 3px; }
@@ -492,163 +663,317 @@ div {
492
663
  .padding-right--extra-large {
493
664
  padding-right: 48px; }
494
665
 
495
- .margin--extra-small {
496
- margin: 3px; }
497
-
498
- .margin--small {
499
- margin: 6px; }
666
+ .shell {
667
+ display: flex;
668
+ flex-wrap: wrap;
669
+ width: 100%;
670
+ box-sizing: border-box;
671
+ margin-bottom: 60px; }
672
+ @media only screen and (min-width: 768px) {
673
+ .shell {
674
+ padding-top: 49px;
675
+ margin-bottom: 0; } }
500
676
 
501
- .margin--medium {
502
- margin: 12px; }
677
+ .text {
678
+ font-family: "Sora", "Algerian";
679
+ text-shadow: 0 0 0 #353535, 0 0 1px transparent; }
503
680
 
504
- .margin--large {
505
- margin: 24px; }
681
+ .text--xsmall {
682
+ font-size: 10px; }
506
683
 
507
- .margin--extra-large {
508
- margin: 48px; }
684
+ .text--small {
685
+ font-size: 12px; }
509
686
 
510
- .margin-vertical--extra-small {
511
- margin-top: 3px;
512
- margin-bottom: 3px; }
687
+ .text--medium {
688
+ font-size: 14px; }
513
689
 
514
- .margin-vertical--small {
515
- margin-top: 6px;
516
- margin-bottom: 6px; }
690
+ .text--large {
691
+ font-size: 16px; }
517
692
 
518
- .margin-vertical--medium {
519
- margin-top: 12px;
520
- margin-bottom: 12px; }
693
+ .text--xlarge {
694
+ font-size: 20px; }
521
695
 
522
- .margin-vertical--large {
523
- margin-top: 24px;
524
- margin-bottom: 24px; }
696
+ .text--center {
697
+ text-align: center; }
525
698
 
526
- .margin-vertical--extra-large {
527
- margin-top: 48px;
528
- margin-bottom: 48px; }
699
+ .text--right {
700
+ text-align: right; }
529
701
 
530
- .margin-horizontal--extra-small {
531
- margin-left: 3px;
532
- margin-right: 3px; }
702
+ .text--left {
703
+ text-align: left; }
533
704
 
534
- .margin-horizontal--small {
535
- margin-left: 6px;
536
- margin-right: 6px; }
705
+ .text--inverted {
706
+ color: #fff;
707
+ text-shadow: 0 0 0 #fff, 0 0 1px transparent; }
537
708
 
538
- .margin-horizontal--medium {
539
- margin-left: 12px;
540
- margin-right: 12px; }
709
+ .text--bold {
710
+ font-weight: 600; }
541
711
 
542
- .margin-horizontal--large {
543
- margin-left: 24px;
544
- margin-right: 24px; }
712
+ .text--full {
713
+ width: 100%; }
545
714
 
546
- .margin-horizontal--extra-large {
547
- margin-left: 48px;
548
- margin-right: 48px; }
715
+ .text--primary {
716
+ color: #626e82;
717
+ text-shadow: 0 0 0 #353535, 0 0 1px transparent; }
549
718
 
550
- .margin-bottom--extra-small {
551
- margin-bottom: 3px; }
719
+ .text--secondary {
720
+ color: #a2abb9;
721
+ text-shadow: 0 0 0 #353535, 0 0 1px transparent; }
552
722
 
553
- .margin-bottom--small {
554
- margin-bottom: 6px; }
723
+ .text--tertiary {
724
+ color: #da3688;
725
+ text-shadow: 0 0 0 #353535, 0 0 1px transparent; }
555
726
 
556
- .margin-bottom--medium {
557
- margin-bottom: 12px; }
727
+ .text--error {
728
+ font-size: 12px;
729
+ color: #BD0025;
730
+ margin-top: 3px;
731
+ line-height: 14px;
732
+ flex-grow: 1;
733
+ min-width: 50%;
734
+ min-height: 16px; }
558
735
 
559
- .margin-bottom--large {
560
- margin-bottom: 24px; }
736
+ .text--uppercase {
737
+ text-transform: uppercase; }
561
738
 
562
- .margin-bottom--extra-large {
563
- margin-bottom: 48px; }
739
+ .text--ellipsis {
740
+ white-space: nowrap;
741
+ overflow: hidden;
742
+ text-overflow: ellipsis; }
564
743
 
565
- .margin-top--extra-small {
566
- margin-top: 3px; }
744
+ .title {
745
+ display: flex;
746
+ font-family: "Sora", "Algerian";
747
+ margin: 0;
748
+ font-weight: 600;
749
+ line-height: 1.3; }
567
750
 
568
- .margin-top--small {
569
- margin-top: 6px; }
751
+ .title--extra-small {
752
+ font-size: 12px; }
570
753
 
571
- .margin-top--medium {
572
- margin-top: 12px; }
754
+ .title--small {
755
+ font-size: 14px; }
573
756
 
574
- .margin-top--large {
575
- margin-top: 24px; }
757
+ .title--medium {
758
+ font-size: 16px; }
576
759
 
577
- .margin-top--extra-large {
578
- margin-top: 48px; }
760
+ .title--large {
761
+ font-size: 20px; }
579
762
 
580
- .margin-left--extra-small {
581
- margin-left: 3px; }
763
+ .title--extra-large {
764
+ font-size: 24px; }
582
765
 
583
- .margin-left--small {
584
- margin-left: 6px; }
766
+ .title--center {
767
+ text-align: center; }
585
768
 
586
- .margin-left--medium {
587
- margin-left: 12px; }
769
+ .title--right {
770
+ text-align: right; }
588
771
 
589
- .margin-left--large {
590
- margin-left: 24px; }
591
-
592
- .margin-left--extra-large {
593
- margin-left: 48px; }
772
+ .title--left {
773
+ text-align: left; }
594
774
 
595
- .margin-right--extra-small {
596
- margin-right: 3px; }
775
+ .title--primary {
776
+ color: #2b3a54; }
597
777
 
598
- .margin-right--small {
599
- margin-right: 6px; }
778
+ .title--secondary {
779
+ color: #2b3a54; }
600
780
 
601
- .margin-right--medium {
602
- margin-right: 12px; }
781
+ .title--tertiary {
782
+ color: #da3688; }
603
783
 
604
- .margin-right--large {
605
- margin-right: 24px; }
784
+ .title--inverted {
785
+ color: #fff; }
606
786
 
607
- .margin-right--extra-large {
608
- margin-right: 48px; }
787
+ .alert {
788
+ display: flex;
789
+ align-items: flex-start;
790
+ justify-content: space-around;
791
+ width: 100%;
792
+ padding: 6px;
793
+ border-radius: 12px; }
609
794
 
610
- .title {
795
+ .alert__message {
611
796
  display: flex;
797
+ flex-wrap: wrap;
798
+ width: 95%;
612
799
  font-family: "Sora", "Algerian";
613
- margin: 0;
614
- font-weight: 600;
615
- line-height: 1.3; }
616
-
617
- .title--extra-small {
618
- font-size: 12px; }
619
-
620
- .title--small {
621
- font-size: 14px; }
622
-
623
- .title--medium {
624
- font-size: 16px; }
625
-
626
- .title--large {
627
- font-size: 20px; }
628
-
629
- .title--extra-large {
630
- font-size: 24px; }
800
+ margin-left: 12px;
801
+ color: #fff; }
631
802
 
632
- .title--center {
633
- text-align: center; }
803
+ .alert__title {
804
+ font-size: 14px;
805
+ font-weight: 600;
806
+ width: 100%;
807
+ margin: 0 0 6px 0; }
634
808
 
635
- .title--right {
636
- text-align: right; }
809
+ .alert__description {
810
+ display: flex;
811
+ flex-wrap: wrap;
812
+ font-size: 12px;
813
+ font-weight: 200;
814
+ margin: 0; }
637
815
 
638
- .title--left {
639
- text-align: left; }
816
+ .alert--toast-error {
817
+ background-color: #BD0025;
818
+ position: fixed;
819
+ opacity: .95;
820
+ width: 99%;
821
+ box-shadow: 0px 0px 16px 0px rgba(0, 38, 111, 0.12);
822
+ margin: 6px;
823
+ z-index: 3; }
824
+ @media only screen and (min-width: 768px) {
825
+ .alert--toast-error {
826
+ width: 380px; } }
827
+ .alert--toast-error .alert__icon {
828
+ fill: #fff; }
829
+ .alert--toast-error .alert__description {
830
+ text-shadow: 0 0 0 #fff, 0 0 1px transparent; }
640
831
 
641
- .title--primary {
642
- color: #2b3a54; }
832
+ .alert--toast-warning {
833
+ background-color: #efb103;
834
+ position: fixed;
835
+ opacity: .95;
836
+ width: 99%;
837
+ box-shadow: 0px 0px 16px 0px rgba(0, 38, 111, 0.12);
838
+ margin: 6px;
839
+ z-index: 3; }
840
+ @media only screen and (min-width: 768px) {
841
+ .alert--toast-warning {
842
+ width: 380px; } }
843
+ .alert--toast-warning .alert__icon {
844
+ fill: #fff; }
845
+ .alert--toast-warning .alert__description {
846
+ text-shadow: 0 0 0 #fff, 0 0 1px transparent; }
643
847
 
644
- .title--secondary {
645
- color: #2b3a54; }
848
+ .alert--toast-success {
849
+ background-color: #157A00;
850
+ position: fixed;
851
+ opacity: .95;
852
+ width: 99%;
853
+ box-shadow: 0px 0px 16px 0px rgba(0, 38, 111, 0.12);
854
+ margin: 6px;
855
+ z-index: 3; }
856
+ @media only screen and (min-width: 768px) {
857
+ .alert--toast-success {
858
+ width: 380px; } }
859
+ .alert--toast-success .alert__icon {
860
+ fill: #fff; }
861
+ .alert--toast-success .alert__description {
862
+ text-shadow: 0 0 0 #fff, 0 0 1px transparent; }
646
863
 
647
- .title--tertiary {
648
- color: #da3688; }
864
+ .alert--toast-info {
865
+ background-color: #008561;
866
+ position: fixed;
867
+ opacity: .95;
868
+ width: 99%;
869
+ margin: 6px;
870
+ z-index: 3; }
871
+ @media only screen and (min-width: 768px) {
872
+ .alert--toast-info {
873
+ width: 380px; } }
874
+ .alert--toast-info .alert__icon {
875
+ fill: #fff; }
876
+ .alert--toast-info .alert__description {
877
+ text-shadow: 0 0 0 #fff, 0 0 1px transparent; }
649
878
 
650
- .title--inverted {
651
- color: #fff; }
879
+ .alert--global-error {
880
+ border-bottom: 3px #BD0025;
881
+ padding: 12px;
882
+ background-color: #fff;
883
+ min-height: 60px; }
884
+ .alert--global-error .alert__icon {
885
+ fill: #BD0025; }
886
+ .alert--global-error .alert__message {
887
+ color: #626e82; }
888
+ .alert--global-error .alert__description {
889
+ text-shadow: 0 0 0 #353535, 0 0 1px transparent; }
890
+
891
+ .alert--global-warning {
892
+ border-bottom: 3px #efb103;
893
+ padding: 12px;
894
+ background-color: #fff;
895
+ min-height: 60px; }
896
+ .alert--global-warning .alert__icon {
897
+ fill: #efb103; }
898
+ .alert--global-warning .alert__message {
899
+ color: #626e82; }
900
+ .alert--global-warning .alert__description {
901
+ text-shadow: 0 0 0 #353535, 0 0 1px transparent; }
902
+
903
+ .alert--global-success {
904
+ border-bottom: 3px #157A00;
905
+ padding: 12px;
906
+ background-color: #fff;
907
+ min-height: 60px; }
908
+ .alert--global-success .alert__icon {
909
+ fill: #157A00; }
910
+ .alert--global-success .alert__message {
911
+ color: #626e82; }
912
+ .alert--global-success .alert__description {
913
+ text-shadow: 0 0 0 #353535, 0 0 1px transparent; }
914
+
915
+ .alert--global-info {
916
+ border-bottom: 3px #008561;
917
+ padding: 12px;
918
+ background-color: #fff;
919
+ min-height: 60px; }
920
+ .alert--global-info .alert__icon {
921
+ fill: #008561; }
922
+ .alert--global-info .alert__message {
923
+ color: #626e82; }
924
+ .alert--global-info .alert__description {
925
+ text-shadow: 0 0 0 #353535, 0 0 1px transparent; }
926
+
927
+ .alert--local-error {
928
+ border-left: 3px #BD0025;
929
+ padding: 12px;
930
+ background-color: #fff; }
931
+ .alert--local-error .alert__icon {
932
+ fill: #BD0025; }
933
+ .alert--local-error .alert__message {
934
+ color: #626e82; }
935
+ .alert--local-error .alert__description {
936
+ text-shadow: 0 0 0 #353535, 0 0 1px transparent; }
937
+
938
+ .alert--local-warning {
939
+ border-left: 3px #efb103;
940
+ padding: 12px;
941
+ background-color: #fff; }
942
+ .alert--local-warning .alert__icon {
943
+ fill: #efb103; }
944
+ .alert--local-warning .alert__message {
945
+ color: #626e82; }
946
+ .alert--local-warning .alert__description {
947
+ text-shadow: 0 0 0 #353535, 0 0 1px transparent; }
948
+
949
+ .alert--local-success {
950
+ border-left: 3px #157A00;
951
+ padding: 12px;
952
+ background-color: #fff; }
953
+ .alert--local-success .alert__icon {
954
+ fill: #157A00; }
955
+ .alert--local-success .alert__message {
956
+ color: #626e82; }
957
+ .alert--local-success .alert__description {
958
+ text-shadow: 0 0 0 #353535, 0 0 1px transparent; }
959
+
960
+ .alert--local-info {
961
+ border-left: 3px #008561;
962
+ padding: 12px;
963
+ background-color: #fff; }
964
+ .alert--local-info .alert__icon {
965
+ fill: #008561; }
966
+ .alert--local-info .alert__message {
967
+ color: #626e82; }
968
+ .alert--local-info .alert__description {
969
+ text-shadow: 0 0 0 #353535, 0 0 1px transparent; }
970
+
971
+ .alert--position {
972
+ top: 140px;
973
+ right: 0; }
974
+ @media only screen and (min-width: 768px) {
975
+ .alert--position {
976
+ top: 74px; } }
652
977
 
653
978
  .avatar {
654
979
  display: flex;
@@ -684,47 +1009,6 @@ div {
684
1009
  font-size: 14px;
685
1010
  font-weight: 600; }
686
1011
 
687
- .info {
688
- display: flex;
689
- width: 100%;
690
- flex-wrap: wrap; }
691
-
692
- .info__title {
693
- display: flex;
694
- color: #a2abb9;
695
- font-family: "Sora", "Algerian";
696
- font-size: 12px;
697
- text-shadow: 0 0 0 #353535, 0 0 1px transparent;
698
- text-transform: uppercase; }
699
-
700
- .info__text {
701
- display: flex;
702
- color: #626e82;
703
- font-family: "Sora", "Algerian";
704
- font-size: 14px;
705
- font-weight: 600;
706
- width: 100%;
707
- word-break: break-word;
708
- padding-bottom: 3px; }
709
-
710
- .divider-horizontal {
711
- width: 100%;
712
- height: 0;
713
- margin-left: 0;
714
- margin-right: 0;
715
- background: none;
716
- border: none;
717
- border-bottom: 2px solid #f2f5f8; }
718
-
719
- .divider-vertical {
720
- width: 0;
721
- height: auto;
722
- margin-top: 0;
723
- margin-bottom: 0;
724
- background: none;
725
- border: none;
726
- border-left: 2px solid #f2f5f8; }
727
-
728
1012
  .box {
729
1013
  display: flex;
730
1014
  flex-wrap: wrap;
@@ -800,6 +1084,97 @@ div {
800
1084
  color: #8c6b00;
801
1085
  padding: 2px 12px; }
802
1086
 
1087
+ /* breadcrumbs */
1088
+ .breadcrumb {
1089
+ width: 100%;
1090
+ display: flex;
1091
+ margin-top: 6px; }
1092
+
1093
+ ul.breadcrumb__box {
1094
+ padding: 0;
1095
+ line-height: 14px;
1096
+ list-style: none;
1097
+ width: 100%;
1098
+ margin: 0;
1099
+ display: flex;
1100
+ flex-direction: column-reverse;
1101
+ position: relative; }
1102
+ @media only screen and (min-width: 768px) {
1103
+ ul.breadcrumb__box {
1104
+ flex-direction: row; } }
1105
+
1106
+ ul.breadcrumb__box li {
1107
+ display: flex;
1108
+ font-size: 12px;
1109
+ font-family: "Sora", "Algerian";
1110
+ color: #626e82;
1111
+ text-shadow: 0 0 0 #353535, 0 0 1px transparent; }
1112
+
1113
+ ul.breadcrumb__box li + li:before {
1114
+ padding: 0 12px;
1115
+ color: #626e82; }
1116
+ @media only screen and (min-width: 768px) {
1117
+ ul.breadcrumb__box li + li:before {
1118
+ content: "\0203a";
1119
+ font-weight: 200;
1120
+ font-size: 19px; } }
1121
+
1122
+ ul.breadcrumb__box li a {
1123
+ text-decoration: none;
1124
+ color: #a2abb9; }
1125
+ ul.breadcrumb__box li a.is-active:hover {
1126
+ text-decoration: none; }
1127
+
1128
+ ul.breadcrumb__box li {
1129
+ display: none; }
1130
+ @media only screen and (min-width: 768px) {
1131
+ ul.breadcrumb__box li {
1132
+ display: flex; } }
1133
+ ul.breadcrumb__box li.is-active {
1134
+ display: flex;
1135
+ font-weight: 600;
1136
+ font-size: 14px;
1137
+ color: #2b3a54; }
1138
+
1139
+ ul.breadcrumb__box li a:hover {
1140
+ text-decoration: underline; }
1141
+
1142
+ .arrow {
1143
+ position: absolute;
1144
+ right: 10px;
1145
+ top: 4px; }
1146
+ @media only screen and (min-width: 768px) {
1147
+ .arrow {
1148
+ display: none; } }
1149
+
1150
+ .button--secondary {
1151
+ --ez-button--background-color: var(--background--medium);
1152
+ --ez-button--hover--background-color: var(--background--strong);
1153
+ --ez-button--color: var(--text--primary);
1154
+ --ez-button--disabled--background-color: var(--color--disable-secondary);
1155
+ --ez-icon--color: var(--text--primary); }
1156
+
1157
+ .button--primary {
1158
+ --ez-button--background-color: var(--color--primary);
1159
+ --ez-button--hover--background-color: var(--color--primary-700);
1160
+ --ez-button--color: var(--text--inverted);
1161
+ --ez-button--disabled--background-color: var(--color--disable-primary);
1162
+ --ez-icon--color: var(--text--inverted); }
1163
+
1164
+ .button--tertiary {
1165
+ --ez-button--font-weight: var(--text-weight--medium);
1166
+ --ez-button--border: var(--border--medium) var(--color--primary);
1167
+ --ez-button--color: var(--color--primary);
1168
+ --ez-button--focus--border: var(--border--small, --text--inverted);
1169
+ --ez-button--focus--box-shadow: var(--shadow-focus, --color--primary);
1170
+ --ez-button--background-color: var(--background--xlight);
1171
+ --ez-button--hover--background-color: var(--color--primary-200);
1172
+ --ez-icon--color: var(--color--primary); }
1173
+
1174
+ .button--link--primary {
1175
+ color: #008561;
1176
+ fill: #008561; }
1177
+
803
1178
  .chips {
804
1179
  display: flex;
805
1180
  width: 100%;
@@ -833,220 +1208,58 @@ div {
833
1208
  transition: background-color 0.2s linear;
834
1209
  border-color: #008561; }
835
1210
 
836
- .link {
837
- cursor: pointer;
838
- font-family: "Sora", "Algerian";
839
- text-decoration: none;
1211
+ .collapsable-text {
840
1212
  display: flex;
841
- align-items: center;
842
- font-weight: 400; }
843
- .link:hover {
844
- text-decoration: underline; }
845
-
846
- .link--primary {
847
- color: #00523c;
848
- font-weight: 600; }
849
- .link--primary svg {
850
- fill: #00523c;
851
- opacity: 0.7; }
1213
+ width: 100%;
1214
+ flex-wrap: wrap; }
852
1215
 
853
- .link--secondary {
854
- color: #7E7E7E; }
855
- .link--secondary svg {
856
- fill: #7E7E7E;
857
- opacity: 0.7; }
1216
+ .collapse {
1217
+ display: flex;
1218
+ flex-wrap: wrap;
1219
+ width: 100%;
1220
+ border: 2px #dce0e8; }
858
1221
 
859
- .link--tertiary {
860
- color: #da3688; }
861
- .link--tertiary svg {
862
- fill: #da3688; }
1222
+ .collapse__header {
1223
+ display: flex;
1224
+ width: 100%;
1225
+ align-items: center;
1226
+ background-color: #fff;
1227
+ border: 0;
1228
+ padding: 0; }
863
1229
 
864
- .link--inverted {
865
- color: #fff; }
866
- .link--inverted svg {
867
- fill: #fff; }
1230
+ .collapse__container {
1231
+ display: flex;
1232
+ flex-wrap: wrap;
1233
+ background-color: #fff;
1234
+ width: 100%;
1235
+ align-items: flex-start;
1236
+ align-content: flex-start; }
868
1237
 
869
- .button--link--primary {
870
- color: #008561;
871
- fill: #008561; }
1238
+ .collapse__body {
1239
+ display: flex;
1240
+ flex-wrap: wrap;
1241
+ background-color: #fff;
1242
+ width: 100%;
1243
+ align-items: flex-start;
1244
+ align-content: flex-start;
1245
+ border-top: 2px #dce0e8; }
872
1246
 
873
- .header {
1247
+ .collapse__footer {
874
1248
  display: flex;
875
1249
  flex-wrap: wrap;
876
1250
  align-items: center;
877
- align-content: center;
878
- align-self: center;
879
- box-sizing: border-box;
880
- width: 100%;
881
- max-width: 100%;
882
- padding: 12px 24px;
1251
+ padding: 6px 12px;
883
1252
  background-color: #fff;
884
- z-index: 2;
885
- box-shadow: 0px 0px 16px 0px rgba(0, 38, 111, 0.12); }
886
- .header .input--inverse {
887
- border: 2px solid transparent;
888
- height: 30px;
889
- transition: 0.2s linear; }
890
- .header .input--inverse:focus {
891
- border-bottom: 2px #da3688; }
1253
+ width: 100%; }
892
1254
 
893
- .logo {
894
- width: 160px; }
1255
+ .collapse--no-border {
1256
+ border: 0; }
1257
+ .collapse--no-border .collapse__header {
1258
+ border-bottom: none; }
1259
+ .collapse--no-border .collapse__body {
1260
+ border: none; }
895
1261
 
896
- .top-bar__user-item {
897
- display: flex;
898
- justify-content: center;
899
- align-items: center;
900
- border-radius: 100%;
901
- overflow: hidden;
902
- background-color: #fff; }
903
-
904
- .button--secondary {
905
- --ez-button--background-color: var(--background--medium);
906
- --ez-button--hover--background-color: var(--background--strong);
907
- --ez-button--color: var(--text--primary);
908
- --ez-button--disabled--background-color: var(--color--disable-secondary);
909
- --ez-icon--color: var(--text--primary); }
910
-
911
- .button--primary {
912
- --ez-button--background-color: var(--color--primary);
913
- --ez-button--hover--background-color: var(--color--primary-700);
914
- --ez-button--color: var(--text--inverted);
915
- --ez-button--disabled--background-color: var(--color--disable-primary);
916
- --ez-icon--color: var(--text--inverted); }
917
-
918
- .button--tertiary {
919
- --ez-button--font-weight: var(--text-weight--medium);
920
- --ez-button--border: var(--border--medium) var(--color--primary);
921
- --ez-button--color: var(--color--primary);
922
- --ez-button--focus--border: var(--border--small, --text--inverted);
923
- --ez-button--focus--box-shadow: var(--shadow-focus, --color--primary);
924
- --ez-button--background-color: var(--background--xlight);
925
- --ez-button--hover--background-color: var(--color--primary-200);
926
- --ez-icon--color: var(--color--primary); }
927
-
928
- .text__input-inverted {
929
- --ez-text-input__input--border-color: var(--color--strokes);
930
- --ez-text-input__input--background-color: var(--background--xlight); }
931
-
932
- .inverted {
933
- --ez-text-input__input--border-color: var(--color--strokes);
934
- --ez-text-input__input--background-color: var(--background--xlight);
935
- --text-area__input--border-color: var(--color--strokes);
936
- --text-area__input--background-color: var(--background--xlight); }
937
-
938
- /* Classes padrões */
939
- .icon {
940
- display: flex; }
941
-
942
- /* Classes modificadoras de cor */
943
- .icon-color--primary {
944
- --color--icon: $color--primary; }
945
-
946
- .icon-color--secondary {
947
- --color--icon: $color--secondary; }
948
-
949
- .icon-color--text-primary {
950
- --color--icon: var(--text--primary); }
951
-
952
- .icon-color--text-secondary {
953
- --color--icon: var(--text--secondary); }
954
-
955
- .icon-color--text-inverted {
956
- --color--icon: var(--text--inverted); }
957
-
958
- .icon-color--title {
959
- --color--icon: var(--title--primary); }
960
-
961
- .icon-color--title-inverted {
962
- --color--icon: var(--text--inverted); }
963
-
964
- /* Classes modificadoras de tamanho */
965
- .icon--tab {
966
- fill: #d3d7dd; }
967
-
968
- .icon--loading {
969
- -webkit-animation: rotation .6s infinite linear;
970
- animation: rotation .6s infinite linear; }
971
-
972
- @-webkit-keyframes rotation {
973
- from {
974
- -webkit-transform: rotate(0deg); }
975
- to {
976
- -webkit-transform: rotate(359deg); } }
977
-
978
- @keyframes rotation {
979
- from {
980
- transform: rotate(0deg); }
981
- to {
982
- transform: rotate(359deg); } }
983
-
984
- .icon--extra-small {
985
- width: 8px;
986
- height: 8px; }
987
-
988
- .icon--extra-small svg {
989
- width: 8px;
990
- height: 8px; }
991
-
992
- .icon--small {
993
- width: 16px;
994
- height: 16px; }
995
-
996
- .icon--medium {
997
- width: 24px;
998
- height: 24px; }
999
-
1000
- .icon--large {
1001
- width: 32px;
1002
- height: 32px; }
1003
-
1004
- .icon--extra-large {
1005
- width: 48px;
1006
- height: 48px; }
1007
-
1008
- /* Elementos especificos */
1009
- .icon--top-bar-user {
1010
- width: 40px;
1011
- height: 40px;
1012
- border-radius: 100%;
1013
- background-color: #dce0e8;
1014
- overflow: hidden; }
1015
-
1016
- .icon--logo {
1017
- width: 45px;
1018
- height: 48px; }
1019
-
1020
- @media only screen and (min-width: 768px) {
1021
- .icon--logo {
1022
- width: 49px;
1023
- height: 53px; } }
1024
-
1025
- .tab__badge {
1026
- background-color: #008561;
1027
- color: #f2faf8;
1028
- font-family: "Sora", "Algerian";
1029
- font-size: 12px;
1030
- font-weight: 600;
1031
- border-radius: 12px;
1032
- display: flex;
1033
- justify-content: center;
1034
- align-items: center;
1035
- padding: 0 6px; }
1036
-
1037
- .text__area__input-inverted {
1038
- --ta__input--border-color: #DCE0E8;
1039
- --ta__input--background-color: #FFFFFF; }
1040
-
1041
- .time__input-inverted {
1042
- --time-input__input--border-color: #DCE0E8;
1043
- --time-input__input--background-color: #FFFFFF; }
1044
-
1045
- .number__input__input-inverted {
1046
- --ez-number-input__input--border-color: #DCE0E8;
1047
- --ez-number-input__input--background-color: #FFFFFF; }
1048
-
1049
- .combobox {
1262
+ .combobox {
1050
1263
  display: flex;
1051
1264
  position: relative;
1052
1265
  width: 100%;
@@ -1096,69 +1309,240 @@ div {
1096
1309
  --combo-box__input--border-color: #DCE0E8;
1097
1310
  --combo-box__input--background-color: #FFFFFF; }
1098
1311
 
1099
- .date__input-inverted {
1100
- --ez-date-input__input--border-color: #DCE0E8;
1101
- --ez-date-input__input--background-color: #FFFFFF; }
1102
-
1103
- .status-field {
1312
+ .credentials {
1313
+ border: 2px #dce0e8;
1104
1314
  display: flex;
1105
- justify-content: center;
1315
+ flex-wrap: wrap;
1316
+ background-color: #fff;
1317
+ width: 100%;
1106
1318
  border-radius: 12px;
1107
- font-size: 14px;
1108
- font-family: "Sora", "Algerian";
1109
- padding: 3px 12px; }
1110
-
1111
- .status-field--cold {
1112
- background-color: #E1E9FF;
1113
- color: #042eff; }
1114
-
1115
- .status-field--success {
1116
- background-color: #E7F6E0;
1117
- color: #157A00; }
1319
+ text-decoration: none;
1320
+ color: #626e82; }
1321
+ .credentials .credentials__container {
1322
+ display: flex;
1323
+ width: 100%; }
1324
+ .credentials .credentials__picture {
1325
+ display: flex;
1326
+ justify-content: center;
1327
+ align-items: center;
1328
+ margin: 12px;
1329
+ max-width: 64px;
1330
+ max-height: 64px;
1331
+ border-radius: 100%;
1332
+ background-color: #e6e6e6;
1333
+ overflow: hidden; }
1334
+ .credentials .credentials__picture img {
1335
+ width: 100%;
1336
+ height: 100%; }
1337
+ .credentials .credentials__id {
1338
+ display: flex;
1339
+ flex-wrap: wrap;
1340
+ max-width: 70%;
1341
+ margin: 12px; }
1342
+ .credentials .credentials__item {
1343
+ width: 100%; }
1118
1344
 
1119
- .status-field--warning {
1120
- background-color: #fff7d5;
1121
- color: #8c6b00; }
1345
+ .credentials--no-border {
1346
+ border: none; }
1122
1347
 
1123
- .status-field--warm {
1124
- background-color: #feede3;
1125
- color: #cf3105; }
1348
+ .credentials__footer {
1349
+ display: flex;
1350
+ flex-wrap: wrap;
1351
+ align-items: center;
1352
+ padding: 12px;
1353
+ background-color: #f0f3f7;
1354
+ width: 100%; }
1126
1355
 
1127
- .status-field--error {
1128
- background-color: #F7E0E5;
1129
- color: #BD0025; }
1356
+ .date__input-inverted {
1357
+ --ez-date-input__input--border-color: #DCE0E8;
1358
+ --ez-date-input__input--background-color: #FFFFFF; }
1130
1359
 
1131
- .ez-search--input-inverted {
1132
- --srch__input--border-color: #DCE0E8;
1133
- --srch__input--background-color: #FFFFFF; }
1360
+ .divider-horizontal {
1361
+ width: 100%;
1362
+ height: 0;
1363
+ margin-left: 0;
1364
+ margin-right: 0;
1365
+ background: none;
1366
+ border: none;
1367
+ border-bottom: 2px solid #f2f5f8; }
1134
1368
 
1135
- /**
1136
- ****************************
1137
- * Generic Styles
1138
- ****************************
1139
- */
1140
- ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
1141
- display: block; }
1369
+ .divider-vertical {
1370
+ width: 0;
1371
+ height: auto;
1372
+ margin-top: 0;
1373
+ margin-bottom: 0;
1374
+ background: none;
1375
+ border: none;
1376
+ border-left: 2px solid #f2f5f8; }
1142
1377
 
1143
- .ag-hidden {
1144
- display: none !important; }
1378
+ .divider--dark {
1379
+ border-color: #dce0e8; }
1145
1380
 
1146
- .ag-invisible {
1147
- visibility: hidden !important; }
1381
+ .drag-upload {
1382
+ display: flex;
1383
+ flex-direction: column;
1384
+ position: relative;
1385
+ width: 100%;
1386
+ margin: 12px 0 24px 0; }
1148
1387
 
1149
- .ag-drag-handle {
1150
- cursor: move;
1151
- cursor: grab; }
1388
+ .drag-upload__container {
1389
+ display: flex;
1390
+ flex-direction: column;
1391
+ justify-content: center;
1392
+ align-items: center;
1393
+ width: 100%;
1394
+ padding: 48px;
1395
+ outline: 2px dashed #dce0e8;
1396
+ outline-offset: -10px;
1397
+ background-color: #fff; }
1152
1398
 
1153
- .ag-column-drop-wrapper {
1154
- display: flex; }
1399
+ .drag-upload__input {
1400
+ width: 0.1px;
1401
+ height: 0.1px;
1402
+ opacity: 0;
1403
+ overflow: hidden;
1404
+ position: absolute;
1405
+ z-index: -1; }
1155
1406
 
1156
- .ag-column-drop-horizontal-half-width {
1407
+ .drag-upload__label {
1408
+ max-width: 80%;
1409
+ text-overflow: ellipsis;
1410
+ cursor: pointer;
1157
1411
  display: inline-block;
1158
- width: 50% !important; }
1412
+ overflow: hidden; }
1159
1413
 
1160
- .ag-unselectable {
1161
- -moz-user-select: none;
1414
+ .drag-upload__button {
1415
+ display: none; }
1416
+
1417
+ .drag-upload__info {
1418
+ display: flex;
1419
+ flex-wrap: wrap;
1420
+ width: 100%;
1421
+ margin: 24px 0;
1422
+ padding: 0;
1423
+ list-style: none; }
1424
+
1425
+ .drag-upload__item {
1426
+ display: flex;
1427
+ flex-wrap: wrap;
1428
+ width: 100%;
1429
+ margin: 6px 0;
1430
+ padding: 6px;
1431
+ list-style: none;
1432
+ background-color: #BD0025;
1433
+ background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.025) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.025) 50%, rgba(0, 0, 0, 0.025) 75%, transparent 75%, transparent);
1434
+ background-size: 64px 64px; }
1435
+ .drag-upload__item .text {
1436
+ color: white; }
1437
+
1438
+ .is-dragover {
1439
+ outline: 2px dashed #fff;
1440
+ background-color: #e4eaf1; }
1441
+ .is-dragover .text {
1442
+ color: #fff; }
1443
+
1444
+ .flap {
1445
+ display: flex;
1446
+ width: 100%;
1447
+ flex-wrap: wrap;
1448
+ position: relative; }
1449
+
1450
+ .flap__header {
1451
+ width: 100%;
1452
+ display: flex;
1453
+ padding: 0; }
1454
+
1455
+ .flap__header-item {
1456
+ display: flex;
1457
+ justify-content: center;
1458
+ margin: 6px 6px -2px 0;
1459
+ list-style: none;
1460
+ font-family: "Sora", "Algerian";
1461
+ font-size: 12px;
1462
+ min-width: 50px;
1463
+ color: #a2abb9;
1464
+ align-items: center;
1465
+ padding: 12px;
1466
+ padding-right: 24px;
1467
+ background-color: #fff;
1468
+ border: none;
1469
+ text-shadow: 0 0 0 #353535, 0 0 1px transparent;
1470
+ cursor: pointer; }
1471
+ @media only screen and (min-width: 768px) {
1472
+ .flap__header-item .text {
1473
+ display: flex; } }
1474
+ .flap__header-item .image {
1475
+ opacity: 0.4;
1476
+ max-width: 40px; }
1477
+ .flap__header-item.is-active {
1478
+ font-weight: 600;
1479
+ background-color: #fff;
1480
+ border-top-left-radius: 12px;
1481
+ border-top-right-radius: 12px;
1482
+ box-shadow: 2px -3px 4px -1px rgba(0, 0, 0, 0.1);
1483
+ z-index: 1; }
1484
+ .flap__header-item.is-active .text {
1485
+ color: #2b3a54;
1486
+ font-size: 14px; }
1487
+ .flap__header-item.is-active .image {
1488
+ opacity: 1; }
1489
+ .flap__header-item.is-active svg {
1490
+ fill: #a7afbd; }
1491
+ .flap__header-item:focus {
1492
+ outline: none; }
1493
+
1494
+ .flap__container {
1495
+ display: flex;
1496
+ flex-wrap: wrap;
1497
+ width: 100%;
1498
+ position: relative;
1499
+ background-color: #fff;
1500
+ box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.1); }
1501
+ .flap__container .flap__container-item {
1502
+ padding: 12px;
1503
+ display: flex;
1504
+ width: 100%;
1505
+ flex-wrap: wrap; }
1506
+ .flap__container .flap__container-footer {
1507
+ display: flex;
1508
+ flex-wrap: wrap;
1509
+ align-items: center;
1510
+ padding: 12px;
1511
+ background-color: #fff;
1512
+ width: 100%; }
1513
+
1514
+ form {
1515
+ display: flex;
1516
+ width: 100%;
1517
+ flex-wrap: wrap; }
1518
+
1519
+ /**
1520
+ ****************************
1521
+ * Generic Styles
1522
+ ****************************
1523
+ */
1524
+ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
1525
+ display: block; }
1526
+
1527
+ .ag-hidden {
1528
+ display: none !important; }
1529
+
1530
+ .ag-invisible {
1531
+ visibility: hidden !important; }
1532
+
1533
+ .ag-drag-handle {
1534
+ cursor: move;
1535
+ cursor: grab; }
1536
+
1537
+ .ag-column-drop-wrapper {
1538
+ display: flex; }
1539
+
1540
+ .ag-column-drop-horizontal-half-width {
1541
+ display: inline-block;
1542
+ width: 50% !important; }
1543
+
1544
+ .ag-unselectable {
1545
+ -moz-user-select: none;
1162
1546
  -webkit-user-select: none;
1163
1547
  -ms-user-select: none;
1164
1548
  user-select: none; }
@@ -6979,12 +7363,11 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
6979
7363
  display: none; }
6980
7364
  .ag-sankhya-theme .ag-tabs-header.ag-menu-header {
6981
7365
  display: none; }
6982
- .ag-sankhya-theme .ag-row-selected,
6983
- .ag-sankhya-theme .ag-row-focus {
7366
+ .ag-sankhya-theme .ag-row-selected {
6984
7367
  background-color: var(--background--strong); }
6985
7368
  .ag-sankhya-theme .ag-row-hover {
6986
7369
  background-color: var(--background--medium); }
6987
- .ag-sankhya-theme .ag-row-focus.ag-row-hover {
7370
+ .ag-sankhya-theme .ag-row-hover {
6988
7371
  background-color: var(--background--strong); }
6989
7372
  .ag-sankhya-theme .ag-root-wrapper {
6990
7373
  border-bottom-right-radius: var(--border--radius-medium);
@@ -7061,10 +7444,10 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
7061
7444
  border: none;
7062
7445
  background-color: var(--background--medium); }
7063
7446
  .ag-sankhya-theme .ag-ltr .ag-has-focus .ag-cell-focus:not(.ag-cell-range-selected) {
7064
- border-right: 2px solid var(--color--strokes);
7065
- border-left: 1px solid transparent;
7066
- border-top: 1px solid transparent;
7067
- border-bottom: 1px solid transparent;
7447
+ border-right: var(--border--small) transparent;
7448
+ border-left: var(--border--small) transparent;
7449
+ border-top: var(--border--small) transparent;
7450
+ border-bottom: var(--border--small) transparent;
7068
7451
  outline: none; }
7069
7452
  .ag-sankhya-theme .ag-row-odd {
7070
7453
  border-bottom: var(--border--small) var(--color--strokes); }
@@ -7184,4 +7567,1181 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
7184
7567
  background-color: var(--title--primary);
7185
7568
  border-radius: var(--space--extra-small); }
7186
7569
  .ag-sankhya-theme .ag-checkbox-input-wrapper.ag-checked > input[type="checkbox"]:before {
7187
- border: var(--border--medium) solid var(--color--primary); }
7570
+ border: var(--border--medium) var(--color--primary); }
7571
+
7572
+ .header {
7573
+ display: flex;
7574
+ flex-wrap: wrap;
7575
+ align-items: center;
7576
+ align-content: center;
7577
+ align-self: center;
7578
+ box-sizing: border-box;
7579
+ width: 100%;
7580
+ max-width: 100%;
7581
+ padding: 12px 24px;
7582
+ background-color: #fff;
7583
+ z-index: 2;
7584
+ box-shadow: 0px 0px 16px 0px rgba(0, 38, 111, 0.12); }
7585
+ .header .input--inverse {
7586
+ border: 2px solid transparent;
7587
+ height: 30px;
7588
+ transition: 0.2s linear; }
7589
+ .header .input--inverse:focus {
7590
+ border-bottom: 2px #da3688; }
7591
+
7592
+ .logo {
7593
+ width: 160px; }
7594
+
7595
+ .top-bar__user-item {
7596
+ display: flex;
7597
+ justify-content: center;
7598
+ align-items: center;
7599
+ border-radius: 100%;
7600
+ overflow: hidden;
7601
+ background-color: #fff; }
7602
+
7603
+ /* Classes padrões */
7604
+ .icon {
7605
+ display: flex; }
7606
+
7607
+ /* Classes modificadoras de cor */
7608
+ .icon-color--primary {
7609
+ --color--icon: $color--primary; }
7610
+
7611
+ .icon-color--secondary {
7612
+ --color--icon: $color--secondary; }
7613
+
7614
+ .icon-color--text-primary {
7615
+ --color--icon: var(--text--primary); }
7616
+
7617
+ .icon-color--text-secondary {
7618
+ --color--icon: var(--text--secondary); }
7619
+
7620
+ .icon-color--text-inverted {
7621
+ --color--icon: var(--text--inverted); }
7622
+
7623
+ .icon-color--title {
7624
+ --color--icon: var(--title--primary); }
7625
+
7626
+ .icon-color--title-inverted {
7627
+ --color--icon: var(--text--inverted); }
7628
+
7629
+ /* Classes modificadoras de tamanho */
7630
+ .icon--tab {
7631
+ fill: #d3d7dd; }
7632
+
7633
+ .icon--loading {
7634
+ -webkit-animation: rotation .6s infinite linear;
7635
+ animation: rotation .6s infinite linear; }
7636
+
7637
+ @-webkit-keyframes rotation {
7638
+ from {
7639
+ -webkit-transform: rotate(0deg); }
7640
+ to {
7641
+ -webkit-transform: rotate(359deg); } }
7642
+
7643
+ @keyframes rotation {
7644
+ from {
7645
+ transform: rotate(0deg); }
7646
+ to {
7647
+ transform: rotate(359deg); } }
7648
+
7649
+ .icon--extra-small {
7650
+ width: 8px;
7651
+ height: 8px; }
7652
+
7653
+ .icon--extra-small svg {
7654
+ width: 8px;
7655
+ height: 8px; }
7656
+
7657
+ .icon--small {
7658
+ width: 16px;
7659
+ height: 16px; }
7660
+
7661
+ .icon--medium {
7662
+ width: 24px;
7663
+ height: 24px; }
7664
+
7665
+ .icon--large {
7666
+ width: 32px;
7667
+ height: 32px; }
7668
+
7669
+ .icon--extra-large {
7670
+ width: 48px;
7671
+ height: 48px; }
7672
+
7673
+ /* Elementos especificos */
7674
+ .icon--top-bar-user {
7675
+ width: 40px;
7676
+ height: 40px;
7677
+ border-radius: 100%;
7678
+ background-color: #dce0e8;
7679
+ overflow: hidden; }
7680
+
7681
+ .icon--logo {
7682
+ width: 45px;
7683
+ height: 48px; }
7684
+
7685
+ @media only screen and (min-width: 768px) {
7686
+ .icon--logo {
7687
+ width: 49px;
7688
+ height: 53px; } }
7689
+
7690
+ .identifier {
7691
+ display: flex;
7692
+ flex-wrap: wrap;
7693
+ width: 100%;
7694
+ justify-content: space-between;
7695
+ border-bottom: 2px darkgray;
7696
+ background-color: #fff;
7697
+ border-top-left-radius: 12px;
7698
+ border-top-right-radius: 12px; }
7699
+
7700
+ .identifier__item {
7701
+ display: flex;
7702
+ flex-wrap: wrap;
7703
+ justify-content: center;
7704
+ font-family: "Sora", "Algerian";
7705
+ margin: 12px; }
7706
+ .identifier__item .identifier__title {
7707
+ font-size: 12px;
7708
+ margin: 0;
7709
+ width: 100%;
7710
+ font-weight: 200;
7711
+ text-shadow: 0 0 0 #353535, 0 0 1px transparent; }
7712
+ .identifier__item .identifier__description {
7713
+ font-size: 14px;
7714
+ font-weight: 600;
7715
+ margin: 0;
7716
+ width: 100%; }
7717
+
7718
+ .text__input-inverted {
7719
+ --ez-text-input__input--border-color: var(--color--strokes);
7720
+ --ez-text-input__input--background-color: var(--background--xlight); }
7721
+
7722
+ .inverted {
7723
+ --ez-text-input__input--border-color: var(--color--strokes);
7724
+ --ez-text-input__input--background-color: var(--background--xlight);
7725
+ --text-area__input--border-color: var(--color--strokes);
7726
+ --text-area__input--background-color: var(--background--xlight); }
7727
+
7728
+ .lane {
7729
+ display: flex;
7730
+ flex-wrap: wrap;
7731
+ width: 100%;
7732
+ align-items: flex-start; }
7733
+ @media only screen and (min-width: 992px) {
7734
+ .lane {
7735
+ flex-wrap: nowrap; } }
7736
+
7737
+ .lane__box {
7738
+ display: flex;
7739
+ flex-wrap: wrap;
7740
+ align-items: flex-start;
7741
+ align-content: flex-start;
7742
+ justify-content: space-between;
7743
+ width: 100%;
7744
+ margin: 6px 0;
7745
+ background-color: #fff;
7746
+ padding: 12px;
7747
+ border-radius: 12px;
7748
+ border-top: 3px; }
7749
+ @media only screen and (min-width: 992px) {
7750
+ .lane__box {
7751
+ margin: 6px; } }
7752
+
7753
+ .lane__box--act-I {
7754
+ border-top-color: #008561; }
7755
+
7756
+ .lane__box--act-II {
7757
+ border-top-color: #da3688; }
7758
+
7759
+ .lane__box--act-III {
7760
+ border-top-color: #543178; }
7761
+
7762
+ .lane__box--act-IV {
7763
+ border-top-color: #383c45; }
7764
+
7765
+ .lane__box--act-V {
7766
+ border-top-color: #157A00; }
7767
+
7768
+ .leads {
7769
+ display: flex;
7770
+ flex-wrap: wrap;
7771
+ width: 100%;
7772
+ margin: 6px 0;
7773
+ background-color: #fff;
7774
+ border-radius: 12px;
7775
+ padding: 12px;
7776
+ text-decoration: none; }
7777
+ @media only screen and (min-width: 480px) {
7778
+ .leads {
7779
+ width: 49.5%; } }
7780
+ @media only screen and (min-width: 768px) {
7781
+ .leads {
7782
+ width: 32.5%; } }
7783
+ @media only screen and (min-width: 992px) {
7784
+ .leads {
7785
+ width: unset;
7786
+ margin: 6px 0; } }
7787
+
7788
+ .leads__alert {
7789
+ width: 60px;
7790
+ height: 5px;
7791
+ border-radius: 12px;
7792
+ margin-bottom: 12px; }
7793
+
7794
+ .leads__alert--expired {
7795
+ background-color: #BD0025; }
7796
+
7797
+ .leads__icon--expired {
7798
+ fill: #BD0025;
7799
+ color: #BD0025; }
7800
+
7801
+ .leads__alert--expiring {
7802
+ background-color: #efb103; }
7803
+
7804
+ .leads__icon--expiring {
7805
+ fill: #efb103;
7806
+ color: #efb103; }
7807
+
7808
+ .leads-footer {
7809
+ display: flex;
7810
+ justify-content: flex-start;
7811
+ flex-wrap: wrap;
7812
+ width: 100%;
7813
+ align-items: center;
7814
+ align-content: center;
7815
+ margin-top: 12px; }
7816
+
7817
+ .leads__id {
7818
+ display: flex;
7819
+ justify-content: center;
7820
+ align-items: center;
7821
+ max-width: 24px;
7822
+ max-height: 24px;
7823
+ border-radius: 100%;
7824
+ background-color: #e6e6e6;
7825
+ overflow: hidden; }
7826
+ .leads__id img {
7827
+ width: 100%;
7828
+ height: 100%; }
7829
+
7830
+ .leads__footer-item {
7831
+ display: flex;
7832
+ flex-grow: 1;
7833
+ align-items: center;
7834
+ align-content: center;
7835
+ padding: 6px; }
7836
+
7837
+ .link {
7838
+ cursor: pointer;
7839
+ font-family: "Sora", "Algerian";
7840
+ text-decoration: none;
7841
+ display: flex;
7842
+ align-items: center;
7843
+ font-weight: 400; }
7844
+ .link:hover {
7845
+ text-decoration: underline; }
7846
+ .link--primary {
7847
+ color: #00523c;
7848
+ font-weight: 600; }
7849
+ .link--primary svg {
7850
+ fill: #00523c;
7851
+ opacity: 0.7; }
7852
+ .link--secondary {
7853
+ color: #7E7E7E; }
7854
+ .link--secondary svg {
7855
+ fill: #7E7E7E;
7856
+ opacity: 0.7; }
7857
+ .link--tertiary {
7858
+ color: #da3688; }
7859
+ .link--tertiary svg {
7860
+ fill: #da3688; }
7861
+ .link--inverted {
7862
+ color: #fff; }
7863
+ .link--inverted svg {
7864
+ fill: #fff; }
7865
+
7866
+ .link-button {
7867
+ display: flex;
7868
+ align-items: center;
7869
+ height: 20px;
7870
+ font-size: 14px;
7871
+ font-family: "Sora", "Algerian";
7872
+ padding: 6px 12px;
7873
+ border-radius: 12px;
7874
+ border: 0;
7875
+ margin: 6px 0;
7876
+ justify-content: center;
7877
+ cursor: pointer;
7878
+ text-decoration: none; }
7879
+ .link-button--primary {
7880
+ background-color: #008561;
7881
+ color: #fff;
7882
+ height: 24px;
7883
+ min-width: 100px; }
7884
+ .link-button--primary svg {
7885
+ fill: #fff; }
7886
+ .link-button--primary:focus {
7887
+ outline: none;
7888
+ border: 1px #fff;
7889
+ box-shadow: 0 0 0 2px #008561; }
7890
+ .link-button--primary:hover {
7891
+ background-color: #00523c;
7892
+ transition: background-color 0.2s linear;
7893
+ text-decoration: underline; }
7894
+ .link-button--secondary {
7895
+ background-color: #fff;
7896
+ color: #008561;
7897
+ border: 1px #008561; }
7898
+ .link-button--secondary svg {
7899
+ fill: #008561; }
7900
+ .link-button--secondary:focus {
7901
+ outline: none;
7902
+ border: 1px #fff;
7903
+ box-shadow: 0 0 0 2px #008561; }
7904
+ .link-button--secondary:hover {
7905
+ background-color: #e6e6e6;
7906
+ transition: background-color 0.2s linear;
7907
+ text-decoration: underline; }
7908
+ .link-button--tertiary {
7909
+ background-color: #383c45;
7910
+ color: #003929; }
7911
+ .link-button--tertiary svg {
7912
+ fill: #003929; }
7913
+ .link-button--tertiary:focus {
7914
+ outline: none;
7915
+ border: 1px #fff;
7916
+ box-shadow: 0 0 0 2px #003929; }
7917
+ .link-button--tertiary:hover {
7918
+ background-color: #16171b;
7919
+ transition: background-color 0.2s linear;
7920
+ text-decoration: underline; }
7921
+ .link-button--full {
7922
+ width: 100%; }
7923
+ .link-button--bold {
7924
+ font-weight: 400; }
7925
+
7926
+ .link- {
7927
+ justify-content: space-between; }
7928
+ .link- span {
7929
+ flex-grow: 1; }
7930
+
7931
+ .loading {
7932
+ display: flex;
7933
+ width: 100%;
7934
+ min-height: 50px;
7935
+ justify-content: center;
7936
+ align-items: center; }
7937
+
7938
+ .loading__element {
7939
+ width: 20px;
7940
+ height: 20px;
7941
+ border-radius: 50%;
7942
+ color: #008561;
7943
+ background-color: currentColor;
7944
+ margin: 12px;
7945
+ animation: loading 1.5s infinite linear; }
7946
+
7947
+ .loading--animation-first {
7948
+ animation-delay: 0s; }
7949
+
7950
+ .loading--animation-second {
7951
+ animation-delay: -1s; }
7952
+
7953
+ .loading--animation-third {
7954
+ animation-delay: -.5s; }
7955
+
7956
+ @keyframes loading {
7957
+ 0% {
7958
+ transform: translateY(0); }
7959
+ 25% {
7960
+ transform: translateY(5px);
7961
+ background-color: #e5eaf0; }
7962
+ 50% {
7963
+ transform: translateY(0);
7964
+ background-color: #e5eaf0; }
7965
+ 75% {
7966
+ transform: translateY(5px);
7967
+ background-color: #e5eaf0; }
7968
+ 100% {
7969
+ transform: translateY(0);
7970
+ background-color: #e5eaf0; } }
7971
+
7972
+ .navigation {
7973
+ display: flex;
7974
+ align-items: center;
7975
+ flex-wrap: wrap;
7976
+ position: fixed;
7977
+ bottom: 0;
7978
+ width: 100%;
7979
+ height: 60px;
7980
+ background-color: #008561;
7981
+ overflow: hidden;
7982
+ z-index: 3;
7983
+ box-shadow: 0px 0px 16px 0px rgba(0, 38, 111, 0.12); }
7984
+ @media only screen and (min-width: 768px) {
7985
+ .navigation {
7986
+ width: 95px;
7987
+ height: 100%;
7988
+ flex-direction: column; } }
7989
+
7990
+ .navigation__item {
7991
+ display: flex;
7992
+ align-items: center;
7993
+ justify-content: center;
7994
+ align-content: center;
7995
+ flex-wrap: wrap;
7996
+ height: 56px;
7997
+ flex-grow: 1;
7998
+ min-width: 56px;
7999
+ text-decoration: none; }
8000
+ @media only screen and (min-width: 768px) {
8001
+ .navigation__item {
8002
+ flex-grow: 0;
8003
+ height: 85px;
8004
+ opacity: 0.9;
8005
+ width: 100%; } }
8006
+ .navigation__item .navigation__icon {
8007
+ width: 40px;
8008
+ height: 40px; }
8009
+ @media only screen and (min-width: 768px) {
8010
+ .navigation__item .navigation__icon {
8011
+ width: 45px;
8012
+ height: 45px; } }
8013
+ .navigation__item:hover {
8014
+ background-color: white;
8015
+ transition: background-color 0.2s linear; }
8016
+ .navigation__item.is-active {
8017
+ border-top: 4px solid #383c45;
8018
+ background-color: #00523c; }
8019
+ @media only screen and (min-width: 768px) {
8020
+ .navigation__item.is-active {
8021
+ border-right: 4px solid #383c45;
8022
+ border-top: none;
8023
+ width: 91px;
8024
+ opacity: 1; } }
8025
+ .navigation__item.is-active .navigation__title {
8026
+ font-weight: 500; }
8027
+
8028
+ .navigation__logo {
8029
+ display: none;
8030
+ text-decoration: none; }
8031
+ @media only screen and (min-width: 768px) {
8032
+ .navigation__logo {
8033
+ display: flex;
8034
+ flex-wrap: wrap;
8035
+ justify-content: center;
8036
+ flex-grow: 0;
8037
+ width: 100%;
8038
+ margin: 12px 0;
8039
+ position: absolute;
8040
+ bottom: 6px; } }
8041
+
8042
+ .navigation__title {
8043
+ display: none;
8044
+ width: 100%;
8045
+ font-family: "Sora", "Algerian";
8046
+ font-size: 12px;
8047
+ color: #fff;
8048
+ text-align: center;
8049
+ word-break: break-all;
8050
+ padding: 0 6px; }
8051
+ @media only screen and (min-width: 768px) {
8052
+ .navigation__title {
8053
+ display: block; } }
8054
+
8055
+ .navigation__user {
8056
+ display: flex;
8057
+ justify-content: center;
8058
+ flex-wrap: wrap;
8059
+ flex-grow: 1;
8060
+ position: relative;
8061
+ text-decoration: none; }
8062
+ .navigation__user .navigation__name {
8063
+ display: none;
8064
+ width: 100%;
8065
+ margin-top: 5px;
8066
+ padding: 0 5px;
8067
+ overflow: hidden;
8068
+ word-break: break-all; }
8069
+ .navigation__user .navigation__user-item {
8070
+ display: flex;
8071
+ justify-content: center;
8072
+ align-items: center;
8073
+ width: 45px;
8074
+ height: 45px;
8075
+ border-radius: 100%;
8076
+ overflow: hidden;
8077
+ background-color: #fff; }
8078
+ @media only screen and (min-width: 768px) {
8079
+ .navigation__user {
8080
+ flex-grow: 0;
8081
+ margin: 24px 0; }
8082
+ .navigation__user .navigation__user-item {
8083
+ width: 60px;
8084
+ height: 60px; }
8085
+ .navigation__user .navigation__name {
8086
+ display: block; } }
8087
+
8088
+ .navigation__notification {
8089
+ display: flex;
8090
+ flex-wrap: wrap;
8091
+ justify-content: center;
8092
+ align-items: center;
8093
+ position: absolute;
8094
+ right: 5%;
8095
+ top: 25px;
8096
+ border-radius: 100%;
8097
+ background-color: #BD0025;
8098
+ width: 20px;
8099
+ height: 20px; }
8100
+ @media only screen and (min-width: 480px) {
8101
+ .navigation__notification {
8102
+ right: 25%; } }
8103
+ @media only screen and (min-width: 768px) {
8104
+ .navigation__notification {
8105
+ top: 40px;
8106
+ right: 10px; } }
8107
+
8108
+ .navigation__version {
8109
+ font-family: "Sora", "Algerian";
8110
+ font-size: 10px;
8111
+ color: #85ffde;
8112
+ text-decoration: none; }
8113
+
8114
+ .n-progress {
8115
+ display: flex;
8116
+ position: fixed;
8117
+ top: 0;
8118
+ left: 0;
8119
+ height: 6px;
8120
+ width: 0%;
8121
+ background-color: #00523c;
8122
+ animation: nprogress 4s linear infinite;
8123
+ z-index: 2;
8124
+ box-shadow: 0px 0px 16px 0px rgba(0, 38, 111, 0.12); }
8125
+
8126
+ .number__input__input-inverted {
8127
+ --ez-number-input__input--border-color: #DCE0E8;
8128
+ --ez-number-input__input--background-color: #FFFFFF; }
8129
+
8130
+ .page-header {
8131
+ display: flex;
8132
+ flex-wrap: wrap;
8133
+ width: 100%;
8134
+ padding: 12px;
8135
+ box-sizing: border-box; }
8136
+
8137
+ @media only screen and (min-width: 768px) {
8138
+ .page-header--menu {
8139
+ margin-left: 95px;
8140
+ padding: 12px 24px; } }
8141
+
8142
+ .pagination {
8143
+ display: flex;
8144
+ justify-content: center;
8145
+ width: 100%; }
8146
+
8147
+ .pagination__item {
8148
+ display: flex;
8149
+ justify-content: center;
8150
+ margin: 6px;
8151
+ background-color: #fff;
8152
+ min-width: 35px;
8153
+ color: #00523c;
8154
+ fill: #00523c;
8155
+ font-weight: 600;
8156
+ align-items: center;
8157
+ height: 36px;
8158
+ font-size: 14px;
8159
+ font-family: "Sora", "Algerian";
8160
+ padding: 6px 12px;
8161
+ border-radius: 12px;
8162
+ cursor: pointer;
8163
+ text-decoration: none;
8164
+ border-style: none;
8165
+ border-width: unset; }
8166
+ .pagination__item.is-disabled {
8167
+ background-color: #e5eaf0;
8168
+ color: #98a2b2;
8169
+ border: none;
8170
+ cursor: no-drop;
8171
+ transition: background-color, color, 0.2s linear; }
8172
+ .pagination__item.is-disabled svg {
8173
+ fill: #98a2b2;
8174
+ transition: fill, 0.2s linear; }
8175
+ .pagination__item.is-disabled:focus {
8176
+ border: 0;
8177
+ box-shadow: none; }
8178
+ .pagination__item.is-disabled:hover {
8179
+ background-color: #e5eaf0;
8180
+ color: #98a2b2;
8181
+ fill: #98a2b2; }
8182
+ .pagination__item.is-active {
8183
+ background-color: #00523c;
8184
+ color: #fff;
8185
+ fill: #fff; }
8186
+ .pagination__item.is-active:hover {
8187
+ background-color: #001f17;
8188
+ color: #fff;
8189
+ fill: #fff; }
8190
+ .pagination__item:hover {
8191
+ background-color: #f2faf8; }
8192
+
8193
+ .pill {
8194
+ display: flex;
8195
+ width: 100%;
8196
+ flex-wrap: wrap;
8197
+ align-items: flex-start;
8198
+ border-left: 2px #dce0e8;
8199
+ border-right: 2px #dce0e8;
8200
+ border-bottom: 2px #dce0e8;
8201
+ padding: 6px;
8202
+ background-color: #fff; }
8203
+
8204
+ .pill--no-border {
8205
+ border: none;
8206
+ padding: 0; }
8207
+
8208
+ .pill__item {
8209
+ display: flex;
8210
+ justify-content: space-between;
8211
+ align-items: center;
8212
+ background-color: #f2faf8;
8213
+ color: #00523c;
8214
+ font-weight: 400;
8215
+ font-size: 12px;
8216
+ border: none;
8217
+ border-radius: 12px;
8218
+ padding: 12px;
8219
+ margin: 6px;
8220
+ cursor: pointer; }
8221
+ .pill__item span {
8222
+ flex-grow: 1; }
8223
+ .pill__item svg {
8224
+ fill: #a5afc4; }
8225
+ .pill__item:focus {
8226
+ outline: none;
8227
+ border: 1px #fff;
8228
+ box-shadow: 0 0 0 2px #008561; }
8229
+ .pill__item:hover {
8230
+ background-color: #39ffc9;
8231
+ transition: background-color 0.2s linear; }
8232
+
8233
+ .progress-indicator {
8234
+ display: flex;
8235
+ flex-wrap: wrap;
8236
+ width: 100%;
8237
+ box-shadow: 0px 0px 16px 0px rgba(0, 38, 111, 0.12); }
8238
+
8239
+ .progress-indicator__header {
8240
+ display: flex;
8241
+ flex-wrap: wrap;
8242
+ width: 100%;
8243
+ margin-bottom: 12px;
8244
+ padding: 12px;
8245
+ box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
8246
+ background-color: #fff; }
8247
+ .progress-indicator__header .progress-indicator__item {
8248
+ display: none;
8249
+ align-items: center;
8250
+ font-family: "Sora", "Algerian";
8251
+ font-size: 12px;
8252
+ margin: 12px;
8253
+ padding: 0;
8254
+ box-sizing: border-box;
8255
+ color: #e5eaf0;
8256
+ flex-grow: 1; }
8257
+ .progress-indicator__header .progress-indicator__item.is-active {
8258
+ display: flex; }
8259
+ .progress-indicator__header .progress-indicator__item.is-active .progress-indicator__numerator {
8260
+ background-color: #00523c;
8261
+ width: 48px;
8262
+ height: 48px;
8263
+ font-size: 16px; }
8264
+ .progress-indicator__header .progress-indicator__item.is-active span {
8265
+ color: #626e82;
8266
+ font-weight: 600;
8267
+ font-size: 14px; }
8268
+ .progress-indicator__header .progress-indicator__item.is-done .progress-indicator__numerator {
8269
+ background-color: #157A00; }
8270
+ .progress-indicator__header .progress-indicator__item.is-done span {
8271
+ color: #626e82;
8272
+ font-weight: 400; }
8273
+ @media only screen and (min-width: 992px) {
8274
+ .progress-indicator__header .progress-indicator__item {
8275
+ display: flex; } }
8276
+ .progress-indicator__header .progress-indicator__item .progress-indicator__numerator {
8277
+ display: flex;
8278
+ align-items: center;
8279
+ justify-content: center;
8280
+ border-radius: 100%;
8281
+ background-color: #dce0e8;
8282
+ width: 32px;
8283
+ height: 32px;
8284
+ margin-right: 6px;
8285
+ font-weight: 600;
8286
+ color: #fff; }
8287
+
8288
+ .progress-indicator__container {
8289
+ display: flex;
8290
+ flex-wrap: wrap;
8291
+ width: 100%;
8292
+ padding: 24px;
8293
+ position: relative;
8294
+ background-color: #fff; }
8295
+
8296
+ .progress-indicator__footer {
8297
+ display: flex;
8298
+ flex-wrap: wrap;
8299
+ width: 100%;
8300
+ background-color: #f0f3f7;
8301
+ padding: 12px; }
8302
+ .progress-indicator__footer .button {
8303
+ min-width: 130px; }
8304
+
8305
+ .sales-steps {
8306
+ display: flex;
8307
+ width: 100%;
8308
+ padding-right: 12px; }
8309
+
8310
+ .steps {
8311
+ display: flex;
8312
+ flex-grow: 1;
8313
+ justify-content: center;
8314
+ align-content: center;
8315
+ cursor: pointer;
8316
+ margin-right: 12px;
8317
+ padding: 12px;
8318
+ padding-left: 24px;
8319
+ position: relative;
8320
+ background-color: #e4eaf1;
8321
+ border-radius: 12px;
8322
+ height: 34px;
8323
+ max-width: 160px; }
8324
+ .steps .text {
8325
+ display: none; }
8326
+ .steps:after, .steps:before {
8327
+ content: " ";
8328
+ position: absolute;
8329
+ top: 0;
8330
+ right: -16px;
8331
+ width: 0;
8332
+ height: 0;
8333
+ border-top: 17px solid transparent;
8334
+ border-bottom: 17px solid transparent;
8335
+ border-left: 17px solid #e4eaf1;
8336
+ z-index: 1; }
8337
+ .steps:before {
8338
+ right: auto;
8339
+ left: 0;
8340
+ border-left: 17px solid #fff;
8341
+ z-index: 0; }
8342
+ .steps:first-child:before {
8343
+ border: none; }
8344
+ .steps:first-child {
8345
+ padding-left: 12px; }
8346
+ .steps.is-active {
8347
+ background-color: #008561;
8348
+ flex-grow: 8; }
8349
+ .steps.is-active .text {
8350
+ display: block;
8351
+ padding: 0 6px; }
8352
+ .steps.is-active:after {
8353
+ border-left: 17px solid #008561; }
8354
+ .steps.is-done {
8355
+ background-color: #157A00; }
8356
+ .steps.is-done:after {
8357
+ border-left: 17px solid #157A00; }
8358
+ @media only screen and (min-width: 768px) {
8359
+ .steps .text {
8360
+ display: block; } }
8361
+
8362
+ .scrollable-box {
8363
+ overflow-y: auto;
8364
+ align-content: flex-start; }
8365
+
8366
+ .scrollable-box--extra-small {
8367
+ height: 54px; }
8368
+
8369
+ .scrollable-box--small {
8370
+ height: 90px; }
8371
+
8372
+ .scrollable-box--medium {
8373
+ height: 250px; }
8374
+
8375
+ .scrollable-box--large {
8376
+ height: 576px; }
8377
+
8378
+ .scrollable-box--extra-large {
8379
+ height: 1152px; }
8380
+
8381
+ .ez-search--input-inverted {
8382
+ --srch__input--border-color: #DCE0E8;
8383
+ --srch__input--background-color: #FFFFFF; }
8384
+
8385
+ .skeleton {
8386
+ background: linear-gradient(to right, #f1f5f8 0%, #fafafa 97%, #f0f0f0 100%);
8387
+ animation: shine-lines 1.3s infinite linear;
8388
+ background-size: 200%; }
8389
+
8390
+ @keyframes shine-lines {
8391
+ 0% {
8392
+ background-position: 0%; }
8393
+ 100% {
8394
+ background-position: -100%; } }
8395
+
8396
+ .slide {
8397
+ display: flex;
8398
+ position: relative;
8399
+ width: 100%; }
8400
+ .slide__controls {
8401
+ display: flex;
8402
+ flex-wrap: wrap;
8403
+ justify-content: space-between;
8404
+ align-content: center;
8405
+ align-items: center;
8406
+ width: 100%;
8407
+ height: 100%;
8408
+ position: absolute; }
8409
+ .slide__bullets {
8410
+ display: flex;
8411
+ justify-content: center;
8412
+ width: 100%;
8413
+ position: absolute;
8414
+ bottom: 0;
8415
+ padding-bottom: 12px; }
8416
+ .slide__bullets .icon {
8417
+ height: 16px; }
8418
+ .slide__bullets:hover .button--icon {
8419
+ outline: none; }
8420
+ .slide__bullets:hover:focus {
8421
+ outline: none; }
8422
+ .slide .bullet__item {
8423
+ display: flex;
8424
+ align-items: center;
8425
+ justify-content: space-between;
8426
+ border: 0;
8427
+ border-radius: 3px;
8428
+ padding: 2px;
8429
+ cursor: pointer;
8430
+ background-color: unset;
8431
+ height: unset;
8432
+ opacity: 0.6;
8433
+ width: 16px;
8434
+ color: #fff; }
8435
+ .slide .bullet__item.is-active {
8436
+ opacity: 1;
8437
+ width: 22px; }
8438
+ .slide__item {
8439
+ height: 100%;
8440
+ overflow: hidden;
8441
+ width: 15%;
8442
+ display: flex;
8443
+ justify-content: center;
8444
+ min-width: 40px;
8445
+ border: 0;
8446
+ cursor: pointer;
8447
+ background-color: unset;
8448
+ align-items: center; }
8449
+ .slide__item:hover {
8450
+ outline: none; }
8451
+ .slide__item:focus {
8452
+ outline: none; }
8453
+ .slide__item:first-child {
8454
+ background-image: linear-gradient(to left, transparent, rgba(29, 51, 110, 0.3)); }
8455
+ .slide__item:last-child {
8456
+ background-image: linear-gradient(to right, transparent, rgba(29, 51, 110, 0.3)); }
8457
+ .slide__item.is-disabled {
8458
+ opacity: 0; }
8459
+ .slide__content {
8460
+ display: flex;
8461
+ width: 100%; }
8462
+ .slide--release {
8463
+ height: 500px; }
8464
+
8465
+ .slide-panel {
8466
+ display: flex;
8467
+ flex-wrap: wrap;
8468
+ align-content: flex-start;
8469
+ width: 100%;
8470
+ position: fixed;
8471
+ padding: 12px;
8472
+ right: 0;
8473
+ height: 100%;
8474
+ box-shadow: -2px 2px 8px 0px rgba(10, 36, 102, 0.1);
8475
+ margin-top: 49px;
8476
+ background-color: #fff;
8477
+ z-index: 2; }
8478
+ @media only screen and (min-width: 768px) {
8479
+ .slide-panel {
8480
+ width: 400px;
8481
+ margin-top: 0; } }
8482
+
8483
+ .status-field {
8484
+ display: flex;
8485
+ justify-content: center;
8486
+ border-radius: 12px;
8487
+ font-size: 14px;
8488
+ font-family: "Sora", "Algerian";
8489
+ padding: 3px 12px; }
8490
+
8491
+ .status-field--cold {
8492
+ background-color: #E1E9FF;
8493
+ color: #042eff; }
8494
+
8495
+ .status-field--success {
8496
+ background-color: #E7F6E0;
8497
+ color: #157A00; }
8498
+
8499
+ .status-field--warning {
8500
+ background-color: #fff7d5;
8501
+ color: #8c6b00; }
8502
+
8503
+ .status-field--warm {
8504
+ background-color: #feede3;
8505
+ color: #cf3105; }
8506
+
8507
+ .status-field--error {
8508
+ background-color: #F7E0E5;
8509
+ color: #BD0025; }
8510
+
8511
+ .status-panel {
8512
+ display: flex;
8513
+ width: 100%;
8514
+ flex-wrap: wrap;
8515
+ align-items: stretch;
8516
+ border: 1px #dce0e8;
8517
+ background-color: #fff;
8518
+ padding: 12px; }
8519
+
8520
+ .status-panel__icon {
8521
+ display: flex;
8522
+ width: 64px;
8523
+ height: 64px;
8524
+ justify-content: center;
8525
+ align-items: center;
8526
+ margin-right: 12px;
8527
+ border-radius: 100%;
8528
+ background-color: #fff; }
8529
+
8530
+ .status-panel__display {
8531
+ display: flex;
8532
+ flex-wrap: wrap;
8533
+ align-items: stretch;
8534
+ flex-grow: 1;
8535
+ width: 70%; }
8536
+ @media only screen and (min-width: 480px) {
8537
+ .status-panel__display {
8538
+ width: 33%; } }
8539
+
8540
+ .status-panel__link {
8541
+ display: flex;
8542
+ flex-wrap: wrap;
8543
+ align-items: flex-end;
8544
+ justify-content: flex-end;
8545
+ width: 100%;
8546
+ padding-top: 10px; }
8547
+ @media only screen and (min-width: 480px) {
8548
+ .status-panel__link {
8549
+ width: unset; } }
8550
+
8551
+ .tab__badge {
8552
+ background-color: #008561;
8553
+ color: #f2faf8;
8554
+ font-family: "Sora", "Algerian";
8555
+ font-size: 12px;
8556
+ font-weight: 600;
8557
+ border-radius: 12px;
8558
+ display: flex;
8559
+ justify-content: center;
8560
+ align-items: center;
8561
+ padding: 0 6px; }
8562
+
8563
+ .text__area__input-inverted {
8564
+ --ta__input--border-color: #DCE0E8;
8565
+ --ta__input--background-color: #FFFFFF; }
8566
+
8567
+ .time__input-inverted {
8568
+ --time-input__input--border-color: #DCE0E8;
8569
+ --time-input__input--background-color: #FFFFFF; }
8570
+
8571
+ .timeline {
8572
+ display: flex;
8573
+ flex-wrap: wrap;
8574
+ width: 100%; }
8575
+
8576
+ .timeline__item {
8577
+ display: flex;
8578
+ justify-content: flex-start;
8579
+ flex-wrap: wrap;
8580
+ width: 100%;
8581
+ background-color: #fff;
8582
+ cursor: pointer;
8583
+ margin: 6px; }
8584
+
8585
+ .timeline__icon {
8586
+ display: flex;
8587
+ justify-content: center;
8588
+ align-items: center;
8589
+ width: 36px;
8590
+ height: 36px;
8591
+ background-color: #008561;
8592
+ border-radius: 100%;
8593
+ margin-right: 12px; }
8594
+
8595
+ .timeline__description {
8596
+ display: flex;
8597
+ flex-wrap: wrap;
8598
+ flex-grow: 3; }
8599
+
8600
+ .timeline__datetime {
8601
+ display: flex;
8602
+ flex-wrap: wrap; }
8603
+
8604
+ .timeline__control {
8605
+ display: flex;
8606
+ justify-content: flex-end;
8607
+ align-items: center; }
8608
+
8609
+ .timeline__header {
8610
+ display: flex;
8611
+ width: 100%;
8612
+ padding: 12px; }
8613
+
8614
+ .timeline__content {
8615
+ display: flex;
8616
+ flex-wrap: wrap;
8617
+ width: 100%;
8618
+ padding: 12px;
8619
+ padding-left: 48px; }
8620
+
8621
+ .timeline__footer {
8622
+ display: flex;
8623
+ flex-wrap: wrap;
8624
+ align-items: center;
8625
+ padding: 12px;
8626
+ background-color: #fff;
8627
+ width: 100%; }
8628
+
8629
+ .timeline__partition {
8630
+ height: 15px;
8631
+ width: 2px;
8632
+ background-color: #008561;
8633
+ margin-left: 28px;
8634
+ margin-top: -4px;
8635
+ margin-bottom: -4px; }
8636
+
8637
+ .toggle {
8638
+ display: flex;
8639
+ flex-wrap: wrap;
8640
+ width: 100%;
8641
+ position: relative; }
8642
+ .toggle__box {
8643
+ display: flex;
8644
+ width: 100%;
8645
+ justify-content: space-between;
8646
+ flex-wrap: nowrap; }
8647
+ .toggle__item {
8648
+ display: flex;
8649
+ flex-grow: 1;
8650
+ align-items: center;
8651
+ width: 100%;
8652
+ height: 36px;
8653
+ font-weight: 400;
8654
+ font-size: 12px;
8655
+ font-family: "Sora", "Algerian";
8656
+ margin-bottom: 6px;
8657
+ justify-content: center;
8658
+ cursor: pointer;
8659
+ border: 1px #dce0e8;
8660
+ padding: 0;
8661
+ color: #a2abb9;
8662
+ background-color: #f0f3f7; }
8663
+ .toggle__item:first-child {
8664
+ border-top-left-radius: 12px;
8665
+ border-bottom-left-radius: 12px; }
8666
+ .toggle__item:last-child {
8667
+ border-top-right-radius: 12px;
8668
+ border-bottom-right-radius: 12px; }
8669
+ .toggle__item.is-active {
8670
+ background-color: #f2faf8;
8671
+ color: #008561;
8672
+ font-weight: 600;
8673
+ font-size: 14px;
8674
+ border: 1px #008561; }
8675
+ .toggle__item.is-default {
8676
+ background-color: #f2faf8;
8677
+ color: #008561;
8678
+ font-weight: 600;
8679
+ font-size: 14px;
8680
+ border: 1px #008561;
8681
+ cursor: not-allowed; }
8682
+ .toggle__item.is-disabled {
8683
+ background-color: #e5eaf0;
8684
+ color: #626e82;
8685
+ cursor: no-drop;
8686
+ transition: background-color, color, 0.2s linear; }
8687
+ .toggle__item.is-disabled svg {
8688
+ fill: #626e82;
8689
+ transition: fill, 0.2s linear; }
8690
+ .toggle__item.is-disabled:focus {
8691
+ border: 0;
8692
+ box-shadow: none; }
8693
+ .toggle__item.is-disabled:hover {
8694
+ background-color: #e5eaf0; }
8695
+
8696
+ .toggle-group {
8697
+ display: flex;
8698
+ flex-wrap: wrap;
8699
+ width: 100%;
8700
+ position: relative; }
8701
+ .toggle-group__box {
8702
+ display: flex;
8703
+ flex-wrap: wrap;
8704
+ width: 100%;
8705
+ justify-content: space-between; }
8706
+ @media only screen and (min-width: 480px) {
8707
+ .toggle-group__box {
8708
+ flex-wrap: nowrap; } }
8709
+ .toggle-group__item {
8710
+ display: flex;
8711
+ flex-grow: 1;
8712
+ align-items: center;
8713
+ width: 100%;
8714
+ height: 36px;
8715
+ font-weight: 400;
8716
+ font-size: 12px;
8717
+ font-family: "Sora", "Algerian";
8718
+ padding: 6px 12px;
8719
+ border-radius: 12px;
8720
+ margin-bottom: 6px;
8721
+ justify-content: center;
8722
+ cursor: pointer;
8723
+ border: 1px #dce0e8;
8724
+ color: #a2abb9;
8725
+ background-color: #f0f3f7; }
8726
+ .toggle-group__item.is-active {
8727
+ background-color: #f2faf8;
8728
+ color: #00523c;
8729
+ font-weight: 600;
8730
+ font-size: 14px;
8731
+ border: 1px #00523c; }
8732
+ .toggle-group__item.is-disabled {
8733
+ background-color: #e5eaf0;
8734
+ color: #626e82;
8735
+ cursor: no-drop;
8736
+ transition: background-color, color, 0.2s linear; }
8737
+ .toggle-group__item.is-disabled svg {
8738
+ fill: #626e82;
8739
+ transition: fill, 0.2s linear; }
8740
+ .toggle-group__item.is-disabled:focus {
8741
+ border: 0;
8742
+ box-shadow: none; }
8743
+ .toggle-group__item.is-disabled:hover {
8744
+ background-color: #e5eaf0; }
8745
+ @media only screen and (min-width: 768px) {
8746
+ .toggle-group__item {
8747
+ min-width: 75px; } }