.amaran-wrapper * { box-sizing: border-box; }
.amaran-wrapper { position: fixed; z-index: 10000000; }
.amaran-wrapper.top { top: 0; bottom: auto; }
.amaran-wrapper.bottom { bottom: 0; top: auto; }
.amaran-wrapper.left { left: 0; }
.amaran-wrapper.right { right: 0; left: auto; }
.amaran-wrapper.center { width: 50%; height: 50%; margin: auto; position: fixed; top: 0; left: 0; bottom: 0; right: 0; }

.amaran { width: 200px; background: rgba(0, 0, 0, 0.7); padding: 3px; color: #fff; border-radius: 4px; display: none; font-size: 13px; cursor: pointer; position: relative; text-align: left; min-height: 50px; margin: 10px; }
.amaran-close { position: absolute; top: 5px; right: 0; display: block; width: 20px; height: 20px; cursor: pointer; }
.amaran-close:before { content: "✕"; color: #999; font-weight: bold; font-family: Arial, sans-serif; font-size: 14px; }

.amaran-sticky { position: absolute; top: 2px; right: 20px; display: block; width: 20px; height: 20px; cursor: pointer; }
.amaran-sticky:before { content: "●"; color: #fff; font-weight: bold; font-family: Arial, sans-serif; font-size: 18px; }
.amaran-sticky.sticky:before { color: #27ae60; }

.amaran.awesome { width: 320px; min-height: 65px; background: #FFF; border:none; color: #222; margin: 15px; padding: 20px 20px 20px 70px; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 600; box-shadow: 0 1px 7px 0 rgba(93, 93, 93, 0.5); }
.amaran.awesome .icon { width: 50px; height: 50px; position: absolute; top: 10px; left: 10px; background: transparent; border-radius: 50%; text-align: center; line-height: 50px; font-size: 31px; }
.amaran.awesome p { padding: 0; margin: 0; }
.amaran.awesome p span { font-weight: 300; font-size:14px; line-height: 19px; display: block; margin-top:8px; }
.amaran.awesome p span.light { font-size: 13px; line-height: 13px; display: block; color: #777; margin-top:12px; }
.amaran.awesome p span.light:empty { margin:0; }
.amaran.awesome.ok p.bold { color:#252525; }

.amaran.awesome.ok .icon,
.amaran.awesome.green .icon { color: #2FA732; }
.amaran.awesome.error .icon { color: #D82222; }
.amaran.awesome.warning .icon { color: #f59226; }
.amaran.awesome.yellow .icon { color: #CFA846; }
.amaran.awesome.blue .icon { color: #2980b9; }
.amaran.awesome.purple .icon { color: #5B54AA; }