@keyframes slideFromTop{0%{top:0}
to{top:50%}
}
@keyframes hideFromTop{0%{top:50%}
to{top:0;opacity:0}
}
@keyframes slideFromBottom{0%{top:80%}
to{top:50%}
}
@keyframes hideFromBottom{0%{top:50%}
to{top:80%;opacity:0}
}
@keyframes showSweetAlert{0%{transform:scale(.5)}
45%{transform:scale(1.05)}
80%{transform:scale(.95)}
to{transform:scale(1)}
}
@keyframes hideSweetAlert{0%{transform:scale(1)}
45%{transform:scale(1.05)}
80%{transform:scale(.95)}
to{opacity:0;transform:scale(0)}
}
@keyframes layerFadeIn{0%{opacity:0;transform:scale(.5)}
to{opacity:1;transform:scale(1)}
}
@keyframes hideFadeIn{0%{opacity:1;transform:scale(1)}
to{opacity:0;transform:scale(.5)}
}
@keyframes layer-fadeInUpBig{0%{opacity:0;transform:translateY(2000px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes hide-fadeInUpBig{0%{opacity:1;transform:translateY(0)}
to{opacity:0;transform:translateY(2000px)}
}
@keyframes layer-rollIn{0%{opacity:0;transform:translateX(-100%) rotate(-120deg)}
to{opacity:1;transform:translateX(0) rotate(0)}
}
@keyframes hide-rollIn{0%{opacity:1;transform:translateX(0) rotate(0)}
to{opacity:0;transform:translateX(-100%) rotate(-120deg)}
}
@keyframes layer-fadeIn{0%{opacity:0}
to{opacity:1}
}
@keyframes hide-fadeIn{0%{opacity:1}
to{opacity:0}
}
@keyframes layer-shake{0%,to{transform:translateX(0)}
10%,30%,50%,70%,90%{transform:translateX(-10px)}
20%,40%,60%,80%{transform:translateX(10px)}
}
@keyframes hide-shake{0%,to{transform:translateX(10px)}
10%,30%,50%,70%,90%{transform:translateX(-10px)}
20%,40%,60%,80%{transform:translateX(0)}
to{opacity:0}
}
@keyframes layer-spread{0%{opacity:0;transform:scaleX(0)}
to{opacity:1;transform:scaleX(1)}
}
@keyframes hide-spread{0%{transform:scaleX(1)}
50%{transform:scaleX(.5)}
to{opacity:0;transformX:scaleX(0)}
}
.showAlert[data-animation=layerFadeIn]{animation:layerFadeIn .3s;-webkit-animation:layerFadeIn .3s;-moz-animation:layerFadeIn .3s;-ms-animation:layerFadeIn .3s;-o-animation:layerFadeIn .3s}
.showAlert[data-animation=showSweetAlert]{animation:showSweetAlert .3s;-webkit-animation:showSweetAlert .3s;-moz-animation:showSweetAlert .3s;-ms-animation:showSweetAlert .3s;-o-animation:showSweetAlert .3s}
.showAlert[data-animation=none]{animation:none;-webkit-animation:none;-moz-animation:none;-ms-animation:none;-o-animation:none}
.showAlert[data-animation=slideFromTop]{animation:slideFromTop .3s;-webkit-animation:slideFromTop .3s;-moz-animation:slideFromTop .3s;-ms-animation:slideFromTop .3s;-o-animation:slideFromTop .3s}
.showAlert[data-animation=slideFromBottom]{animation:slideFromBottom .2s;-webkit-animation:slideFromBottom .2s;-moz-animation:slideFromBottom .2s;-ms-animation:slideFromBottom .2s;-o-animation:slideFromBottom .2s}
.showAlert[data-animation=layer-fadeInUpBig]{animation:layer-fadeInUpBig .2s;-webkit-animation:layer-fadeInUpBig .2s;-moz-animation:layer-fadeInUpBig .2s;-ms-animation:layer-fadeInUpBig .2s;-o-animation:layer-fadeInUpBig .2s}
.showAlert[data-animation=layer-rollIn]{animation:layer-rollIn .3s;-webkit-animation:layer-rollIn .3s;-moz-animation:layer-rollIn .3s;-ms-animation:layer-rollIn .3s;-o-animation:layer-rollIn .3s}
.showAlert[data-animation=layer-fadeIn]{animation:layer-fadeIn .3s;-webkit-animation:layer-fadeIn .3s;-moz-animation:layer-fadeIn .3s;-ms-animation:layer-fadeIn .3s;-o-animation:layer-fadeIn .3s}
.showAlert[data-animation=layer-shake]{animation:layer-shake .3s;-webkit-animation:layer-shake .3s;-moz-animation:layer-shake .3s;-ms-animation:layer-shake .3s;-o-animation:layer-shake .3s}
.showAlert[data-animation=layer-spread]{animation:layer-spread .2s;-webkit-animation:layer-spread .2s;-moz-animation:layer-spread .2s;-ms-animation:layer-spread .2s;-o-animation:layer-spread .2s}
.hideAlert[data-animation=layer-spread]{animation:hide-spread .5s forwards;-webkit-animation:hide-spread .5s forwards;-moz-animation:hide-spread .5s forwards;-ms-animation:hide-spread .5s forwards;-o-animation:hide-spread .5s forwards}
.hideAlert[data-animation=slideFromTop]{animation:hideFromTop .2s forwards;-webkit-animation:hideFromTop .2s forwards;-moz-animation:hideFromTop .2s forwards;-ms-animation:hideFromTop .2s forwards;-o-animation:hideFromTop .2s forwards}
.hideAlert[data-animation=slideFromBottom]{animation:hideFromBottom .2s forwards;-webkit-animation:hideFromBottom .2s forwards;-moz-animation:hideFromBottom .2s forwards;-ms-animation:hideFromBottom .2s forwards;-o-animation:hideFromBottom .2s forwards}
.hideAlert[data-animation=showSweetAlert]{animation:hideSweetAlert .2s forwards;-webkit-animation:hideSweetAlert .2s forwards;-moz-animation:hideSweetAlert .2s forwards;-ms-animation:hideSweetAlert .2s forwards;-o-animation:hideSweetAlert .2s forwards}
.hideAlert[data-animation=layerFadeIn]{animation:hideFadeIn .2s forwards;-webkit-animation:hideFadeIn .2s forwards;-moz-animation:hideFadeIn .2s forwards;-ms-animation:hideFadeIn .2s forwards;-o-animation:hideFadeIn .2s forwards}
.hideAlert[data-animation=layer-fadeIn]{animation:hide-fadeIn .2s forwards;-webkit-animation:hide-fadeIn .2s forwards;-moz-animation:hide-fadeIn .2s forwards;-ms-animation:hide-fadeIn .2s forwards;-o-animation:hide-fadeIn .2s forwards}
.hideAlert[data-animation=layer-fadeInUpBig]{animation:hide-fadeInUpBig .2s forwards;-webkit-animation:hide-fadeInUpBig .2s forwards;-moz-animation:hide-fadeInUpBig .2s forwards;-ms-animation:hide-fadeInUpBig .2s forwards;-o-animation:hide-fadeInUpBig .2s forwards}
.hideAlert[data-animation=layer-rollIn]{animation:hide-rollIn .2s forwards;-webkit-animation:hide-rollIn .2s forwards;-moz-animation:hide-rollIn .2s forwards;-ms-animation:hide-rollIn .2s forwards;-o-animation:hide-rollIn .2s forwards}
.hideAlert[data-animation=layer-shake]{animation:hide-shake .2s forwards;-webkit-animation:hide-shake .2s forwards;-moz-animation:hide-shake .2s forwards;-ms-animation:hide-shake .2s forwards;-o-animation:hide-shake .2s forwards}

.msg-layer-bg{position:fixed;top:0;z-index:999;width:100%;height:100%;background:#000;opacity:.4;}
.msg-layer{position:fixed;top:50%;left:50%;z-index:9999;max-width:50pc;border-radius:5px;background:#fff;text-align:center;opacity:1}
.msg-con{padding:10px 20px 0px 30px;word-break:break-all;text-align:left}
.layer-close{position:absolute;top:2px;right:10px;display:none;height:40px;color:#ffffff;font-size:2pc;line-height:40px;cursor:pointer}
.msg-layer>h5{font-size:16px;line-height:50px;height:50px;background:#ff6c1c;color:#ffffff;font-weight:400;border-radius:5px 5px 0 0;margin-bottom:10px}
.layer-btn{padding:1pc 0 10px;text-align:center}
.layer-btn>div{display:none;width:75pt;height:36px;border-radius:5px;color:#fff;text-align:center;font-size:14px;line-height:36px;cursor:pointer}
.layer-cancel{background:#ccc9c9}
.layer-commit{margin-left:10px;background:#50bce0}