<style> *{ font-family: PixelFont-7,monospace!important; } #helpCameraSettings { background: #eceeee; border: 1px solid #42464b; border-radius: 6px; margin: 25px auto 0; width: 400px; max-height: calc(48vh - 50px); max-width: 48vw; overflow: hidden; overflow-y: scroll; } #helpCameraSettings h1 { background-image: linear-gradient(top, #f1f3f3, #d4dae0); border-bottom: 1px solid #a6abaf; border-radius: 6px 6px 0 0; box-sizing: border-box; color: #727678; display: block; height: 43px; padding-top: 10px; margin: 0; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff; } #helpCameraSettings section { margin: 10px; } #helpCameraSettings section.action{ text-align: center; margin: 0; } #helpCameraSettings button { margin: 10px 4px; background-color: black; color: white; border-radius: 7px; padding-bottom: 4px; } #helpCameraSettings button#helpCameraSettingsFormCancel { background-color: #c7c7c700; color: #292929; } #helpCameraSettings section a{ font-size: 12px; text-decoration: underline; color: black; } #helpCameraSettings section h6, #helpCameraSettings section h5{ margin: 1px; } #helpCameraSettings section.text-center{ text-align: center; } #helpCameraSettings section p{ font-size: 8px; margin: 0px 20px; } #helpCameraSettings section p.err{ color: #ff0000; } #helpCameraSettings section ul{ margin: 6px; } #helpCameraSettings section li{ text-align: left; font-size: 8px; } #helpCameraSettings section img { width: 200px; margin-top: 10px; } @media only screen and (max-width: 800px), only screen and (max-height: 600px) { #helpCameraSettings{ overflow-y: scroll; } } </style> <form id="helpCameraSettings" hidden> <section class="text-center"> <h5>Camera/Microphone access needed</h5> <p class="err" id="permissionError">Permission denied</p> <p class="info">You must allow camera and microphone access in your browser.</p> <ul> <li>Please click on the lock or camera symbol on the side of the URL in the address bar. Here you can grant "always allow" access to your input devices.</li> <li>Please ensure that you have a camera AND microphone plugged into your computer.</li> </ul> <p class="info">Once you've followed these steps, please refresh this page.</p> <p>If you prefer to continue without allowing camera and microphone access, click on Continue</p> <p id='browserHelpSetting'></p> </section> <section class="action"> <a href="#" id="helpCameraSettingsFormRefresh">Refresh</a> <button type="submit" id="helpCameraSettingsFormContinue">Continue</button> </section> </form>