BIMviewer

1
/* Toolbars and buttons */
2

3
.xeokit-toolbar {
4
    display: flex;
5
    flex-wrap: wrap;
6
    justify-content: flex-start;
7
    background: transparent;
8
    pointer-events: none;
9
    padding: 10px;
10
}
11

12
.xeokit-btn-group {
13
    position: relative;
14
    display: inline-flex;
15
    vertical-align: middle;
16
    margin-bottom: 3px;
17
    margin-right: 1.2rem !important;
18
    pointer-events: none;
19
}
20

21
.xeokit-btn {
22
    position: relative;
23
    flex: 1 1 auto;
24
    color: #03103F;
25
    background-color: white;
26
    text-align: center;
27
    vertical-align: middle;
28
    border: 2px solid #1d2453;
29
    padding: .375rem .75rem;
30
    border-radius: .25rem;
31
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
32
    -webkit-appearance: button;
33
    overflow: visible;
34
    margin: 0 2px 0 0;
35
    box-sizing: border-box;
36
    align-items: flex-start;
37
    pointer-events: all;
38
}
39

40
.xeokit-btn.disabled {
41
    opacity: .55;
42
    color: #99A4AD;
43
    border-color: #6c757d !important;
44
    pointer-events: none;
45
}
46

47
.xeokit-btn.active {
48
    color: #fff;
49
    background-color: #03103F;
50
    border-color: #03103F !important;
51
}
52

53
.xeokit-btn:hover {
54
    color: #477dca;
55
    border-color: #477dca !important;
56
}
57

58
.xeokit-btn.active:hover {
59
    /*color: transparent;*/
60
    color: white;
61
    background: #477dca;
62
    border-color: #477dca !important;
63
}
64

65
.xeokit-btn.disabled:hover {
66
    opacity: .55;
67
    color: #99A4AD;
68
    border-color: #6c757d !important;
69
}
70

71
/*  Tabs    */
72

73
.xeokit-tabs {
74
    line-height: 1.5;
75
    padding: 0;
76
    /*padding-left: 10px;*/
77
    height: 100%;
78
    overflow: hidden;
79
}
80

81
.xeokit-tabs::before, .xeokit-tabs::after {
82
    display: table;
83
    content: '';
84
    clear: both;
85
}
86

87
@media (max-width: 40em) {
88
    .xeokit-tabs {
89

90
    }
91
}
92

93
.xeokit-tabs .xeokit-tab {
94
    list-style: none;
95
}
96

97
@media (min-width: 40em) {
98
    .xeokit-tabs .xeokit-tab {
99
        display: inline;
100
    }
101
}
102

103
.xeokit-tabs .xeokit-tab:first-child .xeokit-tab-btn {
104
}
105

106
@media (max-width: 40em) {
107
    .xeokit-tabs .xeokit-tab:first-child .xeokit-tab-btn {
108
    }
109
}
110

111
@media (max-width: 40em) {
112
    .xeokit-tabs .xeokit-tab:last-child .xeokit-tab-btn {
113
    }
114
}
115

116
.xeokit-tabs .xeokit-tab.active .xeokit-tab-btn {
117
    background-color: #313961;
118
}
119

120
@media (min-width: 40em) {
121
    .xeokit-tabs .xeokit-tab.active .xeokit-tab-btn {
122
        background-color: transparent;
123
        border-bottom: #CFCFCF solid 3px;
124
        margin-bottom: -1px;
125
    }
126
}
127

128
.xeokit-tabs .xeokit-tab.active .xeokit-tab-content {
129
    display: block;
130
}
131

132
.xeokit-tabs .xeokit-tab-btn {
133
    font-size: 16px;
134
    background-color: transparent;
135
    border-top: 2px solid #dcdcdc;
136
    color: #CFCFCF;
137
    display: block;
138
    font-weight: bold;
139
    padding: 0.75em 5px;
140
    padding-left: 0;
141
    padding-right: 10px;
142
    text-decoration: none;
143
}
144

145
@media (min-width: 40em) {
146
    .xeokit-tabs .xeokit-tab-btn {
147
        font-size: 20px;
148
        font-weight: normal;
149
        border-top-left-radius: 3px;
150
        border-top-right-radius: 3px;
151
        border-top: 0;
152
        display: inline-block;
153
    }
154
}
155

