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