#dbrDemo { width: 100%; background: #323234; position: relative; }
    #dbrDemo .loadingMask { position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; z-index: 1; font-size: 40px; line-height: 1.5; font-family: monospace; }
        #dbrDemo .loadingMask.loading .loading { display: block; }
        #dbrDemo .loadingMask.loading .failed { display: none; }
        #dbrDemo .loadingMask.failed .loading { display: none; }
        #dbrDemo .loadingMask.failed .failed { display: block; }
        #dbrDemo .loadingMask .loading { display: none; color: white; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; }
            #dbrDemo .loadingMask .loading .ellipsis::before { content: "....."; display: inline-block; vertical-align: bottom; overflow: hidden; animation: dot-ellipsis 3s steps(5, end) infinite; white-space: nowrap; }

@keyframes dot-ellipsis {
    from { width: 1ch; }
    to { width: 6ch; }
}

#dbrDemo .loadingMask .failed { display: none; color: #f35959; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; }
#dbrDemo .dbrDemoContainer { min-height: 600px; padding-bottom: 20px; color: white; display: flex; flex-direction: column; align-items: center; padding-top: 84px; }

@media (max-width: 991px) {
    #dbrDemo .dbrDemoContainer { min-height: 550px; }
}

@media (max-width: 767px) {
    #dbrDemo .dbrDemoContainer { padding-top: 20px; }
}

#dbrDemo .dbrDemoContainer .barcodeReader { width: 880px; }

@media (max-width: 1199px) {
    #dbrDemo .dbrDemoContainer .barcodeReader { width: 100%; }
}

#dbrDemo .dbrDemoContainer .barcodeReader > p { color: #AAAAAA; font-size: 14px; }
#dbrDemo .dbrDemoContainer .barcodeReader .head { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; margin-bottom: 16px; }

@media (max-width: 767px) {
    #dbrDemo .dbrDemoContainer .barcodeReader .head { flex-direction: column; align-items: flex-start; }
}

#dbrDemo .dbrDemoContainer .barcodeReader .head .title h2 { color: white; font-family: Oswald-Light; font-size: 40px; line-height: 60px; }

@media (max-width: 1679px) {
    #dbrDemo .dbrDemoContainer .barcodeReader .head .title h2 { font-size: 32px; line-height: 40px; }
}

@media (max-width: 991px) {
    #dbrDemo .dbrDemoContainer .barcodeReader .head .title h2 { font-size: 24px; }
}

#dbrDemo .dbrDemoContainer .barcodeReader .head .title > p { font-size: 20px; }

@media (max-width: 991px) {
    #dbrDemo .dbrDemoContainer .barcodeReader .head .title > p { font-size: 16px; }
}

#dbrDemo .dbrDemoContainer .barcodeReader .head .uploadBtn { height: 48px; line-height: 46px; width: 149px; font-size: 22px; font-family: Oswald-Light; background: #fe8e14; text-align: center; cursor: pointer; transition: ease-in-out 0.2s all; }
    #dbrDemo .dbrDemoContainer .barcodeReader .head .uploadBtn:hover { box-shadow: -8px 8px 0 0 #fff; transform: translate(8px, -8px); transition: ease-in 0.2s all; }

@media (max-width: 991px) {
    #dbrDemo .dbrDemoContainer .barcodeReader .head .uploadBtn { font-size: 20px; height: 40px; line-height: 38px; width: 130px; margin: 10px 0; }
}

#dbrDemo .dbrDemoContainer .barcodeReader .uploadSector { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }

@media (max-width: 991px) {
    #dbrDemo .dbrDemoContainer .barcodeReader .uploadSector { flex-direction: column; }
}

#dbrDemo .dbrDemoContainer .barcodeReader .uploadSector .imageContainer { height: 200px; width: 100%; border: 2px dashed #FE8E14; }
    #dbrDemo .dbrDemoContainer .barcodeReader .uploadSector .imageContainer .beforeUpload { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: rgba(254, 142, 20, 0.2); cursor: pointer; }
        #dbrDemo .dbrDemoContainer .barcodeReader .uploadSector .imageContainer .beforeUpload .tip { height: 68px; display: flex; width: 50%; height: 68px; }

@media (max-width: 1199px) {
    #dbrDemo .dbrDemoContainer .barcodeReader .uploadSector .imageContainer .beforeUpload .tip { width: 65%; }
}

