-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1012 lines (855 loc) · 74.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Croquet Chat</title>
<script src='https://cdn.agora.io/sdk/release/AgoraRTC_N-4.13.0.js'></script>
<script src="https://cdn.jsdelivr.net/npm/@croquet/[email protected]"></script>
<script src="./apiKey.js"></script>
</head>
<!-- svgs encoded using https://yoksel.github.io/url-encoder/ -->
<style>
/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
html {
font-family: 'Poppins', sans-serif;
}
body {
background-color: white;
overflow: hidden;
}
html, body {
margin: 0;
padding: 0;
}
#cover {
width: 100%; height: 100%;
position: absolute; z-index: 2;
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
user-select: none;
-webkit-user-select: none;
cursor: pointer;
background-color: white;
}
#cover.hidden {
display: none;
}
#ui {
width: 100%;
height: 100%;
display: flex;
align-items: stretch;
overflow: hidden;
background-color: black;
}
#ui.hidden {
display: none;
}
#local {
display: none;
}
/* PROFILE */
#ui.spectator #profile {
display: none;
}
#profile {
display: flex;
}
/* #profileButtons {
flex: 1;
display: flex;
justify-content: space-evenly;
align-items: center;
background-color: #393838;
height: 60px;
} */
#profileButtons {
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
background-color: #393838;
width: 100%;
height: 60px;
}
#profileButtons > div {
display: flex;
align-items: center;
cursor: pointer;
}
#profilebuttons #toggleConnection{
border: 2px solid #dc3545;
}
#profilebuttons #toggleConnection:hover{
background-color: #dc3545;
}
#profilebuttons #ui.userLeft #toggleConnection{
border: 2px solid #28a745;
}
#profilebuttons >div:hover{
background-color: #191919;
}
#profilebuttons >div:focus{
outline: none !important;
}
#profilebuttons #toggleSettings:focus{
background-color: #191919;
}
#profileButtons .buttonImage {
width: 100%;
height: 100%;
background-position: center;
display: none;
}
#toggleAudio > .enabled {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 25 25' style='enable-background:new 0 0 25 25;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bdisplay:none;%7D .st1%7Bdisplay:inline;fill:%23393838;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23006837;%7D .st4%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.0519;stroke-miterlimit:10;%7D .st5%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st6%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.8088;stroke-miterlimit:10;%7D .st7%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.364;stroke-miterlimit:10;%7D .st8%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st9%7Bfill:%23E85656;%7D .st10%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st11%7Bfill:%23393838;%7D .st12%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st13%7Bfill:%23191919;%7D .st14%7Bfill:none;stroke:%23E85656;stroke-width:0.5;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg id='Layer_1' class='st0'%3E%3Crect x='-80.05' y='-29.65' class='st1' width='270.4' height='215.61'/%3E%3C/g%3E%3Cg id='Layer_2'%3E%3Cg%3E%3Cpath class='st12' d='M12.04,16.48c0.02-0.03,0.03-0.03,0.03-0.04c0-0.16,0.05-0.34-0.01-0.46c-0.05-0.09-0.25-0.12-0.38-0.16 c-1.24-0.37-2.16-1.59-2.18-2.91c0-0.25,0-0.5,0-0.74c0-0.21,0.11-0.31,0.31-0.31c0.06,0,0.12,0,0.18,0 c0.24,0,0.32,0.09,0.33,0.33c0.01,0.36,0,0.71,0.04,1.07c0.09,0.8,0.83,1.71,1.85,1.85c1.24,0.17,2.48-0.85,2.46-2.17 c0-0.26,0-0.52,0-0.78c0-0.2,0.1-0.29,0.3-0.3c0.01,0,0.01,0,0.02,0c0.45-0.01,0.5,0.04,0.5,0.49c0,0.53,0.03,1.07-0.17,1.58 c-0.4,1.06-1.15,1.72-2.26,1.95c-0.15,0.03-0.17,0.09-0.17,0.22c0,0.38,0,0.38,0.38,0.38c0.17,0,0.34,0,0.51,0 c0.24,0,0.34,0.1,0.35,0.34c0,0.07,0,0.15,0,0.22c-0.01,0.16-0.1,0.26-0.26,0.26c-0.91,0-1.81,0-2.72,0 c-0.17,0-0.26-0.09-0.28-0.25c-0.01-0.08-0.01-0.16-0.01-0.24c0.01-0.23,0.11-0.33,0.34-0.33C11.48,16.47,11.77,16.48,12.04,16.48 z'/%3E%3Cpath class='st12' d='M14.13,11.59c0,0.47,0,0.93,0,1.4c-0.01,0.8-0.61,1.46-1.44,1.58c-0.77,0.11-1.55-0.4-1.76-1.15 c-0.04-0.16-0.07-0.33-0.07-0.5c-0.01-0.89-0.01-1.78,0-2.67c0.01-0.76,0.47-1.38,1.16-1.6c1.04-0.32,2.11,0.47,2.11,1.56 C14.13,10.67,14.13,11.13,14.13,11.59z M13.31,11.59c0-0.45,0-0.91,0-1.36c0-0.45-0.33-0.8-0.77-0.81 c-0.47-0.01-0.84,0.31-0.85,0.77c-0.01,0.93-0.01,1.86,0,2.79c0.01,0.46,0.38,0.8,0.83,0.79c0.45-0.01,0.8-0.37,0.8-0.83 C13.31,12.48,13.31,12.04,13.31,11.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
}
#toggleAudio > .disabled {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 25 25' style='enable-background:new 0 0 25 25;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bdisplay:none;%7D .st1%7Bdisplay:inline;fill:%23393838;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23006837;%7D .st4%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.0519;stroke-miterlimit:10;%7D .st5%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st6%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.8088;stroke-miterlimit:10;%7D .st7%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.364;stroke-miterlimit:10;%7D .st8%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st9%7Bfill:%23E85656;%7D .st10%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st11%7Bfill:%23393838;%7D .st12%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st13%7Bfill:%23191919;%7D .st14%7Bfill:none;stroke:%23E85656;stroke-width:0.5;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg id='Layer_1' class='st0'%3E%3Crect x='-80.05' y='-3.93' class='st1' width='270.4' height='215.61'/%3E%3C/g%3E%3Cg id='Layer_2'%3E%3Cg%3E%3Cpath class='st12' d='M12.04,16.48c0.02-0.03,0.03-0.03,0.03-0.04c0-0.16,0.05-0.34-0.01-0.46c-0.05-0.09-0.25-0.12-0.38-0.16 c-1.24-0.37-2.16-1.59-2.18-2.91c0-0.25,0-0.5,0-0.74c0-0.21,0.11-0.31,0.31-0.31c0.06,0,0.12,0,0.18,0 c0.24,0,0.32,0.09,0.33,0.33c0.01,0.36,0,0.71,0.04,1.07c0.09,0.8,0.83,1.71,1.85,1.85c1.24,0.17,2.48-0.85,2.46-2.17 c0-0.26,0-0.52,0-0.78c0-0.2,0.1-0.29,0.3-0.3c0.01,0,0.01,0,0.02,0c0.45-0.01,0.5,0.04,0.5,0.49c0,0.53,0.03,1.07-0.17,1.58 c-0.4,1.06-1.15,1.72-2.26,1.95c-0.15,0.03-0.17,0.09-0.17,0.22c0,0.38,0,0.38,0.38,0.38c0.17,0,0.34,0,0.51,0 c0.24,0,0.34,0.1,0.35,0.34c0,0.07,0,0.15,0,0.22c-0.01,0.16-0.1,0.26-0.26,0.26c-0.91,0-1.81,0-2.72,0 c-0.17,0-0.26-0.09-0.28-0.25c-0.01-0.08-0.01-0.16-0.01-0.24c0.01-0.23,0.11-0.33,0.34-0.33C11.48,16.47,11.77,16.48,12.04,16.48 z'/%3E%3Cpath class='st12' d='M14.13,11.59c0,0.47,0,0.93,0,1.4c-0.01,0.8-0.61,1.46-1.44,1.58c-0.77,0.11-1.55-0.4-1.76-1.15 c-0.04-0.16-0.07-0.33-0.07-0.5c-0.01-0.89-0.01-1.78,0-2.67c0.01-0.76,0.47-1.38,1.16-1.6c1.04-0.32,2.11,0.47,2.11,1.56 C14.13,10.67,14.13,11.13,14.13,11.59z M13.31,11.59c0-0.45,0-0.91,0-1.36c0-0.45-0.33-0.8-0.77-0.81 c-0.47-0.01-0.84,0.31-0.85,0.77c-0.01,0.93-0.01,1.86,0,2.79c0.4,0.27,0.58,0.25,0.83,0.79c0.45-0.01,0.8-0.37,0.8-0.83 C13.31,12.48,13.31,12.04,13.31,11.59z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='st2' d='M16.39,16.49c-0.18,0-0.31-0.11-0.38-0.18L7.75,9.59C7.43,9.33,7.4,9.05,7.65,8.73l0.08-0.1 c0.07-0.08,0.21-0.25,0.43-0.25c0.16,0,0.28,0.08,0.39,0.17l8.11,6.61c0.12,0.09,0.18,0.14,0.23,0.2 c0.05,0.05,0.09,0.11,0.12,0.17l0.11,0.19l-0.09,0.25l-0.09,0.12c-0.08,0.11-0.16,0.22-0.28,0.31l-0.09,0.07L16.39,16.49z'/%3E%3Cpath class='st11' d='M8.15,8.69c0.05,0,0.11,0.03,0.19,0.1c1.12,0.91,2.24,1.82,3.36,2.74c1.58,1.29,3.17,2.58,4.75,3.87 c0.07,0.06,0.15,0.11,0.21,0.17c0.04,0.04,0.07,0.11,0.13,0.19c-0.11,0.13-0.2,0.28-0.32,0.38c-0.03,0.02-0.06,0.03-0.08,0.03 c-0.08,0-0.15-0.08-0.22-0.13c-1.52-1.24-3.04-2.48-4.57-3.72c-1.22-1-2.44-1.99-3.66-2.99C7.76,9.2,7.75,9.11,7.89,8.92 c0.02-0.03,0.04-0.06,0.07-0.08C8.04,8.74,8.09,8.69,8.15,8.69 M8.15,8.07L8.15,8.07c-0.37,0-0.59,0.26-0.67,0.36 C7.45,8.47,7.42,8.51,7.4,8.55C7.05,9,7.11,9.47,7.55,9.83l3.66,2.99l4.57,3.72c0.12,0.1,0.31,0.27,0.61,0.27 c0.17,0,0.34-0.06,0.48-0.17c0.14-0.12,0.25-0.25,0.33-0.36c0.03-0.03,0.05-0.07,0.08-0.1l0.29-0.35l-0.25-0.38l-0.04-0.06 c-0.04-0.06-0.09-0.14-0.17-0.23c-0.06-0.07-0.14-0.12-0.21-0.18l-0.05-0.04l-2.14-1.75l-2.61-2.13L11,10.16L8.74,8.31 C8.6,8.2,8.41,8.07,8.15,8.07L8.15,8.07z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
}
#toggleAudio > .unavailable {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 25 25' style='enable-background:new 0 0 25 25;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bdisplay:none;%7D .st1%7Bdisplay:inline;fill:%23393838;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23006837;%7D .st4%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.0519;stroke-miterlimit:10;%7D .st5%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st6%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.8088;stroke-miterlimit:10;%7D .st7%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.364;stroke-miterlimit:10;%7D .st8%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st9%7Bfill:%23E85656;%7D .st10%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st11%7Bfill:%23393838;%7D .st12%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st13%7Bfill:%23191919;%7D .st14%7Bfill:none;stroke:%23E85656;stroke-width:0.5;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg id='Layer_1' class='st0'%3E%3Crect x='-122.05' y='-0.18' class='st1' width='270.4' height='215.61'/%3E%3C/g%3E%3Cg id='Layer_2'%3E%3Cg%3E%3Cpath class='st8' d='M12.04,16.48c0.02-0.03,0.03-0.03,0.03-0.04c0-0.16,0.05-0.34-0.01-0.46c-0.05-0.09-0.25-0.12-0.38-0.16 c-1.24-0.37-2.16-1.59-2.18-2.91c0-0.25,0-0.5,0-0.74c0-0.21,0.11-0.31,0.31-0.31c0.06,0,0.12,0,0.18,0 c0.24,0,0.32,0.09,0.33,0.33c0.01,0.36,0,0.71,0.04,1.07c0.09,0.8,0.83,1.71,1.85,1.85c1.24,0.17,2.48-0.85,2.46-2.17 c0-0.26,0-0.52,0-0.78c0-0.2,0.1-0.29,0.3-0.3c0.01,0,0.01,0,0.02,0c0.45-0.01,0.5,0.04,0.5,0.49c0,0.53,0.03,1.07-0.17,1.58 c-0.4,1.06-1.15,1.72-2.26,1.95c-0.15,0.03-0.17,0.09-0.17,0.22c0,0.38,0,0.38,0.38,0.38c0.17,0,0.34,0,0.51,0 c0.24,0,0.34,0.1,0.35,0.34c0,0.07,0,0.15,0,0.22c-0.01,0.16-0.1,0.26-0.26,0.26c-0.91,0-1.81,0-2.72,0 c-0.17,0-0.26-0.09-0.28-0.25c-0.01-0.08-0.01-0.16-0.01-0.24c0.01-0.23,0.11-0.33,0.34-0.33C11.48,16.47,11.77,16.48,12.04,16.48 z'/%3E%3Cpath class='st8' d='M14.13,11.59c0,0.47,0,0.93,0,1.4c-0.01,0.8-0.61,1.46-1.44,1.58c-0.77,0.11-1.55-0.4-1.76-1.15 c-0.04-0.16-0.07-0.33-0.07-0.5c-0.01-0.89-0.01-1.78,0-2.67c0.01-0.76,0.47-1.38,1.16-1.6c1.04-0.32,2.11,0.47,2.11,1.56 C14.13,10.67,14.13,11.13,14.13,11.59z M13.31,11.59c0-0.45,0-0.91,0-1.36c0-0.45-0.33-0.8-0.77-0.81 c-0.47-0.01-0.84,0.31-0.85,0.77c-0.01,0.93-0.01,1.86,0,2.79c0.01,0.46,0.38,0.8,0.83,0.79c0.45-0.01,0.8-0.37,0.8-0.83 C13.31,12.48,13.31,12.04,13.31,11.59z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='st9' d='M17.07,16.59c-0.11,0.13-0.2,0.28-0.32,0.38c-0.11,0.09-0.21-0.02-0.3-0.1c-1.52-1.24-3.04-2.48-4.57-3.72 c-1.22-1-2.44-1.99-3.66-2.99c-0.18-0.15-0.19-0.24-0.05-0.43c0.02-0.03,0.04-0.06,0.07-0.08c0.15-0.18,0.21-0.19,0.39-0.04 c1.12,0.91,2.24,1.82,3.36,2.74c1.58,1.29,3.17,2.58,4.75,3.87c0.07,0.06,0.15,0.11,0.21,0.17C16.98,16.44,17.01,16.5,17.07,16.59 z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
}
#ui:not(.mute-audio) #toggleAudio:not(.error) > .enabled {
display: initial;
}
#ui.mute-audio #toggleAudio:not(.error) > .disabled {
display: initial;
}
#toggleAudio.error > .unavailable {
display: initial;
}
#toggleVideo > .enabled {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 25 25' style='enable-background:new 0 0 25 25;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bdisplay:none;%7D .st1%7Bdisplay:inline;fill:%23393838;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23006837;%7D .st4%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.0519;stroke-miterlimit:10;%7D .st5%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st6%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.8088;stroke-miterlimit:10;%7D .st7%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.364;stroke-miterlimit:10;%7D .st8%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st9%7Bfill:%23E85656;%7D .st10%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st11%7Bfill:%23393838;%7D .st12%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st13%7Bfill:%23191919;%7D .st14%7Bfill:none;stroke:%23E85656;stroke-width:0.5;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg id='Layer_1' class='st0'%3E%3Crect x='-125.05' y='-29.65' class='st1' width='270.4' height='215.61'/%3E%3C/g%3E%3Cg id='Layer_2'%3E%3Cg%3E%3Cpath class='st5' d='M14.51,12.38c0.29-0.18,0.55-0.34,0.81-0.5c0.3-0.18,0.6-0.37,0.89-0.55c0.17-0.11,0.35-0.12,0.54-0.03 c0.18,0.1,0.25,0.26,0.25,0.45c0,1.32,0,2.64,0,3.96c0,0.2-0.08,0.35-0.26,0.45c-0.18,0.1-0.35,0.08-0.52-0.03 c-0.49-0.31-0.99-0.61-1.49-0.92c-0.06-0.04-0.13-0.08-0.23-0.13c0,0.18,0,0.33,0,0.47c0,0.16,0,0.31-0.01,0.47 c-0.05,0.43-0.37,0.7-0.8,0.7c-1.14,0-2.28,0-3.41,0c-0.48,0-0.97-0.01-1.45,0c-0.4,0.01-0.84-0.3-0.83-0.82 c0.02-1.45,0.02-2.9,0-4.35c-0.01-0.46,0.32-0.82,0.8-0.84c0.12,0,0.23,0,0.35,0c1.49,0,2.98-0.01,4.46,0.01 c0.19,0,0.4,0.06,0.57,0.15c0.26,0.14,0.34,0.41,0.34,0.7C14.51,11.84,14.51,12.08,14.51,12.38z M13.75,11.5 c-0.06,0-0.11-0.01-0.15-0.01c-1.56,0-3.12,0-4.68,0c-0.15,0-0.17,0.06-0.17,0.19c0,1.37,0,2.74,0,4.11c0,0.16,0.05,0.2,0.2,0.2 c1.54,0,3.08,0,4.61,0c0.16,0,0.19-0.05,0.19-0.2c-0.01-1.37,0-2.73,0-4.1C13.75,11.63,13.75,11.58,13.75,11.5z M16.24,12.2 c-0.58,0.36-1.13,0.7-1.67,1.05c-0.03,0.02-0.05,0.09-0.05,0.14c-0.01,0.23,0,0.45-0.01,0.68c0,0.1,0.04,0.15,0.11,0.2 c0.49,0.3,0.98,0.61,1.47,0.91c0.04,0.03,0.09,0.05,0.15,0.08C16.24,14.23,16.24,13.23,16.24,12.2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
}
#toggleVideo > .disabled {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 25 25' style='enable-background:new 0 0 25 25;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bdisplay:none;%7D .st1%7Bdisplay:inline;fill:%23393838;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23006837;%7D .st4%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.0519;stroke-miterlimit:10;%7D .st5%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st6%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.8088;stroke-miterlimit:10;%7D .st7%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.364;stroke-miterlimit:10;%7D .st8%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st9%7Bfill:%23E85656;%7D .st10%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st11%7Bfill:%23393838;%7D .st12%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st13%7Bfill:%23191919;%7D .st14%7Bfill:none;stroke:%23E85656;stroke-width:0.5;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg id='Layer_1' class='st0'%3E%3Crect x='-150.6' y='-29.76' class='st1' width='270.4' height='215.61'/%3E%3C/g%3E%3Cg id='Layer_2'%3E%3Cg%3E%3Cpath class='st5' d='M14.51,12.38c0.29-0.18,0.55-0.34,0.81-0.5c0.3-0.18,0.6-0.37,0.89-0.55c0.17-0.11,0.35-0.12,0.54-0.03 c0.18,0.1,0.25,0.26,0.25,0.45c0,1.32,0,2.64,0,3.96c0,0.2-0.08,0.35-0.26,0.45c-0.18,0.1-0.35,0.08-0.52-0.03 c-0.49-0.31-0.99-0.61-1.49-0.92c-0.06-0.04-0.13-0.08-0.23-0.13c0,0.18,0,0.33,0,0.47c0,0.16,0,0.31-0.01,0.47 c-0.05,0.43-0.37,0.7-0.8,0.7c-1.14,0-2.28,0-3.41,0c-0.48,0-0.97-0.01-1.45,0c-0.4,0.01-0.84-0.3-0.83-0.82 c0.02-1.45,0.02-2.9,0-4.35c-0.01-0.46,0.32-0.82,0.8-0.84c0.12,0,0.23,0,0.35,0c1.49,0,2.98-0.01,4.46,0.01 c0.19,0,0.4,0.06,0.57,0.15c0.26,0.14,0.34,0.41,0.34,0.7C14.51,11.84,14.51,12.08,14.51,12.38z M13.75,11.5 c-0.06,0-0.11-0.01-0.15-0.01c-1.56,0-3.12,0-4.68,0c-0.15,0-0.17,0.06-0.17,0.19c0,1.37,0,2.74,0,4.11c0,0.16,0.05,0.2,0.2,0.2 c1.54,0,3.08,0,4.61,0c0.16,0,0.19-0.05,0.19-0.2c-0.01-1.37,0-2.73,0-4.1C13.75,11.63,13.75,11.58,13.75,11.5z M16.24,12.2 c-0.58,0.36-1.13,0.7-1.67,1.05c-0.03,0.02-0.05,0.09-0.05,0.14c-0.01,0.23,0,0.45-0.01,0.68c0,0.1,0.04,0.15,0.11,0.2 c0.49,0.3,0.98,0.61,1.47,0.91c0.04,0.03,0.09,0.05,0.15,0.08C16.24,14.23,16.24,13.23,16.24,12.2z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='st2' d='M16.01,18.1c-0.18,0-0.31-0.11-0.38-0.17L7.37,11.2c-0.31-0.25-0.34-0.53-0.1-0.85l0.07-0.09 c0.07-0.08,0.21-0.26,0.44-0.26c0.16,0,0.28,0.08,0.38,0.17l8.11,6.61c0.12,0.09,0.18,0.14,0.23,0.2 c0.05,0.06,0.09,0.11,0.12,0.17l0.11,0.19l-0.09,0.25l-0.09,0.12c-0.08,0.11-0.16,0.22-0.28,0.31l-0.09,0.07L16.01,18.1z'/%3E%3Cpath class='st11' d='M7.78,10.3c0.05,0,0.11,0.03,0.19,0.1c1.12,0.91,2.24,1.82,3.36,2.74c1.58,1.29,3.17,2.58,4.75,3.87 c0.07,0.06,0.15,0.11,0.21,0.17c0.04,0.04,0.07,0.11,0.13,0.19c-0.11,0.13-0.2,0.28-0.32,0.38c-0.03,0.02-0.06,0.03-0.08,0.03 c-0.08,0-0.15-0.08-0.22-0.13c-1.52-1.24-3.04-2.48-4.57-3.72c-1.22-1-2.44-1.99-3.66-2.99c-0.18-0.15-0.19-0.24-0.05-0.43 c0.02-0.03,0.04-0.06,0.07-0.08C7.66,10.35,7.72,10.3,7.78,10.3 M7.78,9.68L7.78,9.68c-0.37,0-0.59,0.26-0.67,0.36 c-0.03,0.03-0.06,0.07-0.08,0.11c-0.34,0.45-0.29,0.92,0.15,1.28l3.66,2.99l4.57,3.72c0.12,0.1,0.31,0.27,0.61,0.27 c0.17,0,0.34-0.06,0.48-0.17c0.14-0.12,0.25-0.25,0.33-0.36c0.03-0.03,0.05-0.07,0.08-0.1l0.29-0.35l-0.25-0.38l-0.04-0.06 c-0.04-0.06-0.09-0.14-0.17-0.23c-0.06-0.07-0.14-0.12-0.21-0.18l-0.05-0.04l-2.13-1.74l-2.62-2.14l-1.09-0.89L8.36,9.92 C8.23,9.81,8.04,9.68,7.78,9.68L7.78,9.68z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
}
#toggleVideo > .unavailable {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 25 25' style='enable-background:new 0 0 25 25;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bdisplay:none;%7D .st1%7Bdisplay:inline;fill:%23393838;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23006837;%7D .st4%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.0519;stroke-miterlimit:10;%7D .st5%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st6%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.8088;stroke-miterlimit:10;%7D .st7%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.364;stroke-miterlimit:10;%7D .st8%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st9%7Bfill:%23E85656;%7D .st10%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st11%7Bfill:%23393838;%7D .st12%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st13%7Bfill:%23191919;%7D .st14%7Bfill:none;stroke:%23E85656;stroke-width:0.5;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg id='Layer_1' class='st0'%3E%3Crect x='-150.11' y='0.19' class='st1' width='270.4' height='215.61'/%3E%3C/g%3E%3Cg id='Layer_2'%3E%3Cg%3E%3Cpath class='st10' d='M14.51,12.38c0.29-0.18,0.55-0.34,0.81-0.5c0.3-0.18,0.6-0.37,0.89-0.55c0.17-0.11,0.35-0.12,0.54-0.03 c0.18,0.1,0.25,0.26,0.25,0.45c0,1.32,0,2.64,0,3.96c0,0.2-0.08,0.35-0.26,0.45c-0.18,0.1-0.35,0.08-0.52-0.03 c-0.49-0.31-0.99-0.61-1.49-0.92c-0.06-0.04-0.13-0.08-0.23-0.13c0,0.18,0,0.33,0,0.47c0,0.16,0,0.31-0.01,0.47 c-0.05,0.43-0.37,0.7-0.8,0.7c-1.14,0-2.28,0-3.41,0c-0.48,0-0.97-0.01-1.45,0c-0.4,0.01-0.84-0.3-0.83-0.82 c0.02-1.45,0.02-2.9,0-4.35c-0.01-0.46,0.32-0.82,0.8-0.84c0.12,0,0.23,0,0.35,0c1.49,0,2.98-0.01,4.46,0.01 c0.19,0,0.4,0.06,0.57,0.15c0.26,0.14,0.34,0.41,0.34,0.7C14.51,11.84,14.51,12.08,14.51,12.38z M13.75,11.5 c-0.06,0-0.11-0.01-0.15-0.01c-1.56,0-3.12,0-4.68,0c-0.15,0-0.17,0.06-0.17,0.19c0,1.37,0,2.74,0,4.11c0,0.16,0.05,0.2,0.2,0.2 c1.54,0,3.08,0,4.61,0c0.16,0,0.19-0.05,0.19-0.2c-0.01-1.37,0-2.73,0-4.1C13.75,11.63,13.75,11.58,13.75,11.5z M16.24,12.2 c-0.58,0.36-1.13,0.7-1.67,1.05c-0.03,0.02-0.05,0.09-0.05,0.14c-0.01,0.23,0,0.45-0.01,0.68c0,0.1,0.04,0.15,0.11,0.2 c0.49,0.3,0.98,0.61,1.47,0.91c0.04,0.03,0.09,0.05,0.15,0.08C16.24,14.23,16.24,13.23,16.24,12.2z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='st9' d='M15.94,16.89c-0.11,0.13-0.2,0.28-0.32,0.38c-0.11,0.09-0.21-0.02-0.3-0.1c-1.52-1.24-3.04-2.48-4.57-3.72 c-1.22-1-2.44-1.99-3.66-2.99c-0.18-0.15-0.19-0.24-0.05-0.43c0.02-0.03,0.04-0.06,0.07-0.08c0.15-0.18,0.21-0.19,0.39-0.04 c1.12,0.91,2.24,1.82,3.36,2.74c1.58,1.29,3.17,2.58,4.75,3.87c0.07,0.06,0.15,0.11,0.21,0.17 C15.85,16.74,15.88,16.81,15.94,16.89z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
}
#ui:not(.mute-video) #toggleVideo:not(.error) > .enabled {
display: initial;
}
#ui.mute-video #toggleVideo:not(.error) > .disabled {
display: initial;
}
#toggleVideo.error > .unavailable {
display: initial;
}
#toggleSettings > .disabled {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 25 25' style='enable-background:new 0 0 25 25;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bdisplay:none;%7D .st1%7Bdisplay:inline;fill:%23393838;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23006837;%7D .st4%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.0519;stroke-miterlimit:10;%7D .st5%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st6%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.8088;stroke-miterlimit:10;%7D .st7%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.364;stroke-miterlimit:10;%7D .st8%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st9%7Bfill:%23E85656;%7D .st10%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st11%7Bfill:%23393838;%7D .st12%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st13%7Bfill:%23191919;%7D .st14%7Bfill:none;stroke:%23E85656;stroke-width:0.5;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg id='Layer_1' class='st0'%3E%3Crect x='-35.05' y='-29.65' class='st1' width='270.4' height='215.61'/%3E%3C/g%3E%3Cg id='Layer_2'%3E%3Cg%3E%3Cpath class='st7' d='M12.53,8c0.39,0.06,0.77,0.11,1.14,0.17c0.27,0.05,0.38,0.2,0.39,0.48c0,0.02,0,0.04,0,0.06 c-0.1,0.44,0.08,0.73,0.5,0.88c0.07,0.02,0.17,0.03,0.23,0c0.16-0.07,0.3-0.17,0.45-0.25c0.22-0.12,0.38-0.1,0.56,0.08 c0.56,0.56,0.96,1.22,1.18,1.98c0.09,0.29,0.02,0.46-0.24,0.62c-0.01,0.01-0.02,0.01-0.03,0.02c-0.52,0.3-0.52,0.3-0.49,0.9 c0,0.06,0.06,0.13,0.11,0.16c0.15,0.1,0.31,0.18,0.46,0.28c0.22,0.14,0.28,0.3,0.21,0.54c-0.23,0.79-0.63,1.47-1.22,2.05 c-0.15,0.15-0.33,0.17-0.51,0.06c-0.16-0.09-0.31-0.19-0.47-0.26c-0.07-0.03-0.17-0.02-0.25,0c-0.43,0.14-0.56,0.43-0.5,0.88 c0.04,0.33-0.07,0.45-0.4,0.53c-0.76,0.19-1.52,0.19-2.28-0.01c-0.27-0.07-0.37-0.21-0.38-0.49c0-0.13-0.02-0.26,0-0.38 c0.03-0.21-0.09-0.29-0.23-0.4c-0.28-0.21-0.51-0.17-0.79,0.01c-0.41,0.27-0.51,0.25-0.85-0.12c-0.5-0.54-0.85-1.16-1.06-1.87 c-0.07-0.25-0.01-0.41,0.21-0.56c0.06-0.04,0.12-0.08,0.19-0.11c0.4-0.24,0.48-0.39,0.39-0.84c-0.01-0.06-0.07-0.12-0.13-0.16 c-0.15-0.1-0.31-0.18-0.46-0.27c-0.21-0.14-0.28-0.31-0.2-0.55c0.23-0.77,0.62-1.45,1.2-2.01C9.43,9.24,9.58,9.22,9.8,9.33 c0.03,0.01,0.06,0.03,0.09,0.05c0.33,0.31,0.66,0.27,0.99-0.01c0.06-0.05,0.11-0.13,0.11-0.2c0.02-0.17,0-0.35,0.01-0.52 c0.01-0.27,0.13-0.43,0.4-0.47C11.77,8.11,12.15,8.06,12.53,8z M15.45,15.08c0.19-0.35,0.38-0.67,0.54-1 c0.02-0.04-0.02-0.15-0.07-0.18c-0.18-0.12-0.38-0.21-0.56-0.34c-0.06-0.04-0.12-0.14-0.1-0.2c0.09-0.46,0.1-0.92-0.01-1.38 c-0.03-0.11,0.02-0.17,0.12-0.22c0.19-0.1,0.37-0.2,0.55-0.32c0.04-0.03,0.1-0.11,0.09-0.15c-0.15-0.37-0.33-0.72-0.61-1.02 c-0.23,0.13-0.44,0.25-0.65,0.37c-0.1,0.06-0.18,0.07-0.28-0.02c-0.34-0.3-0.72-0.53-1.15-0.66c-0.12-0.04-0.15-0.1-0.15-0.22 c0.01-0.2,0-0.4,0-0.6c0-0.12-0.03-0.2-0.16-0.2c-0.32,0-0.65,0-0.97,0c-0.12,0-0.15,0.07-0.15,0.18c0.01,0.21-0.01,0.41,0,0.62 c0.01,0.12-0.03,0.18-0.15,0.22c-0.43,0.14-0.81,0.36-1.15,0.66c-0.1,0.09-0.18,0.08-0.28,0.02c-0.18-0.11-0.36-0.2-0.53-0.31 c-0.1-0.06-0.17-0.05-0.23,0.05c-0.16,0.28-0.32,0.56-0.49,0.84c-0.06,0.1-0.03,0.15,0.07,0.21c0.19,0.1,0.39,0.21,0.57,0.33 c0.06,0.04,0.11,0.14,0.1,0.19c-0.1,0.46-0.1,0.92,0,1.38c0.01,0.06-0.04,0.16-0.1,0.2c-0.18,0.12-0.37,0.23-0.57,0.33 c-0.1,0.05-0.13,0.11-0.07,0.2c0.16,0.28,0.32,0.56,0.48,0.84c0.06,0.11,0.14,0.11,0.25,0.04c0.17-0.11,0.35-0.22,0.54-0.3 c0.07-0.03,0.19-0.03,0.24,0.01c0.35,0.3,0.74,0.52,1.17,0.67c0.12,0.04,0.15,0.1,0.15,0.22c-0.01,0.21,0,0.41,0,0.62 c0,0.11,0.03,0.18,0.16,0.18c0.32,0,0.65,0.01,0.97-0.01c0.05,0,0.14-0.1,0.14-0.16c0.02-0.2,0.01-0.4,0-0.6 c-0.01-0.14,0.03-0.22,0.17-0.26c0.42-0.13,0.8-0.36,1.13-0.66c0.09-0.08,0.17-0.08,0.27-0.02C14.95,14.8,15.17,14.93,15.45,15.08 z'/%3E%3Cpath class='st7' d='M10.75,12.68c-0.07-0.92,0.8-1.82,1.82-1.81c0.93,0.02,1.8,0.84,1.76,1.83c-0.04,0.98-0.79,1.75-1.78,1.76 C11.48,14.48,10.68,13.54,10.75,12.68z M13.43,12.68c0-0.5-0.39-0.9-0.88-0.91c-0.49-0.01-0.9,0.4-0.91,0.89 c-0.01,0.5,0.39,0.9,0.89,0.91C13.02,13.58,13.42,13.18,13.43,12.68z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
}
#toggleSettings > .enabled {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 25 25' style='enable-background:new 0 0 25 25;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bdisplay:none;%7D .st1%7Bdisplay:inline;fill:%23393838;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23006837;%7D .st4%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.0519;stroke-miterlimit:10;%7D .st5%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st6%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.8088;stroke-miterlimit:10;%7D .st7%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.364;stroke-miterlimit:10;%7D .st8%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st9%7Bfill:%23E85656;%7D .st10%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st11%7Bfill:%23393838;%7D .st12%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st13%7Bfill:%23191919;%7D .st14%7Bfill:none;stroke:%23E85656;stroke-width:0.5;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg id='Layer_1' class='st0'%3E%3Crect x='-9.52' y='-29.58' class='st1' width='270.4' height='215.61'/%3E%3C/g%3E%3Cg id='Layer_2'%3E%3Cg%3E%3Cpath class='st7' d='M12.53,8c0.39,0.06,0.77,0.11,1.14,0.17c0.27,0.05,0.38,0.2,0.39,0.48c0,0.02,0,0.04,0,0.06 c-0.1,0.44,0.08,0.73,0.5,0.88c0.07,0.02,0.17,0.03,0.23,0c0.16-0.07,0.3-0.17,0.45-0.25c0.22-0.12,0.38-0.1,0.56,0.08 c0.56,0.56,0.96,1.22,1.18,1.98c0.09,0.29,0.02,0.46-0.24,0.62c-0.01,0.01-0.02,0.01-0.03,0.02c-0.52,0.3-0.52,0.3-0.49,0.9 c0,0.06,0.06,0.13,0.11,0.16c0.15,0.1,0.31,0.18,0.46,0.28c0.22,0.14,0.28,0.3,0.21,0.54c-0.23,0.79-0.63,1.47-1.22,2.05 c-0.15,0.15-0.33,0.17-0.51,0.06c-0.16-0.09-0.31-0.19-0.47-0.26c-0.07-0.03-0.17-0.02-0.25,0c-0.43,0.14-0.56,0.43-0.5,0.88 c0.04,0.33-0.07,0.45-0.4,0.53c-0.76,0.19-1.52,0.19-2.28-0.01c-0.27-0.07-0.37-0.21-0.38-0.49c0-0.13-0.02-0.26,0-0.38 c0.03-0.21-0.09-0.29-0.23-0.4c-0.28-0.21-0.51-0.17-0.79,0.01c-0.41,0.27-0.51,0.25-0.85-0.12c-0.5-0.54-0.85-1.16-1.06-1.87 c-0.07-0.25-0.01-0.41,0.21-0.56c0.06-0.04,0.12-0.08,0.19-0.11c0.4-0.24,0.48-0.39,0.39-0.84c-0.01-0.06-0.07-0.12-0.13-0.16 c-0.15-0.1-0.31-0.18-0.46-0.27c-0.21-0.14-0.28-0.31-0.2-0.55c0.23-0.77,0.62-1.45,1.2-2.01C9.43,9.24,9.58,9.22,9.8,9.33 c0.03,0.01,0.06,0.03,0.09,0.05c0.33,0.31,0.66,0.27,0.99-0.01c0.06-0.05,0.11-0.13,0.11-0.2c0.02-0.17,0-0.35,0.01-0.52 c0.01-0.27,0.13-0.43,0.4-0.47C11.77,8.11,12.15,8.06,12.53,8z'/%3E%3Cpath class='st7' d='M10.75,12.68c-0.07-0.92,0.8-1.82,1.82-1.81c0.93,0.02,1.8,0.84,1.76,1.83c-0.04,0.98-0.79,1.75-1.78,1.76 C11.48,14.48,10.68,13.54,10.75,12.68z M13.43,12.68c0-0.5-0.39-0.9-0.88-0.91c-0.49-0.01-0.9,0.4-0.91,0.89 c-0.01,0.5,0.39,0.9,0.89,0.91C13.02,13.58,13.42,13.18,13.43,12.68z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
}
#ui.hide-settings #toggleSettings > .disabled {
display: initial;
}
#ui:not(.hide-settings) #toggleSettings > .enabled {
display: initial;
}
#toggleHand > .enabled {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 25 25' style='enable-background:new 0 0 25 25;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bdisplay:none;%7D .st1%7Bdisplay:inline;fill:%23393838;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23006837;%7D .st4%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.0519;stroke-miterlimit:10;%7D .st5%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st6%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.8088;stroke-miterlimit:10;%7D .st7%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.364;stroke-miterlimit:10;%7D .st8%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st9%7Bfill:%23E85656;%7D .st10%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st11%7Bfill:%23393838;%7D .st12%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st13%7Bfill:%23191919;%7D .st14%7Bfill:none;stroke:%23E85656;stroke-width:0.5;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg id='Layer_1' class='st0'%3E%3Crect x='-169.88' y='-58.48' class='st1' width='270.4' height='215.61'/%3E%3C/g%3E%3Cg id='Layer_2'%3E%3Cg%3E%3Cpath class='st2' d='M10.05,13.5c0.01-0.07,0.02-0.15,0.02-0.22c0-1.3,0-2.6,0-3.9c0-0.48,0.31-0.78,0.77-0.75 c0.37,0.02,0.64,0.35,0.64,0.79c0,0.94,0,1.88,0,2.83c0,0.05-0.01,0.1,0.01,0.15c0.01,0.03,0.05,0.06,0.08,0.09 c0.03-0.03,0.07-0.06,0.08-0.09c0.01-0.05,0.01-0.11,0.01-0.17c0-1.19,0-2.38,0-3.57c0-0.29,0.11-0.52,0.37-0.66 c0.25-0.14,0.5-0.1,0.74,0.04c0.19,0.12,0.28,0.31,0.29,0.53c0.01,0.64,0.01,1.27,0.01,1.91c0,0.6,0,1.21,0,1.81 c0,0.09-0.03,0.21,0.16,0.18c0-0.07,0-0.15,0-0.22c0-0.97,0-1.94,0-2.9c0-0.43,0.29-0.74,0.68-0.74c0.42,0,0.72,0.3,0.72,0.74 c0,0.94,0,1.88,0,2.83c0,0.04-0.01,0.09,0,0.13c0.02,0.06,0.05,0.11,0.08,0.17c0.03-0.06,0.09-0.12,0.09-0.17 c0.01-0.44-0.01-0.88,0.01-1.32c0.01-0.17,0.05-0.36,0.14-0.5c0.16-0.26,0.49-0.35,0.78-0.25c0.29,0.1,0.47,0.33,0.47,0.65 c0,0.96,0.02,1.92-0.01,2.88c-0.01,0.34-0.1,0.68-0.17,1.01c-0.12,0.53-0.25,1.05-0.38,1.58c-0.11,0.46-0.41,0.7-0.89,0.7 c-1.14,0-2.28,0-3.42,0c-0.33,0-0.58-0.12-0.78-0.39c-0.73-1.01-1.46-2.01-2.19-3.01c-0.26-0.35-0.2-0.79,0.12-1.02 c0.35-0.25,0.76-0.17,1.03,0.2c0.16,0.22,0.33,0.45,0.49,0.67C10.02,13.51,10.04,13.5,10.05,13.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
}
#toggleHand > .disabled {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 25 25' style='enable-background:new 0 0 25 25;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bdisplay:none;%7D .st1%7Bdisplay:inline;fill:%23393838;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23006837;%7D .st4%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.0519;stroke-miterlimit:10;%7D .st5%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st6%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.8088;stroke-miterlimit:10;%7D .st7%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.364;stroke-miterlimit:10;%7D .st8%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st9%7Bfill:%23E85656;%7D .st10%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st11%7Bfill:%23393838;%7D .st12%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st13%7Bfill:%23191919;%7D .st14%7Bfill:none;stroke:%23E85656;stroke-width:0.5;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg id='Layer_1' class='st0'%3E%3Crect x='-169.96' y='-84.22' class='st1' width='270.4' height='215.61'/%3E%3C/g%3E%3Cg id='Layer_2'%3E%3Cg%3E%3Cg%3E%3Cpath class='st2' d='M12.34,8.31c0.06,0,0.13,0.02,0.2,0.07c0.05,0.03,0.1,0.08,0.1,0.2c0.01,0.59,0.01,1.17,0.01,1.76l0,0.15 l0,0.88l0,0.95c0,0.08-0.01,0.26,0.14,0.42c0.07,0.07,0.19,0.15,0.38,0.15c0.02,0,0.08,0,0.1-0.01c0.2-0.03,0.35-0.2,0.35-0.4 v-0.22l0-0.8l0-2.11c0-0.16,0.07-0.34,0.29-0.34c0.2,0,0.31,0.12,0.31,0.34c0,0.66,0,1.33,0,1.99l0,0.85 c0,0.05-0.01,0.14,0.02,0.24c0.02,0.07,0.05,0.13,0.11,0.23c0.07,0.13,0.21,0.21,0.36,0.21c0,0,0,0,0.01,0 c0.15,0,0.29-0.09,0.36-0.22c0.04-0.06,0.13-0.18,0.13-0.34c0-0.18,0-0.36,0-0.55c0-0.25,0-0.51,0.01-0.76 c0.01-0.12,0.04-0.23,0.08-0.31c0.04-0.07,0.14-0.1,0.21-0.1c0.03,0,0.07,0.01,0.1,0.02c0.13,0.04,0.2,0.13,0.2,0.27l0,0.6 c0,0.74,0.01,1.51-0.01,2.27c-0.01,0.25-0.06,0.51-0.13,0.78l-0.03,0.15c-0.08,0.37-0.17,0.73-0.26,1.1l-0.11,0.47 c-0.07,0.28-0.2,0.39-0.5,0.39l-0.12,0l-0.89,0l-0.89,0c-0.5,0-1.01,0-1.52,0c-0.2,0-0.33-0.07-0.45-0.23 c-0.43-0.59-0.86-1.18-1.29-1.77l-0.9-1.24c-0.07-0.09-0.1-0.19-0.08-0.28c0.01-0.07,0.05-0.13,0.11-0.18 c0.06-0.05,0.13-0.07,0.19-0.07c0.13,0,0.23,0.11,0.28,0.18c0.11,0.16,0.23,0.31,0.34,0.47l0.15,0.21 c0.07,0.1,0.21,0.15,0.35,0.15c0.05,0,0.1-0.01,0.14-0.02c0.16-0.05,0.27-0.19,0.28-0.35l0.01-0.06 c0.01-0.06,0.01-0.12,0.01-0.19l0-1.53l0-2.37c0-0.23,0.1-0.35,0.34-0.35c0,0,0,0,0,0c0.16,0.01,0.27,0.17,0.27,0.39 c0,0.65,0,1.31,0,1.96l0,0.89c0,0.06-0.01,0.14,0.02,0.24c0.04,0.13,0.13,0.21,0.17,0.25c0.07,0.08,0.17,0.11,0.28,0.11 c0.11,0,0.23-0.04,0.31-0.12c0.04-0.04,0.13-0.12,0.17-0.26c0.02-0.09,0.02-0.18,0.02-0.27l0-0.9c0-0.89,0-1.78,0-2.67 c0-0.18,0.06-0.25,0.16-0.31C12.25,8.32,12.3,8.31,12.34,8.31 M12.34,7.91c-0.11,0-0.22,0.03-0.33,0.09 c-0.26,0.14-0.37,0.37-0.37,0.66c0,1.19,0,2.38,0,3.57c0,0.06,0.01,0.12-0.01,0.17c-0.01,0.03-0.05,0.06-0.08,0.09 c-0.03-0.03-0.07-0.05-0.08-0.09c-0.01-0.05-0.01-0.1-0.01-0.15c0-0.94,0-1.88,0-2.83c0-0.44-0.28-0.76-0.64-0.79 c-0.02,0-0.04,0-0.06,0c-0.42,0-0.7,0.29-0.7,0.75c0,1.3,0,2.6,0,3.9c0,0.07-0.01,0.15-0.02,0.22c-0.01,0-0.03,0.01-0.04,0.01 c-0.16-0.22-0.33-0.44-0.49-0.67c-0.16-0.23-0.38-0.35-0.61-0.35c-0.14,0-0.29,0.05-0.42,0.14c-0.32,0.23-0.38,0.66-0.12,1.02 c0.73,1,1.46,2,2.19,3.01c0.19,0.27,0.45,0.39,0.77,0.39c0,0,0,0,0.01,0c0.5,0,1.01,0,1.51,0c0.59,0,1.19,0,1.78,0 c0.04,0,0.08,0,0.12,0c0.48,0,0.78-0.23,0.89-0.7c0.13-0.53,0.26-1.05,0.38-1.58c0.07-0.33,0.16-0.67,0.17-1.01 c0.02-0.96,0.01-1.92,0.01-2.88c0-0.31-0.18-0.55-0.47-0.65c-0.07-0.02-0.15-0.04-0.23-0.04c-0.22,0-0.43,0.1-0.55,0.29 c-0.09,0.14-0.13,0.33-0.14,0.5c-0.02,0.44,0,0.88-0.01,1.32c0,0.06-0.06,0.12-0.09,0.17c-0.03-0.06-0.06-0.11-0.08-0.17 c-0.01-0.04,0-0.09,0-0.13c0-0.94,0-1.88,0-2.83c0-0.44-0.3-0.74-0.71-0.74c0,0-0.01,0-0.01,0c-0.39,0-0.68,0.31-0.68,0.74 c0,0.97,0,1.94,0,2.9c0,0.07,0,0.15,0,0.22c-0.02,0-0.03,0-0.05,0c-0.14,0-0.11-0.11-0.11-0.19c0-0.6,0-1.21,0-1.81 c0-0.64,0-1.27-0.01-1.91c0-0.22-0.09-0.41-0.29-0.53C12.62,7.96,12.48,7.91,12.34,7.91L12.34,7.91z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
}
#ui.raisingHand #toggleHand > .enabled {
display: initial;
}
#ui:not(.raisingHand) #toggleHand > .disabled {
display: initial;
}
/* SETTINGS */
#settings {
flex-basis: 200px;
flex-grow: 0;
flex-shrink: 0;
transition: flex 0.5s;
display: flex;
align-items: center;
overflow: scroll;
scrollbar-width: thin;
z-index: 3;
background-color: #191919;
}
#ui.hide-settings #settings {
flex: 0;
}
#settings::-webkit-scrollbar {
/*
display: none;
*/
-webkit-appearance: none;
width: 8px;
height: 8px;
}
#settings::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
box-shadow: 0 0 1px rgba(255,255,255,.5);
}
#ui.hide-settings #settings::-webkit-scrollbar {
display: none;
}
#ui.hide-settings #settings {
-ms-overflow-style: none;
scrollbar-width: none;
}
#settingsButtons {
display: flex;
flex-direction: column;
flex-shrink: 0;
flex-grow: 0;
font-size: 13px;
}
#settingsButtons > div {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: .25rem .5rem;
font-size: .875rem;
line-height: 1.5;
border-radius: .2rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
color: #fff;
background-color: #3f556c;
border-color: #3f556c;
cursor: pointer;
}
#settingsButtons > div {
margin-bottom: 10px;
}
#settingsButtons > div:hover {
color: #fff;
background-color: #132c42;
border-color: #132c42;
}
#settingsButtons > select {
text-overflow: ellipsis;
border-radius: .25rem;
padding: 7px;
margin: 3px;
}
#toggleSolo {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 25 25' style='enable-background:new 0 0 25 25;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bdisplay:none;%7D .st1%7Bdisplay:inline;fill:%23393838;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23006837;%7D .st4%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.0519;stroke-miterlimit:10;%7D .st5%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st6%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.8088;stroke-miterlimit:10;%7D .st7%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.364;stroke-miterlimit:10;%7D .st8%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st9%7Bfill:%23E85656;%7D .st10%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st11%7Bfill:%23393838;%7D .st12%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st13%7Bfill:%23191919;%7D .st14%7Bfill:none;stroke:%23E85656;stroke-width:0.5;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg id='Layer_1' class='st0'%3E%3Crect x='-215.05' y='-74.65' class='st1' width='270.4' height='215.61'/%3E%3C/g%3E%3Cg id='Layer_2'%3E%3Cg%3E%3Cpath class='st4' d='M12.49,16.63c-0.91,0-1.83,0.01-2.74,0c-0.41,0-0.79-0.32-0.83-0.73c-0.05-0.53-0.08-1.06,0.06-1.59 c0.23-0.86,0.91-1.44,1.79-1.48c0.38-0.02,0.76,0.07,1.14,0.13c0.46,0.08,0.91,0.08,1.36-0.05c0.56-0.16,1.12-0.18,1.66,0.08 c0.74,0.36,1.11,0.99,1.17,1.8c0.02,0.31,0.01,0.63,0,0.94c-0.01,0.48-0.39,0.88-0.87,0.88C14.31,16.64,13.4,16.63,12.49,16.63z M12.49,16.03c0.88,0,1.76,0,2.64,0c0.27,0,0.37-0.1,0.37-0.37c0-0.23,0-0.47,0-0.7c0-1.09-0.83-1.74-1.9-1.49 c-0.51,0.12-1.03,0.23-1.56,0.13c-0.23-0.04-0.45-0.1-0.68-0.15c-1.02-0.23-1.85,0.43-1.85,1.47c0,0.24,0,0.48,0,0.72 c0,0.32,0.07,0.39,0.4,0.39C10.77,16.03,11.63,16.03,12.49,16.03z'/%3E%3Cpath class='st4' d='M12.49,12.43c-1.16,0-2.09-0.94-2.09-2.1c0-1.15,0.95-2.1,2.1-2.09c1.15,0,2.11,0.95,2.11,2.1 C14.6,11.49,13.65,12.43,12.49,12.43z M13.99,10.33c0-0.84-0.65-1.49-1.49-1.49c-0.84,0-1.5,0.67-1.5,1.52 c0,0.83,0.76,1.51,1.54,1.48C13.34,11.81,13.99,11.16,13.99,10.33z'/%3E%3Cpath class='st4' d='M8.29,11.83c-0.82,0-1.5-0.68-1.5-1.5c0-0.81,0.68-1.5,1.51-1.5c0.82,0,1.52,0.7,1.51,1.52 C9.79,11.17,9.12,11.83,8.29,11.83z M9.19,10.35c0.01-0.51-0.36-0.9-0.86-0.9C7.8,9.44,7.4,9.82,7.4,10.32 c0,0.5,0.39,0.91,0.89,0.91C8.79,11.24,9.18,10.86,9.19,10.35z'/%3E%3Cpath class='st4' d='M16.7,11.83c-0.83,0-1.5-0.66-1.5-1.49c0-0.83,0.68-1.52,1.51-1.51c0.82,0.01,1.5,0.69,1.5,1.51 C18.19,11.17,17.53,11.83,16.7,11.83z M17.59,10.34c0-0.52-0.37-0.89-0.89-0.89c-0.51,0-0.9,0.38-0.9,0.89c0,0.5,0.4,0.9,0.89,0.9 C17.2,11.23,17.59,10.85,17.59,10.34z'/%3E%3Cpath class='st4' d='M15.54,12.64c0.24-0.08,0.43-0.18,0.62-0.19c0.39-0.02,0.79-0.04,1.17,0.02c0.65,0.1,1.17,0.75,1.17,1.41 c0,0.21-0.1,0.34-0.28,0.35c-0.18,0.02-0.29-0.09-0.33-0.3c-0.03-0.14-0.04-0.3-0.1-0.42c-0.15-0.3-0.39-0.48-0.75-0.47 c-0.32,0.01-0.64,0.02-0.96,0.02c-0.05,0-0.1-0.02-0.14-0.05C15.82,12.91,15.71,12.8,15.54,12.64z'/%3E%3Cpath class='st4' d='M9.44,12.66c-0.17,0.15-0.28,0.26-0.4,0.36C9,13.05,8.95,13.07,8.9,13.07c-0.31,0-0.61,0-0.92-0.03 c-0.5-0.04-0.85,0.4-0.89,0.82c-0.01,0.11-0.06,0.26-0.15,0.32c-0.19,0.14-0.44-0.01-0.45-0.25c-0.04-0.74,0.58-1.45,1.32-1.49 c0.38-0.02,0.77,0.01,1.15,0.04C9.12,12.49,9.26,12.59,9.44,12.66z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
#ui.solo #toggleSolo {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 25 25' style='enable-background:new 0 0 25 25;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bdisplay:none;%7D .st1%7Bdisplay:inline;fill:%23393838;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23006837;%7D .st4%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.0519;stroke-miterlimit:10;%7D .st5%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st6%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.8088;stroke-miterlimit:10;%7D .st7%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.364;stroke-miterlimit:10;%7D .st8%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st9%7Bfill:%23E85656;%7D .st10%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st11%7Bfill:%23393838;%7D .st12%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st13%7Bfill:%23191919;%7D .st14%7Bfill:none;stroke:%23E85656;stroke-width:0.5;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg id='Layer_1' class='st0'%3E%3Crect x='-240.72' y='-74.65' class='st1' width='270.4' height='215.61'/%3E%3C/g%3E%3Cg id='Layer_2'%3E%3Cg%3E%3Cpath class='st4' d='M12.49,16.63c-0.91,0-1.83,0.01-2.74,0c-0.41,0-0.79-0.32-0.83-0.73c-0.05-0.53-0.08-1.06,0.06-1.59 c0.23-0.86,0.91-1.44,1.79-1.48c0.38-0.02,0.76,0.07,1.14,0.13c0.46,0.08,0.91,0.08,1.36-0.05c0.56-0.16,1.12-0.18,1.66,0.08 c0.74,0.36,1.11,0.99,1.17,1.8c0.02,0.31,0.01,0.63,0,0.94c-0.01,0.48-0.39,0.88-0.87,0.88C14.31,16.64,13.4,16.63,12.49,16.63z M12.49,16.03c0.88,0,1.76,0,2.64,0c0.27,0,0.37-0.1,0.37-0.37c0-0.23,0-0.47,0-0.7c0-1.09-0.83-1.74-1.9-1.49 c-0.51,0.12-1.03,0.23-1.56,0.13c-0.23-0.04-0.45-0.1-0.68-0.15c-1.02-0.23-1.85,0.43-1.85,1.47c0,0.24,0,0.48,0,0.72 c0,0.32,0.07,0.39,0.4,0.39C10.77,16.03,11.63,16.03,12.49,16.03z'/%3E%3Cpath class='st4' d='M12.49,12.43c-1.16,0-2.09-0.94-2.09-2.1c0-1.15,0.95-2.1,2.1-2.09c1.15,0,2.11,0.95,2.11,2.1 C14.6,11.49,13.65,12.43,12.49,12.43z M13.99,10.33c0-0.84-0.65-1.49-1.49-1.49c-0.84,0-1.5,0.67-1.5,1.52 c0,0.83,0.76,1.51,1.54,1.48C13.34,11.81,13.99,11.16,13.99,10.33z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
#ui.alone #toggleSolo, #ui.userLeft #toggleSolo {
opacity: 0.3;
pointer-events: none;
}
#toggleConnection{
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 25 25' style='enable-background:new 0 0 25 25;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bdisplay:none;%7D .st1%7Bdisplay:inline;fill:%23393838;%7D .st2%7Bfill:%23006837;%7D .st3%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.0585;stroke-miterlimit:10;%7D .st4%7Bfill:%23FFFFFF;%7D .st5%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.1293;stroke-miterlimit:10;%7D .st6%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.5579;stroke-miterlimit:10;%7D .st7%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.6536;stroke-miterlimit:10;%7D .st8%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.8088;stroke-miterlimit:10;%7D .st9%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.5;stroke-miterlimit:10;%7D .st10%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.4911;stroke-miterlimit:10;%7D .st11%7Bfill:%23393838;%7D%0A%3C/style%3E%3Cg id='Layer_1' class='st0'%3E%3Crect x='-35.05' y='-74.65' class='st1' width='270.4' height='215.61'/%3E%3C/g%3E%3Cg id='Layer_2'%3E%3Cg%3E%3Cg%3E%3Cpath class='st4' d='M13.98,13.25c-0.74-0.21-1.46-0.27-2.2-0.15c-0.22,0.03-0.43,0.08-0.64,0.14c-0.04,0.01-0.1,0.1-0.1,0.14 c0.02,0.23,0.05,0.46,0.08,0.69c0.04,0.37-0.13,0.71-0.48,0.86c-0.58,0.25-1.16,0.48-1.75,0.71c-0.34,0.13-0.69,0-0.88-0.31 c-0.28-0.45-0.57-0.89-0.85-1.34c-0.23-0.37-0.2-0.69,0.11-1c1.38-1.38,3.05-2.1,4.99-2.19c1.71-0.08,3.25,0.42,4.64,1.4 c0.32,0.23,0.61,0.51,0.9,0.78c0.23,0.22,0.26,0.59,0.1,0.86c-0.29,0.49-0.59,0.98-0.89,1.46c-0.18,0.29-0.56,0.41-0.88,0.29 c-0.56-0.21-1.12-0.43-1.68-0.65c-0.41-0.16-0.59-0.45-0.55-0.89C13.92,13.79,13.95,13.53,13.98,13.25z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: center;
}
#ui.userLeft #toggleConnection{
border: 2px solid #28a745;
}
#ui.userLeft #toggleConnection:hover{
background-color: #28a745;
}
#toggleMicrophoneTest{
margin: 3px;
}
#toggleMicrophoneTest::after {content: "Test Microphone"}
#ui.testing-microphone #toggleMicrophoneTest::after {content: "Stop Testing" }
#audioInputs, #videoInputs {
font-family: 'Poppins', sans-serif;
font-size: 13px;
cursor: pointer;
}
#loudness {
align-self: stretch;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
flex-grow: 0;
flex-shrink: 0;
}
#loudness .title {
user-select: none;
-webkit-user-select: none;
text-align: center;
font-size: 13px;
}
#loudness .bar {
display: flex;
position: relative;
flex-direction: row;
background-color: white;
border: solid thin lightgray;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#loudness .max {
background-color: gray;
position: absolute;
transition: background-color 0.2s, left 0.2s, bottom 0.2s;
}
#loudness .value {
flex: 0;
background-color: green;
transition: background-color 0.05s, flex 0.05s;
}
/* ACTIVE PEER */
#activePeer {
background-color: #0f0f0f;
flex-shrink: 0;
flex-grow: 0;
flex: 1;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
#peersRaisingHands::before {content: '✋'}
#peersRaisingHands, #hiddenAudience {
position: absolute;
text-align: right;
z-index: 3;
padding-left: 4px;
padding-right: 4px;
border-radius: 4px;
background-color: #eeeeee;
}
#peersRaisingHands {
font-size: 15px;
top: 4px;
right: 2px;
}
#hiddenAudience {
font-size: 12px;
bottom: 4px;
right: 2px;
}
#ui:not(.connected) #peersRaisingHands, #peersRaisingHands:not(.someHands) {
display: none;
}
#peersRaisingHands .peerRaisingHand:not(:last-child)::after {content: ', '}
#ui:not(.solo) #hiddenAudience, #hiddenAudience:not(.someHidden) {
display: none !important;
}
#activePeer video {
object-fit: contain !important;
}
#ui.solo #activePeer:not(.self) #localVideoCanvas {
border-radius: 10px;
border: solid darkgray;
background-color: #e6e6e6;
position: absolute;
display: initial !important;
z-index: 3;
width: 165px;
height: 125px;
left: 5px;
top: 5px;
}
#localVideoCanvas[data-is-camera-facing-user="true"] {
transform: scaleX(-1);
}
#ui.solo.mute-audio #activePeer:not(.self) #localMutePeer {
display: initial !important;
}
#activePeer:not(.mute-video) .peerInfoSizer,
#activePeer.mute-video.mute-audio .peerInfoSizer,
#ui:not(.renderingPeerBorders) #activePeer .peerInfoSizer,
#ui:not(.renderingPeerBorders) #localVideoCanvas,
#ui.mute-audio #localVideoCanvas {
box-shadow: none !important;
}
#activePeer .icon {
display: none;
}
#ui #activePeer.raisingHand .raisingHand {
display: initial;
}
#activePeer .peerInfo, #activePeer .generalText, #activePeer .no-peers {
z-index: 1;
font-size: 18px;
user-select: none;
-webkit-user-select: none;
cursor: default;
}
#activePeer .generalText {
position: absolute;
width: 100%;
text-align: center;
font-weight: 700;
top: 50%;
transform: translate(0,-50%);
z-index: 9;
}
#activePeer:not([data-view-id]) .peerInfo {
display: none !important;
}
#activePeer:not(.mute-video) .peerInfo {
font-size: 14px;
}
#activePeer .abbreviated {
display: none;
}
#activePeer.mute-video .nickname {
background-color: transparent;
width: 100%;
font-size: 18px;
text-align: center;
}
#ui.play-blocked #activePeer .nickname,
#ui.play-blocked #activePeer .mutePeer
{
display: none !important;
}
#activePeer .enable-audio {
color: red;
}
#activePeer .no-peers {
color: #666666;
}
#ui:not(.play-blocked) .enable-audio {
display: none;
}
#ui:not(.alone) .no-peers {
display: none;
}
#activePeer > video,
#localVideoCanvas {
width: 100%;
height: 100%;
object-fit: contain;
}
#ui:not(.solo) > #activePeer:not(.self) > #localVideoCanvas,
#activePeer.self.mute-video > #localVideoCanvas {
display: none !important;
}
#activePeer.self > video {
display: none;
}
.settingsText{
color: white;
}
/* PEERS */
#peers {
display: grid;
flex-basis: 40%;
flex-grow: 0;
flex-shrink: 0;
overflow: hidden;
background-color: #000;
grid-template-columns: 100%;
grid-template-rows: 100%;
transition: flex 0.5s;
}
#ui.solo #peers, #ui.userLeft #peers {
flex: 0 !important;
}
#ui.resizing #peers {
transition: none !important;
}
.peer {
position: relative;
overflow: hidden;
box-sizing: border-box;
background-color: #0f0f0f;
border: 3px solid #1e1e1e;
margin-left: 6px;
margin-bottom: 6px;
border-radius: 5px;
}
.peer div[id*="player"] {
position: static !important;
}
.peer .icon {
display: none;
}
#ui .peer.raisingHand .raisingHand {
display: initial;
}
#ui:not(.connected) .peer {
display: none;
}
.peer video,
.peer > .peerVideo {
width: 100%;
height: 100%;
object-fit: contain;
}
.peer.mute-audio:not(.mute-video) video,
.peer.mute-audio:not(.mute-video) > .peerVideo,
#activePeer.mute-audio:not(.mute-video) > video,
#ui.mute-audio:not(.mute-video) #localVideoCanvas {
filter: grayscale(100%);
}
.peer.mute-video, #activePeer.mute-video, #ui.alone #activePeer {
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
}
.peer.mute-video video,
.peer.mute-video > .peerVideo,
#activePeer.mute-video > video,
#ui.mute-video #localVideoCanvas {
display: none;
}
.peer.mute-video > [id*="player"] {
background-color: transparent !important;
}
.peer:not(.mute-video) .peerInfoSizer,
.peer.mute-video.mute-audio .peerInfoSizer,
#ui:not(.renderingPeerBorders) .peer .peerInfoSizer {
box-shadow: none !important;
}
.peerInfoOuter {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
.peerInfoSizer {
position: relative;
display: inline-block;
}
.peer:not(.wide) .peerInfoSizer, #activePeer:not(.wide) .peerInfoSizer {
width: 100%;
top: 50%;
transform: translate(0,-50%);
}
.peer.wide .peerInfoSizer, #activePeer.wide .peerInfoSizer {
height: 100%;
left: 50%;
transform: translate(-50%,0);
}
.peer:not(.wide) .templateCanvas, #activePeer:not(.wide) .templateCanvas {
width: 100%;
display: block;
}
.peer.wide .templateCanvas, #activePeer.wide .templateCanvas {
height: 100%;
display: block;
}
.peer.mute-video .peerInfoSizer, #activePeer[data-view-id].mute-video .peerInfoSizer {
background-color: #bbbbbb;
transition: box-shadow 0.1s;
}
.peerInfo {
position: absolute;
bottom: -1px;
width: 100%;
user-select: none;
-webkit-user-select: none;
cursor: default;
text-align: center;
font-size: 12px;
font-weight: 700;
opacity: 0.9;
}
.peer.mute-video .peerInfo, #activePeer.mute-video .peerInfo {
background-color: transparent !important;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.peer:not(.mute-video) .peerInfo, #activePeer:not(.mute-video) .peerInfo {
color: white !important;
}
.peer:not(:hover) .nickname {
display: none;
}
.peer:hover .abbreviated {
display: none;
}
.peer .publishMismatchWarning {
font-size: 125%;
vertical-align: middle;
}
.peer .notSubscribedWarning, .peer .publishMismatchWarning {
display: none;
}
#ui.published-tracks:not(.croquet-offline) .peer:not(.fully-subscribed):not(.self):not(.offline) .notSubscribedWarning,
.peer.track-mismatch:not(.offline) .publishMismatchWarning {
display: initial;
}
.peer .mutePeer, #activePeer .mutePeer, #localMutePeer {
z-index: 2;
position: absolute;
left: 4px;
top: -30px;
width: 28px;
height: 28px;
background-color: white;
border-radius: 4px;
display: none;
}
#localMutePeer {
top: 100px;
left: 12px;
z-index: 4;
}
#ui.mute-video #localMutePeer {
background-color: transparent;
}
.peer.mute-audio .mutePeer, #activePeer.mute-audio .mutePeer {
display: initial;
}
.peer.mute-video .mutePeer, #activePeer.mute-video .mutePeer {
background-color: transparent !important;
top: initial !important;
bottom: 4px !important;
}
.peer .muteImage, #activePeer .muteImage, #localMuteImage {
mask: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 25 25' style='enable-background:new 0 0 25 25;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bdisplay:none;%7D .st1%7Bdisplay:inline;fill:%23393838;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23006837;%7D .st4%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.0519;stroke-miterlimit:10;%7D .st5%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st6%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.8088;stroke-miterlimit:10;%7D .st7%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.364;stroke-miterlimit:10;%7D .st8%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st9%7Bfill:%23E85656;%7D .st10%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st11%7Bfill:%23393838;%7D .st12%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st13%7Bfill:%23191919;%7D .st14%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.513;stroke-miterlimit:10;%7D .st15%7Bfill:none;stroke:%23E85656;stroke-width:0.5;stroke-miterlimit:10;%7D .st16%7Bfill:%23899EBB;%7D .st17%7Bfill:%23333333;%7D%0A%3C/style%3E%3Cg id='Layer_1' class='st0'%3E%3Crect x='-80.14' y='21.55' class='st1' width='270.4' height='215.61'/%3E%3C/g%3E%3Cg id='Layer_2'%3E%3Cg%3E%3Cpath class='st14' d='M11.93,20.24c0.05-0.05,0.06-0.06,0.06-0.07c0-0.32,0.11-0.7-0.02-0.95c-0.11-0.2-0.51-0.24-0.79-0.33 c-2.56-0.77-4.45-3.29-4.5-6c-0.01-0.51-0.01-1.02,0-1.53c0.01-0.43,0.22-0.64,0.64-0.65c0.12,0,0.25,0,0.37,0 c0.49,0.01,0.66,0.19,0.68,0.69c0.02,0.73,0,1.47,0.09,2.2c0.19,1.64,1.72,3.53,3.82,3.82c2.57,0.35,5.13-1.75,5.08-4.48 c-0.01-0.54-0.01-1.07,0-1.61c0.01-0.42,0.2-0.61,0.62-0.62c0.01,0,0.02,0,0.04,0c0.93-0.02,1.04,0.09,1.04,1.01 c-0.01,1.1,0.06,2.2-0.34,3.25c-0.83,2.18-2.38,3.55-4.67,4.03c-0.3,0.06-0.35,0.19-0.35,0.45c0,0.79,0,0.79,0.78,0.79 c0.35,0,0.7,0,1.05,0c0.5,0.01,0.71,0.21,0.71,0.7c0,0.15,0.01,0.3,0,0.45c-0.02,0.34-0.21,0.54-0.55,0.54 c-1.87,0.01-3.74,0-5.61,0c-0.34,0-0.53-0.18-0.58-0.51c-0.02-0.16-0.02-0.32-0.01-0.49c0.02-0.48,0.22-0.68,0.7-0.69 C10.78,20.24,11.36,20.24,11.93,20.24z'/%3E%3Cpath class='st14' d='M16.25,10.17c0,0.96,0.01,1.92,0,2.88c-0.01,1.66-1.26,3.02-2.98,3.26c-1.58,0.22-3.2-0.83-3.63-2.37 C9.56,13.6,9.5,13.25,9.5,12.9c-0.01-1.83-0.02-3.67,0-5.5c0.01-1.57,0.96-2.86,2.4-3.29c2.16-0.66,4.35,0.96,4.35,3.22 C16.25,8.27,16.25,9.22,16.25,10.17z M14.56,10.16c0-0.93,0-1.87,0-2.8c0-0.94-0.69-1.65-1.59-1.68 c-0.98-0.03-1.74,0.63-1.75,1.59c-0.03,1.92-0.03,3.84,0,5.76c0.01,0.95,0.79,1.65,1.71,1.62c0.94-0.03,1.64-0.76,1.64-1.72 C14.56,12,14.56,11.08,14.56,10.16z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='st2' d='M21.33,20.4c-0.23,0-0.4-0.15-0.55-0.27L3.73,6.23c-0.49-0.4-0.53-0.73-0.14-1.24 c0.05-0.06,0.09-0.12,0.14-0.18c0.16-0.19,0.34-0.38,0.6-0.38c0.19,0,0.36,0.1,0.55,0.26l16.87,13.75 c0.11,0.09,0.23,0.18,0.33,0.28c0.08,0.08,0.14,0.17,0.2,0.28l0.2,0.31l-0.12,0.15c-0.07,0.08-0.13,0.17-0.19,0.25 c-0.15,0.2-0.31,0.41-0.51,0.57C21.56,20.35,21.45,20.4,21.33,20.4z'/%3E%3Cpath class='st11' d='M4.34,4.68c0.11,0,0.23,0.07,0.39,0.2c2.31,1.88,4.62,3.77,6.93,5.65c3.27,2.67,6.54,5.33,9.81,8 c0.15,0.12,0.3,0.23,0.43,0.36c0.09,0.09,0.15,0.22,0.26,0.39c-0.23,0.28-0.41,0.58-0.67,0.79c-0.06,0.05-0.12,0.07-0.17,0.07 c-0.16,0-0.31-0.16-0.45-0.27c-3.14-2.56-6.28-5.12-9.43-7.68c-2.52-2.05-5.04-4.11-7.56-6.16c-0.38-0.31-0.4-0.49-0.1-0.88 c0.04-0.06,0.09-0.12,0.14-0.17C4.09,4.78,4.21,4.68,4.34,4.68 M4.34,4.16L4.34,4.16c-0.4,0-0.66,0.31-0.8,0.48 C3.48,4.7,3.43,4.77,3.38,4.83C2.92,5.45,2.97,5.94,3.57,6.43c2.52,2.06,5.04,4.11,7.56,6.16l9.43,7.68l0.06,0.05 c0.16,0.13,0.39,0.33,0.71,0.33c0.18,0,0.35-0.06,0.5-0.18c0.23-0.18,0.39-0.41,0.55-0.62c0.06-0.08,0.12-0.16,0.19-0.24 l0.24-0.29L22.6,19c-0.03-0.05-0.06-0.1-0.09-0.14c-0.07-0.11-0.13-0.22-0.24-0.33c-0.11-0.11-0.23-0.21-0.36-0.31l-0.12-0.09 l-4.48-3.65l-5.33-4.35L9.72,8.29L5.05,4.48C4.85,4.32,4.62,4.16,4.34,4.16L4.34,4.16z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
mask-size: contain;
-webkit-mask: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 25 25' style='enable-background:new 0 0 25 25;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bdisplay:none;%7D .st1%7Bdisplay:inline;fill:%23393838;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23006837;%7D .st4%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.0519;stroke-miterlimit:10;%7D .st5%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st6%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.8088;stroke-miterlimit:10;%7D .st7%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.364;stroke-miterlimit:10;%7D .st8%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st9%7Bfill:%23E85656;%7D .st10%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st11%7Bfill:%23393838;%7D .st12%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st13%7Bfill:%23191919;%7D .st14%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.513;stroke-miterlimit:10;%7D .st15%7Bfill:none;stroke:%23E85656;stroke-width:0.5;stroke-miterlimit:10;%7D .st16%7Bfill:%23899EBB;%7D .st17%7Bfill:%23333333;%7D%0A%3C/style%3E%3Cg id='Layer_1' class='st0'%3E%3Crect x='-80.14' y='21.55' class='st1' width='270.4' height='215.61'/%3E%3C/g%3E%3Cg id='Layer_2'%3E%3Cg%3E%3Cpath class='st14' d='M11.93,20.24c0.05-0.05,0.06-0.06,0.06-0.07c0-0.32,0.11-0.7-0.02-0.95c-0.11-0.2-0.51-0.24-0.79-0.33 c-2.56-0.77-4.45-3.29-4.5-6c-0.01-0.51-0.01-1.02,0-1.53c0.01-0.43,0.22-0.64,0.64-0.65c0.12,0,0.25,0,0.37,0 c0.49,0.01,0.66,0.19,0.68,0.69c0.02,0.73,0,1.47,0.09,2.2c0.19,1.64,1.72,3.53,3.82,3.82c2.57,0.35,5.13-1.75,5.08-4.48 c-0.01-0.54-0.01-1.07,0-1.61c0.01-0.42,0.2-0.61,0.62-0.62c0.01,0,0.02,0,0.04,0c0.93-0.02,1.04,0.09,1.04,1.01 c-0.01,1.1,0.06,2.2-0.34,3.25c-0.83,2.18-2.38,3.55-4.67,4.03c-0.3,0.06-0.35,0.19-0.35,0.45c0,0.79,0,0.79,0.78,0.79 c0.35,0,0.7,0,1.05,0c0.5,0.01,0.71,0.21,0.71,0.7c0,0.15,0.01,0.3,0,0.45c-0.02,0.34-0.21,0.54-0.55,0.54 c-1.87,0.01-3.74,0-5.61,0c-0.34,0-0.53-0.18-0.58-0.51c-0.02-0.16-0.02-0.32-0.01-0.49c0.02-0.48,0.22-0.68,0.7-0.69 C10.78,20.24,11.36,20.24,11.93,20.24z'/%3E%3Cpath class='st14' d='M16.25,10.17c0,0.96,0.01,1.92,0,2.88c-0.01,1.66-1.26,3.02-2.98,3.26c-1.58,0.22-3.2-0.83-3.63-2.37 C9.56,13.6,9.5,13.25,9.5,12.9c-0.01-1.83-0.02-3.67,0-5.5c0.01-1.57,0.96-2.86,2.4-3.29c2.16-0.66,4.35,0.96,4.35,3.22 C16.25,8.27,16.25,9.22,16.25,10.17z M14.56,10.16c0-0.93,0-1.87,0-2.8c0-0.94-0.69-1.65-1.59-1.68 c-0.98-0.03-1.74,0.63-1.75,1.59c-0.03,1.92-0.03,3.84,0,5.76c0.01,0.95,0.79,1.65,1.71,1.62c0.94-0.03,1.64-0.76,1.64-1.72 C14.56,12,14.56,11.08,14.56,10.16z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='st2' d='M21.33,20.4c-0.23,0-0.4-0.15-0.55-0.27L3.73,6.23c-0.49-0.4-0.53-0.73-0.14-1.24 c0.05-0.06,0.09-0.12,0.14-0.18c0.16-0.19,0.34-0.38,0.6-0.38c0.19,0,0.36,0.1,0.55,0.26l16.87,13.75 c0.11,0.09,0.23,0.18,0.33,0.28c0.08,0.08,0.14,0.17,0.2,0.28l0.2,0.31l-0.12,0.15c-0.07,0.08-0.13,0.17-0.19,0.25 c-0.15,0.2-0.31,0.41-0.51,0.57C21.56,20.35,21.45,20.4,21.33,20.4z'/%3E%3Cpath class='st11' d='M4.34,4.68c0.11,0,0.23,0.07,0.39,0.2c2.31,1.88,4.62,3.77,6.93,5.65c3.27,2.67,6.54,5.33,9.81,8 c0.15,0.12,0.3,0.23,0.43,0.36c0.09,0.09,0.15,0.22,0.26,0.39c-0.23,0.28-0.41,0.58-0.67,0.79c-0.06,0.05-0.12,0.07-0.17,0.07 c-0.16,0-0.31-0.16-0.45-0.27c-3.14-2.56-6.28-5.12-9.43-7.68c-2.52-2.05-5.04-4.11-7.56-6.16c-0.38-0.31-0.4-0.49-0.1-0.88 c0.04-0.06,0.09-0.12,0.14-0.17C4.09,4.78,4.21,4.68,4.34,4.68 M4.34,4.16L4.34,4.16c-0.4,0-0.66,0.31-0.8,0.48 C3.48,4.7,3.43,4.77,3.38,4.83C2.92,5.45,2.97,5.94,3.57,6.43c2.52,2.06,5.04,4.11,7.56,6.16l9.43,7.68l0.06,0.05 c0.16,0.13,0.39,0.33,0.71,0.33c0.18,0,0.35-0.06,0.5-0.18c0.23-0.18,0.39-0.41,0.55-0.62c0.06-0.08,0.12-0.16,0.19-0.24 l0.24-0.29L22.6,19c-0.03-0.05-0.06-0.1-0.09-0.14c-0.07-0.11-0.13-0.22-0.24-0.33c-0.11-0.11-0.23-0.21-0.36-0.31l-0.12-0.09 l-4.48-3.65l-5.33-4.35L9.72,8.29L5.05,4.48C4.85,4.32,4.62,4.16,4.34,4.16L4.34,4.16z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
-webkit-mask-size: contain;
width: 100%;
height: 100%;
}
/* WIDE */
@media (min-aspect-ratio: 4/3) {
#ui {
flex-direction: row-reverse;
}
#ui.resize {
cursor: ew-resize;
}
/* PEERS */
#profile {
flex-direction: column;
}
#profileButtons {
flex-direction: column;
}
@media (max-height: 160px) {
#profileButtons {
flex-direction: row;
}
}
/* SETTINGS */
#settings {
flex-direction: column;
overflow-x: hidden;
}
#settingsButtons {
width: 90%;
margin-top: 8px;
margin-bottom: 8px;
}
#loudness {
margin-top: 10px;
margin-bottom: 10px;
}
#loudness .bar {
margin-top: 4px;
width: 129px;
height: 8px;
}
#loudness .max {
width: 2px;
height: 8px;
top: -1px;
left: 0;
}
/* PEERS */
}
/* TALL */
@media (max-aspect-ratio: 4/3) {
#ui {
flex-direction: column;
}
#ui.resize {
cursor: ns-resize;
}
/* PROFILE */
#profileButtons {
flex-direction: row;
}
@media (max-width: 160px) {
#profileButtons {
flex-direction: column;
}
}
/* SETTINGS */
#settings {
flex-direction: row;
overflow-y: hidden;
}
#settingsButtons {
width: 140px;
min-width: 140px;
margin-left: 0px;
margin-right: 20px;
}
#loudness {
max-width: 120px;
width: 120px;
}
#loudness .bar {
flex-direction: column-reverse;
width: 8px;
height: 111px;
}
#loudness .max {
width: 8px;
height: 2px;
left: -1px;
bottom: 0;
}
}
@media (min-aspect-ratio: 4/3) and (max-height: 160px), (max-aspect-ratio: 4/3) and (max-width: 160px) {
#ui #profileButtons > div {
width: 20px;
height: 20px;
border-width: 2px;
}
#toggleHand .text {
font-size: 13px;
left: 1px;
top: -1.5px;
}
#profileButtons{
height: 20px;
}
}
@media only screen and (min-aspect-ratio: 4 / 3) {
#profileButtons{
width: 50px;
grid-auto-flow: row;
height: 100%;
}
}
</style>
<body>
<div id='cover' class='hidden'>
<div>Click to Join</div>
</div>
<div id='ui' class='hidden hide-settings mute-video mute-audio'>
<div id='profile'>
<div id='profileButtons'>
<div id='toggleAudio' tabindex='1'>
<div class='buttonImage enabled' title='Mute Mic'></div>
<div class='buttonImage disabled' title='Unmute Mic'></div>
<div class='buttonImage unavailable' title='Mic Unavailable'></div>
</div>
<div id='toggleVideo' class='no-repeat' tabindex='2'>
<div class='buttonImage enabled' title='Hide Camera'></div>
<div class='buttonImage disabled' title='Show Camera'></div>
<div class='buttonImage unavailable' title='Camera Unavailable'></div>
</div>
<div id='toggleHand' class='no-repeat' tabindex='3'>
<div class='buttonImage enabled' title='Lower hand'></div>
<div class='buttonImage disabled' title='Raise hand'></div>
</div>
<div id='toggleSolo' class='no-repeat'></div>
<div id='toggleConnection' class='no-repeat' tabindex='4'></div>
<div id='toggleSettings' class='no-repeat' tabindex='4'>
<div class='buttonImage enabled' title='Hide Settings'></div>
<div class='buttonImage disabled' title='Show Settings'></div>
</div>
</div>
</div>
<div id='settings'>
<div id='local'>
<audio playsinline autoplay></audio>
</div>
<div id='loudness'>
<div class='bar'>
<div class='max'></div>
<div class='value'></div>
</div>
</div>
<div id='settingsButtons'>
<span class='settingsText'>Video Source</span>
<select id='videoInputs' title='Select Video Source'></select>
<span class='settingsText'>Audio Source</span>
<select id='audioInputs' title='Select Audio Source'></select>
<div id='toggleMicrophoneTest'></div>
</div>
</div>
<div id='activePeer' class='mute-video mute-audio'>
<div class='generalText'>
<span class='enable-audio'>click here to enable audio</span>
<span class='no-peers'>Waiting for Peers</span>
</div>
<div class='peerInfoOuter'>
<div class='peerInfoSizer'>
<canvas class='templateCanvas' width='100' height='100'></canvas>
<div class='peerInfo'>
<div class='mutePeer'>
<div class='muteImage'></div>
</div>
<span class='raisingHand icon' title="this peer is waiting to speak">🤚</span>
<span class='nickname'></span>
<span class='abbreviated'></span>
</div>
</div>
</div>
<div id='peersRaisingHands'>
<template id='peerRaisingHandTemplate'>
<span class='peerRaisingHand'></span>
</template>
</div>
<div id='hiddenAudience'><span class='hiddenCount'></span></div>
<canvas id='localVideoCanvas' width='200' height='150'></canvas>
<div id='localMutePeer'>
<div id='localMuteImage'></div>
</div>
<video autoplay muted playsinline class='video'></video>
</div>
<div id='peers'>
<template id='peerTemplate'>
<div class='peer'>
<div class='peerInfoOuter'>
<div class='peerInfoSizer'>
<canvas class='templateCanvas' width='100' height='100'></canvas>
<div class='peerInfo'>
<div class='mutePeer'>
<div class='muteImage'></div>
</div>
<span class='notSubscribedWarning' title="remote peer is not fully subscribed to our tracks">⌛</span>
<span class='publishMismatchWarning' title="mismatch between remote peer's published tracks and our subscriptions to them"> ⚠ </span>
<span class='raisingHand icon' title="this peer is waiting to speak">🤚</span>
<span class='nickname'></span>