@import "https://fonts.googleapis.com/css2?family=Roboto&display=swap";
html,body{width:100%;height:100%;margin:0;padding:0;font-family:Roboto,sans-serif}#root,#canvas,#UI{width:100%;height:100%;position:absolute;inset:0}#UI{z-index:1;justify-content:center;align-items:center;display:flex}.UI-wrapper{background-color:#ffffffbf;border:1px solid #222;border-radius:1rem;flex-direction:column;justify-content:center;align-items:flex-start;min-width:50vw;max-width:50vw;min-height:30vh;padding:20px;display:flex}.UI-wrapper button{border:1px solid #222;border-radius:5px;margin:5px auto;padding:5px}.ui-start{flex-direction:column;align-items:stretch;width:100%;height:100%;display:flex}.ui-start>button{margin:inherit;text-align:left;background:0 0;border:none;border-left:.5rem solid #000;border-radius:0;font-size:1.5rem;position:relative}.ui-start>button:after{content:"";background:#0003;width:0%;height:100%;transition:all .3s ease-out;display:block;position:absolute;top:0;left:0}.ui-start>button:hover:after{background:#0003;width:100%}.webcam-selector{flex-direction:row;align-items:center;display:flex}.webcam-selector>*{margin:5px}.webcam-selector>select{flex-grow:1}.w100{width:100%}.m5{margin:5px!important}.flex{align-items:center;display:flex}.flew-row{flex-direction:row;align-items:center;display:flex}.flex-grow{flex-grow:1}.ms-2{margin-left:1rem!important}select{min-width:15rem}