.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;
    flex-basis: 200px;
    flex-grow: 1;
}
.toast-title {
    font-weight:400;
    color:#fff;
    font-size:1.2em
}
.toast-message {
    font-weight:400;
    font-size:13px;
    color:#fff;
    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)
}