#notify-container {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
}

@media (max-width: 692px) {
    #notify-container {
        right: 50%;
        transform: translateX(50%);
    }
}

.toast {
    position: relative;
    padding: 0 20px;
    min-width: 320px;
    max-width: 320px;
    min-height: 84px;
    height: auto;
    background: #fff;
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 1px 10px #0000001a, 0 2px 15px #0000000d;
    transition: all .4s;
    animation: bounceIn 0.2s ease-in-out;
    cursor: pointer;
    user-select: none;
    z-index: 2;
}

.toast.hide {
    animation: bounceOut .4s;
    z-index: 1;
}

.toast.toast__success {
    background: #fff linear-gradient(to bottom,#acfbc145,#e8ffee1c 60%,#fff0);
}

.toast.toast__error {
    background: #fff linear-gradient(to bottom,#fbacac45,#ffe8e81c 60%,#fff0);
}

.toast__container {
    position: relative;
    display: flex;
    align-items: center;
    min-height: inherit;
    padding: 20px 0;
}

/* body */

.toast__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 46px;
    min-height: 46px;
    border-radius: 12px;
    margin-right: 10px;
    color: #fff;
}

.toast__icon i {
    /* animation: bounceIn 0.2s ease-in-out;
    animation-delay: 0.2s; */
    font-size: 21px;
}

.toast__success .toast__icon {
    background: #4add6f;
}

.toast__error .toast__icon {
    background: #e74c3c;
}

.toast__container-body {
    font-size: 14px;
    word-wrap: anywhere;
}

.toast__container-body .title {
    font-weight: 500;
    margin-bottom: 3px;
    word-wrap: anywhere;
}

.toast__success .toast__container-body .title {
    color: #39bf5b;
}

.toast__error .toast__container-body .title {
    color: #e74c3c;
}

/* timeline */

.toast__timeline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 999px;
    overflow: hidden;
}

.toast__timeline-inner {
    width: 100%;
    height: 100%;
    animation: timeline var(--duration) linear forwards;
}

.toast__success .toast__timeline {
    background: rgba(7, 188, 12, .20);
}

.toast__success .toast__timeline-inner {
    background: #4add6f;
}

.toast__error .toast__timeline {
    background: rgba(231, 76, 60, .50);
}

.toast__error .toast__timeline-inner {
    background: #e74c3c;
}

@keyframes timeline {
    from {
        width: inherit;
    }

    to {
        width: 0;
    }
}

@keyframes bounceIn {
    0%,
    20%,
    50%,
    80%,
    100% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }

    50% {
        transform: scale3d(0.9, 0.9, 0.9);
    }

    80% {
        transform: scale3d(1.03, 1.03, 1.03);
    }

    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

@keyframes bounceOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px);
    }
}