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