156
.xeokit-tabs .xeokit-tab-btn:hover {
157
    color: #477dca;
158
}
159

160
.xeokit-tabs .xeokit-tab-btn:focus {
161
    outline: none;
162
}
163

164
.xeokit-tabs .xeokit-tab-content {
165
    background: #03103F;
166
    display: none;
167
    padding-top: 2em;
168
    padding-left: 0;
169
    padding-right: 0px;
170
    width: calc(100% - 0px);
171
    height: calc(100% - 30px);
172
}
173

174
@media (min-width: 40em) {
175
    .xeokit-tabs .xeokit-tab-content {
176
        float: left;
177
    }
178
}
179

180
.xeokit-tabs .xeokit-btn-group {
181
    flex-wrap: wrap;
182
    justify-content: flex-start;
183
    margin-bottom: 10px;
184
}
185

186
.xeokit-tabs .xeokit-btn {
187
    font-size: 16px;
188
    font-weight: normal;
189
    position: relative;
190
    flex: 1 1 auto;
191
    color: #CFCFCF;
192
    background-color: transparent;
193
    text-align: center;
194
    vertical-align: middle;
195
    border: 2px solid #CFCFCF;
196
    padding: .75rem .75rem;
197
    margin: 0 5px 10px 0;
198
    border-radius: .35rem;
199
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
200
    -webkit-appearance: button;
201
    overflow: visible;
202
    box-sizing: border-box;
203
    align-items: flex-start;
204
    /*font: 400 13.3333px Arial;*/
205
}
206

207
.xeokit-tabs .xeokit-btn:hover {
208
    color: #477dca;
209
    border: 2px solid #477dca;
210
    /*background: black;*/
211
}
212

213
.xeokit-tabs .xeokit-tab-btn.disabled {
214
    opacity: .55;
215
    color: #99A4AD;
216
}
217

218
.xeokit-modelsTab {
219

220
}
221

222
.xeokit-modelsTab .xeokit-form-check {
223
    padding: 2px 0 2px 15px;
224
    line-height: 3ex;
225
}
226

227
.xeokit-modelsTab .xeokit-form-check input {
228
    vertical-align: middle;
229
}
230

231
.xeokit-modelsTab .xeokit-form-check span {
232
    display: inline-block;
233
    color: #ffff;
234
    background-color: #03103F;
235
    padding-left: 3px;
236
    width: calc(100% - 30px);
237
    vertical-align: middle;
238
}
239

240
.xeokit-modelsTab .xeokit-form-check span.disabled {
241
    color: #99A4AD;
242
    background-color: #03103F;
243
}
244

245
.xeokit-modelsTab .xeokit-form-check span:hover {
246
    color: #ffffff;
247
    cursor: pointer;
248
    background: rgba(255, 255, 255, 0.2);
249
    padding-left: 3px;
250
}
251

252
.xeokit-modelsTab .xeokit-form-check span.disabled:hover {
253
    color: #99A4AD;
254
    background-color: #03103F;
255
    cursor: default;
256
}
257

258
.xeokit-objectsTab ul {
259
    list-style: none;
260
    padding-left: 1.75em;
261
}
262

263
.xeokit-objectsTab ul li {
264
    margin: 2px 0;
265
    position: relative;
266
    width: 500px;
267
    line-height: 3ex;
268
}
269

270
.xeokit-objectsTab ul li a {
271
    background-color: #eee;
272
    border-radius: 50%;
273
    color: #000;
274
    display: inline-block;
275
    height: 1.5em;
276
    left: -1.5em;
277
    /*line-height: 1.5em;*/
278
    position: absolute;
279
    text-align: center;
280
    text-decoration: none;
281
    width: 1.5em;
282
}
283

284
.xeokit-objectsTab ul li a.plus {
285
    background-color: #ded;
286
}
287

288
.xeokit-objectsTab ul li a.minus {
289
    background-color: #eee;
290
}
291

292
.xeokit-objectsTab ul li a:active {
293
    top: 1px;
294
}
295

296
.xeokit-objectsTab ul li input {
297
    vertical-align: middle;
298
}
299

300
.xeokit-objectsTab ul li span {
301
    display: inline-block;
302
    width: calc(100% - 50px);
303
    padding-left: 2px;
304
    vertical-align: middle;
305
}
306

