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