.icon{width:80px;height:80px;border:4px solid gray;border-radius:50%;margin:20px auto;padding:0;position:relative;box-sizing:content-box;transform:scale(1)}.icon.error{border-color:#f27474}.icon.error .x-mark{position:relative;display:block}.icon.error .errorLine{position:absolute;height:5px;width:47px;background-color:#f27474;display:block;top:37px;border-radius:2px}.icon.error .errorLine.left{transform:rotate(45deg);left:17px}.icon.error .errorLine.right{transform:rotate(-45deg);right:16px}.icon.warning{border-color:#f8bb86}.icon.warning .body{position:absolute;width:5px;height:36px;left:50%;top:16px;border-radius:2px;margin-left:-2px;background-color:#f8bb86}.icon.warning .dot{position:absolute;width:7px;height:7px;border-radius:50%;margin-left:-3px;left:50%;bottom:16px;background-color:#f8bb86}.icon.info{border-color:#c9dae1}.icon.info:before{content:"";position:absolute;width:5px;height:29px;left:50%;bottom:17px;border-radius:2px;margin-left:-2px;background-color:transparent}.icon.info:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;margin-left:-3px;top:19px;background-color:transparent;left:50%}.icon.success{border-color:#1b8f58}.icon.success:after,.icon.success:before{content:"";position:absolute;width:60px;height:120px;background:transparent;transform:rotate(45deg)}.icon.success:before{border-radius:120px 0 0 120px;top:-7px;left:-33px;transform:rotate(-45deg);transform-origin:60px 60px}.icon.success:after{border-radius:0 120px 120px 0;top:-11px;left:30px;transform:rotate(-45deg);transform-origin:0 60px}.icon.success .placeholder{width:80px;height:80px;border:4px solid #1b8f595e;border-radius:50%;box-sizing:content-box;position:absolute;left:-4px;top:-4px;z-index:2}.icon.success .fix{width:5px;height:90px;background-color:transparent;position:absolute;left:28px;top:8px;z-index:1;transform:rotate(-45deg)}.icon.success .successLine{height:5px;background-color:#1b8f58;display:block;border-radius:2px;position:absolute;z-index:2}.icon.success .successLine.tip{width:25px;left:14px;top:46px;transform:rotate(45deg)}.icon.success .successLine.long{width:47px;right:8px;top:38px;transform:rotate(-45deg)}@keyframes animateSuccessTip{0%,54%{width:0;left:1px;top:19px}70%{width:50px;left:-8px;top:37px}84%{width:17px;left:21px;top:48px}to{width:25px;left:14px;top:45px}}@keyframes animateSuccessLong{0%,65%{width:0;right:46px;top:54px}84%{width:55px;right:0;top:35px}to{width:47px;right:8px;top:38px}}@keyframes rotatePlaceholder{0%,5%{transform:rotate(-45deg)}to,12%{transform:rotate(-405deg)}}.animateSuccessTip{animation:animateSuccessTip 1s}.animateSuccessLong{animation:animateSuccessLong 1.1s}.icon.success.animate:after{animation:rotatePlaceholder 4.25s ease-in}@keyframes animateErrorLeft{0%{width:0;left:50%;transform:rotate(45deg)}50%{width:47px;left:17px;transform:rotate(45deg)}to{width:47px;left:17px;transform:rotate(45deg)}}@keyframes animateErrorRight{0%{width:0;right:50%;transform:rotate(-45deg)}50%{width:47px;right:16px;transform:rotate(-45deg)}to{width:47px;right:16px;transform:rotate(-45deg)}}@keyframes scaleError{0%{transform:scale(0)}50%{transform:scale(1.1)}to{transform:scale(1)}}.animateErrorLeft{animation:animateErrorLeft .8s ease-out}.animateErrorRight{animation:animateErrorRight .8s ease-out .2s both}.icon.error.animate{animation:scaleError .6s ease-out}@keyframes animateWarningBody{0%{height:0;top:50%}60%{height:40px;top:14px}to{height:36px;top:16px}}@keyframes animateWarningDot{0%{transform:scale(0);opacity:0}70%{transform:scale(0);opacity:0}90%{transform:scale(1.2);opacity:1}to{transform:scale(1);opacity:1}}@keyframes bounceWarning{0%{transform:scale(0)}50%{transform:scale(1.05)}to{transform:scale(1)}}.animateWarningBody{animation:animateWarningBody .8s ease-out}.animateWarningDot{animation:animateWarningDot 1s ease-out}.icon.warning.animate{animation:bounceWarning .6s ease-out}@keyframes animateInfoDot{0%{transform:scale(0);opacity:0}40%{transform:scale(1.2);opacity:1}60%{transform:scale(1);opacity:1}to{transform:scale(1);opacity:1}}@keyframes animateInfoBody{0%{height:0;bottom:40%}40%{height:0;bottom:40%}80%{height:32px;bottom:15px}to{height:29px;bottom:17px}}@keyframes fadeInInfo{0%{transform:scale(0);opacity:0}60%{transform:scale(1.05);opacity:.8}to{transform:scale(1);opacity:1}}.animateInfoDot{animation:animateInfoDot .6s ease-out}.animateInfoBody{animation:animateInfoBody .8s ease-out .3s both}.icon.info.animate{animation:fadeInInfo .7s ease-out}.icon.info .info-body{position:absolute;width:5px;height:29px;left:50%;bottom:17px;border-radius:2px;margin-left:-2px;background-color:#c9dae1}.icon.info .info-dot{position:absolute;width:7px;height:7px;border-radius:50%;margin-left:-3px;top:19px;background-color:#c9dae1;left:50%}