.toaster {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: -200px;
    z-index: 1000000;
}
.tbl {
    /*display: flex;*/
    display:-webkit-inline-box;
    align-items: center;
}
 
    .tbl img {
        height: 25px;
        margin: 0 10px 0 0;
        border-right: 1px solid #00000017;
        padding: 0 10px 0 0;
    }
 
    .tbl p {
        margin: 0;
        color: #fff;
        letter-spacing: .3px;
        text-shadow: 1px 1px 1px #00000017;
    }
.toaster-blk {
    width: 330px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 15px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.toaster-show {
    bottom: 70px;
    transition: bottom 0.6s ease-in-out 0s
}

.toaster-hide {
    bottom: -200px;
    transition: bottom 0.6s ease-in-out 0s
}
.toaster-blk a {
    position: absolute;
    right: 15px;
}

    .toaster-blk a img {
        height: 16px;
        opacity: 0.3;
    }

.toaster-success {
    background: #06bb0d;
    box-shadow: 0px 0px 8px #38b83d26;
    border: 1px solid #38b83d3d;
}

.toaster-warning {
    background: #ff9600;
    box-shadow: 0px 0px 8px #e4a44a4d;
    border: 1px solid #e4a44aa1;
}

.toaster-error {
    background: #ff4437;
    box-shadow: 0px 0px 8px #913d373b;
    border: 1px solid #eb6c639e;
}
.toaster-info {
    background: #5591ff;
    box-shadow: 0px 0px 8px #216bf338;
    border: 1px solid #5591ff;
}
.toast-line div {
    position: absolute;
    left: 0;
    height: 3px;
    background: #00000024;
    animation: lineH 5s 0.5s infinite linear;
    bottom: -1px;
    border-radius: 0px 0 0 10px;
}