.growl-container {
 position: fixed;
}

.growl-container.vn-top-right {
 right: 10px;
 top: 10px;
}

.growl-container.vn-top-left {
 top: 10px;
 left: 10px;
}

.growl-container.vn-bottom-right {
 bottom: 10px;
 right: 10px;
}

.growl-container.vn-bottom-left {
 bottom: 10px;
 left: 10px;
}

.growl-container.vn-center {
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

.growl-container .vn-close {
 position: absolute;
 top: 5px;
 right: 10px;
 width: 15px;
 height: 15px;
 padding: 2px;
 cursor: pointer;
}

.growl-container .vn-close:before, .growl-container .vn-close:after {
 content: '';
 position: absolute;
 width: 100%;
 top: 50%;
 height: 2px;
 background: #fff;
}

.growl-container .vn-close:before {
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 transform: rotate(45deg);
}

.growl-container .vn-close:after {
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 transform: rotate(-45deg);
}

.growl-item {
 width: 20em;
 padding: 15px;
 position: relative;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 -ms-border-radius: 5px;
 border-radius: 5px;
 margin-bottom: 15px;
 opacity: 0.75;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
 filter: alpha(opacity = 75);
}

.growl-item:hover {
 opacity: 1;
}

.growl-title {
 font-weight: bold;
}

.growl-info {
 background: #3498db;
 color: #fff;
}

.growl-success {
 background: #2ecc71;
 color: #fff;
}

.growl-error {
 background: #e74c3c;
 color: #fff;
}

.growl-warning {
 background: #f39c12;
 color: #fff;
}

.growl-notify {
 background: #333;
 color: #fff;
}