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 darken(#ddd, 10);
        box-shadow: inset 0 0 1em #eee;

        background-color: #fff;

        pointer-events: all;
        cursor: default;

        // ECARTEMENT DU BOTTOM POUR LE DERNIER
        &:last-child{
            margin-bottom: 1em;
        }


        // ANIMATION DE fadeIn + fadeOut
        transition: opacity .5s ease-in-out;
        opacity: 0;

        &.notification-visible{
            opacity: 1;
        }


        // ANIMATION DE @HOVER
        &:hover{
            box-shadow: inset 0 0 1em #eee, 0 0 1em #555;
        }



        // TITRE ET BOULE DE COULEUR
        strong:first-child{

            text-transform: uppercase;
            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);
            }

        }

        // DIFFERENTS THEMES
        // WARNING
        &[data-warning]{
            border-color: #dd6a45;
            border-bottom-color: darken(#dd6a45, 10);
            strong:first-child{ &:before{ background-color: #dd6a45; } }
        }
        // INFO
        &[data-info]{
            border-color: #2195da;
            border-bottom-color: darken(#2195da, 10);
            strong:first-child{ &:before{ background-color: #2195da; } }
        }
        // SUCCESS
        &[data-success]{
            border-color: #5fca4a;
            border-bottom-color: darken(#5fca4a, 10);
            strong:first-child{ &:before{ background-color: #5fca4a; } }
            }
        // ERROR
        &[data-error]{
            border-color: #d94747;
            border-bottom-color: darken(#d94747, 10);
            strong:first-child{ &:before{ background-color: #d94747; } }
        }


    }

}