.alert-wrapper {
  display:flex;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  margin: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: var(--bgModal);
  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;
  padding: 30px 30px 0;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  position: relative;
}
.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:50px;
  margin: 0 auto;
}
body.light .alert-img {
   filter: invert(70%);
}
.alert-close {
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  cursor:pointer;
  line-height:30px;
  position: absolute;
  left: 0;
  top: 0;
}
.alert-close-default {
  color: var(--colorText);
  font-size:16px;
  transition:color .5s;
  margin-left:5px;
  margin-right:auto;
  margin-top:5px;
  opacity: 0.4
}
.alert-close-default i {
  font-size:1.5em;
  transform:rotate(45deg)
}
.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;
  font-family:YekanBakh
}
.alert-title {
  font-size:18px!important;
  font-weight:400;
  font-size:15px;
  margin-bottom:10px;
  color: var(--colorText);
  align-self:center
}
.alert-message {
  font-size: 1em !important;
  color: var(--colorBright);
  font-weight:400;
  font-size:15px;
  text-align:center;
  margin-bottom:25px;
  line-height:1.6;
  align-self:center
}
.alert-button {
  min-width:140px;
  height:48px;
  border-radius:10px;
  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;
  background: var(--colorGold)
}
.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%,#FF7676 0%,#B92626 100%);
  box-shadow:0 10.42px 50px rgb(243, 110, 110);
}
.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
}
.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)
}
.error-btn:hover,
.success-btn:hover,
.warning-btn:hover,
.info-btn:hover,
.question-btn:hover {
  opacity:.5
}
.error-timer {
  background:#e5a4b4
}
.success-timer {
  background:#6edaa4
}
.warning-timer {
  background:#fcecae
}
.info-timer {
  background:#c3e6fb
}