body > #notification-container{

    display: flex;
    position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;

    flex-direction: column;
    flex-wrap: nowrap;

    z-index: 200;
    pointer-events: none;


    .notification-element{
        display: block;
        position: relative;
            margin: .2em auto;
            padding: 0 1em;

        border-radius: 3px;
        border: 1px solid #ddd;
        border-bottom: 1px solid #bbb;
        box-shadow: inset 0 0 1em #eee;

        background-color: #fff;

        pointer-events: all;


        // DIFFERENTS THEMES
        strong[class]{

            padding-left: 1.5em;

            &:before{
                content: '';
                    display: inline-block;
                    position: absolute;
                        top: 1.2em;
                        left: 1em;
                        width: .9em;
                        height: .9em;

                border-radius: 50% / 50%;
                box-shadow: inset -1px 1px 2px rgba(50, 50, 50, .5);

                background-color: red;
            }
        }

        // WARNING
        strong.warning:before{ background-color: #dd6a45; }
        // INFO
        strong.info:before{ background-color: #2195da; }
        // SUCCESS
        strong.success:before{ background-color: #5fca4a; }
        // ERROR
        strong.error:before{ background-color: #d94747; }
    }

}