1
@keyframes qr--success {
2
  0%,
3
  100% {
4
    color: var(--SmartThemeBodyColor);
5
  }
6
  25%,
7
  75% {
8
    color: #51a351;
9
  }
10
}
11
.qr--success {
12
  animation-name: qr--success;
13
  animation-duration: 3s;
14
  animation-timing-function: linear;
15
  animation-delay: 0s;
16
  animation-iteration-count: 1;
17
}
18
#qr--bar {
19
  outline: none;
20
  margin: 0;
21
  transition: var(--animation-duration-2x);
22
  opacity: 0.7;
23
  display: flex;
24
  align-items: center;
25
  justify-content: center;
26
  width: 100%;
27
  max-width: 100%;
28
  overflow-x: auto;
29
  order: 1;
30
  position: relative;
31
}
32
#qr--bar > #qr--popoutTrigger {
33
  position: absolute;
34
  right: 0.25em;
35
  top: 0;
36
}
37
/*hide QR popout for mobile*/
38
@media screen and (max-width: 1000px) {
39
  #qr--bar > #qr--popoutTrigger {
40
    display: none;
41
  }
42
}
43
#qr--bar.popoutVisible {
44
  padding-right: 2.5em;
45
}
46
#qr--popout {
47
  display: flex;
48
  flex-direction: column;
49
  padding: 0;
50
  z-index: 31;
51
}
52
#qr--popout > .qr--header {
53
  flex: 0 0 auto;
54
  height: 2em;
55
  position: relative;
56
}
57
#qr--popout > .qr--header > .qr--controls > .qr--close {
58
  height: 15px;
59
  aspect-ratio: 1 / 1;
60
  font-size: 20px;
61
  opacity: 0.5;
62
  transition: all var(--animation-duration-2x);
63
}
64
#qr--popout > .qr--body {
65
  overflow-y: auto;
66
}
67
#qr--bar > .qr--buttons,
68
#qr--popout > .qr--body > .qr--buttons {
69
  --qr--color: transparent;
70
  margin: 0;
71
  padding: 0;
72
  display: flex;
73
  justify-content: center;
74
  flex-wrap: wrap;
75
  gap: 5px;
76
  width: 100%;
77
}
78
#qr--bar > .qr--buttons.qr--color,
79
#qr--popout > .qr--body > .qr--buttons.qr--color {
80
  background-color: var(--qr--color);
81
}
82
#qr--bar > .qr--buttons.qr--borderColor,
83
#qr--popout > .qr--body > .qr--buttons.qr--borderColor {
84
  background-color: transparent;
85
  border-left: 5px solid var(--qr--color);
86
  border-right: 5px solid var(--qr--color);
87
}
88
#qr--bar > .qr--buttons:has(.qr--buttons.qr--color),
89
#qr--popout > .qr--body > .qr--buttons:has(.qr--buttons.qr--color) {
90
  margin: 5px;
91
}
92
#qr--bar > .qr--buttons > .qr--buttons,
93
#qr--popout > .qr--body > .qr--buttons > .qr--buttons {
94
  display: contents;
95
}
96
#qr--bar > .qr--buttons > .qr--buttons.qr--color .qr--button:before,
97
#qr--popout > .qr--body > .qr--buttons > .qr--buttons.qr--color .qr--button:before {
98
  content: '';
99
  background-color: var(--qr--color);
100
  position: absolute;
101
  inset: -5px;
102
  z-index: -1;
103
}
104
#qr--bar > .qr--buttons > .qr--buttons.qr--color.qr--borderColor .qr--button:before,
105
#qr--popout > .qr--body > .qr--buttons > .qr--buttons.qr--color.qr--borderColor .qr--button:before {
106
  display: none;
107
}
108
#qr--bar > .qr--buttons > .qr--buttons.qr--color.qr--borderColor:before,
109
#qr--popout > .qr--body > .qr--buttons > .qr--buttons.qr--color.qr--borderColor:before,
110
#qr--bar > .qr--buttons > .qr--buttons.qr--color.qr--borderColor:after,
111
#qr--popout > .qr--body > .qr--buttons > .qr--buttons.qr--color.qr--borderColor:after {
112
  content: '';
113
  width: 5px;
114
  background-color: var(--qr--color);
115
}
116
#qr--bar > .qr--buttons .qr--button,
117
#qr--popout > .qr--body > .qr--buttons .qr--button {
118
  color: var(--SmartThemeBodyColor);
119
  border: 1px solid var(--SmartThemeBorderColor);
120
  border-radius: 10px;
121
  padding: 3px 5px;
122
  margin: 3px 0;
