rulemgt/src/main/frontend/src/public/common/css/popModal.css

   1 /*
   2 popModal - 1.21 [18.11.15]
   3 Author: vadimsva
   4 Github: https://github.com/vadimsva/popModal
   5 */
   6 /* popModal */
   7 .popModal {
   8     position: absolute;
   9     background: #fff;
  10     padding: 9px;
  11     border: 1px solid #ddd;
  12     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  13     text-align: left;
  14     max-width: 1000px;
  15     min-width: 180px;
  16     z-index: 9997;
  17     box-sizing: border-box
  18 }
  19
  20 .popModal .close {
  21     line-height: 12px;
  22     font-size: 25px;
  23     font-weight: bold;
  24     font-family: serif;
  25     position: absolute;
  26     right: 8px;
  27     top: 8px;
  28     color: #000;
  29     opacity: 0.2;
  30     padding: 0;
  31     cursor: pointer;
  32     background: transparent;
  33     border: 0;
  34     outline: 0
  35 }
  36
  37 .popModal .close:hover {
  38     opacity: 1
  39 }
  40
  41 .popModal .popModal_content {
  42     margin: 0px auto;
  43         margin-bottom: 30px !important;
  44     word-wrap: break-word;
  45     font-family: sans-serif;
  46     font-size: 14px;
  47     font-weight: initial;
  48     font-style: initial;
  49     color: initial;
  50     text-decoration: initial;
  51     text-transform: initial;
  52     padding: initial
  53 }
  54
  55 .popModal .popModal_content.popModal_contentOverflow {
  56     max-height: 1000px;
  57     overflow-y: auto;
  58     overflow-x: hidden;
  59     margin: 0px 0px 0px 0px;
  60     padding: 0 0px
  61 }
  62
  63 .popModal .popModal_content:before {
  64     content: '';
  65     position: absolute;
  66     left: 0;
  67     right: 0;
  68     height: 20px;
  69     bottom: -20px
  70 }
  71
  72 .popModal .popModal_content.popModal_asMenu {
  73     margin: 0 -15px
  74 }
  75
  76 .popModal .popModal_content.popModal_asMenu ul {
  77     list-style: none;
  78     padding: 0
  79 }
  80
  81 .popModal.bottomRight .popModal_content.popModal_asMenu ul {
  82     text-align: right
  83 }
  84
  85 .popModal .popModal_content.popModal_asMenu ul > li {
  86     line-height: 40px
  87 }
  88
  89 .popModal .popModal_content.popModal_asMenu ul > li:empty {
  90     border-top: 1px solid #ddd
  91 }
  92
  93 .popModal .popModal_content.popModal_asMenu ul > li > a {
  94     display: block;
  95     padding: 0 15px;
  96     text-decoration: none
  97 }
  98
  99 .popModal .popModal_content.popModal_asMenu ul > li > a:hover {
 100     background-color: #eee
 101 }
 102
 103 .popModal .popModal_footer {
 104     background: #fafafa;
 105     padding: 15px;
 106     border-top: 1px solid #ddd;
 107     text-align: right;
 108     position: absolute;
 109     bottom: 0;
 110     left: 0;
 111     right: 0
 112 }
 113
 114 .popModal .popModal_footer button {
 115     margin: 0 0 0 5px
 116 }
 117
 118 .popModal:before,
 119 .popModal:after {
 120     content: '';
 121     position: absolute;
 122     border: 10px solid transparent
 123 }
 124
 125 .popModal:after {
 126     z-index: 1
 127 }
 128
 129 .popModal.bottomLeft:before,
 130 .popModal.bottomRight:before,
 131 .popModal.bottomCenter:before {
 132     border-top-width: 0;
 133     border-bottom-color: #aaa;
 134     top: -10px;
 135     left: 6px
 136 }
 137
 138 .popModal.bottomLeft:after,
 139 .popModal.bottomRight:after,
 140 .popModal.bottomCenter:after {
 141     border-top-width: 0;
 142     border-bottom-color: #fff;
 143     top: -9px;
 144     left: 6px
 145 }
 146
 147 .popModal.bottomRight:before,
 148 .popModal.bottomRight:after {
 149     left: auto;
 150     right: 6px
 151 }
 152
 153 .popModal.bottomCenter:before,
 154 .popModal.bottomCenter:after {
 155     left: 50%;
 156     margin-left: -10px
 157 }
 158
 159 .popModal.leftTop:before,
 160 .popModal.leftCenter:before {
 161     border-right-width: 0;
 162     border-left-color: #aaa;
 163     top: 6px;
 164     right: -10px
 165 }
 166
 167 .popModal.leftTop:after,
 168 .popModal.leftCenter:after {
 169     border-right-width: 0;
 170     border-left-color: #fff;
 171     top: 6px;
 172     right: -9px
 173 }
 174
 175 .popModal.rightTop:before,
 176 .popModal.rightCenter:before {
 177     border-left-width: 0;
 178     border-right-color: #aaa;
 179     top: 6px;
 180     left: -10px
 181 }
 182
 183 .popModal.rightTop:after,
 184 .popModal.rightCenter:after {
 185     border-left-width: 0;
 186     border-right-color: #fff;
 187     top: 6px;
 188     left: -9px
 189 }
 190
 191 .popModal.leftCenter:before,
 192 .popModal.rightCenter:before {
 193     top: 50%;
 194     margin-top: -10px
 195 }
 196
 197 .popModal.leftCenter:after,
 198 .popModal.rightCenter:after {
 199     top: 50%;
 200     margin-top: -10px
 201 }
 202
 203 @media (max-width: 400px) {
 204     .popModal {
 205         position: relative;
 206         top: 10px !important;
 207         left: auto !important;
 208         right: auto !important;
 209         width: 100% !important;
 210         max-width: none
 211     }
 212 }
 213
 214 /* notifyModal */
 215 .notifyModal {
 216     position: fixed;
 217     z-index: 999999;
 218     background: rgba(255, 255, 255, 0.5);
 219     opacity: 0;
 220     cursor: pointer;
 221     transition: all 200ms ease
 222 }
 223
 224 .notifyModal.overlay {
 225     top: 0;
 226     bottom: 0;
 227     left: 0;
 228     right: 0
 229 }
 230
 231 .notifyModal.overlay.center {
 232     top: 0;
 233     bottom: 0
 234 }
 235
 236 .notifyModal.open {
 237     opacity: 1
 238 }
 239
 240 .notifyModal.open .notifyModal_content {
 241     transform: scale(1)
 242 }
 243
 244 .notifyModal .notifyModal_content {
 245     position: absolute;
 246     background: #F9EDBE;
 247     width: 380px;
 248     padding: 25px;
 249     margin: auto;
 250     border: 1px solid #CAB388;
 251     text-align: justify;
 252     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 253     transition: all 200ms ease;
 254     transform: scale(0.95);
 255     font-family: sans-serif;
 256     font-size: 14px;
 257     font-weight: initial;
 258     font-style: initial;
 259     color: initial;
 260     text-decoration: initial;
 261     text-transform: initial;
 262     line-height: 18px;
 263     box-sizing: border-box
 264 }
 265
 266 .notifyModal.alert .notifyModal_content {
 267     background: #FFC7C7;
 268     border-color: #CA7878;
 269     color: #642020
 270 }
 271
 272 .notifyModal.simple .notifyModal_content {
 273     background: #fff;
 274     border-color: #aaa
 275 }
 276
 277 .notifyModal.dark .notifyModal_content {
 278     background: #333;
 279     border-color: #000;
 280     color: #ccc
 281 }
 282
 283 .notifyModal.dark .notifyModal_content .close {
 284     color: #ccc
 285 }
 286
 287 .notifyModal.leftTop {
 288     top: 0;
 289     left: 0
 290 }
 291
 292 .notifyModal.centerTop {
 293     top: 0;
 294     left: 0;
 295     right: 0
 296 }
 297
 298 .notifyModal.rightTop {
 299     top: 0;
 300     right: 0
 301 }
 302
 303 .notifyModal.center {
 304     top: 35%;
 305     bottom: auto;
 306     left: 0;
 307     right: 0
 308 }
 309
 310 .notifyModal.leftBottom {
 311     bottom: 0;
 312     left: 0
 313 }
 314
 315 .notifyModal.centerBottom {
 316     bottom: 0;
 317     left: 0;
 318     right: 0
 319 }
 320
 321 .notifyModal.rightBottom {
 322     bottom: 0;
 323     right: 0
 324 }
 325
 326 .notifyModal.center .notifyModal_content {
 327     left: 0;
 328     right: 0;
 329     top: 35%
 330 }
 331
 332 .notifyModal.leftTop .notifyModal_content {
 333     left: 20px;
 334     top: 20px
 335 }
 336
 337 .notifyModal.centerTop .notifyModal_content {
 338     left: 0;
 339     right: 0;
 340     top: 20px
 341 }
 342
 343 .notifyModal.rightTop .notifyModal_content {
 344     right: 20px;
 345     top: 20px
 346 }
 347
 348 .notifyModal.leftBottom .notifyModal_content {
 349     left: 20px;
 350     bottom: 20px
 351 }
 352
 353 .notifyModal.centerBottom .notifyModal_content {
 354     left: 0;
 355     right: 0;
 356     bottom: 20px
 357 }
 358
 359 .notifyModal.rightBottom .notifyModal_content {
 360     right: 20px;
 361     bottom: 20px
 362 }
 363
 364 .notifyModal.centerTopSlide.open .notifyModal_content,
 365 .notifyModal.centerBottomSlide.open .notifyModal_content {
 366     transform: scale(1) translateY(0)
 367 }
 368
 369 .notifyModal.centerTopSlide .notifyModal_content {
 370     top: 0;
 371     left: 0;
 372     right: 0;
 373     transform: scale(1) translateY(-100%)
 374 }
 375
 376 .notifyModal.centerBottomSlide .notifyModal_content {
 377     bottom: 0;
 378     left: 0;
 379     right: 0;
 380     transform: scale(1) translateY(100%)
 381 }
 382
 383 .notifyModal.leftTopSlide.open .notifyModal_content,
 384 .notifyModal.leftBottomSlide.open .notifyModal_content,
 385 .notifyModal.rightTopSlide.open .notifyModal_content,
 386 .notifyModal.rightBottomSlide.open .notifyModal_content {
 387     transform: scale(1) translateX(0)
 388 }
 389
 390 .notifyModal.leftTopSlide .notifyModal_content {
 391     left: 0;
 392     top: 20px;
 393     transform: scale(1) translateX(-100%)
 394 }
 395
 396 .notifyModal.leftBottomSlide .notifyModal_content {
 397     left: 0;
 398     bottom: 20px;
 399     transform: scale(1) translateX(-100%)
 400 }
 401
 402 .notifyModal.rightTopSlide .notifyModal_content {
 403     right: 0;
 404     top: 20px;
 405     transform: scale(1) translateX(100%)
 406 }
 407
 408 .notifyModal.rightBottomSlide .notifyModal_content {
 409     right: 0;
 410     bottom: 20px;
 411     transform: scale(1) translateX(100%)
 412 }
 413
 414 .notifyModal .notifyModal_content .close {
 415     line-height: 12px;
 416     font-size: 25px;
 417     font-weight: bold;
 418     font-family: serif;
 419     position: absolute;
 420     right: 8px;
 421     top: 8px;
 422     color: #000;
 423     opacity: 0.2;
 424     padding: 0;
 425     cursor: pointer;
 426     background: transparent;
 427     border: 0;
 428     outline: 0
 429 }
 430
 431 .notifyModal .notifyModal_content .close:hover {
 432     opacity: 1
 433 }
 434
 435 @media (max-width: 400px) {
 436     .notifyModal .notifyModal_content {
 437         width: auto;
 438         margin: auto 20px
 439     }
 440
 441     .notifyModal.center .notifyModal_content {
 442         top: 15%
 443     }
 444 }
 445
 446 /* hintModal */
 447 .hintModal {
 448     position: relative;
 449     overflow: visible;
 450     transform: translateZ(0);
 451     backface-visibility: hidden;
 452     z-index: 1
 453 }
 454
 455 .hintModal .hintModal_container {
 456     display: none;
 457     left: 0;
 458     margin: 0;
 459     position: absolute;
 460     background: #F8F4E1;
 461     padding: 15px;
 462     border: 1px solid #B4A984;
 463     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 464     opacity: 0;
 465     text-align: justify;
 466     max-width: 260px;
 467     min-width: 260px;
 468     z-index: 1;
 469     line-height: 16px;
 470     border-radius: 4px;
 471     font-size: 13px;
 472     font-weight: normal;
 473     font-family: sans-serif;
 474     font-style: initial;
 475     margin-top: 6px;
 476     color: #333;
 477     top: 100%;
 478     box-sizing: border-box;
 479     text-decoration: initial;
 480     text-transform: initial
 481 }
 482
 483 .hintModal .hintModal_container:before,
 484 .hintModal .hintModal_container:after {
 485     content: '';
 486     position: absolute;
 487     border: 6px solid transparent;
 488     border-top-width: 0;
 489     border-bottom-color: #B4A984;
 490     top: -6px;
 491     left: 6px
 492 }
 493
 494 .hintModal .hintModal_container:before {
 495     border-bottom-color: #B4A984;
 496     top: -6px
 497 }
 498
 499 .hintModal .hintModal_container:after {
 500     border-bottom-color: #F8F4E1;
 501     top: -5px;
 502     z-index: 1
 503 }
 504
 505 .hintModal.bottomRight .hintModal_container {
 506     left: auto;
 507     right: 0
 508 }
 509
 510 .hintModal.bottomRight .hintModal_container:before,
 511 .hintModal.bottomRight .hintModal_container:after {
 512     left: auto;
 513     right: 6px
 514 }
 515
 516 .hintModal.bottomCenter .hintModal_container {
 517     left: -120px;
 518     right: -120px;
 519     margin-left: auto;
 520     margin-right: auto
 521 }
 522
 523 .hintModal.bottomCenter .hintModal_container:before,
 524 .hintModal.bottomCenter .hintModal_container:after {
 525     left: 50%;
 526     margin-left: -6px
 527 }
 528
 529 .hintModal:hover .hintModal_container {
 530     display: block
 531 }
 532
 533 /* dialogModal */
 534 .dialogModal {
 535     position: fixed;
 536     top: 0;
 537     left: 0;
 538     right: 0;
 539     bottom: 0;
 540     background: rgba(0, 0, 0, 0.7);
 541     z-index: 888888;
 542     overflow-y: scroll;
 543     opacity: 0;
 544     transition: all 200ms ease;
 545     backface-visibility: hidden
 546 }
 547
 548 .dialogModal.open {
 549     opacity: 1
 550 }
 551
 552 .dialogModal * {
 553     box-sizing: border-box
 554 }
 555
 556 .dialogModal.modal .dialogModal_container {
 557     opacity: 0;
 558     transition: all 200ms ease
 559 }
 560
 561 .dialogModal .dialogModal_top {
 562     position: fixed;
 563     left: 0;
 564     right: 0;
 565     z-index: 2;
 566     opacity: 0
 567 }
 568
 569 .dialogModal .dialogModal_top .dialogModal_header {
 570     padding: 15px 25px;
 571     line-height: 30px;
 572     height: 60px;
 573     font-size: 120%;
 574     margin: auto;
 575     width: 650px;
 576     background: #fff;
 577     border-bottom: 1px solid #f5f5f5;
 578     position: relative
 579 }
 580
 581 .dialogModal .dialogModal_top .dialogModal_header .close {
 582     line-height: 30px;
 583     font-size: 40px;
 584     font-family: serif;
 585     color: #000;
 586     opacity: 0.2;
 587     padding: 0;
 588     cursor: pointer;
 589     background: transparent;
 590     border: 0;
 591     outline: 0;
 592     width: 30px;
 593     float: right
 594 }
 595
 596 .dialogModal .dialogModal_top .dialogModal_header .close:hover {
 597     opacity: 1
 598 }
 599
 600 .dialogModal .dialogModal_top .dialogModal_header .dialogPrev.notactive,
 601 .dialogModal .dialogModal_top .dialogModal_header .dialogNext.notactive {
 602     opacity: 0.1 !important;
 603     cursor: default
 604 }
 605
 606 .dialogModal .dialogModal_top .dialogModal_header .dialogPrev,
 607 .dialogModal .dialogModal_top .dialogModal_header .dialogNext {
 608     line-height: 23px;
 609     font-size: 30px;
 610     color: #000;
 611     opacity: 0.2;
 612     cursor: pointer;
 613     background: transparent;
 614     border: 0;
 615     outline: 0;
 616     float: right;
 617     width: 30px;
 618     height: 30px;
 619     text-align: center
 620 }
 621
 622 .dialogModal .dialogModal_top .dialogModal_header .dialogPrev:hover,
 623 .dialogModal .dialogModal_top .dialogModal_header .dialogNext:hover {
 624     opacity: 1
 625 }
 626
 627 .dialogModal .dialogModal_top .dialogModal_header span {
 628     display: inline-block;
 629     overflow: hidden;
 630     white-space: nowrap;
 631     width: calc(100% - 90px);
 632     text-overflow: ellipsis
 633 }
 634
 635 .dialogModal .dialogModal_top .dialogModal_header:after {
 636     content: '';
 637     position: absolute;
 638     bottom: -11px;
 639     left: 0;
 640     right: 0;
 641     background: rgba(255, 255, 255, 0.5);
 642     height: 10px
 643 }
 644
 645 .dialogModal .dialogModal_body {
 646     position: absolute;
 647     width: 650px;
 648     left: 0;
 649     right: 0;
 650     margin: 60px auto 40px;
 651     background: #fff;
 652     font-family: sans-serif;
 653     font-size: 14px;
 654     font-weight: initial;
 655     font-style: initial;
 656     color: initial;
 657     text-decoration: initial;
 658     text-transform: initial;
 659     opacity: 0
 660 }
 661
 662 .dialogModal .dialogModal_body .dialogModal_header {
 663     display: none
 664 }
 665
 666 .dialogModal .dialogModal_content {
 667     padding: 15px 25px 25px;
 668     line-height: 20px;
 669     min-height: 200px
 670 }
 671
 672 .dialogModal .dialogModal_footer {
 673     background: #fafafa;
 674     padding: 15px 25px;
 675     border-top: 1px solid #ddd;
 676     text-align: right
 677 }
 678
 679 .dialogModal .dialogModal_footer button {
 680     margin: 0 0 0 5px
 681 }
 682
 683 .dialogModal.modal {
 684     overflow-y: hidden
 685 }
 686
 687 .dialogModal.modal .dialogModal_container {
 688     position: absolute;
 689     overflow-y: auto;
 690     margin: auto;
 691     width: 650px;
 692     left: 0;
 693     right: 0;
 694     bottom: 40px
 695 }
 696
 697 .dialogModal.modal .dialogModal_top {
 698     margin-top: -60px
 699 }
 700
 701 .dialogModal.modal .dialogModal_body {
 702     margin: auto;
 703     width: auto
 704 }
 705
 706 body.dialogModalOpen {
 707     overflow: hidden
 708 }
 709
 710 @media (max-width: 680px) {
 711     .dialogModal .dialogModal_container, .dialogModal .dialogModal_top .dialogModal_header, .dialogModal .dialogModal_body {
 712         width: auto !important
 713     }
 714 }
 715
 716 /* titleModal */
 717 .titleModal {
 718 }
 719
 720 .titleModal_container {
 721     position: absolute;
 722     z-index: 99999;
 723     background: #000;
 724     color: #fff;
 725     padding: 5px 10px;
 726     line-height: 16px;
 727     margin-top: 12px;
 728     border-radius: 4px;
 729     font-size: 13px;
 730     text-align: center;
 731     max-width: 260px;
 732     opacity: 0;
 733     white-space: normal;
 734     font-family: sans-serif;
 735     font-weight: initial;
 736     font-style: initial;
 737     text-decoration: initial;
 738     text-transform: initial
 739 }
 740
 741 .titleModal_container:after {
 742     content: '';
 743     position: absolute;
 744     border: 6px solid transparent;
 745     border-top-width: 0;
 746     border-bottom-color: #000;
 747     top: -6px;
 748     left: 50%;
 749     margin-left: -6px
 750 }
 751
 752 .titleModal_container.top {
 753     margin-top: -6px
 754 }
 755
 756 .titleModal_container.top:after {
 757     border: 6px solid transparent;
 758     border-bottom-width: 0;
 759     border-top-color: #000;
 760     top: auto;
 761     bottom: -6px;
 762     left: 50%;
 763     margin-left: -6px
 764 }
 765
 766 .titleModal_container.left {
 767     margin-top: auto;
 768     margin-left: 3px
 769 }
 770
 771 .titleModal_container.left:after {
 772     border: 6px solid transparent;
 773     border-right-width: 0;
 774     border-left-color: #000;
 775     top: 50%;
 776     left: auto;
 777     right: -6px;
 778     margin-left: 0;
 779     margin-top: -6px
 780 }
 781
 782 .titleModal_container.right {
 783     margin-top: auto;
 784     margin-left: -3px
 785 }
 786
 787 .titleModal_container.right:after {
 788     border: 6px solid transparent;
 789     border-left-width: 0;
 790     border-right-color: #000;
 791     top: 50%;
 792     left: 0;
 793     margin-top: -6px
 794 }
 795
 796 .titleModal.light .titleModal_container {
 797     background: #fff;
 798     color: #000;
 799     border: 1px solid #ccc
 800 }
 801
 802 .titleModal.light .titleModal_container:after {
 803     border-bottom-color: #fff
 804 }
 805
 806 .titleModal.light .titleModal_container:before {
 807     content: '';
 808     position: absolute;
 809     border: 7px solid transparent;
 810     border-top-width: 0;
 811     border-bottom-color: #ccc;
 812     top: -7px;
 813     left: 50%;
 814     margin-left: -7px
 815 }
 816
 817 .titleModal.light .titleModal_container.top:after {
 818     border: 6px solid transparent;
 819     border-bottom-width: 0;
 820     border-top-color: #fff
 821 }
 822
 823 .titleModal.light .titleModal_container.top:before {
 824     border: 6px solid transparent;
 825     border-bottom-width: 0;
 826     border-top-color: #ccc;
 827     top: auto;
 828     bottom: -7px;
 829     left: 50%;
 830     margin-left: -6px
 831 }
 832
 833 .titleModal.light .titleModal_container.left:after {
 834     border: 6px solid transparent;
 835     border-right-width: 0;
 836     border-left-color: #fff
 837 }
 838
 839 .titleModal.light .titleModal_container.left:before {
 840     border: 7px solid transparent;
 841     border-right-width: 0;
 842     border-left-color: #ccc;
 843     top: 50%;
 844     left: auto;
 845     right: -7px;
 846     margin-left: 0;
 847     margin-top: -7px
 848 }
 849
 850 .titleModal.light .titleModal_container.right:after {
 851     border: 6px solid transparent;
 852     border-left-width: 0;
 853     border-right-color: #fff
 854 }
 855
 856 .titleModal.light .titleModal_container.right:before {
 857     border: 7px solid transparent;
 858     border-left-width: 0;
 859     border-right-color: #ccc;
 860     top: 50%;
 861     left: 0;
 862     margin-top: -7px
 863 }
 864
 865 /* confirmModal */
 866 .confirmModal {
 867     position: fixed;
 868     top: 0;
 869     left: 0;
 870     right: 0;
 871     bottom: 0;
 872     background: rgba(0, 0, 0, 0.7);
 873     z-index: 888888;
 874     overflow: auto;
 875     opacity: 0;
 876     transition: all 200ms ease;
 877     backface-visibility: hidden
 878 }
 879
 880 .confirmModal.open {
 881     opacity: 1
 882 }
 883
 884 .confirmModal * {
 885     box-sizing: border-box
 886 }
 887
 888 .confirmModal .confirmModal_body {
 889     position: relative;
 890     width: 400px;
 891     left: 0;
 892     right: 0;
 893     margin: 0 auto 40px;
 894     background: #fff;
 895     font-family: sans-serif;
 896     font-size: 14px;
 897     font-weight: initial;
 898     font-style: initial;
 899     color: initial;
 900     text-decoration: initial;
 901     text-transform: initial;
 902     opacity: 0
 903 }
 904
 905 .confirmModal .confirmModal_body.open {
 906     opacity: 1
 907 }
 908
 909 .confirmModal .confirmModal_content {
 910     padding: 60px 40px;
 911     line-height: 20px
 912 }
 913
 914 .confirmModal .confirmModal_footer {
 915     background: #fafafa;
 916     padding: 15px 25px;
 917     border-top: 1px solid #ddd;
 918     text-align: right
 919 }
 920
 921 .confirmModal .confirmModal_footer button {
 922     margin: 0 0 0 5px
 923 }
 924
 925 .confirmModal .confirmModal_body.needConfirm {
 926     animation-name: needConfirm;
 927     animation-timing-function: ease;
 928     animation-iteration-count: 3
 929 }
 930
 931 @keyframes needConfirm {
 932     0% {
 933         transform: scale(1)
 934     }
 935     50% {
 936         transform: scale(1.1)
 937     }
 938     100% {
 939         transform: scale(1)
 940     }
 941 }
 942
 943 body.confirmModalOpen {
 944     overflow: hidden
 945 }
 946
 947 @media (max-width: 430px) {
 948     .confirmModal .confirmModal_body {
 949         width: 100%
 950     }
 951 }
 952
 953 /* animation */
 954 .animated {
 955     animation-duration: 0.2s;
 956     animation-fill-mode: both;
 957     transform: translateZ(0);
 958     backface-visibility: hidden
 959 }
 960
 961 .fadeInLeft {
 962     animation-name: fadeInLeft
 963 }
 964
 965 .fadeOutLeft {
 966     animation-name: fadeOutLeft
 967 }
 968
 969 .fadeInRight {
 970     animation-name: fadeInRight
 971 }
 972
 973 .fadeOutRight {
 974     animation-name: fadeOutRight
 975 }
 976
 977 .fadeInTop {
 978     animation-name: fadeInTop
 979 }
 980
 981 .fadeInTopBig {
 982     animation-name: fadeInTopBig
 983 }
 984
 985 .fadeOutTop {
 986     animation-name: fadeOutTop
 987 }
 988
 989 .fadeInBottom {
 990     animation-name: fadeInBottom
 991 }
 992
 993 .fadeOutBottom {
 994     animation-name: fadeOutBottom
 995 }
 996
 997 @keyframes fadeInLeft {
 998     0% {
 999         opacity: 0;
1000         transform: translateX(-10px)
1001     }
1002     100% {
1003         opacity: 1;
1004         transform: translateX(0)
1005     }
1006 }
1007
1008 @keyframes fadeOutLeft {
1009     0% {
1010         opacity: 1;
1011         transform: translateX(0)
1012     }
1013     100% {
1014         opacity: 0;
1015         transform: translateX(-10px)
1016     }
1017 }
1018
1019 @keyframes fadeInRight {
1020     0% {
1021         opacity: 0;
1022         transform: translateX(10px)
1023     }
1024     100% {
1025         opacity: 1;
1026         transform: translateX(0)
1027     }
1028 }
1029
1030 @keyframes fadeOutRight {
1031     0% {
1032         opacity: 1;
1033         transform: translateX(0)
1034     }
1035     100% {
1036         opacity: 0;
1037         transform: translateX(10px)
1038     }
1039 }
1040
1041 @keyframes fadeInTop {
1042     0% {
1043         opacity: 0;
1044         transform: translateY(-10px)
1045     }
1046     100% {
1047         opacity: 1;
1048         transform: translateY(0)
1049     }
1050 }
1051
1052 @keyframes fadeOutTop {
1053     0% {
1054         opacity: 1;
1055         transform: translateY(0)
1056     }
1057     100% {
1058         opacity: 0;
1059         transform: translateY(-10px)
1060     }
1061 }
1062
1063 @keyframes fadeInTopBig {
1064     0% {
1065         opacity: 0;
1066         transform: translateY(-100%)
1067     }
1068     100% {
1069         opacity: 1;
1070         transform: translateY(0)
1071     }
1072 }
1073
1074 @keyframes fadeInBottom {
1075     0% {
1076         opacity: 0;
1077         transform: translateY(10px)
1078     }
1079     100% {
1080         opacity: 1;
1081         transform: translateY(0)
1082     }
1083 }
1084
1085 @keyframes fadeOutBottom {
1086     0% {
1087         opacity: 1;
1088         transform: translateY(0)
1089     }
1090     100% {
1091         opacity: 0;
1092         transform: translateY(10px)
1093     }
1094 }
1095
1096 .prompt-message-min {
1097         min-width: 300px;
1098         max-width: 300px;
1099 }