#scanner{position:fixed;z-index:10000;left:0;top:0;width:100%;height:100vh;overflow-y:scroll;-webkit-overflow-scrolling:touch;background:white;text-align:center}#scanner h2{padding:10px 0;border:0}#scanner .close{position:absolute;right:10px;top:10px;width:32px;height:32px;opacity:.3;display:block;cursor:pointer}#scanner .close:hover{opacity:1}#scanner .close:before,#scanner .close:after{position:absolute;left:15px;content:" ";height:33px;width:2px;background-color:#333}#scanner .close:before{transform:rotate(45deg)}#scanner .close:after{transform:rotate(-45deg)}#scanner .scanner-wrapper{width:100%;max-width:300px;margin:0 auto;border:2px solid #f4f4f4;border-radius:5px;overflow:hidden}#scanner .scanner-wrapper .scanner-container div .overlay-element{height:100%}#scanner .scanner-wrapper .scanner-container div video{width:100%}#scanner form{padding-top:20px}#scanner form label{padding:5px 0;display:block;color:#000;font-weight:600;font-size:16px}#scanner form input{height:auto;padding:6px;font-size:20px;border-radius:3px;border:2px solid #d3d3d3}#scanner form .error{padding:0}#scanner form .error b{font-weight:600}#scanner form button{max-width:100%;margin:10px auto 0}#scanner #step-1{padding-bottom:20px}#scanner #step-2{padding:0 20px 20px}#scanner #step-2 input{width:220px;max-width:100%;margin:0}#scanner #step-2 button.cancel{background:#b3b3b3}#scanner #step-2 .product{padding-bottom:20px}#scanner #step-2 .product b.title{padding-bottom:5px;color:#000;font-weight:600;line-height:normal;display:block}#scanner #step-2 .product b.barcode{padding-bottom:5px;display:block}#scanner #step-2 .product img{max-width:100px;border:1px solid lightgray}