/* The Business ribbon is shown only while a Personal login backdrop is slow. */
#view-auth.qx-login-fallback{background:#fff!important;transition:background .38s ease}
#view-auth.qx-login-fallback::before{display:none!important}
#view-auth.qx-login-fallback::after{z-index:-1!important;display:block!important;opacity:1!important;background:transparent!important}
.qx-personal-ribbon{display:none;position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;perspective:1200px;background:#fff}
#view-auth.qx-login-fallback .qx-personal-ribbon{display:block}
.qx-personal-ribbon::before,.qx-personal-ribbon::after{content:"";position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.qx-personal-ribbon::before{width:min(92vw,1420px);height:min(132vh,1580px);left:7%;top:-44%;background:repeating-linear-gradient(101deg,rgba(255,255,255,.18) 0 1px,rgba(255,255,255,0) 2px 5px),linear-gradient(108deg,#c7e1ff 0%,#a9bcff 19%,#ffd464 35%,#ff9e27 44%,#ff614b 59%,#f05bbc 77%,#ffc45d 100%);background-blend-mode:soft-light;mask:radial-gradient(ellipse at center,transparent 0 51%,#000 51.5% 69%,transparent 69.5%);-webkit-mask:radial-gradient(ellipse at center,transparent 0 51%,#000 51.5% 69%,transparent 69.5%);transform:rotateX(51deg) rotateZ(-25deg);filter:saturate(1.18) contrast(1.04) drop-shadow(0 18px 20px rgba(208,64,145,.13));animation:qxPersonalRibbon 6s cubic-bezier(.45,0,.55,1) infinite alternate}
.qx-personal-ribbon::after{width:min(78vw,1190px);height:min(117vh,1400px);left:16%;top:-30%;background:linear-gradient(106deg,transparent 9%,rgba(255,255,255,.76) 29%,rgba(255,224,138,.92) 37%,rgba(255,148,41,.9) 46%,rgba(255,90,173,.88) 61%,rgba(125,91,255,.91) 72%,transparent 89%);mask:radial-gradient(ellipse at center,transparent 0 58%,#000 58.5% 65%,transparent 65.5%);-webkit-mask:radial-gradient(ellipse at center,transparent 0 58%,#000 58.5% 65%,transparent 65.5%);transform:rotateX(51deg) rotateZ(-25deg) translateZ(36px);mix-blend-mode:screen;animation:qxPersonalRibbon 5s cubic-bezier(.45,0,.55,1) -3s infinite alternate}
@keyframes qxPersonalRibbon{from{translate:-4% -2%;rotate:-2deg}to{translate:7% 4%;rotate:2.5deg}}
@media(max-width:760px){.qx-personal-ribbon::before{width:145vw;height:110vh;left:-24%;top:-23%}.qx-personal-ribbon::after{width:135vw;height:103vh;left:-17%;top:-11%}}
@media(prefers-reduced-motion:reduce){.qx-personal-ribbon::before,.qx-personal-ribbon::after{animation:none}}