html, body {
    margin: 0;
    height: 100%;
    background-color: #cccccc;
}

.wrapper {
    height: 100%;
    width: 100%;
    position: relative;
}

#qr-video {
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    object-fit: cover;
}

.buttons-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

#flash-toggler {
    position: absolute;
    right: 15px;
    bottom: 70px;
}

#flash-toggler .light{
    display: none;
}
#flash-toggler.on .light{
    display: inline-block;
}

#settings-btn {
    position: absolute;
    right: 15px;
    bottom: 15px;
}

.scan-region-highlight {
    transition: all .2s ease-in;
    margin: auto;
    background: linear-gradient(#12fb1c,#12fb1c) left top,linear-gradient(#12fb1c,#12fb1c) left top,linear-gradient(#12fb1c,#12fb1c) right top,linear-gradient(#12fb1c,#12fb1c) right top,linear-gradient(#12fb1c,#12fb1c) right bottom,linear-gradient(#12fb1c,#12fb1c) right bottom,linear-gradient(#12fb1c,#12fb1c) left bottom,linear-gradient(#12fb1c,#12fb1c) left bottom;
    background-repeat: no-repeat;
    background-size: 3px 20px,20px 3px;
}

.scan-region-highlight::after {
    content: "";
    display: table;
    line-height: 0;
    margin-top: 3px;
    margin-left: 3px;
    box-shadow: 0 -1px 0 rgb(249 249 249 / 6%), 0 0 3px rgb(255 255 255 / 18%), 0 1px 3px rgb(253 253 253 / 18%);
}

.scan-region-highlight .line {
    width: 220px;
    height: 2px;
    background: #12fb1c;
    position: absolute;
    transition: all .2s linear;
    animation: scanner 2s linear infinite;
    box-shadow: 0 0 20px 5px #12fb1c;
    border-radius: 50%;
    margin: auto;
    right: 0;
    left: 0;
}
.scan-region-highlight .scan-region-highlight-svg {
    display: none;
}
.scan-region-highlight .code-outline-highlight {
    stroke: #12fb1c !important;
}

@keyframes scanner {
	0% {
		bottom: 100%
	}
	50% {
		bottom: 0
	}
	to {
		bottom: 100%
	}
}

.no-camera #scan-area {
    display: none;
}
.no-camera {
    background: #a79eb7;
}
.no-camera-found {
    display: none;
    position: absolute;
    right: 0;
    left: 0;
    top: 40%;
    margin-top: auto;
    text-align: center;
}
.no-camera-found svg {
    width: 50px;
    fill: #ffffff;
}
.no-camera-found h2 {
    font-size: 22px;
    font-weight: 400;
    color: #ffffff;
}
.no-camera .no-camera-found {
    display: block;
}