#toast{
    position: absolute;
    background: #fff;
    top: -100px;
    right: 15px;
    border-radius: 12px;
    padding: 15px 30px 15px 20px;
    box-shadow: 0 5px 10px rgba(0,0,0,.1);
    border-left: 6px solid #461a4c;
    overflow: hidden;
    transition: .5s ease;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    -webkit-transition: .5s ease;
    -moz-transition: .5s ease;
    -ms-transition: .5s ease;
    -o-transition: .5s ease;

    .toast-content{
        display: flex;
        align-items: center;

        .message{
            display: flex;
            flex-direction: column;
            margin: 0 20px;

            .text{
                font-size: 16px;
                font-weight: 400;
                color: #666;

                &.text-1{
                    font-weight: 600;
                    color: #333;
                }
            }
        }

        .toast-icon{
            height: 30px;
            width: 30px;
            background-color: #461a4c;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 18px;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
        }
    }

    .progress{
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        width: 100%;
        background: #ddd;

        &::before{
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            height: 100%;
            width: 100%;
            background-color: #461a4c;
        }

        &.active{
            &::before{
                animation: progress 5s linear forwards;
                -webkit-animation: progress 5s linear forwards;
            }
        }
    }

    &.active{
        top: 15px;
    }
}

@keyframes progress{
    100%{
        right: 100%;
    }
}

#toast.success{
    border-left-color: #4caf50;

    .toast-content{
        .toast-icon{
            background: #4caf50;
        }
    }

    .progress{
        &::before{
            background: #4caf50;
        }
    }
}


#toast.error{
    border-left-color: #ff4d4d;

    .toast-content{
        .toast-icon{
            background: #ff4d4d;
        }
    }

    .progress{
        &::before{
            background: #ff4d4d;
        }
    }
}

#toast.info{
    border-left-color: #461a4c;

    .toast-content{
        .toast-icon{
            background: #461a4c;
        }
    }

    .progress{
        &::before{
            background: #461a4c;
        }
    }
}

#toast.warning{
    border-left-color: #ffcc00;

    .toast-content{
        .toast-icon{
            background: #ffcc00;
        }
    }

    .progress{
        &::before{
            background: #ffcc00;
        }
    }
}