123
  cursor: pointer;
124
  transition: var(--animation-duration-2x);
125
  display: flex;
126
  align-items: center;
127
  justify-content: center;
128
  text-align: center;
129
  position: relative;
130
}
131
#qr--bar > .qr--buttons .qr--button:hover,
132
#qr--popout > .qr--body > .qr--buttons .qr--button:hover {
133
  background-color: #4d4d4d;
134
}
135
#qr--bar > .qr--buttons .qr--button .qr--hidden,
136
#qr--popout > .qr--body > .qr--buttons .qr--button .qr--hidden {
137
  display: none;
138
}
139
#qr--bar > .qr--buttons .qr--button .qr--button-icon,
140
#qr--popout > .qr--body > .qr--buttons .qr--button .qr--button-icon {
141
  margin: 0 0.5em;
142
}
143
#qr--bar > .qr--buttons .qr--button > .qr--button-expander,
144
#qr--popout > .qr--body > .qr--buttons .qr--button > .qr--button-expander {
145
  display: none;
146
}
147
#qr--bar > .qr--buttons .qr--button.qr--hasCtx > .qr--button-expander,
148
#qr--popout > .qr--body > .qr--buttons .qr--button.qr--hasCtx > .qr--button-expander {
149
  display: block;
150
}
151
.qr--button-expander {
152
  border-left: 1px solid;
153
  margin-left: 1em;
154
  text-align: center;
155
  width: 2em;
156
}
157
.qr--button-expander:hover {
158
  font-weight: bold;
159
}
160
.ctx-blocker {
161
  /* backdrop-filter: blur(1px); */
162
  /* background-color: rgba(0 0 0 / 10%); */
163
  bottom: 0;
164
  left: 0;
165
  position: fixed;
166
  right: 0;
167
  top: 0;
168
  z-index: 999;
169
}
170
.ctx-menu {
171
  position: absolute;
172
  overflow: visible;
173
}
174
.ctx-menu .ctx-item .qr--hidden {
175
  display: none;
176
}
177
.list-group .list-group-item.ctx-header {
178
  font-weight: bold;
179
  cursor: default;
180
}
181
.ctx-item + .ctx-header {
182
  border-top: 1px solid;
183
}
184
.ctx-item {
185
  position: relative;
186
}
187
.ctx-expander {
188
  border-left: 1px solid;
189
  margin-left: 1em;
190
  text-align: center;
191
  width: 2em;
192
}
193
.ctx-expander:hover {
194
  font-weight: bold;
195
}
196
.ctx-sub-menu {
197
  position: absolute;
198
  top: 0;
199
  left: 100%;
200
}
201
@media screen and (max-width: 1000px) {
202
  .ctx-blocker {
203
    position: absolute;
204
  }
205
  .list-group .list-group-item.ctx-item {
206
    padding: 1em;
207
  }
208
}
209
#qr--settings .qr--head {
210
  display: flex;
211
  align-items: baseline;
212
  gap: 1em;
213
}
214
#qr--settings .qr--head > .qr--title {
215
  font-weight: bold;
216
}
217
#qr--settings .qr--head > .qr--actions {
218
  display: flex;
219
  flex-direction: row;
220
  align-items: baseline;
221
  gap: 0.5em;
222
}
223
#qr--settings .qr--setList > .qr--item {
224
  display: flex;
225
  flex-direction: row;
226
  gap: 0.5em;
227
  align-items: baseline;
228
  padding: 0 0.5em;
229
}
230
#qr--settings .qr--setList > .qr--item > .drag-handle {
231
  padding: 0.75em;
232
}
233
#qr--settings .qr--setList > .qr--item > .qr--visible {
234
  flex: 0 0 auto;
235
  display: flex;
236
  flex-direction: row;
237
}
238
#qr--settings #qr--set-settings #qr--injectInputContainer {
239
  flex-wrap: nowrap;
240
}
241
#qr--settings #qr--set-qrList .qr--set-qrListContents {
242
  padding: 0 0.5em;
243
}
244
#qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--set-itemAdder {
245
  display: flex;
246
  align-items: center;
247
  opacity: 0;
248
  transition: var(--animation-duration);
249
  margin: -2px 0 -11px 0;
250
  position: relative;
251
}
252
#qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--set-itemAdder .qr--actions {
253
  display: flex;
254
  gap: 0.25em;
255
  flex: 0 0 auto;
256
}
257
#qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--set-itemAdder .qr--actions .qr--action {
258
  margin: 0;
259
}
260
#qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--set-itemAdder:before,
261
#qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--set-itemAdder:after {
262
  content: "";
263
  display: block;
