.qrscanner {
    background: none;

    &-area {
        width: 100%;
        height: 86%;
        background: url('/assets/scanner.svg') no-repeat center center;
        background-size: contain;
    }
}

.through-line {
    left: 25%;
    width: 50%;
    height: 2px;
    background: red;
    position: absolute;
    animation: myfirst 2s linear infinite alternate;
}

@keyframes myfirst {
    0% {
        background: red;
        top: 30%;
    }

    25% {
        background: yellow;
        top: 35%;
    }

    50% {
        background: blue;
        top: 40%;
    }

    75% {
        background: green;
        top: 45%;
    }

    100% {
        background: red;
        top: 50%;
    }
}

.button-bottom {
    width: 128px;
    position: absolute;
    left: 50%;
    bottom: 80px;
    margin-left: -64px;

    .icon-camera {
        float: left;
    }
}

.scanPage {
    background: none;
    // opacity: 0;
    width: 100%;
    height: 100%;
    text-align: center;

    .scanPage-title {
        width: 100%;
        height: 5%;
        text-align: center;
    }

    .scanPage-scan {
        width: 100%;
        height: 95%;
        background: url(/assets/scanner.svg) no-repeat center center;
        background-size: 500px 500px;
    }
}