mozilla-central/browser/components/aboutwelcome/content/aboutwelcome.css (file symbol)

Source code

Revision control

Copy as Markdown

Other Tools

/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* stylelint-disable max-nesting-depth */
#feature-callout {
--fc-background: var(--fc-background-light, #FFF);
--fc-color: var(--fc-color-light, rgb(21, 20, 26));
--fc-border: var(--fc-border-light, #CFCFD8);
--fc-accent-color: var(--fc-accent-color-light, rgb(0, 97, 224));
--fc-button-background: var(--fc-button-background-light, #F0F0F4);
--fc-button-color: var(--fc-button-color-light, rgb(21, 20, 26));
--fc-button-border: var(--fc-button-border-light, transparent);
--fc-button-background-hover: var(--fc-button-background-hover-light, #E0E0E6);
--fc-button-color-hover: var(--fc-button-color-hover-light, rgb(21, 20, 26));
--fc-button-border-hover: var(--fc-button-border-hover-light, transparent);
--fc-button-background-active: var(--fc-button-background-active-light, #CFCFD8);
--fc-button-color-active: var(--fc-button-color-active-light, rgb(21, 20, 26));
--fc-button-border-active: var(--fc-button-border-active-light, transparent);
--fc-primary-button-background: var(--fc-primary-button-background-light, #0061E0);
--fc-primary-button-color: var(--fc-primary-button-color-light, rgb(251,251,254));
--fc-primary-button-border: var(--fc-primary-button-border-light, transparent);
--fc-primary-button-background-hover: var(--fc-primary-button-background-hover-light, #0250BB);
--fc-primary-button-color-hover: var(--fc-primary-button-color-hover-light, rgb(251,251,254));
--fc-primary-button-border-hover: var(--fc-primary-button-border-hover-light, transparent);
--fc-primary-button-background-active: var(--fc-primary-button-background-active-light, #053E94);
--fc-primary-button-color-active: var(--fc-primary-button-color-active-light, rgb(251,251,254));
--fc-primary-button-border-active: var(--fc-primary-button-border-active-light, transparent);
--fc-step-color: color-mix(in srgb, currentColor 50%, transparent);
--fc-link-color: var(--fc-link-color-light, #0061E0);
--fc-link-color-hover: var(--fc-link-color-hover-light, #0250BB);
--fc-link-color-active: var(--fc-link-color-active-light, #053E94);
--fc-icon-success-color: var(--fc-icon-success-color-light, #2AC3A2);
position: absolute;
z-index: 2147483647;
outline: none;
color: var(--fc-color);
accent-color: var(--fc-accent-color);
-moz-theme: non-native;
-moz-window-shadow: none;
--arrow-width: 33.9411px;
--arrow-square-size: calc(var(--arrow-width) / sqrt(2));
--extra-width-from-rotation: calc(var(--arrow-width) - var(--arrow-square-size));
--arrow-visible-height: calc(var(--arrow-width) / 2);
--arrow-visible-size: calc(var(--arrow-square-size) / 2);
--arrow-center-inset: calc(50% - var(--arrow-visible-size));
--arrow-offset: calc(1.5px - var(--arrow-visible-size));
--arrow-corner-distance: 12px;
--arrow-corner-inset: calc(var(--arrow-corner-distance) + (var(--extra-width-from-rotation) / 2));
--arrow-overlap-magnitude: 5px;
}
@media (prefers-color-scheme: dark) {
#feature-callout {
--fc-background: var(--fc-background-dark, rgb(43, 42, 51));
--fc-color: var(--fc-color-dark, rgb(251, 251, 254));
--fc-border: var(--fc-border-dark, #3A3944);
--fc-accent-color: var(--fc-accent-color-dark, rgb(0, 221, 255));
--fc-button-background: var(--fc-button-background-dark, #2B2A33);
--fc-button-color: var(--fc-button-color-dark, rgb(251, 251, 254));
--fc-button-border: var(--fc-button-border-dark, transparent);
--fc-button-background-hover: var(--fc-button-background-hover-dark, #52525E);
--fc-button-color-hover: var(--fc-button-color-hover-dark, rgb(251, 251, 254));
--fc-button-border-hover: var(--fc-button-border-hover-dark, transparent);
--fc-button-background-active: var(--fc-button-background-active-dark, #5B5B66);
--fc-button-color-active: var(--fc-button-color-active-dark, rgb(251, 251, 254));
--fc-button-border-active: var(--fc-button-border-active-dark, transparent);
--fc-primary-button-background: var(--fc-primary-button-background-dark, rgb(0,221,255));
--fc-primary-button-color: var(--fc-primary-button-color-dark, rgb(43,42,51));
--fc-primary-button-border: var(--fc-primary-button-border-dark, transparent);
--fc-primary-button-background-hover: var(--fc-primary-button-background-hover-dark, rgb(128,235,255));
--fc-primary-button-color-hover: var(--fc-primary-button-color-hover-dark, rgb(43,42,51));
--fc-primary-button-border-hover: var(--fc-primary-button-border-hover-dark, transparent);
--fc-primary-button-background-active: var(--fc-primary-button-background-active-dark, rgb(170,242,255));
--fc-primary-button-color-active: var(--fc-primary-button-color-active-dark, rgb(43,42,51));
--fc-primary-button-border-active: var(--fc-primary-button-border-active-dark, transparent);
--fc-link-color: var(--fc-link-color-dark, #00DDFF);
--fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF);
--fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF);
--fc-icon-success-color: var(--fc-icon-success-color-dark, #54FFBD);
}
}
@media (prefers-contrast) {
#feature-callout {
--fc-background: var(--fc-background-hcm, -moz-dialog);
--fc-color: var(--fc-color-hcm, -moz-dialogtext);
--fc-border: var(--fc-border-hcm, -moz-dialogtext);
--fc-accent-color: var(--fc-accent-color-hcm, LinkText);
--fc-button-background: var(--fc-button-background-hcm, ButtonFace);
--fc-button-color: var(--fc-button-color-hcm, ButtonText);
--fc-button-border: var(--fc-button-border-hcm, ButtonText);
--fc-button-background-hover: var(--fc-button-background-hover-hcm, ButtonText);
--fc-button-color-hover: var(--fc-button-color-hover-hcm, ButtonFace);
--fc-button-border-hover: var(--fc-button-border-hover-hcm, ButtonText);
--fc-button-background-active: var(--fc-button-background-active-hcm, ButtonText);
--fc-button-color-active: var(--fc-button-color-active-hcm, ButtonFace);
--fc-button-border-active: var(--fc-button-border-active-hcm, ButtonText);
--fc-primary-button-background: var(--fc-primary-button-background-hcm, ButtonText);
--fc-primary-button-color: var(--fc-primary-button-color-hcm, ButtonFace);
--fc-primary-button-border: var(--fc-primary-button-border-hcm, ButtonFace);
--fc-primary-button-background-hover: var(--fc-primary-button-background-hover-hcm, SelectedItem);
--fc-primary-button-color-hover: var(--fc-primary-button-color-hover-hcm, SelectedItemText);
--fc-primary-button-border-hover: var(--fc-primary-button-border-hover-hcm, SelectedItemText);
--fc-primary-button-background-active: var(--fc-primary-button-background-active-hcm, SelectedItemText);
--fc-primary-button-color-active: var(--fc-primary-button-color-active-hcm, SelectedItem);
--fc-primary-button-border-active: var(--fc-primary-button-border-active-hcm, SelectedItem);
--fc-step-color: var(--fc-accent-color-hcm, LinkText);
--fc-link-color: var(--fc-link-color-hcm, LinkText);
--fc-link-color-hover: var(--fc-link-color-hover-hcm, LinkText);
--fc-link-color-active: var(--fc-link-color-active-hcm, ActiveText);
--fc-icon-success-color: var(--fc-icon-success-color-hcm, LinkText);
}
}
#feature-callout.simulateContent {
color-scheme: env(-moz-content-preferred-color-scheme);
}
@media (-moz-content-prefers-color-scheme: light) {
#feature-callout.simulateContent {
--fc-background: var(--fc-background-light, #FFF);
--fc-color: var(--fc-color-light, rgb(21, 20, 26));
--fc-border: var(--fc-border-light, #CFCFD8);
--fc-accent-color: var(--fc-accent-color-light, rgb(0, 97, 224));
--fc-button-background: var(--fc-button-background-light, #F0F0F4);
--fc-button-color: var(--fc-button-color-light, rgb(21, 20, 26));
--fc-button-border: var(--fc-button-border-light, transparent);
--fc-button-background-hover: var(--fc-button-background-hover-light, #E0E0E6);
--fc-button-color-hover: var(--fc-button-color-hover-light, rgb(21, 20, 26));
--fc-button-border-hover: var(--fc-button-border-hover-light, transparent);
--fc-button-background-active: var(--fc-button-background-active-light, #CFCFD8);
--fc-button-color-active: var(--fc-button-color-active-light, rgb(21, 20, 26));
--fc-button-border-active: var(--fc-button-border-active-light, transparent);
--fc-primary-button-background: var(--fc-primary-button-background-light, #0061E0);
--fc-primary-button-color: var(--fc-primary-button-color-light, rgb(251,251,254));
--fc-primary-button-border: var(--fc-primary-button-border-light, transparent);
--fc-primary-button-background-hover: var(--fc-primary-button-background-hover-light, #0250BB);
--fc-primary-button-color-hover: var(--fc-primary-button-color-hover-light, rgb(251,251,254));
--fc-primary-button-border-hover: var(--fc-primary-button-border-hover-light, transparent);
--fc-primary-button-background-active: var(--fc-primary-button-background-active-light, #053E94);
--fc-primary-button-color-active: var(--fc-primary-button-color-active-light, rgb(251,251,254));
--fc-primary-button-border-active: var(--fc-primary-button-border-active-light, transparent);
--fc-step-color: color-mix(in srgb, currentColor 50%, transparent);
--fc-link-color: var(--fc-link-color-light, #0061E0);
--fc-link-color-hover: var(--fc-link-color-hover-light, #0250BB);
--fc-link-color-active: var(--fc-link-color-active-light, #053E94);
--fc-icon-success-color: var(--fc-icon-success-color-light, #2AC3A2);
}
}
@media (-moz-content-prefers-color-scheme: dark) {
#feature-callout.simulateContent {
--fc-background: var(--fc-background-dark, rgb(43, 42, 51));
--fc-color: var(--fc-color-dark, rgb(251, 251, 254));
--fc-border: var(--fc-border-dark, #3A3944);
--fc-accent-color: var(--fc-accent-color-dark, rgb(0, 221, 255));
--fc-button-background: var(--fc-button-background-dark, #2B2A33);
--fc-button-color: var(--fc-button-color-dark, rgb(251, 251, 254));
--fc-button-border: var(--fc-button-border-dark, transparent);
--fc-button-background-hover: var(--fc-button-background-hover-dark, #52525E);
--fc-button-color-hover: var(--fc-button-color-hover-dark, rgb(251, 251, 254));
--fc-button-border-hover: var(--fc-button-border-hover-dark, transparent);
--fc-button-background-active: var(--fc-button-background-active-dark, #5B5B66);
--fc-button-color-active: var(--fc-button-color-active-dark, rgb(251, 251, 254));
--fc-button-border-active: var(--fc-button-border-active-dark, transparent);
--fc-primary-button-background: var(--fc-primary-button-background-dark, rgb(0,221,255));
--fc-primary-button-color: var(--fc-primary-button-color-dark, rgb(43,42,51));
--fc-primary-button-border: var(--fc-primary-button-border-dark, transparent);
--fc-primary-button-background-hover: var(--fc-primary-button-background-hover-dark, rgb(128,235,255));
--fc-primary-button-color-hover: var(--fc-primary-button-color-hover-dark, rgb(43,42,51));
--fc-primary-button-border-hover: var(--fc-primary-button-border-hover-dark, transparent);
--fc-primary-button-background-active: var(--fc-primary-button-background-active-dark, rgb(170,242,255));
--fc-primary-button-color-active: var(--fc-primary-button-color-active-dark, rgb(43,42,51));
--fc-primary-button-border-active: var(--fc-primary-button-border-active-dark, transparent);
--fc-link-color: var(--fc-link-color-dark, #00DDFF);
--fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF);
--fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF);
--fc-icon-success-color: var(--fc-icon-success-color-dark, #54FFBD);
}
}
:root[lwt-newtab-brighttext] #feature-callout.simulateContent.lwtNewtab {
color-scheme: dark;
--fc-background: var(--fc-background-dark, rgb(43, 42, 51));
--fc-color: var(--fc-color-dark, rgb(251, 251, 254));
--fc-border: var(--fc-border-dark, #3A3944);
--fc-accent-color: var(--fc-accent-color-dark, rgb(0, 221, 255));
--fc-button-background: var(--fc-button-background-dark, #2B2A33);
--fc-button-color: var(--fc-button-color-dark, rgb(251, 251, 254));
--fc-button-border: var(--fc-button-border-dark, transparent);
--fc-button-background-hover: var(--fc-button-background-hover-dark, #52525E);
--fc-button-color-hover: var(--fc-button-color-hover-dark, rgb(251, 251, 254));
--fc-button-border-hover: var(--fc-button-border-hover-dark, transparent);
--fc-button-background-active: var(--fc-button-background-active-dark, #5B5B66);
--fc-button-color-active: var(--fc-button-color-active-dark, rgb(251, 251, 254));
--fc-button-border-active: var(--fc-button-border-active-dark, transparent);
--fc-primary-button-background: var(--fc-primary-button-background-dark, rgb(0,221,255));
--fc-primary-button-color: var(--fc-primary-button-color-dark, rgb(43,42,51));
--fc-primary-button-border: var(--fc-primary-button-border-dark, transparent);
--fc-primary-button-background-hover: var(--fc-primary-button-background-hover-dark, rgb(128,235,255));
--fc-primary-button-color-hover: var(--fc-primary-button-color-hover-dark, rgb(43,42,51));
--fc-primary-button-border-hover: var(--fc-primary-button-border-hover-dark, transparent);
--fc-primary-button-background-active: var(--fc-primary-button-background-active-dark, rgb(170,242,255));
--fc-primary-button-color-active: var(--fc-primary-button-color-active-dark, rgb(43,42,51));
--fc-primary-button-border-active: var(--fc-primary-button-border-active-dark, transparent);
--fc-link-color: var(--fc-link-color-dark, #00DDFF);
--fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF);
--fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF);
--fc-icon-success-color: var(--fc-icon-success-color-dark, #54FFBD);
}
@media (prefers-contrast) {
#feature-callout.simulateContent {
--fc-background: var(--fc-background-hcm, -moz-dialog);
--fc-color: var(--fc-color-hcm, -moz-dialogtext);
--fc-border: var(--fc-border-hcm, -moz-dialogtext);
--fc-accent-color: var(--fc-accent-color-hcm, LinkText);
--fc-button-background: var(--fc-button-background-hcm, ButtonFace);
--fc-button-color: var(--fc-button-color-hcm, ButtonText);
--fc-button-border: var(--fc-button-border-hcm, ButtonText);
--fc-button-background-hover: var(--fc-button-background-hover-hcm, ButtonText);
--fc-button-color-hover: var(--fc-button-color-hover-hcm, ButtonFace);
--fc-button-border-hover: var(--fc-button-border-hover-hcm, ButtonText);
--fc-button-background-active: var(--fc-button-background-active-hcm, ButtonText);
--fc-button-color-active: var(--fc-button-color-active-hcm, ButtonFace);
--fc-button-border-active: var(--fc-button-border-active-hcm, ButtonText);
--fc-primary-button-background: var(--fc-primary-button-background-hcm, ButtonText);
--fc-primary-button-color: var(--fc-primary-button-color-hcm, ButtonFace);
--fc-primary-button-border: var(--fc-primary-button-border-hcm, ButtonFace);
--fc-primary-button-background-hover: var(--fc-primary-button-background-hover-hcm, SelectedItem);
--fc-primary-button-color-hover: var(--fc-primary-button-color-hover-hcm, SelectedItemText);
--fc-primary-button-border-hover: var(--fc-primary-button-border-hover-hcm, SelectedItemText);
--fc-primary-button-background-active: var(--fc-primary-button-background-active-hcm, SelectedItemText);
--fc-primary-button-color-active: var(--fc-primary-button-color-active-hcm, SelectedItem);
--fc-primary-button-border-active: var(--fc-primary-button-border-active-hcm, SelectedItem);
--fc-step-color: var(--fc-accent-color-hcm, LinkText);
--fc-link-color: var(--fc-link-color-hcm, LinkText);
--fc-link-color-hover: var(--fc-link-color-hover-hcm, LinkText);
--fc-link-color-active: var(--fc-link-color-active-hcm, ActiveText);
--fc-icon-success-color: var(--fc-icon-success-color-hcm, LinkText);
}
}
panel#feature-callout {
--panel-color: var(--fc-color);
--panel-shadow: none;
--panel-shadow-margin: 6px;
--panel-arrow-space: calc(var(--panel-shadow-margin) + var(--arrow-visible-height) - 1.5px);
--panel-margin-offset: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-corner-distance) + (var(--arrow-width) / 2)));
}
panel#feature-callout::part(content) {
width: initial;
border: 0;
border-radius: 0;
padding: 0;
margin: var(--panel-shadow-margin);
background: none;
color: inherit;
overflow: visible !important;
}
div#feature-callout {
transition: opacity 0.5s ease;
}
div#feature-callout.hidden {
opacity: 0;
pointer-events: none;
}
#feature-callout .onboardingContainer,
#feature-callout .onboardingContainer .outer-wrapper {
--transition: none;
height: auto;
transform: none;
}
#feature-callout .screen:dir(rtl) {
transform: none;
}
#feature-callout .screen[pos=callout] {
height: fit-content;
min-height: unset;
overflow: visible;
}
#feature-callout .screen[pos=callout][layout=inline] .section-main .main-content,
#feature-callout .screen[pos=callout][layout=inline] .section-main .main-content.no-steps {
width: 18em;
padding-inline: 16px;
padding-block: 0;
}
#feature-callout .screen[pos=callout][layout=inline] .section-main .main-content .welcome-text,
#feature-callout .screen[pos=callout][layout=inline] .section-main .main-content.no-steps .welcome-text {
height: 24px;
margin-block: 12px;
margin-inline: 0;
padding: 0;
white-space: nowrap;
}
#feature-callout .screen[pos=callout][layout=inline] .section-main .dismiss-button {
height: 24px;
width: 24px;
min-height: 24px;
min-width: 24px;
margin: 0;
top: calc(50% - 12px);
inset-inline-end: 12px;
}
#feature-callout .screen[pos=callout] .logo-container {
display: flex;
justify-content: center;
}
#feature-callout .screen[pos=callout] .logo-container .brand-logo {
margin: 0;
}
#feature-callout .screen[pos=callout] .logo-container .brand-logo:dir(rtl) {
transform: rotateY(180deg);
}
#feature-callout .screen[pos=callout] .welcome-text {
align-items: start;
text-align: start;
margin: 0;
padding: 0;
gap: 8px;
}
#feature-callout .screen[pos=callout] .welcome-text h1,
#feature-callout .screen[pos=callout] .welcome-text h2 {
font-size: 0.813em;
margin: 0;
color: inherit;
}
#feature-callout .screen[pos=callout] .welcome-text h1 {
font-weight: 600;
}
#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container {
display: flex;
flex-flow: row wrap;
align-items: center;
}
#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container .logo-container {
height: 16px;
width: 16px;
margin-inline-end: 6px;
box-sizing: border-box;
-moz-context-properties: fill;
fill: currentColor;
}
#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container .logo-container img {
height: 16px;
width: 16px;
margin: 0;
}
#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=top], #feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=bottom] {
flex-wrap: nowrap;
}
#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=top] .logo-container, #feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=bottom] .logo-container {
height: 1.5em;
align-items: center;
padding-bottom: 0.15em;
box-sizing: border-box;
}
#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=top] {
align-items: start;
}
#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=bottom] {
align-items: end;
}
#feature-callout .screen[pos=callout] .multi-select-container {
margin: 0;
font-size: 0.813em;
row-gap: 12px;
color: inherit;
overflow: visible;
}
#feature-callout .screen[pos=callout] .multi-select-container #multi-stage-multi-select-label {
font-size: inherit;
margin: -4px 0 0;
color: inherit;
}
#feature-callout .screen[pos=callout] .cta-link {
background: none;
text-decoration: underline;
cursor: pointer;
border: none;
padding: 0;
color: var(--fc-link-color);
order: -1;
margin-inline-end: auto;
margin-block: 8px;
}
#feature-callout .screen[pos=callout] .cta-link:hover {
color: var(--fc-link-color-hover);
}
#feature-callout .screen[pos=callout] .cta-link:active {
color: var(--fc-link-color-active);
}
#feature-callout .screen[pos=callout] .section-secondary {
display: none;
}
#feature-callout .screen[pos=callout] .section-main {
height: fit-content;
width: fit-content;
}
#feature-callout .screen[pos=callout] .section-main .main-content {
position: relative;
overflow: hidden;
border: 1px solid var(--fc-border);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
border-radius: 4px;
padding: var(--callout-padding, 24px);
width: 25em;
gap: 16px;
background: var(--fc-background);
}
#feature-callout .screen[pos=callout] .section-main .main-content .main-content-inner {
gap: 12px;
}
#feature-callout .screen[pos=callout] .section-main .main-content .steps {
height: auto;
position: absolute;
bottom: calc(var(--callout-padding, 24px) + 12px);
padding-block: 0;
}
#feature-callout .screen[pos=callout] .section-main .main-content .steps .indicator {
border: 4px solid var(--fc-step-color);
}
#feature-callout .screen[pos=callout] .section-main .main-content .steps .indicator.current {
border-color: var(--fc-accent-color);
}
#feature-callout .screen[pos=callout] .section-main .main-content .steps:not(.progress-bar) {
flex-flow: row nowrap;
gap: 8px;
}
#feature-callout .screen[pos=callout] .section-main .main-content .steps:not(.progress-bar) .indicator {
margin: 0;
}
#feature-callout .screen[pos=callout] .section-main .main-content .steps .indicator.current, #feature-callout .screen[pos=callout] .section-main .main-content .steps.progress-bar .indicator.complete {
border-color: var(--fc-accent-color);
}
#feature-callout .screen[pos=callout] .section-main .dismiss-button {
font-size: 1em;
inset-block: 0 auto;
inset-inline: auto 0;
margin-block: 16px 0;
margin-inline: 0 16px;
background-color: transparent;
}
#feature-callout .screen[pos=callout] .section-main .dismiss-button[button-size=small] {
height: 24px;
width: 24px;
min-height: 24px;
min-width: 24px;
}
#feature-callout .screen[pos=callout] .action-buttons {
display: flex;
flex-flow: row nowrap;
align-items: stretch;
justify-content: end;
gap: 10px;
margin-top: 4px;
}
#feature-callout .screen[pos=callout] .action-buttons[alignment=start] {
justify-content: start;
}
#feature-callout .screen[pos=callout] .action-buttons[alignment=space-between] {
justify-content: space-between;
}
#feature-callout .screen[pos=callout] .action-buttons .secondary-cta {
font-size: inherit;
}
#feature-callout .screen[pos=callout] .action-buttons .primary,
#feature-callout .screen[pos=callout] .action-buttons .secondary {
padding: 4px 16px;
margin: 0;
font-size: 0.813em;
font-weight: 600;
line-height: 16px;
min-height: 32px;
text-decoration: none;
cursor: default;
}
#feature-callout .screen[pos=callout] .action-buttons .secondary {
background-color: var(--fc-button-background);
}
#feature-callout .screen[pos=callout] .action-buttons .primary {
background-color: var(--fc-primary-button-background);
}
#feature-callout .screen[pos=callout] .action-buttons .split-button-container {
align-items: stretch;
}
#feature-callout .screen[pos=callout] .action-buttons .split-button-container:not([hidden]) {
display: flex;
}
#feature-callout .screen[pos=callout] .action-buttons .split-button-container .primary:not(.submenu-button),
#feature-callout .screen[pos=callout] .action-buttons .split-button-container .secondary:not(.submenu-button),
#feature-callout .screen[pos=callout] .action-buttons .split-button-container .additional-cta:not(.submenu-button) {
border-start-end-radius: 0;
border-end-end-radius: 0;
margin-inline-end: 0;
}
#feature-callout .screen[pos=callout] .action-buttons .split-button-container .primary:focus-visible,
#feature-callout .screen[pos=callout] .action-buttons .split-button-container .secondary:focus-visible,
#feature-callout .screen[pos=callout] .action-buttons .split-button-container .additional-cta:focus-visible {
z-index: 2;
}
#feature-callout .screen[pos=callout] .action-buttons .split-button-container .submenu-button {
border-start-start-radius: 0;
border-end-start-radius: 0;
margin-inline-start: 1px;
padding: 8px;
min-width: 30px;
box-sizing: border-box;
background-image: url("chrome://global/skin/icons/arrow-down.svg");
background-repeat: no-repeat;
background-size: 16px;
background-position: center;
-moz-context-properties: fill;
fill: currentColor;
}
#feature-callout .screen[pos=callout] .action-buttons .primary,
#feature-callout .screen[pos=callout] .action-buttons .secondary,
#feature-callout .screen[pos=callout] .dismiss-button {
border-radius: 4px;
}
#feature-callout .screen[pos=callout] .action-buttons .primary:focus-visible,
#feature-callout .screen[pos=callout] .action-buttons .secondary:focus-visible,
#feature-callout .screen[pos=callout] .dismiss-button:focus-visible {
box-shadow: none;
outline: 2px solid var(--fc-accent-color);
outline-offset: 2px;
}
#feature-callout .screen[pos=callout] .action-buttons .primary:disabled,
#feature-callout .screen[pos=callout] .action-buttons .secondary:disabled,
#feature-callout .screen[pos=callout] .dismiss-button:disabled {
opacity: 0.4;
cursor: auto;
}
#feature-callout .screen[pos=callout] .action-buttons .secondary,
#feature-callout .screen[pos=callout] .dismiss-button {
border: 1px solid var(--fc-button-border);
color: var(--fc-button-color);
}
#feature-callout .screen[pos=callout] .action-buttons .secondary:hover:not(:disabled), #feature-callout .screen[pos=callout] .action-buttons .secondary[open],
#feature-callout .screen[pos=callout] .dismiss-button:hover:not(:disabled),
#feature-callout .screen[pos=callout] .dismiss-button[open] {
background-color: var(--fc-button-background-hover);
color: var(--fc-button-color-hover);
border: 1px solid var(--fc-button-border-hover);
}
#feature-callout .screen[pos=callout] .action-buttons .secondary:hover:not(:disabled):active, #feature-callout .screen[pos=callout] .action-buttons .secondary[open]:active,
#feature-callout .screen[pos=callout] .dismiss-button:hover:not(:disabled):active,
#feature-callout .screen[pos=callout] .dismiss-button[open]:active {
background-color: var(--fc-button-background-active);
color: var(--fc-button-color-active);
border: 1px solid var(--fc-button-border-active);
}
#feature-callout .screen[pos=callout] .action-buttons .primary {
border: 1px solid var(--fc-primary-button-border);
color: var(--fc-primary-button-color);
}
#feature-callout .screen[pos=callout] .action-buttons .primary:hover:not(:disabled), #feature-callout .screen[pos=callout] .action-buttons .primary[open] {
background-color: var(--fc-primary-button-background-hover);
color: var(--fc-primary-button-color-hover);
border: 1px solid var(--fc-primary-button-border-hover);
}
#feature-callout .screen[pos=callout] .action-buttons .primary:hover:not(:disabled):active, #feature-callout .screen[pos=callout] .action-buttons .primary[open]:active {
background-color: var(--fc-primary-button-background-active);
color: var(--fc-primary-button-color-active);
border: 1px solid var(--fc-primary-button-border-active);
}
#feature-callout .screen[pos=callout] .action-checklist {
display: flex;
flex-direction: column;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-subtitle {
text-align: start;
margin-block-end: 8px;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-divider {
margin-block: 0;
width: 100%;
color: var(--fc-button-background);
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-progress-bar {
width: 100%;
height: 6px;
padding-block: 0;
background-color: color-mix(in srgb, var(--fc-color) 25%, transparent);
opacity: 1;
transition: none;
border-radius: 8px;
display: flex;
justify-content: flex-start;
margin-block-end: 16px;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-progress-bar:dir(rtl) {
justify-content: flex-end;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-progress-bar .indicator {
width: var(--action-checklist-progress-bar-progress);
height: 100%;
background-color: var(--fc-accent-color);
border: 0;
border-radius: 8px;
opacity: 1;
transition: var(--progress-bar-transition);
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items {
display: flex;
flex-direction: column;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button {
background: none;
display: flex;
justify-content: space-between;
align-items: center;
margin-inline: 0;
margin-block: 4px;
border: none;
border-radius: 4px;
padding-block: 8px;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button:first-child {
margin-block-start: 0;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button:last-child {
margin-block-end: 0;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button:not(:disabled):hover {
background-color: var(--fc-button-background-hover);
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button:disabled {
color: var(--fc-color);
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container {
display: flex;
align-items: center;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container span {
text-align: start;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container .check-icon-container {
margin-block-start: 2px;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container .check-empty, #feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container .check-filled {
margin-inline-end: 8px;
flex-shrink: 0;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container .check-empty {
border-radius: 50%;
width: 0.75em;
height: 0.75em;
border: 2px solid color-mix(in srgb, var(--fc-color) 25%, transparent);
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container .check-filled {
background-image: url("chrome://global/skin/icons/check-filled.svg");
fill: var(--fc-icon-success-color);
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .external-link-icon, #feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .check-filled {
border: none;
width: 1em;
height: 1em;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
-moz-context-properties: fill;
}
#feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .external-link-icon-container .external-link-icon {
background-image: url("chrome://global/skin/icons/open-in-new.svg");
fill: var(--fc-color);
}
panel#feature-callout:is([side=top], [side=bottom]):not([hide-arrow=permanent]) {
margin-inline: var(--panel-margin-offset);
}
panel#feature-callout:is([side=left], [side=right]):not([hide-arrow=permanent]) {
margin-block: var(--panel-margin-offset);
}
panel#feature-callout::part(content) {
position: relative;
}
#feature-callout .arrow-box {
position: absolute;
overflow: visible;
transform: rotate(45deg);
transform-style: preserve-3d;
}
#feature-callout:not([arrow-position]) .arrow-box, #feature-callout[hide-arrow] .arrow-box {
display: none;
}
#feature-callout .arrow {
width: var(--arrow-square-size);
height: var(--arrow-square-size);
}
#feature-callout .shadow-arrow-box {
z-index: -1;
}
#feature-callout .shadow-arrow {
background: transparent;
outline: 1px solid var(--fc-border);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
#feature-callout .background-arrow-box {
z-index: 1;
pointer-events: none;
}
#feature-callout .background-arrow {
background: var(--fc-background);
clip-path: var(--fc-arrow-clip-path);
}
#feature-callout[arrow-position=top] .arrow-box {
top: var(--arrow-offset);
inset-inline-start: var(--arrow-center-inset);
--fc-arrow-clip-path: polygon(100% 0, 100% 2%, 2% 100%, 0 100%, 0 0);
}
panel#feature-callout[arrow-position=top]::part(content) {
margin-top: var(--panel-arrow-space);
}
panel#feature-callout[arrow-position=top] {
margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
}
#feature-callout[arrow-position=bottom] .arrow-box {
bottom: var(--arrow-offset);
inset-inline-start: var(--arrow-center-inset);
--fc-arrow-clip-path: polygon(100% 0, 98% 0, 0 98%, 0 100%, 100% 100%);
}
panel#feature-callout[arrow-position=bottom]::part(content) {
margin-bottom: var(--panel-arrow-space);
}
panel#feature-callout[arrow-position=bottom] {
margin-bottom: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
}
#feature-callout[arrow-position=inline-end] .arrow-box {
top: var(--arrow-center-inset);
inset-inline-end: var(--arrow-offset);
--fc-arrow-clip-path: polygon(100% 0, 100% 100%, 98% 100%, 0 2%, 0 0);
}
panel#feature-callout[arrow-position=inline-end]::part(content) {
margin-inline-end: var(--panel-arrow-space);
}
panel#feature-callout[arrow-position=inline-end] {
margin-inline-end: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
}
#feature-callout[arrow-position=inline-start] .arrow-box {
top: var(--arrow-center-inset);
inset-inline-start: var(--arrow-offset);
--fc-arrow-clip-path: polygon(0 100%, 100% 100%, 100% 98%, 2% 0, 0 0);
}
panel#feature-callout[arrow-position=inline-start]::part(content) {
margin-inline-start: var(--panel-arrow-space);
}
panel#feature-callout[arrow-position=inline-start] {
margin-inline-start: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
}
#feature-callout[arrow-position=top-end] .arrow-box {
top: var(--arrow-offset);
inset-inline-end: var(--arrow-corner-inset);
--fc-arrow-clip-path: polygon(100% 0, 100% 2%, 2% 100%, 0 100%, 0 0);
}
panel#feature-callout[arrow-position=top-end]::part(content) {
margin-top: var(--panel-arrow-space);
}
panel#feature-callout[arrow-position=top-end] {
margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
}
#feature-callout[arrow-position=top-start] .arrow-box {
top: var(--arrow-offset);
inset-inline-start: var(--arrow-corner-inset);
--fc-arrow-clip-path: polygon(100% 0, 100% 2%, 2% 100%, 0 100%, 0 0);
}
panel#feature-callout[arrow-position=top-start]::part(content) {
margin-top: var(--panel-arrow-space);
}
panel#feature-callout[arrow-position=top-start] {
margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
}
#feature-callout[arrow-position=bottom-end] .arrow-box {
bottom: var(--arrow-offset);
inset-inline-end: var(--arrow-corner-inset);
--fc-arrow-clip-path: polygon(100% 0, 98% 0, 0 98%, 0 100%, 100% 100%);
}
panel#feature-callout[arrow-position=bottom-end]::part(content) {
margin-bottom: var(--panel-arrow-space);
}
panel#feature-callout[arrow-position=bottom-end] {
margin-bottom: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
}
#feature-callout[arrow-position=bottom-start] .arrow-box {
bottom: var(--arrow-offset);
inset-inline-start: var(--arrow-corner-inset);
--fc-arrow-clip-path: polygon(100% 0, 98% 0, 0 98%, 0 100%, 100% 100%);
}
panel#feature-callout[arrow-position=bottom-start]::part(content) {
margin-bottom: var(--panel-arrow-space);
}
panel#feature-callout[arrow-position=bottom-start] {
margin-bottom: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
}
#feature-callout[arrow-position=inline-end-top] .arrow-box {
top: var(--arrow-corner-inset);
inset-inline-end: var(--arrow-offset);
--fc-arrow-clip-path: polygon(100% 0, 100% 100%, 98% 100%, 0 2%, 0 0);
}
panel#feature-callout[arrow-position=inline-end-top]::part(content) {
margin-inline-end: var(--panel-arrow-space);
}
panel#feature-callout[arrow-position=inline-end-top] {
margin-inline-end: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
}
#feature-callout[arrow-position=inline-end-bottom] .arrow-box {
bottom: var(--arrow-corner-inset);
inset-inline-end: var(--arrow-offset);
--fc-arrow-clip-path: polygon(100% 0, 100% 100%, 98% 100%, 0 2%, 0 0);
}
panel#feature-callout[arrow-position=inline-end-bottom]::part(content) {
margin-inline-end: var(--panel-arrow-space);
}
panel#feature-callout[arrow-position=inline-end-bottom] {
margin-inline-end: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
}
#feature-callout[arrow-position=inline-start-top] .arrow-box {
top: var(--arrow-corner-inset);
inset-inline-start: var(--arrow-offset);
--fc-arrow-clip-path: polygon(0 100%, 100% 100%, 100% 98%, 2% 0, 0 0);
}
panel#feature-callout[arrow-position=inline-start-top]::part(content) {
margin-inline-start: var(--panel-arrow-space);
}
panel#feature-callout[arrow-position=inline-start-top] {
margin-inline-start: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
}
#feature-callout[arrow-position=inline-start-bottom] .arrow-box {
bottom: var(--arrow-corner-inset);
inset-inline-start: var(--arrow-offset);
--fc-arrow-clip-path: polygon(0 100%, 100% 100%, 100% 98%, 2% 0, 0 0);
}
panel#feature-callout[arrow-position=inline-start-bottom]::part(content) {
margin-inline-start: var(--panel-arrow-space);
}
panel#feature-callout[arrow-position=inline-start-bottom] {
margin-inline-start: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
}
/* stylelint-disable max-nesting-depth */
.onboardingContainer.shopping {
height: auto;
}
.onboardingContainer.shopping .outer-wrapper {
height: auto;
}
.onboardingContainer.shopping .screen[pos=split] {
height: auto;
margin: 0 auto;
min-height: fit-content;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(58, 57, 68, 0.2);
overflow-x: auto;
}
@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
.onboardingContainer.shopping .screen[pos=split] {
box-shadow: 0 2px 6px rgb(21, 20, 26);
}
}
.onboardingContainer.shopping .screen[pos=split]::before {
display: none;
}
.onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT {
box-shadow: none;
}
.onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT .section-main .main-content {
background-color: transparent;
}
.onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT .section-main .main-content.no-steps {
padding: 0;
}
.onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT .section-main .main-content .main-content-inner {
justify-content: unset;
}
.onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT .section-main .main-content .welcome-text {
padding-inline: 16px;
margin-block: 20px 8px;
text-align: center;
}
.onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT .section-main .main-content .welcome-text h1 {
font-weight: var(--font-weight-bold);
}
.onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT .section-main .main-content .link-paragraph {
padding-inline: 16px;
margin-block: 0 20px;
text-align: center;
}
.onboardingContainer.shopping .screen[pos=split].FS_OPT_IN_SIDEBAR_VARIANT .section-main .main-content .legal-paragraph {
padding-inline: 16px;
margin-block: 0 40px;
color: var(--text-color-deemphasized);
text-align: center;
}
.onboardingContainer.shopping .screen[pos=split] .section-main {
width: auto;
height: auto;
margin: 0 auto;
}
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content {
border-radius: 4px;
color: inherit;
font: menu;
}
@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content {
background-color: #42414D;
}
}
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content.no-steps {
padding: 16px 0 36px;
}
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .welcome-text {
text-align: start;
margin-block: 10px 12px;
}
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .welcome-text h1 {
width: auto;
font-weight: 400;
line-height: 1.5;
font-size: 1.7em;
}
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .welcome-text h2 {
color: inherit;
font-size: 1em;
}
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .action-buttons .primary,
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .action-buttons .secondary {
min-width: auto;
}
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .action-buttons .primary {
font-weight: 400;
padding: 4px 16px;
}
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .action-buttons.additional-cta-container {
align-items: center;
}
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .legal-paragraph {
font-size: 0.85em;
line-height: 1.5;
margin-block: 0 20px;
padding-inline: 30px;
text-align: start;
color: inherit;
}
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .legal-paragraph a {
text-decoration: underline;
}
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .brand-logo {
width: 100%;
max-width: 294px;
max-height: 290px;
height: auto;
}
.onboardingContainer.shopping .screen[pos=split] .section-main .dismiss-button {
top: 0;
margin: 14px 10px;
}
.onboardingContainer.shopping .screen[pos=split] .section-secondary {
display: none;
}
.onboardingContainer.shopping .screen[pos=split] .info-text, .onboardingContainer.shopping .screen[pos=split] .link-paragraph {
font-size: 1em;
margin: 10px auto;
line-height: 1.5;
}
.onboardingContainer.shopping .screen[pos=split] .link-paragraph {
margin-block: 0 10px;
padding-inline: 30px;
text-align: start;
}
.onboardingContainer.shopping .screen[pos=split] .link-paragraph a {
text-decoration: underline;
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
.onboardingContainer.shopping .screen[pos=split][layout=survey] {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content {
padding: 12px;
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner {
min-height: auto;
align-items: initial;
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text {
align-items: initial;
padding: 0;
margin-top: 0;
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text h1,
.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text h2 {
line-height: 20px;
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text h1 {
font-size: 1em;
font-weight: 590;
margin: 0;
margin-inline-end: 28px;
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text h2 {
color: inherit;
margin-block: 10px 0;
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .action-buttons .cta-link {
padding: 4px;
margin-block: -4px;
outline-offset: 0;
min-height: revert;
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .multi-select-container {
color: inherit;
padding: 0;
margin-block: 0 24px;
align-items: center;
overflow: visible;
font-size: 1em;
gap: 12px;
width: 100%;
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .multi-select-container #multi-stage-multi-select-label {
color: inherit;
line-height: 20px;
margin-block: -2px 0;
font-size: 1em;
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .multi-select-container .multi-select-item input {
margin-block: 0;
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .steps {
height: auto;
margin-bottom: 12px;
}
.onboardingContainer.shopping .screen[pos=split][layout=survey] .dismiss-button {
width: 24px;
height: 24px;
min-width: 24px;
min-height: 24px;
margin: 10px;
}
.onboardingContainer.shopping shopping-message-bar {
font: menu;
}
/* stylelint-disable max-nesting-depth */
html {
height: 100%;
}
.dummy {
background: var(--mr-welcome-background-color) var(--mr-welcome-background-gradient) var(--mr-secondary-position) var(--mr-screen-background-color);
}
:root[dialogroot] {
background-color: transparent;
}
:root[dialogroot] body {
padding: 0;
}
:root[dialogroot] .onboardingContainer {
height: 100%;
background-color: transparent;
}
:root[dialogroot] .onboardingContainer:dir(rtl) {
transform: unset;
}
:root[dialogroot] .onboardingContainer .logo-container {
pointer-events: none;
}
:root[dialogroot] .onboardingContainer .screen:dir(rtl) {
transform: unset;
}
.welcome-container .onboardingContainer {
min-height: 610px;
min-width: fit-content;
}
.onboardingContainer {
--grey-subtitle-1: #696977;
--mr-welcome-background-color: #F8F6F4;
--mr-screen-heading-color: var(--in-content-text-color);
--mr-welcome-background-gradient: linear-gradient(0deg, rgba(144, 89, 255, 20%) 0%, rgba(2, 144, 238, 20%) 100%);
--mr-screen-background-color: #F8F6F4;
--single-select-border-color: #8F8F9D;
--single-select-hover-color: #DEDEDF;
font-family: system-ui;
font-size: 16px;
position: relative;
text-align: center;
height: 100vh;
--transition: 0.6s opacity, 0.6s scale, 0.6s rotate, 0.6s translate;
}
@media (prefers-color-scheme: dark) {
.onboardingContainer {
--grey-subtitle-1: #FFF;
--mr-welcome-background-color: #333336;
--mr-welcome-background-gradient: linear-gradient(0deg, rgba(144, 89, 255, 30%) 0%, rgba(2, 144, 238, 30%) 100%);
--mr-screen-background-color: #62697A;
--single-select-hover-color: #52525E;
}
}
@media (prefers-contrast) {
.onboardingContainer {
--mr-screen-background-color: buttontext;
--mr-screen-heading-color: buttonface;
background-color: var(--in-content-page-background);
}
}
@media (prefers-reduced-motion: no-preference) {
.onboardingContainer {
--translate: 30px;
--rotate: 20deg;
--scale: 0.4;
--progress-bar-transition: 0.6s translate;
}
.onboardingContainer:dir(rtl) {
--scale: -0.4 0.4;
}
}
@media (prefers-reduced-motion: reduce) {
.onboardingContainer {
--translate: 0;
--rotate: 0deg;
--scale: 1;
--progress-bar-transition: none;
}
.onboardingContainer:dir(rtl) {
--scale: -1 1;
}
}
.onboardingContainer:dir(rtl) {
transform: rotateY(180deg);
}
.onboardingContainer .section-main {
display: flex;
flex-direction: column;
justify-content: center;
width: 504px;
flex-shrink: 0;
}
.onboardingContainer .section-main:not(.embedded-migration) {
position: relative;
}
.onboardingContainer .main-content {
background-color: var(--in-content-page-background);
border-radius: 20px;
box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
height: 100%;
padding: 0;
transition: var(--transition);
z-index: 1;
box-sizing: border-box;
}
.onboardingContainer .main-content.no-steps {
padding-bottom: 48px;
}
.onboardingContainer .main-content .main-content-inner {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-around;
}
.onboardingContainer .main-content .no-steps .main-content {
padding-bottom: 48px;
}
.onboardingContainer .main-content .no-steps .steps {
display: none;
}
.onboardingContainer .screen {
display: flex;
position: relative;
flex-flow: row nowrap;
height: 100%;
min-height: 500px;
overflow: hidden;
}
.onboardingContainer .screen.light-text {
--in-content-page-color: rgb(251, 251, 254);
--in-content-primary-button-text-color: rgb(43, 42, 51);
--in-content-primary-button-text-color-hover: rgb(43, 42, 51);
--in-content-primary-button-background: rgb(0, 221, 255);
--in-content-primary-button-background-hover: rgb(128, 235, 255);
--in-content-primary-button-background-active: rgb(170, 242, 255);
--in-content-button-text-color: var(--in-content-page-color);
}
.onboardingContainer .screen.dark-text {
--in-content-page-color: rgb(21, 20, 26);
--in-content-primary-button-text-color: rgb(251, 251, 254);
--in-content-primary-button-text-color-hover: rgb(251, 251, 254);
--in-content-primary-button-background: #0061E0;
--in-content-primary-button-background-hover: #0250BB;
--in-content-primary-button-background-active: #053E94;
--in-content-primary-button-border-color: transparent;
--in-content-primary-button-border-hover: transparent;
--in-content-button-text-color: var(--in-content-page-color);
}
.onboardingContainer .screen:dir(rtl) {
transform: rotateY(180deg);
}
.onboardingContainer .screen[pos=center] {
background-color: rgba(21, 20, 26, 0.5);
min-width: 504px;
}
.onboardingContainer .screen[pos=center].with-noodles {
min-width: 610px;
min-height: 610px;
}
.onboardingContainer .screen[pos=center].with-noodles .section-main {
height: 504px;
}
.onboardingContainer .screen[pos=center].with-video {
justify-content: center;
background: none;
align-items: center;
}
.onboardingContainer .screen[pos=center].with-video .section-main {
width: 800px;
height: 550px;
}
.onboardingContainer .screen[pos=center].with-video .main-content {
background-color: var(--mr-welcome-background-color);
border-radius: 8px;
box-shadow: 0 2px 14px rgba(58, 57, 68, 0.2);
padding: 44px 85px 20px;
}
.onboardingContainer .screen[pos=center].with-video .main-content .welcome-text {
margin: 0;
}
.onboardingContainer .screen[pos=center].with-video .main-content .main-content-inner {
justify-content: space-between;
}
.onboardingContainer .screen[pos=center].with-video .main-content h1,
.onboardingContainer .screen[pos=center].with-video .main-content h2 {
align-self: start;
}
.onboardingContainer .screen[pos=center].with-video .main-content h1 {
font-size: 24px;
line-height: 28.8px;
}
.onboardingContainer .screen[pos=center].with-video .main-content h2 {
font-size: 15px;
line-height: 22px;
}
.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta {
justify-content: end;
}
.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .arrow-icon {
-moz-context-properties: fill;
fill: currentColor;
text-decoration: none;
}
.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .arrow-icon::after {
content: "";
padding-inline-end: 12px;
margin-inline-start: 4px;
background: url("chrome://browser/skin/forward.svg") no-repeat center/12px;
}
.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .arrow-icon:dir(rtl)::after {
background-image: url("chrome://browser/skin/back.svg");
}
.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary {
background-color: var(--in-content-button-background);
border: 1px solid var(--in-content-button-border-color);
line-height: 12px;
font-size: 0.72em;
font-weight: 600;
padding: 8px 16px;
text-decoration: none;
cursor: default;
color: var(--in-content-button-text-color);
}
.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary:hover, .onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary[open] {
background-color: var(--in-content-button-background-hover);
color: var(--in-content-button-text-color-hover);
}
.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary:hover:active, .onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary[open]:active {
background-color: var(--in-content-button-background-active);
color: var(--in-content-button-text-color-active);
}
.onboardingContainer .screen[pos=center].addons-picker {
justify-content: center;
align-items: center;
background: none;
}
.onboardingContainer .screen[pos=center].addons-picker .section-main {
width: 800px;
height: 550px;
}
.onboardingContainer .screen[pos=center].addons-picker .main-content {
background-color: var(--in-content-page-background);
border-radius: 8px;
box-shadow: 0 2px 14px rgba(58, 57, 68, 0.2);
overflow: hidden;
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .welcome-text {
display: flex;
margin: 0;
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .main-content-inner {
padding: 25px 56px 0;
justify-content: space-between;
}
.onboardingContainer .screen[pos=center].addons-picker .main-content h1,
.onboardingContainer .screen[pos=center].addons-picker .main-content h2 {
align-self: start;
}
.onboardingContainer .screen[pos=center].addons-picker .main-content h2 {
font-size: 15px;
text-align: start;
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .brand-logo {
display: block;
margin: 40px 56px 0;
transition: var(--transition);
height: 30px;
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta {
display: block;
margin: 8px 0;
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link {
background: none;
padding: 0;
font-weight: normal;
background: none;
text-decoration: underline;
cursor: pointer;
color: var(--link-color);
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link:hover {
color: var(--link-color-hover);
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link:active {
color: var(--link-color-active);
}
@media (prefers-contrast) {
.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link:active {
text-decoration: none;
}
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.secondary:hover {
background-color: var(--in-content-button-background-hover);
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta {
justify-content: end;
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .arrow-icon {
-moz-context-properties: fill;
fill: currentColor;
text-decoration: none;
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .arrow-icon::after {
content: "";
padding-inline-end: 12px;
margin-inline-start: 4px;
background: url("chrome://browser/skin/forward.svg") no-repeat center/12px;
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .arrow-icon:dir(rtl)::after {
background-image: url("chrome://browser/skin/back.svg");
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary {
background-color: var(--in-content-button-background);
border: 1px solid var(--in-content-button-border-color);
line-height: 12px;
font-size: 0.72em;
font-weight: 600;
padding: 8px 16px;
text-decoration: none;
cursor: default;
color: var(--in-content-button-text-color);
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary:hover, .onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary[open] {
background-color: var(--in-content-button-background-hover);
color: var(--in-content-button-text-color-hover);
}
.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary:hover:active, .onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary[open]:active {
background-color: var(--in-content-button-background-active);
color: var(--in-content-button-text-color-active);
}
.onboardingContainer .screen[pos=center].addons-picker .addon-container {
display: flex;
border: 1px solid var(--in-content-border-color);
box-shadow: 0 1px 2px 0 var(--in-content-border-color);
border-radius: 4px;
margin: 5px auto;
text-align: start;
}
.onboardingContainer .screen[pos=center].addons-picker .addon-container .rtamo-icon img {
margin: 10px;
}
.onboardingContainer .screen[pos=center].addons-picker .addon-container .addon-details {
display: grid;
width: 70%;
}
.onboardingContainer .screen[pos=center].addons-picker .addon-container .addon-title {
margin: 10px 0 3px;
font-size: 16px;
font-weight: 600;
}
.onboardingContainer .screen[pos=center].addons-picker .addon-container .addon-description {
margin: 2px 0 10px;
font-size: 13px;
font-weight: 400;
}
.onboardingContainer .screen[pos=center].addons-picker .addon-container .install-button-wrapper {
display: flex;
}
.onboardingContainer .screen[pos=center].addons-picker .addon-container button {
align-self: center;
width: 124px;
}
.onboardingContainer .screen[pos=center].addons-picker .loader {
width: 1em;
height: 1em;
border: 3px solid var(--in-content-primary-button-text-color);
border-bottom-color: transparent;
border-radius: 50%;
box-sizing: border-box;
animation: rotation 1s linear infinite;
justify-self: center;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.onboardingContainer .screen[pos=center].addons-picker .loaderContainer {
display: flex;
padding: 1.5px 37.5px;
margin: auto;
}
.onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary {
background: none;
text-decoration: underline;
cursor: pointer;
color: var(--link-color);
font-size: 14px;
font-weight: normal;
line-height: 20px;
}
.onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary:hover {
color: var(--link-color-hover);
}
.onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary:active {
color: var(--link-color-active);
}
@media (prefers-contrast) {
.onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary:active {
text-decoration: none;
}
}
.onboardingContainer .screen:not([pos=split]) .secondary-cta.top button {
color: #FFF;
}
.onboardingContainer .screen:not([pos=split]) .secondary-cta.top button:hover {
color: #E0E0E6;
}
.onboardingContainer .screen:not([pos=split]) migration-wizard {
padding: 5px 60px;
}
.onboardingContainer .screen:not([pos=split]) migration-wizard::part(header) {
text-align: center;
}
.onboardingContainer .screen:not([pos=split]) migration-wizard::part(buttons) {
margin: 32px auto 0;
}
.onboardingContainer .screen:not([pos=split]) .welcome-text:empty {
margin: 0;
}
.onboardingContainer .screen[pos=split]:where(:not([fullscreen])) {
margin: auto;
min-height: 550px;
}
.onboardingContainer .screen[pos=split]:where(:not([fullscreen]))::before {
content: "";
position: absolute;
box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
width: 800px;
height: 550px;
border-radius: 8px;
inset: 0;
margin: auto;
pointer-events: none;
}
.onboardingContainer .screen[pos=split] .section-secondary,
.onboardingContainer .screen[pos=split] .section-main {
width: 400px;
height: 550px;
}
.onboardingContainer .screen[pos=split] .secondary-cta.top {
position: fixed;
padding-inline-end: 0;
}
.onboardingContainer .screen[pos=split] .secondary-cta.top button {
padding: 7px 15px;
}
.onboardingContainer .screen[pos=split] .section-main {
flex-direction: row;
display: block;
margin: auto;
margin-inline-start: 0;
}
.onboardingContainer .screen[pos=split] .section-main:dir(rtl) {
margin: auto;
margin-inline-start: 0;
}
.onboardingContainer .screen[pos=split] .section-main.embedded-migration .main-content {
padding-block: 100px 0;
}
.onboardingContainer .screen[pos=split] .section-main .main-content {
border-radius: 0 8px 8px 0;
overflow: hidden;
padding-inline: 35px 20px;
padding-block: 120px 0;
box-shadow: none;
}
.onboardingContainer .screen[pos=split] .section-main .main-content.no-steps {
padding-bottom: 48px;
}
.onboardingContainer .screen[pos=split] .section-main .main-content:dir(rtl) {
border-radius: 8px 0 0 8px;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .legal-paragraph {
text-align: start;
font-size: 11px;
line-height: 16.5px;
color: #5B5B66;
}
@media only screen and (width <= 800px) {
.onboardingContainer .screen[pos=split] .section-main .main-content .legal-paragraph {
padding-inline: 30px;
}
}
[narrow] .onboardingContainer .screen[pos=split] .section-main .main-content .legal-paragraph {
padding-inline: 30px;
}
@media (prefers-color-scheme: dark) {
.onboardingContainer .screen[pos=split] .section-main .main-content .legal-paragraph {
color: #CFCFD8;
}
}
.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner {
min-height: 330px;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .mobile-download-buttons {
padding: 0;
margin-inline-start: -5px;
display: flex;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .mobile-download-buttons button {
cursor: pointer;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .qr-code-image {
margin: 5px 0 10px;
display: flex;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .language-switcher-container .primary {
margin-bottom: 5px;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons {
position: relative;
text-align: initial;
height: 100%;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container {
font-size: 13px;
margin-block: 1em;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container:not(.multi-select-item) {
transition: var(--transition);
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container input,
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container label {
vertical-align: middle;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box {
margin: 8px 0;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta {
margin: 0;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.cta-link {
background: none;
text-decoration: underline;
cursor: pointer;
color: var(--link-color);
padding: 0;
font-weight: normal;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.cta-link:hover {
color: var(--link-color-hover);
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.cta-link:active {
color: var(--link-color-active);
}
@media (prefers-contrast) {
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.cta-link:active {
text-decoration: none;
}
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.secondary:hover, .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.secondary[open] {
background-color: var(--in-content-button-background-hover);
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons.additional-cta-container {
flex-wrap: nowrap;
align-items: start;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta {
position: absolute;
bottom: -30px;
inset-inline-end: 0;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary {
background-color: var(--in-content-button-background);
border: 1px solid var(--in-content-button-border-color);
line-height: 12px;
font-size: 0.72em;
font-weight: 600;
padding: 8px 16px;
text-decoration: none;
cursor: default;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary:hover, .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary[open] {
background-color: var(--in-content-button-background-hover);
color: var(--in-content-button-text-color-hover);
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary:hover:active, .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary[open]:active {
background-color: var(--in-content-button-background-active);
color: var(--in-content-button-text-color-active);
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .arrow-icon {
-moz-context-properties: fill;
fill: currentColor;
text-decoration: none;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .arrow-icon::after {
content: "";
padding-inline-end: 12px;
margin-inline-start: 4px;
background: url("chrome://browser/skin/forward.svg") no-repeat center/12px;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .arrow-icon:dir(rtl)::after {
background-image: url("chrome://browser/skin/back.svg");
}
.onboardingContainer .screen[pos=split] .section-main .main-content .logo-container {
text-align: start;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .brand-logo {
height: 25px;
margin-block: 0;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .logo-alt {
width: inherit;
height: inherit;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text {
margin-inline: 0 10px;
margin-block: 10px 35px;
text-align: initial;
align-items: initial;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text:empty {
margin: 0;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h1 {
font-size: 24px;
line-height: 1.2;
width: 300px;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h2 {
margin: 10px 0 0;
min-height: 1em;
font-size: 15px;
line-height: 1.5;
}
@media (prefers-contrast: no-preference) {
.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h2 {
color: #5B5B66;
}
}
.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h1,
.onboardingContainer .screen[pos=split] .section-main .main-content .primary {
margin: 0;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .steps {
z-index: 1;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar {
margin-inline: -35px;
}
@media (prefers-contrast) {
.onboardingContainer .screen[pos=split] .section-main .main-content {
border: 1px solid var(--in-content-page-color);
}
.onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar {
border-top: 1px solid var(--in-content-page-color);
background-color: var(--in-content-page-background);
}
.onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar .indicator {
background-color: var(--color-accent-primary);
}
}
.onboardingContainer .screen[pos=split] .section-secondary {
--mr-secondary-position: center center / auto 350px;
border-radius: 8px 0 0 8px;
margin: auto 0 auto auto;
display: flex;
align-items: center;
-moz-context-properties: fill, stroke, fill-opacity, stroke-opacity;
stroke: currentColor;
position: relative;
}
.onboardingContainer .screen[pos=split] .section-secondary:dir(rtl) {
border-radius: 0 8px 8px 0;
margin: auto;
margin-inline-end: 0;
}
.onboardingContainer .screen[pos=split] .section-secondary h1 {
color: var(--mr-screen-heading-color);
font-weight: 700;
font-size: 47px;
line-height: 110%;
max-width: 340px;
text-align: initial;
white-space: pre-wrap;
text-shadow: none;
margin-inline: 40px 0;
}
.onboardingContainer .screen[pos=split] .section-secondary .image-alt {
width: inherit;
height: inherit;
}
.onboardingContainer .screen[pos=split] .section-secondary .hero-image {
flex: 1;
display: flex;
justify-content: center;
max-height: 100%;
}
.onboardingContainer .screen[pos=split] .section-secondary .hero-image img {
width: 100%;
max-width: 180px;
margin: 25px 0;
padding-bottom: 30px;
}
@media only screen and (width <= 800px) {
.onboardingContainer .screen[pos=split] .section-secondary .hero-image img {
padding-bottom: unset;
}
}
[narrow] .onboardingContainer .screen[pos=split] .section-secondary .hero-image img {
padding-bottom: unset;
}
.onboardingContainer .screen[pos=split] .multi-select-container {
margin-inline: 0 10px;
}
.onboardingContainer .screen[pos=split] .multi-select-container .multi-select-item {
display: block;
}
.onboardingContainer .screen[pos=split] .multi-select-container .multi-select-item p {
margin-block: 0.5em 0;
margin-inline-start: calc(16px + var(--checkbox-margin-inline));
font-size: 12px;
}
@media only screen and (width <= 800px) {
.onboardingContainer .screen[pos=split] .multi-select-container {
flex-direction: column;
align-self: center;
align-items: start;
justify-content: center;
width: 240px;
padding: 0 30px;
margin-inline: 0;
box-sizing: content-box;
}
.onboardingContainer .screen[pos=split] .multi-select-container .multi-select-item p {
margin-inline-start: 0;
}
}
[narrow] .onboardingContainer .screen[pos=split] .multi-select-container {
flex-direction: column;
align-self: center;
align-items: start;
justify-content: center;
width: 240px;
padding: 0 30px;
margin-inline: 0;
box-sizing: content-box;
}
[narrow] .onboardingContainer .screen[pos=split] .multi-select-container .multi-select-item p {
margin-inline-start: 0;
}
.onboardingContainer .screen[pos=split] .tiles-single-select-container {
margin-block: -20px auto;
align-items: initial;
}
.onboardingContainer .screen[pos=split] .tiles-single-select-container .select-item {
min-width: 38px;
}
@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h2 {
color: #CFCFD8;
}
.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary {
background-color: #2B2A33;
}
}
@media only screen and (width >= 800px) {
.onboardingContainer .screen[pos=split] .tiles-single-select-section {
margin-inline-start: -10px;
}
.onboardingContainer .screen[pos=split][reverse-split] {
flex-direction: row-reverse;
}
.onboardingContainer .screen[pos=split][reverse-split] .section-main {
margin: auto;
margin-inline-end: 0;
border-radius: 8px 0 0 8px;
}
.onboardingContainer .screen[pos=split][reverse-split] .section-main .main-content {
border-radius: inherit;
}
.onboardingContainer .screen[pos=split][reverse-split] .section-main:dir(rtl) {
border-radius: 0 8px 8px 0;
margin: auto;
margin-inline-end: 0;
}
.onboardingContainer .screen[pos=split][reverse-split] .section-secondary {
margin: auto;
margin-inline-start: 0;
border-radius: 0 8px 8px 0;
}
.onboardingContainer .screen[pos=split][reverse-split] .section-secondary:dir(rtl) {
border-radius: 8px 0 0 8px;
margin: auto;
margin-inline-start: 0;
}
}
.onboardingContainer .screen[pos=split]:where([no-rdm=true]) .tiles-single-select-section {
margin-inline-start: -10px;
}
.onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] {
flex-direction: row-reverse;
}
.onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-main {
margin: auto;
margin-inline-end: 0;
border-radius: 8px 0 0 8px;
}
.onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-main .main-content {
border-radius: inherit;
}
.onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-main:dir(rtl) {
border-radius: 0 8px 8px 0;
margin: auto;
margin-inline-end: 0;
}
.onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-secondary {
margin: auto;
margin-inline-start: 0;
border-radius: 0 8px 8px 0;
}
.onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-secondary:dir(rtl) {
border-radius: 8px 0 0 8px;
margin: auto;
margin-inline-start: 0;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary,
.onboardingContainer .screen[pos=split][fullscreen] .section-main {
width: 50%;
height: 100%;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content {
border-radius: 0;
padding: 0;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content h1 {
width: auto;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .main-content-inner {
min-height: 0;
flex-grow: 0;
padding-inline: 110px;
margin-block: auto;
max-width: 400px;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .action-buttons {
position: static;
height: auto;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .action-buttons .secondary-cta {
inset-block-end: 26px;
inset-inline-end: 30px;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary {
--mr-secondary-position: center center / 50%;
border-radius: 0;
margin: 0;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary .hero-image {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary .hero-image img {
width: 30%;
}
@media only screen and (width <= 800px) {
.onboardingContainer .screen[pos=split][fullscreen] .section-main,
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary {
width: 100%;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-main {
height: 75%;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-main[hide-secondary-section=responsive] {
height: 100%;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-main[hide-secondary-section=responsive] .main-content {
border-radius: 0;
padding: 0;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .action-buttons .secondary-cta {
inset-block-end: 0;
inset-inline-end: 0;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .main-content-inner {
padding-inline: 55px;
margin-inline: auto;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary {
--mr-secondary-position: center var(--mr-secondary-background-position-y) / 50%;
}
.onboardingContainer .screen[pos=split][fullscreen] .section-secondary .hero-image img {
width: 25%;
max-height: 75%;
}
}
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main,
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-secondary {
width: 100%;
}
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main {
height: 75%;
}
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main[hide-secondary-section=responsive] {
height: 100%;
}
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main[hide-secondary-section=responsive] .main-content {
border-radius: 0;
padding: 0;
}
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .action-buttons .secondary-cta {
inset-block-end: 0;
inset-inline-end: 0;
}
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .main-content-inner {
padding-inline: 55px;
margin-inline: auto;
}
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-secondary {
--mr-secondary-position: center var(--mr-secondary-background-position-y) / 50%;
}
[narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-secondary .hero-image img {
width: 25%;
max-height: 75%;
}
@media only screen and (width <= 800px) {
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) {
flex-direction: column;
min-height: 550px;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm]))::before {
width: 400px;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] {
flex-direction: column;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-secondary {
border-radius: 8px 8px 0 0;
margin: auto;
margin-bottom: 0;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-secondary:dir(rtl) {
margin: auto;
margin-bottom: 0;
border-radius: 8px 8px 0 0;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-main {
margin: auto;
margin-top: 0;
border-radius: 0 0 8px 8px;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-main:dir(rtl) {
margin: auto;
margin-top: 0;
border-radius: 0 0 8px 8px;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary,
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main {
width: 400px;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary {
--mr-secondary-background-position-y: top;
--mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%;
border-radius: 8px 8px 0 0;
margin: auto;
margin-bottom: 0;
height: 100px;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary .hero-image img {
margin: 6px 0;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary .message-text {
margin-inline: auto;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary h1 {
font-size: 35px;
text-align: center;
white-space: normal;
margin-inline: auto;
margin-block: 14px 6px;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary:dir(rtl) {
margin: auto;
margin-bottom: 0;
border-radius: 8px 8px 0 0;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary.with-secondary-section-hidden {
display: none;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) migration-wizard::part(deck) {
min-width: 330px;
margin-inline: 36px;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main {
margin: auto;
margin-top: 0;
height: 450px;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main migration-wizard::part(buttons) {
flex-direction: column;
margin-inline: 46px;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] {
height: 550px;
margin: auto;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive]:dir(rtl) {
margin: auto;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] .main-content {
padding: 50px 0 0;
border-radius: 8px;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] .main-content:dir(rtl) {
border-radius: 8px;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content {
border-radius: 0 0 8px 8px;
padding: 30px 0 0;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .main-content-inner {
align-items: center;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container {
text-align: center;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo {
min-height: 25px;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo, .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo:dir(rtl) {
background-position: center;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .logo-alt {
width: inherit;
height: inherit;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text {
align-items: center;
text-align: center;
margin-inline: 0;
padding-inline: 30px;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text .spacer-bottom,
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text .spacer-top {
display: none;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons {
text-align: center;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons .checkbox-container {
display: none;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons .secondary-cta {
position: relative;
margin-block: 10px 0;
bottom: 0;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .primary,
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .secondary {
min-width: 240px;
margin-inline: 0;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .steps {
padding-block: 0;
margin: 0;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .steps.progress-bar {
margin-inline: 0;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .additional-cta.cta-link {
align-self: center;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .dismiss-button {
top: -100px;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main:dir(rtl) {
margin: auto;
margin-top: 0;
}
.onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main:dir(rtl) .main-content {
border-radius: 0 0 8px 8px;
}
.onboardingContainer .screen[pos=split][no-rdm] {
width: 800px;
}
.onboardingContainer .screen[pos=split][no-rdm][reverse-split] {
flex-direction: row-reverse;
}
.onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main {
margin: auto;
margin-inline-end: 0;
border-radius: 8px 0 0 8px;
}
.onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main .main-content {
border-radius: inherit;
}
.onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main:dir(rtl) {
border-radius: 0 8px 8px 0;
margin: auto;
margin-inline-end: 0;
}
.onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-secondary {
margin: auto;
margin-inline-start: 0;
border-radius: 0 8px 8px 0;
}
.onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-secondary:dir(rtl) {
border-radius: 8px 0 0 8px;
margin: auto;
margin-inline-start: 0;
}
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) {
flex-direction: column;
min-height: 550px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))::before {
width: 400px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] {
flex-direction: column;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-secondary {
border-radius: 8px 8px 0 0;
margin: auto;
margin-bottom: 0;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-secondary:dir(rtl) {
margin: auto;
margin-bottom: 0;
border-radius: 8px 8px 0 0;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-main {
margin: auto;
margin-top: 0;
border-radius: 0 0 8px 8px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-main:dir(rtl) {
margin: auto;
margin-top: 0;
border-radius: 0 0 8px 8px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary,
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main {
width: 400px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary {
--mr-secondary-background-position-y: top;
--mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%;
border-radius: 8px 8px 0 0;
margin: auto;
margin-bottom: 0;
height: 100px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary .hero-image img {
margin: 6px 0;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary .message-text {
margin-inline: auto;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary h1 {
font-size: 35px;
text-align: center;
white-space: normal;
margin-inline: auto;
margin-block: 14px 6px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary:dir(rtl) {
margin: auto;
margin-bottom: 0;
border-radius: 8px 8px 0 0;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary.with-secondary-section-hidden {
display: none;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) migration-wizard::part(deck) {
min-width: 330px;
margin-inline: 36px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main {
margin: auto;
margin-top: 0;
height: 450px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main migration-wizard::part(buttons) {
flex-direction: column;
margin-inline: 46px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] {
height: 550px;
margin: auto;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive]:dir(rtl) {
margin: auto;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] .main-content {
padding: 50px 0 0;
border-radius: 8px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] .main-content:dir(rtl) {
border-radius: 8px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content {
border-radius: 0 0 8px 8px;
padding: 30px 0 0;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .main-content-inner {
align-items: center;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container {
text-align: center;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo {
min-height: 25px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo, [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo:dir(rtl) {
background-position: center;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .logo-alt {
width: inherit;
height: inherit;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text {
align-items: center;
text-align: center;
margin-inline: 0;
padding-inline: 30px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text .spacer-bottom,
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text .spacer-top {
display: none;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons {
text-align: center;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons .checkbox-container {
display: none;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons .secondary-cta {
position: relative;
margin-block: 10px 0;
bottom: 0;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .primary,
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .secondary {
min-width: 240px;
margin-inline: 0;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .steps {
padding-block: 0;
margin: 0;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .steps.progress-bar {
margin-inline: 0;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .additional-cta.cta-link {
align-self: center;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .dismiss-button {
top: -100px;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main:dir(rtl) {
margin: auto;
margin-top: 0;
}
[narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main:dir(rtl) .main-content {
border-radius: 0 0 8px 8px;
}
[narrow] .onboardingContainer .screen[pos=split][no-rdm] {
width: 800px;
}
[narrow] .onboardingContainer .screen[pos=split][no-rdm][reverse-split] {
flex-direction: row-reverse;
}
[narrow] .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main {
margin: auto;
margin-inline-end: 0;
border-radius: 8px 0 0 8px;
}
[narrow] .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main .main-content {
border-radius: inherit;
}
[narrow] .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main:dir(rtl) {
border-radius: 0 8px 8px 0;
margin: auto;
margin-inline-end: 0;
}
[narrow] .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-secondary {
margin: auto;
margin-inline-start: 0;
border-radius: 0 8px 8px 0;
}
[narrow] .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-secondary:dir(rtl) {
border-radius: 8px 0 0 8px;
margin: auto;
margin-inline-start: 0;
}
@media only screen and (height <= 650px) and (800px <= width <= 990px) {
.onboardingContainer .screen[pos=split] .section-main .secondary-cta.top {
display: none;
}
}
@media only screen and (height <= 650px) and (width <= 620px) {
.onboardingContainer .screen[pos=split] .section-main .secondary-cta.top {
position: absolute;
padding: 0;
top: 0;
inset-inline-end: 0;
}
}
@media only screen and (height <= 650px) and (width <= 620px) {
[narrow] .onboardingContainer .screen[pos=split] .section-main .secondary-cta.top {
position: absolute;
padding: 0;
top: 0;
inset-inline-end: 0;
}
}
.onboardingContainer .brand-logo {
margin-block: 60px 10px;
transition: var(--transition);
height: 80px;
}
.onboardingContainer .brand-logo.cta-top {
margin-top: 25px;
}
.onboardingContainer .brand-logo.hide {
visibility: hidden;
padding: unset;
margin-top: 50px;
}
.onboardingContainer .logo-alt {
width: inherit;
height: inherit;
}
.onboardingContainer .rtamo-theme-icon {
max-height: 30px;
border-radius: 2px;
margin-bottom: 10px;
margin-top: 24px;
}
.onboardingContainer .rtamo-icon {
text-align: start;
}
@media only screen and (width <= 800px) {
.onboardingContainer .rtamo-icon {
text-align: center;
}
}
[narrow] .onboardingContainer .rtamo-icon {
text-align: center;
}
.onboardingContainer .text-link {
background: none;
text-decoration: underline;
cursor: pointer;
color: var(--link-color);
}
.onboardingContainer .text-link:hover {
color: var(--link-color-hover);
}
.onboardingContainer .text-link:active {
color: var(--link-color-active);
}
@media (prefers-contrast) {
.onboardingContainer .text-link:active {
text-decoration: none;
}
}
.onboardingContainer .welcome-text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0.5em 1em;
transition: var(--transition);
}
.onboardingContainer .welcome-text h1,
.onboardingContainer .welcome-text h2 {
color: var(--in-content-page-color);
line-height: 1.5;
}
.onboardingContainer .welcome-text h1 {
font-size: 24px;
font-weight: 600;
margin: 0 6px;
letter-spacing: -0.02em;
outline: none;
}
.onboardingContainer .welcome-text h2 {
font-size: 16px;
font-weight: normal;
margin: 10px 6px 0;
max-width: 750px;
letter-spacing: -0.01em;
}
.onboardingContainer .welcome-text.fancy h1 {
background-image: linear-gradient(90deg, #9059FF, #FF4AA2, #FF8C00, #FF4AA2, #9059FF);
background-clip: text;
background-size: 200%;
}
@media (prefers-contrast: no-preference) {
.onboardingContainer .welcome-text.fancy h1 {
color: transparent;
}
}
@media (prefers-color-scheme: dark) {
.onboardingContainer .welcome-text.fancy h1 {
background-image: linear-gradient(90deg, #C688FF, #FF84C0, #FFBD4F, #FF84C0, #C688FF);
}
.onboardingContainer .welcome-text.fancy h1::selection {
color: #FFF;
background-color: #696977;
}
}
.onboardingContainer .welcome-text.shine h1 {
animation: shine 50s linear infinite;
background-size: 400%;
}
@keyframes shine {
to {
background-position: 400%;
}
}
.onboardingContainer .welcome-text .cta-paragraph a {
margin: 0;
text-decoration: underline;
cursor: pointer;
}
.onboardingContainer .screen.light-text .welcome-text.fancy h1 {
background-image: linear-gradient(90deg, #C688FF, #FF84C0, #FFBD4F, #FF84C0, #C688FF);
}
.onboardingContainer .screen.dark-text .welcome-text.fancy h1 {
background-image: linear-gradient(90deg, #9059FF, #FF4AA2, #FF8C00, #FF4AA2, #9059FF);
}
.onboardingContainer .welcomeZap span {
position: relative;
z-index: 1;
white-space: nowrap;
}
.onboardingContainer .welcomeZap .zap::after {
display: block;
background-repeat: no-repeat;
background-size: 100% 100%;
content: "";
position: absolute;
top: calc(100% - 0.15em);
width: 100%;
height: 0.3em;
left: 0;
z-index: -1;
transform: scaleY(3);
}
.onboardingContainer .welcomeZap .zap.short::after {
background-image: url("chrome://activity-stream/content/data/content/assets/short-zap.svg");
}
.onboardingContainer .welcomeZap .zap.long::after {
background-image: url("chrome://activity-stream/content/data/content/assets/long-zap.svg");
}
.onboardingContainer .language-loader {
-moz-context-properties: fill;
fill: currentColor;
margin-inline-end: 10px;
position: relative;
top: 3px;
width: 16px;
height: 16px;
margin-top: -6px;
}
.onboardingContainer .tiles-single-select-container {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px auto;
}
.onboardingContainer .sr-only {
opacity: 0;
overflow: hidden;
position: absolute;
}
.onboardingContainer .sr-only.input {
height: 1px;
width: 1px;
}
.onboardingContainer .tiles-single-select-section {
border: 0;
display: flex;
flex-wrap: wrap;
gap: 5px;
justify-content: space-evenly;
margin-inline: 10px;
padding: 10px;
transition: var(--transition);
}
.onboardingContainer .tiles-single-select-section:hover, .onboardingContainer .tiles-single-select-section:active, .onboardingContainer .tiles-single-select-section:focus-within {
border-radius: 8px;
outline: 2px solid var(--in-content-primary-button-background);
}
.onboardingContainer .tiles-single-select-section.single-select:not(.wallpaper, .theme) {
flex-direction: row;
padding-top: 5px;
gap: 10px;
justify-content: center;
}
.onboardingContainer .tiles-single-select-section.single-select:not(.wallpaper, .theme) .select-item {
position: relative;
padding-top: 5px;
border: 2px solid var(--single-select-border-color);
border-radius: 12px;
}
.onboardingContainer .tiles-single-select-section.single-select:not(.wallpaper, .theme) .select-item:has(.input:focus), .onboardingContainer .tiles-single-select-section.single-select:not(.wallpaper, .theme) .select-item:has(.selected) {
outline: none;
}
.onboardingContainer .tiles-single-select-section.single-select:not(.wallpaper, .theme) .select-item:has(.input:focus) {
outline: 2px solid var(--in-content-primary-button-background);
outline-offset: 5px;
}
.onboardingContainer .tiles-single-select-section.single-select:not(.wallpaper, .theme) .select-item:has(.selected) {
border: 3px solid var(--in-content-primary-button-background);
border-radius: 12px;
}
.onboardingContainer .tiles-single-select-section.single-select:not(.wallpaper, .theme) .select-item:hover {
background-color: var(--single-select-hover-color);
}
.onboardingContainer .tiles-single-select-section.single-select:not(.wallpaper, .theme) .select-item:focus-visible {
outline: none;
}
.onboardingContainer .tiles-single-select-section.single-select:not(.wallpaper, .theme) .select-item:focus-visible .icon {
outline: initial;
}
.onboardingContainer .tiles-single-select-section.single-select:not(.wallpaper, .theme) .select-item .flair {
height: 18px;
border-radius: 4px;
background-color: #9059FF;
color: #FFF;
padding: 2px 8px;
position: absolute;
right: 1px;
top: -10px;
line-height: 1;
}
.onboardingContainer .tiles-single-select-section.single-select:not(.wallpaper, .theme) .select-item .icon {
outline: none;
}
.onboardingContainer .tiles-single-select-section.single-select:not(.wallpaper, .theme) .select-item .text {
margin-block: 8px;
}
.onboardingContainer .tiles-single-select-section.wallpaper .select-item, .onboardingContainer .tiles-single-select-section.theme .select-item {
width: 180px;
}
.onboardingContainer .tiles-single-select-section.single-select:hover, .onboardingContainer .tiles-single-select-section.single-select:focus-within, .onboardingContainer .tiles-single-select-section.wallpaper:hover, .onboardingContainer .tiles-single-select-section.wallpaper:focus-within {
outline: none;
}
.onboardingContainer .tiles-single-select-section.single-select .select-item, .onboardingContainer .tiles-single-select-section.wallpaper .select-item {
transition: var(--transition);
}
.onboardingContainer .tiles-single-select-section.single-select .select-item:has(.input:focus), .onboardingContainer .tiles-single-select-section.wallpaper .select-item:has(.input:focus) {
outline: 2px solid var(--in-content-primary-button-background);
outline-offset: 2px;
}
.onboardingContainer .tiles-single-select-section.wallpaper {
justify-content: center;
gap: 10px;
}
.onboardingContainer .tiles-single-select-section.wallpaper .select-item {
flex: unset;
width: unset;
}
.onboardingContainer .tiles-single-select-section.wallpaper .select-item .icon {
width: 116px;
height: 86px;
border-radius: 8px;
box-shadow: 0 1px 2px 0 rgba(58, 57, 68, 0.2);
}
.onboardingContainer .tiles-single-select-section.wallpaper .select-item .icon:hover {
filter: brightness(45%);
}
.onboardingContainer .tiles-single-select-section.wallpaper .select-item .icon.dark-landscape {
}
.onboardingContainer .tiles-single-select-section.wallpaper .select-item .icon.dark-beach {
}
.onboardingContainer .tiles-single-select-section.wallpaper .select-item .icon.dark-color {
}
.onboardingContainer .tiles-single-select-section.wallpaper .select-item .icon.dark-mountain {
}
.onboardingContainer .tiles-single-select-section.wallpaper .select-item .icon.dark-panda {
}
.onboardingContainer .tiles-single-select-section.wallpaper .select-item .icon.dark-sky {
}
.onboardingContainer .tiles-single-select-section.wallpaper .select-item .icon.light-beach {
}
.onboardingContainer .tiles-single-select-section.wallpaper .select-item .icon.light-color {
}
.onboardingContainer .tiles-single-select-section.wallpaper .select-item .icon.light-landscape {
}
.onboardingContainer .tiles-single-select-section.wallpaper .select-item .icon.light-mountain {
}
.onboardingContainer .tiles-single-select-section.wallpaper .select-item .icon.light-panda {
}
.onboardingContainer .tiles-single-select-section.wallpaper .select-item .icon.light-sky {
}
.onboardingContainer .tiles-single-select-section.wallpaper .dark {
display: none;
}
.onboardingContainer .tiles-single-select-section.wallpaper .text {
display: none;
}
@media (prefers-color-scheme: dark) {
.onboardingContainer .tiles-single-select-section.wallpaper .light {
display: none;
}
.onboardingContainer .tiles-single-select-section.wallpaper .dark {
display: block;
}
}
.onboardingContainer .tiles-single-select-section .select-item {
align-items: center;
display: flex;
flex-direction: column;
flex: 1;
padding: 0;
min-width: 50px;
color: #000;
box-shadow: none;
border-radius: 4px;
cursor: pointer;
z-index: 0;
}
.onboardingContainer .tiles-single-select-section .select-item:focus, .onboardingContainer .tiles-single-select-section .select-item:active {
outline: initial;
outline-offset: initial;
}
.onboardingContainer .tiles-single-select-section .select-item .icon {
background-size: cover;
width: 40px;
height: 40px;
border-radius: 40px;
outline: 1px solid var(--in-content-border-color);
outline-offset: -0.5px;
z-index: -1;
}
.onboardingContainer .tiles-single-select-section .select-item .icon:dir(rtl) {
transform: scaleX(-1);
}
.onboardingContainer .tiles-single-select-section .select-item .icon:focus-visible, .onboardingContainer .tiles-single-select-section .select-item .icon:active, .onboardingContainer .tiles-single-select-section .select-item .icon.selected {
outline: 2px solid var(--in-content-primary-button-background);
outline-offset: 2px;
}
.onboardingContainer .tiles-single-select-section .select-item .icon.selected {
outline-color: var(--color-accent-primary-active);
}
.onboardingContainer .tiles-single-select-section .select-item .icon.light {
background-image: url("resource://builtin-themes/light/icon.svg");
}
.onboardingContainer .tiles-single-select-section .select-item .icon.dark {
background-image: url("resource://builtin-themes/dark/icon.svg");
}
.onboardingContainer .tiles-single-select-section .select-item .icon.alpenglow {
background-image: url("resource://builtin-themes/alpenglow/icon.svg");
}
.onboardingContainer .tiles-single-select-section .select-item .icon.default, .onboardingContainer .tiles-single-select-section .select-item .icon.automatic {
background-image: url("resource://default-theme/icon.svg");
}
.onboardingContainer .tiles-single-select-section .select-item .text {
display: flex;
color: var(--in-content-page-color);
font-size: 14px;
font-weight: normal;
line-height: 20px;
margin-inline-start: 0;
margin-top: 9px;
}
.onboardingContainer .tiles-single-select-section legend {
cursor: default;
}
.onboardingContainer .tiles-container {
margin: 10px auto;
}
.onboardingContainer .tiles-container.info {
padding: 6px 12px 12px;
}
.onboardingContainer .tiles-container.info:hover, .onboardingContainer .tiles-container.info:focus {
background-color: rgba(217, 217, 227, 0.3);
border-radius: 4px;
}
.onboardingContainer .tiles-delayed {
animation: fadein 0.4s;
}
.onboardingContainer .multi-select-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex-shrink: 0;
align-items: flex-start;
gap: 16px;
margin-block: -1em 2em;
margin-inline: 1em;
color: #5B5B66;
font-weight: 400;
font-size: 14px;
text-align: initial;
transition: var(--transition);
z-index: 1;
}
.onboardingContainer .multi-select-container #multi-stage-multi-select-label {
color: var(--in-content-page-color);
line-height: 1.5;
font-size: 16px;
font-weight: normal;
letter-spacing: -0.01em;
margin: calc(0.5em + 10px) 6px 0;
max-width: 750px;
}
.onboardingContainer .screen[pos=split] .multi-select-container #multi-stage-multi-select-label {
margin: calc(-35px + 1em + 10px) 0 0;
min-height: 1em;
font-size: 15px;
line-height: 1.5;
}
@media (prefers-contrast: no-preference) {
.onboardingContainer .screen[pos=split] .multi-select-container #multi-stage-multi-select-label {
color: #5B5B66;
}
}
@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
.onboardingContainer .screen[pos=split] .multi-select-container #multi-stage-multi-select-label {
color: #CFCFD8;
}
}
.onboardingContainer .multi-select-container .checkbox-container {
display: flex;
}
.onboardingContainer .multi-select-container .checkbox-container > input {
flex-grow: 0;
flex-shrink: 0;
}
@media (prefers-color-scheme: dark) {
.onboardingContainer .multi-select-container {
color: #CFCFD8;
}
}
@media (prefers-contrast) {
.onboardingContainer .multi-select-container {
color: var(--in-content-page-color);
}
}
.onboardingContainer .mobile-downloads .qr-code-image {
margin: 24px 0 10px;
width: 113px;
height: 113px;
}
.onboardingContainer .mobile-downloads .email-link {
background: none;
text-decoration: underline;
cursor: pointer;
color: var(--link-color);
font-size: 16px;
font-weight: 400;
}
.onboardingContainer .mobile-downloads .email-link:hover {
color: var(--link-color-hover);
}
.onboardingContainer .mobile-downloads .email-link:active {
color: var(--link-color-active);
}
@media (prefers-contrast) {
.onboardingContainer .mobile-downloads .email-link:active {
text-decoration: none;
}
}
.onboardingContainer .mobile-downloads .email-link:hover {
background: none;
}
.onboardingContainer .mobile-downloads .ios button {
background-image: url("chrome://app-marketplace-icons/locale/ios.svg");
}
.onboardingContainer .mobile-downloads .android button {
background-image: url("chrome://app-marketplace-icons/locale/android.png");
}
.onboardingContainer .mobile-download-buttons {
list-style: none;
padding: 10px 0;
margin: 0;
}
.onboardingContainer .mobile-download-buttons li {
display: inline-block;
}
.onboardingContainer .mobile-download-buttons li button {
display: inline-block;
height: 45px;
width: 152px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
box-shadow: none;
border: 0;
}
.onboardingContainer .mobile-download-buttons li:not(:first-child) {
margin-inline: 5px 0;
}
.onboardingContainer .dismiss-button {
position: absolute;
z-index: 2;
top: 0;
left: auto;
right: 0;
box-sizing: border-box;
padding: 0;
margin: 16px;
display: block;
float: inline-end;
background: url("chrome://global/skin/icons/close.svg") no-repeat center/16px;
height: 32px;
width: 32px;
align-self: end;
min-height: 32px;
min-width: 32px;
-moz-context-properties: fill;
fill: currentColor;
transition: var(--transition);
}
.onboardingContainer .dismiss-button:dir(rtl) {
left: 0;
right: auto;
}
@keyframes fadein {
from {
opacity: 0;
}
}
.onboardingContainer .secondary-cta {
display: flex;
align-items: end;
flex-direction: row;
justify-content: center;
font-size: 14px;
transition: var(--transition);
}
.onboardingContainer .secondary-cta.top {
justify-content: end;
padding-inline-end: min(150px, 500px - 70vh);
padding-top: 4px;
position: absolute;
top: 10px;
inset-inline-end: 20px;
z-index: 2;
}
.onboardingContainer .secondary-cta span {
color: var(--grey-subtitle-1);
margin: 0 4px;
}
.onboardingContainer .message-text {
transition: var(--transition);
}
.onboardingContainer .helptext {
padding: 1em;
text-align: center;
color: var(--grey-subtitle-1);
font-size: 12px;
line-height: 18px;
}
.onboardingContainer .helptext.default {
align-self: center;
max-width: 40%;
}
.onboardingContainer .helptext span {
padding-inline-end: 4px;
}
.onboardingContainer .helptext-img {
height: 1.5em;
width: 1.5em;
margin-inline-end: 4px;
vertical-align: middle;
}
.onboardingContainer .helptext-img.end {
margin: 4px;
}
.onboardingContainer .helptext-img.footer {
vertical-align: bottom;
}
.onboardingContainer .steps {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 0;
padding-block: 16px 0;
transition: var(--transition);
z-index: -1;
height: 48px;
box-sizing: border-box;
}
.onboardingContainer .steps.has-helptext {
padding-bottom: 0;
}
.onboardingContainer .steps .indicator {
width: 0;
height: 0;
margin-inline-end: 4px;
margin-inline-start: 4px;
background: var(--grey-subtitle-1);
border-radius: 5px;
border: 3px solid var(--in-content-button-text-color);
opacity: 0.35;
box-sizing: inherit;
}
.onboardingContainer .steps .indicator.current {
opacity: 1;
border-color: var(--in-content-primary-button-background);
}
.onboardingContainer .steps .indicator.current:last-of-type:first-of-type {
opacity: 0;
}
.onboardingContainer .steps.progress-bar {
height: 6px;
padding-block: 0;
margin-block: 42px 0;
background-color: color-mix(in srgb, var(--in-content-button-text-color) 25%, transparent);
justify-content: start;
opacity: 1;
transition: none;
}
.onboardingContainer .steps.progress-bar .indicator {
width: 100%;
height: 100%;
margin-inline: -1px;
background-color: var(--in-content-primary-button-background);
border: 0;
border-radius: 0;
opacity: 1;
transition: var(--progress-bar-transition);
translate: calc(var(--progress-bar-progress, 0%) - 100%);
}
.onboardingContainer .steps.progress-bar .indicator:dir(rtl) {
translate: calc(var(--progress-bar-progress, 0%) * -1 + 100%);
}
.onboardingContainer .additional-cta-container[flow] {
display: flex;
flex-flow: column wrap;
align-items: center;
}
.onboardingContainer .additional-cta-container[flow][flow=row] {
flex-direction: row;
justify-content: center;
}
.onboardingContainer .additional-cta-container[flow][flow=row] .secondary-cta {
flex-basis: 100%;
}
.onboardingContainer .legal-paragraph {
transition: var(--transition);
}
.onboardingContainer .primary,
.onboardingContainer .secondary,
.onboardingContainer .additional-cta,
.onboardingContainer .submenu-button {
font-size: 13px;
line-height: 16px;
padding: 11px 15px;
transition: var(--transition);
}
.onboardingContainer .primary.rtamo,
.onboardingContainer .secondary.rtamo,
.onboardingContainer .additional-cta.rtamo,
.onboardingContainer .submenu-button.rtamo {
margin-top: 24px;
}
.onboardingContainer .secondary {
background-color: var(--in-content-button-background);
color: var(--in-content-button-text-color);
}
.onboardingContainer .split-button-container,
.onboardingContainer .screen .action-buttons .split-button-container {
align-items: stretch;
}
.onboardingContainer .split-button-container:not([hidden]),
.onboardingContainer .screen .action-buttons .split-button-container:not([hidden]) {
display: flex;
}
.onboardingContainer .split-button-container .primary:not(.submenu-button),
.onboardingContainer .split-button-container .secondary:not(.submenu-button),
.onboardingContainer .split-button-container .additional-cta:not(.submenu-button),
.onboardingContainer .screen .action-buttons .split-button-container .primary:not(.submenu-button),
.onboardingContainer .screen .action-buttons .split-button-container .secondary:not(.submenu-button),
.onboardingContainer .screen .action-buttons .split-button-container .additional-cta:not(.submenu-button) {
border-start-end-radius: 0;
border-end-end-radius: 0;
margin-inline-end: 0;
}
.onboardingContainer .split-button-container .primary:focus-visible,
.onboardingContainer .split-button-container .secondary:focus-visible,
.onboardingContainer .split-button-container .additional-cta:focus-visible,
.onboardingContainer .screen .action-buttons .split-button-container .primary:focus-visible,
.onboardingContainer .screen .action-buttons .split-button-container .secondary:focus-visible,
.onboardingContainer .screen .action-buttons .split-button-container .additional-cta:focus-visible {
z-index: 2;
}
.onboardingContainer .split-button-container .submenu-button,
.onboardingContainer .screen .action-buttons .split-button-container .submenu-button {
border-start-start-radius: 0;
border-end-start-radius: 0;
margin-inline-start: 1px;
padding: 8px;
min-width: 30px;
box-sizing: border-box;
background-image: url("chrome://global/skin/icons/arrow-down.svg");
background-repeat: no-repeat;
background-size: 16px;
background-position: center;
-moz-context-properties: fill;
fill: currentColor;
}
.onboardingContainer .noodle {
display: block;
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
transition: var(--transition);
}
.onboardingContainer .noodle:dir(rtl) {
scale: -1 1;
}
.onboardingContainer .outline-L {
background-image: url("chrome://activity-stream/content/data/content/assets/noodle-outline-L.svg");
}
.onboardingContainer .solid-L {
background-image: url("chrome://activity-stream/content/data/content/assets/noodle-solid-L.svg");
-moz-context-properties: fill;
fill: var(--in-content-page-background);
display: none;
}
.onboardingContainer .purple-C {
background-image: url("chrome://activity-stream/content/data/content/assets/noodle-C.svg");
-moz-context-properties: fill;
fill: #E7258C;
}
.onboardingContainer .orange-L {
background-image: url("chrome://activity-stream/content/data/content/assets/noodle-solid-L.svg");
-moz-context-properties: fill;
fill: #FFA437;
}
.onboardingContainer .screen-1 .section-main {
z-index: 1;
margin: auto;
}
.onboardingContainer .screen-1 .section-main.system-prompt-spotlight {
margin-top: 100px;
margin-inline: auto;
}
.onboardingContainer .screen-1 .outline-L {
width: 87px;
height: 80px;
transform: rotate(10deg) translate(-30%, 200%);
transition-delay: 0.4s;
z-index: 2;
}
.onboardingContainer .screen-1 .orange-L {
width: 550px;
height: 660px;
transform: rotate(-155deg) translate(11%, -18%);
transition-delay: 0.2s;
}
.onboardingContainer .screen-1 .purple-C {
width: 310px;
height: 260px;
transform: translate(-18%, -67%);
}
.onboardingContainer .screen-1 .yellow-circle {
width: 165px;
height: 165px;
border-radius: 50%;
transform: translate(230%, -5%);
background: #952BB9;
transition-delay: -0.2s;
}
.onboardingContainer .dialog-initial .brand-logo {
transition-delay: 0.6s;
}
.onboardingContainer .dialog-initial .welcome-text {
transition-delay: 0.8s;
}
.onboardingContainer .dialog-initial .tiles-single-select-section,
.onboardingContainer .dialog-initial .inline-image,
.onboardingContainer .dialog-initial .link-paragraph,
.onboardingContainer .dialog-initial .multi-select-container,
.onboardingContainer .dialog-initial migration-wizard {
transition-delay: 0.9s;
}
.onboardingContainer .dialog-initial .primary,
.onboardingContainer .dialog-initial .secondary,
.onboardingContainer .dialog-initial .secondary-cta,
.onboardingContainer .dialog-initial .steps,
.onboardingContainer .dialog-initial .cta-link,
.onboardingContainer .dialog-initial .legal-paragraph,
.onboardingContainer .dialog-initial .steps[above-button]:not(.progress-bar) {
transition-delay: 1s;
}
.onboardingContainer .screen:not(.dialog-initial) .tiles-single-select-section,
.onboardingContainer .screen:not(.dialog-initial) .inline-image,
.onboardingContainer .screen:not(.dialog-initial) .link-paragraph,
.onboardingContainer .screen:not(.dialog-initial) .multi-select-container {
transition-delay: 0.2s;
}
.onboardingContainer .screen:not(.dialog-initial) .primary,
.onboardingContainer .screen:not(.dialog-initial) .secondary,
.onboardingContainer .screen:not(.dialog-initial) .secondary-cta,
.onboardingContainer .screen:not(.dialog-initial) .cta-link,
.onboardingContainer .screen:not(.dialog-initial) .legal-paragraph,
.onboardingContainer .screen:not(.dialog-initial) .steps[above-button]:not(.progress-bar) {
transition-delay: 0.4s;
}
.onboardingContainer .screen-2 .section-main {
z-index: 1;
margin: auto;
}
.onboardingContainer .screen-2 .section-main.system-prompt-spotlight {
margin-top: 100px;
margin-inline: auto;
}
.onboardingContainer .screen-2 .outline-L {
width: 87px;
height: 80px;
transform: rotate(250deg) translate(-420%, 425%);
transition-delay: 0.2s;
z-index: 2;
}
.onboardingContainer .screen-2 .orange-L {
height: 800px;
width: 660px;
transform: rotate(35deg) translate(-10%, -7%);
transition-delay: -0.4s;
}
.onboardingContainer .screen-2 .purple-C {
width: 392px;
height: 394px;
transform: rotate(260deg) translate(-34%, -35%);
transition-delay: -0.2s;
fill: #952BB9;
}
.onboardingContainer .screen-2 .yellow-circle {
width: 165px;
height: 165px;
border-radius: 50%;
transform: translate(160%, 130%);
background: #E7258C;
}
.onboardingContainer.transition-in .noodle {
opacity: 0;
rotate: var(--rotate);
scale: var(--scale);
}
.onboardingContainer.transition-in .dialog-initial .main-content,
.onboardingContainer.transition-in .dialog-initial .dismiss-button {
translate: 0 calc(-2 * var(--translate));
}
.onboardingContainer.transition-in .dialog-initial .brand-logo,
.onboardingContainer.transition-in .dialog-initial .steps {
opacity: 0;
translate: 0 calc(-1 * var(--translate));
}
.onboardingContainer.transition-in .screen .welcome-text,
.onboardingContainer.transition-in .screen .multi-select-container,
.onboardingContainer.transition-in .screen .tiles-single-select-section,
.onboardingContainer.transition-in .screen .link-paragraph,
.onboardingContainer.transition-in .screen .inline-image,
.onboardingContainer.transition-in .screen .primary,
.onboardingContainer.transition-in .screen .checkbox-container:not(.multi-select-item),
.onboardingContainer.transition-in .screen .secondary,
.onboardingContainer.transition-in .screen .secondary-cta:not(.top),
.onboardingContainer.transition-in .screen .cta-link,
.onboardingContainer.transition-in .screen .legal-paragraph,
.onboardingContainer.transition-in .screen migration-wizard,
.onboardingContainer.transition-in .screen .steps[above-button]:not(.progress-bar) {
opacity: 0;
translate: 0 calc(-1 * var(--translate));
}
.onboardingContainer.transition-in .screen:not(.dialog-initial) .steps:not(.progress-bar, [above-button]) {
opacity: 0.2;
}
.onboardingContainer .system-prompt-spotlight .inline-icon-container {
display: flex;
}
.onboardingContainer .system-prompt-spotlight .welcome-text {
align-items: flex-start;
padding: 5px;
}
.onboardingContainer .system-prompt-spotlight .welcome-text h2 {
text-align: start;
margin: 0;
margin-block: 10px 15px;
}
.onboardingContainer .system-prompt-spotlight .brand-logo {
margin-block: 2px;
}
.onboardingContainer .system-prompt-spotlight .multi-select-container {
margin-inline-start: 23px;
margin-block-end: 17px;
}
.onboardingContainer .system-prompt-spotlight .additional-cta-container {
display: flex;
flex-direction: row-reverse;
padding-inline-end: 15px;
}
.onboardingContainer .system-prompt-spotlight .main-content.no-steps {
padding-bottom: 12px;
margin-inline: auto;
}
.onboardingContainer.transition-out .noodle {
opacity: 0;
rotate: var(--rotate);
scale: var(--scale);
transition-delay: 0.2s;
}
.onboardingContainer.transition-out .screen:not(.dialog-last) .main-content {
overflow: hidden;
}
.onboardingContainer.transition-out .screen:not(.dialog-last) .welcome-text,
.onboardingContainer.transition-out .screen:not(.dialog-last) .multi-select-container {
opacity: 0;
translate: 0 var(--translate);
transition-delay: 0.1s;
}
.onboardingContainer.transition-out .screen:not(.dialog-last) .tiles-single-select-section,
.onboardingContainer.transition-out .screen:not(.dialog-last) .inline-image,
.onboardingContainer.transition-out .screen:not(.dialog-last) .link-paragraph,
.onboardingContainer.transition-out .screen:not(.dialog-last) migration-wizard {
opacity: 0;
translate: 0 var(--translate);
transition-delay: 0.2s;
}
.onboardingContainer.transition-out .screen:not(.dialog-last) .primary,
.onboardingContainer.transition-out .screen:not(.dialog-last) .checkbox-container:not(.multi-select-item),
.onboardingContainer.transition-out .screen:not(.dialog-last) .secondary,
.onboardingContainer.transition-out .screen:not(.dialog-last) .secondary-cta:not(.top),
.onboardingContainer.transition-out .screen:not(.dialog-last) .cta-link,
.onboardingContainer.transition-out .screen:not(.dialog-last) .legal-paragraph,
.onboardingContainer.transition-out .screen:not(.dialog-last) .steps[above-button]:not(.progress-bar) {
opacity: 0;
translate: 0 var(--translate);
transition-delay: 0.3s;
}
.onboardingContainer.transition-out .screen:not(.dialog-last) .steps:not(.progress-bar, [above-button]) {
opacity: 0.2;
transition-delay: 0.5s;
}
.onboardingContainer.transition-out .dialog-last .noodle {
transition-delay: 0s;
}
.onboardingContainer.transition-out .dialog-last .main-content,
.onboardingContainer.transition-out .dialog-last .dismiss-button {
opacity: 0;
translate: 0 calc(2 * var(--translate));
transition-delay: 0.4s;
}
.onboardingContainer .inline-image,
.onboardingContainer .link-paragraph {
transition: var(--transition);
}
.onboardingContainer migration-wizard {
width: unset;
transition: var(--transition);
}
.onboardingContainer migration-wizard::part(buttons) {
margin-top: 24px;
justify-content: flex-start;
}
.onboardingContainer migration-wizard::part(deck) {
font-size: 0.83em;
}