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