.noti{padding:12px;width:360px;position:fixed;perspective:1000px}@media screen and (max-width:414px){.noti{width:100%}}.noti--top-right{top:80px;right:0}.noti--top-center{top:80px;left:50%;transform:translateX(-50%)}.noti--top-left{top:80px;left:0}.noti--bottom-right{bottom:0;right:0}.noti--bottom-center{bottom:0;left:50%;transform:translateX(-50%)}.noti--bottom-left{bottom:0;left:0}.noti-item{border-radius:4px;padding-left:80px;padding-right:30px;position:relative;animation-name:b;animation-fill-mode:forwards;animation-duration:.2s}.noti-item.open{margin-bottom:12px;animation-name:a;animation-duration:.2s}.noti-item--default{background-color:#fafafa;box-shadow:0 0 0 1px #eee}.noti-item--default .noti__object{background-color:#eee}.noti-item--default .noti__icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='%23696969' d='M20 2c9.9 0 18 8.1 18 18s-8.1 18-18 18S2 29.9 2 20 10.1 2 20 2m0-2C9 0 0 9 0 20s9 20 20 20 20-9 20-20S31 0 20 0z'/%3E%3Cpath fill='%23696969' d='M10 12h20v2H10zm10 5h10v2H20zm-4 5h14v2H16zm9 5h5v2h-5z'/%3E%3C/svg%3E")}.noti-item--default .noti__close:after,.noti-item--default .noti__close:before{background-color:#696969}.noti-item--default .noti__body{color:#696969}.noti-item--success{background-color:#44c593;box-shadow:0 0 0 1px #3cae82}.noti-item--success .noti__object{background-color:#3cae82}.noti-item--success .noti__icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='%23FFF' d='M20 2c9.9 0 18 8.1 18 18s-8.1 18-18 18S2 29.9 2 20 10.1 2 20 2m0-2C9 0 0 9 0 20s9 20 20 20 20-9 20-20S31 0 20 0z'/%3E%3Cpath fill='%23FFF' d='M27.6 14.1L17 24.7l-5.6-5.6-1.4 1.4 5.6 5.6 1.4 1.4 12-12z'/%3E%3C/svg%3E")}.noti-item--success .noti__close:after,.noti-item--success .noti__close:before{background-color:#fff}.noti-item--success .noti__body{color:#fff}.noti-item--warning{background-color:#f4d157;box-shadow:0 0 0 1px #f4b357}.noti-item--warning .noti__object{background-color:#f4b357}.noti-item--warning .noti__icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23725833'%3E%3Cpath d='M20 2c9.9 0 18 8.1 18 18s-8.1 18-18 18S2 29.9 2 20 10.1 2 20 2m0-2C9 0 0 9 0 20s9 20 20 20 20-9 20-20S31 0 20 0z'/%3E%3Cpath d='M19 11h2v14h-2zm0 16h2v2h-2z'/%3E%3C/g%3E%3C/svg%3E")}.noti-item--warning .noti__close:after,.noti-item--warning .noti__close:before{background-color:#725833}.noti-item--warning .noti__body{color:#725833}.noti-item--error{background-color:#f55463;box-shadow:0 0 0 1px #de4856}.noti-item--error .noti__object{background-color:#de4856}.noti-item--error .noti__icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23FFF'%3E%3Cpath d='M20 2c9.9 0 18 8.1 18 18s-8.1 18-18 18S2 29.9 2 20 10.1 2 20 2m0-2C9 0 0 9 0 20s9 20 20 20 20-9 20-20S31 0 20 0z'/%3E%3Cpath d='M19 11h2v14h-2zm0 16h2v2h-2z'/%3E%3C/g%3E%3C/svg%3E")}.noti-item--error .noti__close:after,.noti-item--error .noti__close:before{background-color:#fff}.noti-item--error .noti__body{color:#fff}.noti__object{border-radius:4px 0 0 4px;height:100%;width:80px;position:absolute;left:0}.noti__icon{border-radius:50%;height:40px;width:40px;margin:16px auto}.noti__body{font-family:Roboto,sans-serif;font-size:14px;font-weight:300;line-height:1.5;padding:16px 20px}.noti__close{border-radius:0 4px 0 4px;cursor:pointer;height:30px;width:30px;position:absolute;top:0;right:0}.noti__close:after,.noti__close:before{content:'';display:block;height:2px;width:15px;position:relative;left:8px}.noti__close:before{transform:rotate(45deg);top:14px}.noti__close:after{transform:rotate(-45deg);top:12px}.noti__clear{background-color:transparent;border-radius:50%;border:2px solid #fff;cursor:pointer;height:40px;width:40px;position:relative;bottom:0;right:0;animation-name:b;animation-duration:.2s}.noti__clear.open{animation-name:a;animation-duration:.2s}.noti__clear.open:hover{transform:scaleX(1.1) scaleY(1.1) rotate(90deg)}.noti__clear.open:active{transform:scaleX(1.2) scaleY(1.2) rotate(90deg)}.noti__clear.open:active:after,.noti__clear.open:active:before{opacity:.1;width:20px;left:7px;transition:opacity .35s ease 0s,top .35s ease 0s,left .35s ease 0s,width .35s ease 0s}.noti__clear.open:active:before{top:17px}.noti__clear.open:active:after{top:15px}.noti__clear:after,.noti__clear:before{content:"";background:#fff;display:block;height:2px;width:14px;position:relative;left:11px}.noti__clear:before{transform:rotate(45deg);top:17px}.noti__clear:after{transform:rotate(-45deg);top:15px}@keyframes a{0%{margin-bottom:0;max-height:0;opacity:0;transform:scaleY(0) scaleX(.75) rotateX(90deg) translateY(-100%)}50%{opacity:1}to{margin-bottom:12px;max-height:180px;transform:scaleY(1) scaleX(1) rotateX(0) translateY(0)}}@keyframes b{0%{margin-bottom:12px;max-height:180px;opacity:1;transform:scaleY(1) rotateX(0)}to{margin-bottom:0;max-height:0;opacity:0;transform:scaleY(0) rotateX(90deg)}}