264
  flex: 1 1 auto;
265
  border: 1px solid;
266
  margin: 0 1em;
267
  height: 0;
268
}
269
#qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--set-itemAdder:hover,
270
#qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--set-itemAdder:focus-within {
271
  opacity: 1;
272
}
273
#qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--content {
274
  display: flex;
275
  flex-direction: row;
276
  gap: 0.5em;
277
  align-items: baseline;
278
  padding: 0.25em 0;
279
}
280
#qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--content > :nth-child(2) {
281
  flex: 0 0 auto;
282
}
283
#qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--content > :nth-child(2) {
284
  flex: 1 1 25%;
285
}
286
#qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--content > :nth-child(3) {
287
  flex: 0 0 auto;
288
}
289
#qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--content > :nth-child(4) {
290
  flex: 1 1 75%;
291
}
292
#qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--content > :nth-child(5) {
293
  flex: 0 1 auto;
294
  display: flex;
295
  gap: 0.25em;
296
  justify-content: flex-end;
297
  flex-wrap: wrap;
298
}
299
#qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--content > .drag-handle {
300
  padding: 0.75em;
301
}
302
#qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--content .qr--set-itemLabelContainer {
303
  display: flex;
304
  align-items: center;
305
  gap: 0.5em;
306
}
307
#qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--content .qr--set-itemLabelContainer .qr--set-itemIcon:not(.fa-solid) {
308
  display: none;
309
}
310
#qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--content .qr--set-itemLabelContainer .qr--set-itemLabel {
311
  min-width: 24px;
312
}
313
#qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--content .qr--set-itemLabel,
314
#qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--content .qr--action {
315
  margin: 0;
316
}
317
#qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--content .qr--set-itemMessage {
318
  font-size: smaller;
319
}
320
#qr--settings .qr--set-qrListActions {
321
  display: flex;
322
  flex-direction: row;
323
  gap: 0.5em;
324
  justify-content: center;
325
  padding-bottom: 0.5em;
326
}
327
#qr--qrOptions {
328
  display: flex;
329
  flex-direction: column;
330
  padding-right: 1px;
331
}
332
#qr--qrOptions > #qr--ctxEditor .qr--ctxItem {
333
  display: flex;
334
  flex-direction: row;
335
  gap: 0.5em;
336
  align-items: baseline;
337
}
338
#qr--qrOptions > #qr--autoExec .checkbox_label {
339
  text-wrap: nowrap;
340
}
341
#qr--qrOptions > #qr--autoExec .checkbox_label .fa-fw {
342
  margin-right: 2px;
343
}
344
@media screen and (max-width: 750px) {
345
  body .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor {
346
    flex-direction: column;
347
    overflow: auto;
348
  }
349
  body .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main {
350
    flex: 0 0 auto;
351
  }
352
  body .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels {
353
    flex-direction: column;
354
  }
355
  body .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder {
356
    min-height: 50dvh;
357
    height: 50dvh;
358
  }
359
}
360
.popup:has(#qr--modalEditor) {
361
  aspect-ratio: unset;
362
  width: unset;
363
}
364
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) {
365
  min-width: unset;
366
  min-height: unset;
367
  height: auto !important;
368
  width: min-content !important;
369
  position: absolute;
370
  right: 1em;
371
  top: 1em;
372
  left: unset;
373
  bottom: unset;
374
  margin: unset;
375
  padding: 0;
376
}
377
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized)::backdrop {
378
  backdrop-filter: unset;
379
  background-color: transparent;
380
}
381
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-body {
382
  flex: 0 0 auto;
383
  height: min-content;
384
  width: min-content;
385
}
386
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content {
387
  flex: 0 0 auto;
388
  margin-top: 0;
389
}
390
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor {
391
  max-height: 50vh;
392
}
393
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor > #qr--main,
394
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor > #qr--resizeHandle,
395
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor > #qr--qrOptions > h3,
396
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor > #qr--qrOptions > #qr--modal-executeButtons,
397
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor > #qr--qrOptions > #qr--modal-executeProgress {
398
  display: none;
399
}
400
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor #qr--qrOptions {
401
  width: auto;
402
}
403
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-maximize {
404
  display: flex;
405
}
406
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-minimize {
407
  display: none;
408
}
409
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor #qr--modal-debugState {
410
  padding-top: 0;
