#interactive.viewport {position: relative; width: 100%; height: auto; overflow: hidden; text-align: center;}
#interactive.viewport > canvas, #interactive.viewport > video {max-width: 100%;width: 100%;}
canvas.drawing, canvas.drawingBuffer {position: absolute; left: 0; top: 0;}
.success{height:50px;text-align:center;background: #D8FFC0;padding: 5px 10px 5px 10px;margin: 0px 0px 5px 0px;font-weight: bold;color: #2E6800;border: 3px solid #2E6800;}
#contact_results {width:100%;}
.error {width: 100%;text-align:center;background: #FFE8E8;padding: 5px 10px 5px 10px;margin: 0px 0px 5px 0px;font-weight: bold;color: #FF0000;border: 3px solid #FF0000;}

/* QRCode */
#qr-canvas {
  margin: auto;
  width: calc(100% - 20px);
  max-width: 400px;
}

#btn-scan-qr {
  cursor: pointer;
}

#btn-scan-qr img {
  height: 10em;
  padding: 15px;
  margin: 15px;
  background: white;
}

#qr-result {
  font-size: 1.2em;
  margin: 20px auto;
  padding: 20px;
  max-width: 700px;
  background-color: white;
}