profoundjs 7.22.0 → 7.22.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/htdocs/profoundui/proddata/js/atrium.js +1 -1
  2. package/htdocs/profoundui/proddata/js/designer.js +1087 -1087
  3. package/htdocs/profoundui/proddata/js/genie.js +568 -568
  4. package/htdocs/profoundui/proddata/js/runtime.js +406 -406
  5. package/package.json +1 -1
  6. package/profound.jse +1 -1
  7. package/setup/pjsdist.savf +0 -0
  8. package/htdocs/profoundui/proddata/css/plogic.css +0 -4976
  9. package/htdocs/profoundui/proddata/fonts/gudea-v10-latin-700.eot +0 -0
  10. package/htdocs/profoundui/proddata/fonts/gudea-v10-latin-700.svg +0 -276
  11. package/htdocs/profoundui/proddata/fonts/gudea-v10-latin-700.ttf +0 -0
  12. package/htdocs/profoundui/proddata/fonts/gudea-v10-latin-700.woff +0 -0
  13. package/htdocs/profoundui/proddata/fonts/gudea-v10-latin-700.woff2 +0 -0
  14. package/htdocs/profoundui/proddata/fonts/gudea-v10-latin-italic.eot +0 -0
  15. package/htdocs/profoundui/proddata/fonts/gudea-v10-latin-italic.svg +0 -301
  16. package/htdocs/profoundui/proddata/fonts/gudea-v10-latin-italic.ttf +0 -0
  17. package/htdocs/profoundui/proddata/fonts/gudea-v10-latin-italic.woff +0 -0
  18. package/htdocs/profoundui/proddata/fonts/gudea-v10-latin-italic.woff2 +0 -0
  19. package/htdocs/profoundui/proddata/fonts/gudea-v10-latin-regular.eot +0 -0
  20. package/htdocs/profoundui/proddata/fonts/gudea-v10-latin-regular.svg +0 -281
  21. package/htdocs/profoundui/proddata/fonts/gudea-v10-latin-regular.ttf +0 -0
  22. package/htdocs/profoundui/proddata/fonts/gudea-v10-latin-regular.woff +0 -0
  23. package/htdocs/profoundui/proddata/fonts/gudea-v10-latin-regular.woff2 +0 -0
  24. package/htdocs/profoundui/proddata/fonts/material_icons.woff2 +0 -0
  25. package/htdocs/profoundui/proddata/js/plogic.grids.js +0 -326
