.web-camera-container{display:flex;flex-direction:column;justify-content:center;align-items:center}.web-camera-container .camera-button{margin-bottom:2rem}.web-camera-container .camera-box{position:relative}.web-camera-container .camera-box .camera-shutter{opacity:0;width:350;height:350px;background-color:#fff;position:absolute}.web-camera-container .camera-box .camera-shutter.flash{opacity:1}.web-camera-container .camera-box .camera-canvas,.web-camera-container .camera-box .camera-video{width:100%;max-width:350px;height:auto}.web-camera-container .camera-shoot{margin:1rem 0}.web-camera-container .camera-shoot button{height:60px;width:60px;display:flex;align-items:center;justify-content:center;border-radius:100%}.web-camera-container .camera-shoot button svg{height:35px;-o-object-fit:cover;object-fit:cover}.web-camera-container .camera-loading{overflow:hidden;height:100%;position:absolute;width:100%;min-height:150px;margin:3rem 0 0 -1.2rem}.web-camera-container .camera-loading ul{height:100%;position:absolute;width:100%;z-index:999999;margin:0}.web-camera-container .camera-loading .loader-circle{display:block;height:14px;margin:0 auto;top:50%;left:100%;transform:translateY(-50%);transform:translateX(-50%);position:absolute;width:100%;padding:0}.web-camera-container .camera-loading .loader-circle li{display:block;float:left;width:10px;height:10px;line-height:10px;padding:0;position:relative;margin:0 0 0 4px;background:#999;animation:preload 1s infinite;top:-50%;border-radius:100%}.web-camera-container .camera-loading .loader-circle li:nth-child(2){animation-delay:.2s}.web-camera-container .camera-loading .loader-circle li:nth-child(3){animation-delay:.4s}@keyframes preload{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@media(max-width:350px){.web-camera-container .camera-canvas,.web-camera-container .camera-video{width:100%;height:auto}}