.component-barcode-scanner {
    width: 100vw;
    height: 100vh;
    /* min-width: 640px; */
    position: fixed;
    top: 0px;
    left: 0px;
    resize: both;
z-index:-1;
}

.dce-bg-loading {
    display: none;
    animation: 1s linear infinite dce-rotate;
    width: 40%;
    height: 40%;
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    fill: #aaa;
}

.dce-bg-camera {
    display: none;
    width: 80%;
    height: 80%;
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    fill: #aaa;
}

.dce-video-container {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 100vh;
    height: 100vh;
}


.dce-video-container video{
  /*  object-fit: cover !important;*/
}

.dce-scanarea {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.dce-scanlight::before{
    content: "";
    display: block;
    position: fixed;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100vh;
    background-color: #57B847;
         
}

.div-select-container {
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}

.dce-sel-camera {
    display: block;
}

.dce-sel-resolution {
    display: block;
    margin-top: 5px;
}

.dbr-msg-poweredby {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
}

.dbr-msg-poweredby svg {
    height: max(3vmin, 17px);
    fill: #FFFFFF;
}


@keyframes dce-rotate {
    from {
        transform: rotate(0turn);
    }

    to {
        transform: rotate(1turn);
    }
}

@keyframes dce-scanlight {
    from {
        top: 0;
    }

    to {
        top: 97%;
    }
}