@media (max-width: 991px) {
    #dbrDemo .dbrDemoContainer .barcodeReader .uploadSector .imageContainer .beforeUpload .tip { width: 75%; }
}

@media (max-width: 572px) {
    #dbrDemo .dbrDemoContainer .barcodeReader .uploadSector .imageContainer .beforeUpload .tip { width: 90%; }
}

#dbrDemo .dbrDemoContainer .barcodeReader .uploadSector .imageContainer .beforeUpload .tip .icon { width: 35%; height: 100%; background: url(../../images/icons/dbr/dbrjs_demo_icon.svg) no-repeat center; }

@media (max-width: 572px) {
    #dbrDemo .dbrDemoContainer .barcodeReader .uploadSector .imageContainer .beforeUpload .tip .icon { display: none; }
}

#dbrDemo .dbrDemoContainer .barcodeReader .uploadSector .imageContainer .beforeUpload .tip .text { color: #d57c1a; height: 100%; width: 65%; }

@media (max-width: 572px) {
    #dbrDemo .dbrDemoContainer .barcodeReader .uploadSector .imageContainer .beforeUpload .tip .text { width: 100%; }
}

#dbrDemo .dbrDemoContainer .barcodeReader .uploadSector .imageContainer .beforeUpload .tip .text > p:first-child { font-size: 26px; font-family: Oswald-Regular; }

@media (max-width: 572px) {
    #dbrDemo .dbrDemoContainer .barcodeReader .uploadSector .imageContainer .beforeUpload .tip .text > p:first-child { font-size: 22px; }
}

#dbrDemo .dbrDemoContainer .barcodeReader .uploadSector .imageContainer .beforeUpload .tip .text > p:last-child { font-size: 16px; }
#dbrDemo .dbrDemoContainer .barcodeReader .uploadSector .imageContainer .loading { width: 100%; height: 100%; background-color: rgba(254, 142, 20, 0.2); display: none; justify-content: center; align-items: center; }
    #dbrDemo .dbrDemoContainer .barcodeReader .uploadSector .imageContainer .loading .loadingText { font-size: 30px; display: inline-block; font-family: Oswald-Regular; color: rgba(254, 142, 20, 0.2); box-sizing: border-box; letter-spacing: 2px; position: relative; }
        #dbrDemo .dbrDemoContainer .barcodeReader .uploadSector .imageContainer .loading .loadingText::after { content: "Decoding..."; position: absolute; left: 0; top: 0; color: #fe8314; width: 100%; height: 100%; font-family: Oswald-Regular; overflow: hidden; box-sizing: border-box; animation: loading 2s linear infinite; }
#dbrDemo .dbrDemoContainer .barcodeReader .uploadSector .imageContainer .decoded { width: 100%; height: 100%; background: #636365; display: none; justify-content: center; }
    #dbrDemo .dbrDemoContainer .barcodeReader .uploadSector .imageContainer .decoded img { max-width: 100%; object-fit: contain; }
    #dbrDemo .dbrDemoContainer .barcodeReader .uploadSector .imageContainer .decoded canvas { max-width: 100%; max-height: 100%; }
#dbrDemo .dbrDemoContainer .barcodeReader .decodeResult { margin-top: 30px; font-size: 18px; color: white; }
    #dbrDemo .dbrDemoContainer .barcodeReader .decodeResult .success { display: flex; color: #6AC4BB; }

@media (max-width: 991px) {
    #dbrDemo .dbrDemoContainer .barcodeReader .decodeResult .success { flex-direction: column; }
}

#dbrDemo .dbrDemoContainer .barcodeReader .decodeResult .success p span { color: #fe8e14; }

@media (max-width: 991px) {
    #dbrDemo .dbrDemoContainer .barcodeReader .decodeResult .success p { font-size: 16px; }
}

#dbrDemo .dbrDemoContainer .barcodeReader .decodeResult .success ul { flex-grow: 1; max-height: 100px; overflow: auto; }
    #dbrDemo .dbrDemoContainer .barcodeReader .decodeResult .success ul li { list-style: decimal; margin-left: 32px; line-height: 30px; }

@media (max-width: 991px) {
    #dbrDemo .dbrDemoContainer .barcodeReader .decodeResult .success ul li { margin-left: 22px; }
}

@keyframes loading {
    0% { width: 0%; }
    100% { width: 100%; }
}