.fade-enter,
.fade-appear {
  animation-duration: .3s;
  animation-fill-mode: both;
  opacity: 0;
  animation-play-state: paused;
}
.fade-leave {
  animation-duration: .3s;
  animation-fill-mode: both;
  animation-play-state: paused;
}
/** generate for simple css **/
.fade-in,
.fade-out {
  animation-duration: .3s;
  animation-fill-mode: both;
}
.fade-in,
.fade-enter.fade-enter-active,
.fade-appear.fade-appear-active {
  animation-name: fadeIn;
  animation-play-state: running;
}
.fade-out,
.fade-leave.fade-leave-active {
  animation-name: fadeOut;
  animation-play-state: running;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.slide-up-enter,
.slide-up-appear {
  animation-duration: .3s;
  animation-fill-mode: both;
  opacity: 0;
  animation-play-state: paused;
}
.slide-up-leave {
  animation-duration: .3s;
  animation-fill-mode: both;
  animation-play-state: paused;
}
/** generate for simple css **/
.slide-up-in,
.slide-up-out {
  animation-duration: .3s;
  animation-fill-mode: both;
}
.slide-up-in,
.slide-up-enter.slide-up-enter-active,
.slide-up-appear.slide-up-appear-active {
  animation-name: slideUpIn;
  animation-play-state: running;
}
.slide-up-out,
.slide-up-leave.slide-up-leave-active {
  animation-name: slideUpOut;
  animation-play-state: running;
}
.slide-down-enter,
.slide-down-appear {
  animation-duration: .3s;
  animation-fill-mode: both;
  opacity: 0;
  animation-play-state: paused;
}
.slide-down-leave {
  animation-duration: .3s;
  animation-fill-mode: both;
  animation-play-state: paused;
}
/** generate for simple css **/
.slide-down-in,
.slide-down-out {
  animation-duration: .3s;
  animation-fill-mode: both;
}
.slide-down-in,
.slide-down-enter.slide-down-enter-active,
.slide-down-appear.slide-down-appear-active {
  animation-name: slideDownIn;
  animation-play-state: running;
}
.slide-down-out,
.slide-down-leave.slide-down-leave-active {
  animation-name: slideDownOut;
  animation-play-state: running;
}
.slide-left-enter,
.slide-left-appear {
  animation-duration: .3s;
  animation-fill-mode: both;
  opacity: 0;
  animation-play-state: paused;
}
.slide-left-leave {
  animation-duration: .3s;
  animation-fill-mode: both;
  animation-play-state: paused;
}
/** generate for simple css **/
.slide-left-in,
.slide-left-out {
  animation-duration: .3s;
  animation-fill-mode: both;
}
.slide-left-in,
.slide-left-enter.slide-left-enter-active,
.slide-left-appear.slide-left-appear-active {
  animation-name: slideLeftIn;
  animation-play-state: running;
}
.slide-left-out,
.slide-left-leave.slide-left-leave-active {
  animation-name: slideLeftOut;
  animation-play-state: running;
}
.slide-right-enter,
.slide-right-appear {
  animation-duration: .3s;
  animation-fill-mode: both;
  opacity: 0;
  animation-play-state: paused;
}
.slide-right-leave {
  animation-duration: .3s;
  animation-fill-mode: both;
  animation-play-state: paused;
}
/** generate for simple css **/
.slide-right-in,
.slide-right-out {
  animation-duration: .3s;
  animation-fill-mode: both;
}
.slide-right-in,
.slide-right-enter.slide-right-enter-active,
.slide-right-appear.slide-right-appear-active {
  animation-name: slideRightIn;
  animation-play-state: running;
}
.slide-right-out,
.slide-right-leave.slide-right-leave-active {
  animation-name: slideRightOut;
  animation-play-state: running;
}
/**slide**/
@keyframes slideUpIn {
  0% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(0.8);
  }
  100% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }
}
@keyframes slideUpOut {
  0% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(0.8);
  }
}
@keyframes slideDownIn {
  0% {
    opacity: 0;
    transform-origin: 100% 100%;
    transform: scaleY(0.8);
  }
  100% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: scaleY(1);
  }
}
@keyframes slideDownOut {
  0% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform-origin: 100% 100%;
    transform: scaleY(0.8);
  }
}
@keyframes slideLeftIn {
  0% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleX(0.8);
  }
  100% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleX(1);
  }
}
@keyframes slideLeftOut {
  0% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleX(0.8);
  }
}
@keyframes slideRightIn {
  0% {
    opacity: 0;
    transform-origin: 100% 0%;
    transform: scaleX(0.8);
  }
  100% {
    opacity: 1;
    transform-origin: 100% 0%;
    transform: scaleX(1);
  }
}
@keyframes slideRightOut {
  0% {
    opacity: 1;
    transform-origin: 100% 0%;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform-origin: 100% 0%;
    transform: scaleX(0.8);
  }
}
.swing-enter,
.swing-appear {
  animation-duration: .3s;
  animation-fill-mode: both;
  opacity: 0;
  animation-play-state: paused;
}
.swing-leave {
  animation-duration: .3s;
  animation-fill-mode: both;
  animation-play-state: paused;
}
/** generate for simple css **/
.swing-in,
.swing-out {
  animation-duration: .3s;
  animation-fill-mode: both;
}
.swing-in,
.swing-enter.swing-enter-active,
.swing-appear.swing-appear-active {
  animation-name: swingIn;
  animation-play-state: running;
}
.swing-out,
.swing-leave.swing-leave-active {
  animation-name: swingOut;
  animation-play-state: running;
}
@keyframes swingIn {
  0%,
  100% {
    transform: translateX(0px);
  }
  20% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(10px);
  }
  60% {
    transform: translateX(-5px);
  }
  80% {
    transform: translateX(5px);
  }
}
.zoom-enter,
.zoom-appear {
  animation-duration: .3s;
  animation-fill-mode: both;
  opacity: 0;
  animation-play-state: paused;
}
.zoom-leave {
  animation-duration: .3s;
  animation-fill-mode: both;
  animation-play-state: paused;
}
/** generate for simple css **/
.zoom-in,
.zoom-out {
  animation-duration: .3s;
  animation-fill-mode: both;
}
.zoom-in,
.zoom-enter.zoom-enter-active,
.zoom-appear.zoom-appear-active {
  animation-name: zoomIn;
  animation-play-state: running;
}
.zoom-out,
.zoom-leave.zoom-leave-active {
  animation-name: zoomOut;
  animation-play-state: running;
}
.zoom-up-enter,
.zoom-up-appear {
  animation-duration: .3s;
  animation-fill-mode: both;
  opacity: 0;
  animation-play-state: paused;
}
.zoom-up-leave {
  animation-duration: .3s;
  animation-fill-mode: both;
  animation-play-state: paused;
}
/** generate for simple css **/
.zoom-up-in,
.zoom-up-out {
  animation-duration: .3s;
  animation-fill-mode: both;
}
.zoom-up-in,
.zoom-up-enter.zoom-up-enter-active,
.zoom-up-appear.zoom-up-appear-active {
  animation-name: zoomUpIn;
  animation-play-state: running;
}
.zoom-up-out,
.zoom-up-leave.zoom-up-leave-active {
  animation-name: zoomUpOut;
  animation-play-state: running;
}
.zoom-down-enter,
.zoom-down-appear {
  animation-duration: .3s;
  animation-fill-mode: both;
  opacity: 0;
  animation-play-state: paused;
}
.zoom-down-leave {
  animation-duration: .3s;
  animation-fill-mode: both;
  animation-play-state: paused;
}
/** generate for simple css **/
.zoom-down-in,
.zoom-down-out {
  animation-duration: .3s;
  animation-fill-mode: both;
}
.zoom-down-in,
.zoom-down-enter.zoom-down-enter-active,
.zoom-down-appear.zoom-down-appear-active {
  animation-name: zoomDownIn;
  animation-play-state: running;
}
.zoom-down-out,
.zoom-down-leave.zoom-down-leave-active {
  animation-name: zoomDownOut;
  animation-play-state: running;
}
.zoom-left-enter,
.zoom-left-appear {
  animation-duration: .3s;
  animation-fill-mode: both;
  opacity: 0;
  animation-play-state: paused;
}
.zoom-left-leave {
  animation-duration: .3s;
  animation-fill-mode: both;
  animation-play-state: paused;
}
/** generate for simple css **/
.zoom-left-in,
.zoom-left-out {
  animation-duration: .3s;
  animation-fill-mode: both;
}
.zoom-left-in,
.zoom-left-enter.zoom-left-enter-active,
.zoom-left-appear.zoom-left-appear-active {
  animation-name: zoomLeftIn;
  animation-play-state: running;
}
.zoom-left-out,
.zoom-left-leave.zoom-left-leave-active {
  animation-name: zoomLeftOut;
  animation-play-state: running;
}
.zoom-right-enter,
.zoom-right-appear {
  animation-duration: .3s;
  animation-fill-mode: both;
  opacity: 0;
  animation-play-state: paused;
}
.zoom-right-leave {
  animation-duration: .3s;
  animation-fill-mode: both;
  animation-play-state: paused;
}
/** generate for simple css **/
.zoom-right-in,
.zoom-right-out {
  animation-duration: .3s;
  animation-fill-mode: both;
}
.zoom-right-in,
.zoom-right-enter.zoom-right-enter-active,
.zoom-right-appear.zoom-right-appear-active {
  animation-name: zoomRightIn;
  animation-play-state: running;
}
.zoom-right-out,
.zoom-right-leave.zoom-right-leave-active {
  animation-name: zoomRightOut;
  animation-play-state: running;
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes zoomOut {
  0% {
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}
@keyframes zoomUpIn {
  0% {
    opacity: 0;
    transform-origin: 50% 0%;
    transform: scale(0.8);
  }
  100% {
    transform-origin: 50% 0%;
    transform: scale(1);
  }
}
@keyframes zoomUpOut {
  0% {
    transform-origin: 50% 0%;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 0%;
    transform: scale(0.8);
  }
}
@keyframes zoomLeftIn {
  0% {
    opacity: 0;
    transform-origin: 0% 50%;
    transform: scale(0.8);
  }
  100% {
    transform-origin: 0% 50%;
    transform: scale(1);
  }
}
@keyframes zoomLeftOut {
  0% {
    transform-origin: 0% 50%;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform-origin: 0% 50%;
    transform: scale(0.8);
  }
}
@keyframes zoomRightIn {
  0% {
    opacity: 0;
    transform-origin: 100% 50%;
    transform: scale(0.8);
  }
  100% {
    transform-origin: 100% 50%;
    transform: scale(1);
  }
}
@keyframes zoomRightOut {
  0% {
    transform-origin: 100% 50%;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform-origin: 100% 50%;
    transform: scale(0.8);
  }
}
@keyframes zoomDownIn {
  0% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0.8);
  }
  100% {
    transform-origin: 50% 100%;
    transform: scale(1);
  }
}
@keyframes zoomDownOut {
  0% {
    transform-origin: 50% 100%;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0.8);
  }
}
.salt-confirm > button,
.salt-sweetalert > button {
  float: right;
  margin-right: 10px;
}
.salt-alert-container {
  position: relative;
  text-align: center;
}
.salt-alert-container i {
  font-size: 60px;
  position: absolute;
  top: 50%;
  margin-top: -40px;
  left: 10%;
}
.salt-alert-container > div {
  float: left;
  margin-left: 30%;
  margin-bottom: 20px;
  padding-left: 20px;
  width: 66%;
  border-left: 1px dashed #999;
  text-align: left;
}
.salt-alert-container .icon-success {
  color: #7ed321;
}
.salt-alert-container .icon-info {
  color: #5bc0de;
}
.salt-alert-container .icon-warning {
  color: #f0ad4e;
}
.salt-alert-container .icon-danger {
  color: #d0021b;
}