@@ -1,4976 +0,0 @@
1
- /* -------------------------------------------------------------------------- */
2
- /* -- Font Definitions and Classes ------------------------------------------ */
3
- /* -------------------------------------------------------------------------- */
4
-
5
- /* -- Regular -- Material Icon Font Face ------------------------------------ */
6
- @font-face {
7
- font-family: "Material Icons";
8
- font-style: normal;
9
- font-weight: 400;
10
- src: url("../fonts/material_icons.woff2") format("woff2");
11
- }
12
-
13
- /* -- Icons -- Material Icon Font Class ------------------------------------- */
14
- .pui-material-icons,
15
- .genie-form--screen .pui-material-icons {
16
- font-family: "Material Icons";
17
- font-weight: normal;
18
- font-style: normal;
19
- font-size: 1.5rem;
20
- line-height: 1;
21
- letter-spacing: normal;
22
- text-transform: none;
23
- display: inline-block;
24
- white-space: nowrap;
25
- word-wrap: normal;
26
- direction: ltr;
27
- -webkit-font-feature-settings: "liga";
28
- font-feature-settings: "liga";
29
- -moz-font-feature-settings: "liga";
30
- }
31
-
32
- /* -- Icons + Outlined -- Material Icon Font Face --------------------------- */
33
- @font-face {
34
- font-family: "Material Icons Outlined";
35
- font-style: normal;
36
- font-weight: 400;
37
- src: url("../fonts/material_icons_outlined.woff2") format("woff2");
38
- }
39
-
40
- /* -- Icons + Outlined -- Material Icon Font Class -------------------------- */
41
- span.pui-material-icons--outlined,
42
- .pui-material-icons--outlined,
43
- .genie-form--screen .pui-material-icons--outlined {
44
- font-family: "Material Icons Outlined";
45
- font-weight: normal;
46
- font-style: normal;
47
- font-size: 1.5rem;
48
- line-height: 1;
49
- letter-spacing: normal;
50
- text-transform: none;
51
- display: inline-block;
52
- white-space: nowrap;
53
- word-wrap: normal;
54
- direction: ltr;
55
- -webkit-font-feature-settings: "liga";
56
- font-feature-settings: "liga";
57
- -moz-font-feature-settings: "liga";
58
- }
59
-
60
- /* -- Icons + Round -- Material Icon Font Face ------------------------------ */
61
- @font-face {
62
- font-family: "Material Icons Round";
63
- font-style: normal;
64
- font-weight: 400;
65
- src: url("../fonts/material_icons_round.woff2") format("woff2");
66
- }
67
-
68
- /* -- Icons + Round -- Material Icon Font Class ----------------------------- */
69
- span.pui-material-icons--round,
70
- .pui-material-icons--round,
71
- .genie-form--screen .pui-material-icons--round {
72
- font-family: "Material Icons Round";
73
- font-weight: normal;
74
- font-style: normal;
75
- font-size: 1.5rem;
76
- line-height: 1;
77
- letter-spacing: normal;
78
- text-transform: none;
79
- display: inline-block;
80
- white-space: nowrap;
81
- word-wrap: normal;
82
- direction: ltr;
83
- -webkit-font-feature-settings: "liga";
84
- font-feature-settings: "liga";
85
- -moz-font-feature-settings: "liga";
86
- }
87
-
88
- /* -- Icons + Two Tone -- Material Icon Font Face --------------------------- */
89
- @font-face {
90
- font-family: "Material Icons Two Tone";
91
- font-style: normal;
92
- font-weight: 400;
93
- src: url("../fonts/material_icons_two_tones.woff2") format("woff2");
94
- }
95
-
96
- /* -- Icons + Two Tone -- Material Icon Font Class -------------------------- */
97
- span.pui-material-icons--two-tone,
98
- .pui-material-icons--two-tone,
99
- .genie-form--screen .pui-material-icons--two-tone {
100
- font-family: "Material Icons Two Tone";
101
- font-weight: normal;
102
- font-style: normal;
103
- font-size: 1.5rem;
104
- line-height: 1;
105
- letter-spacing: normal;
106
- text-transform: none;
107
- display: inline-block;
108
- white-space: nowrap;
109
- word-wrap: normal;
110
- direction: ltr;
111
- -webkit-font-feature-settings: "liga";
112
- font-feature-settings: "liga";
113
- -moz-font-feature-settings: "liga";
114
- }
115
-
116
- /* -- Icons + Sharp -- Material Icon Font Face ------------------------------ */
117
- @font-face {
118
- font-family: "Material Icons Sharp";
119
- font-style: normal;
120
- font-weight: 400;
121
- src: url("../fonts/material_icons_sharp.woff2") format("woff2");
122
- }
123
-
124
- /* -- Icons + Sharp -- Material Icon Font Class ----------------------------- */
125
- span.pui-material-icons--sharp,
126
- .pui-material-icons--sharp,
127
- .genie-form--screen .pui-material-icons--sharp {
128
- font-family: "Material Icons Sharp";
129
- font-weight: normal;
130
- font-style: normal;
131
- font-size: 1.5rem;
132
- line-height: 1;
133
- letter-spacing: normal;
134
- text-transform: none;
135
- display: inline-block;
136
- white-space: nowrap;
137
- word-wrap: normal;
138
- direction: ltr;
139
- -webkit-font-feature-settings: "liga";
140
- font-feature-settings: "liga";
141
- -moz-font-feature-settings: "liga";
142
- }
143
-
144
- /* arimo-regular - latin */
145
- @font-face {
146
- font-family: "Arimo";
147
- font-style: normal;
148
- font-weight: 400;
149
- src: url("../fonts/arimo-v16-latin-regular.eot");
150
- /* IE9 Compat Modes */
151
- src: local(""), url("../fonts/arimo-v16-latin-regular.eot?#iefix") format("embedded-opentype"),
152
- /* IE6-IE8 */ url("../fonts/arimo-v16-latin-regular.woff2") format("woff2"),
153
- /* Super Modern Browsers */ url("../fonts/arimo-v16-latin-regular.woff") format("woff"),
154
- /* Modern Browsers */ url("../fonts/arimo-v16-latin-regular.ttf") format("truetype"),
155
- /* Safari, Android, iOS */ url("../fonts/arimo-v16-latin-regular.svg#Arimo") format("svg");
156
- /* Legacy iOS */
157
- }
158
-
159
- /* arimo-500 - latin */
160
- @font-face {
161
- font-family: "Arimo";
162
- font-style: normal;
163
- font-weight: 500;
164
- src: url("../fonts/arimo-v16-latin-500.eot");
165
- /* IE9 Compat Modes */
166
- src: local(""), url("../fonts/arimo-v16-latin-500.eot?#iefix") format("embedded-opentype"),
167
- /* IE6-IE8 */ url("../fonts/arimo-v16-latin-500.woff2") format("woff2"),
168
- /* Super Modern Browsers */ url("../fonts/arimo-v16-latin-500.woff") format("woff"),
169
- /* Modern Browsers */ url("../fonts/arimo-v16-latin-500.ttf") format("truetype"),
170
- /* Safari, Android, iOS */ url("../fonts/arimo-v16-latin-500.svg#Arimo") format("svg");
171
- /* Legacy iOS */
172
- }
173
-
174
- /* arimo-600 - latin */
175
- @font-face {
176
- font-family: "Arimo";
177
- font-style: normal;
178
- font-weight: 600;
179
- src: url("../fonts/arimo-v16-latin-600.eot");
180
- /* IE9 Compat Modes */
181
- src: local(""), url("../fonts/arimo-v16-latin-600.eot?#iefix") format("embedded-opentype"),
182
- /* IE6-IE8 */ url("../fonts/arimo-v16-latin-600.woff2") format("woff2"),
183
- /* Super Modern Browsers */ url("../fonts/arimo-v16-latin-600.woff") format("woff"),
184
- /* Modern Browsers */ url("../fonts/arimo-v16-latin-600.ttf") format("truetype"),
185
- /* Safari, Android, iOS */ url("../fonts/arimo-v16-latin-600.svg#Arimo") format("svg");
186
- /* Legacy iOS */
187
- }
188
-
189
- /* arimo-italic - latin */
190
- @font-face {
191
- font-family: "Arimo";
192
- font-style: italic;
193
- font-weight: 400;
194
- src: url("../fonts/arimo-v16-latin-italic.eot");
195
- /* IE9 Compat Modes */
196
- src: local(""), url("../fonts/arimo-v16-latin-italic.eot?#iefix") format("embedded-opentype"),
197
- /* IE6-IE8 */ url("../fonts/arimo-v16-latin-italic.woff2") format("woff2"),
198
- /* Super Modern Browsers */ url("../fonts/arimo-v16-latin-italic.woff") format("woff"),
199
- /* Modern Browsers */ url("../fonts/arimo-v16-latin-italic.ttf") format("truetype"),
200
- /* Safari, Android, iOS */ url("../fonts/arimo-v16-latin-italic.svg#Arimo") format("svg");
201
- /* Legacy iOS */
202
- }
203
-
204
- /* arimo-700 - latin */
205
- @font-face {
206
- font-family: "Arimo";
207
- font-style: normal;
208
- font-weight: 700;
209
- src: url("../fonts/arimo-v16-latin-700.eot");
210
- /* IE9 Compat Modes */
211
- src: local(""), url("../fonts/arimo-v16-latin-700.eot?#iefix") format("embedded-opentype"),
212
- /* IE6-IE8 */ url("../fonts/arimo-v16-latin-700.woff2") format("woff2"),
213
- /* Super Modern Browsers */ url("../fonts/arimo-v16-latin-700.woff") format("woff"),
214
- /* Modern Browsers */ url("../fonts/arimo-v16-latin-700.ttf") format("truetype"),
215
- /* Safari, Android, iOS */ url("../fonts/arimo-v16-latin-700.svg#Arimo") format("svg");
216
- /* Legacy iOS */
217
- }
218
-
219
- /* arimo-500italic - latin */
220
- @font-face {
221
- font-family: "Arimo";
222
- font-style: italic;
223
- font-weight: 500;
224
- src: url("../fonts/arimo-v16-latin-500italic.eot");
225
- /* IE9 Compat Modes */
226
- src: local(""), url("../fonts/arimo-v16-latin-500italic.eot?#iefix") format("embedded-opentype"),
227
- /* IE6-IE8 */ url("../fonts/arimo-v16-latin-500italic.woff2") format("woff2"),
228
- /* Super Modern Browsers */ url("../fonts/arimo-v16-latin-500italic.woff") format("woff"),
229
- /* Modern Browsers */ url("../fonts/arimo-v16-latin-500italic.ttf") format("truetype"),
230
- /* Safari, Android, iOS */ url("../fonts/arimo-v16-latin-500italic.svg#Arimo") format("svg");
231
- /* Legacy iOS */
232
- }
233
-
234
- /* arimo-600italic - latin */
235
- @font-face {
236
- font-family: "Arimo";
237
- font-style: italic;
238
- font-weight: 600;
239
- src: url("../fonts/arimo-v16-latin-600italic.eot");
240
- /* IE9 Compat Modes */
241
- src: local(""), url("../fonts/arimo-v16-latin-600italic.eot?#iefix") format("embedded-opentype"),
242
- /* IE6-IE8 */ url("../fonts/arimo-v16-latin-600italic.woff2") format("woff2"),
243
- /* Super Modern Browsers */ url("../fonts/arimo-v16-latin-600italic.woff") format("woff"),
244
- /* Modern Browsers */ url("../fonts/arimo-v16-latin-600italic.ttf") format("truetype"),
245
- /* Safari, Android, iOS */ url("../fonts/arimo-v16-latin-600italic.svg#Arimo") format("svg");
246
- /* Legacy iOS */
247
- }
248
-
249
- /* arimo-700italic - latin */
250
- @font-face {
251
- font-family: "Arimo";
252
- font-style: italic;
253
- font-weight: 700;
254
- src: url("../fonts/arimo-v16-latin-700italic.eot");
255
- /* IE9 Compat Modes */
256
- src: local(""), url("../fonts/arimo-v16-latin-700italic.eot?#iefix") format("embedded-opentype"),
257
- /* IE6-IE8 */ url("../fonts/arimo-v16-latin-700italic.woff2") format("woff2"),
258
- /* Super Modern Browsers */ url("../fonts/arimo-v16-latin-700italic.woff") format("woff"),
259
- /* Modern Browsers */ url("../fonts/arimo-v16-latin-700italic.ttf") format("truetype"),
260
- /* Safari, Android, iOS */ url("../fonts/arimo-v16-latin-700italic.svg#Arimo") format("svg");
261
- /* Legacy iOS */
262
- }
263
-
264
- /* gudea-regular - latin */
265
- @font-face {
266
- font-family: "Gudea";
267
- font-style: normal;
268
- font-weight: 400;
269
- src: url("../fonts/gudea-v10-latin-regular.eot");
270
- /* IE9 Compat Modes */
271
- src: local(""), url("../fonts/gudea-v10-latin-regular.eot?#iefix") format("embedded-opentype"),
272
- /* IE6-IE8 */ url("../fonts/gudea-v10-latin-regular.woff2") format("woff2"),
273
- /* Super Modern Browsers */ url("../fonts/gudea-v10-latin-regular.woff") format("woff"),
274
- /* Modern Browsers */ url("../fonts/gudea-v10-latin-regular.ttf") format("truetype"),
275
- /* Safari, Android, iOS */ url("../fonts/gudea-v10-latin-regular.svg#Gudea") format("svg");
276
- /* Legacy iOS */
277
- }
278
-
279
- /* gudea-italic - latin */
280
- @font-face {
281
- font-family: "Gudea";
282
- font-style: italic;
283
- font-weight: 400;
284
- src: url("../fonts/gudea-v10-latin-italic.eot");
285
- /* IE9 Compat Modes */
286
- src: local(""), url("../fonts/gudea-v10-latin-italic.eot?#iefix") format("embedded-opentype"),
287
- /* IE6-IE8 */ url("../fonts/gudea-v10-latin-italic.woff2") format("woff2"),
288
- /* Super Modern Browsers */ url("../fonts/gudea-v10-latin-italic.woff") format("woff"),
289
- /* Modern Browsers */ url("../fonts/gudea-v10-latin-italic.ttf") format("truetype"),
290
- /* Safari, Android, iOS */ url("../fonts/gudea-v10-latin-italic.svg#Gudea") format("svg");
291
- /* Legacy iOS */
292
- }
293
-
294
- /* gudea-700 - latin */
295
- @font-face {
296
- font-family: "Gudea";
297
- font-style: normal;
298
- font-weight: 700;
299
- src: url("../fonts/gudea-v10-latin-700.eot");
300
- /* IE9 Compat Modes */
301
- src: local(""), url("../fonts/gudea-v10-latin-700.eot?#iefix") format("embedded-opentype"),
302
- /* IE6-IE8 */ url("../fonts/gudea-v10-latin-700.woff2") format("woff2"),
303
- /* Super Modern Browsers */ url("../fonts/gudea-v10-latin-700.woff") format("woff"),
304
- /* Modern Browsers */ url("../fonts/gudea-v10-latin-700.ttf") format("truetype"),
305
- /* Safari, Android, iOS */ url("../fonts/gudea-v10-latin-700.svg#Gudea") format("svg");
306
- /* Legacy iOS */
307
- }
308
-
309
- /* share-tech-mono-regular - latin */
310
- @font-face {
311
- font-family: "Share Tech Mono";
312
- font-style: normal;
313
- font-weight: 400;
314
- src: url("../fonts/share-tech-mono-v10-latin-regular.eot");
315
- /* IE9 Compat Modes */
316
- src: local(""), url("../fonts/share-tech-mono-v10-latin-regular.eot?#iefix") format("embedded-opentype"),
317
- /* IE6-IE8 */ url("../fonts/share-tech-mono-v10-latin-regular.woff2") format("woff2"),
318
- /* Super Modern Browsers */ url("../fonts/share-tech-mono-v10-latin-regular.woff") format("woff"),
319
- /* Modern Browsers */ url("../fonts/share-tech-mono-v10-latin-regular.ttf") format("truetype"),
320
- /* Safari, Android, iOS */ url("../fonts/share-tech-mono-v10-latin-regular.svg#ShareTechMono") format("svg");
321
- /* Legacy iOS */
322
- }
323
-
324
- /* -------------------------------------------------------------------------- */
325
- /* -- End -- Font Definitions and Classes ----------------------------------- */
326
- /* -------------------------------------------------------------------------- */
327
-
328
- :root {
329
- --color--primary: #0099cc;
330
- --color--primary-10: #0099cc1a;
331
- --color--primary-20: #0099cc33;
332
- --color--primary-40: #0099cc66;
333
- --color--primary-50: #0099cc80;
334
- --color--primary-90: #0099cce6;
335
- --color--primary--text: #ffffff;
336
- --color--primary--hover: #0086b3;
337
- --color--primary--light: #91d0ed;
338
- --color--primary--light-10: #91d0ed1a;
339
- --color--primary--light-20: #91d0ed33;
340
- --color--primary--light-40: #91d0ed66;
341
- --color--primary--light-50: #91d0ed80;
342
- --color--primary--light--hover: #65bde6;
343
- --color--primary--light--text: #212121;
344
- --color--primary--dark: #007399;
345
- --color--primary--dark-10: #0073991a;
346
- --color--primary--dark-20: #00739933;
347
- --color--primary--dark-40: #00739966;
348
- --color--primary--dark-50: #00739980;
349
- --color--primary--dark--hover: #006080;
350
-
351
- --color--secondary: #a6a6a6;
352
- --color--secondary--text: #ffffff;
353
- --color--secondary--hover: #999999;
354
- --color--secondary-10: #a6a6a61a;
355
- --color--secondary-20: #a6a6a633;
356
- --color--secondary-40: #a6a6a666;
357
- --color--secondary-50: #a6a6a680;
358
- --color--secondary--dark: #8c8c8c;
359
- --color--secondary--dark--hover: #737373;
360
- --color--secondary--dark--text: #ffffff;
361
-
362
- --color--tertiary: #ffffff;
363
- --color--tertiary--text: var(--color--dark);
364
- --color--tertiary--hover: #f2f2f2;
365
- --color--tertiary-10: #ffffff1a;
366
- --color--tertiary-20: #ffffff33;
367
- --color--tertiary-40: #ffffff66;
368
- --color--tertiary--dark: #e6e6e6;
369
- --color--tertiary--dark--hover: #d9d9d9;
370
- --color--tertiary--dark--text: var(--color--dark);
371
-
372
- --color--excel: #107c41;
373
- --color--pdf: #b30b00;
374
- --color--powerpoint: #c43e1c;
375
- --color--word: #185abd;
376
-
377
- /* BS colors */
378
- --color--success: #198754;
379
-
380
- --color--info: #0bb8da;
381
-
382
- --color--warning: #ffc107;
383
- --color--warning--hover: #e6ac00;
384
-
385
- --color--danger: #da2525;
386
- --color--danger--hover: #ae1e1e;
387
-
388
- --color--light: #f8f9fa;
389
-
390
- --color--dark: #212529;
391
-
392
- --color--blue: #0d6efd;
393
-
394
- --color--indigo: #6610f2;
395
-
396
- --color--purple: #6f42c1;
397
-
398
- --color--pink: #ff66ff;
399
-
400
- --color--red: #dc3545;
401
-
402
- --color--orange: #fd7e14;
403
- --color--orange--hover: #e36802;
404
-
405
- --color--yellow: #ffc107;
406
- --color--yellow--hover: #e6ac00;
407
-
408
- --color--green: #198754;
409
-
410
- --color--teal: #20c997;
411
-
412
- --color--cyan: #0bb8da;
413
-
414
- --color--white: #fff;
415
-
416
- --color--gray: var(--color--secondary--dark);
417
-
418
- --color--gray-dark: #343a40;
419
-
420
- --color--brown: #8f5600;
421
-
422
- --color--navy: #00458a;
423
- /* End of BS colors */
424
-
425
- --color--accent: #a6a6a6;
426
- --color--accent--text: #ffffff;
427
- --color--hover--text: #fb78fe;
428
- --color--visited--text: #00529b;
429
- --color--active--text: #d8000c;
430
- --color--disabled--text: #555555;
431
- --color--disabled--background: #b6b6b6;
432
- --color--header: #212121;
433
- --color--header--alt: #0099cc;
434
- --color--input: #212121;
435
- --color--label: #0099cc;
436
- --color--title: #212121;
437
- --color--subtitle: #333333;
438
- --color--affirmative--dark: #4f8a10;
439
- --color--affirmative--dark--hover: #5d9323;
440
- --color--affirmative--light: #dff2bf;
441
- --color--dropbox--background: #c7c7c763;
442
- --color--dropbox--background--drag-over: #dff2bf56;
443
- --color--negative--dark: #d8000c;
444
- --color--negative--dark--hover: #db141f;
445
- --color--negative--light: #ffd2d2;
446
- --color--warning--dark: #e1ad01;
447
- --color--warning--dark--hover: #e3b315;
448
- /* --color--warning--light : #ffd2d2; */
449
- --color--alert--dark: #fda50f;
450
- --color--alert--dark--hover: #fdac22;
451
- --color--alert--light: #feefb3;
452
- --color--poppy--dark--hover: #fb78fe;
453
- --color--poppy--hover: #f399ff;
454
- --color--poppy--light: #f399ff;
455
- --color--poppy--dark: #fb83fe;
456
- --color--info--dark: #00529b;
457
- --color--info--dark--hover: #1460a3;
458
- --color--info--light: #ffffff;
459
- --color--divider--50: #00000040;
460
- --color--divider: #b6b6b6;
461
- --color--body--background: #f5f5f7;
462
- --color--cellodd--background: #f9f9f9;
463
- --color--panel--header: #00529b;
464
- --color--panel--background: #ffffff;
465
- --color--input--background: #ffffff;
466
- --color--content--background: #fafafa;
467
- --color--text--background: transparent;
468
- --color--tool-tip--background: #f2f2f3;
469
- --color--tool-tip--text: #ffffff;
470
- --color--card--background: #f5f5f7;
471
- --color--card--text: #343434;
472
- --color--grid-cell--hover: #ddd;
473
- --color--grid-border: #f6f6f6;
474
- --color--scroll-bar--track: #f9f9f9;
475
- --color--darken--1e: #0000001e;
476
- --color--lighten--80: #ffffff80;
477
- --color--button--primary--text: var(--color--white);
478
- --color--button--primary--background: var(--color--primary);
479
- --color--button--primary--hover: var(--color--primary--hover) radial-gradient(circle, transparent 1%, var(--color--primary--hover) 1%) center/15000%;
480
- --color--button--primary--active: var(--color--button--primary--background);
481
- --color--button--secondary--text: var(--color--primary--text);
482
- --color--button--secondary--background: var(--color--secondary--dark);
483
- --color--button--secondary--hover: var(--color--secondary--dark--hover) radial-gradient(circle, transparent 1%, var(--color--secondary--dark--hover) 1%) center/15000%;
484
- --color--button--secondary--active: var(--color--button--secondary--background);
485
- --color--button--tertiary--text: var(--color--tertiary--text);
486
- --color--button--tertiary--background: var(--color--tertiary);
487
- --color--button--tertiary--hover: var(--color--tertiary--hover) radial-gradient(circle, transparent 1%, var(--color--tertiary--hover) 1%) center/15000%;
488
- --color--button--tertiary--active: var(--color--button--tertiary--background);
489
- --color--button--danger--text: var(--color--white);
490
- --color--button--danger--background: var(--color--danger);
491
- --color--button--danger--hover: var(--color--danger--hover) radial-gradient(circle, transparent 1%, var(--color--danger--hover) 1%) center/15000%;
492
- --color--button--danger--active: var(--color--button--danger--background);
493
- --color--button--info--text: var(--color--white);
494
- --color--button--info--background: var(--color--info);
495
- --color--button--info--hover: var(--color--info--hover) radial-gradient(circle, transparent 1%, var(--color--info--hover) 1%) center/15000%;
496
- --color--button--info--active: var(--color--button--info--background);
497
- --color--button--success--text: var(--color--white);
498
- --color--button--success--background: var(--color--success);
499
- --color--button--success--hover: var(--color--success--hover) radial-gradient(circle, transparent 1%, var(--color--success--hover) 1%) center/15000%;
500
- --color--button--success--active: var(--color--button--success--background);
501
- --color--button--warning--text: var(--color--white);
502
- --color--button--warning--background: var(--color--warning);
503
- --color--button--warning--hover: var(--color--warning--hover) radial-gradient(circle, transparent 1%, var(--color--warning--hover) 1%) center/15000%;
504
- --color--button--warning--active: var(--color--button--warning--background);
505
- --color--button--orange--text: var(--color--white);
506
- --color--button--orange--background: var(--color--orange);
507
- --color--button--orange--hover: var(--color--orange--hover) radial-gradient(circle, transparent 1%, var(--color--orange--hover) 1%) center/15000%;
508
- --color--button--orange--active: var(--color--button--orange--background);
509
- --color--button--outlined--text: var(--color--primary--light--text);
510
- --color--button--outlined--background: transparent;
511
- --color--button--outlined--hover: var(--default--button--background--hover) radial-gradient(circle, transparent 1%, var(--default--button--background--hover) 1%) center/15000%;
512
- --color--button--outlined--active: var(--color--button--outlined--background);
513
- --color--button--text-only--text: var(--color--primary--light--text);
514
- --color--button--text-only--background: transparent;
515
- --color--button--text-only--hover: var(--default--button--background--hover) radial-gradient(circle, transparent 1%, var(--default--button--background--hover) 1%) center/15000%;
516
- --color--button--text-only--active: var(--color--button--text-only--background);
517
-
518
- --sidebar--width: 54px;
519
- --menu--width: 200px;
520
-
521
- --default--sans-serif-family: "Gudea", arial, sans-serif;
522
- --default--monospace-family: monospace;
523
- --default--font-size: 1rem;
524
- --default--font-style: normal;
525
- --default--font-weight: 400;
526
- --default--spacing: normal;
527
- --default--white-space: pre-wrap;
528
- --default--outline: none;
529
- --default--border: none;
530
- --disabled--sans-serif-family: "Gudea", arial, sans-serif;
531
- --disabled--monospace-family: monospace;
532
- --disabled--font-size: 0.875rem;
533
- --disabled--font-style: italic;
534
- --disabled--font-weight: 400;
535
- --disabled--spacing: normal;
536
- --disabled--white-space: pre-wrap;
537
- --disabled--outline: none;
538
- --sans--h1--size: 2rem;
539
- --sans--h1--weight: 400;
540
- --sans--h1--style: normal;
541
- --sans--h1--spacing: 0.125rem;
542
- --sans--h1--family: "Arimo";
543
- --sans--h2--size: 1.5rem;
544
- --sans--h2--weight: 700;
545
- --sans--h2--spacing: normal;
546
- --sans--h2--style: normal;
547
- --sans--h2--family: "Gudea";
548
- --sans--h3--size: 1.125rem;
549
- --sans--h3--weight: 400;
550
- --sans--h3--style: normal;
551
- --sans--h3--spacing: 0.125rem;
552
- --sans--h3--family: "Arimo";
553
- --sans--h4--size: 1.125rem;
554
- --sans--h4--weight: 700;
555
- --sans--h4--style: normal;
556
- --sans--h4--spacing: normal;
557
- --sans--h4--family: "Gudea";
558
- --sans--p--size: 0.875rem;
559
- --sans--p--weight: 400;
560
- --sans--p--style: normal;
561
- --sans--p--spacing: normal;
562
- --sans--p--family: "Gudea";
563
- --sans--a--size: 0.875rem;
564
- --sans--a--weight: 700;
565
- --sans--a--style: normal;
566
- --sans--a--spacing: normal;
567
- --sans--a--family: "Gudea";
568
- --sans--a--size--hover: 0.875rem;
569
- --sans--a--weight--hover: 700;
570
- --sans--a--style--hover: normal;
571
- --sans--a--spacing--hover: normal;
572
- --sans--menu--a--size: 0.875rem;
573
- --sans--menu--a--weight: 700;
574
- --sans--menu--a--style: normal;
575
- --sans--menu--a--spacing: normal;
576
- --sans--menu--a--family: "Arimo";
577
- --sans--menu--a--size--hover: 0.875rem;
578
- --sans--menu--a--weight--hover: 700;
579
- --sans--menu--a--style--hover: normal;
580
- --sans--menu--a--spacing--hover: normal;
581
- --sans--menu--a--family--hover: "Arimo";
582
- --sans--button--size: 0.875rem;
583
- --sans--button--weight: 700;
584
- --sans--button--style: normal;
585
- --sans--button--spacing: normal;
586
- --sans--button--family: "Arimo";
587
- --sans--button--size--hover: 0.875rem;
588
- --sans--button--weight--hover: 700;
589
- --sans--button--style--hover: normal;
590
- --sans--button--spacing--hover: normal;
591
- --sans--button--family--hover: "Arimo";
592
- --sans--label--size: 0.875rem;
593
- --sans--label--weight: 400;
594
- --sans--label--style: normal;
595
- --sans--label--spacing: normal;
596
- --sans--label--family: "Arimo";
597
- --sans--input--size: 0.875rem;
598
- --sans--input--weight: 400;
599
- --sans--input--style: normal;
600
- --sans--input--spacing: normal;
601
- --sans--input--family: "Gudea";
602
- --general--all--transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
603
- --default--button--height: 2.25rem;
604
- --default--button--padding: 9px 12px;
605
- --default--button--weight: 500;
606
- --default--button--border: none;
607
- --default--button--border--outlined: 1px solid var(--color--accent);
608
- --default--button--border-radius: 0.25rem;
609
- --default--button--background: transparent;
610
- --default--button--background--hover: #c7c7c7aa;
611
- --default--button--icon--font-size: 1.375rem;
612
- --default--button--font-size: 0.875rem;
613
- --default--button--text-align: center;
614
- --default--button--overflow: hidden;
615
- --default--button--text-overflow: ellipsis;
616
- --default--button--white-space: nowrap;
617
- --default--button--elevation: var(--elevation-dp0);
618
- --default--button--elevation--solid: var(--elevation-dp3);
619
- --default--button--elevation--solid--hover: var(--elevation-dp7);
620
- --default--button--elevation--solid--active: var(--elevation-dp12);
621
- --elevation--transition: box-shadow 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
622
- --elevation-dp0: none;
623
- --elevation-dp1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
624
- --elevation-dp2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
625
- --elevation-dp3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
626
- --elevation-dp4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
627
- --elevation-dp5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
628
- --elevation-dp6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
629
- --elevation-dp7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
630
- --elevation-dp8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
631
- --elevation-dp9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
632
- --elevation-dp10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
633
- --elevation-dp11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
634
- --elevation-dp12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
635
- --elevation-dp13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
636
- --elevation-dp14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
637
- --elevation-dp15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
638
- --elevation-dp16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
639
- --elevation-dp17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
640
- --elevation-dp18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
641
- --elevation-dp19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
642
- --elevation-dp20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
643
- --elevation-dp21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
644
- --elevation-dp22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
645
- --elevation-dp23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
646
- --elevation-dp24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
647
- --standard--input--focus-ring: 0 0 0 0.3rem var(--color--primary-20);
648
- --standard--height: 2.25rem;
649
- --incell--standard--height: 1.5rem;
650
- --grid--row--height: 33px;
651
- --standard--input--height: 2.25rem;
652
- --standard--option--height: 2.125rem;
653
- --tab-panel--header--height: 3rem;
654
- --default--box-sizing: border-box;
655
- --default--border-radius: 7px;
656
- --mobile--input--focus-ring: 0 0 0 0.2rem var(--color--primary-20);
657
- --mobile--standard--height: 1.375rem;
658
- --incell--mobile--height: 1.375rem;
659
- --mobile--top-bar--height: 2rem;
660
- --mobile--bottom-bar--height: 2.2rem;
661
- --mobile--input--height: 1.375rem;
662
- --mobile--grid--row--height: 1.375rem;
663
- --mobile--font-size: 0.9rem;
664
-
665
- /* ------------------------------------------------------------------------ */
666
- /* -- Screen Customizations ----------------------------------------------- */
667
- /* ------------------------------------------------------------------------ */
668
- --screen-width: 80;
669
- --screen-height: 24;
670
- --column-width: 9px;
671
- --menu-max-width: 400px;
672
- --empty-elements--display: none;
673
- --sign-on--show-user: visible;
674
- --sign-on--show-pass: visible;
675
- --sign-on--show-prog: none;
676
- --sign-on--show-menu: none;
677
- --sign-on--show-clib: none;
678
- /* ------------------------------------------------------------------------ */
679
- /* -- Logo Customizations ------------------------------------------------- */
680
- /* ------------------------------------------------------------------------ */
681
- /* -- Sign On Screen Logo ------------------------------------------------- */
682
- --logo-sign-on-url: url("images/logo_white.png");
683
- --logo-sign-on-height: 4rem;
684
- --logo-sign-on-width: auto;
685
- --logo-sign-on-max-height: 10vh;
686
- --logo-sign-on-min-height: 1vh;
687
- --logo-sign-on-max-width: auto;
688
- --logo-sign-on-min-width: auto;
689
- --logo-sign-on-repeat: no-repeat;
690
- --logo-sign-on-fill: contain;
691
- --logo-sign-on-padding: 0;
692
- --logo-sign-on-position: relative;
693
- --logo-sign-on-left: unset;
694
- --logo-sign-on-right: unset;
695
- --logo-sign-on-0-0: center;
696
- --logo-sign-on-display: block;
697
- /* -- General Screen Logo ------------------------------------------------- */
698
- --logo-url: url("images/logo_color.png");
699
- --logo-height: 4rem;
700
- --logo-width: auto;
701
- --logo-max-height: 10vh;
702
- --logo-min-height: 1vh;
703
- --logo-max-width: auto;
704
- --logo-min-width: auto;
705
- --logo-repeat: no-repeat;
706
- --logo-fill: contain;
707
- --logo-padding: 0;
708
- --logo-position: relative;
709
- --logo-left: unset;
710
- --logo-right: unset;
711
- --logo-0-0: center;
712
- --logo-sign-on-display: block;
713
- /* ------------------------------------------------------------------------ */
714
- /* -- Color Customizations ------------------------------------------------ */
715
- /* ------------------------------------------------------------------------ */
716
- /* ---- Primary Color ----------------------------------------------------- */
717
- --color--primary--dark--text: #ffffff;
718
- /* ---- Secondary Color --------------------------------------------------- */
719
- /* ---- Text Colors ------------------------------------------------------- */
720
- --color--text--primary: #212121;
721
- --color--text--primary--alt: #009be3;
722
- --color--text--secondary: #727272;
723
- --color--text--success: #4f8a10;
724
- --color--text--failure: #d8000c;
725
- --color--text--warning: #e1ad01;
726
- --color--text--alert: #fda50f;
727
- --color--text--poppy: #fb78fe;
728
- --color--text--info: #00529b;
729
- --color--text--disabled: #555555;
730
- --color--text--inverse: #ffffff;
731
- /* ---- General Colors ---------------------------------------------------- */
732
- --color--background--highlight: #f5f5f5;
733
- --color--background--disabled: #d4d4d4;
734
- --color--background--success: #dff2bf;
735
- --color--background--failure: #ffd2d2;
736
- --color--background--warning: #ffd2d2;
737
- --color--background--alert: #feefb3;
738
- --color--background--info: #bde5f8;
739
- --color--tool-tip--text: #ffffff;
740
- --color--side-bar-background: #009be3;
741
- --color--side-bar-text: white;
742
- --color--side-menu-background: #009be3;
743
- --color--side-menu-text: white;
744
- --color--window--background: #ffffff;
745
- --color--dropdown--background: #ffffff;
746
- --color--card--background: #f5f5f7;
747
- --color--card--background--alt: #7eb5e7;
748
- /* ------------------------------------------------------------------------ */
749
- /* -- Animation Customizations -------------------------------------------- */
750
- /* ------------------------------------------------------------------------ */
751
- --general--height--transition: height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
752
- /* ------------------------------------------------------------------------ */
753
- /* -- Border Customizations ----------------------------------------------- */
754
- /* ------------------------------------------------------------------------ */
755
- /* --default--button--border: none; */
756
- /* ------------------------------------------------------------------------ */
757
- }
758
-
759
-
760
- * {
761
- outline: none;
762
- padding: 0;
763
- margin: 0;
764
- }
765
-
766
- html {
767
- height: 100vh;
768
- width: 100vw;
769
- }
770
-
771
- body,
772
- #pui {
773
- height: 100%;
774
- width: 100%;
775
- background: var(--color--body--background);
776
- overflow: hidden;
777
- }
778
-
779
- body {
780
- font-family: var(--default--sans-serif-family);
781
- font-size: var(--default--font-size);
782
- color: var(--color--text--primary);
783
- background: var(--color--body--background);
784
- margin: 0;
785
- padding: 0;
786
- }
787
-
788
- body.monoSpace,
789
- body.monospace {
790
- font-family: var(--default--monospace-family);
791
- font-size: var(--default--font-size);
792
- }
793
-
794
- /* Copy Mode */
795
- .copyMode-result {
796
- position: absolute;
797
- left: 50vw;
798
- top: 50vh;
799
- width: 160px;
800
- height: 60px;
801
- background-color: white;
802
- border: 1px solid #ccc;
803
- border-radius: 10px;
804
- box-shadow: var(--elevation-dp4);
805
- transform: translateX(-50%) translateY(-50%);
806
- z-index: 10000001;
807
- }
808
- .copyMode-result-title {
809
- position: absolute;
810
- top: 0px;
811
- color: var(--color--success);
812
- font-family: Gudea;
813
- font-size: 20px;
814
- font-weight: bold;
815
- text-align: center;
816
- width: 100%;
817
- line-height: 60px;
818
- height: 60px;
819
- }
820
-
821
- #copyModeSelectionRectangle {
822
- position: absolute;
823
- border: 2px dashed var(--color--primary--dark--hover);
824
- background-color: var(--color--primary);
825
- opacity: 0.2;
826
- pointer-events: none;
827
- }
828
-
829
- #copyModeMask {
830
- left: 0px;
831
- top: 0px;
832
- height: 100%;
833
- width: 100%;
834
- background: var(--color--success);
835
- opacity: 0.1;
836
- z-index: 10000000;
837
- display: none;
838
- }
839
-
840
- .copyMode-selected-element {
841
- color: var(--color--success) !important;
842
- background: #7ee7b6 !important;
843
- box-shadow: 0 0 0 1px #3ddb92 !important;
844
- border-radius: 0.25rem !important;
845
- -webkit-transition: background 0s !important;
846
- -moz-transition: background 0s !important;
847
- -ms-transition: background 0s !important;
848
- -o-transition: background 0s !important;
849
- transition: background 0s !important;
850
- }
851
- span.copyMode-selected-element {
852
- border-radius: 0.5rem !important;
853
- }
854
-
855
- /* Genie */
856
- .genie--logo {
857
- position: relative;
858
- background: var(--logo-url);
859
- background-repeat: no-repeat;
860
- background-size: contain;
861
- height: 100%;
862
- width: 100%;
863
- }
864
-
865
- .genie-logobanner {
866
- position: relative;
867
- background-repeat: no-repeat;
868
- background-size: auto 50%;
869
- background-position: right center;
870
- padding: 1rem;
871
- height: 100%;
872
- width: 100%;
873
- grid-row: 1;
874
- grid-column: 1 / span 2;
875
- justify-self: flex-end;
876
- }
877
-
878
- .genie-logo-container {
879
- background-image: var(--logo-url);
880
- background-repeat: var(--logo-repeat);
881
- background-position: var(--logo-0-0);
882
- background-size: var(--logo-fill);
883
- width: var(--logo-width);
884
- max-width: var(--logo-max-width);
885
- min-width: var(--logo-min-width);
886
- position: var(--logo-position);
887
- height: var(--logo-height);
888
- padding: var(--logo-padding);
889
- right: var(--logo-right);
890
- }
891
-
892
- .genie-screen--body .genie-copyright {
893
- font-size: var(--sans--label--size);
894
- font-family: var(--sans--label--family);
895
- white-space: pre-wrap;
896
- text-align: center;
897
- height: auto;
898
- display: flex;
899
- align-items: center;
900
- justify-content: center;
901
- }
902
-
903
- .genie-screen--body .genie-copyright > .genie-i--copyright {
904
- font-size: var(--sans--label--size);
905
- display: inline;
906
- }
907
-
908
- /* Screen Container */
909
- .genie-main {
910
- height: 100vh;
911
- display: grid;
912
- grid-template-rows: 1fr;
913
- grid-auto-flow: row;
914
- grid-template-columns: auto 1fr;
915
- }
916
-
917
- .genie-container {
918
- z-index: 8;
919
- position: fixed; /* This allows Page Up/Down to work properly in TinyMCE with Chrome/Edge */
920
- height: 100%;
921
- width: calc(100% - (var(--sidebar--width)));
922
- grid-row-start: 1;
923
- grid-column: 2;
924
- display: grid;
925
- grid-template-columns: 1fr minmax(1fr, calc(var(--column-width) * var(--screen-width)));
926
- grid-template-rows: minmax(auto, 1fr) 9fr;
927
- overflow: overlay;
928
- margin-left: var(--sidebar--width);
929
- }
930
-
931
- .genie-form--screen {
932
- position: absolute;
933
- height: 100%;
934
- max-height: 100%;
935
- min-height: 400px;
936
- width: 100%;
937
- overflow: visible;
938
- }
939
-
940
- .genie-form--screen [class^="genie-window--"] {
941
- background: var(--color--window--background);
942
- box-shadow: var(--elevation-dp4);
943
- border-radius: 0.25rem;
944
- -webkit-border-radius: 0.25rem;
945
- -moz-border-radius: 0.25rem;
946
- -ms-border-radius: 0.25rem;
947
- -o-border-radius: 0.25rem;
948
- }
949
-
950
- .genie-form--screen .genie-window--title {
951
- left: 1rem;
952
- width: calc(100% - 2rem);
953
- text-align: center;
954
- font-weight: var(--sans--h4--weight);
955
- font-size: var(--sans--h4--size);
956
- color: var(--color--header--alt);
957
- font-family: var(--sans--h4--family);
958
- border-bottom: 1px solid var(--color--accent);
959
- }
960
-
961
- .genie-screen--body div[id="5250"] {
962
- width: min-content !important;
963
- min-width: calc(100vw - var(--sidebar--width));
964
- height: 100%;
965
- }
966
-
967
- .genie-wide-screen--body div[id="5250"] {
968
- width: min-content !important;
969
- min-width: calc(100vw - var(--sidebar--width));
970
- height: 100%;
971
- display: block;
972
- grid-row: 1 / span 2;
973
- grid-column: 1;
974
- }
975
-
976
- .genie-5250 {
977
- position: relative;
978
- left: 0px;
979
- overflow: initial;
980
- display: grid;
981
- grid-row: 1 / span 2;
982
- grid-column: 1 / span 2;
983
- transition: left 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
984
- }
985
- .genie-5250-offset {
986
- left: var(--menu--width);
987
- }
988
- /* End of Screen container */
989
-
990
- [class*="genie-"],
991
- [class*="genie-"] * {
992
- box-sizing: border-box;
993
- }
994
-
995
- /* -- Firefox specific */
996
- @supports (-moz-appearance:none) {
997
- .genie-container {
998
- overflow: auto;
999
- }
1000
- }
1001
-
1002
- .hide {
1003
- visibility: hidden;
1004
- }
1005
-
1006
- /**************************************************************/
1007
- /************************ COLORS ******************************/
1008
- /**************************************************************/
1009
-
1010
- /* color */
1011
- .color-primary-light {
1012
- color: var(--color--primary--light);
1013
- }
1014
- .color-primary {
1015
- color: var(--color--primary);
1016
- }
1017
- .color-primary-50 {
1018
- color: var(--color--primary-50);
1019
- }
1020
- .color-primary-dark {
1021
- color: var(--color--primary--dark);
1022
- }
1023
-
1024
- .color-secondary {
1025
- color: var(--color--secondary);
1026
- }
1027
- .color-secondary-50 {
1028
- color: var(--color--secondary--50);
1029
- }
1030
- .color-secondary-dark {
1031
- color: var(--color--secondary--dark);
1032
- }
1033
-
1034
- .color-success {
1035
- color: var(--color--success);
1036
- }
1037
- .color-info {
1038
- color: var(--color--info);
1039
- }
1040
- .color-warning {
1041
- color: var(--color--warning);
1042
- }
1043
- .color-danger {
1044
- color: var(--color--danger);
1045
- }
1046
- .color-gray {
1047
- color: var(--color--gray);
1048
- }
1049
- .color-dark {
1050
- color: var(--color--dark);
1051
- }
1052
- .color-blue {
1053
- color: var(--color--blue);
1054
- }
1055
- .color-brown {
1056
- color: var(--color--brown);
1057
- }
1058
- .color-cyan {
1059
- color: var(--color--cyan);
1060
- }
1061
- .color-green {
1062
- color: var(--color--green);
1063
- }
1064
- .color-indigo {
1065
- color: var(--color--indigo);
1066
- }
1067
- .color-navy {
1068
- color: var(--color--navy);
1069
- }
1070
- .color-orange {
1071
- color: var(--color--orange);
1072
- }
1073
- .color-pink {
1074
- color: var(--color--pink);
1075
- }
1076
- .color-red {
1077
- color: var(--color--red);
1078
- }
1079
- .color-teal {
1080
- color: var(--color--teal);
1081
- }
1082
- .color-white {
1083
- color: var(--color--white);
1084
- }
1085
- .color-yellow {
1086
- color: var(--color--yellow);
1087
- }
1088
- .color-excel {
1089
- color: var(--color--excel);
1090
- }
1091
- .color-powerpoint {
1092
- color: var(--color--powerpoint);
1093
- }
1094
- .color-word {
1095
- color: var(--color--word);
1096
- }
1097
- .color-pdf {
1098
- color: var(--color--pdf);
1099
- }
1100
- .color-transparent {
1101
- color: transparent;
1102
- }
1103
- .design .color-transparent {
1104
- background: linear-gradient(to right, #00ff00, #ff33cc);
1105
- background-clip: text;
1106
- -webkit-text-fill-color: transparent;
1107
- }
1108
-
1109
- /**************************************************************/
1110
- /******************* END OF COLORS ****************************/
1111
- /**************************************************************/
1112
-
1113
- [class*="plogic--"] {
1114
- font-family: var(--default--sans-serif-family);
1115
- font-size: var(--default--font-size);
1116
- font-style: var(--default--font-style);
1117
- font-weight: var(--default--font-weight);
1118
- letter-spacing: var(--default--spacing);
1119
- white-space: var(--default--white-space);
1120
- border: var(--default--border);
1121
- }
1122
- .plogic--hex {
1123
- display: flex;
1124
- }
1125
- .plogic--monospace div {
1126
- white-space: pre;
1127
- }
1128
- .plogic--monospace,
1129
- .plogic--grid .cell.header-cell .plogic--monospace,
1130
- .plogic--grid .cell.header-cell.plogic--monospace > div {
1131
- font-family: var(--default--monospace-family);
1132
- font-size: 1.063rem;
1133
- letter-spacing: -0.5px;
1134
- }
1135
-
1136
- [class*="plogic--"] {
1137
- box-sizing: var(--default--box-sizing);
1138
- outline: var(--default--outline);
1139
- }
1140
-
1141
- [class*="plogic--"][disabled="true"],
1142
- [class*="plogic--"][disabled] {
1143
- opacity: 0.6;
1144
- }
1145
-
1146
- [class*="plogic--"]:not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"])[disabled="true"],
1147
- [class*="plogic--"]:not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"])[disabled] {
1148
- font-family: var(--default--sans-serif-family);
1149
- font-style: var(--default--font-style);
1150
- font-weight: var(--default--font-weight);
1151
- letter-spacing: var(--default--spacing);
1152
- white-space: var(--default--white-space);
1153
- box-sizing: var(--default--box-sizing);
1154
- outline: var(--default--outline);
1155
- color: var(--color--disabled--text);
1156
- }
1157
- [class*="plogic--"]:not([class*="plogic--button"]):not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"])[disabled="true"],
1158
- [class*="plogic--"]:not([class*="plogic--button"]):not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"])[disabled] {
1159
- font-size: var(--default--font-size);
1160
- }
1161
- [class*="plogic--button"][disabled="true"],
1162
- [class*="plogic--button"][disabled] {
1163
- font-size: var(--default--button--font-size);
1164
- }
1165
-
1166
- [class*="plogic--button"]:not(span),
1167
- button[class*="plogic--"] {
1168
- height: var(--default--button--height);
1169
- }
1170
-
1171
- input[class*="plogic--"],
1172
- select[class*="plogic--"] {
1173
- height: var(--standard--input--height);
1174
- }
1175
-
1176
- .cell input.plogic--input,
1177
- .cell input.plogic--date-field {
1178
- height: var(--incell--standard--height);
1179
- margin-top: -1px;
1180
- }
1181
-
1182
- [class*="plogic--button"] {
1183
- display: flex;
1184
- align-items: center;
1185
- align-content: center;
1186
- justify-items: center;
1187
- justify-content: center;
1188
- overflow: var(--default--button--overflow);
1189
- border: var(--default--button--border);
1190
- background: var(--default--button--background);
1191
- box-shadow: var(--default--button--elevation);
1192
- border-radius: var(--default--button--border-radius);
1193
- -webkit-border-radius: var(--default--button--border-radius);
1194
- -moz-border-radius: var(--default--button--border-radius);
1195
- -ms-border-radius: var(--default--button--border-radius);
1196
- -o-border-radius: var(--default--button--border-radius);
1197
- -webkit-transition: background 0.8s, var(--elevation--transition);
1198
- -moz-transition: background 0.8s, var(--elevation--transition);
1199
- -ms-transition: background 0.8s, var(--elevation--transition);
1200
- -o-transition: background 0.8s, var(--elevation--transition);
1201
- font-size: var(--default--button--font-size);
1202
- font-weight: var(--default--button--weight);
1203
- text-align: var(--default--button--text-align);
1204
- text-overflow: var(--default--button--text-overflow);
1205
- white-space: var(--default--button--white-space);
1206
- cursor: pointer;
1207
- transition: background 0.8s, var(--elevation--transition);
1208
- }
1209
-
1210
- [class*="plogic--button"]:hover {
1211
- border: none;
1212
- cursor: pointer;
1213
- }
1214
-
1215
- [class*="plogic--button"]:active {
1216
- border: none;
1217
- cursor: pointer;
1218
- }
1219
- [class*="plogic--button"]:active > span {
1220
- box-shadow: none;
1221
- }
1222
-
1223
- [class*="plogic--button"] > * {
1224
- border-radius: 0;
1225
- border: none;
1226
- box-shadow: none;
1227
- }
1228
-
1229
- [class*="plogic--button"]:hover > * {
1230
- background: 0 0;
1231
- box-shadow: none;
1232
- }
1233
-
1234
- [class*="plogic--button"] > .pui-material-icons {
1235
- text-transform: none;
1236
- font-size: var(--default--button--icon--font-size);
1237
- }
1238
-
1239
- [class*="plogic--button"] > span:not(.pui-material-icons) {
1240
- display: block;
1241
- overflow: hidden;
1242
- flex-grow: 1;
1243
- white-space: nowrap;
1244
- text-overflow: var(--default--button--text-overflow);
1245
- text-align: left;
1246
- }
1247
- button.plogic--button--removeFilter {
1248
- border: none;
1249
- height: 25px;
1250
- color: var(--color--orange);
1251
- z-index: 99;
1252
- }
1253
- .plogic--button--removeFilter:hover {
1254
- color: var(--color--orange--hover);
1255
- }
1256
- .plogic--button--removeFilter:active {
1257
- color: var(--color--danger);
1258
- }
1259
- .plogic--button--removeFilter > span:not(.pui-material-icons) {
1260
- font-size: 16px;
1261
- text-align: inherit;
1262
- }
1263
-
1264
- .plogic--button--disabled,
1265
- [class*="plogic--button"][disabled="true"],
1266
- [class*="plogic--button"][disabled] {
1267
- color: var(--color--disabled--text);
1268
- background: var(--color--disabled--background);
1269
- cursor: not-allowed;
1270
- pointer-events: none;
1271
- }
1272
-
1273
- .plogic--button--primary[disabled],
1274
- .plogic--button--primary[disabled="true"] {
1275
- background: var(--color--primary--hover);
1276
- }
1277
- .plogic--button--danger[disabled],
1278
- .plogic--button--danger[disabled="true"] {
1279
- background: var(--color--danger--hover);
1280
- }
1281
- .plogic--button--orange[disabled],
1282
- .plogic--button--orange[disabled="true"] {
1283
- background: var(--color--orange--hover);
1284
- }
1285
-
1286
- [class*="pui-floating-placeholder-plogic--"] {
1287
- display: flex;
1288
- border-radius: var(--default--border-radius);
1289
- height: var(--standard--height);
1290
- }
1291
-
1292
- .pui-floating-placeholder-PR {
1293
- visibility: hidden;
1294
- }
1295
-
1296
- input[class*="plogic--"],
1297
- textarea[class*="plogic--"],
1298
- select[class*="plogic--"] {
1299
- border: 1px solid var(--color--accent);
1300
- color: var(--color--text--primary);
1301
- }
1302
- .plogic--no-border,
1303
- input.plogic--input.plogic--no-border
1304
- {
1305
- border: none;
1306
- border-top: none;
1307
- border-bottom: none;
1308
- border-left: none;
1309
- border-right: none;
1310
- }
1311
- input[class*="plogic--"]:not(.plogic--spinner),
1312
- textarea[class*="plogic--"] {
1313
- padding: 0.375rem;
1314
- }
1315
- input.combo-main-box.plogic--combo-box {
1316
- padding-right: 2px;
1317
- }
1318
- input[class*="plogic--"]:not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"]),
1319
- textarea[class*="plogic--"],
1320
- select[class*="plogic--"],
1321
- .combo-main.plogic--combo-box {
1322
- border-radius: var(--default--border-radius);
1323
- transition: border-color ease-in-out 250ms, box-shadow ease-in-out 250ms;
1324
- }
1325
- input[class*="plogic--"]:not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"])[readonly="true"],
1326
- [id*="dspfDesigner"]:not(.design) > input[class*="plogic--"]:not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"])[readonly],
1327
- input[class*="plogic--"]:not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"]).PR,
1328
- input[class*="plogic--"]:not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"]).PR-UL,
1329
- textarea[class*="plogic--"][readonly="true"],
1330
- textarea[class*="plogic--"][readonly],
1331
- textarea[class*="plogic--"].PR,
1332
- textarea[class*="plogic--"].PR-UL,
1333
- select[class*="plogic--"][readonly="true"],
1334
- select[class*="plogic--"][readonly],
1335
- select[class*="plogic--"].PR,
1336
- .combo-main.plogic--combo-box[readonly="true"],
1337
- .combo-main.plogic--combo-box[readonly],
1338
- .combo-main.plogic--combo-box.PR,
1339
- .combo-main.plogic--combo-box.PR-UL {
1340
- padding-left: 0;
1341
- background: none;
1342
- border: none;
1343
- pointer-events: none;
1344
- }
1345
- /* Make protected elements clickable in the IDE */
1346
- .design input[class*="plogic--"]:not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"])[readonly="true"],
1347
- .design input[class*="plogic--"]:not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"]).PR,
1348
- .design input[class*="plogic--"]:not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"]).PR-UL,
1349
- .design textarea[class*="plogic--"][readonly="true"],
1350
- .design textarea[class*="plogic--"][readonly],
1351
- .design textarea[class*="plogic--"].PR,
1352
- .design textarea[class*="plogic--"].PR-UL,
1353
- .design select[class*="plogic--"][readonly="true"],
1354
- .design select[class*="plogic--"][readonly],
1355
- .design select[class*="plogic--"].PR,
1356
- .design .combo-main.plogic--combo-box[readonly="true"],
1357
- .design .combo-main.plogic--combo-box[readonly],
1358
- .design .combo-main.plogic--combo-box.PR,
1359
- .design .combo-main.plogic--combo-box.PR-UL {
1360
- pointer-events: unset;
1361
- }
1362
- .pill {
1363
- border-radius: 500px;
1364
- -webkit-border-radius: 500px;
1365
- -moz-border-radius: 500px;
1366
- -ms-border-radius: 500px;
1367
- -o-border-radius: 500px;
1368
- border: 1px solid var(--color--accent);
1369
- }
1370
-
1371
- .plogic--hr hr {
1372
- height: 0;
1373
- border: none;
1374
- border-top: solid 1px var(--color--secondary);
1375
- }
1376
-
1377
- .plogic--h1,
1378
- .plogic--text-header {
1379
- font-family: var(--sans--h1--family);
1380
- font-size: var(--sans--h1--size);
1381
- font-weight: var(--sans--h1--weight);
1382
- letter-spacing: var(--sans--h1--spacing);
1383
- color: var(--color--primary);
1384
- background: var(--color--text--background);
1385
- }
1386
-
1387
- .plogic--h2,
1388
- .plogic--text-sub-header {
1389
- font-family: var(--sans--h2--family);
1390
- font-size: var(--sans--h2--size);
1391
- font-weight: var(--sans--h2--weight);
1392
- letter-spacing: var(--sans--h2--spacing);
1393
- color: var(--color--subtitle);
1394
- background: var(--color--text--background);
1395
- }
1396
-
1397
- .plogic--h3 {
1398
- font-family: var(--sans--h3--family);
1399
- font-size: var(--sans--h3--size);
1400
- font-weight: var(--sans--h3--weight);
1401
- letter-spacing: var(--sans--h3--spacing);
1402
- color: var(--color--primary--light--text);
1403
- background: var(--color--text--background);
1404
- }
1405
-
1406
- .plogic--h4 {
1407
- font-family: var(--sans--h4--family);
1408
- font-size: var(--sans--h4--size);
1409
- font-weight: var(--sans--h4--weight);
1410
- letter-spacing: var(--sans--h4--spacing);
1411
- color: var(--color--primary--light--text);
1412
- background: var(--color--text--background);
1413
- }
1414
-
1415
- .plogic--h5 {
1416
- font-family: var(--sans--h5--family);
1417
- font-size: var(--sans--h5--size);
1418
- font-weight: var(--sans--h5--weight);
1419
- letter-spacing: var(--sans--h5--spacing);
1420
- color: var(--color--primary--light--text);
1421
- background: var(--color--text--background);
1422
- }
1423
-
1424
- .plogic--h6 {
1425
- font-family: var(--sans--h6--family);
1426
- font-size: var(--sans--h6--size);
1427
- font-weight: var(--sans--h6--weight);
1428
- letter-spacing: var(--sans--h6--spacing);
1429
- color: var(--color--primary--light--text);
1430
- background: var(--color--text--background);
1431
- }
1432
-
1433
- .plogic--text-body {
1434
- text-align: left;
1435
- line-height: 150%;
1436
- font-size: 0.875rem;
1437
- }
1438
-
1439
- .plogic--text-blurb {
1440
- font-size: 1.15rem;
1441
- letter-spacing: 1.5px;
1442
- font-weight: bolder;
1443
- font-variant: small-caps;
1444
- word-spacing: 25%;
1445
- line-height: 130%;
1446
- }
1447
-
1448
- .plogic--text-quote {
1449
- font-size: 1.15rem;
1450
- letter-spacing: 1px;
1451
- word-spacing: 50%;
1452
- font-style: italic;
1453
- line-height: 150%;
1454
- text-align: center;
1455
- }
1456
-
1457
- .plogic--text {
1458
- text-align: left;
1459
- line-height: 150%;
1460
- }
1461
-
1462
- .plogic--text-em {
1463
- letter-spacing: 1px;
1464
- font-style: italic;
1465
- font-weight: bolder;
1466
- line-height: 125%;
1467
- }
1468
-
1469
- .plogic--output-field {
1470
- white-space: pre-wrap;
1471
- }
1472
-
1473
- .plogic--label {
1474
- font-weight: bolder;
1475
- }
1476
- .plogic--label-center {
1477
- font-weight: bolder;
1478
- text-align: center;
1479
- justify-content: center;
1480
- }
1481
- .plogic--label-right {
1482
- font-weight: bolder;
1483
- text-align: right;
1484
- justify-content: flex-end;
1485
- justify-items: flex-end;
1486
- }
1487
-
1488
- .plogic--hyperlink:hover a {
1489
- color: var(--color--hover--text);
1490
- }
1491
-
1492
- .plogic--hyperlink:active a {
1493
- color: var(--color--active--text);
1494
- }
1495
-
1496
- .plogic--hyperlink:visited a {
1497
- color: var(--color--visited--text);
1498
- }
1499
-
1500
- .plogic--text-header {
1501
- font-size: var(--sans--h1--size);
1502
- }
1503
-
1504
- .plogic--wrapping-text {
1505
- overflow: auto;
1506
- }
1507
-
1508
- .pui-floating-placeholder-label {
1509
- position: absolute;
1510
- background: var(--color--input--background);
1511
- color: var(--color--text--primary);
1512
- top: -5px;
1513
- left: 10px;
1514
- padding: 0 3px;
1515
- opacity: 0;
1516
- visibility: hidden;
1517
- transition: transform 0.25s, opacity 0.25s, visibility 0.25s ease-in-out;
1518
- transform-origin: 0 0;
1519
- overflow: hidden;
1520
- text-overflow: ellipsis;
1521
- white-space: nowrap;
1522
- display: block;
1523
- max-width: 120%;
1524
- z-index: 30;
1525
- }
1526
-
1527
- .pui-floating-placeholder-input:focus + .pui-floating-placeholder-label,
1528
- .pui-floating-placeholder-input:not(:placeholder-shown) + .pui-floating-placeholder-label {
1529
- transform: scale(0.75) translateY(-4px);
1530
- opacity: 1;
1531
- visibility: visible;
1532
- }
1533
-
1534
- [class*="pui-floating-placeholder-plogic--"] input[class*="plogic--"],
1535
- [class*="pui-floating-placeholder-plogic--"] textarea[class*="plogic--"] {
1536
- background: var(--color--input--background);
1537
- border: 1px solid var(--color--accent);
1538
- color: var(--color--primary--light--text);
1539
- }
1540
-
1541
- input[class*="plogic--"]:not(.combo-main-box):not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"]):focus,
1542
- textarea[class*="plogic--"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):focus,
1543
- select[class*="plogic--"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):focus,
1544
- button[class*="plogic--"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):focus,
1545
- .combo-main.plogic--combo-box:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):focus-within {
1546
- box-shadow: var(--standard--input--focus-ring);
1547
- border: 1px solid var(--color--primary);
1548
- }
1549
-
1550
- .cell input.plogic--input--grid-navigate-only:focus {
1551
- background: var(--color--primary-20);
1552
- }
1553
- .cell input.plogic--input--grid-navigate-only {
1554
- background: var(--color--secondary-10);
1555
- }
1556
- .cell input.plogic--input--grid-navigate-only::selection {
1557
- background: transparent;
1558
- }
1559
-
1560
- button.plogic--button--removeFilter:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):focus {
1561
- border: none;
1562
- box-shadow: none;
1563
- }
1564
-
1565
- .plogic--button--primary {
1566
- background-position: center;
1567
- border: 1px solid var(--color--primary);
1568
- background-color: var(--color--button--primary--background);
1569
- color: var(--color--button--primary--text);
1570
- box-shadow: var(--default--button--elevation--solid);
1571
- padding: 5px;
1572
- }
1573
-
1574
- .plogic--button--primary:hover {
1575
- border: 1px solid var(--color--primary);
1576
- background: var(--color--button--primary--hover);
1577
- box-shadow: var(--default--button--elevation--solid--hover);
1578
- }
1579
-
1580
- .plogic--button--primary:active {
1581
- background-size: 100%;
1582
- background-color: var(--color--button--primary--active);
1583
- box-shadow: var(--default--button--elevation--solid--active);
1584
- transition: background 0s;
1585
- }
1586
-
1587
- .plogic--button--danger {
1588
- background-position: center;
1589
- border: 1px solid var(--color--danger);
1590
- background-color: var(--color--button--danger--background);
1591
- color: var(--color--button--danger--text);
1592
- box-shadow: var(--default--button--elevation--solid);
1593
- padding: 5px;
1594
- }
1595
-
1596
- .plogic--button--danger:hover {
1597
- border: 1px solid var(--color--danger);
1598
- background: var(--color--button--danger--hover);
1599
- box-shadow: var(--default--button--elevation--solid--hover);
1600
- }
1601
-
1602
- .plogic--button--danger:active {
1603
- background-size: 100%;
1604
- background-color: var(--color--button--danger--active);
1605
- box-shadow: var(--default--button--elevation--solid--active);
1606
- transition: background 0s;
1607
- }
1608
-
1609
- .plogic--button--mini {
1610
- border-radius: 500px;
1611
- }
1612
-
1613
- .plogic--button--mini,
1614
- .plogic--button--secondary {
1615
- background-color: var(--color--transparent);
1616
- color: var(--color--subtitle);
1617
- }
1618
-
1619
- .plogic--button--secondary {
1620
- border: 1px solid var(--color--secondary);
1621
- background-color: var(--color--secondary);
1622
- color: var(--color--button--primary--text);
1623
- box-shadow: var(--default--button--elevation--solid);
1624
- padding: 5px;
1625
- }
1626
-
1627
- .plogic--button--mini:hover,
1628
- .plogic--button--secondary:hover {
1629
- border: 1px solid var(--color--secondary);
1630
- background: var(--color--secondary--hover);
1631
- color: var(--color--secondary--text);
1632
- box-shadow: var(--default--button--elevation--solid--hover);
1633
- }
1634
-
1635
- .plogic--button--mini:active,
1636
- .plogic--button--secondary:active {
1637
- background-size: 100%;
1638
- background-color: var(--color--button--secondary--active);
1639
- box-shadow: var(--default--button--elevation--solid--active);
1640
- color: var(--color--secondary--text);
1641
- transition: background 0s;
1642
- }
1643
-
1644
- .plogic--button--tertiary {
1645
- background-position: center;
1646
- border: 1px solid var(--color--tertiary);
1647
- background-color: var(--color--button--tertiary--background);
1648
- color: var(--color--primary--light--text);
1649
- box-shadow: var(--default--button--elevation--solid);
1650
- padding: 5px;
1651
- }
1652
-
1653
- .plogic--button--tertiary:hover {
1654
- border: 1px solid var(--color--tertiary);
1655
- background: var(--color--button--tertiary--hover);
1656
- box-shadow: var(--default--button--elevation--solid--hover);
1657
- }
1658
-
1659
- .plogic--button--tertiary:active {
1660
- background-size: 100%;
1661
- background-color: var(--color--button--tertiary--active);
1662
- box-shadow: var(--default--button--elevation--solid--active);
1663
- transition: background 0s;
1664
- }
1665
-
1666
- .plogic--button--warning {
1667
- background-position: center;
1668
- border: 1px solid var(--color--warning);
1669
- background-color: var(--color--button--warning--background);
1670
- color: var(--color--button--warning--text);
1671
- box-shadow: var(--default--button--elevation--solid);
1672
- padding: 5px;
1673
- }
1674
-
1675
- .plogic--button--warning:hover {
1676
- border: 1px solid var(--color--warning);
1677
- background: var(--color--button--warning--hover);
1678
- box-shadow: var(--default--button--elevation--solid--hover);
1679
- }
1680
-
1681
- .plogic--button--warning:active {
1682
- background-size: 100%;
1683
- background-color: var(--color--button--warning--active);
1684
- box-shadow: var(--default--button--elevation--solid--active);
1685
- transition: background 0s;
1686
- }
1687
-
1688
- .plogic--button--orange {
1689
- background-position: center;
1690
- border: 1px solid var(--color--orange);
1691
- background-color: var(--color--button--orange--background);
1692
- color: var(--color--button--orange--text);
1693
- box-shadow: var(--default--button--elevation--solid);
1694
- padding: 5px;
1695
- }
1696
-
1697
- .plogic--button--orange:hover {
1698
- border: 1px solid var(--color--orange);
1699
- background: var(--color--button--orange--hover);
1700
- box-shadow: var(--default--button--elevation--solid--hover);
1701
- }
1702
-
1703
- .plogic--button--orange:active {
1704
- background-size: 100%;
1705
- background-color: var(--color--button--orange--active);
1706
- box-shadow: var(--default--button--elevation--solid--active);
1707
- transition: background 0s;
1708
- }
1709
-
1710
-
1711
- .plogic--button,
1712
- .plogic--button--text-only {
1713
- background-color: var(--color--button--text-only);
1714
- border: none;
1715
- }
1716
-
1717
- .plogic--button--text-only:hover,
1718
- .plogic--button:hover {
1719
- background: var(--color--button--text-only--hover);
1720
- border: none;
1721
- }
1722
-
1723
- .plogic--button--text-only:active,
1724
- .plogic--button:active {
1725
- background-size: 100%;
1726
- background-color: var(--color--button--text-only--active);
1727
- border: none;
1728
- transition: background 0s;
1729
- }
1730
-
1731
- .plogic--button--outlined {
1732
- background-color: var(--color--button--outlined);
1733
- border: var(--default--button--border--outlined);
1734
- padding-left: 5px;
1735
- padding-right: 5px;
1736
- color: var(--color--text--primary);
1737
- }
1738
- .moreMenu .plogic--button--outlined.plogic--ripple {
1739
- width: 150px;
1740
- }
1741
- span.pui-material-icons-center.plogic--button--outlined {
1742
- padding: 0;
1743
- }
1744
-
1745
- /* Option Buttons Widget */
1746
- div[puiwdgt="option buttons"] {
1747
- min-width: 1400px;
1748
- padding: 0px 25px;
1749
- }
1750
- .window div[puiwdgt="option buttons"] {
1751
- min-width: 1400px;
1752
- padding: 0px 20px;
1753
- }
1754
- div[puiwdgt="option buttons"].plogic--option-buttons--double-row {
1755
- margin-top: -10px;
1756
- }
1757
- div[puiwdgt="option buttons"].plogic--option-buttons--double-row div:not(.cell) > .plogic--constant,
1758
- div[puiwdgt="option buttons"].plogic--option-buttons--double-row div:not(.cell) > .plogic--constant-right,
1759
- div[puiwdgt="option buttons"].plogic--option-buttons--double-row button[class*="plogic--"] {
1760
- height: 1.5rem;
1761
- margin-top: 2px;
1762
- }
1763
- div[puiwdgt="option buttons"].plogic--option-buttons--double-row .moreMenu {
1764
- margin-top: 20px;
1765
- }
1766
- .plogic--more--menu {
1767
- margin-left: 10px;
1768
- }
1769
-
1770
- .plogic--button--outlined:hover {
1771
- border: var(--default--button--border--outlined);
1772
- background: var(--color--button--outlined--hover);
1773
- }
1774
-
1775
- .plogic--button--outlined:active {
1776
- background-size: 100%;
1777
- background-color: var(--color--button--outlined--active);
1778
- transition: background 0s;
1779
- }
1780
-
1781
- .plogic--button--mini:hover > span,
1782
- .plogic--button--mini > span,
1783
- .plogic--button--outlined:hover > span,
1784
- .plogic--button--outlined > span,
1785
- .plogic--button--primary:hover > span,
1786
- .plogic--button--primary > span,
1787
- .plogic--button--secondary:hover > span,
1788
- .plogic--button--secondary > span,
1789
- .plogic--button--tertiary:hover > span,
1790
- .plogic--button--tertiary > span,
1791
- .plogic--button--danger:hover > span,
1792
- .plogic--button--danger > span,
1793
- .plogic--button--info:hover > span,
1794
- .plogic--button--info > span,
1795
- .plogic--button--success:hover > span,
1796
- .plogic--button--success > span,
1797
- .plogic--button--warning:hover > span,
1798
- .plogic--button--warning > span,
1799
- .plogic--button--orange:hover > span,
1800
- .plogic--button--orange > span,
1801
- .plogic--button--text-only:hover > span,
1802
- .plogic--button--text-only > span,
1803
- .plogic--button:hover > span,
1804
- .plogic--button > span {
1805
- box-shadow: none;
1806
- background: 0 0;
1807
- border: none;
1808
- }
1809
-
1810
- .plogic--button--mini:hover > span {
1811
- color: var(--color--white);
1812
- }
1813
-
1814
- .pui-material-icons {
1815
- font-family: "Material Icons";
1816
- text-rendering: optimizeLegibility;
1817
- font-size: 1.5rem;
1818
- background: 0 0;
1819
- text-align: center;
1820
- -webkit-font-feature-settings: "liga";
1821
- font-feature-settings: "liga";
1822
- -moz-font-feature-settings: "liga";
1823
- }
1824
-
1825
- .pui-fa-icons {
1826
- font-family: "Font Awesome 5 Free";
1827
- -webkit-font-feature-settings: "liga";
1828
- font-feature-settings: "liga";
1829
- text-rendering: optimizeLegibility;
1830
- font-size: 0.875rem;
1831
- background: 0 0;
1832
- text-align: center;
1833
- -moz-font-feature-settings: "liga";
1834
- }
1835
-
1836
- .pui-fa-icons-text,
1837
- .pui-material-icons-text {
1838
- background: 0 0;
1839
- -webkit-box-flex: 1;
1840
- -ms-flex-positive: 1;
1841
- flex-grow: 1;
1842
- }
1843
-
1844
- .plogic--button-secondary.no-icon,
1845
- .plogic--button.no-icon {
1846
- display: block;
1847
- }
1848
-
1849
- .pui-material-icons-text.plogic--button {
1850
- -webkit-box-flex: 1;
1851
- -ms-flex-positive: 1;
1852
- flex-grow: 1;
1853
- }
1854
-
1855
- .cell .pui-prompt.pui-prompt-plogic--input.pui-material-icons {
1856
- margin: 1px 0px 0px -30px;
1857
- height: 1.375rem;
1858
- width: 1.438rem;
1859
- font-size: 1.25rem;
1860
- padding: 1px 0px 0px 0px;
1861
- }
1862
- .cell.selected .pui-prompt.pui-prompt-plogic--input.pui-material-icons {
1863
- color: var(--color--secondary--dark);
1864
- }
1865
- .cell.selected .pui-prompt.pui-prompt-plogic--input.pui-material-icons:hover {
1866
- color: var(--color--secondary--text);
1867
- }
1868
-
1869
- INPUT.plogic--date-field {
1870
- background-color: var(--color--white);
1871
- caret-color: var(--color--primary--light--text);
1872
- }
1873
-
1874
- .pui-floating-placeholder-plogic--date-field {
1875
- display: flex;
1876
- justify-content: flex-end;
1877
- justify-items: flex-end;
1878
- align-content: center;
1879
- align-items: center;
1880
- }
1881
-
1882
- .pui-floating-placeholder-plogic--date-field > .plogic--date-field {
1883
- position: absolute;
1884
- top: 0rem;
1885
- width: 100%;
1886
- }
1887
-
1888
- .pui-calendar-current-date {
1889
- border: 2px solid var(--color--primary);
1890
- }
1891
-
1892
- .pui-calendar.pui-calendar-plogic--date-field * {
1893
- font-family: var(--default--sans-serif-family);
1894
- }
1895
-
1896
- .pui-calendar-icon.pui-cal.pui-cal-plogic--date-field {
1897
- font-size: var(--default--button--icon--font-size);
1898
- color: var(--color--secondary--dark);
1899
- z-index: 24;
1900
- margin-top: -6px;
1901
- margin-left: -38px;
1902
- background: var(--color--white);
1903
- padding: 0px;
1904
- height: 2.125rem;
1905
- width: 2rem;
1906
- border-left: 1px solid var(--color--accent);
1907
- border-top-left-radius: 0px;
1908
- border-top-right-radius: 6px;
1909
- border-bottom-right-radius: 6px;
1910
- border-bottom-left-radius: 0px;
1911
- transition: all 0.2s ease-in-out;
1912
- }
1913
- .cell .pui-calendar-icon.pui-cal.pui-cal-plogic--date-field {
1914
- margin: 0px 0px 0px -29px;
1915
- height: 1.375rem;
1916
- width: 1.438rem;
1917
- padding-left: 1px;
1918
- }
1919
- .pui-calendar-icon.pui-cal.pui-cal-plogic--date-field:hover {
1920
- color: var(--color--secondary--text);
1921
- background: var(--color--accent);
1922
- }
1923
-
1924
- .pui-cal.pui-cal-plogic--date-field.pui-calendar-icon::after {
1925
- content: "event";
1926
- display: block;
1927
- font-family: "Material Icons";
1928
- font-feature-settings: "liga";
1929
- text-rendering: optimizeLegibility;
1930
- font-size: 1.5rem;
1931
- margin: 4px 0px 0px 3px;
1932
- }
1933
- .cell .pui-cal.pui-cal-plogic--date-field.pui-calendar-icon::after {
1934
- font-size: 1.25rem;
1935
- margin: 1px 0px 0px 0px;
1936
- }
1937
-
1938
- .pui-floating-placeholder-plogic--date-field > .pui-calendar-icon.pui-cal.pui-cal-plogic--date-field::after {
1939
- content: "event";
1940
- display: block;
1941
- font-family: "Material Icons";
1942
- padding: 3px;
1943
- }
1944
-
1945
- .pui-calendar {
1946
- position: absolute;
1947
- border-radius: 0.5rem;
1948
- -webkit-box-shadow: var(--elevation-dp4);
1949
- box-shadow: var(--elevation-dp4);
1950
- -webkit-border-radius: 0.5rem;
1951
- -moz-border-radius: 0.5rem;
1952
- -ms-border-radius: 0.5rem;
1953
- -o-border-radius: 0.5rem;
1954
- width: auto;
1955
- height: auto;
1956
- margin: 3px 0px 0px -10px;
1957
- }
1958
-
1959
- .pui-calendar-plogic--date-field.pui-calendar,
1960
- .pui-calendar-plogic--date-field.pui-calendar *,
1961
- .pui-calendar-plogic--date-field.pui-calendar ::after,
1962
- .pui-calendar-plogic--date-field.pui-calendar ::after {
1963
- -webkit-box-sizing: border-box;
1964
- box-sizing: border-box;
1965
- max-width: 100%;
1966
- }
1967
-
1968
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-outer-table {
1969
- height: 100%;
1970
- width: 100%;
1971
- }
1972
-
1973
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-outer-table > tbody > tr > td.brndrow1 {
1974
- background: none;
1975
- padding: 0;
1976
- }
1977
-
1978
- .pui-calendar .pui-calendar-inner-table {
1979
- background: var(--color--text--inverse);
1980
- border-collapse: collapse;
1981
- overflow: hidden;
1982
- border-radius: 0.25rem;
1983
- -webkit-border-radius: 0.25rem;
1984
- -moz-border-radius: 0.25rem;
1985
- -ms-border-radius: 0.25rem;
1986
- -o-border-radius: 0.25rem;
1987
- }
1988
-
1989
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table tr {
1990
- height: 2rem;
1991
- background: 0 0;
1992
- }
1993
-
1994
- .pui-calendar .pui-calendar-inner-table td {
1995
- font-family: var(--sans--h3--family);
1996
- width: 3rem;
1997
- height: 3rem;
1998
- text-align: center;
1999
- background: none;
2000
- font-size: 1rem;
2001
- color: var(--color--text--primary);
2002
- }
2003
-
2004
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table td {
2005
- font-weight: 400;
2006
- padding: 0;
2007
- }
2008
-
2009
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table td.brndrow1:not(.calendar) {
2010
- line-height: 3rem;
2011
- color: var(--color--white);
2012
- }
2013
-
2014
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table td.pui-calendar-selected-date {
2015
- background: var(--color--primary);
2016
- color: var(--color--white);
2017
- border-radius: 500px;
2018
- border: none;
2019
- }
2020
-
2021
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table > tbody > tr:first-of-type {
2022
- background: var(--color--secondary--dark);
2023
- }
2024
-
2025
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .pui-calendar-month-year-header {
2026
- font-size: 1.25rem;
2027
- color: var(--color--white);
2028
- }
2029
-
2030
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .pui-calendar-week-number-header {
2031
- font-weight: 900;
2032
- color: var(--color--white);
2033
- background: var(--color--secondary);
2034
- width: 60px;
2035
- }
2036
-
2037
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .pui-calendar-weekday-header {
2038
- color: var(--color--secondary--dark);
2039
- }
2040
-
2041
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .pui-calendar-week-number {
2042
- font-weight: 900;
2043
- color: var(--color--white);
2044
- background: var(--color--secondary);
2045
- }
2046
-
2047
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .pui-calendar-weekend-date {
2048
- color: var(--color--secondary);
2049
- background: var(--color--secondary-10);
2050
- }
2051
-
2052
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .pui-calendar-day-inactive-month {
2053
- color: var(--color--secondary-50);
2054
- }
2055
-
2056
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table td.pui-calendar-workday-date:hover {
2057
- background: var(--color--secondary--dark);
2058
- color: var(--color--white);
2059
- }
2060
-
2061
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table td.pui-calendar-weekend-date:hover {
2062
- background: var(--color--secondary--dark--hover);
2063
- color: var(--color--white);
2064
- }
2065
-
2066
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .pui-calendar-arrow-next-year,
2067
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .pui-calendar-arrow-prev-year {
2068
- font-family: "Material Icons";
2069
- display: flex;
2070
- background: none;
2071
- height: 100%;
2072
- width: 100%;
2073
- }
2074
-
2075
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .pui-calendar-arrow-next-month,
2076
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .pui-calendar-arrow-prev-month {
2077
- font-family: "Material Icons";
2078
- display: -webkit-box;
2079
- display: -ms-flexbox;
2080
- display: flex;
2081
- -webkit-box-align: center;
2082
- -ms-flex-align: center;
2083
- align-items: center;
2084
- background: none;
2085
- height: 100%;
2086
- width: 100%;
2087
- }
2088
-
2089
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-next-month::after,
2090
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-next-month::after,
2091
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-next-year::after,
2092
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-next-year::after,
2093
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-prev-month::after,
2094
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-prev-month::after,
2095
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-prev-year::after,
2096
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-prev-year::after {
2097
- font-family: "Material Icons";
2098
- display: inline-block;
2099
- margin: 0;
2100
- padding: 0;
2101
- letter-spacing: 0;
2102
- text-rendering: optimizeLegibility;
2103
- font-feature-settings: "liga";
2104
- -webkit-font-feature-settings: "liga";
2105
- -moz-font-feature-settings: "liga";
2106
- }
2107
-
2108
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-prev-year::after,
2109
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-prev-year::after {
2110
- content: "chevron_leftchevron_left";
2111
- letter-spacing: -0.95rem;
2112
- font-size: 24px;
2113
- margin: 0 0 0 0.25rem;
2114
- }
2115
-
2116
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-next-year::after,
2117
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-next-year::after {
2118
- content: "chevron_rightchevron_right";
2119
- letter-spacing: -0.95rem;
2120
- font-size: 24px;
2121
- margin: 0 0 0 -0.25rem;
2122
- }
2123
-
2124
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-prev-month::after,
2125
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-prev-month::after {
2126
- content: "chevron_left";
2127
- font-size: 24px;
2128
- margin: 0 0 0 0.25rem;
2129
- width: 100%;
2130
- }
2131
-
2132
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-next-month::after,
2133
- .pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-next-month::after {
2134
- content: "chevron_right";
2135
- font-size: 24px;
2136
- margin: 0 0 0 -0.25rem;
2137
- width: 100%;
2138
- }
2139
-
2140
- input[class*="plogic--checkbox"][disabled="true"],
2141
- input[class*="plogic--checkbox"][disabled],
2142
- input[class*="plogic--radio-button"][disabled="true"],
2143
- input[class*="plogic--radio-button"][disabled],
2144
- input[class*="plogic--checkbox"],
2145
- input[class*="plogic--radio-button"] {
2146
- height: 15px;
2147
- width: 15px;
2148
- margin: 0px 0px 0px 2px !important;
2149
- border-radius: 50%;
2150
- border: none;
2151
- appearance: none;
2152
- transition: box-shadow ease-in-out 250ms;
2153
- }
2154
- input[class*="plogic--checkbox"][disabled="true"],
2155
- input[class*="plogic--checkbox"][disabled],
2156
- input[class*="plogic--checkbox"] {
2157
- border-radius: 10%;
2158
- }
2159
-
2160
- /* Checkbox */
2161
- /* Checkbox Background */
2162
- input[class*="plogic--checkbox"]::before {
2163
- content: "\f0c8";
2164
- font-family: "Font Awesome 5 Free";
2165
- font-size: 20px;
2166
- font-weight: 900;
2167
- margin: -9px 0px 0px -7px;
2168
- position: absolute;
2169
- color: var(--color--text--inverse);
2170
- background: none;
2171
- }
2172
- /* Checkbox Icon */
2173
- input[class*="plogic--checkbox"]::after {
2174
- content: "\f0c8";
2175
- font-family: "Font Awesome 5 Free";
2176
- font-size: 22px;
2177
- margin: -9.3px 0px 0px -8px;
2178
- position: absolute;
2179
- border-radius: 50%;
2180
- color: var(--color--primary);
2181
- cursor: pointer;
2182
- }
2183
- /* -- Firefox specific */
2184
- @supports (-moz-appearance:none) {
2185
- input[class*="plogic--checkbox"]::after {
2186
- margin: -10.9px 0px 0px -8px;
2187
- }
2188
- }
2189
- /* Checkbox Indeterminate Icon */
2190
- input[class*="plogic--checkbox"]:indeterminate::after,
2191
- input[class*="plogic--checkbox"][readonly]:indeterminate::after {
2192
- content: "\f146";
2193
- }
2194
- /* Checkbox Background Checked Icon */
2195
- input[class*="plogic--checkbox"]:checked::before {
2196
- color: white;
2197
- }
2198
- /* Checkbox Checked Icon */
2199
- input[class*="plogic--checkbox"]:checked::after {
2200
- content: "\f14a";
2201
- font-weight: 900;
2202
- margin: -9.6px 0px 0px -8px;
2203
- color: var(--color--primary);
2204
- }
2205
- /* Checkbox Output Background */
2206
- input[class*="plogic--checkbox"].PR::before,
2207
- input[class*="plogic--checkbox"][readonly="true"]::before,
2208
- input[class*="plogic--checkbox"][readonly]::before {
2209
- color: transparent;
2210
- }
2211
- /* Checkbox Output Icon */
2212
- input[class*="plogic--checkbox"].PR::after,
2213
- input[class*="plogic--checkbox"][readonly="true"]::after,
2214
- input[class*="plogic--checkbox"][readonly]::after {
2215
- content: "\f0c8";
2216
- font-weight: 100;
2217
- margin: -9.3px 0px 0px -8px;
2218
- color: var(--color--secondary);
2219
- cursor: default;
2220
- }
2221
- /* Checkbox Output checked Icon */
2222
- input[class*="plogic--checkbox"].PR:checked::after,
2223
- input[class*="plogic--checkbox"][readonly="true"]:checked::after,
2224
- input[class*="plogic--checkbox"][readonly]:checked::after {
2225
- content: "\f14a";
2226
- font-weight: 100;
2227
- margin: -9.3px 0px 0px -8px;
2228
- color: var(--color--secondary);
2229
- }
2230
- .cell.selected input[class*="plogic--checkbox"].PR:checked::after,
2231
- .cell.selected input[class*="plogic--checkbox"][readonly="true"]:checked::after,
2232
- .cell.selected input[class*="plogic--checkbox"][readonly]:checked::after {
2233
- color: white;
2234
- }
2235
- .cell.selected input[class*="plogic--checkbox"].PR.BLU:checked::after,
2236
- .cell.selected input[class*="plogic--checkbox"][readonly="true"].BLU:checked::after,
2237
- .cell.selected input[class*="plogic--checkbox"][readonly].BLU:checked::after,
2238
- input[class*="plogic--checkbox"].PR.BLU:checked::after,
2239
- input[class*="plogic--checkbox"][readonly="true"].BLU:checked::after,
2240
- input[class*="plogic--checkbox"][readonly].BLU:checked::after {
2241
- color: var(--color--blue);
2242
- }
2243
- .cell.selected input[class*="plogic--checkbox"].PR.GRN:checked::after,
2244
- .cell.selected input[class*="plogic--checkbox"][readonly="true"].GRN:checked::after,
2245
- .cell.selected input[class*="plogic--checkbox"][readonly].GRN:checked::after,
2246
- input[class*="plogic--checkbox"].PR.GRN:checked::after,
2247
- input[class*="plogic--checkbox"][readonly="true"].GRN:checked::after,
2248
- input[class*="plogic--checkbox"][readonly].GRN:checked::after {
2249
- color: var(--color--green);
2250
- }
2251
- .cell.selected input[class*="plogic--checkbox"].PR.RED:checked::after,
2252
- .cell.selected input[class*="plogic--checkbox"][readonly="true"].RED:checked::after,
2253
- .cell.selected input[class*="plogic--checkbox"][readonly].RED:checked::after,
2254
- input[class*="plogic--checkbox"].PR.RED:checked::after,
2255
- input[class*="plogic--checkbox"][readonly="true"].RED:checked::after,
2256
- input[class*="plogic--checkbox"][readonly].RED:checked::after {
2257
- color: var(--color--red);
2258
- }
2259
- .cell.selected input[class*="plogic--checkbox"].PR.TRQ:checked::after,
2260
- .cell.selected input[class*="plogic--checkbox"][readonly="true"].TRQ:checked::after,
2261
- .cell.selected input[class*="plogic--checkbox"][readonly].TRQ:checked::after,
2262
- input[class*="plogic--checkbox"].PR.TRQ:checked::after,
2263
- input[class*="plogic--checkbox"][readonly="true"].TRQ:checked::after,
2264
- input[class*="plogic--checkbox"][readonly].TRQ:checked::after {
2265
- color: var(--color--cyan);
2266
- }
2267
- .cell.selected input[class*="plogic--checkbox"].PR.YLW:checked::after,
2268
- .cell.selected input[class*="plogic--checkbox"][readonly="true"].YLW:checked::after,
2269
- .cell.selected input[class*="plogic--checkbox"][readonly].YLW:checked::after,
2270
- input[class*="plogic--checkbox"].PR.YLW:checked::after,
2271
- input[class*="plogic--checkbox"][readonly="true"].YLW:checked::after,
2272
- input[class*="plogic--checkbox"][readonly].YLW:checked::after {
2273
- color: var(--color--yellow);
2274
- }
2275
- .cell.selected input[class*="plogic--checkbox"].PR.PNK:checked::after,
2276
- .cell.selected input[class*="plogic--checkbox"][readonly="true"].PNK:checked::after,
2277
- .cell.selected input[class*="plogic--checkbox"][readonly].PNK:checked::after,
2278
- input[class*="plogic--checkbox"].PR.PNK:checked::after,
2279
- input[class*="plogic--checkbox"][readonly="true"].PNK:checked::after,
2280
- input[class*="plogic--checkbox"][readonly].PNK:checked::after {
2281
- color: var(--color--pink);
2282
- }
2283
-
2284
- .cell input[class*="plogic--checkbox"].PR:not(:checked)::before,
2285
- .cell input[class*="plogic--checkbox"][readonly="true"]:not(:checked)::before,
2286
- .cell input[class*="plogic--checkbox"][readonly]:not(:checked)::before,
2287
- .cell input[class*="plogic--checkbox"].PR:not(:checked)::after,
2288
- .cell input[class*="plogic--checkbox"][readonly="true"]:not(:checked)::after,
2289
- .cell input[class*="plogic--checkbox"][readonly]:not(:checked)::after {
2290
- display: none;
2291
- }
2292
- .design .cell input[class*="plogic--checkbox"].PR:not(:checked)::after,
2293
- .design .cell input[class*="plogic--checkbox"][readonly="true"]:not(:checked)::after,
2294
- .design .cell input[class*="plogic--checkbox"][readonly]:not(:checked)::after {
2295
- display: block;
2296
- color: var(--color--secondary-50);
2297
- }
2298
-
2299
- /* Radio button */
2300
- /* Radio button Background */
2301
- input[class*="plogic--radio-button"]::before {
2302
- content: "\f111";
2303
- font-family: "Font Awesome 5 Free";
2304
- font-size: 18px;
2305
- font-weight: 900;
2306
- margin: -8px 0px 0px -8px;
2307
- position: absolute;
2308
- color: var(--color--white);
2309
- background: none;
2310
- }
2311
- /* Radio button Icon */
2312
- input[class*="plogic--radio-button"]::after {
2313
- content: "\f111";
2314
- font-family: "Font Awesome 5 Free";
2315
- font-size: 20px;
2316
- margin: -9px 0px 0px -9.3px;
2317
- position: absolute;
2318
- border-radius: 50%;
2319
- color: var(--color--secondary);
2320
- cursor: pointer;
2321
- }
2322
- /* Radio button Checked Icon */
2323
- input[class*="plogic--radio-button"]:checked::after {
2324
- content: "\f192";
2325
- font-weight: 900;
2326
- margin: -9.3px 0px 0px -9.3px;
2327
- color: var(--color--primary);
2328
- }
2329
- /* Radio button Output Icon */
2330
- input[class*="plogic--radio-button"].PR::after,
2331
- input[class*="plogic--radio-button"][readonly="true"]::after,
2332
- input[class*="plogic--radio-button"][readonly]::after {
2333
- color: var(--color--secondary);
2334
- cursor: default;
2335
- }
2336
- /* Radio button Output checked Icon */
2337
- input[class*="plogic--radio-button"].PR:checked::after,
2338
- input[class*="plogic--radio-button"][readonly="true"]:checked::after,
2339
- input[class*="plogic--radio-button"][readonly]:checked::after {
2340
- content: "\f192";
2341
- font-weight: 100;
2342
- /* margin: -9.3px 0px 0px -9.3px; *** for font-weight 900 */
2343
- margin: -9px 0px 0px -9.3px;
2344
- color: var(--color--secondary);
2345
- }
2346
-
2347
- .cell input[class*="plogic--radio-button"].PR:not(:checked)::before,
2348
- .cell input[class*="plogic--radio-button"][readonly="true"]:not(:checked)::before,
2349
- .cell input[class*="plogic--radio-button"][readonly]:not(:checked)::before,
2350
- .cell input[class*="plogic--radio-button"].PR:not(:checked)::after,
2351
- .cell input[class*="plogic--radio-button"][readonly="true"]:not(:checked)::after,
2352
- .cell input[class*="plogic--radio-button"][readonly]:not(:checked)::after {
2353
- display: none;
2354
- }
2355
- .design .cell input[class*="plogic--radio-button"].PR:not(:checked)::after,
2356
- .design .cell input[class*="plogic--radio-button"][readonly="true"]:not(:checked)::after,
2357
- .design .cell input[class*="plogic--radio-button"][readonly]:not(:checked)::after {
2358
- display: block;
2359
- color: var(--color--secondary-50);
2360
- }
2361
-
2362
- /* Checkbox and Radio button labels */
2363
- .label-for-plogic--radio-button-no-label > label,
2364
- .label-for-plogic--checkbox-no-label > label {
2365
- display: none;
2366
- }
2367
- .label-for-plogic--checkbox,
2368
- .label-for-plogic--checkbox-no-label,
2369
- .label-for-plogic--radio-button,
2370
- .label-for-plogic--radio-button-no-label {
2371
- margin: -2px 0 0 3px;
2372
- }
2373
-
2374
- /* Output field in a cell */
2375
- .cell .plogic--output-field {
2376
- margin-top: 1px;
2377
- }
2378
- .design .cell .plogic--output-field {
2379
- margin-top: 0px;
2380
- }
2381
- /* FontAwesome icons in a cell */
2382
- .cell [class*="pui-fa-"] {
2383
- margin-top: 1px;
2384
- }
2385
-
2386
- /* Checkbox in a cell */
2387
- .cell input[class*="plogic--checkbox"] {
2388
- margin-top: 3px !important;
2389
- }
2390
- .cell [class*="label-for-plogic--checkbox"] {
2391
- margin-top: 1px;
2392
- }
2393
- .cell [class*="label-for-plogic--checkbox"]::after {
2394
- margin-top: 1px;
2395
- }
2396
-
2397
- /* Radio Button in a cell */
2398
- .cell input[class*="plogic--radio-button"] {
2399
- margin-top: 3px !important;
2400
- }
2401
- .cell [class*="label-for-plogic--radio-button"] {
2402
- margin-top: 1px;
2403
- }
2404
- .cell [class*="label-for-plogic--radio-button"]::after {
2405
- margin-top: 1px;
2406
- }
2407
-
2408
- input[class*="plogic--checkbox"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([disabled]):hover,
2409
- input[class*="plogic--radio-button"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([disabled]):hover {
2410
- box-shadow: 0 0 0 0.375rem var(--color--primary-10);
2411
- }
2412
- .cell input[class*="plogic--checkbox"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([disabled]):hover,
2413
- .cell input[class*="plogic--radio-button"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([disabled]):hover {
2414
- box-shadow: 0 0 0 0.575rem var(--color--primary-10);
2415
- }
2416
-
2417
- input[class*="plogic--checkbox"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([disabled]):focus,
2418
- input[class*="plogic--radio-button"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([disabled]):focus {
2419
- box-shadow: 0 0 0 0.375rem var(--color--primary-20);
2420
- }
2421
- .cell input[class*="plogic--checkbox"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([disabled]):focus,
2422
- .cell input[class*="plogic--radio-button"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([disabled]):focus {
2423
- box-shadow: 0 0 0 0.575rem var(--color--primary-20);
2424
- }
2425
-
2426
- input[class*="plogic--checkbox"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([disabled]):active,
2427
- input[class*="plogic--radio-button"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([disabled]):active {
2428
- box-shadow: 0 0 0 0.375rem var(--color--primary-40);
2429
- }
2430
- .cell input[class*="plogic--checkbox"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([disabled]):active,
2431
- .cell input[class*="plogic--radio-button"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([disabled]):active {
2432
- box-shadow: 0 0 0 0.575rem var(--color--primary-40);
2433
- }
2434
-
2435
- .plogic--list-box,
2436
- .plogic--select-box,
2437
- .plogic--spinner,
2438
- .plogic--combo-box {
2439
- background: var(--color--input--background);
2440
- border: 1px solid var(--color--accent);
2441
- color: var(--color--primary--light--text);
2442
- padding: 0.375rem;
2443
- }
2444
- .plogic--select-box {
2445
- padding: 0.12rem;
2446
- }
2447
- .plogic--list-box.PR,
2448
- .plogic--list-box[readonly="true"],
2449
- .plogic--list-box[readonly],
2450
- .plogic--select-box.PR,
2451
- .plogic--select-box[readonly="true"],
2452
- .plogic--select-box[readonly],
2453
- .plogic--combo-box.PR,
2454
- .plogic--combo-box[readonly="true"],
2455
- .plogic--combo-box[readonly] {
2456
- border: 0px solid #ffffff;
2457
- background: none;
2458
- }
2459
- .plogic--combo-box.PR > .plogic--combo-box-combo-arrow,
2460
- .plogic--combo-box[readonly="true"] > .plogic--combo-box-combo-arrow,
2461
- .plogic--combo-box[readonly] > .plogic--combo-box-combo-arrow {
2462
- visibility: hidden;
2463
- }
2464
- .plogic--select-box.PR,
2465
- .plogic--select-box[readonly="true"],
2466
- .plogic--select-box[readonly] {
2467
- appearance: none;
2468
- }
2469
- .plogic-gridSelector.PR,
2470
- .plogic-gridSelector[readonly="true"],
2471
- .plogic-gridSelector[readonly],
2472
- .plogic-gridSelector[disabled="true"],
2473
- .plogic-gridSelector[disabled] {
2474
- visibility: hidden;
2475
- }
2476
-
2477
- .plogic--list-box {
2478
- overflow: auto;
2479
- }
2480
-
2481
- .plogic--select-box option:checked,
2482
- .plogic--list-box option:checked {
2483
- color: #fff;
2484
- background: var(--color--primary);
2485
- }
2486
-
2487
- .combo-arrow.plogic--combo-box-combo-arrow {
2488
- display: block;
2489
- background: url(../icons/plogic/chevron_down-48dp.svg) no-repeat center;
2490
- background-size: contain;
2491
- height: 100%;
2492
- width: var(--default--button--icon--font-size);
2493
- cursor: pointer;
2494
- z-index: 21;
2495
- }
2496
-
2497
- .combo-arrow.open.plogic--combo-box-combo-arrow {
2498
- display: block;
2499
- background: url(../icons/plogic/chevron_up-48dp.svg) no-repeat center;
2500
- background-size: contain;
2501
- height: 100%;
2502
- width: var(--default--button--icon--font-size);
2503
- cursor: pointer;
2504
- z-index: 21;
2505
- }
2506
-
2507
- [class*="plogic--combo-box"]:active > div,
2508
- [class*="plogic--combo-box"]:active > img {
2509
- transform: translateY(1px);
2510
- }
2511
-
2512
- [class*="plogic--combo-box"] > input {
2513
- -webkit-box-sizing: border-box;
2514
- box-sizing: border-box;
2515
- font-family: var(--default--sans-serif-family);
2516
- padding-left: 5px;
2517
- padding-right: 5px;
2518
- height: 100%;
2519
- min-width: calc(100% - 18px);
2520
- border: none;
2521
- background: 0 0;
2522
- margin-top: 0;
2523
- }
2524
-
2525
- .cell div.plogic--combo-box {
2526
- height: var(--incell--standard--height);
2527
- margin-top: -1px;
2528
- }
2529
- .plogic--combo-box {
2530
- caret-color: var(--color--primary--light--text);
2531
- height: var(--standard--height);
2532
- -webkit-box-pack: end;
2533
- -ms-flex-pack: end;
2534
- justify-content: flex-end;
2535
- }
2536
-
2537
- .combo-options.plogic--combo-box-combo-options {
2538
- text-transform: unset !important;
2539
- background: var(--color--panel--background);
2540
- box-shadow: var(--elevation-dp4);
2541
- padding: 0;
2542
- border-radius: 0;
2543
- height: unset;
2544
- max-height: 200px;
2545
- }
2546
-
2547
- .plogic--combo-box-combo-options .combo-option,
2548
- .plogic--select-box option,
2549
- .plogic--list-box option {
2550
- font-family: var(--default--sans-serif-family);
2551
- font-size: var(--default--font-size);
2552
- color: var(--color--primary--light--text);
2553
- padding: 0.438rem 0.375rem;
2554
- height: var(--standard--option--height);
2555
- }
2556
-
2557
- .plogic--combo-box-combo-options .combo-option-select,
2558
- .plogic--select-box option:hover,
2559
- .plogic--list-box option:hover {
2560
- font-family: var(--default--sans-serif-family);
2561
- background: var(--color--primary--dark);
2562
- color: var(--color--primary--text);
2563
- font-size: var(--default--font-size);
2564
- }
2565
- .plogic--combo-box-combo-options .combo-option-select {
2566
- background: var(--color--primary);
2567
- }
2568
-
2569
- .plogic--menu.pui-menu {
2570
- background: var(--color--primary--dark);
2571
- border: none;
2572
- border-radius: 0;
2573
- display: block;
2574
- padding: 1px 0;
2575
- min-height: var(--standard--height);
2576
- }
2577
-
2578
- .plogic--menu.pui-menu > table {
2579
- border: none;
2580
- width: 150px;
2581
- }
2582
-
2583
- .plogic--menu.pui-menu > table > tbody > tr {
2584
- height: var(--standard--height);
2585
- background: transparent;
2586
- color: var(--color--white);
2587
- }
2588
-
2589
- .plogic--menu.pui-menu > table > tbody > tr:hover {
2590
- background: var(--color--white);
2591
- color: var(--color--primary--light--text);
2592
- }
2593
-
2594
- .plogic--menu.pui-menu > table > tbody > tr > td {
2595
- position: relative;
2596
- min-height: var(--standard--height);
2597
- padding: 0.875rem;
2598
- border: none;
2599
- background: none;
2600
- display: flex;
2601
- align-content: center;
2602
- align-items: center;
2603
- justify-items: center;
2604
- justify-content: space-between;
2605
- }
2606
-
2607
- .plogic--menu.pui-menu > table > tbody > tr > td > img,
2608
- .plogic--menu.pui-menu > table > tbody > tr > td > span:not([class]) {
2609
- display: none;
2610
- }
2611
-
2612
- .plogic--menu.pui-menu > table > tbody > tr > td > .text {
2613
- display: block;
2614
- flex-grow: 1;
2615
- margin: 0 0.25rem;
2616
- }
2617
-
2618
- .plogic--menu.pui-menu > table > tbody > tr > td > .plogic-icons {
2619
- display: flex;
2620
- align-items: center;
2621
- align-content: center;
2622
- height: 100%;
2623
- }
2624
-
2625
- .plogic--menu.pui-menu > table > tbody > tr > td > .plogic-icons.right {
2626
- position: absolute;
2627
- margin-left: 0.125rem;
2628
- right: 0;
2629
- }
2630
-
2631
- .plogic--menu.pui-menu > table > tbody > tr > td > .plogic-icons.left {
2632
- margin-right: 0.125rem;
2633
- }
2634
-
2635
- /* Toggles */
2636
-
2637
- /* Text Area */
2638
-
2639
- .plogic--text-area {
2640
- overflow-y: auto;
2641
- white-space: pre-wrap;
2642
- background-color: var(--color--white);
2643
- }
2644
-
2645
- .plogic--spinner {
2646
- background: var(--color--input--background);
2647
- caret-color: var(--color--primary--light--text);
2648
- z-index: 1;
2649
- padding-right: 1.1rem;
2650
- }
2651
-
2652
- .pui-floating-placeholder-plogic--spinner > .spinner-down-arrow-plogic--spinner,
2653
- .pui-floating-placeholder-plogic--spinner > .spinner-up-arrow-plogic--spinner {
2654
- height: 1.125rem;
2655
- width: 1.25rem;
2656
- left: unset !important;
2657
- right: 0;
2658
- background-repeat: no-repeat;
2659
- opacity: 0;
2660
- }
2661
-
2662
- .spinner-down-arrow-plogic--spinner {
2663
- background: url("../icons/plogic/chevron_down-48dp.svg");
2664
- }
2665
-
2666
- .spinner-up-arrow-plogic--spinner {
2667
- background: url("../icons/plogic/chevron_up-48dp.svg");
2668
- margin-top: -9px;
2669
- }
2670
-
2671
- .spinner-down-arrow-plogic--spinner,
2672
- .spinner-up-arrow-plogic--spinner {
2673
- height: 1.125rem;
2674
- width: 1.25rem;
2675
- padding-left: 1.25rem;
2676
- background-repeat: no-repeat;
2677
- background-position: center;
2678
- background-size: 100%;
2679
- margin-left: -5px;
2680
- }
2681
-
2682
- .pui-floating-placeholder-plogic--spinner > .spinner-up-arrow-plogic--spinner {
2683
- z-index: 3;
2684
- top: 0 !important;
2685
- }
2686
-
2687
- .pui-floating-placeholder-plogic--spinner > .spinner-down-arrow-plogic--spinner {
2688
- z-index: 3;
2689
- top: unset !important;
2690
- bottom: 0;
2691
- }
2692
-
2693
- .pui-floating-placeholder-plogic--spinner::before {
2694
- z-index: 2;
2695
- position: absolute;
2696
- display: flex;
2697
- align-content: center;
2698
- align-items: center;
2699
- justify-content: center;
2700
- justify-items: center;
2701
- right: 0;
2702
- height: 50%;
2703
- width: 1.25rem;
2704
- font-size: var(--default--button--icon--font-size);
2705
- color: var(--color--accent);
2706
- content: "keyboard_arrow_up";
2707
- font-family: "Material Icons";
2708
- }
2709
-
2710
- .pui-floating-placeholder-plogic--spinner::after {
2711
- z-index: 2;
2712
- position: absolute;
2713
- display: flex;
2714
- align-content: center;
2715
- align-items: center;
2716
- justify-content: center;
2717
- justify-items: center;
2718
- bottom: 0;
2719
- right: 0;
2720
- height: 50%;
2721
- width: 1.25rem;
2722
- font-size: var(--default--button--icon--font-size);
2723
- color: var(--color--accent);
2724
- content: "keyboard_arrow_down";
2725
- font-family: "Material Icons";
2726
- }
2727
-
2728
- .pui-floating-placeholder-plogic--spinner > .spinner-up-arrow-plogic--spinner:hover ~ .pui-floating-placeholder-plogic--spinner::before,
2729
- .pui-floating-placeholder-plogic--spinner > .spinner-down-arrow-plogic--spinner:hover + .pui-floating-placeholder-plogic--spinner::after {
2730
- color: var(--color--primary--light--text);
2731
- }
2732
-
2733
- /* File Management Widgets */
2734
-
2735
- .plogic--file-upload,
2736
- .plogic--drop-file-upload {
2737
- background: var(--color--panel--background);
2738
- border: 1px solid var(--color--accent);
2739
- display: flex;
2740
- flex-flow: column;
2741
- padding: 10px 10px 5px 10px;
2742
- }
2743
-
2744
- .plogic--drop-file-upload > .drop-box {
2745
- position: relative;
2746
- display: flex;
2747
- align-items: center;
2748
- align-content: center;
2749
- justify-items: center;
2750
- justify-content: center;
2751
- min-height: 50%;
2752
- background: var(--color--dropbox--background);
2753
- color: transparent;
2754
- border-radius: var(--default--border-radius);
2755
- overflow: hidden;
2756
- margin: 0;
2757
- height: 50%;
2758
- width: 100%;
2759
- }
2760
-
2761
- .plogic--drop-file-upload > .drop-box::before {
2762
- font-family: "Material Icons";
2763
- background: url("../icons/plogic/dragDropIcon.svg");
2764
- background-position: center;
2765
- background-size: contain;
2766
- background-repeat: no-repeat;
2767
- content: "";
2768
- display: block;
2769
- text-align: center;
2770
- height: 50%;
2771
- width: 50%;
2772
- align-items: center;
2773
- align-content: center;
2774
- justify-content: center;
2775
- justify-items: center;
2776
- position: absolute;
2777
- }
2778
-
2779
- .plogic--drop-file-upload > .drop-box.dragover {
2780
- cursor: copy;
2781
- }
2782
-
2783
- .plogic--drop-file-upload > .drop-box.dragover {
2784
- border: 3px dashed var(--color--affirmative--dark);
2785
- }
2786
-
2787
- .plogic--file-upload > .control-box {
2788
- display: flex;
2789
- height: var(--default--button--icon--font-size);
2790
- justify-content: space-between;
2791
- }
2792
-
2793
- .plogic--drop-file-upload > .control-box {
2794
- position: relative;
2795
- overflow: visible;
2796
- height: 20px;
2797
- margin: 5px 0px;
2798
- display: flex;
2799
- align-items: center;
2800
- align-content: center;
2801
- justify-items: center;
2802
- justify-content: center;
2803
- }
2804
-
2805
- .plogic--file-upload > .control-box > .abort-upload,
2806
- .plogic--file-upload > .control-box > .clear,
2807
- .plogic--drop-file-upload > .control-box > .abort-upload,
2808
- .plogic--drop-file-upload > .control-box > .clear-files {
2809
- position: relative;
2810
- text-align: center;
2811
- color: transparent;
2812
- margin-left: 5px;
2813
- width: var(--default--button--icon--font-size);
2814
- min-width: var(--default--button--icon--font-size);
2815
- max-width: var(--default--button--icon--font-size);
2816
- background: var(--color--panel--background);
2817
- order: 2;
2818
- }
2819
-
2820
- .plogic--file-upload > .control-box > .control-proxy {
2821
- position: relative;
2822
- display: flex;
2823
- align-items: center;
2824
- align-content: center;
2825
- color: transparent;
2826
- height: 100%;
2827
- max-width: var(--default--button--icon--font-size);
2828
- cursor: pointer;
2829
- overflow: hidden;
2830
- }
2831
-
2832
- .plogic--file-upload > .control-box > .control-proxy::after {
2833
- font-family: "Material Icons";
2834
- background: url("../icons/plogic/searchFile.svg");
2835
- background-position: center;
2836
- background-size: contain;
2837
- width: var(--default--button--icon--font-size);
2838
- height: var(--default--button--icon--font-size);
2839
- background-repeat: no-repeat;
2840
- content: "";
2841
- position: absolute;
2842
- display: block;
2843
- }
2844
-
2845
- .plogic--file-upload > .control-box > .abort-upload::after,
2846
- .plogic--file-upload > .control-box > .clear::after,
2847
- .plogic--drop-file-upload > .control-box > .abort-upload::after,
2848
- .plogic--drop-file-upload > .control-box > .clear-files::after {
2849
- display: flex;
2850
- align-items: center;
2851
- align-content: center;
2852
- justify-items: center;
2853
- justify-content: center;
2854
- position: absolute;
2855
- top: 0;
2856
- left: 0;
2857
- font-size: var(--default--button--icon--font-size);
2858
- color: var(--color--primary--light--text);
2859
- height: 100%;
2860
- width: 100%;
2861
- content: "clear";
2862
- font-family: "Material Icons";
2863
- }
2864
-
2865
- .plogic--file-upload > .control-box > .abort-upload:hover::after,
2866
- .plogic--file-upload > .control-box > .clear:hover::after,
2867
- .plogic--drop-file-upload > .control-box > .abort-upload:hover::after,
2868
- .plogic--drop-file-upload > .control-box > .clear-files:hover::after {
2869
- color: var(--color--negative--dark);
2870
- }
2871
-
2872
- .plogic--drop-file-upload > .control-box > progress {
2873
- order: 1;
2874
- background: var(--color--primary--light);
2875
- height: 4px;
2876
- width: 100%;
2877
- border: none;
2878
- border-radius: 500px;
2879
- }
2880
-
2881
- .plogic--drop-file-upload > .control-box > progress::-webkit-progress-bar {
2882
- background: var(--color--primary--light);
2883
- border-radius: 4px;
2884
- }
2885
-
2886
- .plogic--drop-file-upload > .control-box > progress::-webkit-progress-value {
2887
- background: var(--color--primary--dark);
2888
- border-radius: 4px;
2889
- }
2890
-
2891
- .plogic--drop-file-upload > .control-box > progress::-moz-progress-bar {
2892
- background: var(--color--primary--dark);
2893
- border-radius: 4px;
2894
- }
2895
-
2896
- .plogic--drop-file-upload > .list-box,
2897
- .plogic--file-upload > .list-box {
2898
- overflow: hidden auto;
2899
- scrollbar-width: thin;
2900
- flex-grow: 1;
2901
- }
2902
-
2903
- .plogic--drop-file-upload > .list-box *,
2904
- .plogic--file-upload > .list-box * {
2905
- padding: 0;
2906
- }
2907
-
2908
- .plogic--drop-file-upload > .list-box > .list,
2909
- .plogic--file-upload > .list-box > .list {
2910
- display: block;
2911
- overflow: hidden;
2912
- border-collapse: collapse;
2913
- width: 100%;
2914
- }
2915
-
2916
- .plogic--drop-file-upload > .list-box > .list > tbody,
2917
- .plogic--file-upload > .list-box > .list > tbody {
2918
- display: flex;
2919
- flex-flow: column;
2920
- }
2921
-
2922
- .plogic--drop-file-upload > .list-box > .list > tbody > tr,
2923
- .plogic--file-upload > .list-box > .list > tbody > tr {
2924
- max-width: 100%;
2925
- display: flex;
2926
- flex-flow: row;
2927
- }
2928
-
2929
- .plogic--drop-file-upload > .list-box > .list > tbody > tr > .name-col,
2930
- .plogic--file-upload > .list-box > .list > tbody > tr > .name-col {
2931
- padding-top: 4px;
2932
- font-size: 0.875rem;
2933
- line-height: 150%;
2934
- overflow: hidden;
2935
- text-overflow: ellipsis;
2936
- flex-grow: 1;
2937
- }
2938
-
2939
- .plogic--drop-file-upload > .list-box > .list > tbody > tr > .status-col,
2940
- .plogic--file-upload > .list-box > .list > tbody > tr > .status-col {
2941
- display: flex;
2942
- color: transparent;
2943
- justify-content: center;
2944
- justify-items: center;
2945
- align-content: center;
2946
- align-items: center;
2947
- max-width: calc(var(--default--button--icon--font-size) + 10px);
2948
- overflow: hidden;
2949
- }
2950
-
2951
- .plogic--drop-file-upload > .list-box > .list > tbody > tr > .status-col::after,
2952
- .plogic--file-upload > .list-box > .list > tbody > tr > .status-col::after {
2953
- display: flex;
2954
- align-items: center;
2955
- align-content: center;
2956
- justify-items: center;
2957
- justify-content: center;
2958
- position: absolute;
2959
- top: 0;
2960
- left: 0;
2961
- font-size: var(--default--button--icon--font-size);
2962
- color: var(--color--primary--light--text);
2963
- height: 100%;
2964
- width: 100%;
2965
- content: "cloud_done";
2966
- font-family: "Material Icons";
2967
- }
2968
-
2969
- .plogic--drop-file-upload > .list-box > .list > tbody > tr > .remove-col,
2970
- .plogic--file-upload > .list-box > .list > tbody > tr > .remove-col {
2971
- display: flex;
2972
- justify-content: center;
2973
- justify-items: center;
2974
- align-content: center;
2975
- align-items: center;
2976
- padding-left: 5px;
2977
- max-width: calc(var(--default--button--icon--font-size) + 5px);
2978
- overflow: hidden;
2979
- }
2980
-
2981
- .plogic--drop-file-upload > .list-box > .list > tbody > tr > .remove-col > .remove,
2982
- .plogic--file-upload > .list-box > .list > tbody > tr > .remove-col > .remove {
2983
- display: block;
2984
- position: relative;
2985
- text-align: center;
2986
- color: transparent;
2987
- overflow: hidden;
2988
- max-width: 100%;
2989
- font-size: var(--default--button--icon--font-size);
2990
- }
2991
-
2992
- .plogic--drop-file-upload > .list-box > .list > tbody > tr > .remove-col > .remove::after,
2993
- .plogic--file-upload > .list-box > .list > tbody > tr > .remove-col > .remove::after {
2994
- display: flex;
2995
- align-items: center;
2996
- align-content: center;
2997
- justify-items: center;
2998
- justify-content: center;
2999
- position: absolute;
3000
- top: 0;
3001
- left: 0;
3002
- font-size: var(--default--button--icon--font-size);
3003
- color: var(--color--primary--light--text);
3004
- height: 100%;
3005
- width: 100%;
3006
- content: "remove_circle_outline";
3007
- font-family: "Material Icons";
3008
- }
3009
-
3010
- .plogic--drop-file-upload > .list-box > .list > tbody > tr > .remove-col > .remove:hover::after,
3011
- .plogic--file-upload > .list-box > .list > tbody > tr > .remove-col > .remove:hover::after {
3012
- color: var(--color--negative--dark--hover);
3013
- }
3014
-
3015
- .plogic--drop-file-upload > .list-box > .list > tbody > tr > .remove-col > .remove:active::after,
3016
- .plogic--file-upload > .list-box > .list > tbody > tr > .remove-col > .remove:active::after {
3017
- color: var(--color--negative--dark);
3018
- }
3019
-
3020
- div a.control-proxy.dnd-upl-sel {
3021
- left: 20px;
3022
- position: absolute;
3023
- cursor: pointer;
3024
- }
3025
-
3026
- /* Slider Widget */
3027
-
3028
- .plogic--slider {
3029
- border: none;
3030
- background: none;
3031
- display: flex;
3032
- align-content: center;
3033
- align-items: center;
3034
- justify-content: center;
3035
- justify-items: center;
3036
- }
3037
-
3038
- .plogic--slider.vertical > .bar,
3039
- .plogic--slider.vertical > .handle {
3040
- left: unset;
3041
- }
3042
-
3043
- .plogic--slider > .bar,
3044
- .plogic--slider.vertical > .bar,
3045
- .plogic--slider.horizontal > .bar {
3046
- top: unset;
3047
- border: none;
3048
- border-radius: var(--default--border-radius);
3049
- background: var(--color--primary--light);
3050
- }
3051
-
3052
- /* Slider Handle */
3053
-
3054
- .plogic--slider > .handle,
3055
- .plogic--slider.vertical > .handle,
3056
- .plogic--slider.horizontal > .handle {
3057
- top: unset;
3058
- width: 1.25rem;
3059
- height: 1.25rem;
3060
- border: none;
3061
- border-radius: 500px;
3062
- background: var(--color--primary--dark);
3063
- box-shadow: var(--elevation-dp2);
3064
- transition: box-shadow ease-in-out 250ms;
3065
- }
3066
-
3067
- .plogic--slider[disabled="true"] > .handle,
3068
- .plogic--slider[disabled] > .handle,
3069
- .plogic--slider.vertical[disabled="true"] > .handle,
3070
- .plogic--slider.vertical[disabled] > .handle,
3071
- .plogic--slider.horizontal[disabled="true"] > .handle,
3072
- .plogic--slider.horizontal[disabled] > .handle {
3073
- background: var(--color--disabled--text);
3074
- }
3075
-
3076
- .plogic--slider > .handle:hover,
3077
- .plogic--slider.vertical > .handle:hover,
3078
- .plogic--slider.horizontal > .handle:hover {
3079
- box-shadow: var(--elevation-dp2), 0 0 0 0.875rem var(--color--primary-10);
3080
- }
3081
-
3082
- .plogic--slider > .handle:focus,
3083
- .plogic--slider.vertical > .handle:focus,
3084
- .plogic--slider.horizontal > .handle:focus {
3085
- box-shadow: var(--elevation-dp2), 0 0 0 0.875rem var(--color--primary-20);
3086
- }
3087
-
3088
- .plogic--slider > .handle:active,
3089
- .plogic--slider.vertical > .handle:active,
3090
- .plogic--slider.horizontal > .handle:active {
3091
- box-shadow: var(--elevation-dp2), 0 0 0 0.875rem var(--color--primary-40);
3092
- }
3093
-
3094
- .plogic--slider[disabled="true"] > .handle:hover,
3095
- .plogic--slider[disabled] > .handle:hover,
3096
- .plogic--slider.vertical[disabled="true"] > .handle:hover,
3097
- .plogic--slider.vertical[disabled] > .handle:hover,
3098
- .plogic--slider.horizontal[disabled="true"] > .handle:hover,
3099
- .plogic--slider.horizontal[disabled] > .handle:hover {
3100
- box-shadow: var(--elevation-dp2), 0 0 0 0.875rem var(--color--secondary-10);
3101
- }
3102
-
3103
- .plogic--slider[disabled="true"] > .handle:focus,
3104
- .plogic--slider[disabled] > .handle:focus,
3105
- .plogic--slider.vertical[disabled="true"] > .handle:focus,
3106
- .plogic--slider.vertical[disabled] > .handle:focus,
3107
- .plogic--slider.horizontal[disabled="true"] > .handle:focus,
3108
- .plogic--slider.horizontal[disabled] > .handle:focus {
3109
- box-shadow: var(--elevation-dp2), 0 0 0 0.875rem var(--color--secondary-20);
3110
- }
3111
-
3112
- .plogic--slider[disabled="true"] > .handle:active,
3113
- .plogic--slider[disabled] > .handle:active,
3114
- .plogic--slider.vertical[disabled="true"] > .handle:active,
3115
- .plogic--slider.vertical[disabled] > .handle:active,
3116
- .plogic--slider.horizontal[disabled="true"] > .handle:active,
3117
- .plogic--slider.horizontal[disabled] > .handle:active {
3118
- box-shadow: var(--elevation-dp2), 0 0 0 0.875rem var(--color--secondary-40);
3119
- }
3120
-
3121
- .plogic--slider[disabled="true"] > .bar,
3122
- .plogic--slider[disabled] > .bar,
3123
- .plogic--slider.vertical[disabled="true"] > .bar,
3124
- .plogic--slider.vertical[disabled] > .bar,
3125
- .plogic--slider.horizontal[disabled="true"] > .bar,
3126
- .plogic--slider.horizontal[disabled] > .bar {
3127
- background: var(--color--accent);
3128
- }
3129
-
3130
- /* Fieldset */
3131
-
3132
- .plogic--fieldset fieldset {
3133
- border-radius: var(--default--border-radius);
3134
- border: 1px solid var(--color--accent);
3135
- background: var(--color--content--background);
3136
- }
3137
- .plogic--fieldset legend {
3138
- position: relative;
3139
- top: -2px;
3140
- padding: 0px 5px 0px 5px;
3141
- font-weight: bold;
3142
- color: var(--color--primary--dark);
3143
- }
3144
- .plogic--legend--primary legend {
3145
- color: var(--color--primary);
3146
- }
3147
- .plogic--legend--secondary legend {
3148
- color: var(--color--secondary);
3149
- }
3150
- .plogic--legend--danger legend {
3151
- color: var(--color--danger);
3152
- }
3153
- .plogic--legend--info legend {
3154
- color: var(--color--info);
3155
- }
3156
- .plogic--legend--success legend {
3157
- color: var(--color--success);
3158
- }
3159
- .plogic--legend--warning legend {
3160
- color: var(--color--warning);
3161
- }
3162
- .plogic--legend--cyan legend {
3163
- color: var(--color--cyan);
3164
- }
3165
- .plogic--legend--green legend {
3166
- color: var(--color--green);
3167
- }
3168
- .plogic--legend--orange legend {
3169
- color: var(--color--orange);
3170
- }
3171
- .plogic--legend--pink legend {
3172
- color: var(--color--pink);
3173
- }
3174
- .plogic--legend--red legend {
3175
- color: var(--color--red);
3176
- }
3177
- .plogic--legend--yellow legend {
3178
- color: var(--color--yellow);
3179
- }
3180
-
3181
- /* Panel Widgets */
3182
-
3183
- .plogic--tab-panel .pui-tscrbtn.right,
3184
- .plogic--tab-panel-white > span.pui-tscrbtn.pui-tablayout.right,
3185
- .plogic--tab-panel > span.pui-tscrbtn.pui-tablayout.right {
3186
- right: 0;
3187
- }
3188
-
3189
- .plogic--accordion-panel > div,
3190
- .plogic--panel--wide,
3191
- .plogic--panel > div {
3192
- padding: 0;
3193
- }
3194
-
3195
- .plogic--ajax-container,
3196
- .plogic--html-container,
3197
- .plogic--iframe {
3198
- border-radius: var(--default--border-radius);
3199
- box-shadow: var(--elevation-dp2);
3200
- background: var(--color--panel--background);
3201
- }
3202
-
3203
- .ui-btn-up-plogic--header,
3204
- [class*="ui-btn-up-plogic--"],
3205
- [class*="ui-btn-up-plogic--"] > span,
3206
- .ui-btn.ui-shadow.ui-btn-corner-all.no-shadow {
3207
- box-shadow: none;
3208
- border: none;
3209
- border-radius: 0;
3210
- -webkit-border-radius: 0;
3211
- -moz-border-radius: 0;
3212
- -ms-border-radius: 0;
3213
- -o-border-radius: 0;
3214
- }
3215
-
3216
- .ui-btn-up-plogic--body > span.ui-btn-inner.ui-btn-corner-all {
3217
- display: none;
3218
- box-shadow: none;
3219
- border: none;
3220
- }
3221
-
3222
- .plogic--panel--wide {
3223
- width: calc(100% - 50px);
3224
- min-width: 1400px;
3225
- }
3226
- div.plogic--card-panel,
3227
- div.plogic--panel--wide,
3228
- div.plogic--panel {
3229
- display: flex;
3230
- border-radius: var(--default--border-radius);
3231
- -webkit-box-shadow: none;
3232
- box-shadow: var(--elevation-dp4);
3233
- background: var(--color--panel--background);
3234
- -webkit-border-radius: var(--default--border-radius);
3235
- -moz-border-radius: var(--default--border-radius);
3236
- -ms-border-radius: var(--default--border-radius);
3237
- -o-border-radius: var(--default--border-radius);
3238
- }
3239
-
3240
- .plogic--card-panel.info,
3241
- .plogic--panel--wide.info,
3242
- .plogic--panel.info,
3243
- .plogic--card-panel.info2,
3244
- .plogic--panel--wide.info2,
3245
- .plogic--panel.info2 {
3246
- background: var(--color--info--light);
3247
- }
3248
-
3249
- .plogic--card-panel.info > div:first-of-type > * span,
3250
- .plogic--panel--wide.info > div:first-of-type > * span,
3251
- .plogic--panel.info > div:first-of-type > * span {
3252
- color: var(--color--panel--header);
3253
- }
3254
- .plogic--card-panel.info2 > div:first-of-type > * span,
3255
- .plogic--panel--wide.info2 > div:first-of-type > * span,
3256
- .plogic--panel.info2 > div:first-of-type > * span {
3257
- color: var(--color--info);
3258
- }
3259
-
3260
- .plogic--card-panel.error > div:first-of-type > * span,
3261
- .plogic--panel--wide.error > div:first-of-type > * span,
3262
- .plogic--panel.error > div:first-of-type > * span {
3263
- color: var(--color--negative--dark);
3264
- }
3265
-
3266
- .plogic--panel--wide > div:first-of-type > * span,
3267
- .plogic--panel > div:first-of-type > * span {
3268
- padding: 0px;
3269
- width: calc(100% - 40px);
3270
- height: 100%;
3271
- display: flex;
3272
- align-content: flex-end;
3273
- align-items: flex-end;
3274
- text-align: left;
3275
- font-weight: var(--sans--h2--weight);
3276
- font-family: var(--sans--h2--family);
3277
- font-size: var(--sans--h2--size);
3278
- color: var(--color--panel--header);
3279
- }
3280
- .plogic--panel--wide > div:first-of-type > span > span,
3281
- .plogic--panel > div:first-of-type > span > span {
3282
- margin: 0 20px 10px 20px;
3283
- }
3284
-
3285
- .plogic--card-panel > div:first-of-type {
3286
- max-height: 0;
3287
- display: none;
3288
- }
3289
-
3290
- .plogic--panel--wide > div:last-of-type,
3291
- .plogic--panel > div:last-of-type {
3292
- min-height: calc(100% - var(--tab-panel--header--height));
3293
- /* max-height: calc(100% - (var(--tab-panel--header--height))); Causes the fields to be overlapped if the panel has a height < 150px */
3294
- }
3295
-
3296
- .plogic--card-panel > div:last-of-type {
3297
- min-height: 100%;
3298
- }
3299
-
3300
- .plogic--container {
3301
- background: var(--color--content--background);
3302
- }
3303
-
3304
- /* Tab Panel Widget */
3305
-
3306
- .plogic--tab-panel {
3307
- background: var(--color--content--background);
3308
- box-shadow: 0;
3309
- overflow: hidden;
3310
- }
3311
-
3312
- .plogic--tab-panel .pui-tablayout-body,
3313
- .plogic--tab-panel .pui-tablayout-body > div,
3314
- .plogic--tab-panel .pui-tablayout-hdr,
3315
- .plogic--tab-panel .pui-tablayout-hdr > span,
3316
- .plogic--tab-panel .pui-tablayout-hdr > span > span {
3317
- border: none;
3318
- background: 0 0;
3319
- left: 0;
3320
- }
3321
-
3322
- .plogic--tab-panel .pui-tablayout-hdr {
3323
- height: var(--tab-panel--header--height);
3324
- font-family: var(--sans--h4--family);
3325
- color: var(--color--accent--text);
3326
- background: var(--color--secondary);
3327
- display: flex;
3328
- top: 0;
3329
- box-shadow: var(--elevation-dp4);
3330
- }
3331
-
3332
- .plogic--tab-panel .pui-tablayout-hdr > span {
3333
- min-height: 100%;
3334
- }
3335
-
3336
- .plogic--tab-panel .pui-tablayout-hdr > span > span[istab="true"] {
3337
- text-overflow: ellipsis;
3338
- height: 100%;
3339
- display: flex;
3340
- align-content: center;
3341
- align-items: center;
3342
- margin: 0;
3343
- padding: 0 10px;
3344
- line-height: 100%;
3345
- font-size: var(--default--font-size);
3346
- font-weight: bolder;
3347
- letter-spacing: var(--sans--h3--spacing);
3348
- background: var(--color--text--background);
3349
- }
3350
-
3351
- .plogic--tab-panel .pui-tablayout-hdr > span > span:not([istab="true"]) {
3352
- display: none;
3353
- }
3354
-
3355
- .plogic--tab-panel .pui-tablayout-hdr > span.selected-tab > span[istab="true"] {
3356
- color: var(--color--primary--light);
3357
- border-bottom: 2px solid var(--color--primary--light);
3358
- min-height: 100%;
3359
- }
3360
-
3361
- .plogic--tab-panel .pui-tablayout-body {
3362
- overflow: auto;
3363
- z-index: -1;
3364
- height: calc(100% - var(--tab-panel--header--height));
3365
- top: var(--tab-panel--header--height);
3366
- }
3367
-
3368
- .plogic--tab-panel .pui-tscrbtn {
3369
- height: var(--tab-panel--header--height);
3370
- width: auto;
3371
- color: var(--color--accent--text);
3372
- background: none;
3373
- font-family: "Material Icons";
3374
- padding: 0;
3375
- }
3376
-
3377
- .plogic--tab-panel .pui-tscrbtn::before {
3378
- display: block;
3379
- position: absolute;
3380
- content: "";
3381
- height: 100%;
3382
- width: 100%;
3383
- background: var(--color--secondary);
3384
- padding: 0;
3385
- opacity: 0.8;
3386
- z-index: -1;
3387
- }
3388
-
3389
- .plogic--tab-panel .pui-tscrbtn.left {
3390
- left: 0;
3391
- }
3392
-
3393
- .plogic--tab-panel .pui-tscrbtn.right {
3394
- right: 0;
3395
- }
3396
-
3397
- .plogic--tab-panel span.pui-tscrbtn span.mid {
3398
- left: 0;
3399
- padding: 0 5px;
3400
- margin: 0;
3401
- background: 0 0;
3402
- width: 100%;
3403
- height: 100%;
3404
- border: none;
3405
- display: -webkit-box;
3406
- display: -ms-flexbox;
3407
- display: flex;
3408
- -webkit-box-align: center;
3409
- -ms-flex-align: center;
3410
- align-items: center;
3411
- align-content: center;
3412
- }
3413
-
3414
- .plogic--tab-panel .pui-tscrbtn.left .mid {
3415
- transform: scaleX(-1);
3416
- -webkit-transform: scaleX(-1);
3417
- -moz-transform: scaleX(-1);
3418
- -ms-transform: scaleX(-1);
3419
- -o-transform: scaleX(-1);
3420
- }
3421
-
3422
- .plogic--tab-panel .pui-tscrbtn.left .mid::before {
3423
- content: "forward";
3424
- }
3425
-
3426
- .plogic--tab-panel .pui-tscrbtn.right .mid::before {
3427
- content: "forward";
3428
- }
3429
-
3430
- .plogic--panel--wide .ui-btn-inner.ui-btn-corner-all,
3431
- .plogic--panel .ui-btn-inner.ui-btn-corner-all {
3432
- border: none;
3433
- }
3434
-
3435
- div.pui-sflmsg-panel {
3436
- height: fit-content;
3437
- background: var(--color--light);
3438
- font-family: var(--default--sans-serif-family);
3439
- font-size: var(--default--font-size);
3440
- }
3441
- div.pui-sflmsg-panel-content {
3442
- height: fit-content;
3443
- }
3444
- div.pui-sflmsg-panel-close-button,
3445
- div.pui-sflmsg-panel-close-button:hover {
3446
- background: none;
3447
- }
3448
- div.pui-sflmsg-panel-close-button::after {
3449
- content: "clear";
3450
- font-family: "Material Icons";
3451
- font-size: 22px;
3452
- margin: -3px 0px 0px -3px;
3453
- position: absolute;
3454
- color: var(--color--secondary);
3455
- cursor: pointer;
3456
- }
3457
- div.pui-sflmsg-panel-close-button:hover::after {
3458
- color: var(--color--secondary-hover);
3459
- }
3460
-
3461
- /* Grid Widget */
3462
-
3463
- [puiwdgt="grid"].plogic--grid {
3464
- color: var(--color--primary--light--text);
3465
- display: -webkit-box;
3466
- display: -ms-flexbox;
3467
- display: flex;
3468
- -ms-flex-line-pack: center;
3469
- align-content: center;
3470
- -webkit-box-align: center;
3471
- -ms-flex-align: center;
3472
- align-items: center;
3473
- border: none;
3474
- background: var(--color--panel--background);
3475
- border-radius: var(--default--border-radius);
3476
- -webkit-border-radius: var(--default--border-radius);
3477
- -moz-border-radius: var(--default--border-radius);
3478
- -ms-border-radius: var(--default--border-radius);
3479
- -o-border-radius: var(--default--border-radius);
3480
- }
3481
-
3482
- .plogic--grid.plogic--grid--messages {
3483
- color: #ff3300;
3484
- }
3485
-
3486
- .plogic--grid .cell.header-cell {
3487
- font-weight: 400;
3488
- white-space: normal;
3489
- border-bottom: 1px solid var(--color--accent);
3490
- box-sizing: border-box;
3491
- -webkit-box-sizing: border-box;
3492
- -webkit-box-align: center;
3493
- display: flex;
3494
- display: -webkit-box;
3495
- display: -ms-flexbox;
3496
- align-items: flex-end;
3497
- align-content: flex-end;
3498
- padding-left: 3px;
3499
- }
3500
-
3501
- .plogic--grid .header-cell > div > .grid-sort-arrow-ascending,
3502
- .plogic--grid .header-cell > div > .grid-sort-arrow-descending {
3503
- font-family: "Material Icons";
3504
- background: 0 0;
3505
- display: inline;
3506
- align-items: center;
3507
- -webkit-box-align: center;
3508
- -ms-flex-align: center;
3509
- align-content: center;
3510
- -ms-flex-line-pack: center;
3511
- -webkit-box-sizing: border-box;
3512
- box-sizing: border-box;
3513
- margin: 0;
3514
- padding: 0 0 3px 0;
3515
- min-height: var(--sans--h3--size);
3516
- min-width: var(--sans--h3--size);
3517
- }
3518
-
3519
- .plogic--grid .cell.header-cell > div.qf image {
3520
- display: inline;
3521
- }
3522
-
3523
- .plogic--grid .header-cell > input.qf {
3524
- border: 1px solid #999;
3525
- border-radius: 5px;
3526
- font-size: 16px;
3527
- padding: 2px;
3528
- }
3529
-
3530
- .plogic--grid .cell.header-cell > div,
3531
- .plogic--grid .cell.header-cell > div > div {
3532
- max-width: 100%;
3533
- font-weight: bolder;
3534
- letter-spacing: 1px;
3535
- position: unset !important;
3536
- margin-top: 0 !important;
3537
- margin-left: 2px;
3538
- padding: 0;
3539
- transform: none !important;
3540
- -webkit-transform: none !important;
3541
- -moz-transform: none !important;
3542
- -ms-transform: none !important;
3543
- -o-transform: none !important;
3544
- }
3545
- .plogic--grid .cell.header-cell > div > div {
3546
- display: inline-block;
3547
- }
3548
-
3549
- .plogic--grid .header-cell > div > .grid-sort-arrow-descending::after {
3550
- content: "arrow_downward";
3551
- }
3552
-
3553
- .plogic--grid .header-cell > div > .grid-sort-arrow-ascending::after {
3554
- content: "arrow_upward";
3555
- }
3556
-
3557
- .plogic--grid .cell > div:first-of-type {
3558
- -o-text-overflow: ellipsis;
3559
- text-overflow: ellipsis;
3560
- }
3561
-
3562
- .plogic--grid .cell > span:first-of-type {
3563
- min-width: 100%;
3564
- min-height: 100%;
3565
- }
3566
-
3567
- .plogic--grid .cell > span > div:first-of-type {
3568
- -o-text-overflow: ellipsis;
3569
- text-overflow: ellipsis;
3570
- }
3571
-
3572
- .plogic--grid .cell.even {
3573
- background: 0 0;
3574
- }
3575
-
3576
- .plogic--grid .cell.odd {
3577
- background: var(--color--cellodd--background);
3578
- }
3579
-
3580
- .plogic--grid .cell.even,
3581
- .plogic--grid .cell.odd {
3582
- border-bottom: 1px solid var(--color--accent);
3583
- -webkit-box-sizing: border-box;
3584
- box-sizing: border-box;
3585
- display: -webkit-box;
3586
- display: -ms-flexbox;
3587
- display: flex;
3588
- -ms-flex-line-pack: center;
3589
- align-content: center;
3590
- -webkit-box-align: center;
3591
- -ms-flex-align: center;
3592
- align-items: center;
3593
- -webkit-box-pack: start;
3594
- -ms-flex-pack: start;
3595
- justify-content: flex-start;
3596
- -webkit-transition: border-color 0.5s, color 0.5s, background 0.5s;
3597
- transition: border-color 0.5s, color 0.5s, background 0.5s;
3598
- -moz-transition: border-color 0.5s, color 0.5s, background 0.5s;
3599
- -ms-transition: border-color 0.5s, color 0.5s, background 0.5s;
3600
- -o-transition: border-color 0.5s, color 0.5s, background 0.5s;
3601
- cursor: pointer;
3602
- }
3603
-
3604
- .plogic--grid .cell.even > span,
3605
- .plogic--grid .cell.odd > span {
3606
- -webkit-box-sizing: border-box;
3607
- box-sizing: border-box;
3608
- display: -webkit-box;
3609
- display: -ms-flexbox;
3610
- display: flex;
3611
- -ms-flex-line-pack: center;
3612
- align-content: center;
3613
- -webkit-box-align: center;
3614
- -ms-flex-align: center;
3615
- align-items: center;
3616
- -webkit-box-pack: start;
3617
- -ms-flex-pack: start;
3618
- justify-content: flex-start;
3619
- -webkit-transition: border-color 0.5s, color 0.5s, background 0.5s;
3620
- transition: border-color 0.5s, color 0.5s, background 0.5s;
3621
- -moz-transition: border-color 0.5s, color 0.5s, background 0.5s;
3622
- -ms-transition: border-color 0.5s, color 0.5s, background 0.5s;
3623
- -o-transition: border-color 0.5s, color 0.5s, background 0.5s;
3624
- }
3625
-
3626
- .plogic--grid .cell.selected {
3627
- background: var(--color--accent);
3628
- }
3629
-
3630
- .plogic--grid .cell.selected > div:not(.BLU, .GRN, .PNK, .RED, .TRQ, .YLW, .pui-calendar-icon, .color-transparent) {
3631
- color: var(--color--accent--text);
3632
- }
3633
-
3634
- .plogic--grid .cell.hover.even,
3635
- .plogic--grid .cell.hover.odd {
3636
- background: var(--color--grid-cell--hover);
3637
- }
3638
-
3639
- .plogic--grid-hline,
3640
- .plogic--grid-vline {
3641
- border: none;
3642
- border-bottom: 3px solid transparent;
3643
- }
3644
-
3645
- .plogic--grid-hline {
3646
- margin-top: -2px;
3647
- }
3648
-
3649
- .plogic--grid-hline.grid-drop-target {
3650
- box-sizing: border-box;
3651
- border-bottom: 0.25rem dashed var(--color--accent);
3652
- border-radius: 0;
3653
- -webkit-border-radius: 0;
3654
- -moz-border-radius: 0;
3655
- -ms-border-radius: 0;
3656
- -o-border-radius: 0;
3657
- }
3658
-
3659
- .plogic--grid-paging-bar {
3660
- font-family: var(--default--sans-serif-family);
3661
- color: var(--color--primary--light--text);
3662
- height: var(--grid--row--height);
3663
- z-index: 9;
3664
- overflow: visible !important;
3665
- position: absolute;
3666
- background: var(--color--panel--background);
3667
- border-radius: 0 0 var(--default--border-radius) var(--default--border-radius);
3668
- border: 1px solid var(--color--grid-border);
3669
- }
3670
-
3671
- DIV.ND,
3672
- INPUT.ND {
3673
- display: none;
3674
- }
3675
-
3676
- .plogic--grid-paging-bar .paging-link {
3677
- color: var(--color--primary--light--text);
3678
- -webkit-box-flex: 1;
3679
- -ms-flex-positive: 1;
3680
- flex-grow: 1;
3681
- text-align: left;
3682
- }
3683
-
3684
- .plogic--grid-paging-bar .next-paging-link {
3685
- text-align: right;
3686
- padding-left: 10px;
3687
- padding-right: 5px;
3688
- }
3689
-
3690
- .plogic--grid-paging-bar .next-image-icon,
3691
- .plogic--grid-paging-bar .prev-image-icon {
3692
- background: 0 0;
3693
- display: none;
3694
- font-size: var(--default--font-size);
3695
- padding: 2px 0 0 0;
3696
- }
3697
-
3698
- .plogic--grid-paging-bar .export-image-icon {
3699
- background: 0 0;
3700
- min-height: var(--default--font-size);
3701
- min-width: var(--default--font-size);
3702
- }
3703
- .export-image-icon.csv-export-image-icon,
3704
- .export-image-icon.xlsx-export-image-icon {
3705
- padding: 3px 0 0 5px !important;
3706
- color: var(--color--excel);
3707
- }
3708
-
3709
- .plogic--grid-paging-bar .csv-export-image-icon::before {
3710
- content: "\f6dd";
3711
- font-family: "Font Awesome 5 Free";
3712
- text-rendering: optimizeLegibility;
3713
- font-feature-settings: "liga";
3714
- -webkit-font-feature-settings: "liga";
3715
- -moz-font-feature-settings: "liga";
3716
- font-weight: 900;
3717
- display: block;
3718
- }
3719
-
3720
- .plogic--grid-paging-bar .xlsx-export-image-icon::before {
3721
- content: "\f1c3";
3722
- font-family: "Font Awesome 5 Free";
3723
- text-rendering: optimizeLegibility;
3724
- font-feature-settings: "liga";
3725
- -webkit-font-feature-settings: "liga";
3726
- -moz-font-feature-settings: "liga";
3727
- font-weight: 900;
3728
- display: block;
3729
- }
3730
-
3731
- .plogic--grid-paging-bar .next-image-icon-disabled,
3732
- .plogic--grid-paging-bar .paging-link-disabled,
3733
- .plogic--grid-paging-bar .prev-image-icon-disabled {
3734
- color: var(--color--disabled--text);
3735
- }
3736
-
3737
- .plogic--grid-paging-bar > span.paging-number {
3738
- font-family: var(--default--sans-serif-family) !important;
3739
- font-size: var(--default--font-size) !important;
3740
- font-weight: var(--default--font-weight) !important;
3741
- flex-grow: 3;
3742
- margin: 0;
3743
- }
3744
-
3745
- .plogic--grid-paging-bar .next-image-icon.next-image-icon-disabled::after,
3746
- .plogic--grid-paging-bar .next-image-icon::after,
3747
- .plogic--grid-paging-bar .prev-image-icon.prev-image-icon-disabled::after,
3748
- .plogic--grid-paging-bar .prev-image-icon::after {
3749
- font-family: "Material Icons";
3750
- text-rendering: optimizeLegibility;
3751
- font-feature-settings: "liga";
3752
- }
3753
-
3754
- .plogic--grid-paging-bar .prev-image-icon::after {
3755
- content: "arrow_back_ios";
3756
- }
3757
-
3758
- .plogic--grid-paging-bar .next-image-icon::after {
3759
- content: "arrow_forward_ios";
3760
- }
3761
-
3762
- .plogic--grid-paging-bar .prev-image-icon.prev-image-icon-disabled::after {
3763
- color: var(--color--disabled--text);
3764
- content: "arrow_back_ios";
3765
- }
3766
-
3767
- .plogic--grid-paging-bar .next-image-icon.next-image-icon-disabled::after {
3768
- color: var(--color--disabled--text);
3769
- content: "arrow_forward_ios";
3770
- }
3771
-
3772
- /* Ripple Animation */
3773
-
3774
- .plogic--ripple {
3775
- background-position: center;
3776
- transition: background 0.4s, box-shadow 0.25s;
3777
- -webkit-transition: background 0.4s, box-shadow 0.25s;
3778
- -moz-transition: background 0.4s, box-shadow 0.25s;
3779
- -ms-transition: background 0.4s, box-shadow 0.25s;
3780
- -o-transition: background 0.4s, box-shadow 0.25s;
3781
- }
3782
-
3783
- /* PUI Tip */
3784
- .pui-tip-content {
3785
- box-sizing: content-box;
3786
- }
3787
-
3788
- [class*="plogic--"] ~ .pui-tip * {
3789
- transition: background 0.2s, opacity 0.2s;
3790
- -webkit-transition: background 0.2s, opacity 0.2s;
3791
- -moz-transition: background 0.2s, opacity 0.2s;
3792
- -ms-transition: background 0.2s, opacity 0.2s;
3793
- -o-transition: background 0.2s, opacity 0.2s;
3794
- }
3795
-
3796
- [class*="plogic--"] ~ .pui-tip.pui-tip-error {
3797
- background: var(--color--negative--light);
3798
- border: var(--color--negative--dark) 1px solid;
3799
- position: relative;
3800
- border-radius: var(--default--border-radius);
3801
- max-width: 300px;
3802
- padding: 0;
3803
- }
3804
-
3805
- div.genie-5250 div div.pui-tip.pui-tip-error {
3806
- position: relative !important;
3807
- }
3808
-
3809
- [class*="plogic--"] ~ .pui-tip.pui-tip-error > .pui-tip-content {
3810
- background: 0 0;
3811
- border: none;
3812
- display: flex;
3813
- align-content: center;
3814
- align-items: center;
3815
- justify-items: flex-start;
3816
- justify-content: space-around;
3817
- max-width: unset;
3818
- min-width: unset;
3819
- padding: 10px;
3820
- height: var(--standard--height);
3821
- text-align: left;
3822
- line-height: 150%;
3823
- font-size: 0.875rem;
3824
- font-style: var(--default--font-style);
3825
- font-weight: var(--default--font-weight);
3826
- letter-spacing: var(--default--spacing);
3827
- white-space: var(--default--white-space);
3828
- font-family: var(--default--sans-serif-family);
3829
- }
3830
-
3831
- [class*="plogic--"] ~ .pui-tip.pui-tip-error > .pui-tip-content > .pui-tip-icon {
3832
- background: 0 0;
3833
- border: 0;
3834
- height: auto;
3835
- width: auto;
3836
- }
3837
-
3838
- [class*="plogic--"] ~ .pui-tip.pui-tip-error > .pui-tip-content > .pui-tip-icon::before {
3839
- content: "sync_problem";
3840
- font-family: "Material Icons";
3841
- display: block;
3842
- font-size: var(--default--button--icon--font-size);
3843
- }
3844
-
3845
- [class*="plogic--"] ~ .pui-tip.pui-tip-error > .pui-tip-close,
3846
- [class*="plogic--"] ~ .pui-tip.pui-tip-error > .pui-tip-close-click {
3847
- background: 0 0;
3848
- border: none;
3849
- width: 100%;
3850
- height: 100%;
3851
- left: 0;
3852
- top: 0;
3853
- }
3854
-
3855
- [class*="plogic--"] ~ .pui-tip.pui-tip-error.pui-tip-right::before {
3856
- font-family: "Material Icons";
3857
- content: "play_arrow";
3858
- position: absolute;
3859
- top: calc(50% - 7px);
3860
- left: -9px;
3861
- z-index: 1;
3862
- color: var(--color--negative--light);
3863
- text-shadow: 1px -1px var(--color--negative--dark), 2px 0 var(--color--negative--dark), 1px 1px var(--color--negative--dark), 1px 1px var(--color--negative--dark);
3864
- transform: scaleX(-1);
3865
- }
3866
-
3867
- [class*="plogic--"] ~ .pui-tip.pui-tip-error.pui-tip-left::before {
3868
- font-family: "Material Icons";
3869
- content: "play_arrow";
3870
- position: absolute;
3871
- top: calc(50% - 7px);
3872
- right: -9px;
3873
- z-index: 1;
3874
- color: var(--color--negative--light);
3875
- text-shadow: 1px -1px var(--color--negative--dark), 2px 0 var(--color--negative--dark), 1px 1px var(--color--negative--dark), 1px 1px var(--color--negative--dark);
3876
- }
3877
-
3878
- icon.plogic--header {
3879
- width: 100%;
3880
- font-size: 1.6em;
3881
- text-align: center;
3882
- vertical-align: middle;
3883
- margin-top: 2px;
3884
- }
3885
-
3886
- .cell > .plogic--record-options,
3887
- .cell > span > .plogic--record-options {
3888
- border: none;
3889
- }
3890
-
3891
- /* Conversion Classes */
3892
-
3893
- /* SIDE BAR */
3894
-
3895
- /* HACK SIDE BAR */
3896
- .genie-side-bar.genie-div {
3897
- left: 60px;
3898
- }
3899
- /* HACK SIDE BAR */
3900
- .genie-side-menu.genie-div.genie-side-menu--opened slide-right {
3901
- left: 60px;
3902
- }
3903
- .genie-side-menu {
3904
- display: none;
3905
- }
3906
-
3907
- p,
3908
- ul,
3909
- li,
3910
- div,
3911
- nav {
3912
- padding: 0;
3913
- margin: 0;
3914
- }
3915
-
3916
- .plogic-nav-wrapper {
3917
- width: var(--sidebar--width);
3918
- background: linear-gradient(to right, var(--color--primary) var(--sidebar--width), var(--color--primary-90) var(--sidebar--width));
3919
- }
3920
- .plogic-nav-wrapper2 {
3921
- min-width: max-content;
3922
- width: var(--sidebar--width);
3923
- transition: width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
3924
- }
3925
- .plogic-nav-wrapper3 {
3926
- max-height: calc(100vh - 144px);
3927
- vertical-align: top;
3928
- display: flex;
3929
- display: -webkit-flex;
3930
- flex-flow: column;
3931
- -webkit-flex-flow: column;
3932
- }
3933
-
3934
- .plogic-nav-user {
3935
- font-weight: var(--default--font-weight);
3936
- background: linear-gradient(to right, var(--color--primary) var(--sidebar--width), var(--color--primary-90) var(--sidebar--width));
3937
- user-select: none;
3938
- }
3939
- .plogic-nav-user li {
3940
- border-color: white;
3941
- border-style: solid;
3942
- border-width: 0px 0px 0.1px 0px;
3943
- }
3944
-
3945
- .plogic-nav-more {
3946
- height: calc(100vh - 144px);
3947
- }
3948
-
3949
- .plogic-nav-menu,
3950
- .plogic-nav-more {
3951
- height: 100vh;
3952
- font-weight: var(--default--font-weight);
3953
- background: linear-gradient(to right, var(--color--primary) var(--sidebar--width), var(--color--primary-90) var(--sidebar--width));
3954
- user-select: none;
3955
- overflow: hidden overlay;
3956
- }
3957
- .plogic-nav-menu {
3958
- flex: 1;
3959
- -webkit-flex: 1;
3960
- }
3961
-
3962
- .plogic-nav-user ul,
3963
- .plogic-nav-menu ul,
3964
- .plogic-nav-more ul {
3965
- list-style-type: none;
3966
- }
3967
-
3968
- .plogic-nav-user ul li > span,
3969
- .plogic-nav-menu ul li > span,
3970
- .plogic-nav-more ul li > span {
3971
- padding: 10px 0px 10px 0px;
3972
- display: flex;
3973
- width: 100%;
3974
- min-height: 48px;
3975
- text-decoration: none;
3976
- line-height: 28px;
3977
- }
3978
-
3979
- ul.genie-ul {
3980
- cursor: pointer;
3981
- }
3982
-
3983
- .plogic-main-menu > li > span > span.opened::after {
3984
- content: "close";
3985
- }
3986
-
3987
- .pui-material-icons.plogic-side-bar-icon {
3988
- min-width: var(--sidebar--width);
3989
- cursor: pointer;
3990
- }
3991
-
3992
- .plogic-side-bar-text,
3993
- .plogic-side-bar-icon,
3994
- .plogic-nav-user .pui-material-icons,
3995
- .plogic-nav-menu .pui-material-icons,
3996
- .plogic-nav-user ul li ul li,
3997
- .plogic-nav-menu ul li ul li {
3998
- color: var(--color--primary--text);
3999
- line-height: 28px;
4000
- }
4001
-
4002
- .plogic-side-bar-text {
4003
- padding: 0px 10px 0px 10px;
4004
- line-height: 28px;
4005
- width: fit-content;
4006
- opacity: 1;
4007
- transition: opacity 0.5s ease, padding 0.3s ease;
4008
- white-space: nowrap;
4009
- }
4010
- .plogic-side-bar-text.hidden {
4011
- width: 0px;
4012
- padding: 0px 0px 0px 0px;
4013
- opacity: 0;
4014
- visibility: hidden;
4015
- display: block;
4016
- }
4017
-
4018
- .plogic-nav-user ul li span:hover,
4019
- .plogic-nav-menu ul li span:hover {
4020
- background-color: var(--color--primary--hover);
4021
- }
4022
- .plogic-nav-user ul li:hover > ul li:hover,
4023
- .plogic-nav-menu ul li:hover > ul li:hover {
4024
- background-color: var(--color--primary--dark--hover);
4025
- }
4026
-
4027
- .plogic-nav-user ul li:hover > ul {
4028
- z-index: 0;
4029
- left: var(--sidebar--width);
4030
- display: block;
4031
- background-color: var(--color--primary--dark);
4032
- }
4033
-
4034
- .plogic-nav-user ul li > ul {
4035
- z-index: -1;
4036
- top: 0;
4037
- display: none;
4038
- min-width: 200px;
4039
- position: absolute;
4040
- background-color: var(--color--primary--dark);
4041
- }
4042
-
4043
- .plogic-nav-user ul li > ul li span:hover,
4044
- .plogic-nav-menu ul li > ul li span:hover {
4045
- background-color: var(--color--primary--hover--dark);
4046
- }
4047
-
4048
- .plogic-nav-menu .child-menu-options {
4049
- padding: 12px 0px 10px 10px;
4050
- display: block;
4051
- }
4052
-
4053
- .plogic-nav-menu .child-menu-options {
4054
- padding: 12px 0px 10px 10px;
4055
- display: block;
4056
- }
4057
-
4058
- .plogic--side-bar * {
4059
- border-radius: 0;
4060
- }
4061
-
4062
- .plogic--side-bar > div > div {
4063
- overflow: unset!important;
4064
- min-height: 100%;
4065
- }
4066
-
4067
- .plogic--side-bar > div > div {
4068
- position: relative;
4069
- z-index: 10;
4070
- min-height: 100%;
4071
- min-width: 100%;
4072
- overflow: hidden auto;
4073
- display: grid;
4074
- grid-auto-flow: row;
4075
- grid-column-start: 1;
4076
- grid-row-start: 1;
4077
- grid-auto-columns: 100%;
4078
- grid-auto-rows: max-content;
4079
- background: var(--color--primary);
4080
- font-weight: var(--default--font-weight);
4081
- box-shadow: var(--elevation-dp3);
4082
- }
4083
-
4084
- .plogic--side-bar .plogic--menu-option:hover > .plogic--menu-option,
4085
- .plogic--side-bar .plogic--side-bar--menu:hover > .plogic--side-bar--menu {
4086
- cursor: pointer;
4087
- background: var(--color--primary--dark);
4088
- }
4089
-
4090
- .plogic--side-bar .plogic--menu-option > .plogic--menu-option,
4091
- .plogic--side-bar .plogic--side-bar--menu > .plogic--side-bar--menu {
4092
- width: 100%;
4093
- color: var(--color--primary--text);
4094
- font-size: 1.25rem;
4095
- }
4096
-
4097
- .plogic--side-bar .plogic--side-bar--menu {
4098
- margin: 1.125rem 0 0.75rem 0;
4099
- }
4100
-
4101
- .plogic--side-bar .plogic--side-bar--menu > .plogic--side-bar--menu {
4102
- font-size: 1.5rem;
4103
- font-weight: var(--sans--label--weight);
4104
- width: 100%;
4105
- padding: 0.75rem;
4106
- }
4107
-
4108
- .plogic--side-bar,
4109
- .plogic--side-bar .plogic--menu-option,
4110
- .plogic--side-bar .plogic--side-bar--menu {
4111
- position: unset !important;
4112
- height: 3rem;
4113
- display: flex;
4114
- align-items: center;
4115
- align-content: center;
4116
- justify-content: center;
4117
- justify-items: center;
4118
- } */
4119
-
4120
- .nav-link--exit_to_app {
4121
- transform: rotateY(180deg);
4122
- -webkit-transform: rotateY(180deg);
4123
- -moz-transform: rotateY(180deg);
4124
- -ms-transform: rotateY(180deg);
4125
- -o-transform: rotateY(180deg);
4126
- }
4127
-
4128
- .plogic--screen-layout,
4129
- .plogic--content-layout {
4130
- background: none;
4131
- overflow: visible !important;
4132
- }
4133
-
4134
- .plogic--screen-layout,
4135
- .plogic--screen-layout > div,
4136
- .plogic--screen-layout > div > div,
4137
- .plogic--content,
4138
- .plogic--content-layout,
4139
- .plogic--content > div,
4140
- .plogic--content-layout > div,
4141
- .plogic--content > div > div,
4142
- .plogic--content-layout > div > div {
4143
- overflow: visible !important;
4144
- display: flex;
4145
- min-width: 100%;
4146
- min-height: 100%;
4147
- }
4148
-
4149
- .plogic--content,
4150
- .plogic--content-layout {
4151
- position: unset !important;
4152
- flex-grow: 1;
4153
- order: 3;
4154
- overflow: visible;
4155
- }
4156
-
4157
- .plogic--constant,
4158
- .plogic--constant-right {
4159
- display: flex;
4160
- align-content: center;
4161
- align-items: center;
4162
- }
4163
- div:not(.cell) > .plogic--constant,
4164
- div:not(.cell) > .plogic--constant-right {
4165
- height: var(--standard--input--height);
4166
- }
4167
- .plogic--constant-right {
4168
- text-align: right;
4169
- display: inline-grid;
4170
- }
4171
- div.plogic--constant-right div {
4172
- display: contents;
4173
- }
4174
- div.plogic--constant-right div:first-of-type {
4175
- margin-left: auto;
4176
- }
4177
-
4178
- /* Designer Display Adjustments */
4179
-
4180
- [id*="dspfDesigner"] [style*="z-index: 701"],
4181
- [id*="dspfDesigner"] [style*="cursor: n-resize"],
4182
- [id*="dspfDesigner"] [style*="cursor: nw-resize"],
4183
- [id*="dspfDesigner"] [style*="cursor: ne-resize"],
4184
- [id*="dspfDesigner"] [style*="cursor: s-resize"],
4185
- [id*="dspfDesigner"] [style*="cursor: sw-resize"],
4186
- [id*="dspfDesigner"] [style*="cursor: se-resize"],
4187
- [id*="dspfDesigner"] [style*="cursor: w-resize"],
4188
- [id*="dspfDesigner"] [style*="cursor: e-resize"] {
4189
- box-sizing: unset;
4190
- }
4191
-
4192
- [id*="dspfDesigner"] .spinner-down-arrow-plogic--spinner,
4193
- [id*="dspfDesigner"] .spinner-up-arrow-plogic--spinner {
4194
- margin-left: -8px;
4195
- }
4196
-
4197
- [id*="dspfDesigner"] .spinner-up-arrow-plogic--spinner {
4198
- margin-top: -8px;
4199
- }
4200
-
4201
- [id*="dspfDesigner"] .spinner-down-arrow-plogic--spinner {
4202
- margin-top: 0;
4203
- }
4204
-
4205
- [id*="dspfDesigner"] .plogic--side-menu--closed,
4206
- .plogic--side-menu:not(.plogic--side-menu--closed) {
4207
- position: unset !important;
4208
- left: 3rem;
4209
- transition: left 1s ease-out;
4210
- }
4211
-
4212
- [id*="dspfDesigner"] .pui-calendar-icon.pui-cal.pui-cal-plogic--date-field {
4213
- margin-top: -8px;
4214
- margin-left: -39px;
4215
- }
4216
- [id*="dspfDesigner"] .cell .pui-calendar-icon.pui-cal.pui-cal-plogic--date-field {
4217
- height: 1.375rem;
4218
- width: 1.438rem;
4219
- margin: -3px 0px 0px -30px;
4220
- padding-left: 1px;
4221
- }
4222
-
4223
- [id*="dspfDesigner"] .plogic--side-menu--closed > div > div,
4224
- .plogic--side-menu > div > div {
4225
- position: relative;
4226
- z-index: 9;
4227
- height: 100%;
4228
- min-width: max-content;
4229
- max-width: 50vw;
4230
- overflow: hidden auto !important;
4231
- display: grid;
4232
- grid-auto-flow: row;
4233
- grid-auto-rows: max-content;
4234
- grid-auto-columns: 100%;
4235
- background: var(--color--primary--dark);
4236
- font-weight: var(--side-menu-font-weight);
4237
- box-shadow: var(--elevation-dp3);
4238
- transform-origin: center left;
4239
- }
4240
-
4241
- div.BLU,
4242
- input.BLU {
4243
- color: var(--color--blue);
4244
- }
4245
- div.GRN,
4246
- input.GRN {
4247
- color: var(--color--green);
4248
- }
4249
- div.GRN:not(.HI),
4250
- input.GRN:not(.HI) {
4251
- font-weight: 100;
4252
- }
4253
- div.PNK,
4254
- input.PNK {
4255
- color: var(--color--pink);
4256
- }
4257
- div.RED,
4258
- input.RED,
4259
- div.BL,
4260
- input.BL {
4261
- color: var(--color--red);
4262
- }
4263
- div.TRQ,
4264
- input.TRQ {
4265
- color: var(--color--cyan);
4266
- }
4267
- div.YLW,
4268
- input.YLW {
4269
- color: var(--color--orange);
4270
- }
4271
- div.YLW:not(.HI),
4272
- input.YLW:not(.HI) {
4273
- font-weight: 100;
4274
- }
4275
- div.WHT,
4276
- input.WHT {
4277
- color: var(--color--input);
4278
- }
4279
-
4280
- .cell.selected div.BLU,
4281
- .cell.selected input.PR.BLU {
4282
- color: var(--color--blue);
4283
- }
4284
- .cell.selected div.TRQ,
4285
- .cell.selected input.PR.TRQ {
4286
- color: #6ee0f7;
4287
- }
4288
- .cell.selected div.YLW,
4289
- .cell.selected input.PR.YLW {
4290
- color: #feb981;
4291
- }
4292
- .cell.selected div.PNK,
4293
- .cell.selected input.PR.PNK {
4294
- color: #ffb3cc;
4295
- }
4296
- .cell.selected div.GRN,
4297
- .cell.selected input.PR.GRN {
4298
- color: #146c43;
4299
- }
4300
- .cell.selected div.RED,
4301
- .cell.selected input.PR.RED {
4302
- color: #c32232;
4303
- }
4304
- .invisible-caret {
4305
- caret-color: transparent;
4306
- }
4307
-
4308
- INPUT.plogic--PR,
4309
- INPUT.plogic--PR-UL {
4310
- border: 0 solid #fff;
4311
- background: 0 0;
4312
- background-image: none;
4313
- }
4314
-
4315
- .plogic--RTL {
4316
- direction: rtl;
4317
- }
4318
-
4319
- INPUT.plogic--PR {
4320
- color: var(--color--accent);
4321
- }
4322
-
4323
- INPUT[type="password"].plogic--PR,
4324
- INPUT[type="password"].plogic--PR-UL {
4325
- visibility: hidden;
4326
- }
4327
-
4328
- INPUT.plogic--PR-UL {
4329
- text-decoration: underline;
4330
- color: var(--color--accent);
4331
- }
4332
-
4333
- DIV.plogic--BLU,
4334
- INPUT.plogic--BLU {
4335
- color: var(--color--primary);
4336
- }
4337
-
4338
- DIV.plogic--GRN,
4339
- INPUT.plogic--GRN {
4340
- color: var(--color--affirmative--dark);
4341
- }
4342
-
4343
- DIV.plogic--PNK,
4344
- INPUT.plogic--PNK {
4345
- color: var(--color--poppy--light);
4346
- }
4347
-
4348
- DIV.plogic--RED,
4349
- INPUT.plogic--RED {
4350
- color: var(--color--negative--dark);
4351
- }
4352
-
4353
- DIV.plogic--TRQ,
4354
- INPUT.plogic--TRQ {
4355
- color: var(--color--primary--light);
4356
- }
4357
-
4358
- DIV.plogic--WHT {
4359
- font-weight: 700;
4360
- color: var(--color--primary--light--text);
4361
- }
4362
-
4363
- DIV.plogic--YLW,
4364
- INPUT.plogic--YLW {
4365
- color: var(--color--warning--dark);
4366
- }
4367
-
4368
- DIV.plogic--RI {
4369
- background: var(--color--warning--dark);
4370
- }
4371
-
4372
- INPUT.plogic--RI {
4373
- background: var(--color--warning--dark);
4374
- background-image: none;
4375
- }
4376
-
4377
- DIV.plogic--UL {
4378
- text-decoration: underline;
4379
- }
4380
-
4381
- INPUT.plogic--UL {
4382
- text-decoration: none;
4383
- }
4384
-
4385
- DIV.plogic--BL,
4386
- INPUT.plogic--BL {
4387
- color: var(--color--negative--dark);
4388
- }
4389
-
4390
- DIV.plogic--HI,
4391
- DIV.plogic--YLW,
4392
- INPUT.plogic--HI,
4393
- INPUT.plogic--WHT {
4394
- font-weight: 700;
4395
- }
4396
-
4397
- div[puiwdgt="grid"] input[readonly="true"].PR::selection,
4398
- div[puiwdgt="grid"] input[readonly].PR::selection,
4399
- input[readonly="true"]::selection,
4400
- input[readonly]::selection,
4401
- input[readonly]::selection,
4402
- input.PR::selection {
4403
- background-color: transparent;
4404
- }
4405
-
4406
- .has-notes {
4407
- color: #339933;
4408
- cursor: pointer;
4409
- }
4410
-
4411
- .recipe-error {
4412
- color: #ff6600;
4413
- }
4414
-
4415
- .plogic--grid .cell.selected DIV.RI {
4416
- color: #000000;
4417
- }
4418
-
4419
- .selection-required {
4420
- background: var(--color--negative--light);
4421
- border: var(--color--negative--dark) 1px solid;
4422
- position: relative;
4423
- border-radius: var(--default--border-radius);
4424
- padding: 7px;
4425
- font-size: 0.875rem;
4426
- font-style: var(--default--font-style);
4427
- font-weight: var(--default--font-weight);
4428
- letter-spacing: var(--default--spacing);
4429
- white-space: var(--default--white-space);
4430
- font-family: var(--default--sans-serif-family);
4431
- color: #666666;
4432
- }
4433
-
4434
- input.plogic--input,
4435
- input.plogic--password-field {
4436
- background-color: var(--color--text--inverse);
4437
- }
4438
-
4439
- input.RI {
4440
- background-color: yellow;
4441
- }
4442
-
4443
- input.plogic--input.plogic--promptable {
4444
- padding-right: 30px;
4445
- }
4446
-
4447
- /* Prompt icon */
4448
- div.pui-prompt-plogic--input {
4449
- color: var(--color--secondary--dark);
4450
- margin-top: -4px;
4451
- margin-left: -39px;
4452
- z-index: 21;
4453
- background: var(--color--white);
4454
- padding: 5px 0px;
4455
- height: 2.125rem;
4456
- width: 2rem;
4457
- border-left: 1px solid var(--color--accent);
4458
- border-top-left-radius: 0px;
4459
- border-top-right-radius: 6px;
4460
- border-bottom-right-radius: 6px;
4461
- border-bottom-left-radius: 0px;
4462
- }
4463
- div.pui-prompt-plogic--input:hover {
4464
- color: var(--color--secondary--text);
4465
- background: var(--color--secondary);
4466
- }
4467
- div.pui-prompt-PR {
4468
- display: none;
4469
- }
4470
-
4471
- /* Collapse/Expand icon */
4472
- img[src="/profoundui/proddata/images/icons/collapseall.gif"],
4473
- img[src="/profoundui/proddata/images/icons/expandall.gif"] {
4474
- height: 24px;
4475
- margin: -6px 0px;
4476
- }
4477
-
4478
- /* Profound Custom CSS Loading Animation*/
4479
- .pui-animation {
4480
- top: 40px;
4481
- left: calc(50% - 25px);
4482
- z-index: 10001;
4483
- }
4484
-
4485
- .pui-animation:before {
4486
- border-top-color: var(--color--primary);
4487
- }
4488
-
4489
- .pui-animation:after {
4490
- border-top-color: var(--color--accent);
4491
- }
4492
-
4493
- /* Job info */
4494
- .job-info-bg {
4495
- position: absolute;
4496
- left: 0px;
4497
- top: 0px;
4498
- height: 100%;
4499
- width: 100%;
4500
- background: var(--color--secondary-40);
4501
- }
4502
- .copyMode-info,
4503
- .job-info {
4504
- position: absolute;
4505
- left: 50vw;
4506
- top: 50vh;
4507
- width: 500px;
4508
- background-color: white;
4509
- border: 1px solid #ccc;
4510
- border-radius: 10px;
4511
- box-shadow: var(--elevation-dp4);
4512
- transform: translateX(-50%) translateY(-50%);
4513
- }
4514
- .copyMode-info {
4515
- z-index: 10000002;
4516
- }
4517
- .copyMode-info table,
4518
- .job-info table {
4519
- margin-top: 25px;
4520
- margin-bottom: 25px;
4521
- margin-left: 20px;
4522
- }
4523
- .copyMode-info table td:nth-child(1),
4524
- .job-info table td:nth-child(1) {
4525
- font-weight: bold;
4526
- padding-bottom: 10px;
4527
- }
4528
-
4529
- .copyMode-info table td:nth-child(2),
4530
- .job-info table td:nth-child(2) {
4531
- padding-left: 15px;
4532
- padding-bottom: 10px;
4533
- }
4534
- .copyMode-info-title,
4535
- .job-info-title {
4536
- color: var(--color--info--dark);
4537
- font-family: Gudea;
4538
- font-size: 20px;
4539
- font-weight: bold;
4540
- text-align: center;
4541
- margin-top: 15px;
4542
- width: 100%;
4543
- }
4544
- .copyMode-info-x,
4545
- .job-info-x {
4546
- position: absolute;
4547
- top: 15px;
4548
- right: 15px;
4549
- height: var(--default--button--height);
4550
- width: var(--default--button--height);
4551
- cursor: pointer;
4552
- }
4553
-
4554
- .hidden,
4555
- .design div[puiwdgt="option buttons"] .hidden {
4556
- display: none;
4557
- }
4558
- .design .hidden {
4559
- display: flex;
4560
- }
4561
- .design [class*="plogic--"].hidden {
4562
- background: linear-gradient(to right, var(--color--blue), var(--color--gray), var(--color--red));
4563
- background-clip: text;
4564
- -webkit-text-fill-color: transparent;
4565
- }
4566
-
4567
- /**********/
4568
- /* Mobile */
4569
- /**********/
4570
- /* Adjust option buttons padding */
4571
- .mobile-device-layout .content-section div[puiwdgt="option buttons"] {
4572
- min-width: 0px;
4573
- padding: 0px 5px;
4574
- }
4575
-
4576
- html.plogic--mobile *::selection {
4577
- background: #3390cc;
4578
- color: white;
4579
- }
4580
- html.plogic--mobile body,
4581
- html.plogic--mobile #pui,
4582
- html.plogic--mobile .genie-screen--body,
4583
- html.plogic--mobile .plogic-scroll-bar-wrap {
4584
- top: 0px;
4585
- position: fixed;
4586
- }
4587
-
4588
- /* Mobile login background */
4589
- html.plogic--mobile.plogic--login body:before {
4590
- content: "";
4591
- display: block;
4592
- position: absolute;
4593
- left: 0;
4594
- top: 0;
4595
- width: 100%;
4596
- height: 100%;
4597
- background-position: center center;
4598
- background-size: cover;
4599
- background-image: url(/profoundui/userdata/images/plogic_login_background.jpg);
4600
- opacity: 1;
4601
- }
4602
-
4603
- @media screen and (max-device-width: 767px) {
4604
- html.plogic--mobile .plogic-nav-wrapper {
4605
- display: none;
4606
- }
4607
- html.plogic--mobile .genie-container {
4608
- width: 100vw;
4609
- margin: 0;
4610
- }
4611
- html.plogic--mobile .genie-screen--body div[id="5250"] {
4612
- min-width: 100vw;
4613
- overflow: hidden;
4614
- }
4615
- }
4616
-
4617
- /******************/
4618
- /* Mobile Top bar */
4619
- /******************/
4620
- div.mobile-device-layout td.top-bar,
4621
- div.mobile-device-layout div.top-bar {
4622
- background: #ffffff;
4623
- height: var(--mobile--top-bar--height);
4624
- }
4625
- div.mobile-device-layout.transparent td.top-bar,
4626
- div.mobile-device-layout.transparent div.top-bar {
4627
- background: var(--color--body--background);
4628
- }
4629
-
4630
- .mobile-device-layout td.top-bar {
4631
- color: var(--color--panel--header);
4632
- }
4633
- .mobile-device-layout td.top-bar .plogic--constant {
4634
- font-size: var(--sans--h3--size);
4635
- }
4636
-
4637
- /**************************/
4638
- /* Mobile content-section */
4639
- /**************************/
4640
- div.mobile-device-layout td.content-section,
4641
- div.mobile-device-layout div.content-section {
4642
- background-color: #ffffff;
4643
- }
4644
- div.mobile-device-layout.transparent td.content-section,
4645
- div.mobile-device-layout.transparent div.content-section {
4646
- background-color: rgba(0, 0, 0, 0);
4647
- background: rgba(0, 0, 0, 0);
4648
- }
4649
- div.mobile-device-layout div.content-section,
4650
- div.mobile-device-layout td.content-section {
4651
- width: 100% !important;
4652
- min-height: 1px;
4653
- height: 100% !important;
4654
- }
4655
- div.mobile-device-layout td.content-section {
4656
- border-top-color: var(--color--accent);
4657
- border-top-style: solid;
4658
- border-top-width: 0px;
4659
- border-bottom-color: var(--color--accent);
4660
- border-bottom-style: solid;
4661
- border-bottom-width: 1px;
4662
- }
4663
- div.mobile-device-layout.transparent td.content-section {
4664
- border-top-color: rgba(0, 0, 0, 0);
4665
- border-bottom-color: rgba(0, 0, 0, 0);
4666
- }
4667
-
4668
-
4669
- .mobile-device-layout input[class*="plogic--"]:not(.combo-main-box):not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"]):focus,
4670
- .mobile-device-layout textarea[class*="plogic--"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):focus,
4671
- .mobile-device-layout select[class*="plogic--"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):focus,
4672
- .mobile-device-layout button[class*="plogic--"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):focus,
4673
- .mobile-device-layout .combo-main.plogic--combo-box:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):focus-within {
4674
- box-shadow: var(--mobile--input--focus-ring);
4675
- -webkit-appearance: none; /* For iOS */
4676
- border: 1px solid var(--color--primary);
4677
- }
4678
- .mobile-device-layout .content-section input[class*="plogic--"],
4679
- .mobile-device-layout .content-section select[class*="plogic--"] {
4680
- height: var(--mobile--standard--height);
4681
- }
4682
- .mobile-device-layout .content-section div:not(.cell) > .plogic--constant,
4683
- .mobile-device-layout .content-section div:not(.cell) > .plogic--constant-right {
4684
- height: var(--mobile--standard--height);
4685
- }
4686
- .mobile-device-layout .content-section div[puiwdgt="option buttons"] div:not(.cell) > .plogic--constant,
4687
- .mobile-device-layout .content-section div[puiwdgt="option buttons"] div:not(.cell) > .plogic--constant-right,
4688
- .mobile-device-layout .content-section div[puiwdgt="option buttons"] button[class*="plogic--"] {
4689
- height: var(--standard--input--height);
4690
- }
4691
- .mobile-device-layout .content-section div[puiwdgt="option buttons"].plogic--option-buttons--double-row div:not(.cell) > .plogic--constant,
4692
- .mobile-device-layout .content-section div[puiwdgt="option buttons"].plogic--option-buttons--double-row div:not(.cell) > .plogic--constant-right,
4693
- .mobile-device-layout .content-section div[puiwdgt="option buttons"].plogic--option-buttons--double-row button[class*="plogic--"] {
4694
- height: 1.25rem;
4695
- }
4696
- .mobile-device-layout .content-section div[puiwdgt="option buttons"].plogic--option-buttons--double-row {
4697
- margin-top: -3px;
4698
- }
4699
- .mobile-device-layout .content-section .cell div[puiwdgt="combo box"] {
4700
- margin-top: 1px;
4701
- }
4702
- .mobile-device-layout .content-section .cell .plogic--combo-box,
4703
- .mobile-device-layout .content-section .cell input[class*="plogic--"],
4704
- .mobile-device-layout .content-section .cell select[class*="plogic--"] {
4705
- height: 1.188rem;
4706
- }
4707
- .mobile-device-layout .content-section .cell input[class*="plogic--checkbox"] {
4708
- height: 1rem;
4709
- }
4710
- .mobile-device-layout .content-section .plogic--grid-paging-bar {
4711
- height: var(--mobile--grid--row--height);
4712
- padding-top: 1px !important;
4713
- }
4714
- .mobile-device-layout .content-section [class*="plogic--"] {
4715
- font-size: var(--mobile--font-size);
4716
- }
4717
- .mobile-device-layout .content-section .plogic--monospace,
4718
- .mobile-device-layout .content-section .plogic--grid .cell.header-cell .plogic--monospace {
4719
- font-size: 0.938rem;
4720
- }
4721
- .mobile-device-layout .content-section .pui-material-icons {
4722
- font-size: 1.25rem;
4723
- }
4724
- .mobile-device-layout .content-section .pui-prompt.pui-prompt-plogic--input.pui-prompt-plogic--promptable {
4725
- margin: 3px -29px;
4726
- height: 1.25rem;
4727
- width: 1.375rem;
4728
- }
4729
- .mobile-device-layout .content-section .pui-cal.pui-cal-plogic--date-field.pui-calendar-icon::after {
4730
- font-size: 1rem;
4731
- margin: 2px 2px;
4732
- }
4733
- .mobile-device-layout .content-section div.pui-prompt-plogic--input {
4734
- padding: 2px 0px;
4735
- }
4736
- .mobile-device-layout .content-section .pui-calendar-icon.pui-cal.pui-cal-plogic--date-field {
4737
- margin-top: 1px;
4738
- margin-left: -28px;
4739
- background: var(--color--white);
4740
- padding: 0px;
4741
- height: 1.25rem;
4742
- width: 1.375rem;
4743
- }
4744
- [id*="dspfDesigner"] .mobile-device-layout .content-section .pui-calendar-icon.pui-cal.pui-cal-plogic--date-field {
4745
- margin-top: -1px;
4746
- margin-left: -29px;
4747
- }
4748
-
4749
- /*********************/
4750
- /* Mobile Bottom bar */
4751
- /*********************/
4752
- div.mobile-device-layout td.bottom-bar,
4753
- div.mobile-device-layout div.bottom-bar {
4754
- background: var(--color--body--background);
4755
- height: var(--mobile--bottom-bar--height);
4756
- }
4757
- div.mobile-device-layout.transparent td.bottom-bar,
4758
- div.mobile-device-layout.transparent div.bottom-bar {
4759
- background-color: rgba(0, 0, 0, 0);
4760
- background: rgba(0, 0, 0, 0);
4761
- }
4762
- div.mobile-device-layout td.bottom-bar div:not(.cell) > .plogic--constant,
4763
- div.mobile-device-layout td.bottom-bar div:not(.cell) > .plogic--constant-right {
4764
- height: 20px;
4765
- margin-top: -1px;
4766
- font-size: var(--mobile--font-size);
4767
- }
4768
- div.mobile-device-layout div.bottom-bar [class*="plogic--button"],
4769
- div.mobile-device-layout div.bottom-bar button[class*="plogic--"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):focus {
4770
- box-shadow: none;
4771
- border-radius: unset;
4772
- -webkit-border-radius: unset;
4773
- -moz-border-radius: unset;
4774
- -ms-border-radius: unset;
4775
- -o-border-radius: unset;
4776
- border: none;
4777
- }
4778
- /**************/
4779
- /* PUISCREENS */
4780
- /**************/
4781
- .plogic--card-panel.puiscreens--signonscrn,
4782
- .puiscreens--signonscrn--background,
4783
- .puiscreens--errscrn--background,
4784
- .puiscreens--eojscrn--background,
4785
- .puiscreens--timoutscrn--background {
4786
- transform: translate(-50%, -50%);
4787
- }
4788
- .puiscreens--errscrn--background,
4789
- .puiscreens--eojscrn--background,
4790
- .puiscreens--timoutscrn--background {
4791
- opacity: 0.5;
4792
- }
4793
- .pui-error-screen-maximize-icon {
4794
- color: var(--color--panel--header);
4795
- }
4796
-
4797
- /**************************************************************/
4798
- /********************* Transformation *************************/
4799
- /**************************************************************/
4800
- .flip-h,
4801
- .icon-flip-h span.pui-material-icons {
4802
- transform: scaleX(-1);
4803
- }
4804
- .flip-v,
4805
- .icon-flip-v span.pui-material-icons {
4806
- transform: scaleY(-1);
4807
- }
4808
-
4809
- /**************************************************************/
4810
- /************************ Scrollbar ***************************/
4811
- /**************************************************************/
4812
- .plogic--file-upload > .list-box ::-webkit-scrollbar,
4813
- .plogic--file-upload > .list-box::-webkit-scrollbar,
4814
- .plogic--drop-file-upload > .list-box ::-webkit-scrollbar,
4815
- .plogic--drop-file-upload > .list-box::-webkit-scrollbar {
4816
- width: 6px;
4817
- }
4818
-
4819
- .plogic--file-upload > .list-box ::-webkit-scrollbar-track,
4820
- .plogic--file-upload > .list-box::-webkit-scrollbar-track,
4821
- .plogic--drop-file-upload > .list-box ::-webkit-scrollbar-track,
4822
- .plogic--drop-file-upload > .list-box::-webkit-scrollbar-track {
4823
- background: var(--color--scroll-bar--track);
4824
- border-radius: 0;
4825
- }
4826
-
4827
- .plogic--file-upload > .list-box ::-webkit-scrollbar-thumb,
4828
- .plogic--file-upload > .list-box::-webkit-scrollbar-thumb,
4829
- .plogic--drop-file-upload > .list-box ::-webkit-scrollbar-thumb,
4830
- .plogic--drop-file-upload > .list-box::-webkit-scrollbar-thumb {
4831
- background: var(--color--accent);
4832
- border-radius: 20px;
4833
- }
4834
-
4835
- .plogic--file-upload > .list-box ::-webkit-scrollbar-thumb:hover,
4836
- .plogic--file-upload > .list-box::-webkit-scrollbar-thumb:hover,
4837
- .plogic--drop-file-upload > .list-box ::-webkit-scrollbar-thumb:hover,
4838
- .plogic--drop-file-upload > .list-box::-webkit-scrollbar-thumb:hover {
4839
- background: var(--color--secondary);
4840
- }
4841
-
4842
- /* Added ".pui-scrollbar" to exclude the body scroll bar from customization */
4843
- .plogic-scroll-bar-wrap .pui-scrollbar::-webkit-scrollbar {
4844
- width: 16px;
4845
- height: 16px;
4846
- }
4847
- .plogic-nav-menu::-webkit-scrollbar {
4848
- width: 0px;
4849
- }
4850
- .plogic-scroll-bar-wrap ::-webkit-scrollbar-thumb {
4851
- background-color: rgba(155, 155, 155, 0.3);
4852
- border: none;
4853
- }
4854
- .plogic-scroll-bar-wrap ::-webkit-scrollbar-thumb:hover {
4855
- background-color: rgba(155, 155, 155, 0.7);
4856
- }
4857
- .plogic-scroll-bar-wrap {
4858
- scrollbar-color: rgba(155, 155, 155, 0.3);
4859
- }
4860
- .plogic-scroll-bar-wrap ::-webkit-scrollbar-track {
4861
- background: transparent;
4862
- }
4863
- .plogic-scroll-bar-wrap ::-webkit-scrollbar-track:hover {
4864
- background: transparent;
4865
- }
4866
- .plogic-scroll-bar-wrap ::-webkit-scrollbar-track-piece {
4867
- background-color: transparent;
4868
- }
4869
- .plogic-scroll-bar-wrap ::-webkit-scrollbar-corner {
4870
- background: transparent;
4871
- }
4872
-
4873
- .pui-scrollbar-pui-scrollbar,
4874
- .pui-scrollbar.plogic--grid-pui-scrollbar {
4875
- -webkit-box-sizing: border-box;
4876
- box-sizing: border-box;
4877
- border-bottom: 1px solid transparent;
4878
- }
4879
- .pui-scrollbar-pui-scrollbar::-webkit-scrollbar-thumb,
4880
- .pui-scrollbar.plogic--grid-pui-scrollbar::-webkit-scrollbar-thumb {
4881
- background-color: rgba(155, 155, 155, 0.3);
4882
- border: none;
4883
- }
4884
- .pui-scrollbar-pui-scrollbar::-webkit-scrollbar-thumb:hover,
4885
- .pui-scrollbar.plogic--grid-pui-scrollbar::-webkit-scrollbar-thumb:hover {
4886
- background-color: rgba(155, 155, 155, 0.7);
4887
- }
4888
-
4889
- /**************************************************************/
4890
- /********************** Message Panels ************************/
4891
- /**************************************************************/
4892
- /* The message box panels should lie above grid lines (z-index 96). */
4893
- [id*="MsgBoxPanel"] {
4894
- z-index: 99;
4895
- }
4896
-
4897
- /**************************************************************/
4898
- /************************ KeyFrames ***************************/
4899
- /**************************************************************/
4900
-
4901
- /***** Slide Right *****/
4902
- .slide-right {
4903
- animation: 500ms slide-right;
4904
- animation-timing-function: ease-out;
4905
- }
4906
- @keyframes slide-right {
4907
- from {
4908
- margin-left: calc(-1 * var(--menu-max-width));
4909
- }
4910
- to {
4911
- margin-left: 0%;
4912
- }
4913
- }
4914
-
4915
- /***** Slide Left *****/
4916
- .slide-left {
4917
- animation: 500ms slide-left;
4918
- animation-timing-function: ease-in;
4919
- }
4920
- @keyframes slide-left {
4921
- from {
4922
- margin-left: 0%;
4923
- }
4924
- to {
4925
- margin-left: calc(-1 * var(--menu-max-width));
4926
- }
4927
- }
4928
-
4929
- /***** Blink *****/
4930
- @-webkit-keyframes blink {
4931
- 0% {
4932
- opacity: 1;
4933
- }
4934
- 100% {
4935
- opacity: 0;
4936
- }
4937
- }
4938
- @-moz-keyframes blink {
4939
- 0% {
4940
- opacity: 1;
4941
- }
4942
- 100% {
4943
- opacity: 0;
4944
- }
4945
- }
4946
- @-o-keyframes blink {
4947
- 0% {
4948
- opacity: 1;
4949
- }
4950
- 100% {
4951
- opacity: 0;
4952
- }
4953
- }
4954
- @keyframes blink {
4955
- 0% {
4956
- opacity: 1;
4957
- }
4958
- 100% {
4959
- opacity: 0;
4960
- }
4961
- }
4962
- /***** End of Blink *****/
4963
-
4964
- /***** zoom-in-zoom-out *****/
4965
- @keyframes zoom-in-zoom-out {
4966
- 0% {
4967
- transform: scale(1, 1);
4968
- }
4969
- 50% {
4970
- transform: scale(1.2, 1.2);
4971
- }
4972
- 100% {
4973
- transform: scale(1, 1);
4974
- }
4975
- }
4976
- /***** End of zoom-in-zoom-out *****/