411
}
412
.popup:has(#qr--modalEditor):has(.qr--isExecuting) .popup-controls {
413
  display: none;
414
}
415
.popup:has(#qr--modalEditor):has(.qr--isExecuting) .qr--highlight {
416
  position: absolute;
417
  z-index: 50000;
418
  pointer-events: none;
419
  background-color: rgba(47, 150, 180, 0.5);
420
}
421
.popup:has(#qr--modalEditor):has(.qr--isExecuting) .qr--highlight.qr--unresolved {
422
  background-color: rgba(255, 255, 0, 0.5);
423
}
424
.popup:has(#qr--modalEditor):has(.qr--isExecuting) .qr--highlight-secondary {
425
  position: absolute;
426
  z-index: 50000;
427
  pointer-events: none;
428
  border: 3px solid red;
429
}
430
.popup:has(#qr--modalEditor) .popup-content {
431
  display: flex;
432
  flex-direction: column;
433
}
434
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor {
435
  flex: 1 1 auto;
436
  display: flex;
437
  flex-direction: row;
438
  gap: 1em;
439
  overflow: hidden;
440
}
441
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--main > h3:first-child,
442
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--main > .qr--labels,
443
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings,
444
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--qrOptions > h3:first-child,
445
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--qrOptions > #qr--ctxEditor,
446
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--qrOptions > .qr--ctxEditorActions,
447
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--qrOptions > .qr--ctxEditorActions + h3,
448
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--qrOptions > .qr--ctxEditorActions + h3 + div {
449
  display: none;
450
}
451
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message {
452
  visibility: hidden;
453
}
454
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--modal-debugButtons {
455
  display: flex;
456
}
457
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--modal-debugButtons .menu_button:not(#qr--modal-minimize, #qr--modal-maximize) {
458
  cursor: not-allowed;
459
  opacity: 0.5;
460
  pointer-events: none;
461
  transition: var(--animation-duration-2x);
462
  border-color: transparent;
463
}
464
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting.qr--isPaused #qr--modal-debugButtons .menu_button:not(#qr--modal-minimize, #qr--modal-maximize) {
465
  cursor: pointer;
466
  opacity: 1;
467
  pointer-events: all;
468
}
469
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting.qr--isPaused #qr--modal-debugButtons .menu_button:not(#qr--modal-minimize, #qr--modal-maximize)#qr--modal-resume {
470
  animation-name: qr--debugPulse;
471
  animation-duration: 1500ms;
472
  animation-timing-function: ease-in-out;
473
  animation-delay: 0s;
474
  animation-iteration-count: infinite;
475
}
476
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting.qr--isPaused #qr--modal-debugButtons .menu_button:not(#qr--modal-minimize, #qr--modal-maximize)#qr--modal-resume {
477
  border-color: #51a351;
478
}
479
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting.qr--isPaused #qr--modal-debugButtons .menu_button:not(#qr--modal-minimize, #qr--modal-maximize)#qr--modal-step {
480
  border-color: var(--SmartThemeQuoteColor);
481
}
482
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting.qr--isPaused #qr--modal-debugButtons .menu_button:not(#qr--modal-minimize, #qr--modal-maximize)#qr--modal-stepInto {
483
  border-color: var(--SmartThemeQuoteColor);
484
}
485
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting.qr--isPaused #qr--modal-debugButtons .menu_button:not(#qr--modal-minimize, #qr--modal-maximize)#qr--modal-stepOut {
486
  border-color: var(--SmartThemeQuoteColor);
