body,html{height:100%;margin:0}.qr-scanner{background-image:-webkit-gradient(linear,left bottom,left top,color-stop(24%,transparent),color-stop(25%,rgba(32,255,77,.1)),color-stop(26%,rgba(32,255,77,.1)),color-stop(27%,transparent),color-stop(74%,transparent),color-stop(75%,rgba(32,255,77,.1)),color-stop(76%,rgba(32,255,77,.1)),color-stop(77%,transparent),to(transparent)),-webkit-gradient(linear,left top,right top,color-stop(24%,transparent),color-stop(25%,rgba(32,255,77,.1)),color-stop(26%,rgba(32,255,77,.1)),color-stop(27%,transparent),color-stop(74%,transparent),color-stop(75%,rgba(32,255,77,.1)),color-stop(76%,rgba(32,255,77,.1)),color-stop(77%,transparent),to(transparent));background-image:linear-gradient(0deg,transparent 24%,rgba(32,255,77,.1) 25%,rgba(32,255,77,.1) 26%,transparent 27%,transparent 74%,rgba(32,255,77,.1) 75%,rgba(32,255,77,.1) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(32,255,77,.1) 25%,rgba(32,255,77,.1) 26%,transparent 27%,transparent 74%,rgba(32,255,77,.1) 75%,rgba(32,255,77,.1) 76%,transparent 77%,transparent);background-size:3rem 3rem;background-position:-1rem -1rem;width:100%;height:100%;position:relative;background-color:#111}.qr-scanner .box{width:75vw;height:75vw;max-height:75vh;max-width:75vh;position:relative;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);overflow:hidden;border:.1rem solid rgba(0,255,51,.2)}.qr-scanner .line{height:calc(100% - 2px);width:100%;background:-webkit-gradient(linear,left top,left bottom,color-stop(43%,rgba(0,255,51,0)),color-stop(211%,#0f3));background:linear-gradient(180deg,rgba(0,255,51,0) 43%,#0f3 211%);border-bottom:3px solid #0f3;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-animation:radar-beam 2s infinite;animation:radar-beam 2s infinite;-webkit-animation-timing-function:cubic-bezier(.53,0,.43,.99);animation-timing-function:cubic-bezier(.53,0,.43,.99);-webkit-animation-delay:1.4s;animation-delay:1.4s}.qr-scanner .angle:after,.qr-scanner .angle:before,.qr-scanner .box:after,.qr-scanner .box:before{content:"";display:block;position:absolute;width:3vw;height:3vw;border:.2rem solid transparent}.qr-scanner .box:after,.qr-scanner .box:before{top:0;border-top-color:#0f3}.qr-scanner .angle:after,.qr-scanner .angle:before{bottom:0;border-bottom-color:#0f3}.qr-scanner .angle:before,.qr-scanner .box:before{left:0;border-left-color:#0f3}.qr-scanner .angle:after,.qr-scanner .box:after{right:0;border-right-color:#0f3}@-webkit-keyframes radar-beam{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes radar-beam{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}