<style> #helpCameraSettings { background: #eceeee; border: 1px solid #42464b; border-radius: 6px; margin: 10px auto 0; width: 400px; height: 370px; } #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 input { font-size: 70%; background: linear-gradient(top, #d6d7d7, #dee0e0); border: 1px solid #a1a3a3; border-radius: 4px; box-shadow: 0 1px #fff; box-sizing: border-box; color: #696969; height: 30px; transition: box-shadow 0.3s; width: 100%; } #helpCameraSettings section { margin: 10px; } #helpCameraSettings section.action{ text-align: center; margin: 0; } #helpCameraSettings button { margin-top: 10px; background-color: black; color: white; border-radius: 7px; padding-bottom: 4px; } #helpCameraSettings button#helpCameraSettingsFormCancel { background-color: #c7c7c700; color: #292929; } #helpCameraSettings section a{ text-align: center; font-size: 12px; margin: 0 6px; 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; } </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"> <button type="submit" id="helpCameraSettingsFormRefresh">Refresh</button> <button type="submit" id="helpCameraSettingsFormContinue">Continue</button> </section> </form>