487
}
488
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--resizeHandle {
489
  width: 6px;
490
  background-color: var(--SmartThemeBorderColor);
491
  border: 2px solid var(--SmartThemeBlurTintColor);
492
  transition: border-color var(--animation-duration-2x), background-color var(--animation-duration-2x);
493
  cursor: w-resize;
494
}
495
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--resizeHandle:hover {
496
  background-color: var(--SmartThemeQuoteColor);
497
  border-color: var(--SmartThemeQuoteColor);
498
}
499
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--qrOptions {
500
  width: var(--width, auto);
501
}
502
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main {
503
  flex: 1 1 auto;
504
  display: flex;
505
  flex-direction: column;
506
  overflow: hidden;
507
}
508
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels {
509
  flex: 0 0 auto;
510
  display: flex;
511
  flex-direction: row;
512
  gap: 0.5em;
513
  padding: 1px;
514
}
515
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label,
516
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > .label {
517
  flex: 1 1 1px;
518
  display: flex;
519
  flex-direction: column;
520
  position: relative;
521
}
522
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label.qr--fit,
523
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > .label.qr--fit {
524
  flex: 0 0 auto;
525
  justify-content: center;
526
}
527
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label .qr--inputGroup,
528
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > .label .qr--inputGroup {
529
  display: flex;
530
  align-items: baseline;
531
  gap: 0.5em;
532
}
533
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label .qr--inputGroup input,
534
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > .label .qr--inputGroup input {
535
  flex: 1 1 auto;
536
}
537
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label .qr--labelText,
538
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > .label .qr--labelText {
539
  flex: 1 1 auto;
540
}
541
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label .qr--labelHint,
542
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > .label .qr--labelHint {
543
  flex: 1 1 auto;
544
}
545
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label input,
546
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > .label input {
547
  flex: 0 0 auto;
548
}
549
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label .qr--modal-switcherList,
550
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > .label .qr--modal-switcherList {
551
  background-color: var(--stcdx--bgColor);
552
  border: 1px solid var(--SmartThemeBorderColor);
553
  backdrop-filter: blur(var(--SmartThemeBlurStrength));
554
  border-radius: 10px;
555
  font-size: smaller;
556
  position: absolute;
557
  top: 100%;
558
  left: 0;
559
  right: 0;
560
  overflow: auto;
561
  margin: 0;
562
  padding: 0.5em;
563
  max-height: 50vh;
564
  list-style: none;
565
  z-index: 40000;
566
  max-width: 100%;
567
}
568
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label .qr--modal-switcherList .qr--modal-switcherItem,
569
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > .label .qr--modal-switcherList .qr--modal-switcherItem {
570
  display: flex;
571
  gap: 1em;
572
  text-align: left;
573
  opacity: 0.75;
574
  transition: var(--animation-duration-2x);
575
  cursor: pointer;
576
}
577
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label .qr--modal-switcherList .qr--modal-switcherItem:hover,
578
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > .label .qr--modal-switcherList .qr--modal-switcherItem:hover {
579
  opacity: 1;
580
}
581
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label .qr--modal-switcherList .qr--modal-switcherItem.qr--current,
582
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > .label .qr--modal-switcherList .qr--modal-switcherItem.qr--current {
583
  opacity: 1;
584
}
585
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label .qr--modal-switcherList .qr--modal-switcherItem.qr--current .qr--label,
586
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > .label .qr--modal-switcherList .qr--modal-switcherItem.qr--current .qr--label,
587
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label .qr--modal-switcherList .qr--modal-switcherItem.qr--current .qr--id,
588
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > .label .qr--modal-switcherList .qr--modal-switcherItem.qr--current .qr--id {
589
  font-weight: bold;
590
}
591
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label .qr--modal-switcherList .qr--label,
592
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > .label .qr--modal-switcherList .qr--label {
593
  white-space: nowrap;
594
}
595
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label .qr--modal-switcherList .qr--label .menu_button,
596
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > .label .qr--modal-switcherList .qr--label .menu_button {
597
  display: inline-block;
598
  height: min-content;
599
  width: min-content;
600
  margin: 0 0.5em 0 0;
601
}
602
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label .qr--modal-switcherList .qr--id,
603
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > .label .qr--modal-switcherList .qr--id {
604
  opacity: 0.5;
605
}
606
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label .qr--modal-switcherList .qr--id:before,
607
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > .label .qr--modal-switcherList .qr--id:before {
608
  content: "[";
609
}
610
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label .qr--modal-switcherList .qr--id:after,
611
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > .label .qr--modal-switcherList .qr--id:after {
612
  content: "]";
613
}
614
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label .qr--modal-switcherList .qr--message,
615
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > .label .qr--modal-switcherList .qr--message {
616
  height: 1lh;
617
  overflow: hidden;
618
  text-overflow: ellipsis;
619
  white-space: nowrap;
620
  opacity: 0.5;
621
}
622
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer {
623
  flex: 1 1 auto;
624
  display: flex;
625
  flex-direction: column;
626
  overflow: hidden;
627
}
628
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings {
629
  display: flex;
630
  flex-wrap: wrap;
631
  flex-direction: row;
632
  column-gap: 1em;
633
  color: var(--grey70);
634
  font-size: smaller;
635
  align-items: baseline;
636
}
637
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings > .checkbox_label {
638
  white-space: nowrap;
639
}
640
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings > .checkbox_label > input {
641
  font-size: inherit;
642
}
643
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder {
644
  flex: 1 1 auto;
645
  display: grid;
646
  text-align: left;
647
  overflow: hidden;
648
}
649
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder.qr--noSyntax > #qr--modal-messageSyntax {
650
  display: none;
651
}
652
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder.qr--noSyntax > #qr--modal-message {
653
  background-color: var(--ac-style-color-background);
654
  color: var(--ac-style-color-text);
655
}
656
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder.qr--noSyntax > #qr--modal-message::-webkit-scrollbar,
657
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder.qr--noSyntax > #qr--modal-message::-webkit-scrollbar-thumb {
658
  visibility: visible;