307
.xeokit-objectsTab ul li span:hover {
308
    color: #ffffff;
309
    cursor: pointer;
310
    background: rgba(255, 255, 255, 0.2);
311
    padding-left: 2px;
312
    vertical-align: middle;
313
}
314

315
.xeokit-objectsTab .top-right {
316
    font-size: small;
317
    position: fixed;
318
    right: 1em;
319
    top: 1em;
320
}
321

322
.xeokit-objectsTab .highlighted-node { /* Appearance of node highlighted with BIMViewer#showObjectInExplorers() */
323
    border: black solid 1px;
324
    background: yellow;
325
    color: black;
326
    padding-left: 1px;
327
    padding-right: 5px;
328
}
329

330
.xeokit-storeysTab ul {
331
    list-style: none;
332
    padding-left: 1.75em;
333
}
334

335
.xeokit-storeysTab ul li {
336
    margin: 2px 0;
337
    position: relative;
338
    width: 500px;
339
    line-height: 3ex;
340
}
341

342
.xeokit-storeysTab ul li a {
343
    background-color: #eee;
344
    border-radius: 50%;
345
    color: #000;
346
    display: inline-block;
347
    height: 1.5em;
348
    left: -1.5em;
349
    /*line-height: 1.5em;*/
350
    position: absolute;
351
    text-align: center;
352
    text-decoration: none;
353
    width: 1.5em;
354
}
355

356
.xeokit-storeysTab ul li a.plus {
357
    background-color: #ded;
358
}
359

360
.xeokit-storeysTab ul li a.minus {
361
    background-color: #eee;
362
}
363

364
.xeokit-storeysTab ul li a:active {
365
    top: 1px;
366
}
367

368
.xeokit-storeysTab ul li input {
369
    vertical-align: middle;
370
}
371

372
.xeokit-storeysTab ul li span {
373
    display: inline-block;
374
    width: calc(100% - 50px);
375
    padding-left: 2px;
376
    vertical-align: middle;
377
}
378

379
.xeokit-storeysTab ul li span:hover {
380
    color: white;
381
    cursor: pointer;
382
    background: rgba(255, 255, 255, 0.2);
383
    padding-left: 2px;
384
}
385

386
.xeokit-storeysTab .top-right {
387
    font-size: small;
388
    position: fixed;
389
    right: 1em;
390
    top: 1em;
391
}
392

393
.xeokit-storeysTab .highlighted-node { /* Appearance of node highlighted with BIMViewer#showObjectInExplorers() */
394
    border: black solid 1px;
395
    background: yellow;
396
    color: black;
397
    padding-left: 1px;
398
    padding-right: 5px;
399
}
400

401
.xeokit-classesTab ul {
402
    list-style: none;
403
    padding-left: 1.75em;
404
}
405

406
.xeokit-classesTab ul li {
407
    margin: 2px 0;
408
    position: relative;
409
    width: 500px;
410
    line-height: 3ex;
411
}
412

413
.xeokit-classesTab ul li a {
414
    background-color: #eee;
415
    border-radius: 50%;
416
    color: #000;
417
    display: inline-block;
418
    height: 1.5em;
419
    left: -1.5em;
420
    /*line-height: 1.5em;*/
421
    position: absolute;
422
    text-align: center;
423
    text-decoration: none;
424
    width: 1.5em;
425
}
426

427
.xeokit-classesTab ul li a.plus {
428
    background-color: #ded;
429
}
430

431
.xeokit-classesTab ul li a.minus {
432
    background-color: #eee;
433
}
434

435
.xeokit-classesTab ul li a:active {
436
    top: 1px;
437
}
438

439
.xeokit-classesTab ul li input {
440
    vertical-align: middle;
441
}
442

443
.xeokit-classesTab ul li span {
444
    display: inline-block;
445
    width: calc(100% - 50px);
446
    padding-left: 2px;
447
    vertical-align: middle;
448
}
449

450
.xeokit-classesTab ul li span:hover {
451
    color: white;
452
    cursor: pointer;
453
    background: rgba(255, 255, 255, 0.2);
454
    padding-left: 2px;
455
    vertical-align: middle;
456
}
457

