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; } body > #notification-container .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; cursor: default; transition: opacity .5s ease-in-out; opacity: 0; } body > #notification-container .notification-element:last-child { margin-bottom: 1em; } body > #notification-container .notification-element.notification-visible { opacity: 1; } body > #notification-container .notification-element:hover { box-shadow: inset 0 0 1em #eee, 0 0 20px #aaa; } body > #notification-container .notification-element strong[class] { text-transform: uppercase; padding-left: 1.5em; } body > #notification-container .notification-element strong[class]: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, 0.5); background-color: red; } body > #notification-container .notification-element strong[class].warning:before { background-color: #dd6a45; } body > #notification-container .notification-element strong[class].info:before { background-color: #2195da; } body > #notification-container .notification-element strong[class].success:before { background-color: #5fca4a; } body > #notification-container .notification-element strong[class].error:before { background-color: #d94747; } /*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAiZXhwYW5kZWQuY3NzIiwKCSJzb3VyY2VzIjogWwoJCSIuLi9ub3RpZi5zY3NzIgoJXSwKCSJzb3VyY2VzQ29udGVudCI6IFsKCQkiYm9keSA+ICNub3RpZmljYXRpb24tY29udGFpbmVye1xuXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgd2lkdGg6IDEwMCU7XG5cbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGZsZXgtd3JhcDogbm93cmFwO1xuXG4gICAgei1pbmRleDogMjAwO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG5cbiAgICAubm90aWZpY2F0aW9uLWVsZW1lbnR7XG4gICAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgICAgICBtYXJnaW46IC4yZW0gYXV0bztcbiAgICAgICAgICAgIHBhZGRpbmc6IDAgMWVtO1xuXG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDNweDtcbiAgICAgICAgYm9yZGVyOiAxcHggc29saWQgI2RkZDtcbiAgICAgICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICNiYmI7XG4gICAgICAgIGJveC1zaGFkb3c6IGluc2V0IDAgMCAxZW0gI2VlZTtcblxuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmO1xuXG4gICAgICAgIHBvaW50ZXItZXZlbnRzOiBhbGw7XG4gICAgICAgIGN1cnNvcjogZGVmYXVsdDtcblxuICAgICAgICAvLyBFQ0FSVEVNRU5UIERVIEJPVFRPTSBQT1VSIExFIERFUk5JRVJcbiAgICAgICAgJjpsYXN0LWNoaWxke1xuICAgICAgICAgICAgbWFyZ2luLWJvdHRvbTogMWVtO1xuICAgICAgICB9XG5cblxuICAgICAgICAvLyBBTklNQVRJT04gREUgZmFkZUluICsgZmFkZU91dFxuICAgICAgICB0cmFuc2l0aW9uOiBvcGFjaXR5IC41cyBlYXNlLWluLW91dDtcbiAgICAgICAgb3BhY2l0eTogMDtcblxuICAgICAgICAmLm5vdGlmaWNhdGlvbi12aXNpYmxle1xuICAgICAgICAgICAgb3BhY2l0eTogMTtcbiAgICAgICAgfVxuXG5cbiAgICAgICAgLy8gQU5JTUFUSU9OIERFIEBIT1ZFUlxuICAgICAgICAmOmhvdmVye1xuICAgICAgICAgICAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDFlbSAjZWVlLCAwIDAgMjBweCAjYWFhO1xuICAgICAgICB9XG5cblxuXG4gICAgICAgIC8vIERJRkZFUkVOVFMgVEhFTUVTXG4gICAgICAgIHN0cm9uZ1tjbGFzc117XG5cbiAgICAgICAgICAgIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG4gICAgICAgICAgICBwYWRkaW5nLWxlZnQ6IDEuNWVtO1xuXG4gICAgICAgICAgICAmOmJlZm9yZXtcbiAgICAgICAgICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgICAgICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICAgICAgICAgIHRvcDogMS4yZW07XG4gICAgICAgICAgICAgICAgbGVmdDogMWVtO1xuICAgICAgICAgICAgICAgIHdpZHRoOiAuOWVtO1xuICAgICAgICAgICAgICAgIGhlaWdodDogLjllbTtcblxuICAgICAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJSAvIDUwJTtcbiAgICAgICAgICAgICAgICBib3gtc2hhZG93OiBpbnNldCAtMXB4IDFweCAycHggcmdiYSg1MCwgNTAsIDUwLCAuNSk7XG5cbiAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZWQ7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgIC8vIFdBUk5JTkdcbiAgICAgICAgICAgICYud2FybmluZzpiZWZvcmV7IGJhY2tncm91bmQtY29sb3I6ICNkZDZhNDU7IH1cbiAgICAgICAgICAgIC8vIElORk9cbiAgICAgICAgICAgICYuaW5mbzpiZWZvcmV7IGJhY2tncm91bmQtY29sb3I6ICMyMTk1ZGE7IH1cbiAgICAgICAgICAgIC8vIFNVQ0NFU1NcbiAgICAgICAgICAgICYuc3VjY2VzczpiZWZvcmV7IGJhY2tncm91bmQtY29sb3I6ICM1ZmNhNGE7IH1cbiAgICAgICAgICAgIC8vIEVSUk9SXG4gICAgICAgICAgICAmLmVycm9yOmJlZm9yZXsgYmFja2dyb3VuZC1jb2xvcjogI2Q5NDc0NzsgfVxuICAgICAgICB9XG5cblxuICAgIH1cblxufVxuIgoJXSwKCSJtYXBwaW5ncyI6ICJBQUFBLElBQUksR0FBRyx1QkFBdUIsQ0FBQTtFQUUxQixPQUFPLEVBQUUsSUFBSztFQUNkLFFBQVEsRUFBRSxRQUFTO0VBQ2YsTUFBTSxFQUFFLENBQUU7RUFDVixJQUFJLEVBQUUsQ0FBRTtFQUNSLEtBQUssRUFBRSxJQUFLO0VBRWhCLGNBQWMsRUFBRSxNQUFPO0VBQ3ZCLFNBQVMsRUFBRSxNQUFPO0VBRWxCLE9BQU8sRUFBRSxHQUFJO0VBQ2IsY0FBYyxFQUFFLElBQUs7Q0EyRXhCOztBQXZGRCxJQUFJLEdBQUcsdUJBQXVCLENBZTFCLHFCQUFxQixDQUFBO0VBQ2pCLE9BQU8sRUFBRSxLQUFNO0VBQ2YsUUFBUSxFQUFFLFFBQVM7RUFDZixNQUFNLEVBQUUsU0FBVTtFQUNsQixPQUFPLEVBQUUsS0FBTTtFQUVuQixhQUFhLEVBQUUsR0FBSTtFQUNuQixNQUFNLEVBQUUsY0FBZTtFQUN2QixhQUFhLEVBQUUsY0FBZTtFQUM5QixVQUFVLEVBQUUsa0JBQW1CO0VBRS9CLGdCQUFnQixFQUFFLElBQUs7RUFFdkIsY0FBYyxFQUFFLEdBQUk7RUFDcEIsTUFBTSxFQUFFLE9BQVE7RUFTaEIsVUFBVSxFQUFFLHVCQUF3QjtFQUNwQyxPQUFPLEVBQUUsQ0FBRTtDQThDZDs7QUFyRkwsSUFBSSxHQUFHLHVCQUF1QixDQWUxQixxQkFBcUIsQUFpQmhCLFdBQVcsQ0FBQTtFQUNSLGFBQWEsRUFBRSxHQUFJO0NBQ3RCOztBQWxDVCxJQUFJLEdBQUcsdUJBQXVCLENBZTFCLHFCQUFxQixBQTBCaEIscUJBQXFCLENBQUE7RUFDbEIsT0FBTyxFQUFFLENBQUU7Q0FDZDs7QUEzQ1QsSUFBSSxHQUFHLHVCQUF1QixDQWUxQixxQkFBcUIsQUFnQ2hCLE1BQU0sQ0FBQTtFQUNILFVBQVUsRUFBRSxpQ0FBa0M7Q0FDakQ7O0FBakRULElBQUksR0FBRyx1QkFBdUIsQ0FlMUIscUJBQXFCLENBdUNqQixNQUFNLENBQUEsQUFBQSxLQUFDLEFBQUEsRUFBTTtFQUVULGNBQWMsRUFBRSxTQUFVO0VBQzFCLFlBQVksRUFBRSxLQUFNO0NBeUJ2Qjs7QUFsRlQsSUFBSSxHQUFHLHVCQUF1QixDQWUxQixxQkFBcUIsQ0F1Q2pCLE1BQU0sQ0FBQSxBQUFBLEtBQUMsQUFBQSxDQUtGLE9BQU8sQ0FBQTtFQUNKLE9BQU8sRUFBRSxFQUFHO0VBQ1osT0FBTyxFQUFFLFlBQWE7RUFDdEIsUUFBUSxFQUFFLFFBQVM7RUFDbkIsR0FBRyxFQUFFLEtBQU07RUFDWCxJQUFJLEVBQUUsR0FBSTtFQUNWLEtBQUssRUFBRSxJQUFLO0VBQ1osTUFBTSxFQUFFLElBQUs7RUFFYixhQUFhLEVBQUUsU0FBVTtFQUN6QixVQUFVLEVBQUUsS0FBSyxDQUFFLElBQUcsQ0FBQyxHQUFHLENBQUMsR0FBRyxDQUFDLHFCQUFJO0VBRW5DLGdCQUFnQixFQUFFLEdBQUk7Q0FDekI7O0FBeEViLElBQUksR0FBRyx1QkFBdUIsQ0FlMUIscUJBQXFCLENBdUNqQixNQUFNLENBQUEsQUFBQSxLQUFDLEFBQUEsQ0FxQkYsUUFBUSxBQUFBLE9BQU8sQ0FBQTtFQUFFLGdCQUFnQixFQUFFLE9BQVE7Q0FBSTs7QUEzRTVELElBQUksR0FBRyx1QkFBdUIsQ0FlMUIscUJBQXFCLENBdUNqQixNQUFNLENBQUEsQUFBQSxLQUFDLEFBQUEsQ0F1QkYsS0FBSyxBQUFBLE9BQU8sQ0FBQTtFQUFFLGdCQUFnQixFQUFFLE9BQVE7Q0FBSTs7QUE3RXpELElBQUksR0FBRyx1QkFBdUIsQ0FlMUIscUJBQXFCLENBdUNqQixNQUFNLENBQUEsQUFBQSxLQUFDLEFBQUEsQ0F5QkYsUUFBUSxBQUFBLE9BQU8sQ0FBQTtFQUFFLGdCQUFnQixFQUFFLE9BQVE7Q0FBSTs7QUEvRTVELElBQUksR0FBRyx1QkFBdUIsQ0FlMUIscUJBQXFCLENBdUNqQixNQUFNLENBQUEsQUFBQSxLQUFDLEFBQUEsQ0EyQkYsTUFBTSxBQUFBLE9BQU8sQ0FBQTtFQUFFLGdCQUFnQixFQUFFLE9BQVE7Q0FBSSIsCgkibmFtZXMiOiBbXQp9 */