forked from dingo35/SmartEVSE-3.5
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstyle.css
More file actions
513 lines (497 loc) · 38 KB
/
style.css
File metadata and controls
513 lines (497 loc) · 38 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
/*!
* Start Bootstrap - SB Admin 2 v4.1.3 (https://startbootstrap.com/theme/sb-admin-2)
* Copyright 2013-2021 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-sb-admin-2/blob/master/LICENSE)
*//*!
* Bootstrap v4.6.0 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/:root{--blue:#4e73df;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#e74a3b;--orange:#fd7e14;--yellow:#f6c23e;--green:#1cc88a;--teal:#20c9a6;--cyan:#36b9cc;--white:#fff;--gray:#858796;--gray-dark:#5a5c69;--primary:#4e73df;--secondary:#858796;--success:#1cc88a;--info:#36b9cc;--warning:#f6c23e;--danger:#e74a3b;--light:#f8f9fc;--dark:#5a5c69;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}main{display:block}body{margin:0;font-family:Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#858796;text-align:left;background-color:#fff}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}a{color:#4e73df;text-decoration:none;background-color:transparent}a:hover{color:#224abe;text-decoration:underline}a:not([href]):not([class]){color:inherit;text-decoration:none}a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}svg{overflow:hidden;vertical-align:middle}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,select{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}[hidden]{display:none!important}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-bottom:.5rem;font-weight:400;line-height:1.2}.h1,h1{font-size:2.5rem}.h2,h2{font-size:2rem}.h3,h3{font-size:1.75rem}.h4,h4{font-size:1.5rem}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}code{font-size:87.5%;color:#e83e8c;word-wrap:break-word}a>code{color:inherit}.container,.container-fluid,.container-md,.container-xl{width:100%;padding-right:.75rem;padding-left:.75rem;margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container,.container-md{max-width:720px}}@media (min-width:992px){.container,.container-md{max-width:960px}}@media (min-width:1200px){.container,.container-md,.container-xl{max-width:1140px}}.row{display:flex;flex-wrap:wrap;margin-right:-.75rem;margin-left:-.75rem}.no-gutters{margin-right:0;margin-left:0}.no-gutters>.col,.no-gutters>[class*=col-]{padding-right:0;padding-left:0}.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{position:relative;width:100%;padding-right:.75rem;padding-left:.75rem}.col{flex-basis:0;flex-grow:1;max-width:100%}.col-auto{flex:0 0 auto;width:auto;max-width:100%}.col-1{flex:0 0 8.33333%;max-width:8.33333%}.col-2{flex:0 0 16.66667%;max-width:16.66667%}.col-3{flex:0 0 25%;max-width:25%}.col-4{flex:0 0 33.33333%;max-width:33.33333%}.col-5{flex:0 0 41.66667%;max-width:41.66667%}.col-6{flex:0 0 50%;max-width:50%}.col-7{flex:0 0 58.33333%;max-width:58.33333%}.col-8{flex:0 0 66.66667%;max-width:66.66667%}.col-9{flex:0 0 75%;max-width:75%}.col-10{flex:0 0 83.33333%;max-width:83.33333%}.col-11{flex:0 0 91.66667%;max-width:91.66667%}.col-12{flex:0 0 100%;max-width:100%}@media (min-width:768px){.col-md{flex-basis:0;flex-grow:1;max-width:100%}.col-md-auto{flex:0 0 auto;width:auto;max-width:100%}.col-md-1{flex:0 0 8.33333%;max-width:8.33333%}.col-md-2{flex:0 0 16.66667%;max-width:16.66667%}.col-md-3{flex:0 0 25%;max-width:25%}.col-md-4{flex:0 0 33.33333%;max-width:33.33333%}.col-md-5{flex:0 0 41.66667%;max-width:41.66667%}.col-md-6{flex:0 0 50%;max-width:50%}.col-md-7{flex:0 0 58.33333%;max-width:58.33333%}.col-md-8{flex:0 0 66.66667%;max-width:66.66667%}.col-md-9{flex:0 0 75%;max-width:75%}.col-md-10{flex:0 0 83.33333%;max-width:83.33333%}.col-md-11{flex:0 0 91.66667%;max-width:91.66667%}.col-md-12{flex:0 0 100%;max-width:100%}}@media (min-width:1200px){.col-xl{flex-basis:0;flex-grow:1;max-width:100%}.col-xl-auto{flex:0 0 auto;width:auto;max-width:100%}.col-xl-1{flex:0 0 8.33333%;max-width:8.33333%}.col-xl-2{flex:0 0 16.66667%;max-width:16.66667%}.col-xl-3{flex:0 0 25%;max-width:25%}.col-xl-4{flex:0 0 33.33333%;max-width:33.33333%}.col-xl-5{flex:0 0 41.66667%;max-width:41.66667%}.col-xl-6{flex:0 0 50%;max-width:50%}.col-xl-7{flex:0 0 58.33333%;max-width:58.33333%}.col-xl-8{flex:0 0 66.66667%;max-width:66.66667%}.col-xl-9{flex:0 0 75%;max-width:75%}.col-xl-10{flex:0 0 83.33333%;max-width:83.33333%}.col-xl-11{flex:0 0 91.66667%;max-width:91.66667%}.col-xl-12{flex:0 0 100%;max-width:100%}}.form-control{display:block;width:100%;height:calc(1.5em + .75rem + 2px);padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#6e707e;background-color:#fff;background-clip:padding-box;border:1px solid #d1d3e2;border-radius:.35rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control::-ms-expand{background-color:transparent;border:0}.form-control:-moz-focusring{color:transparent;text-shadow:0 0 0 #6e707e}.form-control:focus{color:#6e707e;background-color:#fff;border-color:#bac8f3;outline:0;box-shadow:0 0 0 .2rem rgba(78,115,223,.25)}.form-control::-webkit-input-placeholder{color:#858796;opacity:1}.form-control::-moz-placeholder{color:#858796;opacity:1}.form-control:-ms-input-placeholder{color:#858796;opacity:1}.form-control::-ms-input-placeholder{color:#858796;opacity:1}.form-control::placeholder{color:#858796;opacity:1}.form-control:disabled,.form-control[readonly]{background-color:#eaecf4;opacity:1}input[type=date].form-control,input[type=datetime-local].form-control,input[type=month].form-control,input[type=time].form-control{-webkit-appearance:none;-moz-appearance:none;appearance:none}select.form-control:focus::-ms-value{color:#6e707e;background-color:#fff}select.form-control[multiple],select.form-control[size]{height:auto}.form-group{margin-bottom:1rem}.form-check{position:relative;display:block;padding-left:1.25rem}.form-check-input{position:absolute;margin-top:.3rem;margin-left:-1.25rem}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{color:#858796}.form-check-label{margin-bottom:0}.form-inline{display:flex;flex-flow:row wrap;align-items:center}.form-inline .form-check{width:100%}@media (min-width:576px){.form-inline label{display:flex;align-items:center;justify-content:center;margin-bottom:0}.form-inline .form-group{display:flex;flex:0 0 auto;flex-flow:row wrap;align-items:center;margin-bottom:0}.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}.form-inline .input-group{width:auto}.form-inline .form-check{display:flex;align-items:center;justify-content:center;width:auto;padding-left:0}.form-inline .form-check-input{position:relative;flex-shrink:0;margin-top:0;margin-right:.25rem;margin-left:0}}.btn-primary{color:#fff;background-color:#4e73df;border-color:#4e73df}.btn-primary:hover{color:#fff;background-color:#2e59d9;border-color:#2653d4}.btn-primary:focus{color:#fff;background-color:#2e59d9;border-color:#2653d4;box-shadow:0 0 0 .2rem rgba(105,136,228,.5)}.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#4e73df;border-color:#4e73df}.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active{color:#fff;background-color:#2653d4;border-color:#244ec9}.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus{box-shadow:0 0 0 .2rem rgba(105,136,228,.5)}.btn-success{color:#fff;background-color:#1cc88a;border-color:#1cc88a}.btn-success:hover{color:#fff;background-color:#17a673;border-color:#169b6b}.btn-success:focus{color:#fff;background-color:#17a673;border-color:#169b6b;box-shadow:0 0 0 .2rem rgba(62,208,156,.5)}.btn-success.disabled,.btn-success:disabled{color:#fff;background-color:#1cc88a;border-color:#1cc88a}.btn-success:not(:disabled):not(.disabled).active,.btn-success:not(:disabled):not(.disabled):active{color:#fff;background-color:#169b6b;border-color:#149063}.btn-success:not(:disabled):not(.disabled).active:focus,.btn-success:not(:disabled):not(.disabled):active:focus{box-shadow:0 0 0 .2rem rgba(62,208,156,.5)}.btn-info{color:#fff;background-color:#36b9cc;border-color:#36b9cc}.btn-info:hover{color:#fff;background-color:#2c9faf;border-color:#2a96a5}.btn-info:focus{color:#fff;background-color:#2c9faf;border-color:#2a96a5;box-shadow:0 0 0 .2rem rgba(84,196,212,.5)}.btn-info.disabled,.btn-info:disabled{color:#fff;background-color:#36b9cc;border-color:#36b9cc}.btn-info:not(:disabled):not(.disabled).active,.btn-info:not(:disabled):not(.disabled):active{color:#fff;background-color:#2a96a5;border-color:#278c9b}.btn-info:not(:disabled):not(.disabled).active:focus,.btn-info:not(:disabled):not(.disabled):active:focus{box-shadow:0 0 0 .2rem rgba(84,196,212,.5)}.btn-warning{color:#fff;background-color:#f6c23e;border-color:#f6c23e}.btn-warning:hover{color:#fff;background-color:#f4b619;border-color:#f4b30d}.btn-warning:focus{color:#fff;background-color:#f4b619;border-color:#f4b30d;box-shadow:0 0 0 .2rem rgba(247,203,91,.5)}.btn-warning.disabled,.btn-warning:disabled{color:#fff;background-color:#f6c23e;border-color:#f6c23e}.btn-warning:not(:disabled):not(.disabled).active,.btn-warning:not(:disabled):not(.disabled):active{color:#fff;background-color:#f4b30d;border-color:#e9aa0b}.btn-warning:not(:disabled):not(.disabled).active:focus,.btn-warning:not(:disabled):not(.disabled):active:focus{box-shadow:0 0 0 .2rem rgba(247,203,91,.5)}.btn-danger{color:#fff;background-color:#e74a3b;border-color:#e74a3b}.btn-danger:hover{color:#fff;background-color:#e02d1b;border-color:#d52a1a}.btn-danger:focus{color:#fff;background-color:#e02d1b;border-color:#d52a1a;box-shadow:0 0 0 .2rem rgba(235,101,88,.5)}.btn-danger.disabled,.btn-danger:disabled{color:#fff;background-color:#e74a3b;border-color:#e74a3b}.btn-danger:not(:disabled):not(.disabled).active,.btn-danger:not(:disabled):not(.disabled):active{color:#fff;background-color:#d52a1a;border-color:#ca2819}.btn-danger:not(:disabled):not(.disabled).active:focus,.btn-danger:not(:disabled):not(.disabled):active:focus{box-shadow:0 0 0 .2rem rgba(235,101,88,.5)}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.input-group>.form-control{position:relative;flex:1 1 auto;width:1%;min-width:0;margin-bottom:0}.input-group>.form-control+.form-control{margin-left:-1px}.input-group>.form-control:focus{z-index:3}.input-group>.form-control:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.input-group:not(.has-validation)>.custom-select:not(:last-child),.input-group:not(.has-validation)>.form-control:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.input-group-append{display:flex}.input-group-append .btn{position:relative;z-index:2}.input-group-append .btn:focus{z-index:3}.input-group-append .btn+.btn,.input-group-append .btn+.input-group-text,.input-group-append .input-group-text+.btn,.input-group-append .input-group-text+.input-group-text{margin-left:-1px}.input-group-append{margin-left:-1px}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid #e3e6f0;border-radius:.35rem}.card>.card>.list-group:first-child{border-top-width:0;border-top-left-radius:calc(.35rem - 1px);border-top-right-radius:calc(.35rem - 1px)}.card>.list-group:last-child{border-bottom-width:0;border-bottom-right-radius:calc(.35rem - 1px);border-bottom-left-radius:calc(.35rem - 1px)}.card-body{flex:1 1 auto;min-height:1px;padding:1.25rem}.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.35rem}.alert-link{font-weight:700}.alert-primary{color:#293c74;background-color:#dce3f9;border-color:#cdd8f6}.alert-primary .alert-link{color:#1c294e}.alert-success{color:#0f6848;background-color:#d2f4e8;border-color:#bff0de}.alert-success .alert-link{color:#093b29}.alert-info{color:#1c606a;background-color:#d7f1f5;border-color:#c7ebf1}.alert-info .alert-link{color:#113b42}.alert-warning{color:#806520;background-color:#fdf3d8;border-color:#fceec9}.alert-warning .alert-link{color:#574516}.alert-danger{color:#78261f;background-color:#fadbd8;border-color:#f8ccc8}.alert-danger .alert-link{color:#4f1915}.bg-primary{background-color:#4e73df!important}a.bg-primary:focus,a.bg-primary:hover,button.bg-primary:focus,button.bg-primary:hover{background-color:#2653d4!important}.bg-success{background-color:#1cc88a!important}a.bg-success:focus,a.bg-success:hover,button.bg-success:focus,button.bg-success:hover{background-color:#169b6b!important}.bg-info{background-color:#36b9cc!important}a.bg-info:focus,a.bg-info:hover,button.bg-info:focus,button.bg-info:hover{background-color:#2a96a5!important}.bg-warning{background-color:#f6c23e!important}a.bg-warning:focus,a.bg-warning:hover,button.bg-warning:focus,button.bg-warning:hover{background-color:#f4b30d!important}.bg-danger{background-color:#e74a3b!important}a.bg-danger:focus,a.bg-danger:hover,button.bg-danger:focus,button.bg-danger:hover{background-color:#d52a1a!important}.bg-white{background-color:#fff!important}.d-none{display:none!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.flex-column{flex-direction:column!important}.align-items-center{align-items:center!important}.shadow{box-shadow:0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important}.h-100{height:100%!important}.h-auto{height:auto!important}.m-0{margin:0!important}.mr-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.m-1{margin:.25rem!important}.mr-1{margin-right:.25rem!important}.mb-1{margin-bottom:.25rem!important}.m-2{margin:.5rem!important}.mr-2{margin-right:.5rem!important}.mb-2{margin-bottom:.5rem!important}.m-3{margin:1rem!important}.mr-3{margin-right:1rem!important}.mb-3{margin-bottom:1rem!important}.m-4{margin:1.5rem!important}.mr-4{margin-right:1.5rem!important}.mb-4{margin-bottom:1.5rem!important}.m-5{margin:3rem!important}.mr-5{margin-right:3rem!important}.mb-5{margin-bottom:3rem!important}.p-0{padding:0!important}.py-0{padding-top:0!important}.px-0{padding-right:0!important}.py-0{padding-bottom:0!important}.px-0{padding-left:0!important}.p-1{padding:.25rem!important}.py-1{padding-top:.25rem!important}.px-1{padding-right:.25rem!important}.py-1{padding-bottom:.25rem!important}.px-1{padding-left:.25rem!important}.p-2{padding:.5rem!important}.py-2{padding-top:.5rem!important}.px-2{padding-right:.5rem!important}.py-2{padding-bottom:.5rem!important}.px-2{padding-left:.5rem!important}.p-3{padding:1rem!important}.py-3{padding-top:1rem!important}.px-3{padding-right:1rem!important}.py-3{padding-bottom:1rem!important}.px-3{padding-left:1rem!important}.p-4{padding:1.5rem!important}.py-4{padding-top:1.5rem!important}.px-4{padding-right:1.5rem!important}.py-4{padding-bottom:1.5rem!important}.px-4{padding-left:1.5rem!important}.p-5{padding:3rem!important}.py-5{padding-top:3rem!important}.px-5{padding-right:3rem!important}.py-5{padding-bottom:3rem!important}.px-5{padding-left:3rem!important}.m-auto{margin:auto!important}.mr-auto{margin-right:auto!important}.mb-auto{margin-bottom:auto!important}@media (min-width:768px){.m-md-0{margin:0!important}.mr-md-0{margin-right:0!important}.mb-md-0{margin-bottom:0!important}.m-md-1{margin:.25rem!important}.mr-md-1{margin-right:.25rem!important}.mb-md-1{margin-bottom:.25rem!important}.m-md-2{margin:.5rem!important}.mr-md-2{margin-right:.5rem!important}.mb-md-2{margin-bottom:.5rem!important}.m-md-3{margin:1rem!important}.mr-md-3{margin-right:1rem!important}.mb-md-3{margin-bottom:1rem!important}.m-md-4{margin:1.5rem!important}.mr-md-4{margin-right:1.5rem!important}.mb-md-4{margin-bottom:1.5rem!important}.m-md-5{margin:3rem!important}.mr-md-5{margin-right:3rem!important}.mb-md-5{margin-bottom:3rem!important}.p-md-0{padding:0!important}.py-md-0{padding-top:0!important}.px-md-0{padding-right:0!important}.py-md-0{padding-bottom:0!important}.px-md-0{padding-left:0!important}.p-md-1{padding:.25rem!important}.py-md-1{padding-top:.25rem!important}.px-md-1{padding-right:.25rem!important}.py-md-1{padding-bottom:.25rem!important}.px-md-1{padding-left:.25rem!important}.p-md-2{padding:.5rem!important}.py-md-2{padding-top:.5rem!important}.px-md-2{padding-right:.5rem!important}.py-md-2{padding-bottom:.5rem!important}.px-md-2{padding-left:.5rem!important}.p-md-3{padding:1rem!important}.py-md-3{padding-top:1rem!important}.px-md-3{padding-right:1rem!important}.py-md-3{padding-bottom:1rem!important}.px-md-3{padding-left:1rem!important}.p-md-4{padding:1.5rem!important}.py-md-4{padding-top:1.5rem!important}.px-md-4{padding-right:1.5rem!important}.py-md-4{padding-bottom:1.5rem!important}.px-md-4{padding-left:1.5rem!important}.p-md-5{padding:3rem!important}.py-md-5{padding-top:3rem!important}.px-md-5{padding-right:3rem!important}.py-md-5{padding-bottom:3rem!important}.px-md-5{padding-left:3rem!important}.m-md-auto{margin:auto!important}.mr-md-auto{margin-right:auto!important}.mb-md-auto{margin-bottom:auto!important}}@media (min-width:1200px){.m-xl-0{margin:0!important}.mr-xl-0{margin-right:0!important}.mb-xl-0{margin-bottom:0!important}.m-xl-1{margin:.25rem!important}.mr-xl-1{margin-right:.25rem!important}.mb-xl-1{margin-bottom:.25rem!important}.m-xl-2{margin:.5rem!important}.mr-xl-2{margin-right:.5rem!important}.mb-xl-2{margin-bottom:.5rem!important}.m-xl-3{margin:1rem!important}.mr-xl-3{margin-right:1rem!important}.mb-xl-3{margin-bottom:1rem!important}.m-xl-4{margin:1.5rem!important}.mr-xl-4{margin-right:1.5rem!important}.mb-xl-4{margin-bottom:1.5rem!important}.m-xl-5{margin:3rem!important}.mr-xl-5{margin-right:3rem!important}.mb-xl-5{margin-bottom:3rem!important}.p-xl-0{padding:0!important}.py-xl-0{padding-top:0!important}.px-xl-0{padding-right:0!important}.py-xl-0{padding-bottom:0!important}.px-xl-0{padding-left:0!important}.p-xl-1{padding:.25rem!important}.py-xl-1{padding-top:.25rem!important}.px-xl-1{padding-right:.25rem!important}.py-xl-1{padding-bottom:.25rem!important}.px-xl-1{padding-left:.25rem!important}.p-xl-2{padding:.5rem!important}.py-xl-2{padding-top:.5rem!important}.px-xl-2{padding-right:.5rem!important}.py-xl-2{padding-bottom:.5rem!important}.px-xl-2{padding-left:.5rem!important}.p-xl-3{padding:1rem!important}.py-xl-3{padding-top:1rem!important}.px-xl-3{padding-right:1rem!important}.py-xl-3{padding-bottom:1rem!important}.px-xl-3{padding-left:1rem!important}.p-xl-4{padding:1.5rem!important}.py-xl-4{padding-top:1.5rem!important}.px-xl-4{padding-right:1.5rem!important}.py-xl-4{padding-bottom:1.5rem!important}.px-xl-4{padding-left:1.5rem!important}.p-xl-5{padding:3rem!important}.py-xl-5{padding-top:3rem!important}.px-xl-5{padding-right:3rem!important}.py-xl-5{padding-bottom:3rem!important}.px-xl-5{padding-left:3rem!important}.m-xl-auto{margin:auto!important}.mr-xl-auto{margin-right:auto!important}.mb-xl-auto{margin-bottom:auto!important}}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-uppercase{text-transform:uppercase!important}.font-weight-normal{font-weight:400!important}.font-weight-bold{font-weight:700!important}.text-white{color:#fff!important}.text-primary{color:#4e73df!important}a.text-primary:focus,a.text-primary:hover{color:#224abe!important}.text-success{color:#1cc88a!important}a.text-success:focus,a.text-success:hover{color:#13855c!important}.text-info{color:#36b9cc!important}a.text-info:focus,a.text-info:hover{color:#258391!important}.text-warning{color:#f6c23e!important}a.text-warning:focus,a.text-warning:hover{color:#dda20a!important}.text-danger{color:#e74a3b!important}a.text-danger:focus,a.text-danger:hover{color:#be2617!important}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}@page{size:a3}body{min-width:992px!important}.container{min-width:992px!important}}html{position:relative;min-height:100%}body{height:100%}a:focus{outline:0}#wrapper{display:flex}#wrapper #content-wrapper{background-color:#f8f9fc;width:100%;overflow-x:hidden}#wrapper #content-wrapper #content{flex:1 0 auto}.container,.container-fluid,.container-md,.container-xl{padding-left:1.5rem;padding-right:1.5rem}.text-gray-100{color:#f8f9fc!important}.text-gray-200{color:#eaecf4!important}.text-gray-300{color:#dddfeb!important}.text-gray-400{color:#d1d3e2!important}.text-gray-500{color:#b7b9cc!important}.text-gray-600{color:#858796!important}.text-gray-700{color:#6e707e!important}.text-gray-800{color:#5a5c69!important}.text-gray-900{color:#3a3b45!important}.border-left-primary{border-left:.25rem solid #4e73df!important}.border-left-success{border-left:.25rem solid #1cc88a!important}.border-left-info{border-left:.25rem solid #36b9cc!important}.border-left-warning{border-left:.25rem solid #f6c23e!important}.border-left-danger{border-left:.25rem solid #e74a3b!important}@-webkit-keyframes noise-anim{0%{clip:rect(49px,9999px,40px,0)}5%{clip:rect(75px,9999px,72px,0)}10%{clip:rect(97px,9999px,93px,0)}15%{clip:rect(15px,9999px,9px,0)}20%{clip:rect(14px,9999px,92px,0)}25%{clip:rect(18px,9999px,94px,0)}30%{clip:rect(17px,9999px,20px,0)}35%{clip:rect(71px,9999px,59px,0)}40%{clip:rect(42px,9999px,84px,0)}45%{clip:rect(56px,9999px,25px,0)}50%{clip:rect(46px,9999px,14px,0)}55%{clip:rect(47px,9999px,1px,0)}60%{clip:rect(64px,9999px,58px,0)}65%{clip:rect(89px,9999px,92px,0)}70%{clip:rect(56px,9999px,39px,0)}75%{clip:rect(80px,9999px,71px,0)}80%{clip:rect(8px,9999px,13px,0)}85%{clip:rect(66px,9999px,68px,0)}90%{clip:rect(68px,9999px,4px,0)}95%{clip:rect(56px,9999px,14px,0)}100%{clip:rect(28px,9999px,53px,0)}}@keyframes noise-anim{0%{clip:rect(49px,9999px,40px,0)}5%{clip:rect(75px,9999px,72px,0)}10%{clip:rect(97px,9999px,93px,0)}15%{clip:rect(15px,9999px,9px,0)}20%{clip:rect(14px,9999px,92px,0)}25%{clip:rect(18px,9999px,94px,0)}30%{clip:rect(17px,9999px,20px,0)}35%{clip:rect(71px,9999px,59px,0)}40%{clip:rect(42px,9999px,84px,0)}45%{clip:rect(56px,9999px,25px,0)}50%{clip:rect(46px,9999px,14px,0)}55%{clip:rect(47px,9999px,1px,0)}60%{clip:rect(64px,9999px,58px,0)}65%{clip:rect(89px,9999px,92px,0)}70%{clip:rect(56px,9999px,39px,0)}75%{clip:rect(80px,9999px,71px,0)}80%{clip:rect(8px,9999px,13px,0)}85%{clip:rect(66px,9999px,68px,0)}90%{clip:rect(68px,9999px,4px,0)}95%{clip:rect(56px,9999px,14px,0)}100%{clip:rect(28px,9999px,53px,0)}}@-webkit-keyframes noise-anim-2{0%{clip:rect(16px,9999px,10px,0)}5%{clip:rect(22px,9999px,29px,0)}10%{clip:rect(6px,9999px,68px,0)}15%{clip:rect(85px,9999px,95px,0)}20%{clip:rect(65px,9999px,91px,0)}25%{clip:rect(93px,9999px,68px,0)}30%{clip:rect(10px,9999px,27px,0)}35%{clip:rect(37px,9999px,25px,0)}40%{clip:rect(12px,9999px,23px,0)}45%{clip:rect(40px,9999px,18px,0)}50%{clip:rect(19px,9999px,71px,0)}55%{clip:rect(2px,9999px,35px,0)}60%{clip:rect(16px,9999px,69px,0)}65%{clip:rect(8px,9999px,65px,0)}70%{clip:rect(30px,9999px,57px,0)}75%{clip:rect(14px,9999px,4px,0)}80%{clip:rect(39px,9999px,30px,0)}85%{clip:rect(22px,9999px,35px,0)}90%{clip:rect(58px,9999px,71px,0)}95%{clip:rect(34px,9999px,90px,0)}100%{clip:rect(67px,9999px,68px,0)}}@keyframes noise-anim-2{0%{clip:rect(16px,9999px,10px,0)}5%{clip:rect(22px,9999px,29px,0)}10%{clip:rect(6px,9999px,68px,0)}15%{clip:rect(85px,9999px,95px,0)}20%{clip:rect(65px,9999px,91px,0)}25%{clip:rect(93px,9999px,68px,0)}30%{clip:rect(10px,9999px,27px,0)}35%{clip:rect(37px,9999px,25px,0)}40%{clip:rect(12px,9999px,23px,0)}45%{clip:rect(40px,9999px,18px,0)}50%{clip:rect(19px,9999px,71px,0)}55%{clip:rect(2px,9999px,35px,0)}60%{clip:rect(16px,9999px,69px,0)}65%{clip:rect(8px,9999px,65px,0)}70%{clip:rect(30px,9999px,57px,0)}75%{clip:rect(14px,9999px,4px,0)}80%{clip:rect(39px,9999px,30px,0)}85%{clip:rect(22px,9999px,35px,0)}90%{clip:rect(58px,9999px,71px,0)}95%{clip:rect(34px,9999px,90px,0)}100%{clip:rect(67px,9999px,68px,0)}}
/* LCD widget - responsive with percentage-based positioning */
.lcd {
position: relative;
padding: 0;
max-width: 300px;
}
.lcd .lcd-device {
width: 100%;
height: auto;
}
.lcd .lcd-screen {
position: absolute;
box-sizing: content-box;
top: 26%;
left: 15%;
width: 67.3%;
height: 28%;
image-rendering: pixelated;
object-fit: contain;
filter: hue-rotate(250deg) brightness(95%);
background-image: url('data:image/svg+xml,<svg width="36" height="36" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_aj0A{transform-origin:center;animation:spinner_KYSC .75s infinite linear}@keyframes spinner_KYSC{100%{transform:rotate(360deg)}}</style><path d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z" class="spinner_aj0A"/></svg>');
background-size: 25%;
background-position: center;
background-repeat: no-repeat;
background-color: #FDFDFD;
}
.lcd-buttons {
position: absolute;
top: 63%;
left: 5%;
width: 87%;
display: flex;
}
.lcd-display-buttons {
position: absolute;
top: 26%;
left: 15%;
width: 67.3%;
height: 28%;
display: flex;
}
#lcd .lcd-buttons button,
#lcd .lcd-display-buttons button {
flex: 1;
margin: 0;
padding: 10px;
border: none;
box-shadow: none;
background: transparent;
color: transparent;
text-shadow: none;
border-radius: 50px;
min-width: 0;
}
#lcd .lcd-buttons button:hover {
outline: 2px dotted black;
}
#lcd .lcd-display-buttons button:focus,
#lcd .lcd-display-buttons button:focus-visible {
outline: none;
box-shadow: none;
}
#lcd .lcd-password {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
max-width: 300px;
margin: 8px 0 0;
flex-wrap: wrap;
}
#lcd #lcd-password {
width: 100px;
}
#lcd #lcd-lock-status {
margin-left: auto;
text-align: right;
}
#lcd #lcd-lock-hint {
max-width: 300px;
margin: 6px 0 0;
color: #6e707e;
font-size: .85rem;
line-height: 1.3;
}
#lcd .lcd-activate {
position: absolute;
display: grid;
place-content: center;
width: 67.3%;
height: 28%;
top: 26%;
left: 15%;
background-color: rgba(245, 245, 245, .7);
font-size: 1.5rem;
opacity: 0;
user-select: none;
cursor: pointer;
transition: opacity 0.3s ease;
}
#lcd .lcd-activate:hover {
opacity: 1;
}
.lcd-kbd-hint {
font-size: .75rem;
color: #858796;
margin-top: 4px;
}
/* --- Buttons (replaces jQuery Mobile button styles) --- */
#content button, #content a.btn {
display: inline-block;
min-width: 100px;
padding: .4em .8em;
margin: .2em .15em;
border: 1px solid #ddd;
border-radius: .35rem;
background-color: #f6f6f6;
color: #333;
font-size: .9rem;
font-weight: 400;
text-align: center;
text-decoration: none;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
#content button:hover, #content a.btn:hover {
background-color: #e9e9e9;
text-decoration: none;
}
#content button:active, #content a.btn:active {
background-color: #ddd;
}
/* Active mode button (green highlight). */
#content button.active {
background-color: #1cc88a;
color: #333;
border-color: #1ab87f;
text-shadow: 0 1px 0 #f3f3f3;
}
/* Consistent form margins for labels and inputs. */
.form-group label, .form-inline {
margin-right: .25rem;
gap: .25rem;
}
/* --- Tooltips (moved from inline styles) --- */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
opacity: unset;
font-size: inherit;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 220px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -110px;
font-size: .875rem;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
/* --- Checkboxes (replaces jQuery Mobile checkboxradio widget) --- */
input[type="checkbox"] {
width: 1.1em;
height: 1.1em;
vertical-align: middle;
cursor: pointer;
accent-color: #1cc88a;
}
/* --- Disabled fields --- */
input:disabled, select:disabled, textarea:disabled, button:disabled {
opacity: .5;
cursor: not-allowed;
}
/* --- Dashboard Grid (Increment 3) --- */
.dashboard-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 768px) {
.dashboard-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
.dashboard-grid { grid-template-columns: repeat(3, 1fr); }
}
.dashboard-grid > .card-wide {
grid-column: 1 / -1;
}
/* --- State indicator dot --- */
.state-dot {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
}
/* --- Phase current bars --- */
.phase-bars {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 8px;
}
.phase-bar-row {
display: flex;
align-items: center;
gap: 8px;
}
.phase-bar-label {
width: 24px;
font-size: .8rem;
font-weight: 700;
color: #5a5c69;
}
.phase-bar-track {
flex: 1;
height: 10px;
background: #e3e6f0;
border-radius: 5px;
overflow: hidden;
}
.phase-bar-fill {
height: 100%;
border-radius: 5px;
transition: width 0.4s ease;
min-width: 2px;
}
.phase-bar-L1 { background: #4e73df; }
.phase-bar-L2 { background: #1cc88a; }
.phase-bar-L3 { background: #f6c23e; }
.phase-bar-value {
width: 55px;
text-align: right;
font-size: .85rem;
color: #5a5c69;
}
/* --- Power flow diagram --- */
.power-flow-card {
grid-column: 1 / -1;
}
.power-flow-card svg {
width: 100%;
max-width: 600px;
margin: 0 auto;
display: block;
}
.pf-line {
fill: none;
stroke: #b7b9cc;
stroke-width: 2;
stroke-dasharray: 8 4;
stroke-linecap: round;
}
.pf-line.flow-fwd {
stroke: #4e73df;
animation: pf-fwd 0.8s linear infinite;
}
.pf-line.flow-rev {
stroke: #1cc88a;
animation: pf-rev 0.8s linear infinite;
}
.pf-line.flow-none {
stroke: #d1d3e2;
stroke-dasharray: 4 6;
animation: none;
}
@keyframes pf-fwd {
from { stroke-dashoffset: 12; }
to { stroke-dashoffset: 0; }
}
@keyframes pf-rev {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: 12; }
}
.pf-node-label {
font-size: 11px;
fill: #5a5c69;
text-anchor: middle;
font-weight: 700;
}
.pf-node-value {
font-size: 10px;
fill: #858796;
text-anchor: middle;
}
.pf-icon {
fill: #5a5c69;
}
/* --- Diagnostic viewer --- */
.diag-log {
max-height: 300px;
overflow-y: auto;
font-family: monospace;
font-size: .78rem;
line-height: 1.4;
padding: 4px;
background: #f8f9fc;
border: 1px solid #e3e6f0;
border-radius: 4px;
}
.diag-row { padding: 2px 4px; border-bottom: 1px solid #eee; white-space: nowrap; }
.diag-row.sev-err { background: #fde8e6; color: #78261f; }
.diag-row.sev-warn { background: #fef8e5; color: #806520; }
.diag-row .diag-ts { color: #858796; margin-right: 8px; }
.diag-row .diag-state { font-weight: 700; margin-right: 6px; }
.diag-controls { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.diag-controls select, .diag-controls button { font-size: .8rem; padding: 3px 8px; }
.diag-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: .7rem; font-weight: 600; }
.diag-badge-on { background: #1cc88a; color: #fff; }
.diag-badge-off { background: #858796; color: #fff; }
[data-theme="dark"] .diag-log { background: #0f3460; border-color: #2d2d4a; }
[data-theme="dark"] .diag-row { border-bottom-color: #2d2d4a; }
[data-theme="dark"] .diag-row.sev-err { background: #3b1a1a; color: #f8ccc8; }
[data-theme="dark"] .diag-row.sev-warn { background: #3b3010; color: #fceec9; }
/* --- Mobile bottom navigation --- */
.mobile-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-top: 2px solid #e3e6f0;
padding: 6px 0;
z-index: 100;
justify-content: space-around;
box-shadow: 0 -2px 8px rgba(0,0,0,.08);
}
.mobile-nav button {
flex: 1;
border: none;
background: transparent;
padding: 6px 4px;
font-size: .75rem;
font-weight: 600;
color: #858796;
cursor: pointer;
min-width: 0;
box-shadow: none;
margin: 0;
}
.mobile-nav button.active {
color: #1cc88a;
background: transparent;
border: none;
box-shadow: none;
}
@media (max-width: 767px) {
.mobile-nav { display: flex; }
body { padding-bottom: 56px; }
}
/* --- Dark mode (Increment 5) --- */
/* Theme toggle button */
.theme-toggle {
background: none;
border: 1px solid rgba(255,255,255,.4);
border-radius: 50%;
width: 30px;
height: 30px;
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 0;
margin-left: 10px;
vertical-align: middle;
color: #fff;
box-shadow: none;
min-width: unset;
}
.theme-toggle:hover { border-color: #fff; }
/* Dark theme overrides */
[data-theme="dark"] body,
[data-theme="dark"] #content-wrapper {
background-color: #1a1a2e !important;
color: #d1d3e2 !important;
}
[data-theme="dark"] .card {
background-color: #16213e !important;
border-color: #2d2d4a !important;
}
[data-theme="dark"] .text-gray-800 {
color: #d1d3e2 !important;
}
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-700 {
color: #b7b9cc !important;
}
[data-theme="dark"] .shadow {
box-shadow: 0 .15rem 1.75rem 0 rgba(0,0,0,.4) !important;
}
[data-theme="dark"] .form-control,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
background-color: #0f3460 !important;
border-color: #2d2d4a !important;
color: #d1d3e2 !important;
}
[data-theme="dark"] #content button,
[data-theme="dark"] #content a.btn {
background-color: #0f3460;
border-color: #2d2d4a;
color: #d1d3e2;
}
[data-theme="dark"] #content button:hover,
[data-theme="dark"] #content a.btn:hover {
background-color: #1a4a7a;
}
[data-theme="dark"] #content button.active {
background-color: #1cc88a;
color: #1a1a2e;
}
[data-theme="dark"] .mobile-nav {
background: #16213e;
border-top-color: #2d2d4a;
}
[data-theme="dark"] .mobile-nav button {
color: #858796;
}
[data-theme="dark"] .tooltip .tooltiptext {
background-color: #2d2d4a;
}
[data-theme="dark"] .phase-bar-track {
background: #2d2d4a;
}
[data-theme="dark"] .pf-icon { fill: #b7b9cc; }
[data-theme="dark"] .pf-node-label { fill: #d1d3e2; }
[data-theme="dark"] .pf-node-value { fill: #b7b9cc; }
[data-theme="dark"] .pf-line.flow-none { stroke: #2d2d4a; }
[data-theme="dark"] .phase-bar-value { color: #b7b9cc; }
[data-theme="dark"] .phase-bar-label { color: #b7b9cc; }
[data-theme="dark"] .alert-success {
background-color: #0f3460 !important;
border-color: #1cc88a !important;
color: #d1d3e2 !important;
}
[data-theme="dark"] #lcd-lock-hint { color: #b7b9cc; }
/* Auto-detect system preference */
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) body,
html:not([data-theme="light"]) #content-wrapper {
background-color: #1a1a2e !important;
color: #d1d3e2 !important;
}
html:not([data-theme="light"]) .card {
background-color: #16213e !important;
border-color: #2d2d4a !important;
}
html:not([data-theme="light"]) .text-gray-800 { color: #d1d3e2 !important; }
html:not([data-theme="light"]) .shadow { box-shadow: 0 .15rem 1.75rem 0 rgba(0,0,0,.4) !important; }
html:not([data-theme="light"]) .form-control,
html:not([data-theme="light"]) input,
html:not([data-theme="light"]) select,
html:not([data-theme="light"]) textarea {
background-color: #0f3460 !important;
border-color: #2d2d4a !important;
color: #d1d3e2 !important;
}
html:not([data-theme="light"]) #content button,
html:not([data-theme="light"]) #content a.btn {
background-color: #0f3460;
border-color: #2d2d4a;
color: #d1d3e2;
}
html:not([data-theme="light"]) #content button.active {
background-color: #1cc88a;
color: #1a1a2e;
}
html:not([data-theme="light"]) .mobile-nav {
background: #16213e;
border-top-color: #2d2d4a;
}
html:not([data-theme="light"]) .pf-icon { fill: #b7b9cc; }
html:not([data-theme="light"]) .pf-node-label { fill: #d1d3e2; }
html:not([data-theme="light"]) .phase-bar-track { background: #2d2d4a; }
}