/***************** sweet alert design css *****************/

.showSweetAlert[data-animation=pop] {
    -webkit-animation: none;
    animation: none;
}
.sweet-alert {
  width: 400px;
  padding: 20px 10px;
  margin-left: -210px;
  font-size: 15px;
}
.sweet-alert input {
  font-size: 15px;
}

.sweet-alert .sa-icon {
    width: 50px;
    height: 50px;
    border: 3px solid gray;
    margin: 0px auto;
}
.sweet-alert .sa-icon.sa-warning .sa-body {
    width: 3px;
    height: 23px;
    top: 9px;
    margin-left: -1px;
}
.sweet-alert .sa-icon.sa-warning .sa-dot {
    width: 5px;
    height: 5px;
    margin-left: -2px;
    bottom: 9px;
}
.sweet-alert p {
    font-size: 15px;
    padding-top: 5px;
    line-height: 1.3em;
}
.sweet-alert button {
    margin: 20px 2px 0 2px;
}
.sweet-alert h2 {
    margin: 0 !important;
    margin-top: 10px !important;
    font-size: 18px;
    line-height: 1.3em;
}
.sweet-alert button {
    font-size: 15px;
    border-radius: 4px;
    padding: 7px 10px !important;
    width: auto !important;
    min-width: 70px;
    background-color: #F6881C !important;
}
.sweet-alert button:hover {
    background-color: #EE4F25 !important;
}
.sweet-alert button.cancel {
    color: #fff;
    border: none;
    background-color: #ccc !important;
}
.sweet-alert .sa-icon.sa-error .sa-line {
    height: 3px;
    width: 23px;
    top: 24px;
}
.sweet-alert .sa-icon.sa-error .sa-line.sa-left {
    left: 14px;
}
.sweet-alert .sa-icon.sa-error .sa-line.sa-right {
    right: 13px;
}
.sweet-alert .sa-icon.sa-info::before {
    width: 3px;
    height: 23px;
    top: 9px;
    margin-left: -1px;
}
.sweet-alert .sa-icon.sa-info::after {
    top: auto;
    width: 5px;
    height: 5px;
    margin-left: -2px;
    bottom: 9px;
}
.sweet-alert .sa-icon.sa-success::before {
    display: none;
}
.sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
    width: 3px;
    height: 23px;
    top: 14px;
    margin-left: -1px;
    left: 30px;
}
.sweet-alert .sa-icon.sa-success .sa-line.sa-long {
    width: 3px;
    height: 16px;
    top: 21px;
    margin-left: -1px;
    right: 32px;
}
.sweet-alert .sa-icon.sa-success .sa-placeholder {
    display: none;
}
.sweet-alert .sa-icon.sa-success .sa-fix {
    display: none;
}
.sweet-alert .sa-icon.sa-success::after {
    display: none;
}
.sweet-alert .sa-icon.sa-custom {
    display: none;
}
.sweet-alert .sa-error-container {
    display: none;
}
.sweet-alert fieldset {
  padding: 0;
}


/*
 * media
 */
@media (max-width: 540px) {
  .sweet-alert {
      left: 50%;
      margin-left: -210px;
  }
}

@media (max-width: 420px) {
  .sweet-alert {
      width: auto;
      margin: auto;
      left: 15px;
  }
}




/*
 * Animations
 */
@-webkit-keyframes showSweetAlert {
  0% {
    transform: none;
    -webkit-transform: none; }
  45% {
    transform: none;
    -webkit-transform: none; }
  80% {
    transform: none;
    -webkit-transform: none); }
  100% {
    transform: none;
    -webkit-transform: none; } }

@keyframes showSweetAlert {
  0% {
    transform: none;
    -webkit-transform: none; }
  45% {
    transform: none;
    -webkit-transform: none; }
  80% {
    transform: none;
    -webkit-transform: none; }
  100% {
    transform: none;
    -webkit-transform: none; } }

@-webkit-keyframes hideSweetAlert {
  0% {
    transform: none;
    -webkit-transform: none; }
  100% {
    transform: none;
    -webkit-transform: none; } }

@keyframes hideSweetAlert {
  0% {
    transform: none;
    -webkit-transform: none; }
  100% {
    transform: none;
    -webkit-transform: none; } }

@-webkit-keyframes slideFromTop {
  0% {
    top: auto; }
  100% {
    top: auto; } }

@keyframes slideFromTop {
  0% {
    top: auto; }
  100% {
    top: auto; } }

@-webkit-keyframes slideToTop {
  0% {
    top: auto; }
  100% {
    top: auto; } }

@keyframes slideToTop {
  0% {
    top: auto; }
  100% {
    top: auto; } }

@-webkit-keyframes slideFromBottom {
  0% {
    top: auto; }
  100% {
    top: auto; } }

@keyframes slideFromBottom {
  0% {
    top: auto; }
  100% {
    top: auto; } }

@-webkit-keyframes slideToBottom {
  0% {
    top: auto; }
  100% {
    top: auto; } }

@keyframes slideToBottom {
  0% {
    top: auto; }
  100% {
    top: auto; } }

.showSweetAlert[data-animation=pop] {
  -webkit-animation: none;
  animation: none; }

