.control-panel-shell{position:absolute;display:flex;margin-left:20px;margin-top:20px;left:0;transition:150ms}.control-panel{box-shadow:1px 1px 10px rgba(0,0,0,.6274509804);border-radius:28px;color:#fff;z-index:100}.control-panel.hide{opacity:0}.control-panel-expander{position:relative;top:25px;height:14px;background-color:#5e5757;padding:2px;border-radius:0 3px 3px 0;cursor:pointer}.hamburger-menu{width:12px;height:2px;background-color:#111;margin:2px}.control-panel-entry{width:250px;background-color:#222;border-radius:0;box-sizing:content-box;color:#fff;cursor:pointer;display:block;font-family:"Google Sans","Titillium Web",sans-serif;font-size:15px;line-height:25px;padding:12px 16px;position:relative;z-index:100;border:none;border-bottom:1px solid #333}.control-panel-entry:first-child{border-radius:28px 28px 0 0}.control-panel-entry:last-child{border-radius:0 0 28px 28px;border:none}.control-panel-text{cursor:default;font-size:20px;font-weight:600;text-align:center}.control-panel-toggle .label{position:relative}.control-panel-toggle .value{position:absolute;top:8px;right:15px;width:80px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:40px;background:#000}.control-panel-toggle.yes .value{background-color:#309f93;color:#a3faa3}.control-panel-toggle.no .value{background-color:#d32f50;color:#f19e9e}.control-panel-slider .value{position:relative;width:100%}.control-panel-slider .callout{position:absolute;right:25px}.control-panel-fps{display:flex;justify-content:center;align-items:center}.control-panel-fps canvas{height:50px;width:100%;background-color:#222;margin:5px 0;z-index:0}.control-panel-fps .fps-text{position:absolute;font-size:20px;font-weight:600;text-align:center;backface-visibility:hidden}.control-panel-source-picker{display:flex;flex-direction:column;align-items:center}.control-panel-source-picker .inputs{display:none}.control-panel-source-picker .file-selection div{display:flex;align-items:center;justify-items:center}.control-panel-source-picker .file-selection div img{margin-left:8px}.source-selection{display:flex;flex-direction:row;align-items:center;width:100%}.video-controls{width:100%;display:none;flex-direction:row;align-items:center;justify-content:center;position:relative;margin:12px 0 4px}.video-controls *{display:inline-block}.video-controls img{margin:0 8px 0 -6px}.pause-button{height:100%}.video-track{height:5px;width:100%;background-color:#fff;flex-grow:1;margin-right:10px}.video-slider-ball{height:10px;width:10px;background-color:#fff;position:absolute;display:none;border-radius:50%}.video-time{padding-left:.1rem}.dropdown-wrapper{position:relative;user-select:none;width:calc(100% - 28px)}.dropdown{position:relative;display:flex;flex-direction:column}.dropdown-trigger{position:relative;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;justify-content:space-between;padding:0 10px;font-size:16px;font-weight:300;height:30px;line-height:30px;background:#333;color:#fff;cursor:pointer}.dropdown-trigger span{max-width:calc(100% - 30px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-options{position:absolute;display:block;top:100%;left:0;right:0;color:#fff;background:#333;transition:all .5s;opacity:0;visibility:hidden;pointer-events:none;z-index:2}.dropdown.open .dropdown-options{opacity:1;visibility:visible;pointer-events:all}.dropdown-option{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:left;padding:0 5px;font-size:16px;font-weight:300;line-height:30px;cursor:pointer;transition:all .5s;color:#fff}.dropdown-option *{padding-right:.5rem}.dropdown-option:hover{cursor:pointer;background-color:#b2b2b2}.dropdown-option.selected{color:#fff;background-color:#305c91}.arrow{position:relative;height:15px;width:10.6066017178px;margin-left:10.6066017178px;transform:scale(0.8)}.arrow::before,.arrow::after{content:"";position:absolute;bottom:0px;width:.15rem;height:100%;transition:all .5s;backface-visibility:hidden}.arrow::before{left:-5px;transform:rotate(135deg);background-color:#fff}.arrow::after{left:5px;transform:rotate(-135deg);background-color:#fff}.open .arrow::before{left:-5px;transform:rotate(45deg)}.open .arrow::after{left:5px;transform:rotate(-45deg);backface-visibility:hidden}.fps-30{position:absolute;font-size:8px;top:45%;left:10px}.fps-60{position:absolute;font-size:8px;top:15%;left:10px}
