@khanacademy/perseus 58.0.0 → 59.0.0

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.
@@ -0,0 +1,3184 @@
1
+ .perseus-sr-only {
2
+ border: 0;
3
+ clip: rect(0, 0, 0, 0);
4
+ font-size: 0;
5
+ height: 1px;
6
+ margin: -1px;
7
+ overflow: hidden;
8
+ padding: 0;
9
+ position: absolute;
10
+ width: 1px;
11
+ }
12
+ .perseus-clearfix {
13
+ *zoom: 1;
14
+ }
15
+ .perseus-clearfix:before,
16
+ .perseus-clearfix:after {
17
+ content: "";
18
+ display: table;
19
+ }
20
+ .perseus-clearfix:after {
21
+ clear: both;
22
+ }
23
+ /**
24
+ * This file contains styles that are used in prod that ultimately
25
+ * get passed onto Perseus components. This file is imported in the
26
+ * .storybook/preview.js file so that the components can have the same
27
+ * styles as prod when viewed within Storybook.
28
+ */
29
+ @layer reset, shared, legacy;
30
+ @layer reset {
31
+ /* http://meyerweb.com/eric/tools/css/reset/
32
+ v2.0 | 20110126
33
+ License: none (public domain)
34
+ */
35
+
36
+ html,
37
+ body,
38
+ div,
39
+ span,
40
+ applet,
41
+ object,
42
+ iframe,
43
+ h1,
44
+ h2,
45
+ h3,
46
+ h4,
47
+ h5,
48
+ h6,
49
+ p,
50
+ blockquote,
51
+ pre,
52
+ a,
53
+ abbr,
54
+ acronym,
55
+ address,
56
+ big,
57
+ cite,
58
+ code,
59
+ del,
60
+ dfn,
61
+ em,
62
+ img,
63
+ ins,
64
+ kbd,
65
+ q,
66
+ s,
67
+ samp,
68
+ small,
69
+ strike,
70
+ strong,
71
+ sub,
72
+ sup,
73
+ tt,
74
+ var,
75
+ b,
76
+ u,
77
+ i,
78
+ center,
79
+ dl,
80
+ dt,
81
+ dd,
82
+ ol,
83
+ ul,
84
+ li,
85
+ fieldset,
86
+ form,
87
+ label,
88
+ legend,
89
+ table,
90
+ caption,
91
+ tbody,
92
+ tfoot,
93
+ thead,
94
+ tr,
95
+ th,
96
+ td,
97
+ article,
98
+ aside,
99
+ canvas,
100
+ details,
101
+ embed,
102
+ figure,
103
+ figcaption,
104
+ footer,
105
+ header,
106
+ hgroup,
107
+ menu,
108
+ nav,
109
+ output,
110
+ ruby,
111
+ section,
112
+ summary,
113
+ time,
114
+ mark,
115
+ audio,
116
+ video {
117
+ margin: 0;
118
+ padding: 0;
119
+ border: 0;
120
+ font-size: 100%;
121
+ font: inherit;
122
+ vertical-align: baseline;
123
+ }
124
+ /* HTML5 display-role reset for older browsers */
125
+ article,
126
+ aside,
127
+ details,
128
+ figcaption,
129
+ figure,
130
+ footer,
131
+ header,
132
+ hgroup,
133
+ menu,
134
+ nav,
135
+ section {
136
+ display: block;
137
+ }
138
+ body {
139
+ line-height: 1;
140
+ }
141
+ ol,
142
+ ul {
143
+ list-style: none;
144
+ }
145
+ blockquote,
146
+ q {
147
+ quotes: none;
148
+ }
149
+ blockquote:before,
150
+ blockquote:after,
151
+ q:before,
152
+ q:after {
153
+ content: "";
154
+ content: none;
155
+ }
156
+ table {
157
+ border-collapse: collapse;
158
+ border-spacing: 0;
159
+ }
160
+
161
+ /* End Reset */
162
+
163
+ }
164
+ @layer shared {
165
+ html,
166
+ body {
167
+ height: 100%;
168
+ }
169
+ body {
170
+ font-family: "Lato", "Noto Sans", "Helvetica", "Corbel", sans-serif, "Helvetica", "Corbel", sans-serif;
171
+ font-size: 14px;
172
+ margin: 0;
173
+ color: #21242c;
174
+ line-height: 1.4;
175
+ min-width: 0;
176
+ }
177
+ .box-sizing-border-box-reset {
178
+ box-sizing: border-box;
179
+ }
180
+ .box-sizing-border-box-reset * {
181
+ box-sizing: inherit;
182
+ }
183
+ }
184
+ .framework-perseus code {
185
+ font-family: Courier, monospace;
186
+ }
187
+ .framework-perseus pre {
188
+ background-color: #f0f1f2;
189
+ border-radius: 4px;
190
+ color: #21242c;
191
+ font-size: 18px;
192
+ padding: 16px;
193
+ white-space: pre;
194
+ overflow: auto;
195
+ }
196
+ .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-widget-container:not(.perseus-widget__definition) {
197
+ font-size: 14px;
198
+ line-height: 19.6px;
199
+ }
200
+ .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-widget-container.widget-float-left,
201
+ .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-widget-container.widget-float-right {
202
+ max-width: 50%;
203
+ padding-top: 32px;
204
+ width: 100%;
205
+ }
206
+ .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-widget-container.widget-float-left .perseus-image-caption .paragraph .paragraph,
207
+ .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-widget-container.widget-float-right .perseus-image-caption .paragraph .paragraph {
208
+ margin-bottom: 0;
209
+ }
210
+ .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-widget-container.widget-float-left {
211
+ float: left;
212
+ padding-right: 32px;
213
+ }
214
+ .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-widget-container.widget-float-right {
215
+ float: right;
216
+ padding-left: 32px;
217
+ }
218
+ .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-renderer > .paragraph {
219
+ color: #21242c;
220
+ font-size: 20px;
221
+ line-height: 30px;
222
+ margin: 0 auto;
223
+ max-width: 688px;
224
+ }
225
+ .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-renderer > .paragraph .paragraph {
226
+ color: #21242c;
227
+ font-size: 20px;
228
+ line-height: 30px;
229
+ margin-bottom: 32px;
230
+ margin-top: 0;
231
+ }
232
+ .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-renderer > .paragraph mjx-container {
233
+ font-size: 100%;
234
+ }
235
+ .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-renderer > .paragraph ul:not(.perseus-widget-radio) {
236
+ color: #21242c;
237
+ font-size: 20px;
238
+ line-height: 30px;
239
+ }
240
+ .framework-perseus.perseus-article:not(.perseus-mobile) table {
241
+ color: #21242c;
242
+ font-size: 20px;
243
+ line-height: 30px;
244
+ margin-bottom: 32px;
245
+ }
246
+ .framework-perseus.perseus-article:not(.perseus-mobile) h2 {
247
+ font-family: inherit;
248
+ font-size: 30px;
249
+ font-weight: 700;
250
+ line-height: 1.1;
251
+ margin-bottom: 16px;
252
+ margin-top: 48px;
253
+ }
254
+ .framework-perseus.perseus-article:not(.perseus-mobile) h3 {
255
+ font-family: inherit;
256
+ font-size: 26px;
257
+ font-weight: 700;
258
+ line-height: 1.1;
259
+ margin-bottom: 16px;
260
+ margin-top: 32px;
261
+ }
262
+ .framework-perseus.perseus-article:not(.perseus-mobile) h4,
263
+ .framework-perseus.perseus-article:not(.perseus-mobile) h5,
264
+ .framework-perseus.perseus-article:not(.perseus-mobile) h6 {
265
+ font-family: inherit;
266
+ font-size: 22px;
267
+ font-weight: 700;
268
+ line-height: 25px;
269
+ margin-bottom: 16px;
270
+ margin-top: 32px;
271
+ }
272
+ .framework-perseus.perseus-article:not(.perseus-mobile) blockquote {
273
+ padding: 0 32px;
274
+ }
275
+ .framework-perseus.perseus-article:not(.perseus-mobile) .MathJax .math {
276
+ color: inherit;
277
+ }
278
+ .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-image-caption .perseus-renderer .paragraph .paragraph,
279
+ .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-image-caption .perseus-renderer .paragraph ol,
280
+ .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-image-caption .perseus-renderer .paragraph ul {
281
+ color: rgba(33, 36, 44, 0.64);
282
+ font-size: 14px;
283
+ line-height: 19px;
284
+ margin: 16px auto 42px;
285
+ text-align: left;
286
+ }
287
+ .framework-perseus.perseus-article:not(.perseus-mobile) .paragraph.perseus-paragraph-full-width {
288
+ margin-bottom: 32px;
289
+ margin-left: 0;
290
+ margin-right: 0;
291
+ max-width: none;
292
+ }
293
+ .framework-perseus.perseus-article:not(.perseus-mobile) .paragraph.perseus-paragraph-full-width > .paragraph {
294
+ margin: 0;
295
+ max-width: none;
296
+ }
297
+ .framework-perseus.perseus-article:not(.perseus-mobile) .unresponsive-svg-image,
298
+ .framework-perseus.perseus-article:not(.perseus-mobile) .svg-image {
299
+ font-size: 14px;
300
+ line-height: 19.6px;
301
+ }
302
+ .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-block-math {
303
+ margin-bottom: 32px;
304
+ position: relative;
305
+ }
306
+ .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-block-math:before {
307
+ bottom: 0;
308
+ content: "";
309
+ position: absolute;
310
+ right: 0;
311
+ top: 0;
312
+ width: 30px;
313
+ }
314
+ .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-block-math-inner {
315
+ overflow-x: auto;
316
+ padding-bottom: 8px;
317
+ padding-right: 20px;
318
+ padding-top: 8px;
319
+ }
320
+ .framework-perseus.perseus-article:not(.perseus-mobile) > .clearfix:first-child > .perseus-renderer:first-child > .paragraph:first-child h1:first-child,
321
+ .framework-perseus.perseus-article:not(.perseus-mobile) > .clearfix:first-child > .perseus-renderer:first-child > .paragraph:first-child h2:first-child,
322
+ .framework-perseus.perseus-article:not(.perseus-mobile) > .clearfix:first-child > .perseus-renderer:first-child > .paragraph:first-child h3:first-child,
323
+ .framework-perseus.perseus-article:not(.perseus-mobile) > .clearfix:first-child > .perseus-renderer:first-child > .paragraph:first-child h4:first-child,
324
+ .framework-perseus.perseus-article:not(.perseus-mobile) > .clearfix:first-child > .perseus-renderer:first-child > .paragraph:first-child h5:first-child,
325
+ .framework-perseus.perseus-article:not(.perseus-mobile) > .clearfix:first-child > .perseus-renderer:first-child > .paragraph:first-child h6:first-child {
326
+ margin-top: 0;
327
+ }
328
+ .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-renderer > .paragraph .perseus-formats-tooltip {
329
+ padding: 8px 12px;
330
+ }
331
+ .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-renderer > .paragraph .perseus-formats-tooltip .paragraph {
332
+ margin-bottom: 0;
333
+ }
334
+ .framework-perseus.perseus-article:not(.perseus-mobile) .perseus-renderer > .paragraph .perseus-formats-tooltip .paragraph ul:not(.perseus-widget-radio) {
335
+ font-size: 15px;
336
+ line-height: 1.5;
337
+ margin: 0;
338
+ }
339
+ .framework-perseus.perseus-article:not(.perseus-mobile) pre {
340
+ margin: 0 -16px 32px -16px;
341
+ }
342
+ .framework-perseus:not(.perseus-article):not(.perseus-mobile) .perseus-radio-option-content .perseus-renderer > .paragraph {
343
+ font-family: inherit;
344
+ font-size: 14px;
345
+ line-height: 1.25;
346
+ color: #21242c;
347
+ }
348
+ .framework-perseus:not(.perseus-article):not(.perseus-mobile) .perseus-radio-option-content .perseus-renderer > .paragraph .paragraph {
349
+ font-family: inherit;
350
+ font-size: 14px;
351
+ line-height: 1.25;
352
+ color: #21242c;
353
+ }
354
+ .framework-perseus:not(.perseus-article):not(.perseus-mobile) .perseus-radio-rationale-content .perseus-renderer > .paragraph {
355
+ font-family: inherit;
356
+ font-size: 14px;
357
+ line-height: 1.25;
358
+ color: #21242c;
359
+ }
360
+ .framework-perseus:not(.perseus-article):not(.perseus-mobile) .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph {
361
+ font-family: inherit;
362
+ font-size: 14px;
363
+ line-height: 1.25;
364
+ color: #21242c;
365
+ }
366
+ .framework-perseus:not(.perseus-article):not(.perseus-mobile) .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph mjx-container {
367
+ color: #21242c;
368
+ }
369
+ .framework-perseus.perseus-mobile .perseus-article .perseus-widget-container.widget-float-left {
370
+ float: left;
371
+ padding-right: 1em;
372
+ max-width: 50%;
373
+ width: 100%;
374
+ }
375
+ .framework-perseus.perseus-mobile .perseus-article .perseus-widget-container.widget-float-right {
376
+ float: right;
377
+ padding-left: 1em;
378
+ max-width: 50%;
379
+ width: 100%;
380
+ }
381
+ .framework-perseus.perseus-mobile .perseus-article .perseus-renderer > .paragraph {
382
+ margin-left: auto;
383
+ margin-right: auto;
384
+ max-width: 700px;
385
+ }
386
+ .framework-perseus.perseus-mobile .perseus-article .paragraph.perseus-paragraph-full-width {
387
+ margin-left: 0;
388
+ margin-right: 0;
389
+ max-width: none;
390
+ }
391
+ .framework-perseus.perseus-mobile .perseus-article .paragraph.perseus-paragraph-full-width > .paragraph {
392
+ margin: 0;
393
+ max-width: none;
394
+ }
395
+ .framework-perseus.perseus-mobile :not(blockquote) > div.paragraph {
396
+ margin: 0;
397
+ }
398
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph {
399
+ margin: 0 auto;
400
+ }
401
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph:not(:first-child) {
402
+ margin-top: 32px;
403
+ }
404
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph > .paragraph {
405
+ margin: 0;
406
+ }
407
+ .framework-perseus.perseus-mobile .clearfix > .perseus-renderer {
408
+ margin-bottom: 32px;
409
+ }
410
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ul:not(.perseus-widget-radio, .indicatorContainer) {
411
+ margin: 0 0 0 1em;
412
+ padding: 0;
413
+ }
414
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ul:not(.perseus-widget-radio, .indicatorContainer) > li {
415
+ padding-left: 10px;
416
+ margin-bottom: 24px;
417
+ }
418
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol {
419
+ margin: 0;
420
+ padding-left: 32px;
421
+ }
422
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol > li {
423
+ list-style-type: decimal;
424
+ margin-bottom: 24px;
425
+ }
426
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol ol,
427
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ul:not(.perseus-widget-radio) ol,
428
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol ul:not(.perseus-widget-radio),
429
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ul:not(.perseus-widget-radio) ul:not(.perseus-widget-radio) {
430
+ padding-top: 24px;
431
+ }
432
+ .framework-perseus.perseus-mobile .perseus-block-math {
433
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
434
+ -webkit-touch-callout: none;
435
+ }
436
+ @media (max-width: 767px) {
437
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph {
438
+ max-width: none;
439
+ }
440
+ .framework-perseus.perseus-mobile h1 {
441
+ font-weight: 700;
442
+ padding-top: 0px;
443
+ font-family: inherit;
444
+ font-size: 24px;
445
+ line-height: 1.2;
446
+ color: #21242c;
447
+ }
448
+ .framework-perseus.perseus-mobile h2 {
449
+ font-weight: 700;
450
+ padding-top: 16px;
451
+ font-family: inherit;
452
+ font-size: 24px;
453
+ line-height: 1.2;
454
+ color: #3b3e40;
455
+ }
456
+ .framework-perseus.perseus-mobile h3,
457
+ .framework-perseus.perseus-mobile h4 {
458
+ font-weight: 700;
459
+ padding-top: 0px;
460
+ font-family: inherit;
461
+ font-size: 22px;
462
+ line-height: 1.1;
463
+ color: #626569;
464
+ }
465
+ .framework-perseus.perseus-mobile .default-body-text {
466
+ font-family: inherit;
467
+ font-size: 18px;
468
+ line-height: 1.4;
469
+ color: #626569;
470
+ }
471
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph {
472
+ font-family: inherit;
473
+ font-size: 18px;
474
+ line-height: 1.4;
475
+ color: #626569;
476
+ }
477
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph .paragraph {
478
+ font-family: inherit;
479
+ font-size: 18px;
480
+ line-height: 1.4;
481
+ color: #626569;
482
+ }
483
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ul:not(.perseus-widget-radio) {
484
+ font-family: inherit;
485
+ font-size: 18px;
486
+ line-height: 1.4;
487
+ color: #626569;
488
+ }
489
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol {
490
+ font-family: inherit;
491
+ font-size: 18px;
492
+ line-height: 1.4;
493
+ color: #626569;
494
+ }
495
+ .framework-perseus.perseus-mobile blockquote {
496
+ font-family: inherit;
497
+ font-size: 18px;
498
+ line-height: 1.4;
499
+ color: #626569;
500
+ color: #888d93;
501
+ }
502
+ .framework-perseus.perseus-mobile table {
503
+ font-family: inherit;
504
+ font-size: 18px;
505
+ line-height: 1.4;
506
+ color: #626569;
507
+ }
508
+ .framework-perseus.perseus-mobile .perseus-radio-option-content .perseus-renderer > .paragraph {
509
+ font-family: inherit;
510
+ font-size: 16px;
511
+ line-height: 1.25;
512
+ color: #21242c;
513
+ }
514
+ .framework-perseus.perseus-mobile .perseus-radio-option-content .perseus-renderer > .paragraph .paragraph {
515
+ font-family: inherit;
516
+ font-size: 16px;
517
+ line-height: 1.25;
518
+ color: #21242c;
519
+ }
520
+ .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph {
521
+ font-family: inherit;
522
+ font-size: 16px;
523
+ line-height: 1.25;
524
+ color: #21242c;
525
+ }
526
+ .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph {
527
+ font-family: inherit;
528
+ font-size: 16px;
529
+ line-height: 1.25;
530
+ color: #21242c;
531
+ }
532
+ .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph mjx-container {
533
+ color: #21242c;
534
+ }
535
+ .framework-perseus.perseus-mobile .perseus-image-caption .paragraph .paragraph {
536
+ color: #888d93;
537
+ font-size: 14px;
538
+ line-height: 1.3;
539
+ text-align: left;
540
+ }
541
+ .framework-perseus.perseus-mobile .perseus-image-caption.has-title .paragraph .paragraph strong:first-child {
542
+ color: #3b3e40;
543
+ }
544
+ .framework-perseus.perseus-mobile mjx-container:not(.mafs-graph *) {
545
+ font-size: 21px;
546
+ line-height: 1.2;
547
+ color: #21242c;
548
+ }
549
+ .framework-perseus.perseus-mobile .perseus-block-math mjx-container {
550
+ font-size: 21px;
551
+ line-height: 1.5;
552
+ }
553
+ .framework-perseus.perseus-mobile .graphie-label mjx-container {
554
+ font-size: 1.21em;
555
+ line-height: 1.2;
556
+ }
557
+ .framework-perseus.perseus-mobile code {
558
+ font-family: Courier, monospace;
559
+ }
560
+ .framework-perseus.perseus-mobile pre {
561
+ background-color: #f0f1f2;
562
+ border-radius: 4px;
563
+ color: #21242c;
564
+ font-size: 18px;
565
+ line-height: 1.6;
566
+ padding: 16px;
567
+ white-space: pre;
568
+ overflow: auto;
569
+ }
570
+ .framework-perseus.perseus-mobile blockquote {
571
+ padding: 0 0 0 18px;
572
+ border-left: 4px solid #d8d8d8;
573
+ }
574
+ }
575
+ @media (min-width: 768px) and (max-width: 1199px) {
576
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph {
577
+ max-width: 512px;
578
+ }
579
+ .framework-perseus.perseus-mobile h1 {
580
+ font-weight: 700;
581
+ padding-top: 0px;
582
+ font-family: inherit;
583
+ font-size: 30px;
584
+ line-height: 1.1;
585
+ color: #21242c;
586
+ }
587
+ .framework-perseus.perseus-mobile h2 {
588
+ font-weight: 700;
589
+ padding-top: 32px;
590
+ font-family: inherit;
591
+ font-size: 30px;
592
+ line-height: 1.1;
593
+ color: #3b3e40;
594
+ }
595
+ .framework-perseus.perseus-mobile h3,
596
+ .framework-perseus.perseus-mobile h4 {
597
+ font-weight: 700;
598
+ padding-top: 16px;
599
+ font-family: inherit;
600
+ font-size: 28px;
601
+ line-height: 1.1;
602
+ color: #626569;
603
+ }
604
+ .framework-perseus.perseus-mobile .default-body-text {
605
+ font-family: inherit;
606
+ font-size: 20px;
607
+ line-height: 1.5;
608
+ color: #626569;
609
+ }
610
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph {
611
+ font-family: inherit;
612
+ font-size: 20px;
613
+ line-height: 1.5;
614
+ color: #626569;
615
+ }
616
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph .paragraph {
617
+ font-family: inherit;
618
+ font-size: 20px;
619
+ line-height: 1.5;
620
+ color: #626569;
621
+ }
622
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ul:not(.perseus-widget-radio) {
623
+ font-family: inherit;
624
+ font-size: 20px;
625
+ line-height: 1.5;
626
+ color: #626569;
627
+ }
628
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol {
629
+ font-family: inherit;
630
+ font-size: 20px;
631
+ line-height: 1.5;
632
+ color: #626569;
633
+ }
634
+ .framework-perseus.perseus-mobile blockquote {
635
+ font-family: inherit;
636
+ font-size: 20px;
637
+ line-height: 1.5;
638
+ color: #626569;
639
+ color: #888d93;
640
+ }
641
+ .framework-perseus.perseus-mobile table {
642
+ font-family: inherit;
643
+ font-size: 20px;
644
+ line-height: 1.5;
645
+ color: #626569;
646
+ }
647
+ .framework-perseus.perseus-mobile .perseus-radio-option-content .perseus-renderer > .paragraph {
648
+ font-family: inherit;
649
+ font-size: 18px;
650
+ line-height: 1.25;
651
+ color: #21242c;
652
+ }
653
+ .framework-perseus.perseus-mobile .perseus-radio-option-content .perseus-renderer > .paragraph .paragraph {
654
+ font-family: inherit;
655
+ font-size: 18px;
656
+ line-height: 1.25;
657
+ color: #21242c;
658
+ }
659
+ .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph {
660
+ font-family: inherit;
661
+ font-size: 18px;
662
+ line-height: 1.25;
663
+ color: #21242c;
664
+ }
665
+ .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph {
666
+ font-family: inherit;
667
+ font-size: 18px;
668
+ line-height: 1.25;
669
+ color: #21242c;
670
+ }
671
+ .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph mjx-container {
672
+ color: #21242c;
673
+ }
674
+ .framework-perseus.perseus-mobile .perseus-image-caption .paragraph .paragraph {
675
+ color: #888d93;
676
+ font-size: 17px;
677
+ line-height: 1.4;
678
+ text-align: left;
679
+ }
680
+ .framework-perseus.perseus-mobile .perseus-image-caption.has-title .paragraph .paragraph strong:first-child {
681
+ color: #3b3e40;
682
+ }
683
+ .framework-perseus.perseus-mobile mjx-container:not(.mafs-graph *) {
684
+ font-size: 23px;
685
+ line-height: 1.3;
686
+ color: #21242c;
687
+ }
688
+ .framework-perseus.perseus-mobile .perseus-block-math mjx-container {
689
+ font-size: 30px;
690
+ line-height: 1.3;
691
+ }
692
+ .framework-perseus.perseus-mobile .graphie-label mjx-container {
693
+ font-size: 1.21em;
694
+ line-height: 1.2;
695
+ }
696
+ .framework-perseus.perseus-mobile code {
697
+ font-family: Courier, monospace;
698
+ }
699
+ .framework-perseus.perseus-mobile pre {
700
+ background-color: #f0f1f2;
701
+ border-radius: 4px;
702
+ color: #21242c;
703
+ font-size: 18px;
704
+ line-height: 1.6;
705
+ padding: 16px;
706
+ white-space: pre;
707
+ overflow: auto;
708
+ }
709
+ .framework-perseus.perseus-mobile blockquote {
710
+ padding: 0 0 0 20px;
711
+ border-left: 4px solid #d8d8d8;
712
+ }
713
+ }
714
+ @media (min-width: 1200px) {
715
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph {
716
+ max-width: 688px;
717
+ }
718
+ .framework-perseus.perseus-mobile h1 {
719
+ font-weight: 700;
720
+ padding-top: 0px;
721
+ font-family: inherit;
722
+ font-size: 35px;
723
+ line-height: 1.1;
724
+ color: #21242c;
725
+ }
726
+ .framework-perseus.perseus-mobile h2 {
727
+ font-weight: 700;
728
+ padding-top: 32px;
729
+ font-family: inherit;
730
+ font-size: 35px;
731
+ line-height: 1.1;
732
+ color: #3b3e40;
733
+ }
734
+ .framework-perseus.perseus-mobile h3,
735
+ .framework-perseus.perseus-mobile h4 {
736
+ font-weight: 700;
737
+ padding-top: 16px;
738
+ font-family: inherit;
739
+ font-size: 30px;
740
+ line-height: 1.1;
741
+ color: #626569;
742
+ }
743
+ .framework-perseus.perseus-mobile .default-body-text {
744
+ font-family: inherit;
745
+ font-size: 22px;
746
+ line-height: 1.4;
747
+ color: #626569;
748
+ }
749
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph {
750
+ font-family: inherit;
751
+ font-size: 22px;
752
+ line-height: 1.4;
753
+ color: #626569;
754
+ }
755
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph .paragraph {
756
+ font-family: inherit;
757
+ font-size: 22px;
758
+ line-height: 1.4;
759
+ color: #626569;
760
+ }
761
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ul:not(.perseus-widget-radio) {
762
+ font-family: inherit;
763
+ font-size: 22px;
764
+ line-height: 1.4;
765
+ color: #626569;
766
+ }
767
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol {
768
+ font-family: inherit;
769
+ font-size: 22px;
770
+ line-height: 1.4;
771
+ color: #626569;
772
+ }
773
+ .framework-perseus.perseus-mobile blockquote {
774
+ font-family: inherit;
775
+ font-size: 22px;
776
+ line-height: 1.4;
777
+ color: #626569;
778
+ color: #888d93;
779
+ }
780
+ .framework-perseus.perseus-mobile table {
781
+ font-family: inherit;
782
+ font-size: 22px;
783
+ line-height: 1.4;
784
+ color: #626569;
785
+ }
786
+ .framework-perseus.perseus-mobile .perseus-radio-option-content .perseus-renderer > .paragraph {
787
+ font-family: inherit;
788
+ font-size: 20px;
789
+ line-height: 1.25;
790
+ color: #21242c;
791
+ }
792
+ .framework-perseus.perseus-mobile .perseus-radio-option-content .perseus-renderer > .paragraph .paragraph {
793
+ font-family: inherit;
794
+ font-size: 20px;
795
+ line-height: 1.25;
796
+ color: #21242c;
797
+ }
798
+ .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph {
799
+ font-family: inherit;
800
+ font-size: 20px;
801
+ line-height: 1.25;
802
+ color: #21242c;
803
+ }
804
+ .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph {
805
+ font-family: inherit;
806
+ font-size: 20px;
807
+ line-height: 1.25;
808
+ color: #21242c;
809
+ }
810
+ .framework-perseus.perseus-mobile .perseus-radio-rationale-content .perseus-renderer > .paragraph .paragraph mjx-container {
811
+ color: #21242c;
812
+ }
813
+ .framework-perseus.perseus-mobile .perseus-image-caption .paragraph .paragraph {
814
+ color: #888d93;
815
+ font-size: 20px;
816
+ line-height: 1.4;
817
+ text-align: left;
818
+ }
819
+ .framework-perseus.perseus-mobile .perseus-image-caption.has-title .paragraph .paragraph strong:first-child {
820
+ color: #3b3e40;
821
+ }
822
+ .framework-perseus.perseus-mobile mjx-container:not(.mafs-graph *) {
823
+ font-size: 25px;
824
+ line-height: 1.2;
825
+ color: #21242c;
826
+ }
827
+ .framework-perseus.perseus-mobile .perseus-block-math mjx-container {
828
+ font-size: 30px;
829
+ line-height: 1.3;
830
+ }
831
+ .framework-perseus.perseus-mobile .graphie-label mjx-container {
832
+ font-size: 1.21em;
833
+ line-height: 1.2;
834
+ }
835
+ .framework-perseus.perseus-mobile code {
836
+ font-family: Courier, monospace;
837
+ }
838
+ .framework-perseus.perseus-mobile pre {
839
+ background-color: #f0f1f2;
840
+ border-radius: 4px;
841
+ color: #21242c;
842
+ font-size: 18px;
843
+ line-height: 1.6;
844
+ padding: 16px;
845
+ white-space: pre;
846
+ overflow: auto;
847
+ }
848
+ .framework-perseus.perseus-mobile blockquote {
849
+ padding: 0 0 0 20px;
850
+ border-left: 5px solid #d8d8d8;
851
+ }
852
+ }
853
+ .framework-perseus.perseus-mobile .perseus-widget-container {
854
+ font-size: 14px;
855
+ line-height: 19.6px;
856
+ }
857
+ .framework-perseus.perseus-mobile .perseus-widget-container.widget-float-left,
858
+ .framework-perseus.perseus-mobile .perseus-widget-container.widget-float-right {
859
+ max-width: 50%;
860
+ padding-top: 32px;
861
+ width: 100%;
862
+ }
863
+ .framework-perseus.perseus-mobile .perseus-widget-container.widget-float-left .perseus-image-caption .paragraph .paragraph,
864
+ .framework-perseus.perseus-mobile .perseus-widget-container.widget-float-right .perseus-image-caption .paragraph .paragraph {
865
+ margin-bottom: 0;
866
+ }
867
+ .framework-perseus.perseus-mobile .perseus-widget-container.widget-float-left {
868
+ float: left;
869
+ padding-right: 32px;
870
+ }
871
+ .framework-perseus.perseus-mobile .perseus-widget-container.widget-float-right {
872
+ float: right;
873
+ padding-left: 32px;
874
+ }
875
+ .framework-perseus.perseus-mobile .MathJax .math {
876
+ color: inherit;
877
+ }
878
+ .framework-perseus.perseus-mobile .perseus-image-widget {
879
+ text-align: center;
880
+ }
881
+ .framework-perseus.perseus-mobile .perseus-block-math {
882
+ padding-top: 16px;
883
+ padding-bottom: 16px;
884
+ }
885
+ .framework-perseus.perseus-mobile .paragraph.perseus-paragraph-full-width {
886
+ margin-left: 0;
887
+ margin-right: 0;
888
+ max-width: none;
889
+ }
890
+ .framework-perseus.perseus-mobile .paragraph.perseus-paragraph-full-width > .paragraph {
891
+ margin: 0;
892
+ max-width: none;
893
+ }
894
+ .framework-perseus.perseus-mobile .unresponsive-svg-image,
895
+ .framework-perseus.perseus-mobile .svg-image {
896
+ font-size: 14px;
897
+ line-height: 19.6px;
898
+ }
899
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph .perseus-formats-tooltip {
900
+ padding: 8px 12px;
901
+ }
902
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph .perseus-formats-tooltip .paragraph {
903
+ margin-bottom: 0;
904
+ }
905
+ .framework-perseus.perseus-mobile .perseus-renderer > .paragraph .perseus-formats-tooltip .paragraph ul:not(.perseus-widget-radio) {
906
+ font-size: 15px;
907
+ line-height: 1.5;
908
+ margin: 0;
909
+ }
910
+ /* Derived from the MIT-licensed zoom.js:
911
+ https://github.com/fat/zoom.js/blob/fd4f3e43153da7596da0bade198e99f98b47791e/
912
+ */
913
+ .zoomable {
914
+ cursor: pointer;
915
+ cursor: -webkit-zoom-in;
916
+ cursor: -moz-zoom-in;
917
+ }
918
+ .zoom-img {
919
+ background-color: white;
920
+ position: absolute;
921
+ z-index: 9001;
922
+ }
923
+ img.zoom-img {
924
+ cursor: pointer;
925
+ cursor: -webkit-zoom-out;
926
+ cursor: -moz-zoom-out;
927
+ }
928
+ .zoom-transition {
929
+ transition: transform 300ms ease;
930
+ }
931
+ .zoom-overlay {
932
+ z-index: 9000;
933
+ position: fixed;
934
+ top: 0;
935
+ left: 0;
936
+ right: 0;
937
+ bottom: 0;
938
+ overflow: scroll;
939
+ }
940
+ .zoom-overlay-open,
941
+ .zoom-overlay-transitioning {
942
+ cursor: default;
943
+ }
944
+ .zoom-overlay-open {
945
+ height: 100%;
946
+ max-height: 100%;
947
+ overflow: hidden;
948
+ }
949
+ .zoom-backdrop {
950
+ z-index: 8999;
951
+ position: fixed;
952
+ top: 0;
953
+ left: 0;
954
+ right: 0;
955
+ bottom: 0;
956
+ background: white;
957
+ opacity: 0;
958
+ transition: opacity 300ms;
959
+ }
960
+ .zoom-overlay-open > .zoom-backdrop {
961
+ opacity: 0.9;
962
+ }
963
+ #perseus {
964
+ position: relative;
965
+ }
966
+ .framework-perseus.perseus-mobile {
967
+ margin-top: 48px;
968
+ }
969
+ .no-select {
970
+ -webkit-user-select: none;
971
+ user-select: none;
972
+ }
973
+ .blank-background {
974
+ background-color: #fdfdfd;
975
+ }
976
+ .graphie {
977
+ -webkit-user-select: none;
978
+ user-select: none;
979
+ }
980
+ .graphie svg {
981
+ position: absolute;
982
+ top: 0;
983
+ left: 0;
984
+ }
985
+ var,
986
+ div.graphie {
987
+ white-space: pre;
988
+ /**
989
+ * Graphie didn't have a fixed font-size and was just using
990
+ * the surrounding font-size. However some labels are banking on
991
+ * specific dimensions, so we need to lock it to a specific size.
992
+ */
993
+ font-size: 14px;
994
+ }
995
+ .hint.last-hint .paragraph {
996
+ font-weight: bold;
997
+ }
998
+ #answercontent input[type=text].perseus-input-size-normal,
999
+ #answercontent input[type=number].perseus-input-size-normal,
1000
+ .framework-perseus input[type=text].perseus-input-size-normal,
1001
+ .framework-perseus input[type=number].perseus-input-size-normal {
1002
+ border: 1px solid #ccc;
1003
+ width: 80px;
1004
+ }
1005
+ #answercontent input[type=text].perseus-input-size-small,
1006
+ #answercontent input[type=number].perseus-input-size-small,
1007
+ .framework-perseus input[type=text].perseus-input-size-small,
1008
+ .framework-perseus input[type=number].perseus-input-size-small {
1009
+ border: 1px solid #ccc;
1010
+ width: 40px;
1011
+ }
1012
+ #answercontent input[type=text].perseus-input-right-align,
1013
+ #answercontent input[type=number].perseus-input-right-align,
1014
+ .framework-perseus input[type=text].perseus-input-right-align,
1015
+ .framework-perseus input[type=number].perseus-input-right-align {
1016
+ text-align: right;
1017
+ }
1018
+ .framework-perseus.perseus-mobile .perseus-input-right-align .keypad-input {
1019
+ text-align: right;
1020
+ }
1021
+ .framework-perseus div.paragraph {
1022
+ font-family: "Lato", sans-serif;
1023
+ font-weight: 400;
1024
+ font-size: 18px;
1025
+ line-height: 22px;
1026
+ margin: 22px 0px;
1027
+ }
1028
+ .framework-perseus .test-prep-blurb div.paragraph {
1029
+ font-size: 16px;
1030
+ line-height: 20px;
1031
+ }
1032
+ .framework-perseus div.instructions {
1033
+ display: block;
1034
+ font-family: "Noto Serif", serif;
1035
+ font-weight: 800;
1036
+ font-size: 18px;
1037
+ line-height: 22px;
1038
+ font-style: italic;
1039
+ }
1040
+ .framework-perseus .perseus-renderer > .paragraph > ul:not(.perseus-widget-radio),
1041
+ .framework-perseus .perseus-renderer > .paragraph > ol {
1042
+ margin: 0px 0px 22px 0px;
1043
+ }
1044
+ .framework-perseus .paragraph ul:not(.perseus-widget-radio, .indicatorContainer) {
1045
+ padding-left: 35px;
1046
+ list-style-type: disc;
1047
+ }
1048
+ .framework-perseus .paragraph ol {
1049
+ list-style: decimal;
1050
+ padding-left: 2em;
1051
+ }
1052
+ .framework-perseus blockquote {
1053
+ padding: 0 2.5em;
1054
+ }
1055
+ .framework-perseus .zoomable {
1056
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1057
+ -webkit-touch-callout: none;
1058
+ }
1059
+ .framework-perseus sup:not(.mq-non-leaf) {
1060
+ font-size: smaller;
1061
+ vertical-align: super;
1062
+ line-height: 0;
1063
+ }
1064
+ .framework-perseus .range-input {
1065
+ border: 1px solid #ccc;
1066
+ border-radius: 5px;
1067
+ display: inline-block;
1068
+ padding: 0px 5px;
1069
+ }
1070
+ .framework-perseus .range-input > input {
1071
+ border: 0;
1072
+ display: inline;
1073
+ text-align: center;
1074
+ width: 30px;
1075
+ }
1076
+ .framework-perseus .range-input > span {
1077
+ color: #999;
1078
+ font-size: 14px;
1079
+ }
1080
+ .framework-perseus .number-input {
1081
+ border: 1px solid #909296;
1082
+ border-radius: 5px;
1083
+ margin: 0;
1084
+ padding: 5px 0;
1085
+ text-align: center;
1086
+ width: 40px;
1087
+ }
1088
+ .framework-perseus .number-input.invalid-input {
1089
+ background-color: #ffbaba;
1090
+ outline-color: red;
1091
+ }
1092
+ .framework-perseus .number-input.mini {
1093
+ width: 40px;
1094
+ }
1095
+ .framework-perseus .number-input.small {
1096
+ width: 60px;
1097
+ }
1098
+ .framework-perseus .number-input.normal {
1099
+ width: 80px;
1100
+ }
1101
+ .framework-perseus .graph-settings .graph-settings-axis-label {
1102
+ border: 1px solid #ccc;
1103
+ border-radius: 5px;
1104
+ display: inline-block;
1105
+ padding: 5px 5px;
1106
+ width: 70px;
1107
+ float: right;
1108
+ margin: 0 5px;
1109
+ }
1110
+ .framework-perseus .graph-settings .graph-settings-background-url {
1111
+ width: 250px;
1112
+ }
1113
+ .framework-perseus .graphie-container {
1114
+ position: relative;
1115
+ }
1116
+ .framework-perseus .graph-settings,
1117
+ .framework-perseus .image-settings,
1118
+ .framework-perseus .misc-settings {
1119
+ padding-bottom: 5px;
1120
+ }
1121
+ .framework-perseus .misc-settings,
1122
+ .framework-perseus .type-settings {
1123
+ border-top: 1px solid black;
1124
+ padding-top: 5px;
1125
+ }
1126
+ .framework-perseus .svg-image {
1127
+ display: block;
1128
+ margin: 0 auto;
1129
+ margin-inline-start: auto;
1130
+ margin-inline-end: auto;
1131
+ }
1132
+ .framework-perseus .unresponsive-svg-image,
1133
+ .framework-perseus .perseus-rendered-radio .unresponsive-svg-image {
1134
+ display: inline-block;
1135
+ position: relative;
1136
+ }
1137
+ .framework-perseus .unresponsive-svg-image > .graphie-container,
1138
+ .framework-perseus .perseus-rendered-radio .unresponsive-svg-image > .graphie-container {
1139
+ position: absolute;
1140
+ top: 0;
1141
+ left: 0;
1142
+ }
1143
+ .framework-perseus .fixed-to-responsive {
1144
+ position: relative;
1145
+ width: 100%;
1146
+ }
1147
+ .framework-perseus .fixed-to-responsive > :not(:first-child) {
1148
+ position: absolute;
1149
+ top: 0;
1150
+ left: 0;
1151
+ width: 100%;
1152
+ height: 100%;
1153
+ }
1154
+ /* Legacy table styles. Remove when XOM is rolled out (see below for
1155
+ updated XOM styles). */
1156
+ .framework-perseus:not(.perseus-mobile) table {
1157
+ font-size: 14px;
1158
+ line-height: 19.6px;
1159
+ }
1160
+ .framework-perseus:not(.perseus-mobile) table th,
1161
+ .framework-perseus:not(.perseus-mobile) table td {
1162
+ padding: 5px 10px;
1163
+ text-align: left;
1164
+ }
1165
+ .framework-perseus:not(.perseus-mobile) table th[align="center"],
1166
+ .framework-perseus:not(.perseus-mobile) table td[align="center"] {
1167
+ text-align: center;
1168
+ }
1169
+ .framework-perseus:not(.perseus-mobile) table th[align="right"],
1170
+ .framework-perseus:not(.perseus-mobile) table td[align="right"] {
1171
+ text-align: right;
1172
+ }
1173
+ .framework-perseus:not(.perseus-mobile) table th {
1174
+ border-bottom: 2px solid #ccc;
1175
+ font-weight: bold;
1176
+ padding-bottom: 2px;
1177
+ }
1178
+ .framework-perseus:not(.perseus-mobile) table tr:nth-child(odd) td {
1179
+ background-color: #f7f8fa;
1180
+ }
1181
+ .framework-perseus:not(.perseus-mobile) .perseus-titled-table {
1182
+ display: inline-block;
1183
+ }
1184
+ .framework-perseus:not(.perseus-mobile) .perseus-titled-table table {
1185
+ margin-left: auto;
1186
+ margin-right: auto;
1187
+ }
1188
+ .framework-perseus:not(.perseus-mobile) .perseus-table-title {
1189
+ text-align: center;
1190
+ font-size: larger;
1191
+ }
1192
+ .framework-perseus:not(.perseus-mobile) table.non-markdown tr:nth-child(odd) td {
1193
+ background-color: transparent;
1194
+ }
1195
+ .framework-perseus:not(.perseus-mobile) table.non-markdown th,
1196
+ .framework-perseus:not(.perseus-mobile) table.non-markdown td {
1197
+ border-width: 0;
1198
+ }
1199
+ /* New XOM styles for tables. */
1200
+ .framework-perseus.perseus-mobile {
1201
+ /* There are three kinds of tables:
1202
+ 1) normal "tables" - emitted by markdown (src/perseus-markdown.jsx)
1203
+ 2) "titled tables" - emitted by markdown as well (these are just
1204
+ tables with a title, and encased in one more element)
1205
+ 3) "table widget" - where a user is expected to enter answers in a
1206
+ table form (src/widgets/table.jsx).
1207
+ Moreover, there the Categorizer widget uses <table> tags, so these
1208
+ stylings will apply there as well. */
1209
+ }
1210
+ .framework-perseus.perseus-mobile table {
1211
+ border-collapse: collapse;
1212
+ margin: 0 auto;
1213
+ }
1214
+ .framework-perseus.perseus-mobile table tbody > tr {
1215
+ border: 1px solid #e5e5e5;
1216
+ }
1217
+ .framework-perseus.perseus-mobile table th,
1218
+ .framework-perseus.perseus-mobile table td {
1219
+ padding: 16px;
1220
+ text-align: left;
1221
+ }
1222
+ .framework-perseus.perseus-mobile table th[align="center"],
1223
+ .framework-perseus.perseus-mobile table td[align="center"] {
1224
+ text-align: center;
1225
+ }
1226
+ .framework-perseus.perseus-mobile table th[align="right"],
1227
+ .framework-perseus.perseus-mobile table td[align="right"] {
1228
+ text-align: right;
1229
+ }
1230
+ .framework-perseus.perseus-mobile table td {
1231
+ background: #fff;
1232
+ }
1233
+ .framework-perseus.perseus-mobile table th {
1234
+ font-weight: bold;
1235
+ }
1236
+ @media (max-width: 767px) {
1237
+ .framework-perseus.perseus-mobile table {
1238
+ width: 100%;
1239
+ min-width: 480px;
1240
+ }
1241
+ .framework-perseus.perseus-mobile table tbody > tr {
1242
+ border-left: 0;
1243
+ border-right: 0;
1244
+ }
1245
+ }
1246
+ .framework-perseus.perseus-mobile .perseus-titled-table {
1247
+ display: inline-block;
1248
+ }
1249
+ .framework-perseus.perseus-mobile .perseus-table-title {
1250
+ text-align: center;
1251
+ font-size: larger;
1252
+ }
1253
+ /* Widget CSS */
1254
+ .perseus-graph-padding {
1255
+ box-sizing: content-box;
1256
+ padding: 25px 25px 0 0;
1257
+ }
1258
+ .perseus-article .perseus-dropdown .perseus-renderer .paragraph,
1259
+ .perseus-article .perseus-dropdown .perseus-renderer .perseus-block-math {
1260
+ /* overriding overly broad selectors in .framework-perseus rules */
1261
+ margin-bottom: 0 !important;
1262
+ font-size: 18px !important;
1263
+ }
1264
+ .categorizer-container {
1265
+ margin-top: 20px;
1266
+ }
1267
+ .categorizer-container div.paragraph {
1268
+ margin: 10px 0px;
1269
+ }
1270
+ .categorizer-container .category {
1271
+ text-align: center;
1272
+ }
1273
+ .categorizer-container table {
1274
+ min-width: 0;
1275
+ }
1276
+ body.mobile .categorizer-container td.category input[type="radio"]:checked + span:before {
1277
+ color: #1c758a;
1278
+ }
1279
+ body.mobile .categorizer-container td.category input[type="radio"] + span:active:before {
1280
+ color: #666;
1281
+ content: "\f111";
1282
+ }
1283
+ .perseus-widget-dropdown {
1284
+ position: relative;
1285
+ }
1286
+ .perseus-widget-expression {
1287
+ position: relative;
1288
+ }
1289
+ .perseus-widget-expression > span,
1290
+ .perseus-widget-expression .error-tooltip {
1291
+ display: inline-block;
1292
+ vertical-align: middle;
1293
+ }
1294
+ .perseus-widget-expression .error-tooltip {
1295
+ position: absolute;
1296
+ right: 6px;
1297
+ top: -2px;
1298
+ }
1299
+ .perseus-widget-expression .error-icon {
1300
+ color: #fcc335;
1301
+ cursor: pointer;
1302
+ font-size: 20px;
1303
+ }
1304
+ .perseus-widget-expression .error-text {
1305
+ background-color: #fff;
1306
+ padding: 5px;
1307
+ width: 210px;
1308
+ }
1309
+ .perseus-widget-expression .perseus-formats-tooltip {
1310
+ width: 190px;
1311
+ }
1312
+ .perseus-widget-grapher {
1313
+ box-sizing: content-box;
1314
+ padding: 25px 25px 0 0;
1315
+ }
1316
+ .perseus-widget-grapher > .graphie-container {
1317
+ position: relative;
1318
+ }
1319
+ .perseus-widget-grapher > .graphie-container > img,
1320
+ .perseus-widget-grapher > .graphie-container .svg-image {
1321
+ position: absolute;
1322
+ }
1323
+ .framework-perseus .perseus-graded-group {
1324
+ position: relative;
1325
+ width: 100%;
1326
+ margin-left: 3px;
1327
+ padding-left: 5px;
1328
+ }
1329
+ .framework-perseus .perseus-graded-group.answer-correct {
1330
+ border-left: 3px solid #76a005;
1331
+ margin-left: 0;
1332
+ }
1333
+ .framework-perseus .perseus-graded-group.answer-incorrect {
1334
+ border-left: 3px solid #ff8787;
1335
+ margin-left: 0;
1336
+ }
1337
+ .framework-perseus .perseus-graded-group .group-icon {
1338
+ font-size: 14px;
1339
+ position: absolute;
1340
+ top: 50%;
1341
+ top: calc(50% - 7px);
1342
+ left: -30px;
1343
+ text-align: center;
1344
+ width: 16px;
1345
+ }
1346
+ .framework-perseus .perseus-group {
1347
+ position: relative;
1348
+ width: 100%;
1349
+ }
1350
+ .framework-perseus .perseus-group .group-icon {
1351
+ font-size: 14px;
1352
+ position: absolute;
1353
+ top: 50%;
1354
+ top: calc(50% - 7px);
1355
+ margin-left: -20px;
1356
+ }
1357
+ .perseus-image-widget .perseus-image-title {
1358
+ text-align: center;
1359
+ }
1360
+ .perseus-image-widget .perseus-image-caption {
1361
+ color: rgba(33, 36, 44, 0.7);
1362
+ padding-left: 16px;
1363
+ position: relative;
1364
+ }
1365
+ .perseus-image-widget .perseus-image-caption::before {
1366
+ content: "";
1367
+ position: absolute;
1368
+ top: 0;
1369
+ bottom: 0;
1370
+ left: 0;
1371
+ margin-left: 4px;
1372
+ width: 1px;
1373
+ background-color: rgba(33, 36, 44, 0.5);
1374
+ border: 1px solid rgba(33, 36, 44, 0.5);
1375
+ border-radius: 2px;
1376
+ }
1377
+ .perseus-image-widget .perseus-image-caption .paragraph {
1378
+ font-size: 14px;
1379
+ padding-right: 12px;
1380
+ }
1381
+ .perseus-image-editor .label-settings td {
1382
+ padding: 5px 4px;
1383
+ text-align: center;
1384
+ }
1385
+ .perseus-image-editor .label-settings tr:nth-child(odd) td {
1386
+ background-color: transparent;
1387
+ }
1388
+ .perseus-image-editor .label-settings th,
1389
+ .perseus-image-editor .label-settings td {
1390
+ border-width: 0;
1391
+ }
1392
+ .perseus-image-editor .image-settings,
1393
+ .perseus-image-editor .graph-settings {
1394
+ margin-top: 5px;
1395
+ }
1396
+ .perseus-image-widget {
1397
+ margin-inline-start: auto;
1398
+ margin-inline-end: auto;
1399
+ }
1400
+ .perseus-hint-renderer .perseus-image-widget {
1401
+ margin-inline-start: 0;
1402
+ }
1403
+ .perseus-hint-renderer .svg-image {
1404
+ margin-inline-start: 0;
1405
+ }
1406
+ .perseus-widget-interactive-graph {
1407
+ box-sizing: content-box;
1408
+ padding: 25px 25px 0 0;
1409
+ }
1410
+ .perseus-widget-interactive-graph > .graphie-container {
1411
+ position: relative;
1412
+ }
1413
+ .perseus-widget-interactive-graph > .graphie-container > img,
1414
+ .perseus-widget-interactive-graph > .graphie-container > .unresponsive-svg-image {
1415
+ position: absolute;
1416
+ bottom: 0;
1417
+ left: 0;
1418
+ }
1419
+ .perseus-mobile .tooltip.visible {
1420
+ z-index: 2;
1421
+ }
1422
+ .perseus-mobile .tooltip.visible .tooltip-content:before {
1423
+ border: solid;
1424
+ border-color: white transparent;
1425
+ border-width: 10px 10px 0 10px;
1426
+ bottom: -10px;
1427
+ content: "";
1428
+ left: 50%;
1429
+ transform: translateX(-50%);
1430
+ position: absolute;
1431
+ z-index: 2;
1432
+ }
1433
+ .perseus-mobile .tooltip .tooltip-content {
1434
+ display: none;
1435
+ }
1436
+ .perseus-mobile .tooltip.visible .tooltip-content {
1437
+ display: inline-block;
1438
+ background-color: #ffffff;
1439
+ border-radius: 5px;
1440
+ bottom: 50px;
1441
+ left: 50%;
1442
+ transform: translateX(-50%);
1443
+ padding: 5px;
1444
+ position: absolute;
1445
+ white-space: nowrap;
1446
+ min-width: 30px;
1447
+ text-align: center;
1448
+ }
1449
+ .perseus-mobile .tooltip.visible .tooltip-content mjx-container {
1450
+ color: #71b307 !important;
1451
+ }
1452
+ .perseus-mobile .graphie-label mjx-container {
1453
+ color: inherit !important;
1454
+ }
1455
+ .framework-perseus .perseus-label-image-widget-instructions div.paragraph {
1456
+ margin: 0;
1457
+ }
1458
+ @media (max-width: 767px) {
1459
+ [id*="perseus-label-image-widget-answer-pill"] > div.perseus-renderer-responsive {
1460
+ all: revert;
1461
+ }
1462
+ .framework-perseus.perseus-mobile [id*="perseus-label-image-widget-answer-pill"] mjx-container {
1463
+ all: revert;
1464
+ }
1465
+ }
1466
+ .framework-perseus:not(.perseus-article).perseus-mobile .perseus-label-image-widget-instructions {
1467
+ color: initial;
1468
+ }
1469
+ .framework-perseus:not(.perseus-article).perseus-mobile .perseus-label-image-widget-instructions .perseus-renderer .paragraph > .paragraph {
1470
+ color: initial !important;
1471
+ font-size: initial !important;
1472
+ line-height: initial !important;
1473
+ }
1474
+ .framework-perseus:not(.perseus-article).perseus-mobile .perseus-label-image-widget-instructions .perseus-block-math {
1475
+ padding: 0;
1476
+ }
1477
+ .framework-perseus:not(.perseus-article).perseus-mobile .perseus-label-image-widget-instructions .perseus-block-math mjx-container {
1478
+ font-size: initial !important;
1479
+ line-height: initial !important;
1480
+ }
1481
+ .perseus-label-image-widget-answer-choices .perseus-block-math > .perseus-block-math-inner,
1482
+ .perseus-label-image-widget-instructions .perseus-block-math > .perseus-block-math-inner {
1483
+ overflow-x: hidden !important;
1484
+ }
1485
+ .perseus-widget-matcher {
1486
+ /* Ideally we'd get rid of this, as most of the styles have been moved
1487
+ to inline styles using Aphrodite, but this is a hacky "reach-in" into
1488
+ descendent widgets that we can't modify */
1489
+ }
1490
+ .perseus-widget-matcher div.paragraph {
1491
+ margin: 0;
1492
+ }
1493
+ .perseus-matrix .matrix-prefix,
1494
+ .perseus-matrix .matrix-suffix {
1495
+ display: inline-block;
1496
+ margin: 10px 5px 0 10px;
1497
+ vertical-align: top;
1498
+ }
1499
+ .perseus-matrix .matrix-suffix {
1500
+ margin: 10px 10px 0 5px;
1501
+ }
1502
+ .perseus-matrix div.paragraph {
1503
+ margin: 0;
1504
+ }
1505
+ .perseus-matrix .matrix-input {
1506
+ background: #e2e2e2;
1507
+ display: inline-block;
1508
+ margin: 5px;
1509
+ padding: 3px;
1510
+ position: relative;
1511
+ width: auto;
1512
+ }
1513
+ .perseus-matrix .matrix-row {
1514
+ white-space: nowrap;
1515
+ }
1516
+ .perseus-matrix .matrix-bracket {
1517
+ border-color: #666;
1518
+ border-style: solid;
1519
+ border-bottom-width: 2px;
1520
+ border-top-width: 2px;
1521
+ margin-top: -2px;
1522
+ position: absolute;
1523
+ width: 6px;
1524
+ }
1525
+ .perseus-matrix .matrix-bracket.bracket-left {
1526
+ border-color: #666;
1527
+ border-left-width: 2px;
1528
+ border-right-width: 0;
1529
+ left: 3px;
1530
+ }
1531
+ .perseus-matrix .matrix-bracket.bracket-right {
1532
+ border-color: #666;
1533
+ border-left-width: 0;
1534
+ border-right-width: 2px;
1535
+ margin-left: -3px;
1536
+ }
1537
+ .perseus-matrix input,
1538
+ .perseus-matrix .number-input {
1539
+ border: none;
1540
+ border-radius: 0;
1541
+ box-sizing: border-box;
1542
+ margin: 3px;
1543
+ padding: 0;
1544
+ text-align: center;
1545
+ }
1546
+ .perseus-matrix input.outside,
1547
+ .perseus-matrix .number-input.outside {
1548
+ background: #f3f3f3;
1549
+ }
1550
+ .perseus-matrix input:focus,
1551
+ .perseus-matrix .number-input:focus {
1552
+ border: none;
1553
+ outline: none;
1554
+ }
1555
+ .static-mode.perseus-matrix input,
1556
+ .static-mode.perseus-matrix .number-input {
1557
+ background: #f5f5f5;
1558
+ }
1559
+ .perseus-matrix.the-matrix .matrix-bracket,
1560
+ .perseus-matrix.the-matrix .matrix-left,
1561
+ .perseus-matrix.the-matrix .matrix-right {
1562
+ border-color: #29f139;
1563
+ }
1564
+ .perseus-matrix.the-matrix .matrix-input {
1565
+ background: #222;
1566
+ }
1567
+ .perseus-matrix.the-matrix input,
1568
+ .perseus-matrix.the-matrix .number-input {
1569
+ background: #666;
1570
+ color: #29f139;
1571
+ font-weight: bold;
1572
+ }
1573
+ .perseus-matrix.the-matrix input.outside,
1574
+ .perseus-matrix.the-matrix .number-input.outside {
1575
+ background: #444;
1576
+ }
1577
+ body.mobile .perseus-matrix .matrix-input {
1578
+ display: table;
1579
+ }
1580
+ body.mobile .perseus-matrix .matrix-row {
1581
+ display: table-row;
1582
+ }
1583
+ body.mobile .perseus-matrix .matrix-input-field {
1584
+ display: table-cell;
1585
+ }
1586
+ .perseus-matrix-editor .perseus-single-editor {
1587
+ width: 338px;
1588
+ }
1589
+ .perseus-widget-measurer {
1590
+ position: relative;
1591
+ }
1592
+ .perseus-widget-measurer img {
1593
+ position: absolute;
1594
+ }
1595
+ .perseus-widget-measurer-url {
1596
+ width: 70%;
1597
+ }
1598
+ #translations-dashboard .perseus-widget-measurer > .graphie {
1599
+ z-index: -1;
1600
+ }
1601
+ .input-with-examples-tooltip {
1602
+ font-size: 18px;
1603
+ line-height: 28px;
1604
+ color: #717378;
1605
+ background: #fff;
1606
+ }
1607
+ .input-with-examples-tooltip ul {
1608
+ list-style-type: disc;
1609
+ margin-left: 30px;
1610
+ }
1611
+ .input-with-examples-tooltip strong {
1612
+ font-weight: 700;
1613
+ }
1614
+ .input-with-examples-tooltip em {
1615
+ font-style: italic;
1616
+ }
1617
+ .orderer {
1618
+ position: relative;
1619
+ }
1620
+ .orderer.layout-horizontal .draggable-box {
1621
+ margin-left: 0;
1622
+ margin-top: 30px;
1623
+ padding: 13px;
1624
+ }
1625
+ .orderer .card {
1626
+ padding: 0 10px;
1627
+ cursor: pointer;
1628
+ position: relative;
1629
+ -webkit-user-select: none;
1630
+ user-select: none;
1631
+ width: auto;
1632
+ display: flex;
1633
+ flex-direction: column;
1634
+ justify-content: center;
1635
+ }
1636
+ .orderer.height-normal.layout-horizontal .card {
1637
+ height: 65px;
1638
+ }
1639
+ .orderer.height-normal.layout-vertical .card {
1640
+ padding: 5px;
1641
+ }
1642
+ .orderer.height-auto .card {
1643
+ padding: 0;
1644
+ }
1645
+ .orderer.height-auto.layout-horizontal .drag-hint {
1646
+ min-height: 65px;
1647
+ min-width: 22px;
1648
+ }
1649
+ .orderer.layout-horizontal .bank {
1650
+ padding: 0;
1651
+ margin: 0px 13px;
1652
+ }
1653
+ .orderer div.paragraph {
1654
+ margin: 0;
1655
+ }
1656
+ .orderer .card-wrap {
1657
+ width: auto;
1658
+ }
1659
+ .orderer.layout-horizontal .card-wrap {
1660
+ float: left;
1661
+ }
1662
+ .orderer.layout-horizontal .card-wrap:not(:first-child) {
1663
+ margin-left: 8px;
1664
+ }
1665
+ .orderer.layout-vertical .card-wrap {
1666
+ float: none;
1667
+ text-align: center;
1668
+ }
1669
+ .orderer.layout-vertical .card-wrap:not(:first-child) {
1670
+ margin-top: 8px;
1671
+ }
1672
+ .orderer.layout-vertical .bank,
1673
+ .orderer.layout-vertical .draggable-box {
1674
+ box-sizing: border-box;
1675
+ float: left;
1676
+ max-width: 50%;
1677
+ }
1678
+ .orderer.layout-vertical .bank {
1679
+ padding: 11px 20px 11px 0;
1680
+ margin: 0;
1681
+ }
1682
+ .orderer.layout-vertical .draggable-box {
1683
+ margin-top: 0;
1684
+ padding: 10px;
1685
+ min-height: 170px;
1686
+ }
1687
+ .orderer.layout-vertical .draggable-box .drag-hint {
1688
+ box-sizing: border-box;
1689
+ min-width: 140px;
1690
+ min-height: 34px;
1691
+ }
1692
+ .orderer.layout-vertical .draggable-box .placeholder {
1693
+ box-sizing: border-box;
1694
+ }
1695
+ .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-widget-passage,
1696
+ .perseus-widget-passage-container .perseus-widget-passage {
1697
+ line-height: 20px;
1698
+ margin: 22px;
1699
+ position: relative;
1700
+ }
1701
+ .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-widget-passage div.paragraph,
1702
+ .perseus-widget-passage-container .perseus-widget-passage div.paragraph {
1703
+ font-family: KaTeX_Main, Times, "Times New Roman", serif;
1704
+ }
1705
+ .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-widget-passage .passage-title div.paragraph,
1706
+ .perseus-widget-passage-container .perseus-widget-passage .passage-title div.paragraph {
1707
+ font-family: "Noto Serif", serif;
1708
+ font-weight: 700;
1709
+ font-size: 20px;
1710
+ line-height: 22px;
1711
+ margin: 0 0 10px;
1712
+ }
1713
+ .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-widget-passage > .passage-text div.paragraph,
1714
+ .perseus-widget-passage-container .perseus-widget-passage > .passage-text div.paragraph {
1715
+ font-weight: 400;
1716
+ font-size: 16px;
1717
+ line-height: 20px;
1718
+ text-indent: 20px;
1719
+ margin: 0;
1720
+ }
1721
+ .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-widget-passage > .passage-text div.paragraph span,
1722
+ .perseus-widget-passage-container .perseus-widget-passage > .passage-text div.paragraph span {
1723
+ text-indent: 0;
1724
+ }
1725
+ .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-widget-passage > .passage-text div.paragraph em,
1726
+ .perseus-widget-passage-container .perseus-widget-passage > .passage-text div.paragraph em {
1727
+ line-height: 0;
1728
+ }
1729
+ .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container mjx-container,
1730
+ .perseus-widget-passage-container mjx-container {
1731
+ line-height: 18px;
1732
+ }
1733
+ .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .footnotes,
1734
+ .perseus-widget-passage-container .footnotes {
1735
+ margin-top: 22px;
1736
+ }
1737
+ .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .footnotes div.paragraph,
1738
+ .perseus-widget-passage-container .footnotes div.paragraph {
1739
+ font-size: 14px;
1740
+ margin: 0;
1741
+ }
1742
+ .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-highlight,
1743
+ .perseus-widget-passage-container .perseus-highlight {
1744
+ background-color: #fffabe;
1745
+ }
1746
+ .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-review-highlight,
1747
+ .perseus-widget-passage-container .perseus-review-highlight {
1748
+ background-color: #eee7b2;
1749
+ }
1750
+ .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-passage-square-label,
1751
+ .perseus-widget-passage-container .perseus-passage-square-label,
1752
+ .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-passage-circle-label,
1753
+ .perseus-widget-passage-container .perseus-passage-circle-label,
1754
+ .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .perseus-passage-bracket-label,
1755
+ .perseus-widget-passage-container .perseus-passage-bracket-label {
1756
+ font-family: Times, "Times New Roman", serif;
1757
+ font-size: 16px;
1758
+ }
1759
+ .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .line-numbers,
1760
+ .perseus-widget-passage-container .line-numbers {
1761
+ font-size: 12px;
1762
+ font-style: italic;
1763
+ font-weight: 600;
1764
+ position: absolute;
1765
+ text-align: right;
1766
+ max-height: 100%;
1767
+ overflow: hidden;
1768
+ padding-right: 6px;
1769
+ left: -52px;
1770
+ width: 37px;
1771
+ }
1772
+ .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .line-numbers span,
1773
+ .perseus-widget-passage-container .line-numbers span {
1774
+ display: block;
1775
+ line-height: 20px;
1776
+ position: relative;
1777
+ top: 2px;
1778
+ visibility: hidden;
1779
+ }
1780
+ .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .line-numbers span:nth-of-type(5n),
1781
+ .perseus-widget-passage-container .line-numbers span:nth-of-type(5n),
1782
+ .framework-perseus.perseus-article .perseus-renderer .perseus-widget-passage-container .line-numbers .line-marker,
1783
+ .perseus-widget-passage-container .line-numbers .line-marker {
1784
+ visibility: visible;
1785
+ }
1786
+ .perseus-widget-passage-editor .perseus-single-editor {
1787
+ font-family: Times, "Times New Roman", serif;
1788
+ margin-left: -11px;
1789
+ }
1790
+ .perseus-widget-passage-editor .perseus-textarea-pair textarea {
1791
+ font-size: 13px;
1792
+ line-height: 17px;
1793
+ }
1794
+ body.sat-section .perseus-widget-passage {
1795
+ margin-top: 0;
1796
+ }
1797
+ .perseus-widget-plotter svg,
1798
+ .perseus-widget-plotter vml {
1799
+ position: absolute;
1800
+ }
1801
+ .perseus-widget-plotter span.rotate {
1802
+ transform: rotate(-90deg);
1803
+ }
1804
+ .set-from-scale-box {
1805
+ border: 2px solid #eeeeee;
1806
+ border-radius: 3px;
1807
+ padding: 3px;
1808
+ }
1809
+ .categories-title {
1810
+ font-size: 14px;
1811
+ }
1812
+ .perseus-mobile .perseus-widget-plotter {
1813
+ border: solid 0.5px #babec2;
1814
+ border-radius: 4px;
1815
+ }
1816
+ .perseus-mobile .perseus-widget-plotter .graphie-label mjx-container {
1817
+ color: #626569;
1818
+ }
1819
+ .perseus-widget-radio.perseus-rendered-radio div,
1820
+ .perseus-widget-radio.perseus-rendered-radio div > p {
1821
+ /* TODO(alpert): Find a better way of doing inline renderers */
1822
+ display: inline;
1823
+ }
1824
+ .perseus-widget-radio.perseus-rendered-radio .perseus-radio-rationale-content > .perseus-renderer > .paragraph {
1825
+ display: table;
1826
+ margin: 0;
1827
+ }
1828
+ .perseus-widget-radio.perseus-rendered-radio .perseus-radio-rationale-content > .perseus-renderer > .paragraph:not(:last-child) {
1829
+ margin-bottom: 8px;
1830
+ }
1831
+ .perseus-widget-radio .unresponsive-svg-image div,
1832
+ .perseus-widget-radio .svg-image div {
1833
+ display: block;
1834
+ }
1835
+ .perseus-widget-radio li div.instructions {
1836
+ margin-bottom: 5px;
1837
+ }
1838
+ .perseus-widget-radio li .value {
1839
+ display: block;
1840
+ margin-left: 18px;
1841
+ min-height: 22px;
1842
+ }
1843
+ .perseus-widget-radio li img,
1844
+ .perseus-widget-radio li table {
1845
+ display: inline-block;
1846
+ vertical-align: middle;
1847
+ }
1848
+ .perseus-widget-radio li table {
1849
+ border: 1px solid #ccc;
1850
+ }
1851
+ .perseus-widget-radio .perseus-radio-option {
1852
+ /* Radio options with images that are set apart should be on their own line */
1853
+ }
1854
+ .perseus-widget-radio .perseus-radio-option .paragraph + .paragraph:has(img:only-child),
1855
+ .perseus-widget-radio .perseus-radio-option .paragraph:has(img:only-child):has(+ .paragraph) {
1856
+ display: block;
1857
+ }
1858
+ .perseus-widget-radio-fieldset .instructions {
1859
+ font-family: "Lato", sans-serif;
1860
+ }
1861
+ .draggy-boxy-thing .draggable-box,
1862
+ .draggy-boxy-thing .cards-area {
1863
+ background: #eee;
1864
+ border: 1px solid #ccc;
1865
+ border-bottom: 1px solid #aaa;
1866
+ box-shadow: 0 1px 2px #ccc;
1867
+ }
1868
+ .draggy-boxy-thing .card {
1869
+ background-color: #fff;
1870
+ border: 1px solid #b9b9b9;
1871
+ border-bottom-color: #939393;
1872
+ border-radius: 4px;
1873
+ cursor: pointer;
1874
+ touch-action: none;
1875
+ }
1876
+ .draggy-boxy-thing .card.placeholder {
1877
+ background: #ddd;
1878
+ border: 1px solid #ccc;
1879
+ }
1880
+ .draggy-boxy-thing .card.drag-hint {
1881
+ background: none;
1882
+ border: 1px dashed #aaa;
1883
+ cursor: auto;
1884
+ }
1885
+ .draggy-boxy-thing .card.drag-hint:hover {
1886
+ border-color: #aaa;
1887
+ box-shadow: none;
1888
+ }
1889
+ .draggy-boxy-thing .card.dragging {
1890
+ background-color: #ffedcd;
1891
+ opacity: 0.8;
1892
+ filter: opacity(0.8);
1893
+ }
1894
+ .draggy-boxy-thing .card.stack {
1895
+ z-index: auto;
1896
+ }
1897
+ .draggy-boxy-thing .card.stack:after {
1898
+ content: " ";
1899
+ background-color: #fff;
1900
+ border: 1px solid #b9b9b9;
1901
+ border-bottom-color: #939393;
1902
+ border-radius: 4px;
1903
+ height: 100%;
1904
+ width: 100%;
1905
+ z-index: -1;
1906
+ top: 1px;
1907
+ left: 1px;
1908
+ position: absolute;
1909
+ }
1910
+ .draggy-boxy-thing .card:hover {
1911
+ border-color: #ffa500;
1912
+ box-shadow: 0 0 4px #c78100;
1913
+ }
1914
+ .perseus-sortable div.paragraph {
1915
+ margin: 0;
1916
+ }
1917
+ .perseus-sortable .perseus-sortable-draggable:before {
1918
+ content: "";
1919
+ display: inline-block;
1920
+ height: 100%;
1921
+ vertical-align: middle;
1922
+ }
1923
+ .perseus-sortable .perseus-sortable-draggable > div {
1924
+ display: inline-block;
1925
+ font-size: 14px;
1926
+ max-width: 100%;
1927
+ vertical-align: middle;
1928
+ }
1929
+ .perseus-sortable .perseus-sortable-draggable-unpadded img {
1930
+ vertical-align: bottom;
1931
+ }
1932
+ .framework-perseus table.perseus-widget-table-of-values.non-markdown {
1933
+ text-align: left;
1934
+ margin: 20px auto;
1935
+ border-collapse: collapse;
1936
+ }
1937
+ .framework-perseus table.perseus-widget-table-of-values.non-markdown tr {
1938
+ height: 23px;
1939
+ }
1940
+ .framework-perseus table.perseus-widget-table-of-values.non-markdown th,
1941
+ .framework-perseus table.perseus-widget-table-of-values.non-markdown td {
1942
+ border: 2px solid black;
1943
+ border-width: 0 2px;
1944
+ }
1945
+ .framework-perseus table.perseus-widget-table-of-values.non-markdown th:first-child,
1946
+ .framework-perseus table.perseus-widget-table-of-values.non-markdown td:first-child {
1947
+ border-left: 0;
1948
+ }
1949
+ .framework-perseus table.perseus-widget-table-of-values.non-markdown th:last-child,
1950
+ .framework-perseus table.perseus-widget-table-of-values.non-markdown td:last-child {
1951
+ border-right: 0;
1952
+ }
1953
+ .framework-perseus table.perseus-widget-table-of-values.non-markdown th {
1954
+ font-weight: normal;
1955
+ padding: 5px;
1956
+ width: 80px;
1957
+ text-align: left;
1958
+ border-bottom: 2px solid black;
1959
+ }
1960
+ .framework-perseus table.perseus-widget-table-of-values.non-markdown th .paragraph {
1961
+ margin: 0;
1962
+ }
1963
+ .framework-perseus table.perseus-widget-table-of-values.non-markdown td {
1964
+ padding: 0px 5px;
1965
+ }
1966
+ .framework-perseus table.perseus-widget-table-of-values.non-markdown tbody tr:first-child td {
1967
+ padding-top: 5px;
1968
+ }
1969
+ .framework-perseus table.perseus-widget-table-of-values input {
1970
+ width: 80px;
1971
+ }
1972
+ body.mobile .framework-perseus table.perseus-widget-table-of-values.non-markdown td {
1973
+ padding: 5px;
1974
+ }
1975
+ .perseus-widget-container.widget-nohighlight {
1976
+ transition: all 0.15s;
1977
+ }
1978
+ .perseus-widget-container.widget-highlight {
1979
+ box-shadow: 0px 0px 0px 2px #ffa500;
1980
+ transition: all 0.15s;
1981
+ }
1982
+ .perseus-widget-container.widget-inline {
1983
+ display: inline;
1984
+ }
1985
+ .perseus-widget-container.widget-inline-block {
1986
+ display: inline-block;
1987
+ vertical-align: bottom;
1988
+ }
1989
+ .bibliotron-exercise .perseus-hint-renderer {
1990
+ border-left: 4px solid #f6f7f7;
1991
+ padding-left: 16px;
1992
+ position: relative;
1993
+ }
1994
+ .bibliotron-exercise .perseus-hint-renderer:focus {
1995
+ border-left-color: #d6d8da;
1996
+ outline: none;
1997
+ }
1998
+ .bibliotron-exercise .perseus-hint-renderer:before,
1999
+ .bibliotron-exercise .perseus-hint-renderer:after {
2000
+ content: "";
2001
+ display: table;
2002
+ clear: both;
2003
+ }
2004
+ .bibliotron-exercise .perseus-hint-renderer div.paragraph {
2005
+ margin-top: 0px;
2006
+ margin-bottom: 16px;
2007
+ }
2008
+ .bibliotron-exercise .perseus-hint-renderer.last-hint {
2009
+ margin-bottom: 32px;
2010
+ }
2011
+ @media (max-width: 767px) {
2012
+ .bibliotron-exercise .perseus-hint-renderer.last-hint {
2013
+ margin-bottom: 0;
2014
+ }
2015
+ }
2016
+ .perseus-hint-label {
2017
+ color: #00457c;
2018
+ display: none;
2019
+ font-weight: 600;
2020
+ margin-right: 13px;
2021
+ position: absolute;
2022
+ right: 100%;
2023
+ white-space: nowrap;
2024
+ }
2025
+ .perseus-domain-science .perseus-hint-label {
2026
+ color: #9e034e;
2027
+ }
2028
+ .perseus-domain-math .perseus-hint-label {
2029
+ color: #007d96;
2030
+ }
2031
+ .perseus-domain-economics .perseus-hint-label {
2032
+ color: #a75a05;
2033
+ }
2034
+ .perseus-domain-partner .perseus-hint-label {
2035
+ color: #208170;
2036
+ }
2037
+ .perseus-domain-humanities .perseus-hint-label {
2038
+ color: #be2612;
2039
+ }
2040
+ .perseus-domain-test-prep .perseus-hint-label {
2041
+ color: #543b78;
2042
+ }
2043
+ .perseus-domain-cs .perseus-hint-label {
2044
+ color: #0d923f;
2045
+ }
2046
+ .bibliotron-exercise .perseus-hint-renderer.last-rendered .perseus-hint-label {
2047
+ display: block;
2048
+ }
2049
+ @media (max-width: 767px) {
2050
+ .bibliotron-exercise .perseus-hint-renderer.last-rendered .perseus-hint-label {
2051
+ display: none;
2052
+ }
2053
+ }
2054
+ /*
2055
+ Extra specificity needed to override other styles that are too broad.
2056
+ Once we get a better framework in place (like CSS Modules), we can fix this selector.
2057
+ */
2058
+ .framework-perseus .perseus-formats-tooltip .paragraph,
2059
+ .framework-perseus .tooltipContainer .perseus-formats-tooltip .paragraph ul {
2060
+ margin: 0;
2061
+ }
2062
+ .perseus-math-input.mq-editable-field.mq-math-mode {
2063
+ background-color: transparent;
2064
+ font-size: 18px;
2065
+ min-width: 100px;
2066
+ border: unset;
2067
+ }
2068
+ .perseus-math-input.mq-editable-field.mq-math-mode.mq-focused {
2069
+ box-shadow: unset;
2070
+ }
2071
+ .perseus-math-input.mq-editable-field.mq-math-mode > .mq-root-block {
2072
+ padding: 4px;
2073
+ }
2074
+ .perseus-math-input.mq-editable-field.mq-math-mode .mq-cursor {
2075
+ padding-left: 0;
2076
+ }
2077
+ .perseus-math-input.mq-editable-field.mq-math-mode .mq-paren.mq-ghost {
2078
+ color: inherit;
2079
+ }
2080
+ .perseus-math-input.mq-editable-field.mq-math-mode .mq-paren + span {
2081
+ margin: 0;
2082
+ }
2083
+ .perseus-math-input.mq-editable-field.mq-math-mode .mq-binary-operator {
2084
+ font-family: KaTeX_Main !important;
2085
+ }
2086
+ .perseus-math-input.mq-editable-field.mq-math-mode sup {
2087
+ line-height: normal;
2088
+ }
2089
+ .perseus-widget-editor .perseus-math-input.mq-editable-field.mq-math-mode > .mq-root-block {
2090
+ border-radius: 0;
2091
+ }
2092
+ .math-input-buttons {
2093
+ background-color: rgba(255, 255, 255, 0.7);
2094
+ border-radius: 5px;
2095
+ border: 1px solid #ddd;
2096
+ box-sizing: border-box;
2097
+ margin-top: 5px;
2098
+ padding: 2px;
2099
+ width: 201px;
2100
+ }
2101
+ .math-input-buttons.absolute {
2102
+ left: -2px;
2103
+ position: absolute;
2104
+ top: -3px;
2105
+ z-index: 5;
2106
+ }
2107
+ .tex-button {
2108
+ display: block;
2109
+ float: left;
2110
+ width: 35px;
2111
+ height: 35px;
2112
+ margin: 2px;
2113
+ border: 1px solid #1c758a;
2114
+ background-color: white;
2115
+ border-radius: 5px;
2116
+ }
2117
+ .tex-button:hover {
2118
+ cursor: pointer;
2119
+ background-color: #f0f0f0;
2120
+ }
2121
+ .tex-button:focus {
2122
+ border: 2px solid #1c758a;
2123
+ outline: none;
2124
+ }
2125
+ .tex-button-row {
2126
+ margin: 5px 0;
2127
+ }
2128
+ .tex-button-row:first-child {
2129
+ margin-top: 0;
2130
+ }
2131
+ .tex-button-row:last-child {
2132
+ margin-bottom: 0;
2133
+ }
2134
+ .renderer-widget-error {
2135
+ background-color: #fcc;
2136
+ }
2137
+ .perseus-error {
2138
+ background: #ffbaba;
2139
+ border: 2px solid red;
2140
+ border-radius: 5px;
2141
+ padding: 20px;
2142
+ margin: 15px 0 10px;
2143
+ }
2144
+ @media (max-width: 767px) {
2145
+ .perseus-renderer-responsive {
2146
+ margin: 0 16px;
2147
+ }
2148
+ .perseus-renderer-responsive .perseus-renderer-responsive {
2149
+ margin: 0;
2150
+ }
2151
+ }
2152
+ @media (max-width: 767px) {
2153
+ .perseus-mobile .perseus-block-math {
2154
+ font-size: 18px;
2155
+ }
2156
+ }
2157
+ .perseus-widget-editor-content .perseus-editor-accordion h2 {
2158
+ padding-top: 0;
2159
+ }
2160
+ .keypad-input {
2161
+ outline: none !important;
2162
+ }
2163
+ .keypad-input .mq-editable-field .mq-root-block {
2164
+ overflow-x: auto;
2165
+ }
2166
+ .keypad-input .mq-editable-field .mq-cursor:not(:only-child),
2167
+ .keypad-input .mq-editable-field .mq-root-block.mq-hasCursor > .mq-cursor:only-child {
2168
+ /* HACK(charlie): Magic numbers to properly size and position the vertical
2169
+ cursor, which is visible whenever the cursor is not alone in its parent,
2170
+ with the exception that it's also visible when the entire input is
2171
+ empty. */
2172
+ height: 20px !important;
2173
+ width: 2px;
2174
+ margin-top: -5px !important;
2175
+ vertical-align: middle !important;
2176
+ border-radius: 1px !important;
2177
+ }
2178
+ .keypad-input .mq-editable-field .mq-cursor {
2179
+ border-left: 2px solid #1865f2 !important;
2180
+ margin-left: -1px !important;
2181
+ margin-right: -1px !important;
2182
+ opacity: 1 !important;
2183
+ transition: opacity 300ms ease !important;
2184
+ visibility: visible !important;
2185
+ }
2186
+ .keypad-input .mq-editable-field .mq-cursor.mq-blink {
2187
+ opacity: 0 !important;
2188
+ visibility: visible !important;
2189
+ }
2190
+ .keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child {
2191
+ border: 2px solid !important;
2192
+ border-color: #1865f2 !important;
2193
+ border-radius: 1px;
2194
+ opacity: 1 !important;
2195
+ padding: 0 4px 0 4px;
2196
+ transition: border-color 300ms ease !important;
2197
+ }
2198
+ .keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child.mq-blink {
2199
+ border-color: #1865f2 !important;
2200
+ opacity: 1 !important;
2201
+ }
2202
+ .keypad-input .mq-empty {
2203
+ background: transparent !important;
2204
+ }
2205
+ .keypad-input .mq-empty:not(.mq-root-block):after,
2206
+ .keypad-input .mq-hasCursor:empty:not(.mq-root-block):after {
2207
+ border: 2px solid rgba(33, 36, 44, 0.16);
2208
+ border-radius: 1px;
2209
+ color: transparent;
2210
+ display: inline-block;
2211
+ margin-left: -1px;
2212
+ margin-right: -1px;
2213
+ padding: 0 4px 0 4px;
2214
+ visibility: visible !important;
2215
+ }
2216
+ .keypad-input .mq-selection .mq-empty:not(.mq-root-block):after {
2217
+ border-color: white;
2218
+ }
2219
+ .keypad-input .mq-hasCursor:empty:not(.mq-root-block):after {
2220
+ content: "c";
2221
+ }
2222
+ .keypad-input .mq-math-mode .mq-selection .mq-non-leaf,
2223
+ .keypad-input .mq-editable-field .mq-selection .mq-non-leaf {
2224
+ background: #1865f2 !important;
2225
+ border-color: white !important;
2226
+ color: white !important;
2227
+ }
2228
+ .keypad-input .mq-math-mode .mq-selection .mq-scaled,
2229
+ .keypad-input .mq-editable-field .mq-selection .mq-scaled {
2230
+ background: transparent !important;
2231
+ border-color: transparent !important;
2232
+ color: white !important;
2233
+ }
2234
+ .keypad-input .mq-selection {
2235
+ background: #1865f2 !important;
2236
+ border-color: white !important;
2237
+ color: white !important;
2238
+ display: inline-block !important;
2239
+ }
2240
+ /**
2241
+ * @license
2242
+ * MathQuill v0.10.1, by Han, Jeanine, and Mary
2243
+ * http://mathquill.com | maintainers@mathquill.com
2244
+ *
2245
+ * This Source Code Form is subject to the terms of the
2246
+ * Mozilla Public License, v. 2.0. If a copy of the MPL
2247
+ * was not distributed with this file, You can obtain
2248
+ * one at http://mozilla.org/MPL/2.0/.
2249
+ */
2250
+
2251
+ .mq-aria-alert {
2252
+ position: absolute;
2253
+ left: -1000px;
2254
+ top: -1000px;
2255
+ width: 0px;
2256
+ height: 0px;
2257
+ text-align: left;
2258
+ overflow: hidden;
2259
+ }
2260
+ .mq-mathspeak {
2261
+ position: absolute;
2262
+ left: -1000px;
2263
+ top: -1000px;
2264
+ width: 0px;
2265
+ height: 0px;
2266
+ text-align: left;
2267
+ overflow: hidden;
2268
+ }
2269
+ @font-face {
2270
+ font-family: Symbola;
2271
+ src: url(/fonts/Symbola.eot);
2272
+ src: local('Symbola Regular'), local('Symbola'), url(/fonts/Symbola.woff2) format('woff2'), url(/fonts/Symbola.woff) format('woff'), url(/fonts/Symbola.ttf) format('truetype'), url(/fonts/Symbola.otf) format('opentype'), url(/fonts/Symbola.svg#Symbola) format('svg');
2273
+ }
2274
+ .mq-editable-field {
2275
+ display: -moz-inline-box;
2276
+ display: inline-block;
2277
+ }
2278
+ .mq-editable-field .mq-cursor {
2279
+ border-left: 1px solid currentColor;
2280
+ margin-left: -1px;
2281
+ position: relative;
2282
+ z-index: 1;
2283
+ padding: 0;
2284
+ display: -moz-inline-box;
2285
+ display: inline-block;
2286
+ }
2287
+ .mq-editable-field .mq-cursor.mq-blink {
2288
+ visibility: hidden;
2289
+ }
2290
+ .mq-editable-field,
2291
+ .mq-math-mode .mq-editable-field {
2292
+ border: 1px solid gray;
2293
+ }
2294
+ .mq-editable-field.mq-focused,
2295
+ .mq-math-mode .mq-editable-field.mq-focused {
2296
+ -webkit-box-shadow: #8bd 0 0 1px 2px, inset #6ae 0 0 2px 0;
2297
+ -moz-box-shadow: #8bd 0 0 1px 2px, inset #6ae 0 0 2px 0;
2298
+ box-shadow: #8bd 0 0 1px 2px, inset #6ae 0 0 2px 0;
2299
+ border-color: #709ac0;
2300
+ }
2301
+ .mq-math-mode .mq-editable-field {
2302
+ margin: 1px;
2303
+ }
2304
+ .mq-editable-field .mq-latex-command-input {
2305
+ color: inherit;
2306
+ font-family: 'Courier New', monospace;
2307
+ border: 1px solid gray;
2308
+ padding-right: 1px;
2309
+ margin-right: 1px;
2310
+ margin-left: 2px;
2311
+ }
2312
+ .mq-editable-field .mq-latex-command-input.mq-empty {
2313
+ background: transparent;
2314
+ }
2315
+ .mq-editable-field .mq-latex-command-input.mq-hasCursor {
2316
+ border-color: ActiveBorder;
2317
+ }
2318
+ .mq-editable-field.mq-empty:after,
2319
+ .mq-editable-field.mq-text-mode:after,
2320
+ .mq-math-mode .mq-empty:after {
2321
+ visibility: hidden;
2322
+ content: 'c';
2323
+ }
2324
+ .mq-editable-field .mq-cursor:only-child:after,
2325
+ .mq-editable-field .mq-textarea + .mq-cursor:last-child:after {
2326
+ visibility: hidden;
2327
+ content: 'c';
2328
+ }
2329
+ .mq-editable-field .mq-text-mode .mq-cursor:only-child:after {
2330
+ content: '';
2331
+ }
2332
+ .mq-editable-field.mq-text-mode {
2333
+ overflow-x: auto;
2334
+ overflow-y: hidden;
2335
+ }
2336
+ .mq-root-block,
2337
+ .mq-math-mode .mq-root-block {
2338
+ display: -moz-inline-box;
2339
+ display: inline-block;
2340
+ width: 100%;
2341
+ padding: 2px;
2342
+ -webkit-box-sizing: border-box;
2343
+ -moz-box-sizing: border-box;
2344
+ box-sizing: border-box;
2345
+ white-space: nowrap;
2346
+ overflow: hidden;
2347
+ vertical-align: middle;
2348
+ }
2349
+ .mq-root-block .mq-digit,
2350
+ .mq-math-mode .mq-root-block .mq-digit {
2351
+ margin-left: 0.009em;
2352
+ margin-right: 0.009em;
2353
+ }
2354
+ .mq-root-block .mq-group-start,
2355
+ .mq-math-mode .mq-root-block .mq-group-start {
2356
+ margin-left: 0.11em;
2357
+ margin-right: -0.01em;
2358
+ }
2359
+ .mq-root-block .mq-group-other,
2360
+ .mq-math-mode .mq-root-block .mq-group-other {
2361
+ margin-left: -0.01em;
2362
+ margin-right: -0.01em;
2363
+ }
2364
+ .mq-root-block .mq-group-leading-1,
2365
+ .mq-math-mode .mq-root-block .mq-group-leading-1,
2366
+ .mq-root-block .mq-group-leading-2,
2367
+ .mq-math-mode .mq-root-block .mq-group-leading-2 {
2368
+ margin-left: 0;
2369
+ margin-right: -0.01em;
2370
+ }
2371
+ .mq-root-block .mq-group-leading-3,
2372
+ .mq-math-mode .mq-root-block .mq-group-leading-3 {
2373
+ margin-left: 0.036em;
2374
+ margin-right: -0.01em;
2375
+ }
2376
+ .mq-root-block.mq-suppress-grouping .mq-group-start,
2377
+ .mq-math-mode .mq-root-block.mq-suppress-grouping .mq-group-start,
2378
+ .mq-root-block.mq-suppress-grouping .mq-group-other,
2379
+ .mq-math-mode .mq-root-block.mq-suppress-grouping .mq-group-other,
2380
+ .mq-root-block.mq-suppress-grouping .mq-group-leading-1,
2381
+ .mq-math-mode .mq-root-block.mq-suppress-grouping .mq-group-leading-1,
2382
+ .mq-root-block.mq-suppress-grouping .mq-group-leading-2,
2383
+ .mq-math-mode .mq-root-block.mq-suppress-grouping .mq-group-leading-2,
2384
+ .mq-root-block.mq-suppress-grouping .mq-group-leading-3,
2385
+ .mq-math-mode .mq-root-block.mq-suppress-grouping .mq-group-leading-3 {
2386
+ margin-left: 0.009em;
2387
+ margin-right: 0.009em;
2388
+ }
2389
+ .mq-math-mode {
2390
+ font-variant: normal;
2391
+ font-weight: normal;
2392
+ font-style: normal;
2393
+ font-size: 115%;
2394
+ line-height: 1;
2395
+ display: -moz-inline-box;
2396
+ display: inline-block;
2397
+ }
2398
+ .mq-math-mode .mq-non-leaf,
2399
+ .mq-math-mode .mq-scaled {
2400
+ display: -moz-inline-box;
2401
+ display: inline-block;
2402
+ }
2403
+ .mq-math-mode var,
2404
+ .mq-math-mode .mq-text-mode,
2405
+ .mq-math-mode .mq-nonSymbola {
2406
+ font-family: 'Times New Roman', Symbola, serif;
2407
+ line-height: 0.9;
2408
+ }
2409
+ .mq-math-mode svg {
2410
+ fill: currentColor;
2411
+ position: absolute;
2412
+ top: 0;
2413
+ left: 0;
2414
+ width: 100%;
2415
+ height: 100%;
2416
+ }
2417
+ .mq-math-mode * {
2418
+ font-size: inherit;
2419
+ line-height: inherit;
2420
+ margin: 0;
2421
+ padding: 0;
2422
+ border-color: black;
2423
+ -webkit-user-select: none;
2424
+ -moz-user-select: none;
2425
+ user-select: none;
2426
+ box-sizing: border-box;
2427
+ }
2428
+ .mq-math-mode .mq-empty {
2429
+ background: rgba(0, 0, 0, 0.2);
2430
+ }
2431
+ .mq-math-mode .mq-empty.mq-root-block {
2432
+ background: transparent;
2433
+ }
2434
+ .mq-math-mode .mq-empty.mq-quiet-delimiter {
2435
+ background: transparent;
2436
+ }
2437
+ .mq-math-mode.mq-empty {
2438
+ background: transparent;
2439
+ }
2440
+ .mq-math-mode .mq-text-mode {
2441
+ display: inline-block;
2442
+ white-space: pre;
2443
+ }
2444
+ .mq-math-mode .mq-text-mode.mq-hasCursor {
2445
+ box-shadow: inset darkgray 0 0.1em 0.2em;
2446
+ padding: 0 0.1em;
2447
+ margin: 0 -0.1em;
2448
+ min-width: 1ex;
2449
+ }
2450
+ .mq-math-mode .mq-font {
2451
+ font: 1em 'Times New Roman', Symbola, serif;
2452
+ }
2453
+ .mq-math-mode .mq-font * {
2454
+ font-family: inherit;
2455
+ font-style: inherit;
2456
+ }
2457
+ .mq-math-mode b,
2458
+ .mq-math-mode b.mq-font {
2459
+ font-weight: bolder;
2460
+ }
2461
+ .mq-math-mode var,
2462
+ .mq-math-mode i,
2463
+ .mq-math-mode i.mq-font {
2464
+ font-style: italic;
2465
+ }
2466
+ .mq-math-mode var.mq-f {
2467
+ margin-right: 0.2em;
2468
+ margin-left: 0.1em;
2469
+ }
2470
+ .mq-math-mode .mq-roman var.mq-f {
2471
+ margin: 0;
2472
+ }
2473
+ .mq-math-mode big {
2474
+ font-size: 200%;
2475
+ }
2476
+ .mq-math-mode .mq-int > big {
2477
+ display: inline-block;
2478
+ -webkit-transform: scaleX(0.7);
2479
+ -moz-transform: scaleX(0.7);
2480
+ -ms-transform: scaleX(0.7);
2481
+ -o-transform: scaleX(0.7);
2482
+ transform: scaleX(0.7);
2483
+ vertical-align: -0.16em;
2484
+ }
2485
+ .mq-math-mode .mq-int > .mq-supsub {
2486
+ font-size: 80%;
2487
+ vertical-align: -1.1em;
2488
+ padding-right: 0.2em;
2489
+ }
2490
+ .mq-math-mode .mq-int > .mq-supsub > .mq-sup > .mq-sup-inner {
2491
+ vertical-align: 1.3em;
2492
+ }
2493
+ .mq-math-mode .mq-int > .mq-supsub > .mq-sub {
2494
+ margin-left: -0.35em;
2495
+ }
2496
+ .mq-math-mode .mq-roman {
2497
+ font-style: normal;
2498
+ }
2499
+ .mq-math-mode .mq-sans-serif {
2500
+ font-family: sans-serif, Symbola, serif;
2501
+ }
2502
+ .mq-math-mode .mq-monospace {
2503
+ font-family: monospace, Symbola, serif;
2504
+ }
2505
+ .mq-math-mode .mq-overline {
2506
+ border-top: 1px solid;
2507
+ margin-top: 1px;
2508
+ }
2509
+ .mq-math-mode .mq-underline {
2510
+ border-bottom: 1px solid;
2511
+ margin-bottom: 1px;
2512
+ }
2513
+ .mq-math-mode .mq-binary-operator {
2514
+ padding: 0 0.2em;
2515
+ display: -moz-inline-box;
2516
+ display: inline-block;
2517
+ }
2518
+ .mq-math-mode .mq-supsub {
2519
+ text-align: left;
2520
+ font-size: 90%;
2521
+ vertical-align: -0.5em;
2522
+ }
2523
+ .mq-math-mode .mq-supsub.mq-sup-only {
2524
+ vertical-align: 0.5em;
2525
+ }
2526
+ .mq-math-mode .mq-supsub.mq-sup-only > .mq-sup {
2527
+ display: inline-block;
2528
+ vertical-align: text-bottom;
2529
+ }
2530
+ .mq-math-mode .mq-supsub .mq-sup {
2531
+ display: block;
2532
+ }
2533
+ .mq-math-mode .mq-supsub .mq-sub {
2534
+ display: block;
2535
+ float: left;
2536
+ }
2537
+ .mq-math-mode .mq-supsub .mq-binary-operator {
2538
+ padding: 0 0.1em;
2539
+ }
2540
+ .mq-math-mode .mq-supsub .mq-fraction {
2541
+ font-size: 70%;
2542
+ }
2543
+ .mq-math-mode sup.mq-nthroot {
2544
+ font-size: 80%;
2545
+ vertical-align: 0.8em;
2546
+ margin-right: -0.6em;
2547
+ margin-left: 0.2em;
2548
+ min-width: 0.5em;
2549
+ }
2550
+ .mq-math-mode .mq-ghost svg {
2551
+ opacity: 0.2;
2552
+ }
2553
+ .mq-math-mode .mq-bracket-middle {
2554
+ margin-top: 0.1em;
2555
+ margin-bottom: 0.1em;
2556
+ }
2557
+ .mq-math-mode .mq-bracket-l,
2558
+ .mq-math-mode .mq-bracket-r {
2559
+ position: absolute;
2560
+ top: 0;
2561
+ bottom: 2px;
2562
+ }
2563
+ .mq-math-mode .mq-bracket-l {
2564
+ left: 0;
2565
+ }
2566
+ .mq-math-mode .mq-bracket-r {
2567
+ right: 0;
2568
+ }
2569
+ .mq-math-mode .mq-bracket-container {
2570
+ position: relative;
2571
+ }
2572
+ .mq-math-mode .mq-array {
2573
+ vertical-align: middle;
2574
+ text-align: center;
2575
+ }
2576
+ .mq-math-mode .mq-array > span {
2577
+ display: block;
2578
+ }
2579
+ .mq-math-mode .mq-operator-name {
2580
+ font-family: Symbola, 'Times New Roman', serif;
2581
+ line-height: 0.9;
2582
+ font-style: normal;
2583
+ }
2584
+ .mq-math-mode var.mq-operator-name.mq-first {
2585
+ padding-left: 0.2em;
2586
+ }
2587
+ .mq-math-mode var.mq-operator-name.mq-last,
2588
+ .mq-math-mode .mq-supsub.mq-after-operator-name {
2589
+ padding-right: 0.2em;
2590
+ }
2591
+ .mq-math-mode .mq-fraction {
2592
+ font-size: 90%;
2593
+ text-align: center;
2594
+ vertical-align: -0.4em;
2595
+ padding: 0 0.2em;
2596
+ }
2597
+ .mq-math-mode .mq-fraction,
2598
+ .mq-math-mode .mq-large-operator,
2599
+ .mq-math-mode x:-moz-any-link {
2600
+ display: -moz-groupbox;
2601
+ }
2602
+ .mq-math-mode .mq-fraction,
2603
+ .mq-math-mode .mq-large-operator,
2604
+ .mq-math-mode x:-moz-any-link,
2605
+ .mq-math-mode x:default {
2606
+ display: inline-block;
2607
+ }
2608
+ .mq-math-mode .mq-numerator,
2609
+ .mq-math-mode .mq-denominator,
2610
+ .mq-math-mode .mq-dot-recurring {
2611
+ display: block;
2612
+ }
2613
+ .mq-math-mode .mq-numerator {
2614
+ padding: 0 0.1em;
2615
+ }
2616
+ .mq-math-mode .mq-denominator {
2617
+ border-top: 1px solid;
2618
+ float: right;
2619
+ width: 100%;
2620
+ padding: 0.1em;
2621
+ }
2622
+ .mq-math-mode .mq-dot-recurring {
2623
+ text-align: center;
2624
+ height: 0.3em;
2625
+ }
2626
+ .mq-math-mode .mq-sqrt-prefix {
2627
+ position: absolute;
2628
+ top: 1px;
2629
+ bottom: 0.15em;
2630
+ width: 0.95em;
2631
+ }
2632
+ .mq-math-mode .mq-sqrt-container {
2633
+ position: relative;
2634
+ }
2635
+ .mq-math-mode .mq-sqrt-stem {
2636
+ border-top: 1px solid;
2637
+ margin-top: 1px;
2638
+ margin-left: 0.9em;
2639
+ padding-left: 0.15em;
2640
+ padding-right: 0.2em;
2641
+ margin-right: 0.1em;
2642
+ padding-top: 1px;
2643
+ }
2644
+ .mq-math-mode .mq-diacritic-above {
2645
+ display: block;
2646
+ text-align: center;
2647
+ line-height: 0.4em;
2648
+ }
2649
+ .mq-math-mode .mq-diacritic-stem {
2650
+ display: block;
2651
+ text-align: center;
2652
+ }
2653
+ .mq-math-mode .mq-hat-prefix {
2654
+ display: block;
2655
+ text-align: center;
2656
+ line-height: 0.95em;
2657
+ margin-bottom: -0.7em;
2658
+ transform: scaleX(1.5);
2659
+ -moz-transform: scaleX(1.5);
2660
+ -o-transform: scaleX(1.5);
2661
+ -webkit-transform: scaleX(1.5);
2662
+ }
2663
+ .mq-math-mode .mq-hat-stem {
2664
+ display: block;
2665
+ }
2666
+ .mq-math-mode .mq-large-operator {
2667
+ vertical-align: -0.2em;
2668
+ padding: 0.2em;
2669
+ text-align: center;
2670
+ }
2671
+ .mq-math-mode .mq-large-operator .mq-from,
2672
+ .mq-math-mode .mq-large-operator big,
2673
+ .mq-math-mode .mq-large-operator .mq-to {
2674
+ display: block;
2675
+ }
2676
+ .mq-math-mode .mq-large-operator .mq-from,
2677
+ .mq-math-mode .mq-large-operator .mq-to {
2678
+ font-size: 80%;
2679
+ }
2680
+ .mq-math-mode .mq-large-operator .mq-from {
2681
+ float: right;
2682
+ /* take out of normal flow to manipulate baseline */
2683
+ width: 100%;
2684
+ }
2685
+ .mq-math-mode,
2686
+ .mq-math-mode .mq-editable-field {
2687
+ cursor: text;
2688
+ font-family: Symbola, 'Times New Roman', serif;
2689
+ }
2690
+ .mq-math-mode .mq-overarc {
2691
+ border-top: 1px solid black;
2692
+ -webkit-border-top-right-radius: 50% 0.3em;
2693
+ -moz-border-radius-topright: 50% 0.3em;
2694
+ border-top-right-radius: 50% 0.3em;
2695
+ -webkit-border-top-left-radius: 50% 0.3em;
2696
+ -moz-border-radius-topleft: 50% 0.3em;
2697
+ border-top-left-radius: 50% 0.3em;
2698
+ margin-top: 1px;
2699
+ padding-top: 0.15em;
2700
+ }
2701
+ .mq-math-mode .mq-overarrow {
2702
+ min-width: 0.5em;
2703
+ border-top: 1px solid black;
2704
+ margin-top: 1px;
2705
+ padding-top: 0.2em;
2706
+ text-align: center;
2707
+ position: relative;
2708
+ }
2709
+ .mq-math-mode .mq-overarrow:after {
2710
+ position: absolute;
2711
+ right: -0.1em;
2712
+ top: -0.48em;
2713
+ font-size: 0.5em;
2714
+ content: '\27A4';
2715
+ }
2716
+ .mq-math-mode .mq-overarrow.mq-arrow-left:after {
2717
+ content: '';
2718
+ display: none;
2719
+ }
2720
+ .mq-math-mode .mq-overarrow.mq-arrow-left:before,
2721
+ .mq-math-mode .mq-overarrow.mq-arrow-leftright:before {
2722
+ position: absolute;
2723
+ top: -0.48em;
2724
+ left: -0.1em;
2725
+ font-size: 0.5em;
2726
+ content: '\27A4';
2727
+ -moz-transform: scaleX(-1);
2728
+ -o-transform: scaleX(-1);
2729
+ -webkit-transform: scaleX(-1);
2730
+ transform: scaleX(-1);
2731
+ filter: FlipH;
2732
+ -ms-filter: 'FlipH';
2733
+ }
2734
+ .mq-math-mode .mq-selection,
2735
+ .mq-editable-field .mq-selection,
2736
+ .mq-math-mode .mq-selection .mq-non-leaf,
2737
+ .mq-editable-field .mq-selection .mq-non-leaf,
2738
+ .mq-math-mode .mq-selection .mq-scaled,
2739
+ .mq-editable-field .mq-selection .mq-scaled {
2740
+ background: #b4d5fe !important;
2741
+ }
2742
+ .mq-math-mode .mq-selection.mq-blur,
2743
+ .mq-editable-field .mq-selection.mq-blur,
2744
+ .mq-math-mode .mq-selection.mq-blur .mq-non-leaf,
2745
+ .mq-editable-field .mq-selection.mq-blur .mq-non-leaf,
2746
+ .mq-math-mode .mq-selection.mq-blur .mq-scaled,
2747
+ .mq-editable-field .mq-selection.mq-blur .mq-scaled {
2748
+ background: #d4d4d4 !important;
2749
+ color: black;
2750
+ border-color: black;
2751
+ }
2752
+ html body .mq-math-mode .mq-selection .mq-nthroot-container *,
2753
+ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
2754
+ background: transparent !important;
2755
+ }
2756
+ .mq-editable-field .mq-textarea,
2757
+ .mq-math-mode .mq-textarea {
2758
+ position: relative;
2759
+ -webkit-user-select: text;
2760
+ -moz-user-select: text;
2761
+ user-select: text;
2762
+ }
2763
+ .mq-editable-field .mq-textarea *,
2764
+ .mq-math-mode .mq-textarea * {
2765
+ -webkit-user-select: text;
2766
+ -moz-user-select: text;
2767
+ user-select: text;
2768
+ position: absolute;
2769
+ clip: rect(1em 1em 1em 1em);
2770
+ -webkit-transform: scale(0);
2771
+ -moz-transform: scale(0);
2772
+ -ms-transform: scale(0);
2773
+ -o-transform: scale(0);
2774
+ transform: scale(0);
2775
+ resize: none;
2776
+ width: 1px;
2777
+ height: 1px;
2778
+ box-sizing: content-box;
2779
+ }
2780
+
2781
+
2782
+ .MafsView .protractor-rotation-handle {
2783
+ cursor: grab;
2784
+ /* `pointer-events: all` is needed to make the hit target the size of the
2785
+ * entire <g> element and not just its visible subelements */
2786
+ pointer-events: all;
2787
+ transition: transform 0.15s ease-out;
2788
+ }
2789
+
2790
+ .MafsView .protractor-rotation-handle:hover {
2791
+ transform: scale(1.2);
2792
+ }
2793
+
2794
+ .MafsView .protractor-rotation-handle-arrow-arc {
2795
+ fill: none;
2796
+ stroke: var(--mafs-blue);
2797
+ stroke-width: 8;
2798
+ /* `strokeLinecap: square` prevents a hairline crack from appearing
2799
+ * between the arc and the arrowheads, by making the arc extend a bit
2800
+ * beyond its start and end coordinates.
2801
+ */
2802
+ stroke-linecap: square;
2803
+ }
2804
+
2805
+ .MafsView .protractor-rotation-handle-arrowhead {
2806
+ fill: var(--mafs-blue);
2807
+ stroke: none;
2808
+ }
2809
+
2810
+ .MafsView {
2811
+ display: block;
2812
+ background: var(--mafs-bg);
2813
+ overflow: hidden;
2814
+ -webkit-user-select: none;
2815
+ user-select: none;
2816
+ font-family: inherit;
2817
+ font-variant-numeric: tabular-nums;
2818
+ touch-action: none;
2819
+ outline: 0;
2820
+
2821
+ --mafs-bg: black;
2822
+ --mafs-fg: white;
2823
+
2824
+ --mafs-origin-color: var(--mafs-fg);
2825
+ --mafs-line-color: #555;
2826
+ --mafs-line-stroke-dash-style: 4, 3;
2827
+ --mafs-axis-stroke-width: 1px;
2828
+ --grid-line-subdivision-color: #222;
2829
+
2830
+ --mafs-red: #f11d0e;
2831
+ --mafs-orange: #f14e0e;
2832
+ --mafs-yellow: #ffe44a;
2833
+ --mafs-green: #15e272;
2834
+ --mafs-blue: #58a6ff;
2835
+ --mafs-indigo: #7c58ff;
2836
+ --mafs-violet: #ae58ff;
2837
+ --mafs-pink: #ee00ab;
2838
+ }
2839
+
2840
+ .MafsView text {
2841
+ fill: var(--mafs-fg);
2842
+ cursor: default;
2843
+ }
2844
+
2845
+ .MafsView path {
2846
+ stroke: var(--mafs-fg);
2847
+ }
2848
+
2849
+ .MafsView:focus-visible {
2850
+ border-radius: 5px;
2851
+ outline: 3px solid #58a6ff;
2852
+ }
2853
+
2854
+ @supports not selector(:focus-visible) {
2855
+ .MafsView:focus {
2856
+ border-radius: 5px;
2857
+ outline: 3px solid #58a6ff;
2858
+ }
2859
+ }
2860
+
2861
+ .mafs-shadow {
2862
+ paint-order: stroke;
2863
+ stroke-width: 3px;
2864
+ stroke: var(--mafs-bg);
2865
+ stroke-opacity: 0.75;
2866
+ stroke-linejoin: round;
2867
+ }
2868
+
2869
+ .mafs-movable-point {
2870
+ cursor: grab;
2871
+ touch-action: none;
2872
+ }
2873
+
2874
+ .mafs-movable-point-dragging {
2875
+ cursor: grabbing;
2876
+ }
2877
+
2878
+ .mafs-movable-point:focus {
2879
+ outline: 0;
2880
+ }
2881
+
2882
+ .mafs-movable-point * {
2883
+ fill: none;
2884
+ stroke: none;
2885
+ }
2886
+
2887
+ .mafs-movable-point-hitbox {
2888
+ fill: transparent;
2889
+ }
2890
+
2891
+ .mafs-movable-point-focus {
2892
+ stroke: var(--movable-point-color);
2893
+ stroke-width: 2;
2894
+ stroke-opacity: 0;
2895
+ fill: none;
2896
+ transition: stroke-opacity 0.2s ease;
2897
+ }
2898
+
2899
+ .mafs-movable-point-ring {
2900
+ fill: var(--movable-point-color);
2901
+ fill-opacity: 0.25;
2902
+ stroke: none;
2903
+ transition: r 0.2s ease;
2904
+ }
2905
+
2906
+ .mafs-movable-point-point {
2907
+ fill: var(--movable-point-color);
2908
+ transition: r 0.2s ease;
2909
+ }
2910
+
2911
+ /* Hover */
2912
+
2913
+ .mafs-movable-point:hover .mafs-movable-point-point,
2914
+ .mafs-movable-point:focus-visible .mafs-movable-point-point {
2915
+ r: calc(var(--movable-point-ring-size) - 2px);
2916
+ }
2917
+
2918
+ .mafs-movable-point:hover .mafs-movable-point-ring,
2919
+ .mafs-movable-point:focus-visible .mafs-movable-point-ring {
2920
+ r: calc(var(--movable-point-ring-size) + 3px);
2921
+ }
2922
+
2923
+ .mafs-movable-point.mafs-movable-point-dragging .mafs-movable-point-ring {
2924
+ r: var(--movable-point-ring-size);
2925
+ }
2926
+
2927
+ /* Focus */
2928
+
2929
+ .mafs-movable-point:focus-visible .mafs-movable-point-focus {
2930
+ stroke-opacity: 1;
2931
+ }
2932
+
2933
+ /**
2934
+ * Overrides of mafs theme-- we will want to move this into JS land
2935
+ * to take advantage of WB tokens
2936
+ */
2937
+ .MafsView {
2938
+ --mafs-bg: transparent;
2939
+ --mafs-fg: rgb(33, 36, 44); /* WB color.offBlack */
2940
+
2941
+ /* Grid lines */
2942
+ --mafs-line-color: rgba(33, 36, 44, 0.16); /* WB color.offBlack16*/
2943
+
2944
+ /* Axis lines */
2945
+ --mafs-axis-stroke-width: 2px;
2946
+
2947
+ --mafs-blue: #1865f2; /* WB color.blue */
2948
+ --mafs-red: #d92916; /* WB color.red */
2949
+ --mafs-green: #00a60e; /* WB color.green */
2950
+ --mafs-violet: #9059ff; /* WB color.purple */
2951
+ --mafs-yellow: #ffb100; /* WB color.gold */
2952
+ /* Note: offBlack50 is not the best for contrast. However, this color needs
2953
+ to be distinguishable from our regular interactive blue so it is clear that
2954
+ the element is not interactive, even though the visual elements (e.g.
2955
+ outlines, shadows) may indicate otherwise. When using a darker gray, it
2956
+ looks the same as our WB blue in grayscale. We had to make a call here, and
2957
+ we decided to make it lighter and more distinguishable even if it sacrifices
2958
+ color contrast. (Nisha 2025) */
2959
+ --static-gray: #909296 /* WB color.offBlack50 */;
2960
+
2961
+ /* overridden on a per-point basis */
2962
+ --movable-point-color: var(--mafs-blue);
2963
+ --movable-point-center-radius: 6px;
2964
+ --movable-point-ring-radius: calc(2px + var(--movable-point-center-radius));
2965
+ --movable-point-halo-radius: calc(3px + var(--movable-point-ring-radius));
2966
+ --movable-point-hover-expansion: 2px;
2967
+ --movable-point-focus-ring-offset: 2px;
2968
+
2969
+ --movable-line-stroke-weight: 2px;
2970
+ --movable-line-stroke-weight-active: 4px;
2971
+ overflow: visible !important;
2972
+ }
2973
+
2974
+ .MafsView > svg {
2975
+ /* Chrome/Safari bugfix for LEMS-1906 */
2976
+ display: block;
2977
+ overflow: visible; /* LEMS-2035: This ensures that Mafs doesn't clip the axis labels */
2978
+ }
2979
+
2980
+ .MafsView .movable-line:hover,
2981
+ .movable-dragging {
2982
+ --movable-line-stroke-weight: var(--movable-line-stroke-weight-active);
2983
+ }
2984
+
2985
+ .MafsView .movable-line:focus,
2986
+ .movable-polygon:focus {
2987
+ outline: none;
2988
+ }
2989
+
2990
+ .MafsView
2991
+ .movable-line
2992
+ :is(.movable-line-focus-outline, .movable-line-focus-outline-gap) {
2993
+ stroke: transparent;
2994
+ }
2995
+
2996
+ .MafsView .movable-line:focus-visible .movable-line-focus-outline {
2997
+ stroke: var(--mafs-blue);
2998
+ stroke-width: 10px;
2999
+ }
3000
+
3001
+ .MafsView .movable-line:focus-visible .movable-line-focus-outline-gap {
3002
+ stroke: white;
3003
+ stroke-width: 6px;
3004
+ }
3005
+
3006
+ .MafsView .movable-point {
3007
+ cursor: grab;
3008
+ touch-action: none;
3009
+ outline: none;
3010
+ }
3011
+
3012
+ .MafsView .movable-point.movable-point--dragging {
3013
+ cursor: grabbing;
3014
+ }
3015
+
3016
+ .MafsView .movable-point.movable-point--dragging .movable-point-halo {
3017
+ opacity: 0;
3018
+ }
3019
+
3020
+ .MafsView .movable-point-hitbox {
3021
+ fill: transparent;
3022
+ }
3023
+
3024
+ .MafsView
3025
+ :is(
3026
+ .movable-point-center,
3027
+ .movable-point-ring,
3028
+ .movable-point-halo,
3029
+ .movable-point-focus-outline
3030
+ ) {
3031
+ transition:
3032
+ r 0.15s ease-out,
3033
+ opacity 0.15s ease-out;
3034
+ }
3035
+
3036
+ .MafsView .movable-point-center {
3037
+ r: var(--movable-point-center-radius);
3038
+ }
3039
+
3040
+ .MafsView .movable-point-halo {
3041
+ r: var(--movable-point-halo-radius);
3042
+ fill: var(--movable-point-color);
3043
+ opacity: 0.25;
3044
+ filter: drop-shadow(0 5px 5px #0008);
3045
+ }
3046
+
3047
+ .MafsView .movable-point-ring {
3048
+ r: var(--movable-point-ring-radius);
3049
+ fill: #fff;
3050
+ }
3051
+
3052
+ .MafsView .movable-point:hover .movable-point-center {
3053
+ r: calc(
3054
+ var(--movable-point-hover-expansion) +
3055
+ var(--movable-point-center-radius)
3056
+ );
3057
+ }
3058
+
3059
+ .MafsView .movable-point:hover .movable-point-ring {
3060
+ r: calc(
3061
+ var(--movable-point-hover-expansion) + var(--movable-point-ring-radius)
3062
+ );
3063
+ }
3064
+
3065
+ .MafsView .movable-point:hover .movable-point-halo {
3066
+ r: calc(
3067
+ var(--movable-point-hover-expansion) + var(--movable-point-halo-radius)
3068
+ );
3069
+ }
3070
+
3071
+ .MafsView .movable-point .movable-point-focus-outline {
3072
+ visibility: hidden;
3073
+ r: calc(
3074
+ var(--movable-point-halo-radius) +
3075
+ var(--movable-point-focus-ring-offset)
3076
+ );
3077
+ stroke-width: 2px;
3078
+ fill: none;
3079
+ stroke: var(--mafs-blue);
3080
+ }
3081
+
3082
+ .MafsView .movable-point:hover .movable-point-focus-outline {
3083
+ r: calc(
3084
+ var(--movable-point-hover-expansion) + var(--movable-point-halo-radius) +
3085
+ var(--movable-point-focus-ring-offset)
3086
+ );
3087
+ }
3088
+
3089
+ /**
3090
+ * This is needed because empty elements with focus will still have the focus outline
3091
+ * when navigating via keyboard, causing weird blue dots to appear in Firefox.
3092
+ */
3093
+ .MafsView .movable-point__focusable-handle:focus-visible {
3094
+ outline: none;
3095
+ }
3096
+
3097
+ .MafsView
3098
+ .movable-point:is(:focus, .movable-point--focus)
3099
+ .movable-point-focus-outline {
3100
+ visibility: visible;
3101
+ }
3102
+
3103
+ .MafsView .movable-circle {
3104
+ cursor: grab;
3105
+ }
3106
+
3107
+ .MafsView .movable-circle .circle {
3108
+ stroke-width: 2px;
3109
+ fill: transparent;
3110
+ }
3111
+
3112
+ .MafsView .movable-circle:hover .circle {
3113
+ fill: var(--mafs-blue);
3114
+ fill-opacity: 0.16;
3115
+ }
3116
+
3117
+ .MafsView .movable-circle.movable-circle--dragging {
3118
+ cursor: grabbing;
3119
+ outline: none;
3120
+ }
3121
+
3122
+ .MafsView .movable-circle .focus-ring {
3123
+ visibility: hidden; /* overridden when the circle is focused */
3124
+ stroke: var(--mafs-blue);
3125
+ stroke-width: 2px;
3126
+ fill: transparent;
3127
+ }
3128
+
3129
+ .MafsView .movable-circle:focus {
3130
+ outline: none;
3131
+ }
3132
+
3133
+ .MafsView .movable-circle:focus-visible .focus-ring {
3134
+ visibility: visible;
3135
+ }
3136
+
3137
+ .MafsView .movable-circle .movable-circle-handle {
3138
+ stroke: #fff;
3139
+ stroke-width: 2px;
3140
+ }
3141
+
3142
+ .MafsView .movable-circle .movable-circle-handle-dot {
3143
+ fill: #fff;
3144
+ r: 1.25px;
3145
+ }
3146
+
3147
+ @font-face {
3148
+ font-family: Mafs-MJXTEX;
3149
+ src: url("https://cdn.kastatic.org/fonts/mathjax/MathJax_Main-Regular.woff")
3150
+ format("woff");
3151
+ }
3152
+
3153
+ .MafsView pattern g {
3154
+ stroke: rgba(33, 36, 44, 0.32);
3155
+ }
3156
+
3157
+ .MafsView .angle-arc-interactive {
3158
+ stroke: var(--mafs-blue);
3159
+ stroke-width: 0.1px;
3160
+ }
3161
+
3162
+ .MafsView .angle-arc-static {
3163
+ stroke: var(--static-gray);
3164
+ stroke-width: 0.1px;
3165
+ }
3166
+
3167
+ .MafsView .axis-tick-label {
3168
+ /* There is a bug in the MathJax font for Safari, so we use KaTeX */
3169
+ font-family: "KaTeX_Main", "Mafs-MJXTEX", sans-serif;
3170
+ stroke: #fff;
3171
+ stroke-width: 5px;
3172
+ paint-order: stroke fill;
3173
+ }
3174
+
3175
+ .MafsView .axis-tick {
3176
+ stroke: black;
3177
+ stroke-width: 1px;
3178
+ }
3179
+
3180
+ .mafs-sr-only {
3181
+ height: 0;
3182
+ width: 0;
3183
+ overflow: hidden;
3184
+ }