.notifyjs-corner { width: 100%; max-width: 420px; }

.notifyjs-metro-base { position: relative; min-height: 52px; width: 100%; color: #444; }

    .notifyjs-metro-base .image { display: block; position: absolute; height: 50px; width: 50px; left: 15px; top: 15px; }
        .notifyjs-metro-base .image:before { font-family: "bootstrap-icons"; font-weight: 400; font-size: 13px; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; color: #fff; }
.notifyjs-metro-info .image:before { content: "\F431"; }
.notifyjs-metro-error .image:before { content: "\F623"; color: #fff; }
.notifyjs-metro-success .image:before { content: "\F270"; color: #fff; }

.notifyjs-metro-base .text-wrapper { display: inline-block; vertical-align: top; text-align: left; margin: 15px 15px 15px 52px; clear: both; }

.notifyjs-metro-base .title { font-size: 15px; font-weight: bold; }

.notifyjs-metro-base .text { font-size: 12px; font-weight: normal; vertical-align: middle; }


.notifyjs-metro-error { color: #fafafa !important; background-color: #F71919; border: 1px solid #FF0026; }
.notifyjs-metro-success { color: #fafafa !important; background-color: #32CD32; border: 1px solid #4DB149; }
.notifyjs-metro-info { color: #fafafa !important; background-color: #1E90FF; border: 1px solid #1E90FF; }
.notifyjs-metro-warning { background-color: #FAFA47; border: 1px solid #EEEE45; }
.notifyjs-metro-black { color: #fafafa !important; background-color: #333; border: 1px solid #000; }
.notifyjs-metro-white { background-color: #f1f1f1; border: 1px solid #ddd; }