.header-meter{display:flex;margin-left:15px;background-color:#303a4b;border-radius:50px;width:35%;max-width:350px;position:relative;cursor:pointer;transition:border-color .3s ease-in-out}.header-meter.isSubscribed{width:unset}.header-meter-inner-bg{position:absolute;border-radius:50px;width:0;height:100%;top:0;left:0;background-color:transparent;transition:.2s cubic-bezier(1,0,.8,.8)}.header-meter-inner-bg.hovering{background-color:rgba(61,90,128,.259);width:100%}.header-meter-inner{display:flex;width:100%;z-index:3}@keyframes shine{0%{left:-50px}to{left:calc(100% + 50px)}}.header-meter-bar{display:flex;flex:1;flex-direction:column;justify-content:center;border-radius:50px;height:50px}.header-meter-bar.isSubscribed{background-color:transparent}.header-meter-bar-shine{background-color:transparent;position:absolute;top:0;left:0;overflow:hidden;width:100%}.header-meter-bar-shine:before{position:absolute;top:0;left:0;content:"";width:50px;height:100%;background:hsla(0,0%,100%,.1);transform:skew(-50deg);animation:shine 2s cubic-bezier(1,0,.8,.8) infinite}.header-meter-logo{width:50px;height:50px;background-color:#293241;border:3px solid #3d5a80;transition:border-color .3s cubic-bezier(1,0,.8,.8);border-radius:50%}.header-meter-logo #header-animation{height:30px;margin-top:6px}.header-meter-logo.gift-bg{background-color:#85acc6;border-color:#85acc6}.header-meter-logo.gift-bg #header-animation{height:40px;margin-top:0}.header-meter-logo.hovering{border-color:#ee6c4d}.header-meter-logo-badge{z-index:1}.header-meter-logo-badge .ant-badge-count{color:inherit;width:15px;height:15px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-weight:500}.header-meter-action{display:flex;align-items:center;justify-content:center;margin-right:10px;padding-left:10px;height:50px}.header-meter-action svg{font-size:30px;color:#3d5a80;transition:color .3s cubic-bezier(1,0,.8,.8)}.header-meter-action.hovering svg{color:#ee6c4d}.header-meter-bottom-text{font-size:10px;font-weight:bolder;color:#98c1d9}@keyframes shineText{0%{-webkit-mask-position:150%;mask-position:150%}to{-webkit-mask-position:-50%;mask-position:-50%}}.header-meter-bottom-text-shine{color:#ee6c4d;-webkit-mask-image:linear-gradient(-75deg,rgba(238,108,77,.8) 30%,#f38468 50%,rgba(238,108,77,.8) 70%);mask-image:linear-gradient(-75deg,rgba(238,108,77,.8) 30%,#f38468 50%,rgba(238,108,77,.8) 70%);-webkit-mask-size:200%;mask-size:200%;animation:shineText 6s cubic-bezier(1,0,.8,.8) infinite}@media only screen and (max-width:767px){.header-meter{width:70%;margin-left:5px}}@keyframes heartBeat{0%{transform:scale(1)}14%{transform:scale(1.1)}28%{transform:scale(1)}42%{transform:scale(1.1)}70%{transform:scale(1)}}.animateBounceOutRight{animation-name:bounceOutRightExit!important}.animateBounceInRight{animation-name:bounceInRightEnter!important}@keyframes bounceOutRightExit{20%{opacity:1;transform:translate3d(-2px,0,0)}50%{opacity:0}to{opacity:0;transform:translate3d(13px,0,0)}}@keyframes bounceInRightEnter{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(13px,0,0)}60%{opacity:1;transform:translate3d(-2px,0,0)}75%{transform:translate3d(3px,0,0)}90%{transform:translate3d(-2px,0,0)}to{transform:translateZ(0)}}.bounceLeftRight{animation-name:animbounceleftright!important}@keyframes animbounceleftright{0%,20%,53%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(-2px,0,0)}70%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(1px,0,0)}90%{transform:translate3d(-.5px,0,0)}}.usage-meter-container{display:flex;flex-wrap:nowrap;align-items:flex-start;-moz-column-gap:2px;column-gap:2px}.usage-meter-container.usage-one-bar{-moz-column-gap:0;column-gap:0}.usage-meter-slot{background-color:#ee6c4d;border-radius:3px;display:flex;justify-content:flex-end;flex:1;height:20px;max-width:12px}.usage-meter-slot.usage-not-unused{background-color:transparent}.usage-meter-slot.usage-one-bar{max-width:unset}.usage-unused div.usage-unused{width:0}.usage-unused.usage-one-bar div.usage-unused{width:100%}.usage-used{display:flex;flex:1;border-radius:3px;background-color:#3d5a80;box-shadow:none;width:0;animation:animate-bg .1s ease;animation-fill-mode:forwards}@keyframes animate-bg{0%{width:0}to{width:50%}}.usage-used.usage-one-bar{flex:unset;border-top-left-radius:0;border-bottom-left-radius:0;animation:none}.usage-locked{background-color:rgba(41,50,65,.941)}.usage-locked .svg-inline--fa{width:.5rem;opacity:.5}.usage-line-container{margin-top:.5rem;height:5px;border-bottom:2px solid #9dc0fc;border-left:2px solid #9dc0fc;border-right:2px solid #9dc0fc;opacity:.1}.usage-text-container{display:flex;flex-direction:column;margin-top:.25rem;width:100%}.usage-meter-remaining-text{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:flex-end;font-size:12px;font-weight:bolder;padding-right:10px;color:#fff}@keyframes animmeterbounce{0%,20%,53%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-2px,0)}70%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-1px,0)}90%{transform:translate3d(0,-.5px,0)}}.usage-meter-bounce{animation-name:animmeterbounce}