.showSweetAlert[data-animation=none] {
  -webkit-animation: none;
  animation: none; }

.showSweetAlert[data-animation=slide-from-top] {
  -webkit-animation: none;
  animation: none; }

.showSweetAlert[data-animation=slide-from-bottom] {
  -webkit-animation: none;
  animation: none; }

.hideSweetAlert[data-animation=pop] {
  -webkit-animation: none;
  animation: none; }

.hideSweetAlert[data-animation=none] {
  -webkit-animation: none;
  animation: none; }

.hideSweetAlert[data-animation=slide-from-top] {
  -webkit-animation: none;
  animation: none; }

.hideSweetAlert[data-animation=slide-from-bottom] {
  -webkit-animation: none;
  animation: none; }

@-webkit-keyframes animateSuccessTip {
  0% {
    width: auto;
    left: auto;
    top: auto; }
  54% {
    width: auto;
    left: auto;
    top: auto; }
  70% {
    width: auto;
    left: auto;
    top: auto; }
  84% {
    width: auto;
    left: auto;
    top: auto; }
  100% {
    width: auto;
    left: auto;
    top: auto; } }

@keyframes animateSuccessTip {
  0% {
    width: auto;
    left: auto;
    top: auto; }
  54% {
    width: auto;
    left: auto;
    top: auto; }
  70% {
    width: auto;
    left: auto;
    top: auto; }
  84% {
    width: auto;
    left: auto;
    top: auto; }
  100% {
    width: auto;
    left: auto;
    top: auto; } }

@-webkit-keyframes animateSuccessLong {
  0% {
    width: auto;
    right: auto;
    top: auto; }
  65% {
    width: auto;
    right: auto;
    top: auto; }
  84% {
    width: auto;
    right: auto;
    top: auto; }
  100% {
    width: auto;
    right: auto;
    top: auto; } }

@keyframes animateSuccessLong {
  0% {
    width: auto;
    right: auto;
    top: auto; }
  65% {
    width: auto;
    right: auto;
    top: auto; }
  84% {
    width: auto;
    right: auto;
    top: auto; }
  100% {
    width: auto;
    right: auto;
    top: auto; } }

@-webkit-keyframes rotatePlaceholder {
  0% {
    transform: none;
    -webkit-transform: none; }
  5% {
    transform: none;
    -webkit-transform: none; }
  12% {
    transform: none;
    -webkit-transform: none; }
  100% {
    transform: none;
    -webkit-transform: none; } }

@keyframes rotatePlaceholder {
  0% {
    transform: none;
    -webkit-transform: none; }
  5% {
    transform: none;
    -webkit-transform: none; }
  12% {
    transform: none;
    -webkit-transform: none; }
  100% {
    transform: none;
    -webkit-transform: none; } }

.animateSuccessTip {
  -webkit-animation: none;
  animation: none; }

.animateSuccessLong {
  -webkit-animation: none;
  animation: none; }

.sa-icon.sa-success.animate::after {
  -webkit-animation: none;
  animation: none; }

@-webkit-keyframes animateErrorIcon {
  0% {
    transform: none;
    -webkit-transform: none;
    opacity: 1; }
  100% {
    transform: none;
    -webkit-transform: none;
    opacity: 1; } }

@keyframes animateErrorIcon {
  0% {
    transform: none;
    -webkit-transform: none;
    opacity: 1; }
  100% {
    transform: none;
    -webkit-transform: none;
    opacity: 1; } }

.animateErrorIcon {
  -webkit-animation: none;
  animation: none; }

@-webkit-keyframes animateXMark {
  0% {
    transform: none;
    -webkit-transform: none;
    margin-top: 0;
    opacity: 1; }
  50% {
    transform: none;
    -webkit-transform: none;
    margin-top: 0;
    opacity: 1; }
  80% {
    transform: none;
    -webkit-transform: none;
    margin-top: 0; }
  100% {
    transform: none;
    -webkit-transform: none;
    margin-top: 0;
    opacity: 1; } }

@keyframes animateXMark {
  0% {
    transform: none;
    -webkit-transform: none;
    margin-top: 0;
    opacity: 0; }
  50% {
    transform: none;
    -webkit-transform: none;
    margin-top: 0;
    opacity: 1; }
  80% {
    transform: none;
    -webkit-transform: none;
    margin-top: 0; }
  100% {
    transform: none;
    -webkit-transform: none;
    margin-top: 0;
    opacity: 1; } }

.animateXMark {
  -webkit-animation: none;
  animation: none; }

@-webkit-keyframes pulseWarning {
  0% {
    border-color: #F8BB86; }
  100% {
    border-color: #F8BB86; } }

@keyframes pulseWarning {
  0% {
    border-color: #F8BB86; }
  100% {
    border-color: #F8BB86; } }

.pulseWarning {
  -webkit-animation: none;
  animation: none; }

@-webkit-keyframes pulseWarningIns {
  0% {
    background-color: #F8BB86; }
  100% {
    background-color: #F8BB86; } }

@keyframes pulseWarningIns {
  0% {
    background-color: #F8BB86; }
  100% {
    background-color: #F8BB86; } }

.pulseWarningIns {
  -webkit-animation: none;
  animation: none; }