Кастомизация всплывающих сообщений jGrowl

Не всем пользователям заметны и удобны уведомления которые по умолчанию всплывают справа, в этот статье есть пример реализации вывода уведомлений jGrowl по центру

CSS

#jGrowl {
    font-size:18px;
    margin:0 12px 0;
}
#jGrowl:before{
    content: '';
    position: fixed;
    width: 200%;
    height: 200%;
    background: rgba(0, 0, 0, 0.5);
    margin-top: -50%;
    margin-left: -50%;
}
.jGrowl.top-right {
    left: calc(59% - 400px) !important;
    top:35% !important;
}
@media screen and (max-width: 768px){
    .jGrowl.top-right {
        left: 0 !important;
    }
}
#jGrowl .jGrowl-notification {
    position: relative;
    width: 400px;
    padding: 50px 40px;
    text-align: center;
    background: none repeat 0 0 #fff !important;
    box-shadow: none !important;
    border: 0 !important;
    z-index: 1000;
    border-radius: 4px;
}
#jGrowl .jGrowl-notification .jGrowl-close {
	position: absolute;
	right: 2px;
	top: 2px;
	font-weight: normal;
	width: 45px;
	height: 45px;
}
#jGrowl .jGrowl-notification .jGrowl-close:before{
	font-family: "Font Awesome 5 Free";
	font-weight: 400;
	content: "\f057";
	color: #777;
	font-size: 30px;
}
#jGrowl .jGrowl-notification .jGrowl-message {
    color:#000 !important;
}

JavaScript

/*Очищаем html после закрытия уведомления*/
$(function() { 
    /*$.jGrowl.defaults.beforeOpen = function(e,m) { $("#jGrowl").show(); }; */
    $.jGrowl.defaults.close = function(e,m) { $("#jGrowl").hide(); }; 
});