#growls {z-index: 50000; position: fixed } #growls.default {top: 10px; right: 10px } #growls.tl {top: 10px; left: 10px } #growls.tr {top: 10px; right: 10px } #growls.bl {bottom: 10px; left: 10px } #growls.br {bottom: 10px; right: 10px } #growls.tc {top: 10px; right: 10px; left: 10px } #growls.bc {bottom: 10px; right: 10px; left: 10px } #growls.tc .growl, #growls.bc .growl {margin-left: auto; margin-right: auto } .growl {color: #2b2b2b; filter: alpha(opacity=80); position: relative; border-radius: 4px; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; transition: all .4s ease-in-out; box-shadow: 0 0 20px rgb(89 102 122 / 10%); } .growl.growl-incoming {opacity: 0; filter: alpha(opacity=0) } .growl.growl-outgoing {opacity: 0; filter: alpha(opacity=0) } .growl.growl-small {width: 200px; padding: 5px; margin: 5px } .growl.growl-medium {width: 280px; padding: 10px 10px; margin: 15px } .growl.growl-large {width: 300px; padding: 15px; margin: 15px } .growl.growl-default {background: #7f8c8d } .growl.growl-error {background-color: #fff; border-color: #fff; border-left: 10px solid #fd2923!important; } .growl.growl-notice {background-color: #fff; border-color: #fff; border-left: 10px solid #5e00ff!important; } .growl.growl-warning {background-color: #fff; border-color: #fff; border-left: 10px solid #ffc107!important; } .growl .growl-close {cursor: pointer; float: right; font-size: 16px; line-height: 18px; font-weight: 400; font-family: helvetica, verdana, sans-serif } .growl .growl-title {font-size: 15px; line-height: 18px } .growl .growl-message {margin-top: 10px; margin-bottom: 10px; font-size: 15px; line-height: 18px }