458
.xeokit-classesTab .top-right {
459
    font-size: small;
460
    position: fixed;
461
    right: 1em;
462
    top: 1em;
463
}
464

465
.xeokit-classesTab .highlighted-node { /* Appearance of node highlighted with BIMViewer#showObjectInExplorers() */
466
    border: black solid 1px;
467
    background: yellow;
468
    color: black;
469
    padding-left: 1px;
470
    padding-right: 5px;
471
}
472

473
.xeokit-tree-panel {
474
    overflow-y: auto;
475
    overflow-x: hidden;
476
    height: calc(100% - 150px);
477
}
478

479
.xeokit-tree-panel .warn,
480
.xeokit-tree-panel .warn::before,
481
.xeokit-tree-panel .warn::after {
482
    /*position: relative;*/
483
    padding: 0;
484
    margin: 0;
485
}
486

487
.xeokit-tree-panel .warn {
488
    font-size: 20px;
489
    color: transparent;
490
}
491

492
.xeokit-tree-panel .warn.warning {
493
    display: inline-block;
494
    top: 0.225em;
495
    width: 1.15em;
496
    height: 1.15em;
497
    overflow: hidden;
498
    border: none;
499
    background-color: transparent;
500
    border-radius: 0.625em;
501
}
502

503
.xeokit-tree-panel .warn.warning::before {
504
    content: "";
505
    display: block;
506
    top: 0.0em;
507
    left: 0.0em;
508
    position: absolute;
509
    border: transparent 0.6em solid;
510
    border-bottom-color: #fd3;
511
    border-bottom-width: 1em;
512
    border-top-width: 0;
513
    box-shadow: #999 0 1px 1px;
514
}
515

516
.xeokit-tree-panel .warn.warning::after {
517
    display: block;
518
    position: absolute;
519
    top: 0.3em;
520
    left: 0;
521
    width: 100%;
522
    padding: 0 1px;
523
    text-align: center;
524
    font-family: "Garamond";
525
    content: "!";
526
    font-size: 0.65em;
527
    font-weight: bold;
528
    color: #333;
529
}
530

531
/* Context menu */
532

533
.xeokit-context-menu {
534
    font-family: 'Roboto', sans-serif;
535
    font-size: 15px;
536
    display: none;
537
    z-index: 300000;
538
    background: rgba(255, 255, 255, 0.46);
539
    border: 1px solid black;
540
    border-radius: 6px;
541
    padding: 0;
542
    width: 220px;
543
}
544

545
.xeokit-context-menu ul {
546
    list-style: none;
547
    margin-left: 0;
548
    margin-top: 0;
549
    margin-bottom: 0;
550
    padding: 0;
551
}
552

553
.xeokit-context-menu ul li {
554
    list-style-type: none;
555
    padding-left: 10px;
556
    padding-right: 20px;
557
    padding-top: 4px;
558
    padding-bottom: 4px;
559
    color: black;
560
    border-bottom: 1px solid gray;
561
    background: rgba(255, 255, 255, 0.46);
562
    cursor: pointer;
563
    width: calc(100% - 30px);
564
}
565

566
.xeokit-context-menu ul li:hover {
567
    background: black;
568
    color: white;
569
    font-weight: normal;
570
}
571

572
.xeokit-context-menu ul li span {
573
    display: inline-block;
574
}
575

576
.xeokit-context-menu .disabled {
577
    display: inline-block;
578
    color: gray;
579
    cursor: default;
580
    font-weight: normal;
581
}
582

583
.xeokit-context-menu .disabled:hover {
584
    color: gray;
585
    cursor: default;
586
    background: #eeeeee;
587
    font-weight: normal;
588
}
589

590
.xeokit-context-submenu {
591
    font-family: 'Roboto', sans-serif;
592
    font-size: 15px;
593
    display: none;
594
    z-index: 300000;
595
    background: rgba(255, 255, 255, 0.46);
596
    border: 1px solid black;
597
    border-radius: 0 6px 6px 6px !important;
598
    padding: 0;
599
    width: 220px;
600
}
601

602
/* Busy modal dialog */
603

604
.xeokit-busy-modal-backdrop {
605
    position: relative;
606
}
607

608
.xeokit-busy-modal {
609
    display: none;
610
    position: absolute;
611
    z-index: 1000000;
612
    padding-top: 100px;
613
    left: 0;
614
    top: 0;
615
    width: 100%;
616
    height: 100%;
617
    background-color: rgba(3, 16, 63, 0.4);
618
}
619

