.notification {
        /*width: calc(100% - 3em);
        max-width: 24em;*/
        padding: 1em 1em 1em 1em;
        border-left-width: 6px;
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-style: solid;
        border-radius: 5px;
        position: relative;
        line-height: 1.5;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

        &+& {
            margin-top: 2em;
        }

        &:before {
            color: white;
            width: 1.5em;
            height: 1.5em;
            position: absolute;
            top: 1em;
            left: 1.5em;
            border-radius: 50%;
            transform: translateX(-50%);
            font-weight: bold;
            line-height: 1.5;
            text-align: center;
        }

        p {
            margin: 0 0 0 2em;

            &:last-child {
                margin-bottom: 0;
            }
        }

        span {
            font-weight: bold;
            margin: 0 0 0 2em;
        }
    }

    .notification--ERROR {
        border-color: rgba(200, 0, 0, 0.9);
        background-color: rgba(200, 0, 0, 0.1);


        &:before {
            background-color: rgba(200, 0, 0, 0.9);

            content: "‼";
        }

        span {
            color: rgb(200, 0, 0);
        }
    }

    .notification--WARNING {
        border-color: darkorange;
        background-color: rgba(225, 187, 16, 0.1);

        &:before {
            background-color: darkorange;
            content: "!";
        }

        span {
            color: darkorange;
        }
    }

    .notification--SUCCESS {
        border-color: rgba(0, 200, 0, 0.9);
        background-color: rgba(0, 255, 0, 0.1);

        &:before {
            background-color: rgba(0, 200, 0, 0.9);
            content: "✔";
        }

        span {
            color: rgba(5, 121, 5, 1);
        }
    }

    .notification--INFO {
        border-color: rgba(0, 0, 255, 0.9);
        background-color: rgba(0, 0, 255, 0.08);

        &:before {
            background-color: rgba(0, 0, 255, 0.9);
            content: "i";
        }

        span {
            color: rgba(7, 7, 171, 1);
        }
    }