*,:after,:before{box-sizing:border-box;outline:none}.button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:500;border:none;color:#fff;font-size:20px;line-height:30px;border-radius:2.25rem;width:16.275rem;height:4.5rem;text-transform:uppercase;overflow:hidden}.button:before{position:absolute;content:"";bottom:0;left:0;width:0;height:100%}.button .check,.button .icon,.button .loading,.button .submit{position:absolute;line-height:0}.button .check .animation,.button .icon .animation,.button .loading .animation,.button .submit .animation{transform-origin:center center}.button .check:first-of-type,.button .icon:first-of-type,.button .loading:first-of-type,.button .submit:first-of-type{transform:translateY(-50%)}.button .check:nth-of-type(2),.button .check:nth-of-type(3),.button .icon:nth-of-type(2),.button .icon:nth-of-type(3),.button .loading:nth-of-type(2),.button .loading:nth-of-type(3),.button .submit:nth-of-type(2),.button .submit:nth-of-type(3){display:none}.active{background-color:#54289c}.active:before{width:100%;transition:width 3s linear}.active .check:first-of-type,.active .icon:first-of-type,.active .loading:first-of-type,.active .submit:first-of-type{top:-100%;transform:translateY(-50%)}.active .check:nth-of-type(2),.active .icon:nth-of-type(2),.active .loading:nth-of-type(2),.active .submit:nth-of-type(2){top:60px;left:95px;transform:translateY(-50%);display:block}.active .check:nth-of-type(2) .animation,.active .icon:nth-of-type(2) .animation,.active .loading:nth-of-type(2) .animation,.active .submit:nth-of-type(2) .animation{animation:loading 1s linear infinite;animation-iteration-count:infinite}.active .check:nth-of-type(3),.active .icon:nth-of-type(3),.active .loading:nth-of-type(3),.active .submit:nth-of-type(3){display:none}.finished{background:#612eb5}.finished .loading,.finished .submit{display:none}.finished .check{display:block!important;font-size:24px;opacity:1;top:40px;animation:fade .5s linear;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.finished .check .animation{transform-origin:center center}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes loading{to{transform:rotate(1turn)}}@keyframes lds-rolling{0%{-webkit-transform:translate(-50%,-50%) rotate(0deg);transform:translate(-50%,-50%) rotate(0deg)}to{-webkit-transform:translate(-50%,-50%) rotate(1turn);transform:translate(-50%,-50%) rotate(1turn)}}@-webkit-keyframes lds-rolling{0%{-webkit-transform:translate(-50%,-50%) rotate(0deg);transform:translate(-50%,-50%) rotate(0deg)}to{-webkit-transform:translate(-50%,-50%) rotate(1turn);transform:translate(-50%,-50%) rotate(1turn)}}.lds-rolling{position:relative}.lds-rolling .animation,.lds-rolling .animation:after{position:absolute;width:48px;height:48px;border:4px solid #fff;border-top-color:transparent;border-radius:50%}.lds-rolling .animation{-webkit-animation:lds-rolling 1s linear infinite;animation:lds-rolling 1s linear infinite;top:-25px;left:20px}.lds-rolling .animation:after{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.lds-rolling{-webkit-transform:translate(-81px,-81px) scale(.81) translate(81px,81px);transform:translate(-81px,-81px) scale(.81) translate(81px,81px)}.icon{color:#000;position:absolute;width:30px;height:12px;border-bottom:4px solid #fff;border-left:4px solid #fff}