620
.xeokit-busy-modal-content {
621
    position: relative;
622
    background-color: #FFFFFF;
623
    margin: auto;
624
    padding: 0;
625
    border: 2px solid #888;
626
    border-radius: 0.5em;
627
    width: 30%;
628
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
629
    -webkit-animation-name: xeokit-busy-modal-animatetop;
630
    -webkit-animation-duration: 0.6s;
631
    animation-name: xeokit-busy-modal-animatetop;
632
    animation-duration: .6s
633
}
634

635
/* Add Animation */
636
@-webkit-keyframes xeokit-busy-modal-animatetop {
637
    from {
638
        opacity: 0
639
    }
640
    to {
641
        opacity: 1
642
    }
643
}
644

645
@keyframes xeokit-busy-modal-animatetop {
646
    from {
647
        opacity: 0
648
    }
649
    to {
650
        opacity: 1
651
    }
652
}
653

654
.xeokit-busy-modal-message {
655
    font-size: 22px;
656
    padding: 2px 14px;
657
    background-color: #FFFFFF;
658
    color: #212529;
659
}
660

661
.xeokit-busy-modal-body {
662
    padding: 2px 14px;
663
    margin: 20px 2px
664
}
665

666
/* Styles the dot that indicates the camera's current pivot position */
667

668
.xeokit-camera-pivot-marker {
669
    color: #ffffff;
670
    line-height: 1.8;
671
    text-align: center;
672
    font-family: "monospace";
673
    font-weight: bold;
674
    position: absolute;
675
    width: 25px;
676
    height: 25px;
677
    border-radius: 15px;
678
    border: 2px solid #ebebeb;
679
    background: black;
680
    visibility: hidden;
681
    box-shadow: 5px 5px 15px 1px #000000;
682
    z-index: 1000000;
683
    pointer-events: none;
684
}
685

686
.xeokit-section {
687

688
}
689

690
.xeokit-section-counter {
691
    opacity: 1.0;
692
    color: black;
693
    padding: 1px;
694
    margin: 0;
695
    margin-left: 10px;
696
    width: 20px;
697
    height: 20px;
698
    float: right;
699
    font-family: 'Roboto', sans-serif;
700
    font-size: 18px;
701
    line-height: 1.50;
702
}
703

704
.xeokit-section-counter.disabled {
705
    color: #99A4AD;
706
}
707

708
.xeokit-section-counter.active {
709
    color: #fff;
710
    border-color: #ebebeb;
711
}
712

713
.xeokit-section-counter:hover {
714
    color: #477dca;
715
}
716

717
.xeokit-section-counter.active:hover {
718
    color: white;
719
}
720

721
.xeokit-section-counter.disabled:hover {
722
    color: #99A4AD;
723
}
724

725
.xeokit-section-menu-button {
726
    opacity: 1.0;
727
    border-radius: 5px;
728
    border: 0;
729
    color: black;
730
    padding: 1px;
731
    margin: 0;
732
    margin-left: 10px;
733
    width: 20px;
734
    height: 20px;
735
    float: right;
736
    font-family: 'Roboto', sans-serif;
737
    font-size: 14px;
738
    line-height: 1.50;
739
}
740

741
.xeokit-section-menu-button.disabled {
742
    color: #99A4AD;
743
    border: 0;
744
}
745

746
.xeokit-section-menu-button.active {
747
    color: #fff;
748
    border-color: #ebebeb;
749
}
750

751
.xeokit-section-menu-button:hover {
752
    color: #477dca;
753
}
754

755
.xeokit-section-menu-button.active:hover {
756
    color: white;
757
    /*border: 2px solid #477dca;*/
758
}
759

760
.xeokit-section-menu-button.disabled:hover {
761
    color: #99A4AD;
762
}
763

764
.xeokit-arrow-up {
765
    width: 0;
766
    height: 0;
767
    display: inline-block;
768
    vertical-align: middle;
769
    border-left: 8px solid transparent;
770
    border-right: 8px solid transparent;
771
    border-bottom: 8px solid black !important;
772
}
773

774
.xeokit-arrow-up.disabled {
775
    border-bottom: 8px solid #99A4AD !important;
776
}
777

