body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#232323;background-color:var(--background-color-dark);color:#ddd;color:var(--text-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}body,html{height:100%;width:100%}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{height:100%;width:100%}:root{--background-color:#2e2e2e;--background-color-dark:#232323;--secondary-background-color:#4d4d4d;--tertiary-background-color:#6a6a6a;--text-color:#ddd;--secondary-text-color:#aaa;--secondary-text-color2:#b4b4b4;--secondary-text-color3:#9b9b9b;--secondary-text-color4:#ececec;--primary-color:#4caf50;--primary-text-color:#fff;--secondary-color:#ffc107;--secondary-text-color:#000;--accent-color:#2196f3;--accent-text-color:#fff;--error-color:#ff5722;--error-text-color:#fff;--grey-1-color:#3a3e43;--grey-1-color-rgb:58,62,67;--grey-2-color:#696e75;--grey-2-color-rgb:105,110,117;--grey-3-color:#c0c5cb;--grey-3-color-rgb:192,197,203;--grey-4-color:#e0e2e6;--grey-4-color-rgb:224,226,230;--grey-5-color:#f3f5f8;--grey-5-color-rgb:243,245,248}.App{text-align:center}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.app{height:100%;width:100%}:host{display:inline-flex;pointer-events:none}button.default{border-radius:22px;height:44px;padding:0 20px}button.small{border-radius:16px;height:32px;padding:0 14px}button.small .label{font-size:13px}button.tiny{border-radius:16px;height:24px;padding:0 11px}button.tiny .label{font-size:13px;letter-spacing:-.1px;text-transform:capitalize}button .label{font-size:16px;font-weight:700;letter-spacing:.9px}button.small .left,button.small .right,button.tiny .left,button.tiny .right{display:none}button .left,button .right{position:absolute}button .icon.left{font-size:20px}button .icon.right{font-size:24px}button .spinner{height:24px;width:24px}button .left{left:17px}button .right{right:9px}button .left.spinner{left:15px}button{align-items:center;border:1px solid #0000;border-color:var(--grey-2-color);display:inline-flex;flex-direction:row;justify-content:center;margin:0;padding:0;pointer-events:all;position:relative;width:100%}button,button .icon,button .spinner{color:var(--grey-3-color)}button.isDisabled,button.isDisabled .icon,button.isDisabled .spinner,button.isSecondary,button.isSecondary .icon,button.isSecondary .spinner{color:var(--text-color)}button:not(.isSecondary){background-color:var(--primary-color);background-color:var(--background-color,var(--primary-color))}button:not(.isSecondary).isHovering,button:not(.isSecondary):hover{background:linear-gradient(0deg,#0003,#0003),var(--primary-color);background:linear-gradient(0deg,#0003,#0003),var(--background-color,var(--primary-color))}button.isSecondary{background-color:var(--background-color)}button.isSecondary.isDisabled{background-color:var(--grey-4-color)!important}button.isSecondary.isHovering,button.isSecondary:hover{background-color:var(--grey-2-color)}button.isDisabled{border-color:#0000!important}button.isDisabled,button.isLeftSpinner,button:not(.isClickable){pointer-events:none}button .icon{align-items:center;display:inline-flex;margin:0 8px}button .icon.left{margin-right:8px}button .icon.right{margin-left:8px}.button-container{margin:auto;padding:12px;width:25%}.button-container Button{margin-bottom:12px}.root{text-align:center}.join-container{margin:auto;padding:12px;width:25%}.join-container Input{margin-bottom:12px}input[type=text]{-webkit-appearance:none;appearance:none;background-color:var(--background-color);border:1px solid var(--grey-2-color);border-radius:6px;box-sizing:border-box;color:var(--text-color);display:inline-flex;flex-direction:row;height:44px;padding:0 10px 2px;pointer-events:all;width:100%}.header,input[type=text]{align-items:center;justify-content:center;position:relative}.header{display:flex;margin:auto;width:25%}.back-button-container{height:28px;left:0;position:absolute;width:28px}.root-settings{text-align:center}select{align-items:center;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:var(--background-color);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' fill='%232E2E2E' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.29 9.29c.39.39.39 1.02 0 1.41l-4.59 4.59a.996.996 0 0 1-1.41 0L6.7 10.7a.996.996 0 1 1 1.41-1.41L12 13.17l3.88-3.88c.39-.39 1.03-.38 1.41 0Z' fill='%23DDD'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;background-size:16px 16px;border:1px solid var(--grey-2-color);border-radius:6px;color:var(--text-color);display:inline-flex;flex-direction:row;height:44px;justify-content:center;padding:0 30px 2px 10px;pointer-events:all;position:relative;text-overflow:ellipsis;width:100%}.select-container{margin:4px 0}label{background-color:var(--background-color);color:var(--text-color)}.root-media-settings{text-align:center}.checkbox-container{padding-bottom:4px}.media-container{padding-bottom:8px;width:200px}.camera-wrapper{align-items:center;display:flex;height:100%;justify-content:center;overflow:hidden;padding-bottom:75%;position:relative;width:100%}.camera-wrapper .centered-video{height:100%;left:0;position:absolute;top:0;width:100%}.mic-wrapper{background-color:#000000a8;border-radius:4px;bottom:2px;height:28px;left:2px;position:absolute;width:28px}.mic-wrapper .off{height:24px;padding-top:2px}.mic-wrapper .mic-container{padding-left:2px;padding-top:2px}input[type=checkbox]{background-color:var(--background-color);border:1px solid #0000;border-color:var(--grey-2-color);color:var(--text-color);height:18px;margin-left:8px;pointer-events:all;width:18px}.checkbox-container{align-items:center;background-color:var(--background-color);border:1px solid var(--grey-2-color);border-radius:6px;box-sizing:border-box;display:flex;height:44px;margin:4px 0;width:100%}.checkbox-container input[type=checkbox]{margin-right:8px}.checkbox-container span{flex-grow:1;text-align:left}:host{display:flex;justify-content:center;position:relative}.mic-container .top{fill:var(--grey-3-color)}.mic-container .bottom{fill:var(--primary-color)}.mic-container svg{height:100%;width:100%}.mic-container svg mask rect{transition:height .1s}.mic-container{height:24px;width:24px}.camera-container{padding-bottom:12px;width:200px}video{background-color:#000;height:135px;width:180px}.container{margin:auto;width:25%}.root-preview{text-align:center}.button-container{padding-top:0}#my-canvas{height:97.5vh;width:100%}.hud-container{bottom:0;height:100%;position:absolute}.hud-menu-options{display:flex;width:282px}.hud-menu-options Button{height:28px;width:50%}.hud-menu-options Button:first-child{border-bottom-left-radius:8px;border-bottom-right-radius:0;border-top-left-radius:8px;border-top-right-radius:0}.hud-menu-options Button:last-child{border-bottom-left-radius:0;border-bottom-right-radius:8px;border-top-left-radius:0;border-top-right-radius:8px}.hud-menu-options Button span.icon{width:24px}.hud-view{background-color:#0006;display:flex;flex-direction:column;height:calc(100% - 198px);position:absolute;width:100%}.hud-menu-options Button span.icon svg.icon-active{color:green}.chat-messages{flex-grow:1;margin-bottom:2px;margin-top:8px;overflow-y:auto}.chat-message{display:flex;justify-content:space-between;margin-bottom:5px}.chat-message-user{font-weight:700;margin-right:5px;padding-left:8px}.chat-message-text{flex-grow:1;padding-right:8px;text-align:right}.chat-input{display:flex;width:100%}.chat-input Input{border-bottom-left-radius:8px;border-bottom-right-radius:0;border-top-left-radius:8px;border-top-right-radius:0;height:28px;width:100%}.chat-input Button{border-bottom-left-radius:0;border-bottom-right-radius:8px;border-top-left-radius:0;border-top-right-radius:8px;height:28px;width:28px}.participant-row{display:flex;justify-content:space-between;padding:4px}.participant-row .user-name{padding-left:4px}.tracks-container{display:flex;flex-direction:row}.tracks-container Button svg{padding-left:8px;padding-right:8px}.tracks-container Button{background:none;border:none;width:32px}.tracks-container button.isClickable:hover{cursor:pointer}.hud{display:block;position:absolute;z-index:1}.hud-button{height:40px;width:40px}.hud-button button{height:100%;width:100%}.left-button{bottom:79px;left:10px}.right-button{bottom:79px;left:100px}.up-button{bottom:124px;left:55px}.down-button{bottom:36px;left:55px}.hud-button Button{border-radius:6px}.hud-self-root{bottom:32px;left:150px;position:absolute;z-index:1}.hud-self-video{border:2px solid var(--grey-2-color);border-radius:10px;height:128px;pointer-events:all;width:128px}.hud-self-button{position:absolute;width:132px;z-index:2}.hud-self-button button{border-radius:10px}.hud-self-button.show{bottom:4px}.hud-self-button.hide{right:1px;top:-2px;width:24px}.hud-self-button.hide button span.label{rotate:270deg}.callcontrols-container{bottom:0;display:flex;flex-direction:row;position:fixed;width:282px}.callcontrols-container Button:first-child{border-bottom-left-radius:8px;border-top-left-radius:8px}.callcontrols-container Button{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0}.callcontrols-container Button:last-child{border-bottom-right-radius:8px;border-top-right-radius:8px}.copyable-label-container{background-color:var(--grey-1-color);border:1px solid grey;border-radius:8px;cursor:pointer;display:flex;flex-direction:row;margin:4px}.label-container{flex-grow:1;padding:4px;width:100%}.copyable-label-container Button{background-color:inherit;border:none;border-radius:8px;cursor:pointer;height:28px;width:32px}.copyable-label-container Button span.icon svg{height:20px;width:20px}.hud-fps-container{color:"white";position:absolute;right:10px;top:6px}.hud-media-controls-container{bottom:4px;display:flex;position:absolute;right:8px}.hud-media-controls-container Button{margin:2px;width:42px}.hud-media-controls-container Button svg{height:18px;width:18px}.slider-container{display:flex;padding-left:2px}.slider-label{cursor:pointer;padding-right:4px;text-align:right;width:60px}.slider-holder,.slider-label{padding-top:4px}input[type=range]{background:red;color:green}#canvas-container{height:100%;width:100%}
/*# sourceMappingURL=main.5c6c0632.css.map*/