@charset "UTF-8"; /** Mango Foundation */ /* The Light theme is the main Soundtrap theme */ /* Lifecycle status: production */ .st-light-theme, body { --font-family: "Matter", sans-serif; } .st-light-theme, body, .st-light-theme .st-base-set, body .st-base-set, .st-light-theme .mango-button.disabled, body .mango-button.disabled, .st-light-theme .disabled.mango-button-spotlight, body .disabled.mango-button-spotlight, .st-light-theme .disabled.mango-button-weak-XL, body .disabled.mango-button-weak-XL, .st-light-theme .disabled.mango-icon-button-emphasized-XL, body .disabled.mango-icon-button-emphasized-XL, .st-light-theme .disabled.mango-icon-button-weak-XL, body .disabled.mango-icon-button-weak-XL, .st-light-theme .disabled.mango-button-weak-L, body .disabled.mango-button-weak-L, .st-light-theme .disabled.mango-icon-button-emphasized-L, body .disabled.mango-icon-button-emphasized-L, .st-light-theme .disabled.mango-icon-button-weak-L, body .disabled.mango-icon-button-weak-L, .st-light-theme .disabled.mango-button-weak-M, body .disabled.mango-button-weak-M, .st-light-theme .disabled.mango-icon-button-emphasized-M, body .disabled.mango-icon-button-emphasized-M, .st-light-theme .disabled.mango-icon-button-weak-M, body .disabled.mango-icon-button-weak-M, .st-light-theme .disabled.mango-button-weak-S, body .disabled.mango-button-weak-S, .st-light-theme .disabled.mango-icon-button-emphasized-S, body .disabled.mango-icon-button-emphasized-S, .st-light-theme .disabled.mango-icon-button-weak-S, body .disabled.mango-icon-button-weak-S, .st-light-theme .disabled.mango-button-emphasised-XL, body .disabled.mango-button-emphasised-XL, .st-light-theme .disabled.mango-button-emphasised-L, body .disabled.mango-button-emphasised-L, .st-light-theme .disabled.mango-button-emphasised-M, body .disabled.mango-button-emphasised-M, .st-light-theme .disabled.mango-button-emphasised-S, body .disabled.mango-button-emphasised-S, .st-light-theme .disabled.mango-button-regular-XL, body .disabled.mango-button-regular-XL, .st-light-theme .disabled.mango-icon-button-regular-XL, body .disabled.mango-icon-button-regular-XL, .st-light-theme .disabled.mango-button-regular-L, body .disabled.mango-button-regular-L, .st-light-theme .disabled.mango-icon-button-regular-L, body .disabled.mango-icon-button-regular-L, .st-light-theme .disabled.mango-button-regular-M, body .disabled.mango-button-regular-M, .st-light-theme .disabled.mango-icon-button-regular-M, body .disabled.mango-icon-button-regular-M, .st-light-theme .disabled.mango-button-regular-S, body .disabled.mango-button-regular-S, .st-light-theme .disabled.mango-icon-button-regular-S, body .disabled.mango-icon-button-regular-S, .st-light-theme .disabled.mango-button-special-S, body .disabled.mango-button-special-S, .st-light-theme .disabled.mango-icon-button-special-S, body .disabled.mango-icon-button-special-S, .st-light-theme .disabled.mango-button-negative-S, body .disabled.mango-button-negative-S, .st-light-theme .disabled.mango-button-spotlight-S, body .disabled.mango-button-spotlight-S, .st-light-theme .disabled.mango-button-special-M, body .disabled.mango-button-special-M, .st-light-theme .disabled.mango-icon-button-special-M, body .disabled.mango-icon-button-special-M, .st-light-theme .disabled.mango-button-negative-M, body .disabled.mango-button-negative-M, .st-light-theme .disabled.mango-button-spotlight-M, body .disabled.mango-button-spotlight-M, .st-light-theme .disabled.mango-button-special-L, body .disabled.mango-button-special-L, .st-light-theme .disabled.mango-icon-button-special-L, body .disabled.mango-icon-button-special-L, .st-light-theme .disabled.mango-button-negative-L, body .disabled.mango-button-negative-L, .st-light-theme .disabled.mango-button-spotlight-L, body .disabled.mango-button-spotlight-L, .st-light-theme .disabled.mango-button-special-XL, body .disabled.mango-button-special-XL, .st-light-theme .disabled.mango-icon-button-special-XL, body .disabled.mango-icon-button-special-XL, .st-light-theme .disabled.mango-button-negative-XL, body .disabled.mango-button-negative-XL, .st-light-theme .disabled.mango-button-spotlight-XL, body .disabled.mango-button-spotlight-XL, .st-light-theme .disabled.mango-button-weak, body .disabled.mango-button-weak, .st-light-theme .disabled.mango-button-regular, body .disabled.mango-button-regular, .st-light-theme .disabled.mango-button-special, body .disabled.mango-button-special, .st-light-theme .mango-button[disabled], body .mango-button[disabled], .st-light-theme [disabled].mango-button-spotlight, body [disabled].mango-button-spotlight, .st-light-theme [disabled].mango-button-weak-XL, body [disabled].mango-button-weak-XL, .st-light-theme [disabled].mango-icon-button-emphasized-XL, body [disabled].mango-icon-button-emphasized-XL, .st-light-theme [disabled].mango-icon-button-weak-XL, body [disabled].mango-icon-button-weak-XL, .st-light-theme [disabled].mango-button-weak-L, body [disabled].mango-button-weak-L, .st-light-theme [disabled].mango-icon-button-emphasized-L, body [disabled].mango-icon-button-emphasized-L, .st-light-theme [disabled].mango-icon-button-weak-L, body [disabled].mango-icon-button-weak-L, .st-light-theme [disabled].mango-button-weak-M, body [disabled].mango-button-weak-M, .st-light-theme [disabled].mango-icon-button-emphasized-M, body [disabled].mango-icon-button-emphasized-M, .st-light-theme [disabled].mango-icon-button-weak-M, body [disabled].mango-icon-button-weak-M, .st-light-theme [disabled].mango-button-weak-S, body [disabled].mango-button-weak-S, .st-light-theme [disabled].mango-icon-button-emphasized-S, body [disabled].mango-icon-button-emphasized-S, .st-light-theme [disabled].mango-icon-button-weak-S, body [disabled].mango-icon-button-weak-S, .st-light-theme [disabled].mango-button-emphasised-XL, body [disabled].mango-button-emphasised-XL, .st-light-theme [disabled].mango-button-emphasised-L, body [disabled].mango-button-emphasised-L, .st-light-theme [disabled].mango-button-emphasised-M, body [disabled].mango-button-emphasised-M, .st-light-theme [disabled].mango-button-emphasised-S, body [disabled].mango-button-emphasised-S, .st-light-theme [disabled].mango-button-regular-XL, body [disabled].mango-button-regular-XL, .st-light-theme [disabled].mango-icon-button-regular-XL, body [disabled].mango-icon-button-regular-XL, .st-light-theme [disabled].mango-button-regular-L, body [disabled].mango-button-regular-L, .st-light-theme [disabled].mango-icon-button-regular-L, body [disabled].mango-icon-button-regular-L, .st-light-theme [disabled].mango-button-regular-M, body [disabled].mango-button-regular-M, .st-light-theme [disabled].mango-icon-button-regular-M, body [disabled].mango-icon-button-regular-M, .st-light-theme [disabled].mango-button-regular-S, body [disabled].mango-button-regular-S, .st-light-theme [disabled].mango-icon-button-regular-S, body [disabled].mango-icon-button-regular-S, .st-light-theme [disabled].mango-button-special-S, body [disabled].mango-button-special-S, .st-light-theme [disabled].mango-icon-button-special-S, body [disabled].mango-icon-button-special-S, .st-light-theme [disabled].mango-button-negative-S, body [disabled].mango-button-negative-S, .st-light-theme [disabled].mango-button-spotlight-S, body [disabled].mango-button-spotlight-S, .st-light-theme [disabled].mango-button-special-M, body [disabled].mango-button-special-M, .st-light-theme [disabled].mango-icon-button-special-M, body [disabled].mango-icon-button-special-M, .st-light-theme [disabled].mango-button-negative-M, body [disabled].mango-button-negative-M, .st-light-theme [disabled].mango-button-spotlight-M, body [disabled].mango-button-spotlight-M, .st-light-theme [disabled].mango-button-special-L, body [disabled].mango-button-special-L, .st-light-theme [disabled].mango-icon-button-special-L, body [disabled].mango-icon-button-special-L, .st-light-theme [disabled].mango-button-negative-L, body [disabled].mango-button-negative-L, .st-light-theme [disabled].mango-button-spotlight-L, body [disabled].mango-button-spotlight-L, .st-light-theme [disabled].mango-button-special-XL, body [disabled].mango-button-special-XL, .st-light-theme [disabled].mango-icon-button-special-XL, body [disabled].mango-icon-button-special-XL, .st-light-theme [disabled].mango-button-negative-XL, body [disabled].mango-button-negative-XL, .st-light-theme [disabled].mango-button-spotlight-XL, body [disabled].mango-button-spotlight-XL, .st-light-theme [disabled].mango-button-weak, body [disabled].mango-button-weak, .st-light-theme [disabled].mango-button-regular, body [disabled].mango-button-regular, .st-light-theme [disabled].mango-button-special, body [disabled].mango-button-special { --background-base: #ffffff; /* The default background color of the base set. */ --background-highlight: #f6f6f6; /* A background color that indicates the hover state of a component. */ --background-press: #b7b7b7; /* A background color that indicates the press state of a component. */ --background-elevated-base: #ffffff; /* The default background color for elevated elements in the base set. */ --background-elevated-highlight: #f6f6f6; /* For hover states of elevated elements */ --background-elevated-press: #b7b7b7; /* For pressed states of elevated elements */ --background-tinted-base: rgba(0, 0, 0, 0.1); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(0, 0, 0, 0.07); /* For hover states of tinted elements */ --background-tinted-press: rgba(0, 0, 0, 0.15); /* For pressed states of tinted elements */ --text-base: #2d2d2d; /* The default text and icon color of the base set. */ --text-subdued: #606060; /* For text and icons that are less prominent. */ --text-primary: #430877; /* A bright text and icon color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */ --text-spotlight: #a94c00; /* A text and icon color associated with subscriptions and purchasing. */ --text-negative: #b4074b; /* A text and icon color associated with negativity. Often used for errors, destructive actions, or to highlight negative metrics or data. */ --text-positive: #00773c; /* A text and icon color associated with positivity. Often used for success states, or to highlight positive metrics or data. */ --essential-base: #2d2d2d; /* The default essential color of the base set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #848484; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-primary: #430877; /* A bright essential color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */ --essential-spotlight: #d76100; /* An essential color associated with with subscriptions and purchasing. */ --essential-negative: #b4074b; /* An essential color associated with negativity. Often used for errors, destructive actions, or to highlight negative metrics or data. */ --essential-positive: #008744; /* An essential color associated with positivity. Often used for success states, or to highlight positive metrics or data. */ --decorative-base: #2d2d2d; /* The default decorative color of the base set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #dedede; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-light-theme .st-secondary-base-set, body .st-secondary-base-set, .st-light-theme .basicdialog, body .basicdialog { --background-base: #f8f8f8; /* The default background color of the secondaryBase set. */ --background-highlight: #efefef; /* A background color that indicates the hover state of a component. */ --background-press: #b2b2b2; /* A background color that indicates the press state of a component. */ --background-elevated-base: #fdfdfd; /* The default background color for elevated elements in the secondaryBase set. */ --background-elevated-highlight: #f4f4f4; /* For hover states of elevated elements */ --background-elevated-press: #b6b6b6; /* For pressed states of elevated elements */ --background-tinted-base: rgba(0, 0, 0, 0.1); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(0, 0, 0, 0.07); /* For hover states of tinted elements */ --background-tinted-press: rgba(0, 0, 0, 0.15); /* For pressed states of tinted elements */ --text-base: #2d2d2d; /* The default text and icon color of the secondaryBase set. */ --text-subdued: #5c5c5c; /* For text and icons that are less prominent. */ --text-primary: #430877; /* A bright text and icon color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */ --text-spotlight: #a34900; /* A text and icon color associated with subscriptions and purchasing. */ --text-negative: #b4074b; /* A text and icon color associated with negativity. Often used for errors, destructive actions, or to highlight negative metrics or data. */ --text-positive: #00733a; /* A text and icon color associated with positivity. Often used for success states, or to highlight positive metrics or data. */ --essential-base: #2d2d2d; /* The default essential color of the secondaryBase set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #7f7f7f; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-primary: #430877; /* A bright essential color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */ --essential-spotlight: #d05d00; /* An essential color associated with with subscriptions and purchasing. */ --essential-negative: #b4074b; /* An essential color associated with negativity. Often used for errors, destructive actions, or to highlight negative metrics or data. */ --essential-positive: #008744; /* An essential color associated with positivity. Often used for success states, or to highlight positive metrics or data. */ --decorative-base: #2d2d2d; /* The default decorative color of the secondaryBase set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #d8d8d8; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-light-theme .st-primary-set, body .st-primary-set, .st-light-theme .mango-button-special-S, body .mango-button-special-S, .st-light-theme .mango-icon-button-special-S, body .mango-icon-button-special-S, .st-light-theme .mango-button-negative-S, body .mango-button-negative-S, .st-light-theme .mango-button-spotlight-S, body .mango-button-spotlight-S, .st-light-theme .mango-button-special-M, body .mango-button-special-M, .st-light-theme .mango-icon-button-special-M, body .mango-icon-button-special-M, .st-light-theme .mango-button-negative-M, body .mango-button-negative-M, .st-light-theme .mango-button-spotlight-M, body .mango-button-spotlight-M, .st-light-theme .mango-button-special-L, body .mango-button-special-L, .st-light-theme .mango-icon-button-special-L, body .mango-icon-button-special-L, .st-light-theme .mango-button-negative-L, body .mango-button-negative-L, .st-light-theme .mango-button-spotlight-L, body .mango-button-spotlight-L, .st-light-theme .mango-button-special-XL, body .mango-button-special-XL, .st-light-theme .mango-icon-button-special-XL, body .mango-icon-button-special-XL, .st-light-theme .mango-button-negative-XL, body .mango-button-negative-XL, .st-light-theme .mango-button-spotlight-XL, body .mango-button-spotlight-XL { --background-base: #430877; /* The default background color of the primary set. */ --background-highlight: #360661; /* A background color that indicates the hover state of a component. */ --background-press: #280547; /* A background color that indicates the press state of a component. */ --background-elevated-base: #430877; /* fallback */ --background-elevated-highlight: #430877; /* fallback */ --background-elevated-press: #430877; /* fallback */ --background-tinted-base: #430877; /* fallback */ --background-tinted-highlight: #430877; /* fallback */ --background-tinted-press: #430877; /* fallback */ --text-base: #ffffff; /* The default text and icon color of the primary set. */ --text-subdued: #ffffff; /* fallback */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the primary set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #ffffff; /* fallback */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the primary set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #5b0ba1; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-light-theme .st-spotlight-set, body .st-spotlight-set, .st-light-theme .mango-button-spotlight-XL, body .mango-button-spotlight-XL, .st-light-theme .mango-button-spotlight-L, body .mango-button-spotlight-L, .st-light-theme .mango-button-spotlight-M, body .mango-button-spotlight-M, .st-light-theme .mango-button-spotlight-S, body .mango-button-spotlight-S, .st-light-theme .mango-button-spotlight, body .mango-button-spotlight { --background-base: #ff780a; /* The default background color of the spotlight set. */ --background-highlight: #ff8b2d; /* A background color that indicates the hover state of a component. */ --background-press: #f36d00; /* A background color that indicates the press state of a component. */ --background-elevated-base: #ff780a; /* fallback */ --background-elevated-highlight: #ff780a; /* fallback */ --background-elevated-press: #ff780a; /* fallback */ --background-tinted-base: #ff780a; /* fallback */ --background-tinted-highlight: #ff780a; /* fallback */ --background-tinted-press: #ff780a; /* fallback */ --text-base: #000000; /* The default text and icon color of the spotlight set. */ --text-subdued: #000000; /* fallback */ --text-primary: #000000; /* fallback */ --text-negative: #000000; /* fallback */ --text-spotlight: #000000; /* fallback */ --text-positive: #000000; /* fallback */ --essential-base: #000000; /* The default essential color of the spotlight set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #000000; /* fallback */ --essential-primary: #000000; /* fallback */ --essential-negative: #000000; /* fallback */ --essential-spotlight: #000000; /* fallback */ --essential-positive: #000000; /* fallback */ --decorative-base: #000000; /* The default decorative color of the spotlight set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #e26500; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-light-theme .st-negative-set, body .st-negative-set, .st-light-theme .mango-button-negative-XL, body .mango-button-negative-XL, .st-light-theme .mango-button-negative-L, body .mango-button-negative-L, .st-light-theme .mango-button-negative-M, body .mango-button-negative-M, .st-light-theme .mango-button-negative-S, body .mango-button-negative-S { --background-base: #b4074b; /* The default background color of the negative set. */ --background-highlight: #a50645; /* A background color that indicates the hover state of a component. */ --background-press: #96063f; /* A background color that indicates the press state of a component. */ --background-elevated-base: #b4074b; /* fallback */ --background-elevated-highlight: #b4074b; /* fallback */ --background-elevated-press: #b4074b; /* fallback */ --background-tinted-base: #b4074b; /* fallback */ --background-tinted-highlight: #b4074b; /* fallback */ --background-tinted-press: #b4074b; /* fallback */ --text-base: #ffffff; /* The default text and icon color of the negative set. */ --text-subdued: #ffffff; /* fallback */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the negative set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #ffffff; /* fallback */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the negative set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #d60859; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-light-theme .st-positive-set, body .st-positive-set { --background-base: #008744; /* The default background color of the positive set. */ --background-highlight: #007d3f; /* A background color that indicates the hover state of a component. */ --background-press: #00743a; /* A background color that indicates the press state of a component. */ --background-elevated-base: #008744; /* fallback */ --background-elevated-highlight: #008744; /* fallback */ --background-elevated-press: #008744; /* fallback */ --background-tinted-base: #008744; /* fallback */ --background-tinted-highlight: #008744; /* fallback */ --background-tinted-press: #008744; /* fallback */ --text-base: #ffffff; /* The default text and icon color of the positive set. */ --text-subdued: #ffffff; /* fallback */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the positive set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #ffffff; /* fallback */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the positive set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #009b4e; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-light-theme .st-contrasting-base-set, body .st-contrasting-base-set { --background-base: #290247; /* The default background color of the contrastingBase set. */ --background-highlight: #380361; /* A background color that indicates the hover state of a component. */ --background-press: #130120; /* A background color that indicates the press state of a component. */ --background-elevated-base: #3e036c; /* The default background color for elevated elements in the contrastingBase set. */ --background-elevated-highlight: #4b0481; /* For hover states of elevated elements */ --background-elevated-press: #310255; /* For pressed states of elevated elements */ --background-tinted-base: rgba(255, 255, 255, 0.06); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(255, 255, 255, 0.12); /* For hover states of tinted elements */ --background-tinted-press: rgba(255, 255, 255, 0.03); /* For pressed states of tinted elements */ --text-base: #ffffff; /* The default text and icon color of the contrastingBase set. */ --text-subdued: #c884fc; /* For text and icons that are less prominent. */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the contrastingBase set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #aa43fa; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the contrastingBase set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #3f036d; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-light-theme .st-inverted-primary-set, body .st-inverted-primary-set { --background-base: #ffffff; /* The default background color of the invertedPrimary set. */ --background-highlight: #f1f1f1; /* A background color that indicates the hover state of a component. */ --background-press: #e3e3e3; /* A background color that indicates the press state of a component. */ --background-elevated-base: #ffffff; /* fallback */ --background-elevated-highlight: #ffffff; /* fallback */ --background-elevated-press: #ffffff; /* fallback */ --background-tinted-base: #ffffff; /* fallback */ --background-tinted-highlight: #ffffff; /* fallback */ --background-tinted-press: #ffffff; /* fallback */ --text-base: #430877; /* The default text and icon color of the invertedPrimary set. */ --text-subdued: #9024f0; /* For text and icons that are less prominent. */ --text-primary: #430877; /* fallback */ --text-negative: #430877; /* fallback */ --text-spotlight: #430877; /* fallback */ --text-positive: #430877; /* fallback */ --essential-base: #430877; /* The default essential color of the invertedPrimary set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #b267f5; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-primary: #430877; /* fallback */ --essential-negative: #430877; /* fallback */ --essential-spotlight: #430877; /* fallback */ --essential-positive: #430877; /* fallback */ --decorative-base: #430877; /* The default decorative color of the invertedPrimary set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #dedede; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-light-theme .st-inverted-set, body .st-inverted-set { --background-base: #1e1e1e; /* The default background color of the inverted set. */ --background-highlight: #282828; /* A background color that indicates the hover state of a component. */ --background-press: #313131; /* A background color that indicates the press state of a component. */ --background-elevated-base: #2c2c2c; /* The default background color for elevated elements in the inverted set. */ --background-elevated-highlight: #353535; /* For hover states of elevated elements */ --background-elevated-press: #232323; /* For pressed states of elevated elements */ --background-tinted-base: rgba(255, 255, 255, 0.04); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(255, 255, 255, 0.08); /* For hover states of tinted elements */ --background-tinted-press: rgba(255, 255, 255, 0.02); /* For pressed states of tinted elements */ --text-base: #ffffff; /* The default text and icon color of the inverted set. */ --text-subdued: #a5a5a5; /* For text and icons that are less prominent. */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the inverted set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #7e7e7e; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the inverted set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #343434; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-light-theme .st-simply-red-set, body .st-simply-red-set { --background-base: #bb142c; /* The default background color of the simplyRed set. */ --background-highlight: #b1132a; /* A background color that indicates the hover state of a component. */ --background-press: #660b18; /* A background color that indicates the press state of a component. */ --background-elevated-base: #d21631; /* The default background color for elevated elements in the simplyRed set. */ --background-elevated-highlight: #dc1834; /* For hover states of elevated elements */ --background-elevated-press: #860e20; /* For pressed states of elevated elements */ --background-tinted-base: rgba(255, 255, 255, 0.12); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(255, 255, 255, 0.18); /* For hover states of tinted elements */ --background-tinted-press: rgba(255, 255, 255, 0.06); /* For pressed states of tinted elements */ --text-base: #ffffff; /* The default text and icon color of the simplyRed set. */ --text-subdued: #ffffff; /* fallback */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the simplyRed set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #ffffff; /* fallback */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the simplyRed set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #dc1834; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-light-theme .st-maroon-set, body .st-maroon-set { --background-base: #ad236d; /* The default background color of the maroon set. */ --background-highlight: #a42167; /* A background color that indicates the hover state of a component. */ --background-press: #5d133b; /* A background color that indicates the press state of a component. */ --background-elevated-base: #c3277b; /* The default background color for elevated elements in the maroon set. */ --background-elevated-highlight: #cc2981; /* For hover states of elevated elements */ --background-elevated-press: #7b194e; /* For pressed states of elevated elements */ --background-tinted-base: rgba(255, 255, 255, 0.13); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(255, 255, 255, 0.18); /* For hover states of tinted elements */ --background-tinted-press: rgba(255, 255, 255, 0.06); /* For pressed states of tinted elements */ --text-base: #ffffff; /* The default text and icon color of the maroon set. */ --text-subdued: #ffffff; /* fallback */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the maroon set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #ffffff; /* fallback */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the maroon set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #cc2981; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-light-theme .st-iron-wine-set, body .st-iron-wine-set { --background-base: #903c93; /* The default background color of the ironWine set. */ --background-highlight: #88398b; /* A background color that indicates the hover state of a component. */ --background-press: #4c204e; /* A background color that indicates the press state of a component. */ --background-elevated-base: #a244a6; /* The default background color for elevated elements in the ironWine set. */ --background-elevated-highlight: #ab47ae; /* For hover states of elevated elements */ --background-elevated-press: #662b69; /* For pressed states of elevated elements */ --background-tinted-base: rgba(255, 255, 255, 0.13); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(255, 255, 255, 0.18); /* For hover states of tinted elements */ --background-tinted-press: rgba(255, 255, 255, 0.06); /* For pressed states of tinted elements */ --text-base: #ffffff; /* The default text and icon color of the ironWine set. */ --text-primary: #ffb7b9; /* A bright text and icon color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */ --text-subdued: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the ironWine set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-primary: #ffb7b9; /* A bright essential color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */ --essential-subdued: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the ironWine set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #aa47ae; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-light-theme .st-purple-rain-set, body .st-purple-rain-set { --background-base: #8411e9; /* The default background color of the purpleRain set. */ --background-highlight: #7d10dd; /* A background color that indicates the hover state of a component. */ --background-press: #48097f; /* A background color that indicates the press state of a component. */ --background-elevated-base: #952df0; /* The default background color for elevated elements in the purpleRain set. */ --background-elevated-highlight: #9a38f1; /* For hover states of elevated elements */ --background-elevated-press: #5f0ca8; /* For pressed states of elevated elements */ --background-tinted-base: rgba(255, 255, 255, 0.18); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(255, 255, 255, 0.23); /* For hover states of tinted elements */ --background-tinted-press: rgba(255, 255, 255, 0.12); /* For pressed states of tinted elements */ --text-base: #ffffff; /* The default text and icon color of the purpleRain set. */ --text-subdued: #ffffff; /* fallback */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the purpleRain set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #ffffff; /* fallback */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the purpleRain set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #9b39f1; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-light-theme .st-royal-blue-set, body .st-royal-blue-set { --background-base: #284ae8; /* The default background color of the royalBlue set. */ --background-highlight: #1f42e7; /* A background color that indicates the hover state of a component. */ --background-press: #0e2487; /* A background color that indicates the press state of a component. */ --background-elevated-base: #3d5bea; /* The default background color for elevated elements in the royalBlue set. */ --background-elevated-highlight: #4563eb; /* For hover states of elevated elements */ --background-elevated-press: #1330b4; /* For pressed states of elevated elements */ --background-tinted-base: rgba(255, 255, 255, 0.1); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(255, 255, 255, 0.14); /* For hover states of tinted elements */ --background-tinted-press: rgba(255, 255, 255, 0.05); /* For pressed states of tinted elements */ --text-base: #ffffff; /* The default text and icon color of the royalBlue set. */ --text-subdued: #ffffff; /* fallback */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the royalBlue set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #ffffff; /* fallback */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the royalBlue set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #4361eb; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-light-theme .st-ocean-eyes-set, body .st-ocean-eyes-set { --background-base: #006878; /* The default background color of the oceanEyes set. */ --background-highlight: #006272; /* A background color that indicates the hover state of a component. */ --background-press: #003740; /* A background color that indicates the press state of a component. */ --background-elevated-base: #007587; /* The default background color for elevated elements in the oceanEyes set. */ --background-elevated-highlight: #007b8e; /* For hover states of elevated elements */ --background-elevated-press: #004a55; /* For pressed states of elevated elements */ --background-tinted-base: rgba(255, 255, 255, 0.07); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(255, 255, 255, 0.1); /* For hover states of tinted elements */ --background-tinted-press: rgba(255, 255, 255, 0.03); /* For pressed states of tinted elements */ --text-base: #ffffff; /* The default text and icon color of the oceanEyes set. */ --text-subdued: #ffffff; /* fallback */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the oceanEyes set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #ffffff; /* fallback */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the oceanEyes set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #007c8f; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-light-theme .st-forest-set, body .st-forest-set { --background-base: #006b56; /* The default background color of the forest set. */ --background-highlight: #006551; /* A background color that indicates the hover state of a component. */ --background-press: #00392e; /* A background color that indicates the press state of a component. */ --background-elevated-base: #007961; /* The default background color for elevated elements in the forest set. */ --background-elevated-highlight: #007f66; /* For hover states of elevated elements */ --background-elevated-press: #004c3d; /* For pressed states of elevated elements */ --background-tinted-base: rgba(255, 255, 255, 0.05); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(255, 255, 255, 0.08); /* For hover states of tinted elements */ --background-tinted-press: rgba(255, 255, 255, 0.02); /* For pressed states of tinted elements */ --text-base: #ffffff; /* The default text and icon color of the forest set. */ --text-subdued: #ffffff; /* fallback */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the forest set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #ffffff; /* fallback */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the forest set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #007f66; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-light-theme .st-green-light-set, body .st-green-light-set { --background-base: #146c32; /* The default background color of the greenLight set. */ --background-highlight: #13662f; /* A background color that indicates the hover state of a component. */ --background-press: #0b391a; /* A background color that indicates the press state of a component. */ --background-elevated-base: #177a38; /* The default background color for elevated elements in the greenLight set. */ --background-elevated-highlight: #18803b; /* For hover states of elevated elements */ --background-elevated-press: #0e4c23; /* For pressed states of elevated elements */ --background-tinted-base: rgba(255, 255, 255, 0.05); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(255, 255, 255, 0.07); /* For hover states of tinted elements */ --background-tinted-press: rgba(255, 255, 255, 0.02); /* For pressed states of tinted elements */ --text-base: #ffffff; /* The default text and icon color of the greenLight set. */ --text-subdued: #ffffff; /* fallback */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the greenLight set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #ffffff; /* fallback */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the greenLight set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #18803b; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-light-theme .st-gold-frapp-set, body .st-gold-frapp-set { --background-base: #855311; /* The default background color of the goldFrapp set. */ --background-highlight: #7e4f10; /* A background color that indicates the hover state of a component. */ --background-press: #462c09; /* A background color that indicates the press state of a component. */ --background-elevated-base: #965e13; /* The default background color for elevated elements in the goldFrapp set. */ --background-elevated-highlight: #9e6214; /* For hover states of elevated elements */ --background-elevated-press: #5e3b0c; /* For pressed states of elevated elements */ --background-tinted-base: rgba(255, 255, 255, 0.07); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(255, 255, 255, 0.1); /* For hover states of tinted elements */ --background-tinted-press: rgba(255, 255, 255, 0.03); /* For pressed states of tinted elements */ --text-base: #ffffff; /* The default text and icon color of the goldFrapp set. */ --text-subdued: #ffffff; /* fallback */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the goldFrapp set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #ffffff; /* fallback */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the goldFrapp set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #9e6314; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-light-theme .st-orange-soda-set, body .st-orange-soda-set { --background-base: #9d4226; /* The default background color of the orangeSoda set. */ --background-highlight: #953e24; /* A background color that indicates the hover state of a component. */ --background-press: #532314; /* A background color that indicates the press state of a component. */ --background-elevated-base: #b14a2b; /* The default background color for elevated elements in the orangeSoda set. */ --background-elevated-highlight: #ba4e2d; /* For hover states of elevated elements */ --background-elevated-press: #6f2f1b; /* For pressed states of elevated elements */ --background-tinted-base: rgba(255, 255, 255, 0.09); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(255, 255, 255, 0.13); /* For hover states of tinted elements */ --background-tinted-press: rgba(255, 255, 255, 0.04); /* For pressed states of tinted elements */ --text-base: #ffffff; /* The default text and icon color of the orangeSoda set. */ --text-subdued: #ffffff; /* fallback */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the orangeSoda set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #ffffff; /* fallback */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the orangeSoda set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #ba4e2d; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } @media (prefers-color-scheme: light) { .st-auto-theme, .st-auto-theme .st-base-set, .st-auto-theme .mango-button.disabled, .st-auto-theme .disabled.mango-button-spotlight, .st-auto-theme .disabled.mango-button-weak-XL, .st-auto-theme .disabled.mango-icon-button-emphasized-XL, .st-auto-theme .disabled.mango-icon-button-weak-XL, .st-auto-theme .disabled.mango-button-weak-L, .st-auto-theme .disabled.mango-icon-button-emphasized-L, .st-auto-theme .disabled.mango-icon-button-weak-L, .st-auto-theme .disabled.mango-button-weak-M, .st-auto-theme .disabled.mango-icon-button-emphasized-M, .st-auto-theme .disabled.mango-icon-button-weak-M, .st-auto-theme .disabled.mango-button-weak-S, .st-auto-theme .disabled.mango-icon-button-emphasized-S, .st-auto-theme .disabled.mango-icon-button-weak-S, .st-auto-theme .disabled.mango-button-emphasised-XL, .st-auto-theme .disabled.mango-button-emphasised-L, .st-auto-theme .disabled.mango-button-emphasised-M, .st-auto-theme .disabled.mango-button-emphasised-S, .st-auto-theme .disabled.mango-button-regular-XL, .st-auto-theme .disabled.mango-icon-button-regular-XL, .st-auto-theme .disabled.mango-button-regular-L, .st-auto-theme .disabled.mango-icon-button-regular-L, .st-auto-theme .disabled.mango-button-regular-M, .st-auto-theme .disabled.mango-icon-button-regular-M, .st-auto-theme .disabled.mango-button-regular-S, .st-auto-theme .disabled.mango-icon-button-regular-S, .st-auto-theme .disabled.mango-button-special-S, .st-auto-theme .disabled.mango-icon-button-special-S, .st-auto-theme .disabled.mango-button-negative-S, .st-auto-theme .disabled.mango-button-spotlight-S, .st-auto-theme .disabled.mango-button-special-M, .st-auto-theme .disabled.mango-icon-button-special-M, .st-auto-theme .disabled.mango-button-negative-M, .st-auto-theme .disabled.mango-button-spotlight-M, .st-auto-theme .disabled.mango-button-special-L, .st-auto-theme .disabled.mango-icon-button-special-L, .st-auto-theme .disabled.mango-button-negative-L, .st-auto-theme .disabled.mango-button-spotlight-L, .st-auto-theme .disabled.mango-button-special-XL, .st-auto-theme .disabled.mango-icon-button-special-XL, .st-auto-theme .disabled.mango-button-negative-XL, .st-auto-theme .disabled.mango-button-spotlight-XL, .st-auto-theme .disabled.mango-button-weak, .st-auto-theme .disabled.mango-button-regular, .st-auto-theme .disabled.mango-button-special, .st-auto-theme .mango-button[disabled], .st-auto-theme [disabled].mango-button-spotlight, .st-auto-theme [disabled].mango-button-weak-XL, .st-auto-theme [disabled].mango-icon-button-emphasized-XL, .st-auto-theme [disabled].mango-icon-button-weak-XL, .st-auto-theme [disabled].mango-button-weak-L, .st-auto-theme [disabled].mango-icon-button-emphasized-L, .st-auto-theme [disabled].mango-icon-button-weak-L, .st-auto-theme [disabled].mango-button-weak-M, .st-auto-theme [disabled].mango-icon-button-emphasized-M, .st-auto-theme [disabled].mango-icon-button-weak-M, .st-auto-theme [disabled].mango-button-weak-S, .st-auto-theme [disabled].mango-icon-button-emphasized-S, .st-auto-theme [disabled].mango-icon-button-weak-S, .st-auto-theme [disabled].mango-button-emphasised-XL, .st-auto-theme [disabled].mango-button-emphasised-L, .st-auto-theme [disabled].mango-button-emphasised-M, .st-auto-theme [disabled].mango-button-emphasised-S, .st-auto-theme [disabled].mango-button-regular-XL, .st-auto-theme [disabled].mango-icon-button-regular-XL, .st-auto-theme [disabled].mango-button-regular-L, .st-auto-theme [disabled].mango-icon-button-regular-L, .st-auto-theme [disabled].mango-button-regular-M, .st-auto-theme [disabled].mango-icon-button-regular-M, .st-auto-theme [disabled].mango-button-regular-S, .st-auto-theme [disabled].mango-icon-button-regular-S, .st-auto-theme [disabled].mango-button-special-S, .st-auto-theme [disabled].mango-icon-button-special-S, .st-auto-theme [disabled].mango-button-negative-S, .st-auto-theme [disabled].mango-button-spotlight-S, .st-auto-theme [disabled].mango-button-special-M, .st-auto-theme [disabled].mango-icon-button-special-M, .st-auto-theme [disabled].mango-button-negative-M, .st-auto-theme [disabled].mango-button-spotlight-M, .st-auto-theme [disabled].mango-button-special-L, .st-auto-theme [disabled].mango-icon-button-special-L, .st-auto-theme [disabled].mango-button-negative-L, .st-auto-theme [disabled].mango-button-spotlight-L, .st-auto-theme [disabled].mango-button-special-XL, .st-auto-theme [disabled].mango-icon-button-special-XL, .st-auto-theme [disabled].mango-button-negative-XL, .st-auto-theme [disabled].mango-button-spotlight-XL, .st-auto-theme [disabled].mango-button-weak, .st-auto-theme [disabled].mango-button-regular, .st-auto-theme [disabled].mango-button-special { --background-base: #ffffff; /* The default background color of the base set. */ --background-highlight: #f6f6f6; /* A background color that indicates the hover state of a component. */ --background-press: #b7b7b7; /* A background color that indicates the press state of a component. */ --background-elevated-base: #ffffff; /* The default background color for elevated elements in the base set. */ --background-elevated-highlight: #f6f6f6; /* For hover states of elevated elements */ --background-elevated-press: #b7b7b7; /* For pressed states of elevated elements */ --background-tinted-base: rgba(0, 0, 0, 0.1); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(0, 0, 0, 0.07); /* For hover states of tinted elements */ --background-tinted-press: rgba(0, 0, 0, 0.15); /* For pressed states of tinted elements */ --text-base: #2d2d2d; /* The default text and icon color of the base set. */ --text-subdued: #606060; /* For text and icons that are less prominent. */ --text-primary: #430877; /* A bright text and icon color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */ --text-spotlight: #a94c00; /* A text and icon color associated with subscriptions and purchasing. */ --text-negative: #b4074b; /* A text and icon color associated with negativity. Often used for errors, destructive actions, or to highlight negative metrics or data. */ --text-positive: #00773c; /* A text and icon color associated with positivity. Often used for success states, or to highlight positive metrics or data. */ --essential-base: #2d2d2d; /* The default essential color of the base set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #848484; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-primary: #430877; /* A bright essential color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */ --essential-spotlight: #d76100; /* An essential color associated with with subscriptions and purchasing. */ --essential-negative: #b4074b; /* An essential color associated with negativity. Often used for errors, destructive actions, or to highlight negative metrics or data. */ --essential-positive: #008744; /* An essential color associated with positivity. Often used for success states, or to highlight positive metrics or data. */ --decorative-base: #2d2d2d; /* The default decorative color of the base set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #dedede; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-auto-theme .st-secondary-base-set, .st-auto-theme .basicdialog { --background-base: #f8f8f8; /* The default background color of the secondaryBase set. */ --background-highlight: #efefef; /* A background color that indicates the hover state of a component. */ --background-press: #b2b2b2; /* A background color that indicates the press state of a component. */ --background-elevated-base: #fdfdfd; /* The default background color for elevated elements in the secondaryBase set. */ --background-elevated-highlight: #f4f4f4; /* For hover states of elevated elements */ --background-elevated-press: #b6b6b6; /* For pressed states of elevated elements */ --background-tinted-base: rgba(0, 0, 0, 0.1); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(0, 0, 0, 0.07); /* For hover states of tinted elements */ --background-tinted-press: rgba(0, 0, 0, 0.15); /* For pressed states of tinted elements */ --text-base: #2d2d2d; /* The default text and icon color of the secondaryBase set. */ --text-subdued: #5c5c5c; /* For text and icons that are less prominent. */ --text-primary: #430877; /* A bright text and icon color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */ --text-spotlight: #a34900; /* A text and icon color associated with subscriptions and purchasing. */ --text-negative: #b4074b; /* A text and icon color associated with negativity. Often used for errors, destructive actions, or to highlight negative metrics or data. */ --text-positive: #00733a; /* A text and icon color associated with positivity. Often used for success states, or to highlight positive metrics or data. */ --essential-base: #2d2d2d; /* The default essential color of the secondaryBase set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #7f7f7f; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-primary: #430877; /* A bright essential color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */ --essential-spotlight: #d05d00; /* An essential color associated with with subscriptions and purchasing. */ --essential-negative: #b4074b; /* An essential color associated with negativity. Often used for errors, destructive actions, or to highlight negative metrics or data. */ --essential-positive: #008744; /* An essential color associated with positivity. Often used for success states, or to highlight positive metrics or data. */ --decorative-base: #2d2d2d; /* The default decorative color of the secondaryBase set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #d8d8d8; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-auto-theme .st-primary-set, .st-auto-theme .mango-button-special-S, .st-auto-theme .mango-icon-button-special-S, .st-auto-theme .mango-button-negative-S, .st-auto-theme .mango-button-spotlight-S, .st-auto-theme .mango-button-special-M, .st-auto-theme .mango-icon-button-special-M, .st-auto-theme .mango-button-negative-M, .st-auto-theme .mango-button-spotlight-M, .st-auto-theme .mango-button-special-L, .st-auto-theme .mango-icon-button-special-L, .st-auto-theme .mango-button-negative-L, .st-auto-theme .mango-button-spotlight-L, .st-auto-theme .mango-button-special-XL, .st-auto-theme .mango-icon-button-special-XL, .st-auto-theme .mango-button-negative-XL, .st-auto-theme .mango-button-spotlight-XL { --background-base: #430877; /* The default background color of the primary set. */ --background-highlight: #360661; /* A background color that indicates the hover state of a component. */ --background-press: #280547; /* A background color that indicates the press state of a component. */ --background-elevated-base: #430877; /* fallback */ --background-elevated-highlight: #430877; /* fallback */ --background-elevated-press: #430877; /* fallback */ --background-tinted-base: #430877; /* fallback */ --background-tinted-highlight: #430877; /* fallback */ --background-tinted-press: #430877; /* fallback */ --text-base: #ffffff; /* The default text and icon color of the primary set. */ --text-subdued: #ffffff; /* fallback */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the primary set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #ffffff; /* fallback */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the primary set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #5b0ba1; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-auto-theme .st-spotlight-set, .st-auto-theme .mango-button-spotlight-XL, .st-auto-theme .mango-button-spotlight-L, .st-auto-theme .mango-button-spotlight-M, .st-auto-theme .mango-button-spotlight-S, .st-auto-theme .mango-button-spotlight { --background-base: #ff780a; /* The default background color of the spotlight set. */ --background-highlight: #ff8b2d; /* A background color that indicates the hover state of a component. */ --background-press: #f36d00; /* A background color that indicates the press state of a component. */ --background-elevated-base: #ff780a; /* fallback */ --background-elevated-highlight: #ff780a; /* fallback */ --background-elevated-press: #ff780a; /* fallback */ --background-tinted-base: #ff780a; /* fallback */ --background-tinted-highlight: #ff780a; /* fallback */ --background-tinted-press: #ff780a; /* fallback */ --text-base: #000000; /* The default text and icon color of the spotlight set. */ --text-subdued: #000000; /* fallback */ --text-primary: #000000; /* fallback */ --text-negative: #000000; /* fallback */ --text-spotlight: #000000; /* fallback */ --text-positive: #000000; /* fallback */ --essential-base: #000000; /* The default essential color of the spotlight set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #000000; /* fallback */ --essential-primary: #000000; /* fallback */ --essential-negative: #000000; /* fallback */ --essential-spotlight: #000000; /* fallback */ --essential-positive: #000000; /* fallback */ --decorative-base: #000000; /* The default decorative color of the spotlight set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #e26500; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-auto-theme .st-negative-set, .st-auto-theme .mango-button-negative-XL, .st-auto-theme .mango-button-negative-L, .st-auto-theme .mango-button-negative-M, .st-auto-theme .mango-button-negative-S { --background-base: #b4074b; /* The default background color of the negative set. */ --background-highlight: #a50645; /* A background color that indicates the hover state of a component. */ --background-press: #96063f; /* A background color that indicates the press state of a component. */ --background-elevated-base: #b4074b; /* fallback */ --background-elevated-highlight: #b4074b; /* fallback */ --background-elevated-press: #b4074b; /* fallback */ --background-tinted-base: #b4074b; /* fallback */ --background-tinted-highlight: #b4074b; /* fallback */ --background-tinted-press: #b4074b; /* fallback */ --text-base: #ffffff; /* The default text and icon color of the negative set. */ --text-subdued: #ffffff; /* fallback */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the negative set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #ffffff; /* fallback */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the negative set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #d60859; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-auto-theme .st-positive-set { --background-base: #008744; /* The default background color of the positive set. */ --background-highlight: #007d3f; /* A background color that indicates the hover state of a component. */ --background-press: #00743a; /* A background color that indicates the press state of a component. */ --background-elevated-base: #008744; /* fallback */ --background-elevated-highlight: #008744; /* fallback */ --background-elevated-press: #008744; /* fallback */ --background-tinted-base: #008744; /* fallback */ --background-tinted-highlight: #008744; /* fallback */ --background-tinted-press: #008744; /* fallback */ --text-base: #ffffff; /* The default text and icon color of the positive set. */ --text-subdued: #ffffff; /* fallback */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the positive set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #ffffff; /* fallback */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the positive set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #009b4e; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-auto-theme .st-contrasting-base-set { --background-base: #290247; /* The default background color of the contrastingBase set. */ --background-highlight: #380361; /* A background color that indicates the hover state of a component. */ --background-press: #130120; /* A background color that indicates the press state of a component. */ --background-elevated-base: #3e036c; /* The default background color for elevated elements in the contrastingBase set. */ --background-elevated-highlight: #4b0481; /* For hover states of elevated elements */ --background-elevated-press: #310255; /* For pressed states of elevated elements */ --background-tinted-base: rgba(255, 255, 255, 0.06); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(255, 255, 255, 0.12); /* For hover states of tinted elements */ --background-tinted-press: rgba(255, 255, 255, 0.03); /* For pressed states of tinted elements */ --text-base: #ffffff; /* The default text and icon color of the contrastingBase set. */ --text-subdued: #c884fc; /* For text and icons that are less prominent. */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the contrastingBase set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #aa43fa; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the contrastingBase set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #3f036d; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-auto-theme .st-inverted-primary-set { --background-base: #ffffff; /* The default background color of the invertedPrimary set. */ --background-highlight: #f1f1f1; /* A background color that indicates the hover state of a component. */ --background-press: #e3e3e3; /* A background color that indicates the press state of a component. */ --background-elevated-base: #ffffff; /* fallback */ --background-elevated-highlight: #ffffff; /* fallback */ --background-elevated-press: #ffffff; /* fallback */ --background-tinted-base: #ffffff; /* fallback */ --background-tinted-highlight: #ffffff; /* fallback */ --background-tinted-press: #ffffff; /* fallback */ --text-base: #430877; /* The default text and icon color of the invertedPrimary set. */ --text-subdued: #9024f0; /* For text and icons that are less prominent. */ --text-primary: #430877; /* fallback */ --text-negative: #430877; /* fallback */ --text-spotlight: #430877; /* fallback */ --text-positive: #430877; /* fallback */ --essential-base: #430877; /* The default essential color of the invertedPrimary set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #b267f5; /* A subdued variant of the base essential color. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-primary: #430877; /* fallback */ --essential-negative: #430877; /* fallback */ --essential-spotlight: #430877; /* fallback */ --essential-positive: #430877; /* fallback */ --decorative-base: #430877; /* The default decorative color of the invertedPrimary set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #dedede; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-auto-theme .st-simply-red-set { --background-base: #bb142c; /* The default background color of the simplyRed set. */ --background-highlight: #b1132a; /* A background color that indicates the hover state of a component. */ --background-press: #660b18; /* A background color that indicates the press state of a component. */ --background-elevated-base: #d21631; /* The default background color for elevated elements in the simplyRed set. */ --background-elevated-highlight: #dc1834; /* For hover states of elevated elements */ --background-elevated-press: #860e20; /* For pressed states of elevated elements */ --background-tinted-base: rgba(255, 255, 255, 0.12); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(255, 255, 255, 0.18); /* For hover states of tinted elements */ --background-tinted-press: rgba(255, 255, 255, 0.06); /* For pressed states of tinted elements */ --text-base: #ffffff; /* The default text and icon color of the simplyRed set. */ --text-subdued: #ffffff; /* fallback */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the simplyRed set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #ffffff; /* fallback */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the simplyRed set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #dc1834; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-auto-theme .st-maroon-set { --background-base: #ad236d; /* The default background color of the maroon set. */ --background-highlight: #a42167; /* A background color that indicates the hover state of a component. */ --background-press: #5d133b; /* A background color that indicates the press state of a component. */ --background-elevated-base: #c3277b; /* The default background color for elevated elements in the maroon set. */ --background-elevated-highlight: #cc2981; /* For hover states of elevated elements */ --background-elevated-press: #7b194e; /* For pressed states of elevated elements */ --background-tinted-base: rgba(255, 255, 255, 0.13); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(255, 255, 255, 0.18); /* For hover states of tinted elements */ --background-tinted-press: rgba(255, 255, 255, 0.06); /* For pressed states of tinted elements */ --text-base: #ffffff; /* The default text and icon color of the maroon set. */ --text-subdued: #ffffff; /* fallback */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the maroon set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #ffffff; /* fallback */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the maroon set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #cc2981; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-auto-theme .st-iron-wine-set { --background-base: #903c93; /* The default background color of the ironWine set. */ --background-highlight: #88398b; /* A background color that indicates the hover state of a component. */ --background-press: #4c204e; /* A background color that indicates the press state of a component. */ --background-elevated-base: #a244a6; /* The default background color for elevated elements in the ironWine set. */ --background-elevated-highlight: #ab47ae; /* For hover states of elevated elements */ --background-elevated-press: #662b69; /* For pressed states of elevated elements */ --background-tinted-base: rgba(255, 255, 255, 0.13); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(255, 255, 255, 0.18); /* For hover states of tinted elements */ --background-tinted-press: rgba(255, 255, 255, 0.06); /* For pressed states of tinted elements */ --text-base: #ffffff; /* The default text and icon color of the ironWine set. */ --text-primary: #ffb7b9; /* A bright text and icon color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */ --text-subdued: #ffffff; /* fallback */ --text-subdued: #ffffff; /* fallback */ --text-subdued: #ffffff; /* fallback */ --text-subdued: #ffffff; /* fallback */ --text-bright-accent: #ffffff; /* fallback */ --text-subdued: #ffffff; /* fallback */ --text-bright-accent: #ffffff; /* fallback */ --text-subdued: #ffffff; /* fallback */ --text-subdued: #ffffff; /* fallback */ --text-bright-accent: #ffffff; /* fallback */ --text-subdued: #ffffff; /* fallback */ --text-bright-accent: #ffffff; /* fallback */ --text-subdued: #ffffff; /* fallback */ --text-subdued: #ffffff; /* fallback */ --text-subdued: #ffffff; /* fallback */ --text-bright-accent: #ffffff; /* fallback */ --text-subdued: #ffffff; /* fallback */ --text-bright-accent: #ffffff; /* fallback */ --text-subdued: #ffffff; /* fallback */ --text-subdued: #ffffff; /* fallback */ --text-bright-accent: #ffffff; /* fallback */ --text-subdued: #ffffff; /* fallback */ --text-bright-accent: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the ironWine set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-primary: #ffb7b9; /* A bright essential color that contrasts with the set’s background colors. Often used to give key interactive elements more prominence. */ --essential-subdued: #ffffff; /* fallback */ --essential-subdued: #ffffff; /* fallback */ --essential-subdued: #ffffff; /* fallback */ --essential-subdued: #ffffff; /* fallback */ --essential-bright-accent: #ffffff; /* fallback */ --essential-subdued: #ffffff; /* fallback */ --essential-bright-accent: #ffffff; /* fallback */ --essential-subdued: #ffffff; /* fallback */ --essential-subdued: #ffffff; /* fallback */ --essential-bright-accent: #ffffff; /* fallback */ --essential-subdued: #ffffff; /* fallback */ --essential-bright-accent: #ffffff; /* fallback */ --essential-subdued: #ffffff; /* fallback */ --essential-subdued: #ffffff; /* fallback */ --essential-subdued: #ffffff; /* fallback */ --essential-bright-accent: #ffffff; /* fallback */ --essential-subdued: #ffffff; /* fallback */ --essential-bright-accent: #ffffff; /* fallback */ --essential-subdued: #ffffff; /* fallback */ --essential-subdued: #ffffff; /* fallback */ --essential-bright-accent: #ffffff; /* fallback */ --essential-subdued: #ffffff; /* fallback */ --essential-bright-accent: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the ironWine set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #aa47ae; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-auto-theme .st-purple-rain-set { --background-base: #8411e9; /* The default background color of the purpleRain set. */ --background-highlight: #7d10dd; /* A background color that indicates the hover state of a component. */ --background-press: #48097f; /* A background color that indicates the press state of a component. */ --background-elevated-base: #952df0; /* The default background color for elevated elements in the purpleRain set. */ --background-elevated-highlight: #9a38f1; /* For hover states of elevated elements */ --background-elevated-press: #5f0ca8; /* For pressed states of elevated elements */ --background-tinted-base: rgba(255, 255, 255, 0.18); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(255, 255, 255, 0.23); /* For hover states of tinted elements */ --background-tinted-press: rgba(255, 255, 255, 0.12); /* For pressed states of tinted elements */ --text-base: #ffffff; /* The default text and icon color of the purpleRain set. */ --text-subdued: #ffffff; /* fallback */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the purpleRain set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #ffffff; /* fallback */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the purpleRain set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #9b39f1; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-auto-theme .st-royal-blue-set { --background-base: #284ae8; /* The default background color of the royalBlue set. */ --background-highlight: #1f42e7; /* A background color that indicates the hover state of a component. */ --background-press: #0e2487; /* A background color that indicates the press state of a component. */ --background-elevated-base: #3d5bea; /* The default background color for elevated elements in the royalBlue set. */ --background-elevated-highlight: #4563eb; /* For hover states of elevated elements */ --background-elevated-press: #1330b4; /* For pressed states of elevated elements */ --background-tinted-base: rgba(255, 255, 255, 0.1); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(255, 255, 255, 0.14); /* For hover states of tinted elements */ --background-tinted-press: rgba(255, 255, 255, 0.05); /* For pressed states of tinted elements */ --text-base: #ffffff; /* The default text and icon color of the royalBlue set. */ --text-subdued: #ffffff; /* fallback */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the royalBlue set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #ffffff; /* fallback */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the royalBlue set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #4361eb; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-auto-theme .st-ocean-eyes-set { --background-base: #006878; /* The default background color of the oceanEyes set. */ --background-highlight: #006272; /* A background color that indicates the hover state of a component. */ --background-press: #003740; /* A background color that indicates the press state of a component. */ --background-elevated-base: #007587; /* The default background color for elevated elements in the oceanEyes set. */ --background-elevated-highlight: #007b8e; /* For hover states of elevated elements */ --background-elevated-press: #004a55; /* For pressed states of elevated elements */ --background-tinted-base: rgba(255, 255, 255, 0.07); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(255, 255, 255, 0.1); /* For hover states of tinted elements */ --background-tinted-press: rgba(255, 255, 255, 0.03); /* For pressed states of tinted elements */ --text-base: #ffffff; /* The default text and icon color of the oceanEyes set. */ --text-subdued: #ffffff; /* fallback */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the oceanEyes set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #ffffff; /* fallback */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the oceanEyes set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #007c8f; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-auto-theme .st-forest-set { --background-base: #006b56; /* The default background color of the forest set. */ --background-highlight: #006551; /* A background color that indicates the hover state of a component. */ --background-press: #00392e; /* A background color that indicates the press state of a component. */ --background-elevated-base: #007961; /* The default background color for elevated elements in the forest set. */ --background-elevated-highlight: #007f66; /* For hover states of elevated elements */ --background-elevated-press: #004c3d; /* For pressed states of elevated elements */ --background-tinted-base: rgba(255, 255, 255, 0.05); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(255, 255, 255, 0.08); /* For hover states of tinted elements */ --background-tinted-press: rgba(255, 255, 255, 0.02); /* For pressed states of tinted elements */ --text-base: #ffffff; /* The default text and icon color of the forest set. */ --text-subdued: #ffffff; /* fallback */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the forest set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #ffffff; /* fallback */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the forest set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #007f66; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-auto-theme .st-green-light-set { --background-base: #146c32; /* The default background color of the greenLight set. */ --background-highlight: #13662f; /* A background color that indicates the hover state of a component. */ --background-press: #0b391a; /* A background color that indicates the press state of a component. */ --background-elevated-base: #177a38; /* The default background color for elevated elements in the greenLight set. */ --background-elevated-highlight: #18803b; /* For hover states of elevated elements */ --background-elevated-press: #0e4c23; /* For pressed states of elevated elements */ --background-tinted-base: rgba(255, 255, 255, 0.05); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(255, 255, 255, 0.07); /* For hover states of tinted elements */ --background-tinted-press: rgba(255, 255, 255, 0.02); /* For pressed states of tinted elements */ --text-base: #ffffff; /* The default text and icon color of the greenLight set. */ --text-subdued: #ffffff; /* fallback */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the greenLight set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #ffffff; /* fallback */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the greenLight set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #18803b; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-auto-theme .st-gold-frapp-set { --background-base: #855311; /* The default background color of the goldFrapp set. */ --background-highlight: #7e4f10; /* A background color that indicates the hover state of a component. */ --background-press: #462c09; /* A background color that indicates the press state of a component. */ --background-elevated-base: #965e13; /* The default background color for elevated elements in the goldFrapp set. */ --background-elevated-highlight: #9e6214; /* For hover states of elevated elements */ --background-elevated-press: #5e3b0c; /* For pressed states of elevated elements */ --background-tinted-base: rgba(255, 255, 255, 0.07); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(255, 255, 255, 0.1); /* For hover states of tinted elements */ --background-tinted-press: rgba(255, 255, 255, 0.03); /* For pressed states of tinted elements */ --text-base: #ffffff; /* The default text and icon color of the goldFrapp set. */ --text-subdued: #ffffff; /* fallback */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the goldFrapp set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #ffffff; /* fallback */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the goldFrapp set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #9e6314; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } .st-auto-theme .st-orange-soda-set { --background-base: #9d4226; /* The default background color of the orangeSoda set. */ --background-highlight: #953e24; /* A background color that indicates the hover state of a component. */ --background-press: #532314; /* A background color that indicates the press state of a component. */ --background-elevated-base: #b14a2b; /* The default background color for elevated elements in the orangeSoda set. */ --background-elevated-highlight: #ba4e2d; /* For hover states of elevated elements */ --background-elevated-press: #6f2f1b; /* For pressed states of elevated elements */ --background-tinted-base: rgba(255, 255, 255, 0.09); /* Tinted backgrounds are slightly lighter or darker than the base background, and are sometimes used for selected states. These opacities can be safely layered over any other background in the set. */ --background-tinted-highlight: rgba(255, 255, 255, 0.13); /* For hover states of tinted elements */ --background-tinted-press: rgba(255, 255, 255, 0.04); /* For pressed states of tinted elements */ --text-base: #ffffff; /* The default text and icon color of the orangeSoda set. */ --text-subdued: #ffffff; /* fallback */ --text-primary: #ffffff; /* fallback */ --text-negative: #ffffff; /* fallback */ --text-spotlight: #ffffff; /* fallback */ --text-positive: #ffffff; /* fallback */ --essential-base: #ffffff; /* The default essential color of the orangeSoda set. Used for borders, indicators, or graphics that are essential for understanding the UI. */ --essential-subdued: #ffffff; /* fallback */ --essential-primary: #ffffff; /* fallback */ --essential-negative: #ffffff; /* fallback */ --essential-spotlight: #ffffff; /* fallback */ --essential-positive: #ffffff; /* fallback */ --decorative-base: #ffffff; /* The default decorative color of the orangeSoda set. Used for any graphical elements that are not essential for understanding the interface. */ --decorative-subdued: #ba4e2d; /* A subdued variant of the base decorative color. Used for any graphical elements that are not essential for understanding the interface. */ } } @media all and (min-width: 768px) { .hide-on-desktop { display: none !important; } } @media all and (max-width: 767px) { .hide-on-mobile { display: none !important; } } :root { --desktop: 1920px; --laptop: 1199px; --tablet: 1023px; --tablet-portrait: 880px; --mobile: 768px; --mobile-medium: 534px; --mobile-portrait: 380px; --height-small: 320px; --height-tiny: 225px; } @font-face { font-family: "soundtrap-icons"; src: url("fonts/soundtrap-icons.eot?v=5"); src: url("fonts/soundtrap-icons.eot?v=5#iefix") format("embedded-opentype"), url("fonts/soundtrap-icons.woff?v=5") format("woff"), url("fonts/soundtrap-icons.ttf?v=5") format("truetype"), url("fonts/soundtrap-icons.svg?v=5#soundtrap-icons") format("svg"); font-weight: normal; font-style: normal; } .soundtrap-icon { font-family: "soundtrap-icons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 100%; } .soundtrap-icon--svg { font-family: inherit; } .soundtrap-icon--svg:before { content: "" !important; font-family: inherit !important; display: none; } .soundtrap-icon--svg svg { width: 1em; height: 1em; fill: currentColor; display: inline-block; vertical-align: text-bottom; } .soundtrap-icon--tiny { font-size: var(--space-tiny); } .soundtrap-icon--tiny-1 { font-size: var(--space-tiny-1); } .soundtrap-icon--small { font-size: var(--space-small); } .soundtrap-icon--small-1 { font-size: var(--space-small-1); } .soundtrap-icon--medium { font-size: var(--space-medium); } [data-icon]:before { content: attr(data-icon); font-family: "soundtrap-icons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 100%; } [class^=ic-]:before, [class*=" ic-"]:before { font-family: "soundtrap-icons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 100%; } .ic-add:before { content: "\e000"; } .ic-arrow-down:before { content: "\e001"; } .ic-arrow-left:before { content: "\e002"; } .ic-arrow-right:before { content: "\e003"; } .ic-arrow-up:before { content: "\e004"; } .ic-audio:before { content: "\e005"; } .ic-automation:before { content: "\e006"; } .ic-award-1:before { content: "\e007"; } .ic-award-2:before { content: "\e008"; } .ic-back-to-start:before { content: "\e009"; } .ic-calendar:before { content: "\e00a"; } .ic-call-end:before { content: "\e00b"; } .ic-call-start:before { content: "\e00c"; } .ic-camera:before { content: "\e00d"; } .ic-cancel:before { content: "\e00e"; } .ic-chat:before { content: "\e00f"; } .ic-chat-2:before { content: "\e010"; } .ic-chevron-double:before { content: "\e011"; } .ic-chevron-down:before { content: "\e012"; } .ic-chevron-left:before { content: "\e013"; } .ic-chevron-right:before { content: "\e014"; } .ic-chevron-up:before { content: "\e015"; } .ic-circle-cancel:before { content: "\e016"; } .ic-circle-minus:before { content: "\e017"; } .ic-circle-ok:before { content: "\e018"; } .ic-circle-plus:before { content: "\e019"; } .ic-clock:before { content: "\e01a"; } .ic-computer:before { content: "\e01b"; } .ic-copy:before { content: "\e01c"; } .ic-cut:before { content: "\e01d"; } .ic-delete:before { content: "\e01e"; } .ic-download:before { content: "\e01f"; } .ic-edit:before { content: "\e020"; } .ic-education:before { content: "\e021"; } .ic-effect:before { content: "\e022"; } .ic-equalizer:before { content: "\e023"; } .ic-erase:before { content: "\e024"; } .ic-exit:before { content: "\e025"; } .ic-eye-close:before { content: "\e026"; } .ic-eye-open:before { content: "\e027"; } .ic-file:before { content: "\e028"; } .ic-file-import:before { content: "\e029"; } .ic-folder-add:before { content: "\e02a"; } .ic-folder-closed:before { content: "\e02b"; } .ic-folder-open:before { content: "\e02c"; } .ic-forward:before { content: "\e02d"; } .ic-gift:before { content: "\e02e"; } .ic-globe:before { content: "\e02f"; } .ic-grid:before { content: "\e030"; } .ic-headphones:before { content: "\e031"; } .ic-heart:before { content: "\e032"; } .ic-heart-empty:before { content: "\e033"; } .ic-history:before { content: "\e034"; } .ic-idea:before { content: "\e035"; } .ic-info:before { content: "\e036"; } .ic-instrument-amp:before { content: "\e037"; } .ic-instrument-brass:before { content: "\e038"; } .ic-instrument-drums:before { content: "\e039"; } .ic-instrument-guitar:before { content: "\e03a"; } .ic-instrument-mic:before { content: "\e03b"; } .ic-instrument-piano:before { content: "\e03c"; } .ic-instrument-strings:before { content: "\e03d"; } .ic-instrument-synth:before { content: "\e03e"; } .ic-like:before { content: "\e03f"; } .ic-link:before { content: "\e040"; } .ic-location:before { content: "\e041"; } .ic-lock-close:before { content: "\e042"; } .ic-lock-open:before { content: "\e043"; } .ic-lock-rotation:before { content: "\e044"; } .ic-mail:before { content: "\e045"; } .ic-menu-dots:before { content: "\e046"; } .ic-menu-grid:before { content: "\e047"; } .ic-menu-hamburger:before { content: "\e048"; } .ic-merge:before { content: "\e049"; } .ic-metronome:before { content: "\e04a"; } .ic-mic:before { content: "\e04b"; } .ic-mic-mute:before { content: "\e04c"; } .ic-midi:before { content: "\e04d"; } .ic-music:before { content: "\e04e"; } .ic-mute:before { content: "\e04f"; } .ic-name:before { content: "\e050"; } .ic-new-window:before { content: "\e051"; } .ic-notification:before { content: "\e052"; } .ic-ok:before { content: "\e053"; } .ic-on:before { content: "\e054"; } .ic-paste:before { content: "\e055"; } .ic-pause:before { content: "\e056"; } .ic-people:before { content: "\e057"; } .ic-picture:before { content: "\e058"; } .ic-play:before { content: "\e059"; } .ic-power-up:before { content: "\e05a"; } .ic-projects:before { content: "\e05b"; } .ic-quantize:before { content: "\e05c"; } .ic-quote:before { content: "\e05d"; } .ic-randomize:before { content: "\e05e"; } .ic-record:before { content: "\e05f"; } .ic-redo:before { content: "\e060"; } .ic-refresh:before { content: "\e061"; } .ic-repeat:before { content: "\e062"; } .ic-resize-full:before { content: "\e063"; } .ic-resize-small:before { content: "\e064"; } .ic-rewind:before { content: "\e065"; } .ic-search:before { content: "\e066"; } .ic-send:before { content: "\e067"; } .ic-settings:before { content: "\e068"; } .ic-share:before { content: "\e069"; } .ic-shout:before { content: "\e06a"; } .ic-snap-to-grid:before { content: "\e06b"; } .ic-speakers:before { content: "\e06c"; } .ic-split:before { content: "\e06d"; } .ic-star:before { content: "\e06e"; } .ic-stop:before { content: "\e06f"; } .ic-thumbs-up:before { content: "\e070"; } .ic-tools:before { content: "\e071"; } .ic-tuner:before { content: "\e072"; } .ic-undo:before { content: "\e073"; } .ic-upload:before { content: "\e074"; } .ic-user:before { content: "\e075"; } .ic-user-add:before { content: "\e076"; } .ic-user-remove:before { content: "\e077"; } .ic-video:before { content: "\e078"; } .ic-video-call:before { content: "\e079"; } .ic-video-call-mute:before { content: "\e07a"; } .ic-volume-down:before { content: "\e07b"; } .ic-volume-up:before { content: "\e07c"; } .ic-warning-sign:before { content: "\e07d"; } .ic-zoom-in:before { content: "\e07e"; } .ic-zoom-out:before { content: "\e07f"; } .ic-brightness:before { content: "\e080"; } .ic-chat-new:before { content: "\e081"; } .ic-cursor-filled:before { content: "\e082"; } .ic-cursor-outlined:before { content: "\e083"; } .ic-device-phone:before { content: "\e084"; } .ic-device-tablet:before { content: "\e085"; } .ic-discount:before { content: "\e086"; } .ic-fade-in:before { content: "\e087"; } .ic-fade-out:before { content: "\e088"; } .ic-point:before { content: "\e089"; } .ic-save:before { content: "\e08a"; } .ic-scissors:before { content: "\e08b"; } .ic-soundtrap:before { content: "\e08c"; } .ic-spotify:before { content: "\e08d"; } .ic-voice:before { content: "\e08e"; } .ic-808:before { content: "\e08f"; } .ic-stars:before { content: "\e090"; } .pl-mobile .touchable-opacity { transition: opacity 150ms; } .pl-mobile .touchable-opacity:active { opacity: 0.1; transition: opacity 0ms; } body { -webkit-font-smoothing: antialiased; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } body { background-color: #e6e9eb; font-family: var(--font-family); color: var(--text-base); padding-top: 0 !important; margin-top: 0; overflow: hidden; font-variant-ligatures: no-contextual; } input, textarea { background-color: var(--background-base); font-family: var(--font-family); color: var(--text-base); border: none; font-weight: 200; padding: 6px; box-shadow: none; border-radius: 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-family); font-weight: 400; } h3, h4 { font-family: var(--font-family); font-weight: 500; } h5 { color: var(--text-subdued); font-family: var(--font-family); font-weight: 700; font-size: 15px; margin-top: 4px; } .modal button { min-width: 0; } object { position: absolute; top: 0; left: 0; width: 1px; height: 1px; visibility: hidden; } a { text-decoration: none; color: var(--text-primary); } .pl-mobile a { transition: opacity 150ms; } .pl-mobile a:active { opacity: 0.1; transition: opacity 0ms; } a:focus { color: var(--text-primary); outline-style: none; } a.tertiary-link { font-weight: 500; text-decoration: underline; } a.tertiary-link:hover { color: var(--text-primary); } .pl-computer a:hover, .pl-computer a:active { cursor: pointer; } .pl-computer a.hover-darken:hover, .pl-computer a.hover-darken:active { text-decoration: none; color: #000000; } p { color: var(--text-base); } .flipx { transform: scaleX(-1); } .pl-computer .secondaryhide { visibility: hidden; } .pl-computer .secondaryactivated:hover .secondaryhide { visibility: visible; } .hidden { display: none; } .visuallyhidden { visibility: hidden; pointer-events: none; } .sr-only { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } body .pl-mobile-visible { display: none; } body .pl-computer-visible { display: none; } body.pl-computer .pl-computer-hidden { display: none; } body.pl-computer .pl-computer-visible { display: block; } body.pl-computer span.pl-computer-visible { display: inline-block; } body.pl-mobile .pl-mobile-hidden { display: none; } body.pl-mobile .pl-mobile-visible { display: block; } body.pl-mobile span.pl-mobile-visible { display: inline-block; } body .layout-landscape-visible { display: none; } body .layout-portrait-visible { display: none; } body.layout-portrait .layout-portrait-visible { display: block; } body.layout-portrait .layout-portrait-hidden { display: none; } body.layout-landscape .layout-landscape-visible { display: block; } body.layout-landscape .layout-landscape-hidden { display: none; } body .ff-handheld-visible { display: none; } body .ff-handheld-hidden { display: block; } body span.ff-handheld-hidden { display: inline-block; } body.ff-handheld .ff-handheld-visible { display: block; } body.ff-handheld span.ff-handheld-visible { display: inline-block; } body.ff-handheld .ff-handheld-hidden { display: none; } .basicdialog { will-change: transform; position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; z-index: 100; } .basicdialog .dialogbackdrop { z-index: 100; } .basicdialog .inner { will-change: transform; position: absolute; text-align: center; width: 600px; z-index: 101; padding: 40px 80px 60px; box-sizing: border-box; } .basicdialog h5 { text-transform: uppercase; word-wrap: break-word; } .basicdialog .genericmessage { text-align: center; margin-bottom: 40px; font-size: 15px; line-height: 19px; word-wrap: break-word; } .basicdialog .genericmessage p { margin-bottom: 20px; } .basicdialog .genericmessage p:last-child { margin-bottom: 0; } .basicdialog .genericmessage { overflow-y: auto; max-height: 200px; } @media (max-height: 500px) { .basicdialog .genericmessage { max-height: 105px; } } .basicdialog .buttons { margin-bottom: -10px; } .basicdialog .buttons a, .basicdialog .buttons button { margin-bottom: 10px; display: inline-block; margin-left: 5px; margin-right: 5px; text-decoration: none; min-width: 100px; } .pl-computer .basicdialog .buttons a:hover, .pl-computer .basicdialog .buttons button:hover { text-decoration: none; } .dim-backdrop { background: rgba(0, 0, 0, 0.6); } .basicdialog-responsive .inner { max-width: 93vw; max-height: 93vh; } body.ff-handheld.layout-portrait .basicdialog-responsive:not(.handheld-portrait-keep-padding) .inner { padding-left: 20px; padding-right: 20px; } body.ff-handheld.layout-landscape .basicdialog-responsive:not(.handheld-landscape-keep-padding) .inner { padding-top: 20px; padding-bottom: 20px; } body.pl-mobile.ff-handheld .basicdialog.handheld-fullscreen .inner { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; border-radius: 0; border: none; } body.pl-mobile:not(.ff-handheld) .basicdialog.tablet-fullscreen .inner { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; border: none; } body.pl-mobile .basicdialog.mobile-fullscreen .inner { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; border: none; } .volume-check .inner { padding: 60px; width: 480px; border-radius: 8px; box-shadow: 0 1px 8px 0 var(--default-box-shadow-color); border: solid 1px var(--decorative-subdued); } .volume-check .header { margin-top: 0; margin-bottom: 16px; } .volume-check .dialog-title { display: flex; flex-direction: row; align-items: center; justify-content: center; font-size: 25px; margin-top: 0; margin-bottom: 0; font-weight: 700; } .volume-check .dialog-title .soundtrap-icon { font-size: 20px; margin-right: 10px; } .volume-check .volume-check-step { display: flex; flex-direction: column; align-items: center; } .volume-check .volume-check-step.calibration button[disabled] { color: var(--text-subdued); } .volume-check .volume-check-step .info { height: 80px; min-height: 80px; max-height: 80px; font-size: 15px; display: flex; flex-direction: column; } .volume-check .volume-check-step .info .link { margin-left: 4px; text-decoration: underline; } .volume-check .volume-check-step .info .link:hover { color: var(--text-primary); } .volume-check .volume-check-step .vu-meter { margin-top: 40px; margin-bottom: 40px; } .volume-check .volume-check-step .reset-link { font-weight: 500; background-color: transparent; border: none; color: var(--text-primary); padding: 1px 6px; } .volume-check .volume-check-step .reset-link:hover { color: var(--text-primary); text-decoration: underline; } .volume-check .volume-check-step .status-badge { z-index: 100; margin-top: 25px; } .volume-check .volume-check-step .keepplaying { font-weight: 500; color: var(--essential-primary); } .shadoweddialog { border-radius: 4px; box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2); border: solid 1px var(--decorative-subdued); background: var(--background-elevated-base); } .shadoweddialog.shadoweddialog-noborder { border: none; } .shadoweddialog.shadoweddialog-newstyle { border-radius: 8px; box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1); border: solid 1px var(--decorative-subdued); } .shadoweddialog.shadoweddialog-newstyle.fullscreen { min-width: 100vw; min-height: 100vh; border-radius: 0; } .dialogbackdrop { position: absolute; width: 100%; height: 100%; opacity: 0.15; background-color: #000000; } .input-selector { display: none; flex-direction: row; align-items: center; transition: height 0.1s; min-height: 32px; margin: 7px 16px 8px 20px; padding: 0; } .input-selector * { box-sizing: border-box; } .input-selector.visible { display: flex; } .input-selector .mic-calibration-button { margin-left: 16px; } .input-selector.stacked { flex-direction: column; margin: 0; } .input-selector.stacked .volume-section { width: 100%; } .input-selector.stacked .mic-calibration-button { margin-left: 0; } .input-selector.stacked .input-select-button { margin-bottom: 8px; width: 100%; border: 1px solid var(--essential-subdued); border-radius: 3px; } .input-selector .divider { width: 1px; height: 32px; margin-left: 16px; margin-right: 16px; background: var(--decorative-subdued); } .input-selector .volume-section { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .input-select-button { border: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; cursor: pointer; height: 34px; background-color: transparent; } .input-selector:not(.stacked) .input-select-button { padding: 0; } .input-select-button .input-selector-device-name { display: flex; flex-direction: row; align-items: center; overflow: hidden; text-overflow: ellipsis; } .input-select-button .input-selector-device-name .ic-mic { font-size: 14px; margin-right: 8px; color: var(--text-base); } .input-select-button .input-selector-device-name .input-selector-device-name-label { color: var(--text-base); white-space: nowrap; font-size: 15px; text-overflow: ellipsis; overflow: hidden; } .input-select-button .input-selector-device-name .input-selector-device-channels { color: var(--essential-subdued); text-wrap: nowrap; margin-left: 5px; } .input-select-button .ic-chevron-double { color: var(--essential-primary); margin-left: 7px; margin-right: 0; font-size: 13px; margin-top: 1px; } .input-select-button.readonly { cursor: default; } .input-select-button.readonly .ic-chevron-double { display: none; } .new-input-selector { width: 210px; } .new-input-selector__button { border: 0; display: flex; flex-direction: row; align-items: center; justify-content: space-between; cursor: pointer; background-color: transparent; padding: 0; } .new-input-selector__button .ic-chevron-down { font-size: 10px; color: var(--text-base); margin-left: var(--space-nano); } .new-input-selector__button.readonly { cursor: default; } .new-input-selector__button.readonly .ic-chevron-down { display: none; } .new-input-selector__device-name { display: flex; justify-content: space-between; align-items: center; min-width: 0; font-size: 11px; } .new-input-selector__device-name .ic-mic { font-size: var(--space-tiny-1); color: var(--text-base); margin-right: var(--space-nano); vertical-align: text-bottom; } .new-input-selector__device-name-label { color: var(--text-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; } .new-input-selector__device-channels { color: var(--essential-subdued); margin-left: var(--space-nano); font-size: inherit; flex-shrink: 0; } .new-input-selector__input-source { display: flex; flex-direction: column; align-items: stretch; padding: var(--space-tiny); gap: var(--space-tiny); transition: background 0.1s ease-out; } .new-input-selector__input-source:hover, .new-input-selector__input-source:focus-within { background-color: var(--background-tinted-highlight); border-color: transparent; border-radius: var(--space-tiny); } .new-input-selector__calibrate-monitoring-row { margin-top: 12px; margin-left: var(--space-tiny); display: flex; justify-content: space-between; align-items: center; } .new-input-selector__calibrate-monitoring-row .mic-calibration-button button { min-width: auto; padding-left: 10px; padding-right: 10px; } .new-input-selector__calibrate-monitoring-row .monitoring-label { font-size: 11px; font-weight: 500; } .st-light-theme, body { --signal-bar-quiet: #3F036D; --signal-bar-clipping: #B4074B; } .st-dark-theme { --signal-bar-quiet: #9B7AE7; --signal-bar-clipping: #F72D7C; } @keyframes clipping-dot-fade { from { background-color: var(--signal-bar-clipping); } 40% { background-color: var(--signal-bar-clipping); } to { background-color: var(--decorative-subdued); } } @keyframes clipping-bar-fade { from { background-image: linear-gradient(to right, var(--signal-bar-clipping), var(--signal-bar-clipping)); } 99% { background-image: linear-gradient(to right, var(--signal-bar-clipping), var(--signal-bar-clipping)); } to { background-image: linear-gradient(to right, var(--signal-bar-quiet), var(--signal-bar-clipping)); } } .signal-bar-holder { --signal-bar-width: 100px; display: flex; flex-direction: row; align-content: center; justify-content: space-between; gap: 4px; width: var(--signal-bar-width); } .stacked .signal-bar-holder { --signal-bar-width: 100%; margin-right: 4px; } .signal-bar-holder .signal-bar { position: relative; background-color: var(--background-tinted-highlight); overflow: hidden; width: 100%; height: 4px; border-radius: 4px; } .signal-bar-holder .signal-bar .signal-bar-filled { height: 100%; width: 0; background-size: var(--signal-bar-width) 100%; background-image: linear-gradient(to right, var(--signal-bar-quiet), var(--signal-bar-clipping)); border-bottom-right-radius: 2px; border-top-right-radius: 2px; will-change: width, background-image; animation-name: clipping-bar-fade; animation-duration: 1s; } .signal-bar-holder .signal-bar .signal-bar-filled.clipping { animation-name: none; background-image: linear-gradient(to right, var(--signal-bar-clipping), var(--signal-bar-clipping)); } .signal-bar-holder .clipping-dot { width: 4px; height: 4px; border-radius: 50%; background-color: var(--background-tinted-highlight); will-change: background-color; animation-name: clipping-dot-fade; animation-duration: 5s; } .signal-bar-holder .clipping-dot.clipping { animation-name: none; background-color: var(--signal-bar-clipping); } .device-selector-popup .inner { padding: 0; } .device-selector-popup .device-selector .device-list { overflow-y: auto; padding: 0 0 10px 0; } .device-selector-popup .device-selector .device-list .device-item { display: grid; grid-template-areas: "radio label"; grid-template-columns: 56px minmax(auto, 330px); align-items: center; min-height: 40px; transition: background 0.1s ease-out; } .device-selector-popup .device-selector .device-list .device-item:hover, .device-selector-popup .device-selector .device-list .device-item:focus-within { background-color: var(--background-tinted-highlight); } .device-selector-popup .device-selector .device-list .device-item .st-radio { grid-area: radio; justify-self: center; } .device-selector-popup .device-selector .device-list.advanced .device-item { padding-top: 0px; } .device-selector-popup .device-selector .advanced-toggle { height: 60px; border-top-style: solid; border-top-color: var(--decorative-subdued); border-top-width: 1px; display: flex; align-items: center; } .device-selector-popup .device-selector .advanced-toggle .st-toggle { margin-left: 20px; margin-right: 10px; } .device-selector-popup .device-selector .advanced-toggle .para-m { color: var(--text-subdued); } .device-selector-popup .device-label { grid-area: label; flex: 1; display: flex; flex-direction: column; align-items: flex-start; } .device-selector-popup .device-label .device-label-filler { opacity: 0; height: 0; transition: opacity 0.1s, height 0.1s; } .device-selector-popup .device-label .device-label-label { flex: 1; font-weight: normal; margin: 0; cursor: pointer; width: 100%; text-align: left; white-space: nowrap; text-overflow: ellipsis; max-width: 300px; overflow: hidden; } .device-selector-popup .device-label .device-channel-selector { background-color: transparent; border: 0; pointer-events: none; opacity: 0; height: 0px; color: #9b9b9b; transition: opacity 0.1s, height 0.1s; } .device-selector-popup .device-label .device-channel-selector .ic-chevron-down { font-size: 8px; margin-left: 5px; vertical-align: middle; } .device-selector-popup .device-label.advanced { padding-bottom: 15px; } .device-selector-popup .device-label.advanced .device-channel-selector { pointer-events: auto; opacity: 1; height: 15px; } .device-channel-selector-popup .inner .item { min-width: 0px; } .device-channel-selector-popup .inner .item .icon { display: none; } .mic-calibration-button .ic-mic { font-size: 12px !important; margin-right: 6px !important; } .mic-calibration-button .soundcheck-icon { background-image: url("/studio/assets/images/studio/ic-volume-test-purple@3x.png"); background-size: 100% 100%; filter: saturate(0%) contrast(100%); width: 24px; height: 19px; display: inline-block; } .st-dark-theme .mic-calibration-button .soundcheck-icon { filter: saturate(0%) contrast(100%) invert(1); } @keyframes volumecheck-needed { 0% { transform: scale(1); filter: saturate(0%) contrast(0%) brightness(122%); } 15% { transform: scale(0.9); } 20% { transform: scale(1.2); filter: saturate(100%) contrast(100%) brightness(100%); } 25% { transform: scale(0.9); } 30% { transform: scale(1); } 100% { filter: saturate(0%) contrast(0%) brightness(122%); } } .flash { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 100; display: flex; flex-direction: row; align-items: center; justify-content: center; pointer-events: none; opacity: 1; } .flash.fade:not(.dontfade) { transition: opacity 1s; opacity: 0; } .flash .flash-inner { background-color: rgba(62, 17, 101, 0.8); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 4px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); min-width: 149px; min-height: 98px; padding: 20px; } .flash .flash-inner .soundtrap-icon { color: #ffffff; font-size: 28px; margin-bottom: 10px; } .flash .flash-inner .title-m { color: #ffffff; } .vu-meter { width: 258px; height: 127px; position: relative; overflow: hidden; display: flex; flex-direction: row; align-items: center; justify-content: center; } .vu-meter .vu-meter-background { width: 258px; height: 94px; position: absolute; top: 0; left: 0; background-size: contain; } .vu-meter .vu-meter-needle-base { width: 1px; height: 1px; position: absolute; left: 120px; bottom: -10px; border-width: 10px; border-style: solid; border-radius: 50%; } .vu-meter .vu-meter-needle { width: 2px; height: 90px; position: absolute; left: 129px; top: 29px; transform-origin: center 95px; will-change: transform; } .vu-meter .red-zone-img { position: absolute; right: 0; top: 20px; } .vu-meter .safe-zone-img { position: absolute; left: 0; top: 0; } .vu-meter.passive .red-zone-img { color: var(--essential-subdued); } .vu-meter.passive .safe-zone-img { color: var(--essential-subdued); } .vu-meter.passive .vu-meter-needle-base { background-color: var(--essential-subdued); border-color: var(--essential-subdued); } .vu-meter.passive .vu-meter-needle { background-color: var(--essential-subdued); } .vu-meter.active .red-zone-img { color: var(--essential-negative); } .vu-meter.active .safe-zone-img { color: var(--essential-primary); } .vu-meter.active .vu-meter-needle-base { background-color: var(--essential-primary); border-color: var(--essential-primary); } .vu-meter.active .vu-meter-needle { background-color: var(--essential-primary); } .aadc-banner-container { display: flex; align-items: center; padding: var(--space-tiny) var(--space-small); } .aadc-banner-container .description { display: inline; white-space: normal; font-size: 11px; margin: 0; } .aadc-banner-container .cta { flex-shrink: 0; } .st-profile-icon { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; } .st-profile-icon .st-profile-icon-image { max-width: 100%; max-height: 100%; } .st-profile-icon.large { width: 76px; height: 76px; } .st-profile-icon.enormous { width: 120px; height: 120px; } .closerx { border: 0; position: absolute; background: url("/studio/assets/images/studio/ic_cancel_dark.png") 12px 12px no-repeat; width: 44px; height: 44px; top: 1px; right: 1px; cursor: pointer; } .pl-mobile .closerx { transition: opacity 150ms; } .pl-mobile .closerx:active { opacity: 0.1; transition: opacity 0ms; } .closerx.closerx-white { background: url("/studio/assets/images/studio/ic_cancel_light.png") 12px 12px no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .closerx { background: url("/studio/assets/images/studio/ic_cancel_dark@2x.png") 12px 12px no-repeat; background-size: 20px 20px; } .closerx.closerx-white { background: url("/studio/assets/images/studio/ic_cancel_light@2x.png") 12px 12px no-repeat; background-size: 20px 20px; } } .closerx-newstyle { font-family: "soundtrap-icons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 100%; position: absolute; display: flex; align-items: center; justify-content: center; background: none; width: 44px; height: 44px; top: 1px; right: 1px; cursor: pointer; font-size: 16px; color: var(--text-subdued); border: none; } .pl-mobile .closerx-newstyle { transition: opacity 150ms; } .pl-mobile .closerx-newstyle:active { opacity: 0.1; transition: opacity 0ms; } .closerx-newstyle:before { content: "\e00e"; } .pl-computer .closerx-newstyle:hover { color: var(--text-base); } .closerx-newstyle:focus-visible:not(.studio-focus-visible) { outline: inherit; } .closerx-newstyle.relative { position: relative; width: 25px; height: 10px; font-size: 10px; top: auto; right: auto; color: var(--text-base); } .popupmenu { --icon-size: 11px; --icon-margin: 13px; will-change: transform; position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; z-index: 200; } .popupmenu .closer { z-index: 300; } .popupmenu .dialogbackdrop { opacity: 0; z-index: 200; } .popupmenu.repositioning { opacity: 0.01; } .popupmenu .inner { position: fixed; color: var(--text-base); z-index: 201; font-size: 15px; font-weight: 400; overflow: auto; overflow-x: hidden; max-height: 100%; max-width: 100%; box-sizing: border-box; border-radius: 4px; box-shadow: 0 2px 6px 0 var(--default-box-shadow-color); background-color: var(--background-base); border: solid 1px var(--background-elevated-highlight); padding: 3px 0; } .popupmenu .inner .text { text-align: left; padding: 4px 12px 0 14px; } .popupmenu .inner .text .lbl { font-weight: 400; font-size: 11px; color: var(--text-subdued); } .popupmenu .inner .text .subdued { font-weight: 500; color: var(--text-subdued); } .popupmenu .inner .item { list-style: none; box-sizing: border-box; text-align: left; min-width: 200px; } .popupmenu .inner .button { cursor: pointer; border: 0; background-color: transparent; appearance: none; white-space: nowrap; width: 100%; text-align: left; padding: 8px 12px 8px 15px; line-height: 17px; } body.pl-mobile .popupmenu .inner .button { padding: 12px 12px 12px 12px; } .popupmenu .inner .item .icon { display: inline-block; height: var(--icon-size); vertical-align: bottom; margin-bottom: 3px; width: var(--icon-size); font-size: 11px; margin-right: var(--icon-margin); color: var(--text-base); } .popupmenu .inner .item .icon svg { display: block; fill: currentColor; } .popupmenu .inner .item .icon.ic-ok { margin-bottom: 3px; } .popupmenu .inner .item .icon.icon-small-dot-green, .popupmenu .inner .item .icon.icon-small-dot-red { width: 8px; height: 8px; border-radius: 50%; margin-bottom: 6px; margin-left: 4px; margin-right: 13px; } .popupmenu .inner .item .icon.icon-small-dot-green { background-color: var(--essential-positive); } .popupmenu .inner .item .icon.icon-small-dot-red { background-color: var(--essential-negative); } .popupmenu .inner .item .icon.icon-big-dot { border-radius: 50%; margin-bottom: 4px; background-color: var(--background-elevated-base); } .popupmenu .inner .item .lbl { display: inline-block; color: var(--text-base); font-size: 13px; font-weight: 400; font-style: normal; font-stretch: normal; line-height: 17px; letter-spacing: 0.026px; margin-right: 10px; font-family: var(--font-family); } .popupmenu .inner .item .shortcut { color: var(--text-base); float: right; font-size: 12px; line-height: 20px; } .popupmenu .inner .item .shortcut.soundtrap-icon { margin-top: 1px; } .popupmenu .inner .item .shortcut.ic-chevron-right { font-size: 9px; line-height: 17px; margin-top: 1px; } .popupmenu .inner .item.item-checked .icon { color: var(--essential-base); } .popupmenu .inner .item.item-checked .shortcut { color: var(--text-base); } body.pl-computer .popupmenu .inner .item:hover, .popupmenu .inner .item.studio-focus-visible, .popupmenu .inner .item .button.studio-focus-visible, .popupmenu .inner .item.hovered { outline: none; background-color: var(--background-tinted-base); color: var(--text-base); } body.pl-computer .popupmenu .inner .item:hover .icon, .popupmenu .inner .item.studio-focus-visible .icon, .popupmenu .inner .item .button.studio-focus-visible .icon, .popupmenu .inner .item.hovered .icon { color: var(--text-base); } body.pl-computer .popupmenu .inner .item:hover .lbl, .popupmenu .inner .item.studio-focus-visible .lbl, .popupmenu .inner .item .button.studio-focus-visible .lbl, .popupmenu .inner .item.hovered .lbl { color: var(--text-base); } body.pl-computer .popupmenu .inner .item:hover .shortcut, .popupmenu .inner .item.studio-focus-visible .shortcut, .popupmenu .inner .item .button.studio-focus-visible .shortcut, .popupmenu .inner .item.hovered .shortcut { color: var(--text-base); } .popupmenu .inner .item.disabled { color: var(--text-base); opacity: var(--disabled-opacity); pointer-events: none; } .popupmenu .inner .item.disabled .icon { color: var(--text-subdued); } .popupmenu .inner .item.disabled .lbl { color: var(--text-subdued); } .popupmenu .inner .item.disabled .shortcut { color: var(--text-subdued); } .popupmenu .inner .separator { width: 100%; margin: 8px 0 7px; background-color: var(--decorative-subdued); height: 1px; list-style: none; } body.pl-mobile .popupmenu.popup-menu-horizontal .inner { white-space: nowrap; padding: 0; } body.pl-mobile .popupmenu.popup-menu-horizontal .inner .item { cursor: pointer; width: auto; min-width: initial; padding: 9px 23px 9px 9px; display: inline-block; } body.pl-mobile .popupmenu.popup-menu-horizontal.wrapok .inner { white-space: normal; } .popupmenu.hide-icons .inner .item .icon { display: none; } .popupmenu__upsellText { font-size: 11px; color: var(--text-subdued); float: right; margin-left: 10px; margin-top: 3px; } button:hover .popupmenu__upsellText, button:focus .popupmenu__upsellText { text-decoration: underline; } .popupmenu__spotlightText { font-size: 11px; color: var(--text-spotlight); float: right; margin-left: 10px; margin-right: 10px; margin-top: 3px; } button:hover .popupmenu__spotlightText button:focus .popupmenu__spotlightText { text-decoration: underline; } .popupmenu__description { display: block; margin-left: calc(var(--icon-size) + var(--icon-margin)); color: var(--text-subdued); margin-top: 4px; } .popupmenu__sectionHeading { text-align: left; color: var(--text-subdued); padding: 8px 12px 2px 14px; font-size: 11px; margin: 0; } .popupmenu__sectionList { margin: 0; padding: 0; } .popupmenu__sectionList:not(:last-child) { border-bottom: 1px solid var(--decorative-subdued); padding-bottom: 10px; margin-bottom: 8px; } .popupmenu .color-menu, .color-dialog .color-menu { display: flex; flex-direction: row; flex-wrap: wrap; width: 202px; padding: 10px; } .popupmenu .color-menu .color-item-wrapper, .color-dialog .color-menu .color-item-wrapper { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--decorative-subdued); margin: 1px; } .popupmenu .color-menu .color-item-wrapper.selected, .color-dialog .color-menu .color-item-wrapper.selected { border-color: var(--essential-primary); } .popupmenu .color-menu .color-item, .color-dialog .color-menu .color-item { width: 26px; height: 26px; border-radius: 50%; margin: 2px; opacity: 0.8; background-color: var(--background-elevated-base); } .popupmenu .color-menu .color-item:hover, .color-dialog .color-menu .color-item:hover { opacity: 1; } .color-dialog.basicdialog .inner { padding: 40px 80px; } .color-dialog.basicdialog .inner .color-menu { justify-content: center; width: initial; } .color-dialog.basicdialog .inner .color-menu .color-item-wrapper { width: 56px; height: 56px; margin: 10px; border-width: 3px; } .color-dialog.basicdialog .inner .color-menu .color-item-wrapper .color-item { width: 44px; height: 44px; margin: 3px; } .toggle-menu-item-holder { cursor: pointer; } .toggle-menu-item-holder .toggle-menu-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 7px 7px 15px; } .toggle-menu-item-holder .toggle-menu-item.left-pad { margin-left: calc(var(--icon-size) + var(--icon-margin)); } .toggle-menu-item-holder .toggle-menu-item.fullscreen { justify-content: flex-start; } .toggle-menu-item-holder .toggle-menu-item.fullscreen.left-pad { margin-left: var(--icon-size); } .toggle-menu-item-holder .toggle-menu-item .label-wrapper { display: flex; align-items: center; margin-bottom: 3px; } .toggle-menu-item-holder .toggle-menu-item .icon { margin-right: var(--icon-margin); color: var(--text-base); font-size: 11px; } .toggle-menu-item-holder .toggle-menu-item .svg-icon { font-size: 11px; display: flex; justify-content: center; align-items: center; color: var(--text-base); margin-right: var(--icon-margin); } .toggle-menu-item-holder .toggle-menu-item .lbl { font-weight: normal; font-style: normal; font-stretch: normal; line-height: 17px; letter-spacing: 0.1px; margin-right: 8px; margin-bottom: 0; font-size: 13px; cursor: pointer; } .toggle-menu-item-holder .toggle-menu-item .new-label { background: var(--essential-positive); border-radius: 2px; font-size: 8px; padding: 4px 6px; color: white; } .toggle-menu-item-holder .toggle-menu-item .bold { font-weight: 500; } .toggle-menu-item-holder:hover { background-color: var(--background-tinted-base); color: var(--text-base); } .toggle-menu-item-holder:hover > * { background-color: transparent; /* Ensure child elements don't inherit the background color */ } .toggle-menu-item-holder:hover .svg-icon { fill: var(--text-base); } .st-radio { border: 0; flex: 1; background-color: transparent; } .st-radio[aria-checked=true] { --st-radio-circle-border-color: var(--essential-primary); --st-radio-dot-opacity: 1; --st-radio-dot-transform: scale(1) translate(-50%, -50%); } .st-radio[aria-checked=false] { --st-radio-circle-border-color: var(--text-subdued); --st-radio-dot-opacity: 0; --st-radio-dot-transform: scale(0.01) translate(-150%, -150%); } .st-radio-circle { --st-radio-circle-width: 16px; width: var(--st-radio-circle-width); min-width: var(--st-radio-circle-width); max-width: var(--st-radio-circle-width); height: var(--st-radio-circle-width); min-height: var(--st-radio-circle-width); max-height: var(--st-radio-circle-width); border-radius: var(--st-radio-circle-width); border-color: var(--st-radio-circle-border-color); border-width: 2px; border-style: solid; box-sizing: border-box; position: relative; } .st-radio-dot { position: absolute; top: 50%; left: 50%; border-radius: 50%; transform-origin: center; transition: opacity 16ms linear 0ms, transform 128ms linear 16ms; width: calc(var(--st-radio-circle-width) / 2); height: calc(var(--st-radio-circle-width) / 2); background-color: var(--essential-primary); opacity: var(--st-radio-dot-opacity); transform: var(--st-radio-dot-transform); } .st-toggle[aria-checked=true] { --st-toggle-pill-background-color: var(--essential-positive); --st-toggle-nub-translate-x: 10px; } .st-toggle[aria-checked=false] { --st-toggle-pill-background-color: var(--essential-subdued); --st-toggle-nub-translate-x: 0px; } .st-toggle[disabled=true] { --st-toggle-opacity: var(--disabled-opacity); } .st-toggle[disabled=false] { --st-toggle-opacity: 1; } .st-toggle { background-color: transparent; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: var(--st-toggle-opacity); } .st-toggle-pill { display: block; position: relative; width: 26px; height: 16px; border-radius: 26px; transition: background-color 0.1s; background-color: var(--st-toggle-pill-background-color); } .st-toggle.small .st-toggle-pill { width: 23px; height: 13px; border-radius: 20px; } .st-toggle-nub { position: absolute; width: 12px; height: 12px; border-radius: 12px; top: 2px; left: 2px; transition: transform 0.1s; background-color: var(--background-base); transform: translateX(var(--st-toggle-nub-translate-x)); } .st-toggle.small .st-toggle-nub { width: 9px; height: 9px; border-radius: 9px; } .chat-face { display: inline-block; position: relative; margin-right: 5px; } .chat-face .profile { box-sizing: border-box; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #ffffff; } .chat-face .presence { box-sizing: border-box; position: absolute; bottom: 0; right: 0; width: 9px; height: 9px; border-radius: 50%; } .chat-face.present .presence { border: 1px solid #ffffff; background-color: #6bcc99; } .chat-face.pending { opacity: 0.5; } body.pl-mobile .chat-face { height: 44px; width: 44px; } body.pl-mobile .chat-face .profile { height: 44px; width: 44px; border-radius: 22px; } .mango-button, .mango-button-spotlight, .mango-button-weak-XL, .mango-icon-button-emphasized-XL, .mango-icon-button-weak-XL, .mango-button-weak-L, .mango-icon-button-emphasized-L, .mango-icon-button-weak-L, .mango-button-weak-M, .mango-icon-button-emphasized-M, .mango-icon-button-weak-M, .mango-button-weak-S, .mango-icon-button-emphasized-S, .mango-icon-button-weak-S, .mango-button-emphasised-XL, .mango-button-emphasised-L, .mango-button-emphasised-M, .mango-button-emphasised-S, .mango-button-regular-XL, .mango-icon-button-regular-XL, .mango-button-regular-L, .mango-icon-button-regular-L, .mango-button-regular-M, .mango-icon-button-regular-M, .mango-button-regular-S, .mango-icon-button-regular-S, .mango-button-special-S, .mango-icon-button-special-S, .mango-button-negative-S, .mango-button-spotlight-S, .mango-button-special-M, .mango-icon-button-special-M, .mango-button-negative-M, .mango-button-spotlight-M, .mango-button-special-L, .mango-icon-button-special-L, .mango-button-negative-L, .mango-button-spotlight-L, .mango-button-special-XL, .mango-icon-button-special-XL, .mango-button-negative-XL, .mango-button-spotlight-XL, .mango-button-weak, .mango-button-regular, .mango-button-special { font-family: var(--font-family); font-weight: 400; position: relative; padding: 0 14px; font-size: 12px; border-radius: 50px; font-weight: 500; transition: background 0.1s ease-out; text-decoration: none; border: 1px solid transparent; display: inline-flex; justify-content: center; align-items: center; overflow: hidden; } .mango-button:hover, .mango-button-spotlight:hover, .mango-button-weak-XL:hover, .mango-icon-button-emphasized-XL:hover, .mango-icon-button-weak-XL:hover, .mango-button-weak-L:hover, .mango-icon-button-emphasized-L:hover, .mango-icon-button-weak-L:hover, .mango-button-weak-M:hover, .mango-icon-button-emphasized-M:hover, .mango-icon-button-weak-M:hover, .mango-button-weak-S:hover, .mango-icon-button-emphasized-S:hover, .mango-icon-button-weak-S:hover, .mango-button-emphasised-XL:hover, .mango-button-emphasised-L:hover, .mango-button-emphasised-M:hover, .mango-button-emphasised-S:hover, .mango-button-regular-XL:hover, .mango-icon-button-regular-XL:hover, .mango-button-regular-L:hover, .mango-icon-button-regular-L:hover, .mango-button-regular-M:hover, .mango-icon-button-regular-M:hover, .mango-button-regular-S:hover, .mango-icon-button-regular-S:hover, .mango-button-special-S:hover, .mango-icon-button-special-S:hover, .mango-button-negative-S:hover, .mango-button-spotlight-S:hover, .mango-button-special-M:hover, .mango-icon-button-special-M:hover, .mango-button-negative-M:hover, .mango-button-spotlight-M:hover, .mango-button-special-L:hover, .mango-icon-button-special-L:hover, .mango-button-negative-L:hover, .mango-button-spotlight-L:hover, .mango-button-special-XL:hover, .mango-icon-button-special-XL:hover, .mango-button-negative-XL:hover, .mango-button-spotlight-XL:hover, .mango-button-weak:hover, .mango-button-regular:hover, .mango-button-special:hover { transition: background 0.03s ease-out; text-decoration: none; } .mango-button.hide, .hide.mango-button-spotlight, .hide.mango-button-weak-XL, .hide.mango-icon-button-emphasized-XL, .hide.mango-icon-button-weak-XL, .hide.mango-button-weak-L, .hide.mango-icon-button-emphasized-L, .hide.mango-icon-button-weak-L, .hide.mango-button-weak-M, .hide.mango-icon-button-emphasized-M, .hide.mango-icon-button-weak-M, .hide.mango-button-weak-S, .hide.mango-icon-button-emphasized-S, .hide.mango-icon-button-weak-S, .hide.mango-button-emphasised-XL, .hide.mango-button-emphasised-L, .hide.mango-button-emphasised-M, .hide.mango-button-emphasised-S, .hide.mango-button-regular-XL, .hide.mango-icon-button-regular-XL, .hide.mango-button-regular-L, .hide.mango-icon-button-regular-L, .hide.mango-button-regular-M, .hide.mango-icon-button-regular-M, .hide.mango-button-regular-S, .hide.mango-icon-button-regular-S, .hide.mango-button-special-S, .hide.mango-icon-button-special-S, .hide.mango-button-negative-S, .hide.mango-button-spotlight-S, .hide.mango-button-special-M, .hide.mango-icon-button-special-M, .hide.mango-button-negative-M, .hide.mango-button-spotlight-M, .hide.mango-button-special-L, .hide.mango-icon-button-special-L, .hide.mango-button-negative-L, .hide.mango-button-spotlight-L, .hide.mango-button-special-XL, .hide.mango-icon-button-special-XL, .hide.mango-button-negative-XL, .hide.mango-button-spotlight-XL, .hide.mango-button-weak, .hide.mango-button-regular, .hide.mango-button-special { display: none; } .mango-button.no-uppercase, .no-uppercase.mango-button-spotlight, .no-uppercase.mango-button-weak-XL, .no-uppercase.mango-icon-button-emphasized-XL, .no-uppercase.mango-icon-button-weak-XL, .no-uppercase.mango-button-weak-L, .no-uppercase.mango-icon-button-emphasized-L, .no-uppercase.mango-icon-button-weak-L, .no-uppercase.mango-button-weak-M, .no-uppercase.mango-icon-button-emphasized-M, .no-uppercase.mango-icon-button-weak-M, .no-uppercase.mango-button-weak-S, .no-uppercase.mango-icon-button-emphasized-S, .no-uppercase.mango-icon-button-weak-S, .no-uppercase.mango-button-emphasised-XL, .no-uppercase.mango-button-emphasised-L, .no-uppercase.mango-button-emphasised-M, .no-uppercase.mango-button-emphasised-S, .no-uppercase.mango-button-regular-XL, .no-uppercase.mango-icon-button-regular-XL, .no-uppercase.mango-button-regular-L, .no-uppercase.mango-icon-button-regular-L, .no-uppercase.mango-button-regular-M, .no-uppercase.mango-icon-button-regular-M, .no-uppercase.mango-button-regular-S, .no-uppercase.mango-icon-button-regular-S, .no-uppercase.mango-button-special-S, .no-uppercase.mango-icon-button-special-S, .no-uppercase.mango-button-negative-S, .no-uppercase.mango-button-spotlight-S, .no-uppercase.mango-button-special-M, .no-uppercase.mango-icon-button-special-M, .no-uppercase.mango-button-negative-M, .no-uppercase.mango-button-spotlight-M, .no-uppercase.mango-button-special-L, .no-uppercase.mango-icon-button-special-L, .no-uppercase.mango-button-negative-L, .no-uppercase.mango-button-spotlight-L, .no-uppercase.mango-button-special-XL, .no-uppercase.mango-icon-button-special-XL, .no-uppercase.mango-button-negative-XL, .no-uppercase.mango-button-spotlight-XL, .no-uppercase.mango-button-weak, .no-uppercase.mango-button-regular, .no-uppercase.mango-button-special { text-transform: none; } .mango-button.disabled, .disabled.mango-button-spotlight, .disabled.mango-button-weak-XL, .disabled.mango-icon-button-emphasized-XL, .disabled.mango-icon-button-weak-XL, .disabled.mango-button-weak-L, .disabled.mango-icon-button-emphasized-L, .disabled.mango-icon-button-weak-L, .disabled.mango-button-weak-M, .disabled.mango-icon-button-emphasized-M, .disabled.mango-icon-button-weak-M, .disabled.mango-button-weak-S, .disabled.mango-icon-button-emphasized-S, .disabled.mango-icon-button-weak-S, .disabled.mango-button-emphasised-XL, .disabled.mango-button-emphasised-L, .disabled.mango-button-emphasised-M, .disabled.mango-button-emphasised-S, .disabled.mango-button-regular-XL, .disabled.mango-icon-button-regular-XL, .disabled.mango-button-regular-L, .disabled.mango-icon-button-regular-L, .disabled.mango-button-regular-M, .disabled.mango-icon-button-regular-M, .disabled.mango-button-regular-S, .disabled.mango-icon-button-regular-S, .disabled.mango-button-special-S, .disabled.mango-icon-button-special-S, .disabled.mango-button-negative-S, .disabled.mango-button-spotlight-S, .disabled.mango-button-special-M, .disabled.mango-icon-button-special-M, .disabled.mango-button-negative-M, .disabled.mango-button-spotlight-M, .disabled.mango-button-special-L, .disabled.mango-icon-button-special-L, .disabled.mango-button-negative-L, .disabled.mango-button-spotlight-L, .disabled.mango-button-special-XL, .disabled.mango-icon-button-special-XL, .disabled.mango-button-negative-XL, .disabled.mango-button-spotlight-XL, .disabled.mango-button-weak, .disabled.mango-button-regular, .disabled.mango-button-special, .mango-button[disabled], [disabled].mango-button-spotlight, [disabled].mango-button-weak-XL, [disabled].mango-icon-button-emphasized-XL, [disabled].mango-icon-button-weak-XL, [disabled].mango-button-weak-L, [disabled].mango-icon-button-emphasized-L, [disabled].mango-icon-button-weak-L, [disabled].mango-button-weak-M, [disabled].mango-icon-button-emphasized-M, [disabled].mango-icon-button-weak-M, [disabled].mango-button-weak-S, [disabled].mango-icon-button-emphasized-S, [disabled].mango-icon-button-weak-S, [disabled].mango-button-emphasised-XL, [disabled].mango-button-emphasised-L, [disabled].mango-button-emphasised-M, [disabled].mango-button-emphasised-S, [disabled].mango-button-regular-XL, [disabled].mango-icon-button-regular-XL, [disabled].mango-button-regular-L, [disabled].mango-icon-button-regular-L, [disabled].mango-button-regular-M, [disabled].mango-icon-button-regular-M, [disabled].mango-button-regular-S, [disabled].mango-icon-button-regular-S, [disabled].mango-button-special-S, [disabled].mango-icon-button-special-S, [disabled].mango-button-negative-S, [disabled].mango-button-spotlight-S, [disabled].mango-button-special-M, [disabled].mango-icon-button-special-M, [disabled].mango-button-negative-M, [disabled].mango-button-spotlight-M, [disabled].mango-button-special-L, [disabled].mango-icon-button-special-L, [disabled].mango-button-negative-L, [disabled].mango-button-spotlight-L, [disabled].mango-button-special-XL, [disabled].mango-icon-button-special-XL, [disabled].mango-button-negative-XL, [disabled].mango-button-spotlight-XL, [disabled].mango-button-weak, [disabled].mango-button-regular, [disabled].mango-button-special { cursor: default; background: var(--background-tinted-base); opacity: var(--disabled-opacity); } .mango-button.disabled, .disabled.mango-button-spotlight, .disabled.mango-button-weak-XL, .disabled.mango-icon-button-emphasized-XL, .disabled.mango-icon-button-weak-XL, .disabled.mango-button-weak-L, .disabled.mango-icon-button-emphasized-L, .disabled.mango-icon-button-weak-L, .disabled.mango-button-weak-M, .disabled.mango-icon-button-emphasized-M, .disabled.mango-icon-button-weak-M, .disabled.mango-button-weak-S, .disabled.mango-icon-button-emphasized-S, .disabled.mango-icon-button-weak-S, .disabled.mango-button-emphasised-XL, .disabled.mango-button-emphasised-L, .disabled.mango-button-emphasised-M, .disabled.mango-button-emphasised-S, .disabled.mango-button-regular-XL, .disabled.mango-icon-button-regular-XL, .disabled.mango-button-regular-L, .disabled.mango-icon-button-regular-L, .disabled.mango-button-regular-M, .disabled.mango-icon-button-regular-M, .disabled.mango-button-regular-S, .disabled.mango-icon-button-regular-S, .disabled.mango-button-special-S, .disabled.mango-icon-button-special-S, .disabled.mango-button-negative-S, .disabled.mango-button-spotlight-S, .disabled.mango-button-special-M, .disabled.mango-icon-button-special-M, .disabled.mango-button-negative-M, .disabled.mango-button-spotlight-M, .disabled.mango-button-special-L, .disabled.mango-icon-button-special-L, .disabled.mango-button-negative-L, .disabled.mango-button-spotlight-L, .disabled.mango-button-special-XL, .disabled.mango-icon-button-special-XL, .disabled.mango-button-negative-XL, .disabled.mango-button-spotlight-XL, .disabled.mango-button-weak, .disabled.mango-button-regular, .disabled.mango-button-special, .mango-button[disabled], [disabled].mango-button-spotlight, [disabled].mango-button-weak-XL, [disabled].mango-icon-button-emphasized-XL, [disabled].mango-icon-button-weak-XL, [disabled].mango-button-weak-L, [disabled].mango-icon-button-emphasized-L, [disabled].mango-icon-button-weak-L, [disabled].mango-button-weak-M, [disabled].mango-icon-button-emphasized-M, [disabled].mango-icon-button-weak-M, [disabled].mango-button-weak-S, [disabled].mango-icon-button-emphasized-S, [disabled].mango-icon-button-weak-S, [disabled].mango-button-emphasised-XL, [disabled].mango-button-emphasised-L, [disabled].mango-button-emphasised-M, [disabled].mango-button-emphasised-S, [disabled].mango-button-regular-XL, [disabled].mango-icon-button-regular-XL, [disabled].mango-button-regular-L, [disabled].mango-icon-button-regular-L, [disabled].mango-button-regular-M, [disabled].mango-icon-button-regular-M, [disabled].mango-button-regular-S, [disabled].mango-icon-button-regular-S, [disabled].mango-button-special-S, [disabled].mango-icon-button-special-S, [disabled].mango-button-negative-S, [disabled].mango-button-spotlight-S, [disabled].mango-button-special-M, [disabled].mango-icon-button-special-M, [disabled].mango-button-negative-M, [disabled].mango-button-spotlight-M, [disabled].mango-button-special-L, [disabled].mango-icon-button-special-L, [disabled].mango-button-negative-L, [disabled].mango-button-spotlight-L, [disabled].mango-button-special-XL, [disabled].mango-icon-button-special-XL, [disabled].mango-button-negative-XL, [disabled].mango-button-spotlight-XL, [disabled].mango-button-weak, [disabled].mango-button-regular, [disabled].mango-button-special, fieldset[disabled] .mango-button, fieldset[disabled] .mango-button-spotlight, fieldset[disabled] .mango-button-weak-XL, fieldset[disabled] .mango-icon-button-emphasized-XL, fieldset[disabled] .mango-icon-button-weak-XL, fieldset[disabled] .mango-button-weak-L, fieldset[disabled] .mango-icon-button-emphasized-L, fieldset[disabled] .mango-icon-button-weak-L, fieldset[disabled] .mango-button-weak-M, fieldset[disabled] .mango-icon-button-emphasized-M, fieldset[disabled] .mango-icon-button-weak-M, fieldset[disabled] .mango-button-weak-S, fieldset[disabled] .mango-icon-button-emphasized-S, fieldset[disabled] .mango-icon-button-weak-S, fieldset[disabled] .mango-button-emphasised-XL, fieldset[disabled] .mango-button-emphasised-L, fieldset[disabled] .mango-button-emphasised-M, fieldset[disabled] .mango-button-emphasised-S, fieldset[disabled] .mango-button-regular-XL, fieldset[disabled] .mango-icon-button-regular-XL, fieldset[disabled] .mango-button-regular-L, fieldset[disabled] .mango-icon-button-regular-L, fieldset[disabled] .mango-button-regular-M, fieldset[disabled] .mango-icon-button-regular-M, fieldset[disabled] .mango-button-regular-S, fieldset[disabled] .mango-icon-button-regular-S, fieldset[disabled] .mango-button-special-S, fieldset[disabled] .mango-icon-button-special-S, fieldset[disabled] .mango-button-negative-S, fieldset[disabled] .mango-button-spotlight-S, fieldset[disabled] .mango-button-special-M, fieldset[disabled] .mango-icon-button-special-M, fieldset[disabled] .mango-button-negative-M, fieldset[disabled] .mango-button-spotlight-M, fieldset[disabled] .mango-button-special-L, fieldset[disabled] .mango-icon-button-special-L, fieldset[disabled] .mango-button-negative-L, fieldset[disabled] .mango-button-spotlight-L, fieldset[disabled] .mango-button-special-XL, fieldset[disabled] .mango-icon-button-special-XL, fieldset[disabled] .mango-button-negative-XL, fieldset[disabled] .mango-button-spotlight-XL, fieldset[disabled] .mango-button-weak, fieldset[disabled] .mango-button-regular, fieldset[disabled] .mango-button-special { will-change: transform; } .mango-button-special { font-family: var(--font-family); font-weight: 400; background-color: var(--background-base); color: var(--text-base); transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out; } .mango-button-special .soundtrap-icon { line-height: inherit; } .mango-button-special:hover { background-color: var(--background-highlight); color: var(--text-base); transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out; } .mango-button-special:focus { color: var(--text-base); } .mango-button-special:active { box-shadow: none; outline: 0 !important; color: var(--text-base); background-color: var(--background-press); } .mango-button-special:disabled, .mango-button-special[aria-disabled=true] { opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-regular { background-color: transparent; border-color: var(--essential-subdued); color: var(--text-base) !important; } .mango-button-regular:focus { color: var(--text-base); } .mango-button-regular.selected { background-color: var(--background-press); } .mango-button-regular.selected:hover { background-color: var(--background-press); } .mango-button-regular:hover { color: var(--text-base); background-color: var(--background-highlight); opacity: 1; } .mango-button-regular:active { color: var(--text-base); background-color: var(--background-elevated-base); } .mango-button-regular:disabled { background-color: var(--background-base); opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-weak { background-color: transparent; border-color: transparent; color: var(--text-base); } .mango-button-weak:focus { color: var(--text-base); } .mango-button-weak.selected { background-color: var(--background-press); } .mango-button-weak.selected:hover { background-color: var(--background-press); } .mango-button-weak:hover { color: var(--text-base); border-color: var(--essential-base); background-color: var(--background-highlight); opacity: 1; } .mango-button-weak:active { color: var(--text-base); background-color: var(--background-elevated-base); } .mango-button-weak:disabled, .mango-button-weak.disabled { background-color: var(--background-base); opacity: var(--disabled-opacity); pointer-events: none; color: var(--text-base) !important; } .mango-button-special-XL, .mango-icon-button-special-XL, .mango-button-negative-XL, .mango-button-spotlight-XL { font-family: var(--font-family); font-weight: 400; background-color: var(--background-base); color: var(--text-base); transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out; padding-left: 20px; padding-right: 20px; font-size: 17px; height: 44px; min-width: 120px; letter-spacing: 0; } .mango-button-special-XL .soundtrap-icon, .mango-icon-button-special-XL .soundtrap-icon, .mango-button-negative-XL .soundtrap-icon, .mango-button-spotlight-XL .soundtrap-icon { line-height: inherit; } .mango-button-special-XL:hover, .mango-icon-button-special-XL:hover, .mango-button-negative-XL:hover, .mango-button-spotlight-XL:hover { background-color: var(--background-highlight); color: var(--text-base); transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out; } .mango-button-special-XL:focus, .mango-icon-button-special-XL:focus, .mango-button-negative-XL:focus, .mango-button-spotlight-XL:focus { color: var(--text-base); } .mango-button-special-XL:active, .mango-icon-button-special-XL:active, .mango-button-negative-XL:active, .mango-button-spotlight-XL:active { box-shadow: none; outline: 0 !important; color: var(--text-base); background-color: var(--background-press); } .mango-button-special-XL:disabled, .mango-icon-button-special-XL:disabled, .mango-button-negative-XL:disabled, .mango-button-spotlight-XL:disabled, .mango-button-special-XL[aria-disabled=true], [aria-disabled=true].mango-icon-button-special-XL, [aria-disabled=true].mango-button-negative-XL, [aria-disabled=true].mango-button-spotlight-XL { opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-special-XL .soundtrap-icon, .mango-icon-button-special-XL .soundtrap-icon, .mango-button-negative-XL .soundtrap-icon, .mango-button-spotlight-XL .soundtrap-icon { margin-right: 10px; } .mango-button-special-XL.button_circular, .button_circular.mango-icon-button-special-XL, .button_circular.mango-button-negative-XL, .button_circular.mango-button-spotlight-XL { width: 44px; } .mango-button-special-L, .mango-icon-button-special-L, .mango-button-negative-L, .mango-button-spotlight-L { font-family: var(--font-family); font-weight: 400; background-color: var(--background-base); color: var(--text-base); transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out; padding-left: 14px; padding-right: 14px; font-size: 13px; line-height: 32px; height: 34px; min-width: 100px; letter-spacing: 0; } .mango-button-special-L .soundtrap-icon, .mango-icon-button-special-L .soundtrap-icon, .mango-button-negative-L .soundtrap-icon, .mango-button-spotlight-L .soundtrap-icon { line-height: inherit; } .mango-button-special-L:hover, .mango-icon-button-special-L:hover, .mango-button-negative-L:hover, .mango-button-spotlight-L:hover { background-color: var(--background-highlight); color: var(--text-base); transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out; } .mango-button-special-L:focus, .mango-icon-button-special-L:focus, .mango-button-negative-L:focus, .mango-button-spotlight-L:focus { color: var(--text-base); } .mango-button-special-L:active, .mango-icon-button-special-L:active, .mango-button-negative-L:active, .mango-button-spotlight-L:active { box-shadow: none; outline: 0 !important; color: var(--text-base); background-color: var(--background-press); } .mango-button-special-L:disabled, .mango-icon-button-special-L:disabled, .mango-button-negative-L:disabled, .mango-button-spotlight-L:disabled, .mango-button-special-L[aria-disabled=true], [aria-disabled=true].mango-icon-button-special-L, [aria-disabled=true].mango-button-negative-L, [aria-disabled=true].mango-button-spotlight-L { opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-special-L.button_circular, .button_circular.mango-icon-button-special-L, .button_circular.mango-button-negative-L, .button_circular.mango-button-spotlight-L { min-width: auto; padding: 0; text-align: center; width: 34px; } .mango-button-special-L.button_circular .soundtrap-icon, .button_circular.mango-icon-button-special-L .soundtrap-icon, .button_circular.mango-button-negative-L .soundtrap-icon, .button_circular.mango-button-spotlight-L .soundtrap-icon { margin-right: 0; } .mango-button-special-M, .mango-icon-button-special-M, .mango-button-negative-M, .mango-button-spotlight-M { font-family: var(--font-family); font-weight: 400; background-color: var(--background-base); color: var(--text-base); transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out; font-size: 12px; height: 26px; letter-spacing: 0; min-width: 90px; padding-bottom: 1px; padding-left: 14px; padding-right: 14px; } .mango-button-special-M .soundtrap-icon, .mango-icon-button-special-M .soundtrap-icon, .mango-button-negative-M .soundtrap-icon, .mango-button-spotlight-M .soundtrap-icon { line-height: inherit; } .mango-button-special-M:hover, .mango-icon-button-special-M:hover, .mango-button-negative-M:hover, .mango-button-spotlight-M:hover { background-color: var(--background-highlight); color: var(--text-base); transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out; } .mango-button-special-M:focus, .mango-icon-button-special-M:focus, .mango-button-negative-M:focus, .mango-button-spotlight-M:focus { color: var(--text-base); } .mango-button-special-M:active, .mango-icon-button-special-M:active, .mango-button-negative-M:active, .mango-button-spotlight-M:active { box-shadow: none; outline: 0 !important; color: var(--text-base); background-color: var(--background-press); } .mango-button-special-M:disabled, .mango-icon-button-special-M:disabled, .mango-button-negative-M:disabled, .mango-button-spotlight-M:disabled, .mango-button-special-M[aria-disabled=true], [aria-disabled=true].mango-icon-button-special-M, [aria-disabled=true].mango-button-negative-M, [aria-disabled=true].mango-button-spotlight-M { opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-special-M.button_circular, .button_circular.mango-icon-button-special-M, .button_circular.mango-button-negative-M, .button_circular.mango-button-spotlight-M { width: 26px; } .mango-button-special-S, .mango-icon-button-special-S, .mango-button-negative-S, .mango-button-spotlight-S { font-family: var(--font-family); font-weight: 400; background-color: var(--background-base); color: var(--text-base); transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out; padding-left: 12px; padding-right: 12px; padding-bottom: 1px; font-size: 12px; line-height: 19px; height: 22px; min-width: 80px; letter-spacing: 0; } .mango-button-special-S .soundtrap-icon, .mango-icon-button-special-S .soundtrap-icon, .mango-button-negative-S .soundtrap-icon, .mango-button-spotlight-S .soundtrap-icon { line-height: inherit; } .mango-button-special-S:hover, .mango-icon-button-special-S:hover, .mango-button-negative-S:hover, .mango-button-spotlight-S:hover { background-color: var(--background-highlight); color: var(--text-base); transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out; } .mango-button-special-S:focus, .mango-icon-button-special-S:focus, .mango-button-negative-S:focus, .mango-button-spotlight-S:focus { color: var(--text-base); } .mango-button-special-S:active, .mango-icon-button-special-S:active, .mango-button-negative-S:active, .mango-button-spotlight-S:active { box-shadow: none; outline: 0 !important; color: var(--text-base); background-color: var(--background-press); } .mango-button-special-S:disabled, .mango-icon-button-special-S:disabled, .mango-button-negative-S:disabled, .mango-button-spotlight-S:disabled, .mango-button-special-S[aria-disabled=true], [aria-disabled=true].mango-icon-button-special-S, [aria-disabled=true].mango-button-negative-S, [aria-disabled=true].mango-button-spotlight-S { opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-special-S.button_circular, .button_circular.mango-icon-button-special-S, .button_circular.mango-button-negative-S, .button_circular.mango-button-spotlight-S { width: 22px; } .mango-button-regular-S, .mango-icon-button-regular-S { font-family: var(--font-family); font-weight: 400; background-color: var(--background-base); color: var(--text-base); transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out; padding-left: 12px; padding-right: 12px; padding-bottom: 1px; font-size: 12px; line-height: 19px; height: 22px; min-width: 80px; letter-spacing: 0; background-color: transparent; border-color: var(--essential-subdued); color: var(--text-base) !important; } .mango-button-regular-S .soundtrap-icon, .mango-icon-button-regular-S .soundtrap-icon { line-height: inherit; } .mango-button-regular-S:hover, .mango-icon-button-regular-S:hover { background-color: var(--background-highlight); color: var(--text-base); transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out; } .mango-button-regular-S:focus, .mango-icon-button-regular-S:focus { color: var(--text-base); } .mango-button-regular-S:active, .mango-icon-button-regular-S:active { box-shadow: none; outline: 0 !important; color: var(--text-base); background-color: var(--background-press); } .mango-button-regular-S:disabled, .mango-icon-button-regular-S:disabled, .mango-button-regular-S[aria-disabled=true], [aria-disabled=true].mango-icon-button-regular-S { opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-regular-S.button_circular, .button_circular.mango-icon-button-regular-S { width: 22px; } .mango-button-regular-S:focus, .mango-icon-button-regular-S:focus { color: var(--text-base); } .mango-button-regular-S.selected, .selected.mango-icon-button-regular-S { background-color: var(--background-press); } .mango-button-regular-S.selected:hover, .selected.mango-icon-button-regular-S:hover { background-color: var(--background-press); } .mango-button-regular-S:hover, .mango-icon-button-regular-S:hover { color: var(--text-base); background-color: var(--background-highlight); opacity: 1; } .mango-button-regular-S:active, .mango-icon-button-regular-S:active { color: var(--text-base); background-color: var(--background-elevated-base); } .mango-button-regular-S:disabled, .mango-icon-button-regular-S:disabled { background-color: var(--background-base); opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-regular-M, .mango-icon-button-regular-M { font-family: var(--font-family); font-weight: 400; background-color: var(--background-base); color: var(--text-base); transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out; font-size: 12px; height: 26px; letter-spacing: 0; min-width: 90px; padding-bottom: 1px; padding-left: 14px; padding-right: 14px; background-color: transparent; border-color: var(--essential-subdued); color: var(--text-base) !important; } .mango-button-regular-M .soundtrap-icon, .mango-icon-button-regular-M .soundtrap-icon { line-height: inherit; } .mango-button-regular-M:hover, .mango-icon-button-regular-M:hover { background-color: var(--background-highlight); color: var(--text-base); transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out; } .mango-button-regular-M:focus, .mango-icon-button-regular-M:focus { color: var(--text-base); } .mango-button-regular-M:active, .mango-icon-button-regular-M:active { box-shadow: none; outline: 0 !important; color: var(--text-base); background-color: var(--background-press); } .mango-button-regular-M:disabled, .mango-icon-button-regular-M:disabled, .mango-button-regular-M[aria-disabled=true], [aria-disabled=true].mango-icon-button-regular-M { opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-regular-M.button_circular, .button_circular.mango-icon-button-regular-M { width: 26px; } .mango-button-regular-M:focus, .mango-icon-button-regular-M:focus { color: var(--text-base); } .mango-button-regular-M.selected, .selected.mango-icon-button-regular-M { background-color: var(--background-press); } .mango-button-regular-M.selected:hover, .selected.mango-icon-button-regular-M:hover { background-color: var(--background-press); } .mango-button-regular-M:hover, .mango-icon-button-regular-M:hover { color: var(--text-base); background-color: var(--background-highlight); opacity: 1; } .mango-button-regular-M:active, .mango-icon-button-regular-M:active { color: var(--text-base); background-color: var(--background-elevated-base); } .mango-button-regular-M:disabled, .mango-icon-button-regular-M:disabled { background-color: var(--background-base); opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-regular-L, .mango-icon-button-regular-L { font-family: var(--font-family); font-weight: 400; background-color: var(--background-base); color: var(--text-base); transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out; padding-left: 14px; padding-right: 14px; font-size: 13px; line-height: 32px; height: 34px; min-width: 100px; letter-spacing: 0; background-color: transparent; border-color: var(--essential-subdued); color: var(--text-base) !important; } .mango-button-regular-L .soundtrap-icon, .mango-icon-button-regular-L .soundtrap-icon { line-height: inherit; } .mango-button-regular-L:hover, .mango-icon-button-regular-L:hover { background-color: var(--background-highlight); color: var(--text-base); transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out; } .mango-button-regular-L:focus, .mango-icon-button-regular-L:focus { color: var(--text-base); } .mango-button-regular-L:active, .mango-icon-button-regular-L:active { box-shadow: none; outline: 0 !important; color: var(--text-base); background-color: var(--background-press); } .mango-button-regular-L:disabled, .mango-icon-button-regular-L:disabled, .mango-button-regular-L[aria-disabled=true], [aria-disabled=true].mango-icon-button-regular-L { opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-regular-L.button_circular, .button_circular.mango-icon-button-regular-L { min-width: auto; padding: 0; text-align: center; width: 34px; } .mango-button-regular-L.button_circular .soundtrap-icon, .button_circular.mango-icon-button-regular-L .soundtrap-icon { margin-right: 0; } .mango-button-regular-L:focus, .mango-icon-button-regular-L:focus { color: var(--text-base); } .mango-button-regular-L.selected, .selected.mango-icon-button-regular-L { background-color: var(--background-press); } .mango-button-regular-L.selected:hover, .selected.mango-icon-button-regular-L:hover { background-color: var(--background-press); } .mango-button-regular-L:hover, .mango-icon-button-regular-L:hover { color: var(--text-base); background-color: var(--background-highlight); opacity: 1; } .mango-button-regular-L:active, .mango-icon-button-regular-L:active { color: var(--text-base); background-color: var(--background-elevated-base); } .mango-button-regular-L:disabled, .mango-icon-button-regular-L:disabled { background-color: var(--background-base); opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-regular-XL, .mango-icon-button-regular-XL { font-family: var(--font-family); font-weight: 400; background-color: var(--background-base); color: var(--text-base); transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out; padding-left: 20px; padding-right: 20px; font-size: 17px; height: 44px; min-width: 120px; letter-spacing: 0; background-color: transparent; border-color: var(--essential-subdued); color: var(--text-base) !important; } .mango-button-regular-XL .soundtrap-icon, .mango-icon-button-regular-XL .soundtrap-icon { line-height: inherit; } .mango-button-regular-XL:hover, .mango-icon-button-regular-XL:hover { background-color: var(--background-highlight); color: var(--text-base); transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out; } .mango-button-regular-XL:focus, .mango-icon-button-regular-XL:focus { color: var(--text-base); } .mango-button-regular-XL:active, .mango-icon-button-regular-XL:active { box-shadow: none; outline: 0 !important; color: var(--text-base); background-color: var(--background-press); } .mango-button-regular-XL:disabled, .mango-icon-button-regular-XL:disabled, .mango-button-regular-XL[aria-disabled=true], [aria-disabled=true].mango-icon-button-regular-XL { opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-regular-XL .soundtrap-icon, .mango-icon-button-regular-XL .soundtrap-icon { margin-right: 10px; } .mango-button-regular-XL.button_circular, .button_circular.mango-icon-button-regular-XL { width: 44px; } .mango-button-regular-XL:focus, .mango-icon-button-regular-XL:focus { color: var(--text-base); } .mango-button-regular-XL.selected, .selected.mango-icon-button-regular-XL { background-color: var(--background-press); } .mango-button-regular-XL.selected:hover, .selected.mango-icon-button-regular-XL:hover { background-color: var(--background-press); } .mango-button-regular-XL:hover, .mango-icon-button-regular-XL:hover { color: var(--text-base); background-color: var(--background-highlight); opacity: 1; } .mango-button-regular-XL:active, .mango-icon-button-regular-XL:active { color: var(--text-base); background-color: var(--background-elevated-base); } .mango-button-regular-XL:disabled, .mango-icon-button-regular-XL:disabled { background-color: var(--background-base); opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-emphasised-S { font-family: var(--font-family); font-weight: 400; background-color: var(--background-base); color: var(--text-base); transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out; padding-left: 12px; padding-right: 12px; padding-bottom: 1px; font-size: 12px; line-height: 19px; height: 22px; min-width: 80px; letter-spacing: 0; background-color: transparent; border-color: var(--essential-subdued); color: var(--text-base) !important; background-color: var(--background-tinted-base); } .mango-button-emphasised-S .soundtrap-icon { line-height: inherit; } .mango-button-emphasised-S:hover { background-color: var(--background-highlight); color: var(--text-base); transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out; } .mango-button-emphasised-S:focus { color: var(--text-base); } .mango-button-emphasised-S:active { box-shadow: none; outline: 0 !important; color: var(--text-base); background-color: var(--background-press); } .mango-button-emphasised-S:disabled, .mango-button-emphasised-S[aria-disabled=true] { opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-emphasised-S.button_circular { width: 22px; } .mango-button-emphasised-S:focus { color: var(--text-base); } .mango-button-emphasised-S.selected { background-color: var(--background-press); } .mango-button-emphasised-S.selected:hover { background-color: var(--background-press); } .mango-button-emphasised-S:hover { color: var(--text-base); background-color: var(--background-highlight); opacity: 1; } .mango-button-emphasised-S:active { color: var(--text-base); background-color: var(--background-elevated-base); } .mango-button-emphasised-S:disabled { background-color: var(--background-base); opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-emphasised-S:hover { background-color: var(--background-tinted-highlight); } .mango-button-emphasised-M { font-family: var(--font-family); font-weight: 400; background-color: var(--background-base); color: var(--text-base); transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out; font-size: 12px; height: 26px; letter-spacing: 0; min-width: 90px; padding-bottom: 1px; padding-left: 14px; padding-right: 14px; background-color: transparent; border-color: var(--essential-subdued); color: var(--text-base) !important; background-color: var(--background-tinted-base); } .mango-button-emphasised-M .soundtrap-icon { line-height: inherit; } .mango-button-emphasised-M:hover { background-color: var(--background-highlight); color: var(--text-base); transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out; } .mango-button-emphasised-M:focus { color: var(--text-base); } .mango-button-emphasised-M:active { box-shadow: none; outline: 0 !important; color: var(--text-base); background-color: var(--background-press); } .mango-button-emphasised-M:disabled, .mango-button-emphasised-M[aria-disabled=true] { opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-emphasised-M.button_circular { width: 26px; } .mango-button-emphasised-M:focus { color: var(--text-base); } .mango-button-emphasised-M.selected { background-color: var(--background-press); } .mango-button-emphasised-M.selected:hover { background-color: var(--background-press); } .mango-button-emphasised-M:hover { color: var(--text-base); background-color: var(--background-highlight); opacity: 1; } .mango-button-emphasised-M:active { color: var(--text-base); background-color: var(--background-elevated-base); } .mango-button-emphasised-M:disabled { background-color: var(--background-base); opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-emphasised-M:hover { background-color: var(--background-tinted-highlight); } .mango-button-emphasised-L { font-family: var(--font-family); font-weight: 400; background-color: var(--background-base); color: var(--text-base); transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out; padding-left: 14px; padding-right: 14px; font-size: 13px; line-height: 32px; height: 34px; min-width: 100px; letter-spacing: 0; background-color: transparent; border-color: var(--essential-subdued); color: var(--text-base) !important; background-color: var(--background-tinted-base); } .mango-button-emphasised-L .soundtrap-icon { line-height: inherit; } .mango-button-emphasised-L:hover { background-color: var(--background-highlight); color: var(--text-base); transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out; } .mango-button-emphasised-L:focus { color: var(--text-base); } .mango-button-emphasised-L:active { box-shadow: none; outline: 0 !important; color: var(--text-base); background-color: var(--background-press); } .mango-button-emphasised-L:disabled, .mango-button-emphasised-L[aria-disabled=true] { opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-emphasised-L.button_circular { min-width: auto; padding: 0; text-align: center; width: 34px; } .mango-button-emphasised-L.button_circular .soundtrap-icon { margin-right: 0; } .mango-button-emphasised-L:focus { color: var(--text-base); } .mango-button-emphasised-L.selected { background-color: var(--background-press); } .mango-button-emphasised-L.selected:hover { background-color: var(--background-press); } .mango-button-emphasised-L:hover { color: var(--text-base); background-color: var(--background-highlight); opacity: 1; } .mango-button-emphasised-L:active { color: var(--text-base); background-color: var(--background-elevated-base); } .mango-button-emphasised-L:disabled { background-color: var(--background-base); opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-emphasised-L:hover { background-color: var(--background-tinted-highlight); } .mango-button-emphasised-XL { font-family: var(--font-family); font-weight: 400; background-color: var(--background-base); color: var(--text-base); transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out; padding-left: 20px; padding-right: 20px; font-size: 17px; height: 44px; min-width: 120px; letter-spacing: 0; background-color: transparent; border-color: var(--essential-subdued); color: var(--text-base) !important; background-color: var(--background-tinted-base); } .mango-button-emphasised-XL .soundtrap-icon { line-height: inherit; } .mango-button-emphasised-XL:hover { background-color: var(--background-highlight); color: var(--text-base); transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out; } .mango-button-emphasised-XL:focus { color: var(--text-base); } .mango-button-emphasised-XL:active { box-shadow: none; outline: 0 !important; color: var(--text-base); background-color: var(--background-press); } .mango-button-emphasised-XL:disabled, .mango-button-emphasised-XL[aria-disabled=true] { opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-emphasised-XL .soundtrap-icon { margin-right: 10px; } .mango-button-emphasised-XL.button_circular { width: 44px; } .mango-button-emphasised-XL:focus { color: var(--text-base); } .mango-button-emphasised-XL.selected { background-color: var(--background-press); } .mango-button-emphasised-XL.selected:hover { background-color: var(--background-press); } .mango-button-emphasised-XL:hover { color: var(--text-base); background-color: var(--background-highlight); opacity: 1; } .mango-button-emphasised-XL:active { color: var(--text-base); background-color: var(--background-elevated-base); } .mango-button-emphasised-XL:disabled { background-color: var(--background-base); opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-emphasised-XL:hover { background-color: var(--background-tinted-highlight); } .mango-button-weak-S, .mango-icon-button-emphasized-S, .mango-icon-button-weak-S { font-family: var(--font-family); font-weight: 400; background-color: var(--background-base); color: var(--text-base); transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out; padding-left: 12px; padding-right: 12px; padding-bottom: 1px; font-size: 12px; line-height: 19px; height: 22px; min-width: 80px; letter-spacing: 0; background-color: transparent; border-color: transparent; color: var(--text-base); } .mango-button-weak-S .soundtrap-icon, .mango-icon-button-emphasized-S .soundtrap-icon, .mango-icon-button-weak-S .soundtrap-icon { line-height: inherit; } .mango-button-weak-S:hover, .mango-icon-button-emphasized-S:hover, .mango-icon-button-weak-S:hover { background-color: var(--background-highlight); color: var(--text-base); transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out; } .mango-button-weak-S:focus, .mango-icon-button-emphasized-S:focus, .mango-icon-button-weak-S:focus { color: var(--text-base); } .mango-button-weak-S:active, .mango-icon-button-emphasized-S:active, .mango-icon-button-weak-S:active { box-shadow: none; outline: 0 !important; color: var(--text-base); background-color: var(--background-press); } .mango-button-weak-S:disabled, .mango-icon-button-emphasized-S:disabled, .mango-icon-button-weak-S:disabled, .mango-button-weak-S[aria-disabled=true], [aria-disabled=true].mango-icon-button-emphasized-S, [aria-disabled=true].mango-icon-button-weak-S { opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-weak-S.button_circular, .button_circular.mango-icon-button-emphasized-S, .button_circular.mango-icon-button-weak-S { width: 22px; } .mango-button-weak-S:focus, .mango-icon-button-emphasized-S:focus, .mango-icon-button-weak-S:focus { color: var(--text-base); } .mango-button-weak-S.selected, .selected.mango-icon-button-emphasized-S, .selected.mango-icon-button-weak-S { background-color: var(--background-press); } .mango-button-weak-S.selected:hover, .selected.mango-icon-button-emphasized-S:hover, .selected.mango-icon-button-weak-S:hover { background-color: var(--background-press); } .mango-button-weak-S:hover, .mango-icon-button-emphasized-S:hover, .mango-icon-button-weak-S:hover { color: var(--text-base); border-color: var(--essential-base); background-color: var(--background-highlight); opacity: 1; } .mango-button-weak-S:active, .mango-icon-button-emphasized-S:active, .mango-icon-button-weak-S:active { color: var(--text-base); background-color: var(--background-elevated-base); } .mango-button-weak-S:disabled, .mango-icon-button-emphasized-S:disabled, .mango-icon-button-weak-S:disabled, .mango-button-weak-S.disabled, .disabled.mango-icon-button-emphasized-S, .disabled.mango-icon-button-weak-S { background-color: var(--background-base); opacity: var(--disabled-opacity); pointer-events: none; color: var(--text-base) !important; } .mango-button-weak-M, .mango-icon-button-emphasized-M, .mango-icon-button-weak-M { font-family: var(--font-family); font-weight: 400; background-color: var(--background-base); color: var(--text-base); transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out; font-size: 12px; height: 26px; letter-spacing: 0; min-width: 90px; padding-bottom: 1px; padding-left: 14px; padding-right: 14px; background-color: transparent; border-color: transparent; color: var(--text-base); } .mango-button-weak-M .soundtrap-icon, .mango-icon-button-emphasized-M .soundtrap-icon, .mango-icon-button-weak-M .soundtrap-icon { line-height: inherit; } .mango-button-weak-M:hover, .mango-icon-button-emphasized-M:hover, .mango-icon-button-weak-M:hover { background-color: var(--background-highlight); color: var(--text-base); transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out; } .mango-button-weak-M:focus, .mango-icon-button-emphasized-M:focus, .mango-icon-button-weak-M:focus { color: var(--text-base); } .mango-button-weak-M:active, .mango-icon-button-emphasized-M:active, .mango-icon-button-weak-M:active { box-shadow: none; outline: 0 !important; color: var(--text-base); background-color: var(--background-press); } .mango-button-weak-M:disabled, .mango-icon-button-emphasized-M:disabled, .mango-icon-button-weak-M:disabled, .mango-button-weak-M[aria-disabled=true], [aria-disabled=true].mango-icon-button-emphasized-M, [aria-disabled=true].mango-icon-button-weak-M { opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-weak-M.button_circular, .button_circular.mango-icon-button-emphasized-M, .button_circular.mango-icon-button-weak-M { width: 26px; } .mango-button-weak-M:focus, .mango-icon-button-emphasized-M:focus, .mango-icon-button-weak-M:focus { color: var(--text-base); } .mango-button-weak-M.selected, .selected.mango-icon-button-emphasized-M, .selected.mango-icon-button-weak-M { background-color: var(--background-press); } .mango-button-weak-M.selected:hover, .selected.mango-icon-button-emphasized-M:hover, .selected.mango-icon-button-weak-M:hover { background-color: var(--background-press); } .mango-button-weak-M:hover, .mango-icon-button-emphasized-M:hover, .mango-icon-button-weak-M:hover { color: var(--text-base); border-color: var(--essential-base); background-color: var(--background-highlight); opacity: 1; } .mango-button-weak-M:active, .mango-icon-button-emphasized-M:active, .mango-icon-button-weak-M:active { color: var(--text-base); background-color: var(--background-elevated-base); } .mango-button-weak-M:disabled, .mango-icon-button-emphasized-M:disabled, .mango-icon-button-weak-M:disabled, .mango-button-weak-M.disabled, .disabled.mango-icon-button-emphasized-M, .disabled.mango-icon-button-weak-M { background-color: var(--background-base); opacity: var(--disabled-opacity); pointer-events: none; color: var(--text-base) !important; } .mango-button-weak-L, .mango-icon-button-emphasized-L, .mango-icon-button-weak-L { font-family: var(--font-family); font-weight: 400; background-color: var(--background-base); color: var(--text-base); transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out; padding-left: 14px; padding-right: 14px; font-size: 13px; line-height: 32px; height: 34px; min-width: 100px; letter-spacing: 0; background-color: transparent; border-color: transparent; color: var(--text-base); } .mango-button-weak-L .soundtrap-icon, .mango-icon-button-emphasized-L .soundtrap-icon, .mango-icon-button-weak-L .soundtrap-icon { line-height: inherit; } .mango-button-weak-L:hover, .mango-icon-button-emphasized-L:hover, .mango-icon-button-weak-L:hover { background-color: var(--background-highlight); color: var(--text-base); transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out; } .mango-button-weak-L:focus, .mango-icon-button-emphasized-L:focus, .mango-icon-button-weak-L:focus { color: var(--text-base); } .mango-button-weak-L:active, .mango-icon-button-emphasized-L:active, .mango-icon-button-weak-L:active { box-shadow: none; outline: 0 !important; color: var(--text-base); background-color: var(--background-press); } .mango-button-weak-L:disabled, .mango-icon-button-emphasized-L:disabled, .mango-icon-button-weak-L:disabled, .mango-button-weak-L[aria-disabled=true], [aria-disabled=true].mango-icon-button-emphasized-L, [aria-disabled=true].mango-icon-button-weak-L { opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-weak-L.button_circular, .button_circular.mango-icon-button-emphasized-L, .button_circular.mango-icon-button-weak-L { min-width: auto; padding: 0; text-align: center; width: 34px; } .mango-button-weak-L.button_circular .soundtrap-icon, .button_circular.mango-icon-button-emphasized-L .soundtrap-icon, .button_circular.mango-icon-button-weak-L .soundtrap-icon { margin-right: 0; } .mango-button-weak-L:focus, .mango-icon-button-emphasized-L:focus, .mango-icon-button-weak-L:focus { color: var(--text-base); } .mango-button-weak-L.selected, .selected.mango-icon-button-emphasized-L, .selected.mango-icon-button-weak-L { background-color: var(--background-press); } .mango-button-weak-L.selected:hover, .selected.mango-icon-button-emphasized-L:hover, .selected.mango-icon-button-weak-L:hover { background-color: var(--background-press); } .mango-button-weak-L:hover, .mango-icon-button-emphasized-L:hover, .mango-icon-button-weak-L:hover { color: var(--text-base); border-color: var(--essential-base); background-color: var(--background-highlight); opacity: 1; } .mango-button-weak-L:active, .mango-icon-button-emphasized-L:active, .mango-icon-button-weak-L:active { color: var(--text-base); background-color: var(--background-elevated-base); } .mango-button-weak-L:disabled, .mango-icon-button-emphasized-L:disabled, .mango-icon-button-weak-L:disabled, .mango-button-weak-L.disabled, .disabled.mango-icon-button-emphasized-L, .disabled.mango-icon-button-weak-L { background-color: var(--background-base); opacity: var(--disabled-opacity); pointer-events: none; color: var(--text-base) !important; } .mango-button-weak-XL, .mango-icon-button-emphasized-XL, .mango-icon-button-weak-XL { font-family: var(--font-family); font-weight: 400; background-color: var(--background-base); color: var(--text-base); transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out; padding-left: 20px; padding-right: 20px; font-size: 17px; height: 44px; min-width: 120px; letter-spacing: 0; background-color: transparent; border-color: transparent; color: var(--text-base); } .mango-button-weak-XL .soundtrap-icon, .mango-icon-button-emphasized-XL .soundtrap-icon, .mango-icon-button-weak-XL .soundtrap-icon { line-height: inherit; } .mango-button-weak-XL:hover, .mango-icon-button-emphasized-XL:hover, .mango-icon-button-weak-XL:hover { background-color: var(--background-highlight); color: var(--text-base); transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out; } .mango-button-weak-XL:focus, .mango-icon-button-emphasized-XL:focus, .mango-icon-button-weak-XL:focus { color: var(--text-base); } .mango-button-weak-XL:active, .mango-icon-button-emphasized-XL:active, .mango-icon-button-weak-XL:active { box-shadow: none; outline: 0 !important; color: var(--text-base); background-color: var(--background-press); } .mango-button-weak-XL:disabled, .mango-icon-button-emphasized-XL:disabled, .mango-icon-button-weak-XL:disabled, .mango-button-weak-XL[aria-disabled=true], [aria-disabled=true].mango-icon-button-emphasized-XL, [aria-disabled=true].mango-icon-button-weak-XL { opacity: var(--disabled-opacity); pointer-events: none; } .mango-button-weak-XL .soundtrap-icon, .mango-icon-button-emphasized-XL .soundtrap-icon, .mango-icon-button-weak-XL .soundtrap-icon { margin-right: 10px; } .mango-button-weak-XL.button_circular, .button_circular.mango-icon-button-emphasized-XL, .button_circular.mango-icon-button-weak-XL { width: 44px; } .mango-button-weak-XL:focus, .mango-icon-button-emphasized-XL:focus, .mango-icon-button-weak-XL:focus { color: var(--text-base); } .mango-button-weak-XL.selected, .selected.mango-icon-button-emphasized-XL, .selected.mango-icon-button-weak-XL { background-color: var(--background-press); } .mango-button-weak-XL.selected:hover, .selected.mango-icon-button-emphasized-XL:hover, .selected.mango-icon-button-weak-XL:hover { background-color: var(--background-press); } .mango-button-weak-XL:hover, .mango-icon-button-emphasized-XL:hover, .mango-icon-button-weak-XL:hover { color: var(--text-base); border-color: var(--essential-base); background-color: var(--background-highlight); opacity: 1; } .mango-button-weak-XL:active, .mango-icon-button-emphasized-XL:active, .mango-icon-button-weak-XL:active { color: var(--text-base); background-color: var(--background-elevated-base); } .mango-button-weak-XL:disabled, .mango-icon-button-emphasized-XL:disabled, .mango-icon-button-weak-XL:disabled, .mango-button-weak-XL.disabled, .disabled.mango-icon-button-emphasized-XL, .disabled.mango-icon-button-weak-XL { background-color: var(--background-base); opacity: var(--disabled-opacity); pointer-events: none; color: var(--text-base) !important; } .mango-button-spotlight { font-family: var(--font-family); font-weight: 400; background-color: var(--background-base); color: var(--text-base); transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background-image 0.1s ease-out; } .mango-button-spotlight .soundtrap-icon { line-height: inherit; } .mango-button-spotlight:hover { background-color: var(--background-highlight); color: var(--text-base); transition: background-color 0.03s ease-out, border-color 0.03s ease-out, color 0.03s ease-out, background-image 0.03s ease-out; } .mango-button-spotlight:focus { color: var(--text-base); } .mango-button-spotlight:active { box-shadow: none; outline: 0 !important; color: var(--text-base); background-color: var(--background-press); } .mango-button-spotlight:disabled, .mango-button-spotlight[aria-disabled=true] { opacity: var(--disabled-opacity); pointer-events: none; } .button-naked { background: none; appearance: none; border: none; text-align: inherit; color: inherit; font-family: inherit; line-height: inherit; padding: 0; } .mango-label-base, .mango-label-small, .mango-label-medium { font-weight: 500; color: var(--text-base); letter-spacing: 0.2px; } .mango-label-medium { font-size: 13px; } .mango-label-small { font-size: 11px; } .mango-icon-button-special, .mango-icon-button-special-XL, .mango-icon-button-special-L, .mango-icon-button-special-M, .mango-icon-button-special-S { min-width: auto; background-color: var(--text-base); color: var(--background-base); border: 1px solid var(--background-base); } .mango-icon-button-special:active, .mango-icon-button-special-XL:active, .mango-icon-button-special-L:active, .mango-icon-button-special-M:active, .mango-icon-button-special-S:active, .mango-icon-button-special:focus, .mango-icon-button-special-XL:focus, .mango-icon-button-special-L:focus, .mango-icon-button-special-M:focus, .mango-icon-button-special-S:focus { color: var(--background-base); background-color: var(--text-base); } .mango-icon-button-special.selected, .selected.mango-icon-button-special-XL, .selected.mango-icon-button-special-L, .selected.mango-icon-button-special-M, .selected.mango-icon-button-special-S { background-color: var(--background-base); color: var(--text-base); border: 1px solid var(--background-base); } .mango-icon-button-special.selected:hover, .selected.mango-icon-button-special-XL:hover, .selected.mango-icon-button-special-L:hover, .selected.mango-icon-button-special-M:hover, .selected.mango-icon-button-special-S:hover { background-color: var(--background-base); } .mango-icon-button-special .soundtrap-icon, .mango-icon-button-special-XL .soundtrap-icon, .mango-icon-button-special-L .soundtrap-icon, .mango-icon-button-special-M .soundtrap-icon, .mango-icon-button-special-S .soundtrap-icon { margin: 0; } .mango-icon-button-regular, .mango-icon-button-regular-XL, .mango-icon-button-regular-L, .mango-icon-button-regular-M, .mango-icon-button-regular-S { color: var(--text-subdued); border: 1px solid var(--essential-subdued); min-width: auto; } .mango-icon-button-regular:active, .mango-icon-button-regular-XL:active, .mango-icon-button-regular-L:active, .mango-icon-button-regular-M:active, .mango-icon-button-regular-S:active, .mango-icon-button-regular:hover, .mango-icon-button-regular-XL:hover, .mango-icon-button-regular-L:hover, .mango-icon-button-regular-M:hover, .mango-icon-button-regular-S:hover { color: var(--text-base); background-color: var(--background-tinted-highlight); } .mango-icon-button-regular.selected, .selected.mango-icon-button-regular-XL, .selected.mango-icon-button-regular-L, .selected.mango-icon-button-regular-M, .selected.mango-icon-button-regular-S { background-color: var(--text-subdued); color: var(--background-base) !important; border: 1px solid var(--text-subdued); } .mango-icon-button-regular.selected:active, .selected.mango-icon-button-regular-XL:active, .selected.mango-icon-button-regular-L:active, .selected.mango-icon-button-regular-M:active, .selected.mango-icon-button-regular-S:active, .mango-icon-button-regular.selected:hover, .selected.mango-icon-button-regular-XL:hover, .selected.mango-icon-button-regular-L:hover, .selected.mango-icon-button-regular-M:hover, .selected.mango-icon-button-regular-S:hover { background-color: var(--text-subdued); color: var(--background-base); } .mango-icon-button-weak, .mango-icon-button-weak-XL, .mango-icon-button-weak-L, .mango-icon-button-weak-M, .mango-icon-button-weak-S { min-width: auto; background-color: transparent; color: var(--text-subdued); border: 1px solid transparent; padding: 0 6px; } .mango-icon-button-weak:active, .mango-icon-button-weak-XL:active, .mango-icon-button-weak-L:active, .mango-icon-button-weak-M:active, .mango-icon-button-weak-S:active, .mango-icon-button-weak:hover, .mango-icon-button-weak-XL:hover, .mango-icon-button-weak-L:hover, .mango-icon-button-weak-M:hover, .mango-icon-button-weak-S:hover { color: var(--text-base); background-color: var(--background-tinted-highlight); border-color: transparent; } .mango-icon-button-weak.selected, .selected.mango-icon-button-weak-XL, .selected.mango-icon-button-weak-L, .selected.mango-icon-button-weak-M, .selected.mango-icon-button-weak-S { background-color: var(--text-subdued); color: var(--background-base); border: 1px solid var(--text-subdued); } .mango-icon-button-weak.selected:active, .selected.mango-icon-button-weak-XL:active, .selected.mango-icon-button-weak-L:active, .selected.mango-icon-button-weak-M:active, .selected.mango-icon-button-weak-S:active, .mango-icon-button-weak.selected:hover, .selected.mango-icon-button-weak-XL:hover, .selected.mango-icon-button-weak-L:hover, .selected.mango-icon-button-weak-M:hover, .selected.mango-icon-button-weak-S:hover { background-color: var(--text-subdued); } .mango-icon-button-weak:disabled, .mango-icon-button-weak-XL:disabled, .mango-icon-button-weak-L:disabled, .mango-icon-button-weak-M:disabled, .mango-icon-button-weak-S:disabled, .mango-icon-button-weak.disabled, .disabled.mango-icon-button-weak-XL, .disabled.mango-icon-button-weak-L, .disabled.mango-icon-button-weak-M, .disabled.mango-icon-button-weak-S { background-color: transparent; } .mango-icon-button-weak .soundtrap-icon, .mango-icon-button-weak-XL .soundtrap-icon, .mango-icon-button-weak-L .soundtrap-icon, .mango-icon-button-weak-M .soundtrap-icon, .mango-icon-button-weak-S .soundtrap-icon { margin: 0; } .mango-icon-button-emphasized, .mango-icon-button-emphasized-XL, .mango-icon-button-emphasized-L, .mango-icon-button-emphasized-M, .mango-icon-button-emphasized-S { min-width: auto; background-color: var(--background-tinted-base); color: var(--text-subdued); border: 1px solid var(--essential-subdued); } .mango-icon-button-emphasized:active, .mango-icon-button-emphasized-XL:active, .mango-icon-button-emphasized-L:active, .mango-icon-button-emphasized-M:active, .mango-icon-button-emphasized-S:active, .mango-icon-button-emphasized:focus, .mango-icon-button-emphasized-XL:focus, .mango-icon-button-emphasized-L:focus, .mango-icon-button-emphasized-M:focus, .mango-icon-button-emphasized-S:focus, .mango-icon-button-emphasized:hover, .mango-icon-button-emphasized-XL:hover, .mango-icon-button-emphasized-L:hover, .mango-icon-button-emphasized-M:hover, .mango-icon-button-emphasized-S:hover { color: var(--text-base); background-color: var(--background-tinted-highlight); border-color: var(--essential-subdued); } .mango-icon-button-emphasized.selected, .selected.mango-icon-button-emphasized-XL, .selected.mango-icon-button-emphasized-L, .selected.mango-icon-button-emphasized-M, .selected.mango-icon-button-emphasized-S { background-color: var(--essential-primary); color: var(--background-base); border: 1px solid var(--essential-primary); } .mango-icon-button-emphasized.selected:active, .selected.mango-icon-button-emphasized-XL:active, .selected.mango-icon-button-emphasized-L:active, .selected.mango-icon-button-emphasized-M:active, .selected.mango-icon-button-emphasized-S:active, .mango-icon-button-emphasized.selected:focus, .selected.mango-icon-button-emphasized-XL:focus, .selected.mango-icon-button-emphasized-L:focus, .selected.mango-icon-button-emphasized-M:focus, .selected.mango-icon-button-emphasized-S:focus, .mango-icon-button-emphasized.selected:hover, .selected.mango-icon-button-emphasized-XL:hover, .selected.mango-icon-button-emphasized-L:hover, .selected.mango-icon-button-emphasized-M:hover, .selected.mango-icon-button-emphasized-S:hover { background-color: var(--essential-primary); } .mango-icon-button-emphasized .soundtrap-icon, .mango-icon-button-emphasized-XL .soundtrap-icon, .mango-icon-button-emphasized-L .soundtrap-icon, .mango-icon-button-emphasized-M .soundtrap-icon, .mango-icon-button-emphasized-S .soundtrap-icon { margin: 0; } .mango-toolbar .fatfingerbutton:first-child button { border-bottom-right-radius: 0; border-top-right-radius: 0; border-right: none; } .mango-toolbar .fatfingerbutton:last-child button { border-bottom-left-radius: 0; border-top-left-radius: 0; } .mango-toolbar .fatfingerbutton:not(:first-child):not(:last-child) button { border-radius: 0; border-right: none; } .mango-toolbar .toolbar-icon { line-height: 1; } .mango-checkbox { display: inline-flex; } .mango-checkbox .mango-checkbox-input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; background-color: var(--background-elevated-base); border: 1px solid var(--decorative-base); border-radius: 3px; cursor: pointer; color: var(--background-elevated-base); text-align: center; vertical-align: middle; margin: 0; transition: background-color 0.1s; border: solid 1px var(--essential-subdued); margin-right: 10px; } .mango-checkbox .mango-checkbox-input:hover { background-color: var(--background-tinted-base); } .mango-checkbox .mango-checkbox-input[disabled] { opacity: 0.3; pointer-events: none; cursor: inherit; } .mango-checkbox .mango-checkbox-input:checked { background-color: var(--background-tinted-base); } .mango-checkbox .mango-checkbox-input:checked:after { font-family: "soundtrap-icons"; font-size: 12px; content: "\e053"; top: 50%; margin-top: -6px; } .mango-checkbox .mango-checkbox-input:hover { border-color: var(--essential-primary); } .mango-checkbox .mango-checkbox-input:checked { border-color: var(--essential-primary); background-color: var(--essential-primary); } :root { --default-box-shadow-color: rgba(0, 0, 0, .25); } :root { --disabled-opacity: 0.5; } .st-light-theme .piano-keys, body .piano-keys { --white-key: hsl(0, 0%, 100%); --white-key-pressed: hsl(0, 0%, 82%); --white-key-hovered: hsl(0, 0%, 95%); --white-key-border: hsl(0, 0%, 82%); --white-key-text: hsl(0, 0%, 36%); --white-key-middle-c: hsl(120, 85%, 92%); --white-key-middle-c-hovered: hsl(120, 84%, 88%); --white-key-middle-c-pressed: hsl(120, 84%, 85%); --white-key-highlight: hsl(272, 87%, 25%); --black-key: hsl(0, 0%, 18%); --black-key-pressed: hsl(0, 0%, 61%); --black-key-hovered: hsl(0, 0%, 40%); --black-key-text: hsl(0, 0%, 97%); --black-key-highlight: hsl(258, 69%, 78%); } .st-light-theme .with-808-styling .piano-keys, body .with-808-styling .piano-keys { --white-key-pressed: hsl(34, 92%, 43%); --white-key-middle-c-pressed: hsl(34, 92%, 43%); --white-key-hovered: hsl(34, 92%, 63%); --white-key-middle-c-hovered: hsl(34, 92%, 63%); } .st-dark-theme .piano-keys { --bright-multiplier: 0.9; --dark-multiplier: 0.8; --white-key: hsl(0, 0%, calc(100% * var(--bright-multiplier))); --white-key-pressed: hsl(0, 0%, calc(82% * var(--bright-multiplier))); --white-key-hovered: hsl(0, 0%, calc(95% * var(--bright-multiplier))); --white-key-border: hsl(0, 0%, calc(82% * var(--bright-multiplier))); --white-key-text: hsl(0, 0%, calc(36% * var(--dark-multiplier))); --white-key-middle-c: hsl(120, 85%, calc(92% * var(--bright-multiplier))); --white-key-middle-c-hovered: hsl( 120, 84%, calc(88% * var(--dark-multiplier)) ); --white-key-middle-c-pressed: hsl( 120, 84%, calc(85% * var(--dark-multiplier)) ); --white-key-highlight: hsl(272, 87%, calc(25% * var(--dark-multiplier))); --black-key: hsl(0, 0%, calc(18% * var(--dark-multiplier))); --black-key-pressed: hsl(0, 0%, calc(61% * var(--dark-multiplier))); --black-key-hovered: hsl(0, 0%, calc(40% * var(--dark-multiplier))); --black-key-text: hsl(0, 0%, calc(97% * var(--bright-multiplier))); --black-key-highlight: hsl(258, 69%, calc(78% * var(--bright-multiplier))); } .st-dark-theme .with-808-styling .piano-keys { --white-key-pressed: hsl(34, 92%, calc(43% * var(--bright-multiplier))); --white-key-middle-c-pressed: hsl( 34, 92%, calc(43% * var(--bright-multiplier)) ); --white-key-hovered: hsl(34, 92%, calc(63% * var(--bright-multiplier))); --white-key-middle-c-hovered: hsl( 34, 92%, calc(63% * var(--bright-multiplier)) ); } html { height: 100%; overflow: hidden; } body { height: 100%; padding: 0; margin: 0; } #satellite { height: 100%; } #satellite a:hover, #satellite a:focus { text-decoration: none; cursor: pointer; } #satellite .satellite-container { height: 100%; } #satellite .router { height: 100%; } #satellite .layout { display: flex; flex-direction: column; width: 100%; height: 100%; } #satellite .layout .topbar { display: flex; flex-direction: row; height: 70px; width: 100%; padding-left: 20px; align-items: center; z-index: 10000; background-color: white; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #e6e6e6; } #satellite .layout .topbar .logo { background: url("/studio/assets/images/studio/minilogo4_b17.png") no-repeat; width: 30px; height: 32px; margin-top: 2px; display: inline-block; margin-right: 40px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { #satellite .layout .topbar .logo { background-image: url("/studio/assets/images/studio/minilogo4_b17@2x.png"); background-size: contain; } } #satellite .layout .contentarea { flex: 1; background-color: #3e1165; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow: auto; } @media all and (768px) { #satellite .layout .contentarea { overflow: scroll; } } #satellite .formpane { max-width: 475px; min-width: 300px; width: 90%; margin-top: 41px; margin-bottom: 20px; background-color: white; padding: 40px; border-radius: 8px; box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; align-items: center; justify-content: space-between; } #satellite .av-controls { display: flex; flex-direction: row; align-items: center; justify-content: center; z-index: 1; } #satellite .av-controls .icon-toggle-button.enabled .soundtrap-icon.ic-call-end { color: #eb2d55; } #satellite .av-controls .icon-toggle-button.disabled .soundtrap-icon.ic-call-end { color: #ff9cb1; } #satellite .icon-message-pane { max-width: 475px; width: 100%; text-align: center; } #satellite .icon-message-pane .st-spinner { position: initial; margin: 0; align-self: center; } #satellite .icon-message-pane .formpane { width: 100%; height: 516px; padding: 90px 40px; justify-content: flex-start; } #satellite .icon-message-pane .formpane .icon { height: 128px; } #satellite .icon-message-pane .formpane .soundtrap-icon { font-size: 60px; color: #5a00aa; } #satellite .icon-message-pane .formpane .icon-message-pane-title { font-size: 21px; margin: 40px 0 20px; font-family: var(--font-family); font-weight: 700; text-align: center; } #satellite .icon-message-pane .formpane .icon-message-pane-message { font-size: 15px; margin-bottom: 40px; text-align: center; max-width: 320px; white-space: pre-line; } #satellite .icon-message-pane .formpane .icon-message-pane-bottom-area { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } #satellite .icon-message-pane .formpane .icon-message-pane-bottom-area .btn { margin: 5px; } #satellite .icon-message-pane .formpane .icon-message-pane-bottom-area .unsupported-recommendation { max-width: 310px; font-weight: 500; margin-bottom: 15px; font-size: 15px; } #satellite .icon-message-pane .formpane .icon-message-pane-bottom-area .invalid-link { white-space: pre-wrap; } #satellite .icon-message-pane .visit-soundtrap { color: #aa8cf0; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; padding: 0 20px; } #satellite .icon-message-pane .visit-soundtrap .soundtrap-icon { margin-left: 3px; font-size: 13px; } #satellite .joinview { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } #satellite .joinview .formpane { height: 516px; } #satellite .joinview .projectname { font-family: var(--font-family); font-weight: 700; pointer-events: none; } #satellite .joinview .videosettings { position: relative; width: 260px; height: 175px; border-radius: 4px; background-color: #d2d2d2; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; overflow: hidden; } #satellite .joinview .videosettings .localvideo { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; } #satellite .joinview .guestname { margin-bottom: 3px; } #satellite .joinview .namefield input { width: 260px; height: 34px; border-color: #e6e6e6; border-style: solid; border-width: 1px; border-radius: 3px; font-size: 15px; padding: 10px; background-color: #ffffff; } #satellite .joinview .namefield input::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #e6e6e6; } #satellite .joinview .namefield input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #e6e6e6; opacity: 1; } #satellite .joinview .namefield input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #e6e6e6; opacity: 1; } #satellite .joinview .namefield input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #e6e6e6; } #satellite .joinview .namefield input::-ms-input-placeholder { /* Microsoft Edge */ color: #e6e6e6; } #satellite .joinview .namefield input::placeholder { /* Most modern browsers support this now. */ color: #e6e6e6; } #satellite .joinview .namefield input:focus { border-color: var(--essential-primary); } #satellite .joinview .guestinput { min-width: 260px; width: 260px; max-width: 260px; } #satellite .joinview .guestinput .input-selector { width: 100%; } #satellite .joinview .visit-soundtrap { color: #aa8cf0; } #satellite .callview { width: 100%; flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: center; max-height: 100%; } #satellite .callview .callviewpanels { width: 100%; flex: 1; display: flex; flex-direction: row; align-items: stretch; justify-content: center; } @media all and (768px) { #satellite .callview .callviewpanels { overflow: scroll; } } #satellite .callview .callviewpanels .leftpanel { background-color: #000000; flex: 1; display: flex; flex-direction: column; position: relative; overflow: hidden; } #satellite .callview .callviewpanels .rightpanel { background-color: #000000; width: 380px; padding: 10px; display: flex; flex-direction: column; overflow: hidden; max-height: 100%; } @media all and (768px) { #satellite .callview .callviewpanels .rightpanel { display: none; width: 100%; padding: 0; } } #satellite .callview .callviewpanels .rightpanel .sendbutton { position: absolute; right: 10px; bottom: 7px; min-width: 0; } #satellite .callview .callviewpanels .rightpanel .remotevideo { position: absolute; top: 10px; right: 10px; width: 130px; } #satellite .callview .callviewpanels .rightpanel .remotevideo video { width: 100%; background-color: #000000; } #satellite .callview .callviewpanels .rightpanel .remotevideo .ic-resize-full { color: white; position: absolute; left: 5px; top: 5px; } #satellite .callview .callviewpanels .rightpanel .chatpane { flex: 1; border-radius: 8px; box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1); background-color: #f5f5f5; border: solid 1px #e6e6e6; display: flex; flex-direction: column; overflow: hidden; } @media all and (768px) { #satellite .callview .callviewpanels .rightpanel .chatpane { border-radius: 0; } } #satellite .callview .callviewpanels .rightpanel .chatpane .chatmessages { display: flex; flex-direction: column; flex: 1; margin-top: 20px; overflow-y: scroll; } @media all and (768px) { #satellite .callview .callviewpanels .rightpanel .chatpane .chatmessages > :first-child { margin-top: auto; } } #satellite .callview .callviewpanels .rightpanel .chatpane .chatmessages .chatnotification { text-align: center; font-size: 15px; color: #9b9b9b; margin-bottom: 20px; font-weight: normal; } #satellite .callview .callviewpanels .rightpanel .chatpane .chatmessages .chatbubble { display: flex; flex-direction: row; margin-left: 10px; } #satellite .callview .callviewpanels .rightpanel .chatpane .chatmessages .chatbubble .chatbubble-bubble { display: flex; align-items: center; justify-content: space-between; background-color: #ffffff; box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1); border-radius: 4px; padding: 7px; margin-top: 0px; margin-left: 10px; margin-bottom: 20px; margin-right: 20px; position: relative; flex: 1; } #satellite .callview .callviewpanels .rightpanel .chatpane .chatmessages .chatbubble .chatbubble-bubble .chat-timestamp { font-size: 11px; color: #9b9b9b; } #satellite .callview .callviewpanels .rightpanel .chatpane .chatmessages .chatbubble .chatbubble-bubble.left { padding-left: 10px; } #satellite .callview .callviewpanels .rightpanel .chatpane .chatmessages .chatbubble .chatbubble-bubble.left:after { box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, 0.2); content: " "; display: block; height: 10px; left: -4px; position: absolute; top: 12px; transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); width: 10px; background-color: white; } #satellite .callview .callviewpanels .rightpanel .chatpane .chatmessages .chatbubble .chatbubble-bubble.left .chat-timestamp { margin-left: 10px; } #satellite .callview .callviewpanels .rightpanel .chatpane .chatmessages .chatbubble .chatbubble-bubble.right { padding-right: 10px; margin-left: 0px; } #satellite .callview .callviewpanels .rightpanel .chatpane .chatmessages .chatbubble .chatbubble-bubble.right:after { box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, 0.2); content: " "; display: block; height: 10px; right: -4px; position: absolute; top: 12px; transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); width: 10px; background-color: white; } #satellite .callview .callviewpanels .rightpanel .chatpane .chatmessages .chatbubble .chatbubble-bubble.right .chat-timestamp { margin-right: 10px; } #satellite .callview .callviewpanels .rightpanel .chatpane .chatinput { height: 100px; margin: 10px; background-color: #ffffff; border-radius: 2px; border-style: solid; border-color: rgba(0, 0, 0, 0.1); border-width: 1px; } #satellite .callview .callviewpanels .rightpanel .chatpane .chatinput:focus { border-color: rgba(0, 0, 0, 0.3); } @media all and (768px) { #satellite .callview .callviewpanels .rightpanel .chatpane .chatinput { border-width: 0; border-top-width: 1px; margin: 0; border-radius: 0; height: 36px; } } #satellite .callview .callviewpanels .rightpanel .chatwaiting { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 60px; margin-bottom: 40px; padding-left: 50px; padding-right: 50px; } #satellite .callview .callviewpanels .rightpanel .chatwaiting .chatwaiting-welcome { font-size: 25px; font-weight: 500; margin-bottom: 10px; } #satellite .callview .callviewpanels .rightpanel .chatwaiting .chatwaiting-takeaseat { font-size: 18px; text-align: center; margin-bottom: 50px; } #satellite .callview .callviewpanels .rightpanel .chatwaiting .chatwaiting-painting { width: 65px; height: 37px; background-color: #e6e6e6; margin-bottom: 7px; flex-shrink: 0; } #satellite .callview .callviewpanels .rightpanel .chatwaiting .chatwaiting-sofa { width: 139px; height: 81px; background-color: #e6e6e6; flex-shrink: 0; } #satellite .callview .callviewpanels .rightpanel .chatwaiting .chatwaiting-flexfiller { flex: 1; } #satellite .callview .callviewpanels .rightpanel .chatwaiting .chatwaiting-noresponse { text-align: center; font-size: 15px; font-weight: 500; white-space: pre; } #satellite .callview .bottombox { height: 60px; background-color: #ffffff; } @media all and (768px) { #satellite .callview .bottombox { height: 125px; } } #satellite .callview .controlstrip { padding: 20px; height: 60px; display: flex; flex-direction: row; align-items: center; } #satellite .callview .controlstrip .flexbalancer { flex: 1; } #satellite .callview .infostrip { display: flex; align-items: center; justify-content: center; height: 65px; background: #000000; } #satellite .callview .infostrip.waiting { background: #430877; color: #ffffff; } #satellite .callview .infostrip .waitingmessage { text-align: center; margin-left: 20px; margin-right: 20px; } #satellite .callview .waitingview { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } #satellite .callview .waitingview .info { text-align: center; } #satellite .callview .waitingview .info .guest { margin-bottom: 10px; } #satellite .callview .incallview { position: absolute; width: 100%; height: 100%; overflow: hidden; } @media all and (768px) { #satellite .callview .incallview .call-recorded { display: none; } } #satellite .callview .incallview .remotevideo { width: 100%; height: 100%; object-fit: cover; } @media all and (768px) { #satellite .callview .incallview .remotevideo { margin-top: 100px; } } #satellite .callview .localvideobox { position: absolute; top: 10px; right: 10px; width: 80px; height: 80px; overflow: hidden; border-radius: 3px; } #satellite .callview .localvideobox .localvideo { width: 80px; height: 80px; object-fit: cover; } @media all and (768px) { #satellite .callview.chatopen .leftpanel { display: none; } #satellite .callview.chatopen .rightpanel { display: flex; } #satellite .callview.chatopen .bottombox { display: none; } } #satellite .finishedview { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } #satellite .finishedview .formpane { height: 229px; } @media all and (768px) { #satellite .finishedview .formpane { height: 273px; padding-top: 20px; padding-bottom: 30px; } } #satellite .finishedview .callended { color: #5a00aa; pointer-events: none; } #satellite .finishedview .buttons { display: flex; flex-direction: row; align-items: center; justify-content: center; } #satellite .finishedview .buttons .rejoin { margin-right: 10px; } #satellite .finishedview .buttons .visitsoundtrap { margin-left: 10px; } @media all and (768px) { #satellite .finishedview .buttons { flex-direction: column; } #satellite .finishedview .buttons .btn { margin: 10px; } #satellite .finishedview .buttons .rejoin { order: 2; } } #satellite .icon-toggle-button { width: 44px; height: 44px; margin: 10px; border-radius: 50%; border-style: solid; border-width: 1px; border-color: #e6e6e6; display: flex; flex-direction: row; align-items: center; justify-content: center; cursor: pointer; } #satellite .icon-toggle-button .soundtrap-icon { font-size: 18px; } #satellite .icon-toggle-button.on { background-color: #5a00aa; } #satellite .icon-toggle-button.on .soundtrap-icon { color: #ffffff; } #satellite .icon-toggle-button.on:hover { background-color: #8549cc; } #satellite .icon-toggle-button.on:active { background-color: #aa8cf0; } #satellite .icon-toggle-button.off { background-color: #ffffff; } #satellite .icon-toggle-button.off .soundtrap-icon { color: #646464; } #satellite .icon-toggle-button.off:hover { background-color: #f5f5f5; } #satellite .icon-toggle-button.off:active { background-color: #e6e6e6; } #satellite .icon-toggle-button.disabled { pointer-events: none; border-color: #f5f5f5; } #satellite .icon-toggle-button.disabled .soundtrap-icon { color: #f5f5f5; } #satellite .call-recorded { position: absolute; bottom: 20px; width: 100%; height: 31px; display: flex; flex-direction: row; align-items: center; justify-content: center; } @media all and (768px) { #satellite .call-recorded { position: static; } } #satellite .call-recorded .call-recorded-pill { height: 31px; display: flex; flex-direction: row; align-items: center; justify-content: center; background-color: rgba(235, 45, 85, 0.8); border-radius: 16px; } #satellite .call-recorded .call-recorded-pill .call-recorded-label { margin-left: 10px; margin-right: 5px; color: #ffffff; } #satellite .call-recorded .call-recorded-pill .call-recorded-dot { width: 25px; height: 25px; border-radius: 50%; border-style: solid; border-color: rgba(255, 255, 255, 0.5); border-width: 1px; margin-right: 3px; padding: 3px; will-change: transform; animation-name: pulsating-call-recorded-dot; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; } #satellite .call-recorded .call-recorded-pill .call-recorded-dot .call-recorded-dot-middle { width: 17px; height: 17px; border-radius: 50%; border-style: solid; border-color: rgba(255, 255, 255, 0.75); border-width: 1px; padding: 3px; } #satellite .call-recorded .call-recorded-pill .call-recorded-dot .call-recorded-dot-middle .call-recorded-dot-inner { width: 9px; height: 9px; border-radius: 50%; background-color: #ffffff; } @keyframes pulsating-call-recorded-dot { 0% { transform: scale(1); } 50% { transform: scale(0.75); } 100% { transform: scale(1); } }