Administrator
2023-04-21 195945efc5db921a4c9eb8cf9421c172273293f5
提交 | 用户 | 时间
58d006 1 body.stop-scrolling {
A 2   height: 100%;
3   overflow: hidden; }
4
5 .sweet-overlay {
6   background-color: black;
7   /* IE8 */
8   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
9   /* IE8 */
10   background-color: rgba(0, 0, 0, 0.4);
11   position: fixed;
12   left: 0;
13   right: 0;
14   top: 0;
15   bottom: 0;
16   display: none;
17   z-index: 10000; }
18
19 .sweet-alert {
20   background-color: white;
21   font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
22   width: 340px;
23   padding: 17px;
24   border-radius: 10px;
25   text-align: center;
26   position: fixed;
27   left: 50%;
28   top: 50%;
29   margin-left: -256px;
30   margin-top: -200px;
31   overflow: hidden;
32   display: none;
33   z-index: 99999; }
34   @media all and (max-width: 540px) {
35     .sweet-alert {
36       width: auto;
37       margin-left: 0;
38       margin-right: 0;
39       left: 15px;
40       right: 15px; } }
41   .sweet-alert h2 {
42     color: #575757;
43     font-size: 30px;
44     text-align: center;
45     font-weight: 600;
46     text-transform: none;
47     position: relative;
48     margin: 25px 0;
49     padding: 0;
50     line-height: 40px;
51     display: block; }
52   .sweet-alert p {
53     color: #797979;
54     font-size: 16px;
55     text-align: center;
56     font-weight: 300;
57     position: relative;
58     text-align: inherit;
59     float: none;
60     margin: 0;
61     padding: 0;
62     line-height: normal; }
63   .sweet-alert fieldset {
64     border: none;
65     position: relative; }
66   .sweet-alert .sa-error-container {
67     background-color: #f1f1f1;
68     margin-left: -17px;
69     margin-right: -17px;
70     overflow: hidden;
71     padding: 0 10px;
72     max-height: 0;
73     webkit-transition: padding 0.15s, max-height 0.15s;
74     transition: padding 0.15s, max-height 0.15s; }
75     .sweet-alert .sa-error-container.show {
76       padding: 10px 0;
77       max-height: 100px;
78       webkit-transition: padding 0.2s, max-height 0.2s;
79       transition: padding 0.25s, max-height 0.25s; }
80     .sweet-alert .sa-error-container .icon {
81       display: inline-block;
82       width: 24px;
83       height: 24px;
84       border-radius: 50%;
85       background-color: #ea7d7d;
86       color: white;
87       line-height: 24px;
88       text-align: center;
89       margin-right: 3px; }
90     .sweet-alert .sa-error-container p {
91       display: inline-block; }
92   .sweet-alert .sa-input-error {
93     position: absolute;
94     top: 29px;
95     right: 26px;
96     width: 20px;
97     height: 20px;
98     opacity: 0;
99     -webkit-transform: scale(0.5);
100     transform: scale(0.5);
101     -webkit-transform-origin: 50% 50%;
102     transform-origin: 50% 50%;
103     -webkit-transition: all 0.1s;
104     transition: all 0.1s; }
105     .sweet-alert .sa-input-error::before, .sweet-alert .sa-input-error::after {
106       content: "";
107       width: 20px;
108       height: 6px;
109       background-color: #f06e57;
110       border-radius: 3px;
111       position: absolute;
112       top: 50%;
113       margin-top: -4px;
114       left: 50%;
115       margin-left: -9px; }
116     .sweet-alert .sa-input-error::before {
117       -webkit-transform: rotate(-45deg);
118       transform: rotate(-45deg); }
119     .sweet-alert .sa-input-error::after {
120       -webkit-transform: rotate(45deg);
121       transform: rotate(45deg); }
122     .sweet-alert .sa-input-error.show {
123       opacity: 1;
124       -webkit-transform: scale(1);
125       transform: scale(1); }
126   .sweet-alert input {
127     width: 100%;
128     box-sizing: border-box;
129     border-radius: 3px;
130     border: 1px solid #d7d7d7;
131     height: 43px;
132     margin-top: 10px;
133     margin-bottom: 17px;
134     font-size: 18px;
135     box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.06);
136     padding: 0 12px;
137     display: none;
138     -webkit-transition: all 0.3s;
139     transition: all 0.3s; }
140     .sweet-alert input:focus {
141       outline: none;
142       box-shadow: 0px 0px 3px #c4e6f5;
143       border: 1px solid #b4dbed; }
144       .sweet-alert input:focus::-moz-placeholder {
145         transition: opacity 0.3s 0.03s ease;
146         opacity: 0.5; }
147       .sweet-alert input:focus:-ms-input-placeholder {
148         transition: opacity 0.3s 0.03s ease;
149         opacity: 0.5; }
150       .sweet-alert input:focus::-webkit-input-placeholder {
151         transition: opacity 0.3s 0.03s ease;
152         opacity: 0.5; }
153     .sweet-alert input::-moz-placeholder {
154       color: #bdbdbd; }
155     .sweet-alert input::-ms-clear {
156       display: none; }
157     .sweet-alert input:-ms-input-placeholder {
158       color: #bdbdbd; }
159     .sweet-alert input::-webkit-input-placeholder {
160       color: #bdbdbd; }
161   .sweet-alert.show-input input {
162     display: block; }
163   .sweet-alert .sa-confirm-button-container {
164     display: inline-block;
165     position: relative; }
166   .sweet-alert .la-ball-fall {
167     position: absolute;
168     left: 50%;
169     top: 50%;
170     margin-left: -27px;
171     margin-top: 4px;
172     opacity: 0;
173     visibility: hidden; }
174   .sweet-alert button {
175     background-color: #8CD4F5;
176     color: white;
177     border: none;
178     box-shadow: none;
179     font-size: 17px;
180     font-weight: 500;
181     -webkit-border-radius: 4px;
182     border-radius: 5px;
183     padding: 3px 22px;
184     margin: 26px 5px 0 5px;
185     cursor: pointer; }
186     .sweet-alert button:focus {
187       outline: none;
188       box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
189     .sweet-alert button:hover {
190       background-color: #7ecff4; }
191     .sweet-alert button:active {
192       background-color: #5dc2f1; }
193     .sweet-alert button.cancel {
194       background-color: #C1C1C1; }
195       .sweet-alert button.cancel:hover {
196         background-color: #b9b9b9; }
197       .sweet-alert button.cancel:active {
198         background-color: #a8a8a8; }
199       .sweet-alert button.cancel:focus {
200         box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset !important; }
201     .sweet-alert button[disabled] {
202       opacity: .6;
203       cursor: default; }
204     .sweet-alert button.confirm[disabled] {
205       color: transparent; }
206       .sweet-alert button.confirm[disabled] ~ .la-ball-fall {
207         opacity: 1;
208         visibility: visible;
209         transition-delay: 0s; }
210     .sweet-alert button::-moz-focus-inner {
211       border: 0; }
212   .sweet-alert[data-has-cancel-button=false] button {
213     box-shadow: none !important; }
214   .sweet-alert[data-has-confirm-button=false][data-has-cancel-button=false] {
215     padding-bottom: 40px; }
216   .sweet-alert .sa-icon {
217     width: 26px;
218     height: 26px;
219     border: 2px solid gray;
220     -webkit-border-radius: 40px;
221     border-radius: 40px;
222     border-radius: 50%;
223     margin: 8px auto;
224     padding: 0;
225     position: relative;
226     box-sizing: content-box; }
227     .sweet-alert .sa-icon.sa-error {
228       border-color: #F27474; }
229       .sweet-alert .sa-icon.sa-error .sa-x-mark {
230         position: relative;
231         display: block; }
232       .sweet-alert .sa-icon.sa-error .sa-line {
233             position: absolute;
234             height: 2px;
235             width: 22px;
236             background-color: #F27474;
237             display: block;
238             top: 13px;
239             left: 2px;
240             border-radius: 2px; }
241         .sweet-alert .sa-icon.sa-error .sa-line.sa-left {
242           -webkit-transform: rotate(45deg);
243           transform: rotate(45deg);
244           left: 2px; }
245         .sweet-alert .sa-icon.sa-error .sa-line.sa-right {
246           -webkit-transform: rotate(-45deg);
247           transform: rotate(-45deg);
248           right: 16px; }
249     .sweet-alert .sa-icon.sa-warning {
250       border-color: #F8BB86; }
251       .sweet-alert .sa-icon.sa-warning .sa-body {
252         position: absolute;
253         width: 5px;
254         height: 47px;
255         left: 50%;
256         top: 10px;
257         -webkit-border-radius: 2px;
258         border-radius: 2px;
259         margin-left: -2px;
260         background-color: #F8BB86; }
261       .sweet-alert .sa-icon.sa-warning .sa-dot {
262         position: absolute;
263         width: 7px;
264         height: 7px;
265         -webkit-border-radius: 50%;
266         border-radius: 50%;
267         margin-left: -3px;
268         left: 50%;
269         bottom: 10px;
270         background-color: #F8BB86; }
271     .sweet-alert .sa-icon.sa-info {
272       border-color: #C9DAE1; }
273       .sweet-alert .sa-icon.sa-info::before {
274         content: "";
275         position: absolute;
276         width: 5px;
277         height: 29px;
278         left: 50%;
279         bottom: 17px;
280         border-radius: 2px;
281         margin-left: -2px;
282         background-color: #C9DAE1; }
283       .sweet-alert .sa-icon.sa-info::after {
284         content: "";
285         position: absolute;
286         width: 7px;
287         height: 7px;
288         border-radius: 50%;
289         margin-left: -3px;
290         top: 19px;
291         background-color: #C9DAE1;
292         left: 50%; }
293     .sweet-alert .sa-icon.sa-success {
294       border-color: #A5DC86; }
295       .sweet-alert .sa-icon.sa-success::before, .sweet-alert .sa-icon.sa-success::after {
296         content: '';
297         -webkit-border-radius: 40px;
298         border-radius: 40px;
299         border-radius: 50%;
300         position: absolute;
301         width: 60px;
302         height: 120px;
303         background: white;
304         -webkit-transform: rotate(45deg);
305         transform: rotate(45deg); }
306       .sweet-alert .sa-icon.sa-success::before {
307         -webkit-border-radius: 120px 0 0 120px;
308         border-radius: 120px 0 0 120px;
309         top: -7px;
310         left: -33px;
311         -webkit-transform: rotate(-45deg);
312         transform: rotate(-45deg);
313         -webkit-transform-origin: 60px 60px;
314         transform-origin: 60px 60px; }
315       .sweet-alert .sa-icon.sa-success::after {
316         -webkit-border-radius: 0 120px 120px 0;
317         border-radius: 0 120px 120px 0;
318         top: -11px;
319         left: 30px;
320         -webkit-transform: rotate(-45deg);
321         transform: rotate(-45deg);
322         -webkit-transform-origin: 0px 60px;
323         transform-origin: 0px 60px; }
324       .sweet-alert .sa-icon.sa-success .sa-placeholder {
325         width: 80px;
326         height: 80px;
327         border: 4px solid rgba(165, 220, 134, 0.2);
328         -webkit-border-radius: 40px;
329         border-radius: 40px;
330         border-radius: 50%;
331         box-sizing: content-box;
332         position: absolute;
333         left: -4px;
334         top: -4px;
335         z-index: 2; }
336       .sweet-alert .sa-icon.sa-success .sa-fix {
337         width: 5px;
338         height: 90px;
339         background-color: white;
340         position: absolute;
341         left: 28px;
342         top: 8px;
343         z-index: 1;
344         -webkit-transform: rotate(-45deg);
345         transform: rotate(-45deg); }
346       .sweet-alert .sa-icon.sa-success .sa-line {
347         height: 5px;
348         background-color: #A5DC86;
349         display: block;
350         border-radius: 2px;
351         position: absolute;
352         z-index: 2; }
353         .sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
354           width: 25px;
355           left: 14px;
356           top: 46px;
357           -webkit-transform: rotate(45deg);
358           transform: rotate(45deg); }
359         .sweet-alert .sa-icon.sa-success .sa-line.sa-long {
360           width: 47px;
361           right: 8px;
362           top: 38px;
363           -webkit-transform: rotate(-45deg);
364           transform: rotate(-45deg); }
365     .sweet-alert .sa-icon.sa-custom {
366       background-size: contain;
367       border-radius: 0;
368       border: none;
369       background-position: center center;
370       background-repeat: no-repeat; }
371
372 /*
373  * Animations
374  */
375 @-webkit-keyframes showSweetAlert {
376   0% {
377     transform: scale(0.7);
378     -webkit-transform: scale(0.7); }
379   45% {
380     transform: scale(1.05);
381     -webkit-transform: scale(1.05); }
382   80% {
383     transform: scale(0.95);
384     -webkit-transform: scale(0.95); }
385   100% {
386     transform: scale(1);
387     -webkit-transform: scale(1); } }
388
389 @keyframes showSweetAlert {
390   0% {
391     transform: scale(0.7);
392     -webkit-transform: scale(0.7); }
393   45% {
394     transform: scale(1.05);
395     -webkit-transform: scale(1.05); }
396   80% {
397     transform: scale(0.95);
398     -webkit-transform: scale(0.95); }
399   100% {
400     transform: scale(1);
401     -webkit-transform: scale(1); } }
402
403 @-webkit-keyframes hideSweetAlert {
404   0% {
405     transform: scale(1);
406     -webkit-transform: scale(1); }
407   100% {
408     transform: scale(0.5);
409     -webkit-transform: scale(0.5); } }
410
411 @keyframes hideSweetAlert {
412   0% {
413     transform: scale(1);
414     -webkit-transform: scale(1); }
415   100% {
416     transform: scale(0.5);
417     -webkit-transform: scale(0.5); } }
418
419 @-webkit-keyframes slideFromTop {
420   0% {
421     top: 0%; }
422   100% {
423     top: 50%; } }
424
425 @keyframes slideFromTop {
426   0% {
427     top: 0%; }
428   100% {
429     top: 50%; } }
430
431 @-webkit-keyframes slideToTop {
432   0% {
433     top: 50%; }
434   100% {
435     top: 0%; } }
436
437 @keyframes slideToTop {
438   0% {
439     top: 50%; }
440   100% {
441     top: 0%; } }
442
443 @-webkit-keyframes slideFromBottom {
444   0% {
445     top: 70%; }
446   100% {
447     top: 50%; } }
448
449 @keyframes slideFromBottom {
450   0% {
451     top: 70%; }
452   100% {
453     top: 50%; } }
454
455 @-webkit-keyframes slideToBottom {
456   0% {
457     top: 50%; }
458   100% {
459     top: 70%; } }
460
461 @keyframes slideToBottom {
462   0% {
463     top: 50%; }
464   100% {
465     top: 70%; } }
466
467 .showSweetAlert[data-animation=pop] {
468   -webkit-animation: showSweetAlert 0.3s;
469   animation: showSweetAlert 0.3s; }
470
471 .showSweetAlert[data-animation=none] {
472   -webkit-animation: none;
473   animation: none; }
474
475 .showSweetAlert[data-animation=slide-from-top] {
476   -webkit-animation: slideFromTop 0.3s;
477   animation: slideFromTop 0.3s; }
478
479 .showSweetAlert[data-animation=slide-from-bottom] {
480   -webkit-animation: slideFromBottom 0.3s;
481   animation: slideFromBottom 0.3s; }
482
483 .hideSweetAlert[data-animation=pop] {
484   -webkit-animation: hideSweetAlert 0.2s;
485   animation: hideSweetAlert 0.2s; }
486
487 .hideSweetAlert[data-animation=none] {
488   -webkit-animation: none;
489   animation: none; }
490
491 .hideSweetAlert[data-animation=slide-from-top] {
492   -webkit-animation: slideToTop 0.4s;
493   animation: slideToTop 0.4s; }
494
495 .hideSweetAlert[data-animation=slide-from-bottom] {
496   -webkit-animation: slideToBottom 0.3s;
497   animation: slideToBottom 0.3s; }
498
499 @-webkit-keyframes animateSuccessTip {
500   0% {
501     width: 0;
502     left: 1px;
503     top: 19px; }
504   54% {
505     width: 0;
506     left: 1px;
507     top: 19px; }
508   70% {
509     width: 50px;
510     left: -8px;
511     top: 37px; }
512   84% {
513     width: 17px;
514     left: 21px;
515     top: 48px; }
516   100% {
517     width: 25px;
518     left: 14px;
519     top: 45px; } }
520
521 @keyframes animateSuccessTip {
522   0% {
523     width: 0;
524     left: 1px;
525     top: 19px; }
526   54% {
527     width: 0;
528     left: 1px;
529     top: 19px; }
530   70% {
531     width: 50px;
532     left: -8px;
533     top: 37px; }
534   84% {
535     width: 17px;
536     left: 21px;
537     top: 48px; }
538   100% {
539     width: 25px;
540     left: 14px;
541     top: 45px; } }
542
543 @-webkit-keyframes animateSuccessLong {
544   0% {
545     width: 0;
546     right: 46px;
547     top: 54px; }
548   65% {
549     width: 0;
550     right: 46px;
551     top: 54px; }
552   84% {
553     width: 55px;
554     right: 0px;
555     top: 35px; }
556   100% {
557     width: 47px;
558     right: 8px;
559     top: 38px; } }
560
561 @keyframes animateSuccessLong {
562   0% {
563     width: 0;
564     right: 46px;
565     top: 54px; }
566   65% {
567     width: 0;
568     right: 46px;
569     top: 54px; }
570   84% {
571     width: 55px;
572     right: 0px;
573     top: 35px; }
574   100% {
575     width: 47px;
576     right: 8px;
577     top: 38px; } }
578
579 @-webkit-keyframes rotatePlaceholder {
580   0% {
581     transform: rotate(-45deg);
582     -webkit-transform: rotate(-45deg); }
583   5% {
584     transform: rotate(-45deg);
585     -webkit-transform: rotate(-45deg); }
586   12% {
587     transform: rotate(-405deg);
588     -webkit-transform: rotate(-405deg); }
589   100% {
590     transform: rotate(-405deg);
591     -webkit-transform: rotate(-405deg); } }
592
593 @keyframes rotatePlaceholder {
594   0% {
595     transform: rotate(-45deg);
596     -webkit-transform: rotate(-45deg); }
597   5% {
598     transform: rotate(-45deg);
599     -webkit-transform: rotate(-45deg); }
600   12% {
601     transform: rotate(-405deg);
602     -webkit-transform: rotate(-405deg); }
603   100% {
604     transform: rotate(-405deg);
605     -webkit-transform: rotate(-405deg); } }
606
607 .animateSuccessTip {
608   -webkit-animation: animateSuccessTip 0.75s;
609   animation: animateSuccessTip 0.75s; }
610
611 .animateSuccessLong {
612   -webkit-animation: animateSuccessLong 0.75s;
613   animation: animateSuccessLong 0.75s; }
614
615 .sa-icon.sa-success.animate::after {
616   -webkit-animation: rotatePlaceholder 4.25s ease-in;
617   animation: rotatePlaceholder 4.25s ease-in; }
618
619 @-webkit-keyframes animateErrorIcon {
620   0% {
621     transform: rotateX(100deg);
622     -webkit-transform: rotateX(100deg);
623     opacity: 0; }
624   100% {
625     transform: rotateX(0deg);
626     -webkit-transform: rotateX(0deg);
627     opacity: 1; } }
628
629 @keyframes animateErrorIcon {
630   0% {
631     transform: rotateX(100deg);
632     -webkit-transform: rotateX(100deg);
633     opacity: 0; }
634   100% {
635     transform: rotateX(0deg);
636     -webkit-transform: rotateX(0deg);
637     opacity: 1; } }
638
639 .animateErrorIcon {
640   -webkit-animation: animateErrorIcon 0.5s;
641   animation: animateErrorIcon 0.5s; }
642
643 @-webkit-keyframes animateXMark {
644   0% {
645     transform: scale(0.4);
646     -webkit-transform: scale(0.4);
647     margin-top: 26px;
648     opacity: 0; }
649   50% {
650     transform: scale(0.4);
651     -webkit-transform: scale(0.4);
652     margin-top: 26px;
653     opacity: 0; }
654   80% {
655     transform: scale(1.15);
656     -webkit-transform: scale(1.15);
657     margin-top: -6px; }
658   100% {
659     transform: scale(1);
660     -webkit-transform: scale(1);
661     margin-top: 0;
662     opacity: 1; } }
663
664 @keyframes animateXMark {
665   0% {
666     transform: scale(0.4);
667     -webkit-transform: scale(0.4);
668     margin-top: 26px;
669     opacity: 0; }
670   50% {
671     transform: scale(0.4);
672     -webkit-transform: scale(0.4);
673     margin-top: 26px;
674     opacity: 0; }
675   80% {
676     transform: scale(1.15);
677     -webkit-transform: scale(1.15);
678     margin-top: -6px; }
679   100% {
680     transform: scale(1);
681     -webkit-transform: scale(1);
682     margin-top: 0;
683     opacity: 1; } }
684
685 .animateXMark {
686   -webkit-animation: animateXMark 0.5s;
687   animation: animateXMark 0.5s; }
688
689 @-webkit-keyframes pulseWarning {
690   0% {
691     border-color: #F8D486; }
692   100% {
693     border-color: #F8BB86; } }
694
695 @keyframes pulseWarning {
696   0% {
697     border-color: #F8D486; }
698   100% {
699     border-color: #F8BB86; } }
700
701 .pulseWarning {
702   -webkit-animation: pulseWarning 0.75s infinite alternate;
703   animation: pulseWarning 0.75s infinite alternate; }
704
705 @-webkit-keyframes pulseWarningIns {
706   0% {
707     background-color: #F8D486; }
708   100% {
709     background-color: #F8BB86; } }
710
711 @keyframes pulseWarningIns {
712   0% {
713     background-color: #F8D486; }
714   100% {
715     background-color: #F8BB86; } }
716
717 .pulseWarningIns {
718   -webkit-animation: pulseWarningIns 0.75s infinite alternate;
719   animation: pulseWarningIns 0.75s infinite alternate; }
720
721 @-webkit-keyframes rotate-loading {
722   0% {
723     transform: rotate(0deg); }
724   100% {
725     transform: rotate(360deg); } }
726
727 @keyframes rotate-loading {
728   0% {
729     transform: rotate(0deg); }
730   100% {
731     transform: rotate(360deg); } }
732
733 /* Internet Explorer 9 has some special quirks that are fixed here */
734 /* The icons are not animated. */
735 /* This file is automatically merged into sweet-alert.min.js through Gulp */
736 /* Error icon */
737 .sweet-alert .sa-icon.sa-error .sa-line.sa-left {
738   -ms-transform: rotate(45deg) \9; }
739
740 .sweet-alert .sa-icon.sa-error .sa-line.sa-right {
741   -ms-transform: rotate(-45deg) \9; }
742
743 /* Success icon */
744 .sweet-alert .sa-icon.sa-success {
745   border-color: transparent\9; }
746
747 .sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
748   -ms-transform: rotate(45deg) \9; }
749
750 .sweet-alert .sa-icon.sa-success .sa-line.sa-long {
751   -ms-transform: rotate(-45deg) \9; }
752
753 /*!
754  * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
755  * Copyright 2015 Daniel Cardoso <@DanielCardoso>
756  * Licensed under MIT
757  */
758 .la-ball-fall,
759 .la-ball-fall > div {
760   position: relative;
761   -webkit-box-sizing: border-box;
762   -moz-box-sizing: border-box;
763   box-sizing: border-box; }
764
765 .la-ball-fall {
766   display: block;
767   font-size: 0;
768   color: #fff; }
769
770 .la-ball-fall.la-dark {
771   color: #333; }
772
773 .la-ball-fall > div {
774   display: inline-block;
775   float: none;
776   background-color: currentColor;
777   border: 0 solid currentColor; }
778
779 .la-ball-fall {
780   width: 54px;
781   height: 18px; }
782
783 .la-ball-fall > div {
784   width: 10px;
785   height: 10px;
786   margin: 4px;
787   border-radius: 100%;
788   opacity: 0;
789   -webkit-animation: ball-fall 1s ease-in-out infinite;
790   -moz-animation: ball-fall 1s ease-in-out infinite;
791   -o-animation: ball-fall 1s ease-in-out infinite;
792   animation: ball-fall 1s ease-in-out infinite; }
793
794 .la-ball-fall > div:nth-child(1) {
795   -webkit-animation-delay: -200ms;
796   -moz-animation-delay: -200ms;
797   -o-animation-delay: -200ms;
798   animation-delay: -200ms; }
799
800 .la-ball-fall > div:nth-child(2) {
801   -webkit-animation-delay: -100ms;
802   -moz-animation-delay: -100ms;
803   -o-animation-delay: -100ms;
804   animation-delay: -100ms; }
805
806 .la-ball-fall > div:nth-child(3) {
807   -webkit-animation-delay: 0ms;
808   -moz-animation-delay: 0ms;
809   -o-animation-delay: 0ms;
810   animation-delay: 0ms; }
811
812 .la-ball-fall.la-sm {
813   width: 26px;
814   height: 8px; }
815
816 .la-ball-fall.la-sm > div {
817   width: 4px;
818   height: 4px;
819   margin: 2px; }
820
821 .la-ball-fall.la-2x {
822   width: 108px;
823   height: 36px; }
824
825 .la-ball-fall.la-2x > div {
826   width: 20px;
827   height: 20px;
828   margin: 8px; }
829
830 .la-ball-fall.la-3x {
831   width: 162px;
832   height: 54px; }
833
834 .la-ball-fall.la-3x > div {
835   width: 30px;
836   height: 30px;
837   margin: 12px; }
838
839 /*
840  * Animation
841  */
842 @-webkit-keyframes ball-fall {
843   0% {
844     opacity: 0;
845     -webkit-transform: translateY(-145%);
846     transform: translateY(-145%); }
847   10% {
848     opacity: .5; }
849   20% {
850     opacity: 1;
851     -webkit-transform: translateY(0);
852     transform: translateY(0); }
853   80% {
854     opacity: 1;
855     -webkit-transform: translateY(0);
856     transform: translateY(0); }
857   90% {
858     opacity: .5; }
859   100% {
860     opacity: 0;
861     -webkit-transform: translateY(145%);
862     transform: translateY(145%); } }
863
864 @-moz-keyframes ball-fall {
865   0% {
866     opacity: 0;
867     -moz-transform: translateY(-145%);
868     transform: translateY(-145%); }
869   10% {
870     opacity: .5; }
871   20% {
872     opacity: 1;
873     -moz-transform: translateY(0);
874     transform: translateY(0); }
875   80% {
876     opacity: 1;
877     -moz-transform: translateY(0);
878     transform: translateY(0); }
879   90% {
880     opacity: .5; }
881   100% {
882     opacity: 0;
883     -moz-transform: translateY(145%);
884     transform: translateY(145%); } }
885
886 @-o-keyframes ball-fall {
887   0% {
888     opacity: 0;
889     -o-transform: translateY(-145%);
890     transform: translateY(-145%); }
891   10% {
892     opacity: .5; }
893   20% {
894     opacity: 1;
895     -o-transform: translateY(0);
896     transform: translateY(0); }
897   80% {
898     opacity: 1;
899     -o-transform: translateY(0);
900     transform: translateY(0); }
901   90% {
902     opacity: .5; }
903   100% {
904     opacity: 0;
905     -o-transform: translateY(145%);
906     transform: translateY(145%); } }
907
908 @keyframes ball-fall {
909   0% {
910     opacity: 0;
911     -webkit-transform: translateY(-145%);
912     -moz-transform: translateY(-145%);
913     -o-transform: translateY(-145%);
914     transform: translateY(-145%); }
915   10% {
916     opacity: .5; }
917   20% {
918     opacity: 1;
919     -webkit-transform: translateY(0);
920     -moz-transform: translateY(0);
921     -o-transform: translateY(0);
922     transform: translateY(0); }
923   80% {
924     opacity: 1;
925     -webkit-transform: translateY(0);
926     -moz-transform: translateY(0);
927     -o-transform: translateY(0);
928     transform: translateY(0); }
929   90% {
930     opacity: .5; }
931   100% {
932     opacity: 0;
933     -webkit-transform: translateY(145%);
934     -moz-transform: translateY(145%);
935     -o-transform: translateY(145%);
936     transform: translateY(145%); } }