.notification {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

    .notification > div {
        display: flex;
        border: 1px solid;
        padding: 15px 10px 15px 10px;
        margin-bottom: 10px;
    }

        .notification > div p {
            margin-bottom: 0;
        }

        .notification > div:before {
            font-family: FontAwesome;
            font-style: normal;
            font-weight: 400;
            speak: none;
            display: block;
            text-decoration: inherit;
            width: 1em;
            margin-right: 0.2em;
            text-align: center;
            font-variant: normal;
            text-transform: none;
            line-height: 1em;
            margin-left: 0.2em;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            padding-right: 8px;
        }

    .notification .notification-message--success {
        color: #4f8a10;
        background-color: #dff2bf;
    }

        .notification .notification-message--success:before {
            content: "";
        }

    .notification .notification-message--info {
        color: #00529b;
        background-color: #bde5f8;
    }

        .notification .notification-message--info:before {
            content: "";
        }

    .notification .notification-message--error {
        color: #d8000c;
        background-color: #ffd2d2;
    }

        .notification .notification-message--error:before {
            content: "";
        }

    .notification .notification-message--warning {
        color: #9f6000;
        background-color: #feefb3;
    }

        .notification .notification-message--warning:before {
            content: "";
        }