/*! * toasting v0.1 | MIT License | https://github.com/tharith-p/toasting */

#tg-container {
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: fixed;
    width: auto;
    z-index: 999999
}

    #tg-container * {
        margin: 0;
        padding: 0
    }

    #tg-container *, #tg-container ::before, #tg-container ::after {
        box-sizing: border-box
    }

    #tg-container .tg-toast {
        align-self: flex-end;
        display: inline-block;
        overflow: auto;
        animation-duration: .3s;
        animation-name: toasting;
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }

        #tg-container .tg-toast.hover\:pause:hover .progress-bar {
            animation-play-state: paused
        }

        #tg-container .tg-toast a, #tg-container .tg-toast a:hover {
            color: #549edb !important;
            text-decoration: none !important
        }

        #tg-container .tg-toast > div {
            background-color: #fff;
            min-width: 200px;
            max-width: 400px;
            width:350px;
            margin: 5px 20px;
            padding: 15px 15px;
            border-radius: 8px;
            box-shadow: 0 1px 6px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.19);
            position: relative;
            cursor: pointer;
            overflow-y: hidden
        }

            #tg-container .tg-toast > div.img {
                padding: 15px 15px 15px 60px
            }

            #tg-container .tg-toast > div.tg-success {
                background-color: #51c625
            }

                #tg-container .tg-toast > div.tg-success .tg-title, #tg-container .tg-toast > div.tg-success .tg-text {
                    color: #fff
                }

            #tg-container .tg-toast > div.tg-warning {
                background-color: #db9215
            }

                #tg-container .tg-toast > div.tg-warning .tg-title, #tg-container .tg-toast > div.tg-warning .tg-text {
                    color: #fff
                }

            #tg-container .tg-toast > div.tg-error {
                background-color: #db2b1d
            }

                #tg-container .tg-toast > div.tg-error .tg-title, #tg-container .tg-toast > div.tg-error .tg-text {
                    color: #fff
                }

            #tg-container .tg-toast > div.tg-info {
                background-color: #27abdb
            }

                #tg-container .tg-toast > div.tg-info .tg-title, #tg-container .tg-toast > div.tg-info .tg-text {
                    color: #fff
                }

            #tg-container .tg-toast > div .progress-bar {
                opacity: .5;
                left: 0;
                right: 0;
                bottom: 0;
                height: 3px;
                position: absolute;
                background: gray
            }

                #tg-container .tg-toast > div .progress-bar.rainbow {
                    opacity: .6;
                    background: #002024;
                    background: linear-gradient(45deg, rgb(0, 32, 36) 0%, rgb(167, 44, 134) 48%, rgb(0, 212, 255) 100%)
                }

                #tg-container .tg-toast > div .progress-bar.error {
                    opacity: .9;
                    background: #db2b1d
                }

                #tg-container .tg-toast > div .progress-bar.warning {
                    opacity: .9;
                    background: #db9215
                }

                #tg-container .tg-toast > div .progress-bar.info {
                    opacity: .9;
                    background: #27abdb
                }

                #tg-container .tg-toast > div .progress-bar.success {
                    opacity: .9;
                    background: #51c625
                }

            #tg-container .tg-toast > div .tg-title {
                font-weight: 700;
                font-size: 15px;
                color: #616161
            }

            #tg-container .tg-toast > div .tg-text {
                font-size: 14px;
                line-height: 20px;
                font-size: 14px;
                font-weight: 400;
                color: #616161
            }

            #tg-container .tg-toast > div .tg-icon {
                top: 50%;
                left: 15px;
                width: 30px;
                position: absolute;
                transform: translateY(-50%)
            }

    #tg-container .tg-fadeOut {
        animation-name: toastingFadeOut;
        animation-duration: .6s;
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-fill-mode: forwards;
        overflow: hidden
    }

@keyframes toasting {
    0% {
        transform: translate3d(400px, 0, 0);
        opacity: 0
    }

    50% {
        opacity: 1
    }

    80% {
        transform: translate3d(-15px, 0, 0)
    }

    100% {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes toastingFadeOut {
    0% {
        transform: translate3d(0, 0, 0)
    }

    15% {
        transform: translate3d(-15px, 0, 0)
    }

    40% {
        opacity: 1
    }

    50% {
        transform: translate3d(400px, 0, 0);
        opacity: 0;
        max-height: 250px
    }

    100% {
        transform: translate3d(400px, 0, 0);
        opacity: 0;
        max-height: 0
    }
}