.activity.qrcode-scanner .barcode-scanner,
.activity.qrcode-scanner .barcode-scanner video,
.activity.qrcode-scanner .barcode-scanner .overlay {
    display: flex;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
}

.activity.qrcode-scanner .barcode-scanner .overlay {
    backdrop-filter: blur(15px);
}

.activity.qrcode-scanner .barcode-scanner video {
    object-fit: cover;
    background-color: black;
}

.activity.qrcode-scanner .barcode-scanner canvas {
    --width: 350px;
    --height: 350px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: calc(var(--width) / -2);
    margin-top: calc(var(--height) / -2);
    width: calc(var(--width));
    height: calc(var(--height));
    border: 2px dashed red;
    box-sizing: border-box;
}

.activity.qrcode-scanner .barcode-scanner .stop {
    position: fixed;
    right: 15px;
    top: 15px;
}

.activity.qrcode-scanner .barcode-scanner.is-hidden {
    display: none !important;
}

@media (max-width: 768px) {
    .activity.qrcode-scanner .barcode-scanner canvas {
        --width: 400px;
        --height: 400px;
    }
}

@media (max-width: 425px) {
    .activity.qrcode-scanner .barcode-scanner canvas {
        --width: 320px;
        --height: 320px;
    }
}

@media (max-width: 375px) {
    .activity.qrcode-scanner .barcode-scanner canvas {
        --width: 280px;
        --height: 280px;
    }
}

@media (max-width: 320px) {
    .activity.qrcode-scanner .barcode-scanner canvas {
        --width: 250px;
        --height: 250px;
    }
}