659
  cursor: unset;
660
}
661
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder.qr--noSyntax > #qr--modal-message::selection {
662
  color: unset;
663
  background-color: rgba(108 171 251 / 0.25);
664
}
665
@supports (color: rgb(from white r g b / 0.25)) {
666
  .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder.qr--noSyntax > #qr--modal-message::selection {
667
    background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25);
668
  }
669
}
670
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-messageSyntax {
671
  grid-column: 1;
672
  grid-row: 1;
673
  padding: 0;
674
  margin: 0;
675
  border: none;
676
  overflow: hidden;
677
  min-width: 100%;
678
  width: 0;
679
}
680
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-messageSyntax > #qr--modal-messageSyntaxInner {
681
  height: 100%;
682
}
683
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message {
684
  background-color: transparent;
685
  color: transparent;
686
  grid-column: 1;
687
  grid-row: 1;
688
  caret-color: var(--ac-style-color-text);
689
  overflow: auto;
690
}
691
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::-webkit-scrollbar,
692
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::-webkit-scrollbar-thumb {
693
  visibility: hidden;
694
  cursor: default;
695
}
696
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::selection {
697
  color: transparent;
698
  background-color: rgba(108 171 251 / 0.25);
699
}
700
@supports (color: rgb(from white r g b / 0.25)) {
701
  .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::selection {
702
    background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25);
703
  }
704
}
705
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder #qr--modal-message,
706
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder #qr--modal-messageSyntaxInner {
707
  font-family: var(--monoFontFamily);
708
  padding: 0.75em;
709
  margin: 0;
710
  resize: none;
711
  line-height: 1.2;
712
  border: 1px solid var(--SmartThemeBorderColor);
713
  border-radius: 5px;
714
  position: relative;
715
}
716
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-icon {
717
  height: 100%;
718
  aspect-ratio: 1 / 1;
719
}
720
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons {
721
  display: flex;
722
  gap: 1em;
723
}
724
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons .qr--modal-executeButton {
725
  border-width: 2px;
726
  border-style: solid;
727
  display: flex;
728
  flex-direction: row;
729
  gap: 0.5em;
730
  padding: 0.5em 0.75em;
731
}
732
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons .qr--modal-executeButton .qr--modal-executeComboIcon {
733
  display: flex;
734
}
735
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute {
736
  transition: var(--animation-duration-2x);
737
  filter: grayscale(0);
738
}
739
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute.qr--busy {
740
  cursor: wait;
741
  opacity: 0.5;
742
  filter: grayscale(1);
743
}
744
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute {
745
  border-color: #51a351;
746
}
747
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-pause,
748
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-stop {
749
  cursor: default;
750
  opacity: 0.5;
751
  filter: grayscale(1);
752
  pointer-events: none;
753
}
754
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons .qr--busy ~ #qr--modal-pause,
755
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons .qr--busy ~ #qr--modal-stop {
756
  cursor: pointer;
757
  opacity: 1;
758
  filter: grayscale(0);
759
  pointer-events: all;
