body { font-family:Tahoma;}
.show-message{background-color: #efefef; font-family:'Microsoft Yahei'; width: 478px; padding: 17px; border-radius: 5px; text-align: center; position: fixed; left: 50%; top: 50%; margin-left: -256px; margin-top: -200px; overflow: hidden; display: none; z-index: 2000;}
.show-message .info {height:60px; width:100%; margin-top:30px; font-size:16px; line-height:20px; text-align:center; color:#999;}
.show-message .info span {font-size:12px; color:#999;}
.show-message .sub {height:40px; width:100%;}
.show-message .sub .red {height:40px; width:40%; background:#dd6b55; margin:auto; font-size:16px; color:#fff; text-align:center; line-height:40px; border-radius:5px;}
.show-message .sub .green {height:40px; width:40%; background:#33731cd0;background:#31cd00; margin:auto; font-size:16px; color:#fff; text-align:center; line-height:40px; border-radius:5px;}
.show-message .sub .grey {height:40px; width:40%; background:#999; margin:auto; font-size:16px; color:#fff; text-align:center; line-height:40px; border-radius:5px;}
.show-message .icon{width:80px; height:80px; border: 4px solid gray; border-radius: 50%; margin: 20px auto; position: relative; box-sizing: content-box;} .show-message .icon.error{border-color: #F27474;} .show-message .icon.error .x-mark{position: relative; display: block;} .show-message .icon.error .line{position: absolute; height: 5px; width: 47px; background-color: #F27474; display: block; top: 37px; border-radius: 2px;} .show-message .icon.error .line.left{-webkit-transform: rotate(45deg); transform: rotate(45deg); left: 17px;} .show-message .icon.error .line.right{-webkit-transform: rotate(-45deg); transform: rotate(-45deg); right: 16px;} .show-message .icon.warning{border-color: #F8BB86;} .show-message .icon.warning .body{position: absolute; width: 5px; height: 47px; left: 50%; top: 10px; border-radius: 2px; margin-left: -2px; background-color: #F8BB86;} .show-message .icon.warning .dot{position: absolute; width: 7px; height: 7px; border-radius: 50%; margin-left: -3px; left: 50%; bottom: 10px; background-color: #F8BB86;} .show-message .icon.success{border-color: #A5DC86;} .show-message .icon.success::before, .show-message .icon.success::after{content: ''; border-radius: 50%; position: absolute; width: 60px; height: 120px; background: #efefef; transform: rotate(45deg);} .show-message .icon.success::before{border-radius:120px 0 0 120px; top:-7px; left:-33px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transform-origin:60px 60px; transform-origin: 60px 60px;} .show-message .icon.success::after{border-radius: 0 120px 120px 0; top: -11px; left: 30px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0px 60px; transform-origin: 0px 60px;} .show-message .icon.success .placeholder{width: 80px; height: 80px; border: 4px solid rgba(165, 220, 134, 0.2); border-radius: 50%; box-sizing: content-box; position: absolute; left: -4px; top: -4px; z-index: 2;} .show-message .icon.success .fix{width: 5px; height: 90px; background-color: #efefef; position: absolute; left: 28px; top: 8px; z-index: 1; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);} .show-message .icon.success .line{height: 5px; background-color: #A5DC86; display: block; border-radius: 2px; position: absolute; z-index: 2;} .show-message .icon.success .line.tip{width: 25px; left: 14px; top: 46px; -webkit-transform: rotate(45deg); transform: rotate(45deg);} .show-message .icon.success .line.long{width: 47px; right: 8px; top: 38px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
@-webkit-keyframes showSweetAlert{0%{transform: scale(0.7); -webkit-transform: scale(0.7);} 45%{transform: scale(1.05); -webkit-transform: scale(1.05);} 80%{transform: scale(0.95); -webkit-tranform: scale(0.95);} 100%{transform: scale(1); -webkit-transform: scale(1);} }
@-moz-keyframes showSweetAlert{0%{transform: scale(0.7); -webkit-transform: scale(0.7);} 45%{transform: scale(1.05); -webkit-transform: scale(1.05);} 80%{transform: scale(0.95); -webkit-tranform: scale(0.95);} 100%{transform: scale(1); -webkit-transform: scale(1);} }
@keyframes showSweetAlert{0%{transform: scale(0.7); -webkit-transform: scale(0.7);} 45%{transform: scale(1.05); -webkit-transform: scale(1.05);} 80%{transform: scale(0.95); -webkit-tranform: scale(0.95);} 100%{transform: scale(1); -webkit-transform: scale(1);} }
@-webkit-keyframes hideSweetAlert{0%{transform: scale(1); -webkit-transform: scale(1);} 100%{transform: scale(0.5); -webkit-transform: scale(0.5);} }
@-moz-keyframes hideSweetAlert{0%{transform: scale(1); -webkit-transform: scale(1);} 100%{transform: scale(0.5); -webkit-transform: scale(0.5);} }
@keyframes hideSweetAlert{0%{transform: scale(1); -webkit-transform: scale(1);} 100%{transform: scale(0.5); -webkit-transform: scale(0.5);} }
.showSweetAlert{-webkit-animation: showSweetAlert 0.3s; -moz-animation: showSweetAlert 0.3s; animation: showSweetAlert 0.3s;}
.hideSweetAlert{-webkit-animation: hideSweetAlert 0.2s; -moz-animation: hideSweetAlert 0.2s; animation: hideSweetAlert 0.2s;}
@-webkit-keyframes animateSuccessTip{0%{width: 0; left: 1px; top: 19px;} 54%{width: 0; left: 1px; top: 19px;} 70%{width: 50px; left: -8px; top: 37px;} 84%{width: 17px; left: 21px; top: 48px;} 100%{width: 25px; left: 14px; top: 45px;} }
@-moz-keyframes animateSuccessTip{0%{width: 0; left: 1px; top: 19px;} 54%{width: 0; left: 1px; top: 19px;} 70%{width: 50px; left: -8px; top: 37px;} 84%{width: 17px; left: 21px; top: 48px;} 100%{width: 25px; left: 14px; top: 45px;} }
@keyframes animateSuccessTip{0%{width: 0; left: 1px; top: 19px;} 54%{width: 0; left: 1px; top: 19px;} 70%{width: 50px; left: -8px; top: 37px;} 84%{width: 17px; left: 21px; top: 48px;} 100%{width: 25px; left: 14px; top: 45px;} }
@-webkit-keyframes animateSuccessLong{0%{width: 0; right: 46px; top: 54px;} 65%{width: 0; right: 46px; top: 54px;} 84%{width: 55px; right: 0px; top: 35px;} 100%{width: 47px; right: 8px; top: 38px;} }
@-moz-keyframes animateSuccessLong{0%{width: 0; right: 46px; top: 54px;} 65%{width: 0; right: 46px; top: 54px;} 84%{width: 55px; right: 0px; top: 35px;} 100%{width: 47px; right: 8px; top: 38px;} }
@keyframes animateSuccessLong{0%{width: 0; right: 46px; top: 54px;} 65%{width: 0; right: 46px; top: 54px;} 84%{width: 55px; right: 0px; top: 35px;} 100%{width: 47px; right: 8px; top: 38px;} }
@-webkit-keyframes rotatePlaceholder{0%{transform: rotate(-45deg); -webkit-transform: rotate(-45deg);} 5%{transform: rotate(-45deg); -webkit-transform: rotate(-45deg);} 12%{transform: rotate(-405deg); -webkit-transform: rotate(-405deg);} 100%{transform: rotate(-405deg); -webkit-transform: rotate(-405deg);} }
@-moz-keyframes rotatePlaceholder{0%{transform: rotate(-45deg); -webkit-transform: rotate(-45deg);} 5%{transform: rotate(-45deg); -webkit-transform: rotate(-45deg);} 12%{transform: rotate(-405deg); -webkit-transform: rotate(-405deg);} 100%{transform: rotate(-405deg); -webkit-transform: rotate(-405deg);} }
@keyframes rotatePlaceholder{0%{transform: rotate(-45deg); -webkit-transform: rotate(-45deg);} 5%{transform: rotate(-45deg); -webkit-transform: rotate(-45deg);} 12%{transform: rotate(-405deg); -webkit-transform: rotate(-405deg);} 100%{transform: rotate(-405deg); -webkit-transform: rotate(-405deg);} }
.animateSuccessTip{-webkit-animation: animateSuccessTip 0.75s; -moz-animation: animateSuccessTip 0.75s; animation: animateSuccessTip 0.75s;}
.animateSuccessLong{-webkit-animation: animateSuccessLong 0.75s; -moz-animation: animateSuccessLong 0.75s; animation: animateSuccessLong 0.75s;}
.icon.success.animate::after{-webkit-animation: rotatePlaceholder 4.25s ease-in; -moz-animation: rotatePlaceholder 4.25s ease-in; animation: rotatePlaceholder 4.25s ease-in;}
@-webkit-keyframes animateErrorIcon{0%{transform: rotateX(100deg); -webkit-transform: rotateX(100deg); opacity: 0;} 100%{transform: rotateX(0deg); -webkit-transform: rotateX(0deg); opacity: 1;} }
@-moz-keyframes animateErrorIcon{0%{transform: rotateX(100deg); -webkit-transform: rotateX(100deg); opacity: 0;} 100%{transform: rotateX(0deg); -webkit-transform: rotateX(0deg); opacity: 1;} }
@keyframes animateErrorIcon{0%{transform: rotateX(100deg); -webkit-transform: rotateX(100deg); opacity: 0;} 100%{transform: rotateX(0deg); -webkit-transform: rotateX(0deg); opacity: 1;} }
.animateErrorIcon{-webkit-animation: animateErrorIcon 0.5s; -moz-animation: animateErrorIcon 0.5s; animation: animateErrorIcon 0.5s;}
@-webkit-keyframes animateXMark{0%{transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0;} 50%{transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0;} 80%{transform: scale(1.15); -webkit-transform: scale(1.15); margin-top: -6px;} 100%{transform: scale(1); -webkit-transform: scale(1); margin-top: 0; opacity: 1;} }
@-moz-keyframes animateXMark{0%{transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0;} 50%{transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0;} 80%{transform: scale(1.15); -webkit-transform: scale(1.15); margin-top: -6px;} 100%{transform: scale(1); -webkit-transform: scale(1); margin-top: 0; opacity: 1;} }
@keyframes animateXMark{0%{transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0;} 50%{transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0;} 80%{transform: scale(1.15); -webkit-transform: scale(1.15); margin-top: -6px;} 100%{transform: scale(1); -webkit-transform: scale(1); margin-top: 0; opacity: 1;} }
.animateXMark{-webkit-animation: animateXMark 0.5s; -moz-animation: animateXMark 0.5s; animation: animateXMark 0.5s;}
@-webkit-keyframes pulseWarning{0%{border-color: #F8D486;} 100%{border-color: #F8BB86;} }
@-moz-keyframes pulseWarning{0%{border-color: #F8D486;} 100%{border-color: #F8BB86;} }
@keyframes pulseWarning{0%{border-color: #F8D486;} 100%{border-color: #F8BB86;} }
.pulseWarning{-webkit-animation: pulseWarning 0.75s infinite alternate; -moz-animation: pulseWarning 0.75s infinite alternate; animation: pulseWarning 0.75s infinite alternate;}
@-webkit-keyframes pulseWarningIns{0%{background-color: #F8D486;} 100%{background-color: #F8BB86;} }
@-moz-keyframes pulseWarningIns{0%{background-color: #F8D486;} 100%{background-color: #F8BB86;} }
@keyframes pulseWarningIns{0%{background-color: #F8D486;} 100%{background-color: #F8BB86;} }
.pulseWarningIns{-webkit-animation: pulseWarningIns 0.75s infinite alternate; -moz-animation: pulseWarningIns 0.75s infinite alternate; animation: pulseWarningIns 0.75s infinite alternate;}