.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 {
    top: 90px;
    right:0;
    left:0;
    position:fixed;
    z-index:999999;
    font-family:YekanBakh;
    width:100%;
    max-width:1350px;
    margin:0 auto;
    padding:15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    pointer-events: none;
  }
  .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;
    display:flex;
    flex-direction:column;
    pointer-events: visible
  }
  .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;
    direction: ltr;
    text-align: right;
  }
  .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;
    border-radius: 100px
  }
  .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)
  }