.alert-wrapper {
  display:flex;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  padding:0 auto;
  left:0;
  top:0;
  overflow:hidden;
  position:fixed;
  background:rgb(0,0,0,.3);
  z-index:999999
}
@keyframes open-frame {
  0% {
    transform:scale(1)
  }
  25% {
    transform:scale(.95)
  }
  50% {
    transform:scale(.97)
  }
  75% {
    transform:scale(.93)
  }
  100% {
    transform:scale(1)
  }
}
.alert-frame {
  background:#fff;
  min-height:400px;
  width:300px;
  box-shadow:5px 5px 10px rgb(0,0,0,.2);
  border-radius:10px;
  animation:open-frame .3s linear
}
.alert-header {
  display:flex;
  flex-direction:row;
  height:175px;
  border-top-left-radius:5px;
  border-top-right-radius:5px
}
.alert-header-base {
  border-top-left-radius:5px;
  border-top-right-radius:5px
}
.custom-img-wrapper {
  min-height:145px;
  max-height:20rem;
  overflow:scroll;
  display:flex;
  align-items:center;
  justify-content:center
}
.alert-img {
  height:80px;
  position:absolute;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  align-self:center
}
.alert-close {
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  cursor:pointer;
  line-height:30px
}
.alert-close-default {
  color:rgb(0,0,0,.2);
  font-size:16px;
  transition:color .5s;
  margin-left:auto;
  margin-right:5px;
  margin-top:5px
}
.alert-close-circle {
  background:#e4eae7;
  color:#222;
  border-radius:17.5px;
  margin-top:-15px;
  margin-right:-15px;
  font-size:12px;
  transition:all .5s;
  margin-left:auto
}
.alert-close-circle:hover {
  background:#fff
}
.alert-close:hover {
  color:rgb(0,0,0,.5)
}
.alert-body {
  padding:30px;
  display:flex;
  flex-direction:column;
  text-align:center
}
.alert-title {
  font-size:18px!important;
  font-weight:700;
  font-size:15px;
  margin-bottom:35px;
  color:#222;
  align-self:center
}
.alert-message {
  font-size:15px!important;
  color:#666;
  font-weight:400;
  font-size:15px;
  text-align:center;
  margin-bottom:35px;
  line-height:1.6;
  align-self:center
}
.alert-button {
  min-width:140px;
  height:35px;
  border-radius:20px;
  font-weight:400;
  font-size:15px;
  color:#fff;
  border:none;
  cursor:pointer;
  transition:background .5s;
  padding:0 15px;
  align-self:center;
  display:inline-flex;
  align-items:center;
  justify-content:center
}
.alert-button:focus {
  outline:0
}
.question-buttons {
  display:flex;
  flex-direction:row;
  justify-content:center
}
.confirm-button {
  min-width:100px;
  height:35px;
  border-radius:20px;
  font-weight:400;
  font-size:15px;
  color:#fff;
  border:none;
  cursor:pointer;
  transition:background .5s;
  padding:0 15px;
  margin-right:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center
}
.confirm-button:focus {
  outline:0
}
.cancel-button {
  min-width:100px;
  height:35px;
  border-radius:20px;
  font-weight:400;
  font-size:15px;
  color:#fff;
  border:none;
  cursor:pointer;
  padding:0;
  line-height:1.6;
  transition:background .5s;
  padding:0 15px;
  display:inline-flex;
  align-items:center;
  justify-content:center
}
.cancel-button:focus {
  outline:0
}
@keyframes open-toast {
  0% {
    transform:scaleX(1) scaleY(1)
  }
  20%,
  45% {
    transform:scaleX(1.35) scaleY(.1)
  }
  65% {
    transform:scaleX(.8) scaleY(1.7)
  }
  80% {
    transform:scaleX(.6) scaleY(.85)
  }
  100% {
    transform:scaleX(1) scaleY(1)
  }
}
.toast-container {
  bottom:15px;
  right:0;
  left:0;
  position:fixed;
  z-index:999999;
  font-family:YekanBakh;
  width:100%;
  max-width:1350px;
  margin:0 auto;
  padding:15px;

  direction: ltr;
}
.toast-content {
  overflow:hidden;
  border-radius:10px;
  box-shadow:0 0 20px rgb(0,0,0,.2);
  animation:open-toast .3s linear;
  max-width:450px;
  flex-grow:1;
  direction: rtl;
}
.toast-content+.toast-content {
  margin-top:10px
}
.toast-frame {
  padding:10px 15px;
  display:flex;
  min-width:100px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  align-items:center;
  flex-wrap:wrap
}
.toast-body-img {
  height:40px
}
.toast-body {
  display:flex;
  align-items:center;
  width:100%
}
.toast-body-content {
  display:flex;
  flex-direction:column;
  width:100%;
  padding:0 10px;
  line-height:24px
}
.toast-title {
  font-weight:400;
  color:#fff;
  font-size:1.2em
}
.toast-message {
  font-weight:400;
  font-size:13px;
  color:#fff
}
.toast-close {
  color:rgb(0,0,0,.2);
  font-weight:700;
  cursor:pointer;
  transition:color .5s;
  margin-right:25px;
  transform:rotate(-45deg)
}
.toast-close i {
  font-size:22px
}
@keyframes timer {
  0% {
    width:100%
  }
  25% {
    width:75%
  }
  50% {
    width:50%
  }
  75% {
    width:25%
  }
  100% {
    width:1%
  }
}
.toast-timer {
  width:1%;
  height:5px
}
.toast-close:hover {
  color:rgb(0,0,0,.5)
}
.error-bg {
  background:radial-gradient(92.07% 92.07% at 89.6% 7.93%,#F5739A 0%,#E44C7A 100%);
  box-shadow:0 10.42px 50px rgba(224,16,156,.5)
}
.success-bg {
  background:radial-gradient(92.07% 92.07% at 89.6% 7.93%,#32AE57 0%,#1b7b53 100%);
  box-shadow:0 10.42px 50px rgba(29,128,83,.5)
}
.warning-bg {
  background:radial-gradient(92.07% 92.07% at 89.6% 7.93%,#F5B073 0%,#E47E4C 100%);
  box-shadow:0 10.42px 50px rgba(228,126,76,.5)
}
.question-bg {
  background:#779ecb
}
.error-btn:hover {
  background:#e5a4b4
}
.success-btn:hover {
  background:#6edaa4
}
.warning-btn:hover {
  background:#fcecae
}
.info-btn:hover {
  background:#c3e6fb
}
.question-btn:hover {
  background:#bacee4
}
.error-timer {
  background:#e5a4b4
}
.success-timer {
  background:#6edaa4
}
.warning-timer {
  background:#fcecae
}
.info-timer {
  background:#c3e6fb
}
.info-bg {
  background:radial-gradient(92.07% 92.07% at 89.6% 7.93%,#45D6F0 0%,#2D7BB7 100%);
  box-shadow:0 10.42px 50px rgba(45,123,183,.5)
}