760
}
761
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-pause {
762
  border-color: #92befc;
763
}
764
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-stop {
765
  border-color: #d78872;
766
}
767
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons {
768
  display: none;
769
  gap: 1em;
770
}
771
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton {
772
  aspect-ratio: 1.25 / 1;
773
  width: 2.25em;
774
  position: relative;
775
}
776
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton:not(.fa-solid) {
777
  border-width: 1px;
778
  border-style: solid;
779
}
780
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton:not(.fa-solid):after {
781
  content: '';
782
  position: absolute;
783
  inset: 3px;
784
  background-color: var(--SmartThemeBodyColor);
785
  mask-size: contain;
786
  mask-position: center;
787
  mask-repeat: no-repeat;
788
}
789
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-resume:after {
790
  mask-image: url('/img/step-resume.svg');
791
}
792
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-step:after {
793
  mask-image: url('/img/step-over.svg');
794
}
795
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-stepInto:after {
796
  mask-image: url('/img/step-into.svg');
797
}
798
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-stepOut:after {
799
  mask-image: url('/img/step-out.svg');
800
}
801
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-maximize {
802
  display: none;
803
}
804
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-send_textarea {
805
  flex: 0 0 auto;
806
}
807
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress {
808
  --prog: 0;
809
  --progColor: #92befc;
810
  --progFlashColor: #d78872;
811
  --progSuccessColor: #51a351;
812
  --progErrorColor: #bd362f;
813
  --progAbortedColor: #d78872;
814
  flex: 0 0 auto;
815
  height: 0.5em;
816
  background-color: var(--black50a);
817
  position: relative;
818
}
819
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress:after {
820
  content: '';
821
  background-color: var(--progColor);
822
  position: absolute;
823
  inset: 0;
824
  right: calc(100% - var(--prog) * 1%);
825
  transition: var(--animation-duration-2x);
826
}
827
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress.qr--paused:after {
828
  animation-name: qr--progressPulse;
829
  animation-duration: 1500ms;
830
  animation-timing-function: ease-in-out;
831
  animation-delay: 0s;
832
  animation-iteration-count: infinite;
833
}
834
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress.qr--aborted:after {
835
  background-color: var(--progAbortedColor);
836
}
837
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress.qr--success:after {
838
  background-color: var(--progSuccessColor);
839
}
840
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress.qr--error:after {
841
  background-color: var(--progErrorColor);
842
}
843
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeErrors {
844
  display: none;
845
  text-align: left;
846
  font-size: smaller;
847
  background-color: #bd362f;
848
  color: white;
849
  padding: 0.5em;
850
  overflow: auto;
851
  min-width: 100%;
852
  width: 0;
853
}
854
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeErrors.qr--hasErrors {
855
  display: block;
856
}
857
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeResult {
858
  display: none;
859
  text-align: left;
860
  font-size: smaller;
861
  background-color: #51a351;
862
  color: white;
863
  padding: 0.5em;
864
  overflow: auto;
865
  min-width: 100%;
866
  width: 0;
867
  white-space: pre-wrap;
868
}
869
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeResult.qr--hasResult {
870
  display: block;
871
}
872
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeResult:before {
873
  content: 'Result: ';
874
}
875
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState {
876
  display: none;
877
  text-align: left;
878
  font-size: smaller;
879
  font-family: var(--monoFontFamily);
880
  color: white;
881
  padding: 0.5em 0;
882
  overflow: auto;
883
  min-width: 100%;
884
  width: 0;
885
  white-space: pre-wrap;
886
}
887
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState.qr--active {
888
  display: block;
889
}
890
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope {
891
  display: grid;
892
  grid-template-columns: 0fr 1fr 1fr;
893
  column-gap: 0em;
894
}
895
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--title {
896
  grid-column: 1 / 4;
897
  font-weight: bold;
898
  font-family: var(--mainFontFamily);
899
  background-color: var(--black50a);
900
  padding: 0.25em;
901
  margin-top: 0.5em;
902
}
903
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--var,
904
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--macro,
905
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe {
906
  display: contents;
907
}
908
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--var:nth-child(2n + 1) .qr--key,
909
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--macro:nth-child(2n + 1) .qr--key,
910
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe:nth-child(2n + 1) .qr--key,
911
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--var:nth-child(2n + 1) .qr--val,
912
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--macro:nth-child(2n + 1) .qr--val,
913
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe:nth-child(2n + 1) .qr--val {
914
  background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.25);
915
}
916
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--var:nth-child(2n + 1) .qr--val:nth-child(2n),
917
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--macro:nth-child(2n + 1) .qr--val:nth-child(2n),
918
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe:nth-child(2n + 1) .qr--val:nth-child(2n) {
919
  background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.125);
920
}
921
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--var:nth-child(2n + 1) .qr--val:hover,
922
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--macro:nth-child(2n + 1) .qr--val:hover,
923
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe:nth-child(2n + 1) .qr--val:hover {
924
  background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.5);
925
}
926
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--var:nth-child(2n) .qr--val:nth-child(2n),
927
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--macro:nth-child(2n) .qr--val:nth-child(2n),
928
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe:nth-child(2n) .qr--val:nth-child(2n) {
929
  background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.0625);
930
}
931
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--var:nth-child(2n) .qr--val:hover,
932
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--macro:nth-child(2n) .qr--val:hover,
933
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe:nth-child(2n) .qr--val:hover {
934
  background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.5);