778
.xeokit-arrow-up.active {
779
    border-bottom: 8px solid white !important;
780
}
781

782
.xeokit-arrow-up:hover {
783
    border-bottom: 8px solid #477dca !important;
784
}
785

786
.xeokit-arrow-up.active:hover {
787
    border-bottom: 8px solid white !important;
788
}
789

790
.xeokit-arrow-up.disabled:hover {
791
    border-bottom: 8px solid #99A4AD !important;
792
}
793

794
.xeokit-arrow-down {
795
    width: 0;
796
    height: 0;
797
    display: inline-block;
798
    vertical-align: middle;
799
    border-style: solid;
800
    border-width: 8px 8px 0 8px;
801
    border-color: black transparent transparent transparent !important;
802
}
803

804
.xeokit-arrow-down.disabled {
805
    color: #99A4AD !important;
806
}
807

808
.xeokit-arrow-down.active {
809
    color: white !important;
810
    border-color: white transparent transparent transparent !important;
811
}
812

813
.xeokit-arrow-down:hover {
814
    color: white !important;
815
    border-color: #477dca transparent transparent transparent !important;
816
}
817

818
.xeokit-arrow-down.active:hover {
819
    color: white !important;
820
    border-color: white transparent transparent transparent !important;
821
}
822

823
.xeokit-arrow-down.disabled:hover {
824
    border-color: #99A4AD transparent transparent transparent !important;
825
}
826

827

828

829
.xeokit-accordion {
830
    display: flex;
831
    flex-direction: column;
832
    width: 100%;
833
    height: auto;
834
    overflow-y: scroll;
835
    overflow-x: hidden;
836
}
837
.xeokit-accordion .xeokit-accordion-container {
838
    display: flex;
839
    flex-direction: column;
840
    width: 100%;
841
    padding-bottom: 5px;
842
}
843
.xeokit-accordion .xeokit-accordion-container .xeokit-accordion-button {
844
    margin: 0;
845
    position: relative;
846
    padding: 15px 15px;
847
    color: #bdbdbd;
848
    display: block;
849
    font-weight: 500;
850
    background-color: #313961;
851
    cursor: pointer;
852
    transition: all 0.3s ease-in-out;
853
    border-radius: 5px;
854
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .15), 0 10px 10px -5px rgba(0, 0, 0, .1) !important;
855
}
856
.xeokit-accordion .xeokit-accordion-container .xeokit-accordion-button span {
857
    display: block;
858
    position: absolute;
859
    height: 14px;
860
    width: 14px;
861
    right: 20px;
862
    top: 18px;
863
}
864
.xeokit-accordion .xeokit-accordion-container .xeokit-accordion-button span:after {
865
    content: '';
866
    width: 14px;
867
    height: 3px;
868
    border-radius: 2px;
869
    background-color: #fff;
870
    position: absolute;
871
    top: 6px;
872
}
873
.xeokit-accordion .xeokit-accordion-container .xeokit-accordion-button span:before {
874
    content: '';
875
    width: 14px;
876
    height: 3px;
877
    border-radius: 2px;
878
    background-color: #fff;
879
    position: absolute;
880
    top: 6px;
881
    transform: rotate(90deg);
882
    transition: all 0.3s ease-in-out;
883
}
884
.xeokit-accordion .xeokit-accordion-container .xeokit-accordion-panel {
885
    width: 100%;
886
    color: #cfcfcf;
887
    transition: all 0.2s ease-in-out;
888
    opacity: 0;
889
    height: auto;
890
    max-height: 0;
891
    padding: 0 10px;
892
}
893
.xeokit-accordion .xeokit-accordion-container.active .xeokit-accordion-button {
894
    color: #cfcfcf;
895
}
896
.xeokit-accordion .xeokit-accordion-container.active .xeokit-accordion-button span::before {
897
    transform: rotate(0deg);
898
}
899
.xeokit-accordion .xeokit-accordion-container.active .xeokit-accordion-panel {
900
    padding: 0;
901
    opacity: 1;
902
    max-height: 500px;
903
}
904

905

906

907

908
.xeokit-propertiesTab .element-attributes {
909
    padding-left: 10px;
910
}
911

912
.xeokit-propertiesTab .xeokit-tab-btn {
913
    margin-left: 15px;
914
}
915

