.message-alert-popup{
    position: fixed;
    bottom: -6rem;
    left:2rem;
    width: 35rem;
    max-height:20rem;
    background: #fff;
    box-shadow: 0 0 4rem 0 rgba(0, 0, 0, 0.5);
    border-radius:1rem;
    visibility: hidden;
    z-index: 15;
    opacity: 0;
    transition:all .2s ease-in;


    @media all and (max-width: 350px) {
        left:0;
        bottom: 1rem !important;
        width: 100%;
        box-sizing:content-box;
    }

    @media all and (max-width: 400px) {
        width: 100% !important;
        left:0 !important;
        bottom: 0 !important;
        border-radius:1rem 1rem 0 0 !important;
    }

    &.show{
        visibility: visible;
        z-index: 15;
        bottom: 2rem;
        opacity: 1;


    }

    &.success{
        color:$color_blue_normal;
        & .icon{
            &::before{
                content: "\f10d";
                padding: 1rem 1rem;
            }
        }
    }
    &.failed{
        color:$color_red_normal ;
        & .icon{
            &::before{
                content: "\f071";
                padding: 1rem .8rem;
            }
        }
    }
    &.done{
        color:green;
        & .icon{
            &::before{
                content: "\f00c";
                padding: 1rem .8rem;
            }
        }
    }

    & .header{
        padding: .5rem 1rem;
        border-bottom: .1rem solid #ddd;

        & .title{
            font-size: 1.4rem;
            font-weight: 600;
        }

        & .iconbox{
            overflow: hidden;
            width:3.5em;
            height:3.5rem;
            background: #eee;
            border-radius: 50rem;
            transition: all .2s linear;

            & i{
                font-size: 1.5rem;
                font-style: normal;

                &.fa-close{
                    color: #444;
                }
            }

            &:nth-child(3){
                background: #fff;

                &:hover{
                    background: $color_blue_normal_2;
                    & i{
                        &.fa-close{
                            color: $color_blue_normal;
                        }
                    }
                }
            }
        }
    }

    & .message{
        padding: 1rem 1.5rem;
        font-size: 1.4rem;
        color: #333;
        // text-align: justify;
        // line-height: 0.7rem ;
    }
}