.osQRCodeReader{position:fixed;top:0;left:0;right:0;bottom:0;padding:0;width:100vw;height:100vh;margin:0;background-color:black;display:none;z-index:20001;}
.osQRCodeReader *{box-sizing:border-box}
.osQRCodeReaderCanvas{margin:0;display:block;width:100vw;height:100vh;}
.osQRCodeReaderHeader{position:absolute;top:0;left:0;background-color:rgba(0,0,0,0.3);width:100vw;height:35vh;z-index:2}
.osQRCodeReaderMessage{width:100%;height:calc(100% - 25px);text-align:center;padding:20px;color:white;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;}
.osQRCodeReaderInfo{width:100%;height:25px;line-height:25px;font-size:12px;text-align:center;padding:0 20px;color:white;position:absolute;bottom:0;left:0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;}
.osQRCodeReaderResult{position:absolute;bottom:0;left:0;background-color:rgba(0,0,0,0.3);width:100vw;height:35vh;z-index:2;text-align:center;padding:20px;color:white;overflow-y:auto}
.osQRCodeReaderMain{position:absolute;top:35vh;left:0;width:100vw;height:30vh;min-height:220px;display:flex;z-index:3;box-sizing:border-box}
.osQRCodeReaderTool{width:20vw;height:100%;background-color:rgba(0,0,0,0.3);display:flex;flex-wrap: wrap;align-items: center;}
.osQRCodeReaderTool a{width:calc(100% - 10px);text-align:center;font-size:11px;display:block;color:white !important;padding:10px;background-color:rgba(0,0,0,0.8);margin:0 5px;}
.osQRCodeReaderTool i{width:100%;text-align:center;font-size:22px;display:block;margin-bottom:10px;}
.osQRCodeReaderTarget{width:60vw;height:100%;position:relative;box-sizing:border-box}
.osQRCodeReaderTarget .tl{width:50px;height:50px;border-top:3px solid #50B648;border-left:3px solid #50B648;position:absolute;top:0;left:0}
.osQRCodeReaderTarget .tr{width:50px;height:50px;border-top:3px solid #50B648;border-right:3px solid #50B648;position:absolute;top:0;right:0}
.osQRCodeReaderTarget .c{width:80%;height:6px;background-color:#50B648;position:absolute;top:calc(50% - 3px);left:calc(10%);display:none;pointer-events:none}
.osQRCodeReaderTarget .bl{width:50px;height:50px;border-bottom:3px solid #50B648;border-left:3px solid #50B648;position:absolute;bottom:0;left:0}
.osQRCodeReaderTarget .br{width:50px;height:50px;border-bottom:3px solid #50B648;border-right:3px solid #50B648;position:absolute;bottom:0;right:0}
:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1
}
.animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
.animate__flash {
    -webkit-animation-name: flash;
    animation-name: flash
}
.animate__animated.animate__infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}
@media (prefers-reduced-motion:reduce),print {
    .animate__animated {
        -webkit-animation-duration: 1ms !important;
        animation-duration: 1ms !important;
        -webkit-transition-duration: 1ms !important;
        transition-duration: 1ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important
    }

        .animate__animated[class*=Out] {
            opacity: 0
        }
}
@-webkit-keyframes flash {
    0%,50%,to {
        opacity: 1
    }

    25%,75% {
        opacity: 0
    }
}

@keyframes flash {
    0%,50%,to {
        opacity: 1
    }

    25%,75% {
        opacity: 0
    }
}