935
}
936
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--var.qr--isHidden .qr--key,
937
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--macro.qr--isHidden .qr--key,
938
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe.qr--isHidden .qr--key,
939
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--var.qr--isHidden .qr--val,
940
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--macro.qr--isHidden .qr--val,
941
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe.qr--isHidden .qr--val {
942
  opacity: 0.5;
943
}
944
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--var .qr--val,
945
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--macro .qr--val,
946
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe .qr--val {
947
  grid-column: 2 / 4;
948
}
949
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--var .qr--val.qr--singleCol,
950
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--macro .qr--val.qr--singleCol,
951
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe .qr--val.qr--singleCol {
952
  grid-column: unset;
953
}
954
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--var .qr--val.qr--simple:before,
955
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--macro .qr--val.qr--simple:before,
956
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe .qr--val.qr--simple:before,
957
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--var .qr--val.qr--simple:after,
958
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--macro .qr--val.qr--simple:after,
959
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe .qr--val.qr--simple:after {
960
  content: '"';
961
  color: var(--SmartThemeQuoteColor);
962
}
963
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--var .qr--val.qr--unresolved:after,
964
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--macro .qr--val.qr--unresolved:after,
965
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe .qr--val.qr--unresolved:after {
966
  content: '-UNRESOLVED-';
967
  font-style: italic;
968
  color: var(--SmartThemeQuoteColor);
969
}
970
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--key {
971
  margin-left: 0.5em;
972
  padding-right: 1em;
973
}
974
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--key:after {
975
  content: ": ";
976
}
977
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe > .qr--key:before,
978
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--macro > .qr--key:before {
979
  content: "{{";
980
}
981
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe > .qr--key:after,
982
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--macro > .qr--key:after {
983
  content: "}}: ";
984
}
985
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--scope {
986
  display: contents;
987
}
988
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--scope .qr--pipe .qr--key,
989
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--scope .qr--pipe .qr--val {
990
  opacity: 0.5;
991
}
992
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--stack {
993
  display: grid;
994
  grid-template-columns: 1fr 0fr;
995
}
996
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--stack .qr--title {
997
  grid-column: 1 / 3;
998
  font-weight: bold;
999
  font-family: var(--mainFontFamily);
1000
  background-color: var(--black50a);
1001
  padding: 0.25em;
1002
  margin-top: 1em;
1003
}
1004
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--stack .qr--item {
1005
  display: contents;
1006
}
1007
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--stack .qr--item:nth-child(2n + 1) .qr--name,
1008
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--stack .qr--item:nth-child(2n + 1) .qr--source {
1009
  background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.25);
1010
}
1011
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--stack .qr--item .qr--name {
1012
  margin-left: 0.5em;
1013
}
1014
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--stack .qr--item .qr--source {
1015
  opacity: 0.5;
1016
  text-align: right;
1017
  white-space: nowrap;
1018
}
1019
@keyframes qr--progressPulse {
1020
  0%,
1021
  100% {
1022
    background-color: var(--progColor);
1023
  }
1024
  50% {
1025
    background-color: var(--progFlashColor);
1026
  }
1027
}
1028
@keyframes qr--debugPulse {
1029
  0%,
1030
  100% {
1031
    border-color: #51a351;
1032
  }
1033
  50% {
1034
    border-color: #92befc;
1035
  }
1036
}
1037
.popup.qr--hide {
1038
  opacity: 0 !important;
1039
}
1040
.popup.qr--hide::backdrop {
1041
  opacity: 0 !important;
1042
}
1043
.popup.qr--hide::backdrop {
1044
  opacity: 0 !important;
1045
}
1046
.popup:has(.qr--transferModal) .popup-button-ok {
1047
  display: flex;
1048
  align-items: center;
1049
  flex-direction: column;
1050
  white-space: pre;
1051
  font-weight: normal;
1052
  box-shadow: 0 0 0;
1053
  transition: var(--animation-duration-2x);
1054
}
1055
.popup:has(.qr--transferModal) .popup-button-ok:after {
1056
  content: 'Transfer';
1057
  height: 0;
1058
  overflow: hidden;
1059
  font-weight: bold;
1060
}
1061
.popup:has(.qr--transferModal) .qr--copy {
1062
  display: flex;
1063
  align-items: center;
1064
  flex-direction: column;
1065
  white-space: pre;
1066
  font-weight: normal;
1067
  box-shadow: 0 0 0;
1068
  transition: var(--animation-duration-2x);
1069
}
1070
.popup:has(.qr--transferModal) .qr--copy:after {
1071
  content: 'Copy';
1072
  height: 0;
1073
  overflow: hidden;
1074
  font-weight: bold;
1075
}
1076
.popup:has(.qr--transferModal):has(.qr--transferSelect:focus) .popup-button-ok {
1077
  font-weight: bold;
1078
  box-shadow: 0 0 10px;
1079
}
1080
.popup:has(.qr--transferModal):has(.qr--transferSelect:focus).qr--isCopy .popup-button-ok {
1081
  font-weight: normal;
1082
  box-shadow: 0 0 0;
1083
}
1084
.popup:has(.qr--transferModal):has(.qr--transferSelect:focus).qr--isCopy .qr--copy {
1085
  font-weight: bold;
1086
  box-shadow: 0 0 10px;
1087
}