916
.xeokit-propertiesTab .title {
917
    color: #CFCFCF;
918
    font-size: 20px;
919
    font-weight: normal;
920
    padding-left: 0;
921
    padding-top: 0;
922
    padding-bottom: 20px;
923
    margin-top: 12px;
924
}
925

926
.xeokit-propertiesTab .subtitle {
927
    color: #CFCFCF;
928
    font-size: 16px;
929
    font-weight: normal;
930
    padding-left: 0;
931
}
932

933
.xeokit-propertiesTab .subsubtitle {
934
    color: #CFCFCF;
935
    font-size: 14px;
936
    font-weight: normal;
937
    padding-left: 0;
938
}
939

940
.xeokit-propertiesTab .panel {
941
    padding: 0 18px;
942
    background: #03103F;
943
    color: #CFCFCF;
944
    max-height: 0;
945
    overflow: hidden;
946
    transition: max-height 0.15s;
947
}
948

949
.xeokit-propertiesTab input {
950
    position: absolute;
951
    opacity: 0;
952
    z-index: -1;
953
}
954

955
.xeokit-propertiesTab .row {
956
    display: flex;
957
}
958

959
.xeokit-propertiesTab .row .col {
960
    flex: 1;
961
}
962

963
.xeokit-propertiesTab .row .col:last-child {
964
    margin-left: 1em;
965
}
966

967
.xeokit-propertiesTab .tabs {
968
    border-radius: 8px;
969
    overflow: hidden;
970
    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
971
}
972

973
.xeokit-propertiesTab .tab {
974
    width: 100%;
975
    color: #CFCFCF;
976
    overflow: hidden;
977
}
978

979
.xeokit-propertiesTab .tab-label {
980
    display: flex;
981
    padding: .5em .5em .5em 1em;
982
    font-weight: normal;
983
    cursor: pointer;
984
}
985

986
.xeokit-propertiesTab .tab-label:hover {
987
    cursor: pointer;
988
    background: rgba(255, 255, 255, 0.2);
989
}
990

991
.xeokit-propertiesTab .tab-label::before {
992
    content: "\276F";
993
    width: 1em;
994
    height: 1em;
995
    text-align: center;
996
    transition: all 0.35s;
997
}
998

999
.xeokit-propertiesTab .tab-content {
1000
    max-height: 0;
1001
    padding: 0 1em;
1002
    transition: all 0.35s;
1003
    overflow: hidden;
1004
}
1005

1006
.xeokit-btn {
1007
    box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);
1008
}
1009

1010
.xeokit-table {
1011
    width: 100%;
1012
    margin-bottom: 1rem;
1013
    display: table;
1014
    /*border-collapse: separate;*/
1015
    box-sizing: border-box;
1016
    text-indent: initial;
1017
    /*border-spacing: 2px;*/
1018
}
1019

1020
.xeokit-table .td1, .xeokit-table th {
1021
    padding: .6em;
1022
    vertical-align: top;
1023
    border-top: 1px solid #81819a;
1024
    border-right: 1px solid #81819a;
1025
    white-space: nowrap;
1026
    font-weight: bold;
1027
    width: 150px;
1028
    max-width: 150px;
1029
}
1030

1031
.xeokit-table tr:first-child td {
1032
    border-top: 0;
1033
}
1034

1035
.xeokit-table .td2, .xeokit-table th {
1036
    padding: .5em;
1037
    vertical-align: top;
1038
    border-top: 1px solid #81819a;
1039
}
1040

1041
.xeokit-table th {
1042
    text-align: inherit;
1043
}
1044

1045
.xeokit-table th {
1046
    display: table-cell;
1047
    vertical-align: inherit;
1048
    font-weight: bold;
1049
}
1050

1051
.xeokit-no-prop-set-warning {
1052
    visibility: visible
1053
}
1054

1055
.no-object-selected-warning {
1056

1057
}
1058

1059
.viewer-ruler-wire-highlighted {
1060
    border: 2px solid white !important;
1061
}
1062

1063
.viewer-ruler-label-highlighted {
1064
    border: 2px solid white !important;
1065
}
1066

1067
.viewer-ruler-dot-highlighted {
1068
    border: 2px solid white !important;
1069
}
1070

1071