1<!DOCTYPE html><html data-prerendered="true" style="background-color:#121212" lang="en" class="ds-properties ds-themes tab-disabled dark" dir="ltr"><head> 2 <link rel="preconnect" href="https://pastatic.picsart.com" crossorigin> 3 <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin> 4 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 5<style data-prerender-fixes>[class*="mobileLogo"]{display:none}</style> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=auto" id="meta-viewport"> 8 <title>ComicMe - AI Comic Book Generator | Picsart</title> 9 10 <link rel="manifest" href="https://cdn140.picsart.com/69624423237702047608.json"> 11 12 <link rel="preconnect" href="https://api.picsart.com"> 13 <link rel="preconnect" href="https://pastatic.picsart.com"> 14 <link rel="preconnect" href="https://optifyr.com"> 15 <link rel="preconnect" href="https://t.picsart.com"> 16 <style data-prerender-keep=""> 17 @layer foundation.reset, foundation.primitives, foundation.themes, 18 cascade.subAtoms, cascade.atoms, cascade.molecules, 19 cascade.organisms, cascade.templates; 20 /* Hidden until BootstrapWatcher fades it in after EmbeddedRuntimeProvider bootstraps. 21 Flex column: the runtime renders its template header and 22 #miniapp-container as plain siblings â the header keeps its 23 intrinsic height, the container takes the remaining space. */ 24 #embedded-host { 25 position: fixed; 26 inset: 0; 27 opacity: 0; 28 pointer-events: none; 29 transition: opacity 0.3s ease; 30 display: flex; 31 flex-direction: column; 32 } 33 html[data-prerendered] #root { 34 position: fixed; 35 inset: 0; 36 display: flex; 37 flex-direction: column; 38 } 39 #miniapp-container { 40 flex: 1 1 0%; 41 min-height: 0; 42 position: relative; 43 } 44 #miniapp-container > div { 45 position: absolute; 46 inset: 0; 47 } 48 #miniapp-container > div > div { 49 width: 100%; 50 height: 100%; 51 } 52 /* Shadow-DOM isolation only: the light-DOM node that holds 53 #miniapp-container. It is slot-projected into the shell's in-shadow 54 .ds-scope flex column, so it must fill the remaining space the same way 55 #miniapp-container did as a direct child of #embedded-host. Inert when 56 isolation is off (the node is never created). */ 57 #miniapp-light-root { 58 flex: 1 1 0%; 59 min-height: 0; 60 display: flex; 61 flex-direction: column; 62 } 63 </style> 64 65 66 67 68 69 70 71 72 73 <style data-prerender-css data-original-href="/assets/ds-components-CEHdc4xn.css"> 74@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 75@font-face { font-family: Gilroy-Fonts; font-style: normal; font-weight: 400; src: local("Gilroy-Regular"), url("https://pastatic.picsart.com/cms-pastatic/d018cb40-40a8-4efa-a202-947285ae8329.woff2") format("woff2"); font-display: swap; unicode-range: U+20-7F; } 76@font-face { font-family: Gilroy-Fonts; font-style: normal; font-weight: 500; src: local("Gilroy-Medium"), url("https://pastatic.picsart.com/cms-pastatic/3de40576-a960-483a-a3ab-a1743e3c4ba6.woff2") format("woff2"); font-display: swap; unicode-range: U+20-7F; } 77@font-face { font-family: Gilroy-Fonts; font-style: normal; font-weight: 600; src: local("Gilroy-SemiBold"), url("https://pastatic.picsart.com/cms-pastatic/eae6e1ea-9319-406c-a3de-00431f8f03f4.woff2") format("woff2"); font-display: swap; unicode-range: U+20-7F; } 78@font-face { font-family: Gilroy-Fonts; font-style: normal; font-weight: 700; src: local("Gilroy-Bold"), url("https://pastatic.picsart.com/cms-pastatic/0ea441d6-d0d4-4236-b649-67a987887865.woff2") format("woff2"); font-display: swap; unicode-range: U+20-7F; } 79html { --fonts-gilroy: Gilroy-Fonts, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Helvetica, Arial, sans-serif; } 80@layer ds-reset { 81 * { margin: 0px; padding: 0px; box-sizing: border-box; } 82 ::selection { background-color: var(--primary-colors-base-default); color: var(--primary-colors-text-default); } 83 html { min-height: 100dvh;
83 overscroll-behavior: none; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; font-feature-settings: normal; } 84 @supports (-webkit-touch-callout: none) and (padding-top: env(safe-area-inset-top)) { 85 html { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } 86} 87 a { text-decoration: none; } 88 iframe { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; outline: none; } 89 button { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: none; cursor: pointer; } 90 input, textarea, select { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; outline: none; background: none; font-family: inherit; } 91 input, select { appearance: none; } 92 a, button, input, textarea, select, div { -webkit-tap-highlight-color: transparent; } 93 input, button, textarea, select { font-family: var(--fonts-gilroy); } 94 ul, ol { list-style: none; } 95} 96@layer ds-foundation { 97 html { --easings-ease: cubic-bezier(.25, .1, .25, 1); --easings-ease-in: cubic-bezier(.42, 0, 1, 1); --easings-ease-in-out: cubic-bezier(.42, 0, .58, 1); --easings-ease-out: cubic-bezier(0, 0, .58, 1); --easings-linear: cubic-bezier(0, 0, 1, 1); --easings-practical: cubic-bezier(.4, 0, .2, 1); --easings-expressive: cubic-bezier(.4, 0, 0, 1); --easings-bounce: cubic-bezier(.34, 1.56, .64, 1); --states-disabled: .4; --corner-radius-circle: 50%; --corner-radius-r0: 0px; --corner-radius-r2: 2px; --corner-radius-r4: 4px; --corner-radius-r8: 8px; --corner-radius-r12: 12px; --corner-radius-r16: 16px; --corner-radius-r20: 20px; --corner-radius-r22: 22px; --corner-radius-r24: 24px; --corner-radius-r32: 32px; --spacings-s0: 0px; --spacings-s2: 2px; --spacings-s4: 4px; --spacings-s6: 6px; --spacings-s8: 8px; --spacings-s10: 10px; --spacings-s12: 12px; --spacings-s16: 16px; --spacings-s24: 24px; --spacings-s32: 32px; --spacings-s40: 40px; --spacings-s44: 44px; --spacings-s48: 48px; --spacings-s56: 56px; --spacings-s64: 64px; --spacings-s72: 72px; --stacking-context-lowest: -9999; --stacking-context-initial: 0; --stacking-context-layout: 1000; --stacking-context-popover: 2000; --stacking-context-popup: 3000; --stacking-context-tooltip: 4000; --stacking-context-toast: 5000; --stacking-context-highest: 9999; --timings-fast: .1s; --timings-default: .3s; --timings-medium: .5s; --timings-long: 1s; --timings-heavy: 2s; --typography-t1-font-size: 8px; --typography-t1-line-height: 10px; --typography-t2-font-size: 10px; --typography-t2-line-height: 14px; --typography-t3-font-size: 12px; --typography-t3-line-height: 16px; --typography-t4-font-size: 14px; --typography-t4-line-height: 20px; --typography-t5-font-size: 16px; --typography-t5-line-height: 24px; --typography-t6-font-size: 20px; --typography-t6-line-height: 28px; --typography-t7-font-size: 24px; --typography-t7-line-height: 32px; --typography-t8-font-size: 30px; --typography-t8-line-height: 36px; --typography-t9-font-size: 36px; --typography-t9-line-height: 48px; --typography-t10-font-size: 42px; --typography-t10-line-height: 50px; --typography-t11-font-size: 60px; --typography-t11-line-height: 72px; } 98 html.light { --brand-colors-default: #F40BF4; --brand-colors-light: #FFFCF8; --brand-colors-dark: #000000; --absolute-black-colors-base-default: #000000; --absolute-black-colors-base-action: #313131; --absolute-black-colors-base-active: #000000; --absolute-black-colors-base-active-action: #313131; --absolute-black-colors-text-default: #ffffff; --absolute-black-colors-text-action: #ffffff; --absolute-black-colors-text-active: #ffffff; --absolute-black-colors-text-active-action: #ffffff; --absolute-white-colors-base-default: #ffffff; --absolute-white-colors-base-action: #ececec; --absolute-white-colors-base-active: #ffffff; --absolute-white-colors-base-active-action: #ececec; --absolute-white-colors-text-default: #000000; --absolute-white-colors-text-action: #000000; --absolute-white-colors-text-active: #000000; --absolute-white-colors-text-active-action: #000000; --background-colors-base: #fcfcfc; --background-colors-tint-1: #f7f7f7; --background-colors-tint-2: #f2f2f2; --background-colors-tint-3: #d9d9d9; --background-colors-border: #e8e8e8; --background-colors-transparent: rgba(0, 0, 0, .5215686275); --background-colors-tooltip: #ffffff; --background-colors-popover: #ffffff; --background-colors-canvas-back-layer: #ededed; --control-colors-border-default: #e0e0e0; --control-colors-border-action: #e0e0e0; --control-colors-border-active: #e0e0e0; --control-colors-border-active-action: #e0e0e0; --control-colors-button-background-default: #ffffff; --control-colors-button-background-action: #f7f7f7; --control-colors-button-background-active: #eeeeee; --control-colors-button-background-active-action: #f7f7f7; --control-colors-caret-default: #5a00ee; --control-colors-caret-action: #5a00ee; --control-colors-caret-active: #5a00ee; --control-colors-caret-active-action: #5a00ee; --control-colors-end-icon-default: #525252; --control-colors-end-icon-action: #3d3d3d; --control-colors-end-icon-active: #000000; --control-colors-end-icon-active-action: #3d3d3d; --control-colors-field-background-default: #ffffff; --control-colors-field-background-action: #f7f7f7; --control-colors-field-background-active: #eeeeee; --control-colors-field-background-active-action: #f7f7f7; --control-colors-placeholder-default: #707070; --control-colors-placeholder-action: #707070; --control-colors-placeholder-active: #707070; --control-colors-placeholder-active-action: #707070; --control-colors-slider-thumb-default: #fefefe; --control-colors-slider-thumb-action: #f1f1f1; --control-colors-slider-thumb-active: #fefefe; --control-colors-slider-thumb-active-action: #f1f1f1; --control-colors-slider-track-default: #C209C1; --control-colors-slider-track-action: #C209C1; --control-colors-slider-track-active: #C209C1; --control-colors-slider-track-active-action: #C209C1; --control-colors-start-icon-default: #525252; --control-colors-start-icon-action: #3d3d3d; --control-colors-start-icon-active: #000000; --control-colors-start-icon-active-action: #3d3d3d; --control-colors-text-default: #525252; --control-colors-text-action: #3d3d3d; --control-colors-text-active: #000000; --control-colors-text-active-action: #3d3d3d; --control-colors-value-default: #525252; --control-colors-value-action: #3d3d3d; --control-colors-value-active: #000000; --control-colors-value-active-action: #3d3d3d; --text-colors-base: #000000; --text-colors-tint-1: #4c4c4c; --text-colors-tint-2: #666666; --text-colors-tint-3: #737373; --error-colors-base-default: #D10037; --error-colors-base-action: #A9002D; --error-colors-base-active: #D10037; --error-colors-base-active-action: #A9002D; --error-colors-text-default: #ffffff; --error-colors-text-action: #ffffff; --error-colors-text-active: #ffffff; --error-colors-text-active-action: #ffffff; --information-colors-base-default: #0066eb; --information-colors-base-action: #0055c3; --information-colors-base-active: #0066eb; --information-colors-base-active-action: #0055c3; --information-colors-text-default: #ffffff; --information-colors-text-action: #ffffff; --information-colors-text-active: #ffffff; --information-colors-text-active-action: #ffffff; --success-colors-base-default: #00804A; --success-colors-base-action: #005A34; --success-colors-base-active: #00804A; --success-colors-base-active-action: #005A34; --success-colors-text-default: #ffffff; --success-colors-text-action: #ffffff; --success-colors-text-active: #ffffff; --success-colors-text-active-action: #ffffff; --warning-colors-base-default: #FFAA00; --warning-colors-base-action: #D99100; --warning-colors-base-active: #FFAA00; --warning-colors-base-active-action: #D99100; --warning-colors-text-default: #000000; --warning-colors-text-action: #000000; --warning-colors-text-active: #000000; --warning-colors-text-active-action: #000000; --negative-colors-base-default: #000000; --negative-colors-base-action: #787878; --negative-colors-base-active: #000000; --negative-colors-base-active-action: #787878; --negative-colors-text-default: #ffffff; --negative-colors-text-action: #ffffff; --negative-colors-text-active: #ffffff; --negative-colors-text-active-action: #ffffff; --neutral-colors-base-default: #f2f2f2; --neutral-colors-base-action: #b4b4b4; --neutral-colors-base-active: #f2f2f2; --neutral-colors-base-active-action: #b4b4b4; --neutral-colors-text-default: #000000; --neutral-colors-text-action: #000000; --neutral-colors-text-active: #000000; --neutral-colors-text-active-action: #000000; --positive-colors-base-default: #ffffff; --positive-colors-base-action: #b4b4b4; --positive-colors-base-active: #ffffff; --positive-colors-base-active-action: #b4b4b4; --positive-colors-text-default: #000000; --positive-colors-text-action: #000000; --positive-colors-text-active: #000000; --positive-colors-text-active-action: #000000; --primary-colors-base-default: #c209c1; --primary-colors-base-action: #920792; --primary-colors-base-active: #c209c1; --primary-colors-base-active-action: #920792; --primary-colors-text-default: #ffffff; --primary-colors-text-action: #ffffff; --primary-colors-text-active: #ffffff; --primary-colors-text-active-action: #ffffff; --primary-colors-alpha-10: rgba(194, 9, 193, .1019607843); --primary-colors-alpha-20: rgba(194, 9, 193, .2); --primary-colors-alpha-50: rgba(194, 9, 193, .5019607843); --primary-colors-alpha-80: rgba(194, 9, 193, .8); --transformer-colors-base-default: #3b8ce2; --transformer-colors-base-action: #3b8ce2; --transformer-colors-base-active: #3b8ce2; --transformer-colors-base-active-action: #3b8ce2; --transformer-colors-text-default: #ffffff; --transformer-colors-text-action: #ffffff; --transformer-colors-text-active: #ffffff; --transformer-colors-text-active-action: #ffffff; --monetization-plus-colors-base-default: #ac06ca; --monetization-plus-colors-base-action: #87059e; --monetization-plus-colors-base-active: #ac06ca; --monetization-plus-colors-base-active-action: #87059e; --monetization-plus-colors-text-default: #ffffff; --monetization-plus-colors-text-action: #ffffff; --monetization-plus-colors-text-active: #ffffff; --monetization-plus-colors-text-active-action: #ffffff; --monetization-plus-colors-alpha-10: rgba(172, 6, 202, .1019607843); --monetization-plus-colors-alpha-20: rgba(172, 6, 202, .2); --monetization-plus-colors-alpha-50: rgba(172, 6, 202, .5019607843); --monetization-plus-colors-alpha-80: rgba(172, 6, 202, .8); --monetization-pro-colors-base-default: #5a00ee; --monetization-pro-colors-base-action: #3d00a2; --monetization-pro-colors-base-active: #5a00ee; --monetization-pro-colors-base-active-action: #3d00a2; --monetization-pro-colors-text-default: #ffffff; --monetization-pro-colors-text-action: #ffffff; --monetization-pro-colors-text-active: #ffffff; --monetization-pro-colors-text-active-action: #ffffff; --monetization-pro-colors-alpha-10: rgba(90, 0, 238, .1019607843); --monetization-pro-colors-alpha-20: rgba(90, 0, 238, .2); --monetization-pro-colors-alpha-50: rgba(90, 0, 238, .5019607843); --monetization-pro-colors-alpha-80: rgba(90, 0, 238, .8); --monetization-ultra-colors-base-default: #158380; --monetization-ultra-colors-base-action: #0e5957; --monetization-ultra-colors-base-active: #158380; --monetization-ultra-colors-base-active-action: #0e5957; --monetization-ultra-colors-text-default: #ffffff; --monetization-ultra-colors-text-action: #ffffff; --monetization-ultra-colors-text-active: #ffffff; --monetization-ultra-colors-text-active-action: #ffffff; --monetization-ultra-colors-alpha-10: rgba(21, 131, 128, .1019607843); --monetization-ultra-colors-alpha-20: rgba(21, 131, 128, .2); --monetization-ultra-colors-alpha-50: rgba(21, 131, 128, .5019607843); --monetization-ultra-colors-alpha-80: rgba(21, 131, 128, .8); --gradients-general-brand: linear-gradient(225deg, #00ffed 0%, #19d7e7 22.96%, #7f4ad9 45.31%, #af1fc6 66.73%, #df02c0 100%); --gradients-general-primary: linear-gradient(270deg, #f749f6 0%, #c209c1 100%); --gradients-status-info: linear-gradient(270deg, #17bbf2 0%, #0066eb 100%); --gradients-status-success: linear-gradient(269.27deg, #1ac490 3.29%, #008c62 99.37%); --gradients-status-warning: linear-gradient(270deg, #ffcc63 0%, #ff921e 100%); --gradients-status-error: linear-gradient(270deg, #ff6170 0%, #d10037 100%); --gradients-monetization-plus: linear-gradient(270deg, #f749f6 0%, #c209c1 100%); --gradients-monetization-pro: linear-gradient(270deg, #8a43ff 0%, #5600e3 100%); --gradients-monetization-ultra: linear-gradient(270deg, #0fbeb9 0%, #00827e 100%); --gradients-background-up: linear-gradient(360deg, #fcfcfc 0%, transparent 100%); --gradients-background-down: linear-gradient(180deg, #fcfcfc 0%, transparent 100%); --gradients-background-left: linear-gradient(90deg, #fcfcfc 0%, transparent 100%); --gradients-background-right: linear-gradient(270deg, #fcfcfc 0%, transparent 100%); --apple-colors-base-default: #ffffff; --apple-colors-base-action: #e6e6e6; --apple-colors-base-active: #ffffff; --apple-colors-base-active-action: #e6e6e6; --apple-colors-text-default: #ffffff; --apple-colors-text-action: #ffffff; --apple-colors-text-active: #ffffff; --apple-colors-text-active-action: #ffffff; --facebook-colors-base-default: #0766ff; --facebook-colors-base-action: #0050d1; --facebook-colors-base-active: #0766ff; --facebook-colors-base-active-action: #0050d1; --facebook-colors-text-default: #ffffff; --facebook-colors-text-action: #ffffff; --facebook-colors-text-active: #ffffff; --facebook-colors-text-active-action: #ffffff; --google-colors-base-default: #f2f2f2; --google-colors-base-action: #c2c2c2; --google-colors-base-active: #f2f2f2; --google-colors-base-active-action: #c2c2c2; --google-colors-text-default: #1f1f1f;
98 --google-colors-text-action: #1f1f1f; --google-colors-text-active: #1f1f1f; --google-colors-text-active-action: #1f1f1f; --kakao-colors-base-default: #fee500; --kakao-colors-base-action: #ebd402; --kakao-colors-base-active: #fee500; --kakao-colors-base-active-action: #ebd402; --kakao-colors-text-default: #262200; --kakao-colors-text-action: #262200; --kakao-colors-text-active: #262200; --kakao-colors-text-active-action: #262200; --line-colors-base-default: #06c755; --line-colors-base-action: #1fcd66; --line-colors-base-active: #048b3c; --line-colors-base-active-action: #06c755; --line-colors-text-default: #ffffff; --line-colors-text-action: #ffffff; --line-colors-text-active: #ffffff; --line-colors-text-active-action: #ffffff; --snapchat-colors-base-default: #fffc00; --snapchat-colors-base-action: #ece801; --snapchat-colors-base-active: #fffc00; --snapchat-colors-base-active-action: #ece801; --snapchat-colors-text-default: #000000; --snapchat-colors-text-action: #000000; --snapchat-colors-text-active: #000000; --snapchat-colors-text-active-action: #000000; --christmas-green-colors-base-default: #007c02; --christmas-green-colors-base-action: #0e5a18; --christmas-green-colors-base-active: #007c02; --christmas-green-colors-base-active-action: #0e5a18; --christmas-green-colors-text-default: #ffffff; --christmas-green-colors-text-action: #ffffff; --christmas-green-colors-text-active: #ffffff; --christmas-green-colors-text-active-action: #ffffff; --christmas-red-colors-base-default: #c70e17; --christmas-red-colors-base-action: #9e0b12; --christmas-red-colors-base-active: #c70e17; --christmas-red-colors-base-active-action: #9e0b12; --christmas-red-colors-text-default: #ffffff; --christmas-red-colors-text-action: #ffffff; --christmas-red-colors-text-active: #ffffff; --christmas-red-colors-text-active-action: #ffffff; --effects-alpha-20: color-mix(in srgb, #ffffff 20%, transparent); --effects-alpha-50: color-mix(in srgb, #ffffff 50%, transparent); --effects-alpha-80: color-mix(in srgb, #ffffff 80%, transparent); --effects-vignette: radial-gradient(44.71% 44.71% at 50.14% 50.12%, rgba(243, 10, 242, .484) 0%, rgba(243, 10, 242, .33) 32%, rgba(243, 10, 242, .187) 56%, rgba(243, 10, 242, .088) 76%, rgba(243, 10, 242, .022) 91%, rgba(243, 10, 242, 0) 100%); --effects-glassy-tint: rgba(255, 255, 255, .64); --effects-glassy-highlight: rgb(255, 255, 255); --effects-glassy-highlight-top: rgb(255, 255, 255); --effects-glassy-highlight-border: rgb(255, 255, 255); --effects-glassy-inner-shadow: inset 0px 1px 0 rgb(255 255 255 / 18%), inset 0 1px 0 rgb(255 255 255 / 10%), inset 0px 0px 19px 12px rgb(255 255 255 / 29%); --effects-glassy-blur-radius: 8px; --effects-glassy-border-width: 1px; --effects-glassy-backdrop: blur(var(--effects-glassy-blur-radius)); --effects-glassy-edge-top: linear-gradient(90deg, transparent, var(--effects-glassy-highlight-top), transparent); --effects-glassy-edge-side: linear-gradient(180deg, var(--effects-glassy-highlight), transparent, var(--effects-glassy-highlight)); --effects-glassy-shadow: 0px 8px 32px 0px rgba(0, 0, 0, .12); --effects-blurred-radius: 32px; --effects-blurred: blur(var(--effects-blurred-radius)); --shadows-tint-1: 0px 0px 16px 0px rgba(0, 0, 0, .12); --shadows-tint-2: 0px 0px 24px 0px rgba(0, 0, 0, .16); --shadows-tint-3: 0px 0px 32px 0px rgba(0, 0, 0, .16); } 99 @media (prefers-reduced-transparency: reduce) { 100 html.light { --effects-glassy-tint: var(--background-colors-base); --effects-glassy-backdrop: none; --effects-glassy-edge-top: none; --effects-glassy-edge-side: none; --effects-blurred: none; } 101} 102 html.dark { --brand-colors-default: #FF47FF; --brand-colors-light: #FFFCF8; --brand-colors-dark: #000000; --absolute-black-colors-base-default: #000000; --absolute-black-colors-base-action: #313131; --absolute-black-colors-base-active: #000000; --absolute-black-colors-base-active-action: #313131; --absolute-black-colors-text-default: #ffffff; --absolute-black-colors-text-action: #ffffff; --absolute-black-colors-text-active: #ffffff; --absolute-black-colors-text-active-action: #ffffff; --absolute-white-colors-base-default: #ffffff; --absolute-white-colors-base-action: #ececec; --absolute-white-colors-base-active: #ffffff; --absolute-white-colors-base-active-action: #ececec; --absolute-white-colors-text-default: #000000; --absolute-white-colors-text-action: #000000; --absolute-white-colors-text-active: #000000; --absolute-white-colors-text-active-action: #000000; --background-colors-base: #121212; --background-colors-tint-1: #1c1c1c; --background-colors-tint-2: #262626; --background-colors-tint-3: #454545; --background-colors-border: #303030; --background-colors-transparent: rgba(0, 0, 0, .6); --background-colors-tooltip: #000000; --background-colors-popover: #0f0f0f;
102 --background-colors-canvas-back-layer: #262626; --control-colors-border-default: #3b3b3b; --control-colors-border-action: #3b3b3b; --control-colors-border-active: #3b3b3b; --control-colors-border-active-action: #3b3b3b; --control-colors-button-background-default: #000000; --control-colors-button-background-action: #212121; --control-colors-button-background-active: #2a2a2a; --control-colors-button-background-active-action: #212121; --control-colors-caret-default: #ff47ff; --control-colors-caret-action: #ff47ff; --control-colors-caret-active: #ff47ff; --control-colors-caret-active-action: #ff47ff; --control-colors-end-icon-default: #b3b3b3; --control-colors-end-icon-action: #cccccc; --control-colors-end-icon-active: #ffffff; --control-colors-end-icon-active-action: #cccccc; --control-colors-field-background-default: #000000; --control-colors-field-background-action: #212121; --control-colors-field-background-active: #2a2a2a; --control-colors-field-background-active-action: #212121; --control-colors-placeholder-default: #7a7a7a; --control-colors-placeholder-action: #7a7a7a; --control-colors-placeholder-active: #7a7a7a; --control-colors-placeholder-active-action: #7a7a7a; --control-colors-slider-thumb-default: #ffffff; --control-colors-slider-thumb-action: #f1f1f1; --control-colors-slider-thumb-active: #ffffff; --control-colors-slider-thumb-active-action: #f1f1f1; --control-colors-slider-track-default: #FF47FF; --control-colors-slider-track-action: #FF47FF; --control-colors-slider-track-active: #FF47FF; --control-colors-slider-track-active-action: #FF47FF; --control-colors-start-icon-default: #b3b3b3; --control-colors-start-icon-action: #cccccc; --control-colors-start-icon-active: #ffffff; --control-colors-start-icon-active-action: #cccccc; --control-colors-text-default: #b3b3b3; --control-colors-text-action: #cccccc; --control-colors-text-active: #ffffff; --control-colors-text-active-action: #cccccc; --control-colors-value-default: #b3b3b3; --control-colors-value-action: #cccccc; --control-colors-value-active: #ffffff; --control-colors-value-active-action: #cccccc; --text-colors-base: #ffffff; --text-colors-tint-1: #b3b3b3; --text-colors-tint-2: #808080; --text-colors-tint-3: #7d7d7d; --error-colors-base-default: #F8495A; --error-colors-base-action: #FC6574; --error-colors-base-active: #F8495A; --error-colors-base-active-action: #FC6574; --error-colors-text-default: #000000; --error-colors-text-action: #000000; --error-colors-text-active: #000000; --error-colors-text-active-action: #000000; --information-colors-base-default: #42c6ff; --information-colors-base-action: #7fd6fc; --information-colors-base-active: #42c6ff; --information-colors-base-active-action: #7fd6fc; --information-colors-text-default: #000000; --information-colors-text-action: #000000; --information-colors-text-active: #000000; --information-colors-text-active-action: #000000; --success-colors-base-default: #00E099; --success-colors-base-action: #4CE1B2; --success-colors-base-active: #00E099; --success-colors-base-active-action: #4CE1B2; --success-colors-text-default: #000000; --success-colors-text-action: #000000; --success-colors-text-active: #000000; --success-colors-text-active-action: #000000; --warning-colors-base-default: #FF9D00; --warning-colors-base-action: #FFBE55; --warning-colors-base-active: #FF9D00; --warning-colors-base-active-action: #FFBE55; --warning-colors-text-default: #000000; --warning-colors-text-action: #000000; --warning-colors-text-active: #000000; --warning-colors-text-active-action: #000000; --negative-colors-base-default: #ffffff; --negative-colors-base-action: #b4b4b4; --negative-colors-base-active: #ffffff; --negative-colors-base-active-action: #b4b4b4; --negative-colors-text-default: #000000; --negative-colors-text-action: #000000; --negative-colors-text-active: #000000; --negative-colors-text-active-action: #000000; --neutral-colors-base-default: #2f2f2f; --neutral-colors-base-action: #080808; --neutral-colors-base-active: #2f2f2f; --neutral-colors-base-active-action: #080808; --neutral-colors-text-default: #ffffff; --neutral-colors-text-action: #ffffff; --neutral-colors-text-active: #ffffff; --neutral-colors-text-active-action: #ffffff; --positive-colors-base-default: #000000; --positive-colors-base-action: #787878; --positive-colors-base-active: #000000; --positive-colors-base-active-action: #787878; --positive-colors-text-default: #ffffff; --positive-colors-text-action: #ffffff; --positive-colors-text-active: #ffffff; --positive-colors-text-active-action: #ffffff; --primary-colors-base-default: #ff47ff; --primary-colors-base-action: #e636e6; --primary-colors-base-active: #ff47ff; --primary-colors-base-active-action: #e636e6; --primary-colors-text-default: #000000; --primary-colors-text-action: #000000; --primary-colors-text-active: #000000; --primary-colors-text-active-action: #000000; --primary-colors-alpha-10: rgba(255, 71, 255, .1019607843); --primary-colors-alpha-20: rgba(255, 71, 255, .2); --primary-colors-alpha-50: rgba(255, 71, 255, .5019607843); --primary-colors-alpha-80: rgba(255, 71, 255, .8); --transformer-colors-base-default: #3b8ce2; --transformer-colors-base-action: #3b8ce2; --transformer-colors-base-active: #3b8ce2; --transformer-colors-base-active-action: #3b8ce2; --transformer-colors-text-default: #ffffff; --transformer-colors-text-action: #ffffff; --transformer-colors-text-active: #ffffff; --transformer-colors-text-active-action: #ffffff; --monetization-plus-colors-base-default: #e982f4; --monetization-plus-colors-base-action: #e156f0; --monetization-plus-colors-base-active: #e982f4; --monetization-plus-colors-base-active-action: #e156f0; --monetization-plus-colors-text-default: #000000; --monetization-plus-colors-text-action: #000000; --monetization-plus-colors-text-active: #000000; --monetization-plus-colors-text-active-action: #000000; --monetization-plus-colors-alpha-10: rgba(233, 130, 244, .1019607843); --monetization-plus-colors-alpha-20: rgba(233, 130, 244, .2); --monetization-plus-colors-alpha-50: rgba(233, 130, 244, .5019607843); --monetization-plus-colors-alpha-80: rgba(233, 130, 244, .8); --monetization-pro-colors-base-default: #bd99f8; --monetization-pro-colors-base-action: #8168a9; --monetization-pro-colors-base-active: #bd99f8; --monetization-pro-colors-base-active-action: #8168a9; --monetization-pro-colors-text-default: #000000; --monetization-pro-colors-text-action: #000000; --monetization-pro-colors-text-active: #000000; --monetization-pro-colors-text-active-action: #000000; --monetization-pro-colors-alpha-10: rgba(189, 153, 248, .1019607843); --monetization-pro-colors-alpha-20: rgba(189, 153, 248, .2); --monetization-pro-colors-alpha-50: rgba(189, 153, 248, .5019607843); --monetization-pro-colors-alpha-80: rgba(189, 153, 248, .8); --monetization-ultra-colors-base-default: #158380; --monetization-ultra-colors-base-action: #0e5957; --monetization-ultra-colors-base-active: #158380; --monetization-ultra-colors-base-active-action: #0e5957; --monetization-ultra-colors-text-default: #ffffff; --monetization-ultra-colors-text-action: #ffffff; --monetization-ultra-colors-text-active: #ffffff; --monetization-ultra-colors-text-active-action: #ffffff; --monetization-ultra-colors-alpha-10: rgba(21, 131, 128, .1019607843); --monetization-ultra-colors-alpha-20: rgba(21, 131, 128, .2); --monetization-ultra-colors-alpha-50: rgba(21, 131, 128, .5019607843); --monetization-ultra-colors-alpha-80: rgba(21, 131, 128, .8); --gradients-general-brand: linear-gradient(225deg, #00ffed 0%, #19d7e7 22.96%, #7f4ad9 45.31%, #af1fc6 66.73%, #df02c0 100%); --gradients-general-primary: linear-gradient(270deg, #f749f6 0%, #c209c1 100%); --gradients-status-info: linear-gradient(270deg, #6fd4ff 0%, #22afec 100%); --gradients-status-success: linear-gradient(270.09deg, #33f3b6 -1.08%, #05d08f 99.92%); --gradients-status-warning: linear-gradient(270deg, #ffcc63 0%, #ff921e 100%); --gradients-status-error: linear-gradient(270deg, #ff6170 0%, #ee3446 100%); --gradients-monetization-plus: linear-gradient(270deg, #ef5eff 0%, #d41ee8 100%); --gradients-monetization-pro: linear-gradient(270deg, #b78aff 0%, #904cff 100%); --gradients-monetization-ultra: linear-gradient(270deg, #24c7c2 0%, #009994 100%); --gradients-background-up: linear-gradient(360deg, #121212 0%, transparent 100%); --gradients-background-down: linear-gradient(180deg, #121212 0%, transparent 100%); --gradients-background-left: linear-gradient(90deg, #121212 0%, transparent 100%); --gradients-background-right: linear-gradient(270deg, #121212 0%, transparent 100%); --apple-colors-base-default: #000000; --apple-colors-base-action: #1a1a1a; --apple-colors-base-active: #000000; --apple-colors-base-active-action: #1a1a1a; --apple-colors-text-default: #ffffff; --apple-colors-text-action: #ffffff; --apple-colors-text-active: #ffffff; --apple-colors-text-active-action: #ffffff; --facebook-colors-base-default: #0766ff; --facebook-colors-base-action: #0050d1; --facebook-colors-base-active: #0766ff; --facebook-colors-base-active-action: #0050d1; --facebook-colors-text-default: #ffffff; --facebook-colors-text-action: #ffffff; --facebook-colors-text-active: #ffffff; --facebook-colors-text-active-action: #ffffff; --google-colors-base-default: #f2f2f2; --google-colors-base-action: #c2c2c2; --google-colors-base-active: #f2f2f2; --google-colors-base-active-action: #c2c2c2; --google-colors-text-default: #1f1f1f;
102 --google-colors-text-action: #1f1f1f; --google-colors-text-active: #1f1f1f; --google-colors-text-active-action: #1f1f1f; --kakao-colors-base-default: #fee500; --kakao-colors-base-action: #ebd402; --kakao-colors-base-active: #fee500; --kakao-colors-base-active-action: #ebd402; --kakao-colors-text-default: #262200; --kakao-colors-text-action: #262200; --kakao-colors-text-active: #262200; --kakao-colors-text-active-action: #262200; --line-colors-base-default: #06c755; --line-colors-base-action: #1fcd66; --line-colors-base-active: #048b3c; --line-colors-base-active-action: #06c755; --line-colors-text-default: #ffffff; --line-colors-text-action: #ffffff; --line-colors-text-active: #ffffff; --line-colors-text-active-action: #ffffff; --snapchat-colors-base-default: #fffc00; --snapchat-colors-base-action: #ece801; --snapchat-colors-base-active: #fffc00; --snapchat-colors-base-active-action: #ece801; --snapchat-colors-text-default: #000000; --snapchat-colors-text-action: #000000; --snapchat-colors-text-active: #000000; --snapchat-colors-text-active-action: #000000; --christmas-green-colors-base-default: #13a745; --christmas-green-colors-base-action: #12942a; --christmas-green-colors-base-active: #13a745; --christmas-green-colors-base-active-action: #12942a; --christmas-green-colors-text-default: #000000; --christmas-green-colors-text-action: #000000; --christmas-green-colors-text-active: #000000; --christmas-green-colors-text-active-action: #000000; --christmas-red-colors-base-default: #ff3f53; --christmas-red-colors-base-action: #e02639; --christmas-red-colors-base-active: #ff3f53; --christmas-red-colors-base-active-action: #e02639; --christmas-red-colors-text-default: #000000; --christmas-red-colors-text-action: #000000; --christmas-red-colors-text-active: #000000; --christmas-red-colors-text-active-action: #000000; --effects-alpha-20: color-mix(in srgb, #000000 20%, transparent); --effects-alpha-50: color-mix(in srgb, #000000 50%, transparent); --effects-alpha-80: color-mix(in srgb, #000000 80%, transparent); --effects-vignette: radial-gradient(44.71% 44.71% at 50.14% 50.12%, rgba(243, 10, 242, .484) 0%, rgba(243, 10, 242, .33) 32%, rgba(243, 10, 242, .187) 56%, rgba(243, 10, 242, .088) 76%, rgba(243, 10, 242, .022) 91%, rgba(243, 10, 242, 0) 100%); --effects-glassy-tint: rgba(0, 0, 0, .64); --effects-glassy-highlight: rgb(43, 43, 43); --effects-glassy-highlight-top: rgb(102, 96, 96); --effects-glassy-highlight-border: var(--background-colors-tint-3); --effects-glassy-inner-shadow: inset 0px 1px 0 rgb(116 107 107 / 18%), inset 0 -1px 0 rgb(110 63 63 / 10%), inset 0px 0px 19px 12px rgb(0 0 0 / 29%); --effects-glassy-blur-radius: 8px; --effects-glassy-border-width: 1px; --effects-glassy-backdrop: blur(var(--effects-glassy-blur-radius)); --effects-glassy-edge-top: linear-gradient(90deg, transparent, var(--effects-glassy-highlight-top), transparent); --effects-glassy-edge-side: linear-gradient(180deg, var(--effects-glassy-highlight), transparent, var(--effects-glassy-highlight)); --effects-glassy-shadow: 0px 8px 32px 0px rgba(0, 0, 0, .12); --effects-blurred-radius: 32px; --effects-blurred: blur(var(--effects-blurred-radius)); --shadows-tint-1: 0px 2px 12px 0px rgba(0, 0, 0, .5), 0px 1px 4px 0px rgba(0, 0, 0, .35); --shadows-tint-2: 0px 6px 24px 0px rgba(0, 0, 0, .6), 0px 3px 10px 0px rgba(0, 0, 0, .4); --shadows-tint-3: 0px 20px 60px 0px rgba(0, 0, 0, .75), 0px 8px 28px 0px rgba(0, 0, 0, .55); } 103 @media (prefers-reduced-transparency: reduce) { 104 html.dark { --effects-glassy-tint: var(--background-colors-base); --effects-glassy-backdrop: none; --effects-glassy-edge-top: none; --effects-glassy-edge-side: none; --effects-blurred: none; } 105} 106} 107@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 108@layer ds-atoms { 109 .button { display: inline-flex; vertical-align: top; align-items: center; justify-content: center; max-width: 100%; transition-property: background-color, border, color; transition-timing-function: var(--easings-ease); transition-duration: var(--timings-default); } 110 .button--large { height: 40px; padding-block: var(--spacings-s10); padding-inline: var(--spacings-s10); border-radius: var(--corner-radius-r20); column-gap: var(--spacings-s2); font-weight: 600; font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); } 111 .button--small { height: 32px; padding-block: var(--spacings-s6); padding-inline: var(--spacings-s6); border-radius: var(--corner-radius-r16); column-gap: var(--spacings-s2); font-weight: 600; font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); } 112 .button--outline { border-style: solid; border-width: 1px; } 113 .button--outline.button--small { border-width: 1px; } 114 .button--no-border { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; } 115 .button--center-icon { padding: 0px; font-size: 0px; border-radius: var(--corner-radius-circle); } 116 .button--center-icon.button--large:not(.button--center-icon-full-width) { width: 40px; min-width: 40px; } 117 .button--center-icon.button--small:not(.button--center-icon-full-width) { width: 32px; min-width: 32px; } 118 .button--center-icon-full-width.button--large { border-radius: var(--corner-radius-r20); } 119 .button--center-icon-full-width.button--small { border-radius: var(--corner-radius-r16); } 120 .button--full-width { width: 100%; } 121 .button--skin-primary.button--default-state { background-color: var(--primary-colors-base-default); color: var(--primary-colors-text-default); } 122 .button--skin-primary.button--interactive:hover, .button--skin-primary.button--interactive:active { background-color: var(--primary-colors-base-action); color: var(--primary-colors-text-action); } 123 .button--skin-primary.button--active-state { background-color: var(--primary-colors-base-active); color: var(--primary-colors-text-active); } 124 .button--skin-primary.button--active-interactive:hover, .button--skin-primary.button--active-interactive:active { background-color: var(--primary-colors-base-active-action); color: var(--primary-colors-text-action); } 125 .button--skin-primary.button--loading .button__loading-icon { color: var(--primary-colors-text-default); } 126 .button--skin-primary.button--outline.button--default-state { background-color: transparent; border-color: var(--primary-colors-base-default); color: var(--primary-colors-base-default); } 127 .button--skin-primary.button--outline.button--interactive:hover, .button--skin-primary.button--outline.button--interactive:active { background-color: transparent; border-color: var(--primary-colors-base-action); color: var(--primary-colors-base-action); } 128 .button--skin-primary.button--outline.button--active-state { background-color: transparent; border-color: var(--primary-colors-base-active); color: var(--primary-colors-base-active); } 129 .button--skin-primary.button--outline.button--active-interactive:hover, .button--skin-primary.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--primary-colors-base-active-action); color: var(--primary-colors-base-active-action); } 130 .button--skin-primary.button--outline.button--loading .button__loading-icon { color: var(--primary-colors-base-default); } 131 .button--skin-primary.button--text.button--default-state { background-color: transparent; color: var(--primary-colors-base-default); } 132 .button--skin-primary.button--text.button--interactive:hover, .button--skin-primary.button--text.button--interactive:active { background-color: transparent; color: var(--primary-colors-base-action); } 133 .button--skin-primary.button--text.button--active-state { background-color: transparent; color: var(--primary-colors-base-active); } 134 .button--skin-primary.button--text.button--active-interactive:hover, .button--skin-primary.button--text.button--active-interactive:active { background-color: transparent; color: var(--primary-colors-base-active-action); } 135 .button--skin-primary.button--text.button--loading .button__loading-icon { color: var(--primary-colors-base-default); } 136 .button--skin-neutral.button--default-state { background-color: var(--neutral-colors-base-default); color: var(--neutral-colors-text-default); } 137 .button--skin-neutral.button--interactive:hover, .button--skin-neutral.button--interactive:active { background-color: var(--neutral-colors-base-action); color: var(--neutral-colors-text-action); } 138 .button--skin-neutral.button--active-state { background-color: var(--neutral-colors-base-active); color: var(--neutral-colors-text-active); } 139 .button--skin-neutral.button--active-interactive:hover, .button--skin-neutral.button--active-interactive:active { background-color: var(--neutral-colors-base-active-action); color: var(--neutral-colors-text-action); } 140 .button--skin-neutral.button--loading .button__loading-icon { color: var(--neutral-colors-text-default); } 141 .button--skin-neutral.button--outline.button--default-state { background-color: transparent; border-color: var(--neutral-colors-base-default); color: var(--neutral-colors-base-default); } 142 .button--skin-neutral.button--outline.button--interactive:hover, .button--skin-neutral.button--outline.button--interactive:active { background-color: transparent; border-color: var(--neutral-colors-base-action); color: var(--neutral-colors-base-action); } 143 .button--skin-neutral.button--outline.button--active-state { background-color: transparent; border-color: var(--neutral-colors-base-active); color: var(--neutral-colors-base-active); } 144 .button--skin-neutral.button--outline.button--active-interactive:hover, .button--skin-neutral.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--neutral-colors-base-active-action); color: var(--neutral-colors-base-active-action); } 145 .button--skin-neutral.button--outline.button--loading .button__loading-icon { color: var(--neutral-colors-base-default); } 146 .button--skin-neutral.button--text.button--default-state { background-color: transparent; color: var(--neutral-colors-base-default); } 147 .button--skin-neutral.button--text.button--interactive:hover, .button--skin-neutral.button--text.button--interactive:active { background-color: transparent; color: var(--neutral-colors-base-action); } 148 .button--skin-neutral.button--text.button--active-state { background-color: transparent; color: var(--neutral-colors-base-active); } 149 .button--skin-neutral.button--text.button--active-interactive:hover, .button--skin-neutral.button--text.button--active-interactive:active { background-color: transparent; color: var(--neutral-colors-base-active-action); } 150 .button--skin-neutral.button--text.button--loading .button__loading-icon { color: var(--neutral-colors-base-default); } 151 .button--skin-plus.button--default-state { background-color: var(--monetization-plus-colors-base-default); color: var(--monetization-plus-colors-text-default); } 152 .button--skin-plus.button--interactive:hover, .button--skin-plus.button--interactive:active { background-color: var(--monetization-plus-colors-base-action); color: var(--monetization-plus-colors-text-action); } 153 .button--skin-plus.button--active-state { background-color: var(--monetization-plus-colors-base-active); color: var(--monetization-plus-colors-text-active); } 154 .button--skin-plus.button--active-interactive:hover, .button--skin-plus.button--active-interactive:active { background-color: var(--monetization-plus-colors-base-active-action); color: var(--monetization-plus-colors-text-action); } 155 .button--skin-plus.button--loading .button__loading-icon { color: var(--monetization-plus-colors-text-default); } 156 .button--skin-plus.button--outline.button--default-state { background-color: transparent; border-color: var(--monetization-plus-colors-base-default); color: var(--monetization-plus-colors-base-default); } 157 .button--skin-plus.button--outline.button--interactive:hover, .button--skin-plus.button--outline.button--interactive:active { background-color: transparent; border-color: var(--monetization-plus-colors-base-action); color: var(--monetization-plus-colors-base-action); } 158 .button--skin-plus.button--outline.button--active-state { background-color: transparent; border-color: var(--monetization-plus-colors-base-active); color: var(--monetization-plus-colors-base-active); } 159 .button--skin-plus.button--outline.button--active-interactive:hover, .button--skin-plus.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--monetization-plus-colors-base-active-action); color: var(--monetization-plus-colors-base-active-action); } 160 .button--skin-plus.button--outline.button--loading .button__loading-icon { color: var(--monetization-plus-colors-base-default); } 161 .button--skin-plus.button--text.button--default-state { background-color: transparent; color: var(--monetization-plus-colors-base-default); } 162 .button--skin-plus.button--text.button--interactive:hover, .button--skin-plus.button--text.button--interactive:active { background-color: transparent; color: var(--monetization-plus-colors-base-action); } 163 .button--skin-plus.button--text.button--active-state { background-color: transparent; color: var(--monetization-plus-colors-base-active); } 164 .button--skin-plus.button--text.button--active-interactive:hover, .button--skin-plus.button--text.button--active-interactive:active { background-color: transparent; color: var(--monetization-plus-colors-base-active-action); } 165 .button--skin-plus.button--text.button--loading .button__loading-icon { color: var(--monetization-plus-colors-base-default); } 166 .button--skin-pro.button--default-state { background-color: var(--monetization-pro-colors-base-default); color: var(--monetization-pro-colors-text-default); } 167 .button--skin-pro.button--interactive:hover, .button--skin-pro.button--interactive:active { background-color: var(--monetization-pro-colors-base-action); color: var(--monetization-pro-colors-text-action); } 168 .button--skin-pro.button--active-state { background-color: var(--monetization-pro-colors-base-active); color: var(--monetization-pro-colors-text-active); } 169 .button--skin-pro.button--active-interactive:hover, .button--skin-pro.button--active-interactive:active { background-color: var(--monetization-pro-colors-base-active-action); color: var(--monetization-pro-colors-text-action); } 170 .button--skin-pro.button--loading .button__loading-icon { color: var(--monetization-pro-colors-text-default); } 171 .button--skin-pro.button--outline.button--default-state { background-color: transparent; border-color: var(--monetization-pro-colors-base-default); color: var(--monetization-pro-colors-base-default); } 172 .button--skin-pro.button--outline.button--interactive:hover, .button--skin-pro.button--outline.button--interactive:active { background-color: transparent; border-color: var(--monetization-pro-colors-base-action); color: var(--monetization-pro-colors-base-action); } 173 .button--skin-pro.button--outline.button--active-state { background-color: transparent; border-color: var(--monetization-pro-colors-base-active); color: var(--monetization-pro-colors-base-active); } 174 .button--skin-pro.button--outline.button--active-interactive:hover, .button--skin-pro.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--monetization-pro-colors-base-active-action); color: var(--monetization-pro-colors-base-active-action); } 175 .button--skin-pro.button--outline.button--loading .button__loading-icon { color: var(--monetization-pro-colors-base-default); } 176 .button--skin-pro.button--text.button--default-state { background-color: transparent; color: var(--monetization-pro-colors-base-default); } 177 .button--skin-pro.button--text.button--interactive:hover, .button--skin-pro.button--text.button--interactive:active { background-color: transparent; color: var(--monetization-pro-colors-base-action); } 178 .button--skin-pro.button--text.button--active-state { background-color: transparent; color: var(--monetization-pro-colors-base-active); } 179 .button--skin-pro.button--text.button--active-interactive:hover, .button--skin-pro.button--text.button--active-interactive:active { background-color: transparent; color: var(--monetization-pro-colors-base-active-action); } 180 .button--skin-pro.button-
180-text.button--loading .button__loading-icon { color: var(--monetization-pro-colors-base-default); } 181 .button--skin-ultra.button--default-state { background-color: var(--monetization-ultra-colors-base-default); color: var(--monetization-ultra-colors-text-default); } 182 .button--skin-ultra.button--interactive:hover, .button--skin-ultra.button--interactive:active { background-color: var(--monetization-ultra-colors-base-action); color: var(--monetization-ultra-colors-text-action); } 183 .button--skin-ultra.button--active-state { background-color: var(--monetization-ultra-colors-base-active); color: var(--monetization-ultra-colors-text-active); } 184 .button--skin-ultra.button--active-interactive:hover, .button--skin-ultra.button--active-interactive:active { background-color: var(--monetization-ultra-colors-base-active-action); color: var(--monetization-ultra-colors-text-action); } 185 .button--skin-ultra.button--loading .button__loading-icon { color: var(--monetization-ultra-colors-text-default); } 186 .button--skin-ultra.button--outline.button--default-state { background-color: transparent; border-color: var(--monetization-ultra-colors-base-default); color: var(--monetization-ultra-colors-base-default); } 187 .button--skin-ultra.button--outline.button--interactive:hover, .button--skin-ultra.button--outline.button--interactive:active { background-color: transparent; border-color: var(--monetization-ultra-colors-base-action); color: var(--monetization-ultra-colors-base-action); } 188 .button--skin-ultra.button--outline.button--active-state { background-color: transparent; border-color: var(--monetization-ultra-colors-base-active); color: var(--monetization-ultra-colors-base-active); } 189 .button--skin-ultra.button--outline.button--active-interactive:hover, .button--skin-ultra.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--monetization-ultra-colors-base-active-action); color: var(--monetization-ultra-colors-base-active-action); } 190 .button--skin-ultra.button--outline.button--loading .button__loading-icon { color: var(--monetization-ultra-colors-base-default); } 191 .button--skin-ultra.button--text.button--default-state { background-color: transparent; color: var(--monetization-ultra-colors-base-default); } 192 .button--skin-ultra.button--text.button--interactive:hover, .button--skin-ultra.button--text.button--interactive:active { background-color: transparent; color: var(--monetization-ultra-colors-base-action); } 193 .button--skin-ultra.button--text.button--active-state { background-color: transparent; color: var(--monetization-ultra-colors-base-active); } 194 .button--skin-ultra.button--text.button--active-interactive:hover, .button--skin-ultra.button--text.button--active-interactive:active { background-color: transparent; color: var(--monetization-ultra-colors-base-active-action); } 195 .button--skin-ultra.button--text.button--loading .button__loading-icon { color: var(--monetization-ultra-colors-base-default); } 196 .button--skin-success.button--default-state { background-color: var(--success-colors-base-default); color: var(--success-colors-text-default); } 197 .button--skin-success.button--interactive:hover, .button--skin-success.button--interactive:active { background-color: var(--success-colors-base-action); color: var(--success-colors-text-action); } 198 .button--skin-success.button--active-state { background-color: var(--success-colors-base-active); color: var(--success-colors-text-active); } 199 .button--skin-success.button--active-interactive:hover, .button--skin-success.button--active-interactive:active { background-color: var(--success-colors-base-active-action); color: var(--success-colors-text-action); } 200 .button--skin-success.button--loading .button__loading-icon { color: var(--success-colors-text-default); } 201 .button--skin-success.button--outline.button--default-state { background-color: transparent; border-color: var(--success-colors-base-default); color: var(--success-colors-base-default); } 202 .button--skin-success.button--outline.button--interactive:hover, .button--skin-success.button--outline.button--interactive:active { background-color: transparent; border-color: var(--success-colors-base-action); color: var(--success-colors-base-action); } 203 .button--skin-success.button--outline.button--active-state { background-color: transparent; border-color: var(--success-colors-base-active); color: var(--success-colors-base-active); } 204 .button--skin-success.button--outline.button--active-interactive:hover, .button--skin-success.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--success-colors-base-active-action); color: var(--success-colors-base-active-action); } 205 .button--skin-success.button--outline.button--loading .button__loading-icon { color: var(--success-colors-base-default); } 206 .button--skin-success.button--text.button--default-state { background-color: transparent; color: var(--success-colors-base-default); } 207 .button--skin-success.button--text.button--interactive:hover, .button--skin-success.button--text.button--interactive:active { background-color: transparent; color: var(--success-colors-base-action); } 208 .button--skin-success.button--text.button--active-state { background-color: transparent; color: var(--success-colors-base-active); } 209 .button--skin-success.button--text.button--active-interactive:hover, .button--skin-success.button--text.button--active-interactive:active { background-color: transparent; color: var(--success-colors-base-active-action); } 210 .button--skin-success.button--text.button--loading .button__loading-icon { color: var(--success-colors-base-default); } 211 .button--skin-warning.button--default-state { background-color: var(--warning-colors-base-default); color: var(--warning-colors-text-default); } 212 .button--skin-warning.button--interactive:hover, .button--skin-warning.button--interactive:active { background-color: var(--warning-colors-base-action); color: var(--warning-colors-text-action); } 213 .button--skin-warning.button--active-state { background-color: var(--warning-colors-base-active); color: var(--warning-colors-text-active); } 214 .button--skin-warning.button--active-interactive:hover, .button--skin-warning.button--active-interactive:active { background-color: var(--warning-colors-base-active-action); color: var(--warning-colors-text-action); } 215 .button--skin-warning.button--loading .button__loading-icon { color: var(--warning-colors-text-default); } 216 .button--skin-warning.button--outline.button--default-state { background-color: transparent; border-color: var(--warning-colors-base-default); color: var(--warning-colors-base-default); } 217 .button--skin-warning.button--outline.button--interactive:hover, .button--skin-warning.button--outline.button--interactive:active { background-color: transparent; border-color: var(--warning-colors-base-action); color: var(--warning-colors-base-action); } 218 .button--skin-warning.button--outline.button--active-state { background-color: transparent; border-color: var(--warning-colors-base-active); color: var(--warning-colors-base-active); } 219 .button--skin-warning.button--outline.button--active-interactive:hover, .button--skin-warning.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--warning-colors-base-active-action); color: var(--warning-colors-base-active-action); } 220 .button--skin-warning.button--outline.button--loading .button__loading-icon { color: var(--warning-colors-base-default); } 221 .button--skin-warning.button--text.button--default-state { background-color: transparent; color: var(--warning-colors-base-default); } 222 .button--skin-warning.button--text.button--interactive:hover, .button--skin-warning.button--text.button--interactive:active { background-color: transparent; color: var(--warning-colors-base-action); } 223 .button--skin-warning.button--text.button--active-state { background-color: transparent; color: var(--warning-colors-base-active); } 224 .button--skin-warning.button--text.button--active-interactive:hover, .button--skin-warning.button--text.button--active-interactive:active { background-color: transparent; color: var(--warning-colors-base-active-action); } 225 .button--skin-warning.button--text.button--loading .button__loading-icon { color: var(--warning-colors-base-default); } 226 .button--skin-error.button--default-state { background-color: var(--error-colors-base-default); color: var(--error-colors-text-default); } 227 .button--skin-error.button--interactive:hover, .button--skin-error.button--interactive:active { background-color: var(--error-colors-base-action); color: var(--error-colors-text-action); } 228 .button--skin-error.button--active-state { background-color: var(--error-colors-base-active); color: var(--error-colors-text-active); } 229 .button--skin-error.button--active-interactive:hover, .button--skin-error.button--active-interactive:active { background-color: var(--error-colors-base-active-action); color: var(--error-colors-text-action); } 230 .button--skin-error.button--loading .button__loading-icon { color: var(--error-colors-text-default); } 231 .button--skin-error.button--outline.button--default-state { background-color: transparent; border-color: var(--error-colors-base-default); color: var(--error-colors-base-default); } 232 .button--skin-error.button--outline.button--interactive:hover, .button--skin-error.button--outline.button--interactive:active { background-color: transparent; border-color: var(--error-colors-base-action); color: var(--error-colors-base-action); } 233 .button--skin-error.button--outline.button--active-state { background-color: transparent; border-color: var(--error-colors-base-active); color: var(--error-colors-base-active); } 234 .button--skin-error.button--outline.button--active-interactive:hover, .button--skin-error.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--error-colors-base-active-action); color: var(--error-colors-base-active-action); } 235 .button--skin-error.button--outline.button--loading .button__loading-icon { color: var(--error-colors-base-default); } 236 .button--skin-error.button--text.button--default-state { background-color: transparent; color: var(--error-colors-base-default); } 237 .button--skin-error.button--text.button--interactive:hover, .button--skin-error.button--text.button--interactive:active { background-color: transparent; color: var(--error-colors-base-action); } 238 .button--skin-error.button--text.button--active-state { background-color: transparent; color: var(--error-colors-base-active); } 239 .button--skin-error.button--text.button--active-interactive:hover, .button--skin-error.button--text.button--active-interactive:active { background-color: transparent; color: var(--error-colors-base-active-action); } 240 .button--skin-error.button--text.button--loading .button__loading-icon { color: var(--error-colors-base-default); } 241 .button--skin-information.button--default-state { background-color: var(--information-colors-base-default); color: var(--information-colors-text-default); } 242 .button--skin-information.button--interactive:hover, .button--skin-information.button--interactive:active { background-color: var(--information-colors-base-action); color: var(--information-colors-text-action); } 243 .button--skin-information.button--active-state { background-color: var(--information-colors-base-active); color: var(--information-colors-text-active); } 244 .button--skin-information.button--active-interactive:hover, .button--skin-information.button--active-interactive:active { background-color: var(--information-colors-base-active-action); color: var(--information-colors-text-action); } 245 .button--skin-information.button--loading .button__loading-icon { color: var(--information-colors-text-default); } 246 .button--skin-information.button--outline.button--default-state { background-color: transparent; border-color: var(--information-colors-base-default); color: var(--information-colors-base-default); } 247 .button--skin-information.button--outline.button--interactive:hover, .button--skin-information.button--outline.button--interactive:active { background-color: transparent; border-color: var(--information-colors-base-action); color: var(--information-colors-base-action); } 248 .button--skin-information.button--outline.button--active-state { background-color: transparent; border-color: var(--information-colors-base-active); color: var(--information-colors-base-active); } 249 .button--skin-information.button--outline.button--active-interactive:hover, .button--skin-information.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--information-colors-base-active-action); color: var(--information-colors-base-active-action); } 250 .button--skin-information.button--outline.button--loading .button__loading-icon { color: var(--information-colors-base-default); } 251 .button--skin-information.button--text.button--default-state { background-color: transparent; color: var(--information-colors-base-default); } 252 .button--skin-information.button--text.button--interactive:hover, .button--skin-information.button--text.button--interactive:active { background-color: transparent; color: var(--information-colors-base-action); } 253 .button--skin-information.button--text.button--active-state { background-color: transparent; color: var(--information-colors-base-active); } 254 .button--skin-information.button--text.button--active-interactive:hover, .button--skin-information.button--text.button--active-interactive:active { background-color: transparent; color: var(--information-colors-base-active-action); } 255 .button--skin-information.button--text.button--loading .button__loading-icon { color: var(--information-colors-base-default); } 256 .button--skin-positive.button--default-state { background-color: var(--positive-colors-base-default); color: var(--positive-colors-text-default); } 257 .button--skin-positive.button--interactive:hover, .button--skin-positive.button--interactive:active { background-color: var(--positive-colors-base-action); color: var(--positive-colors-text-action); } 258 .button--skin-positive.button--active-state { background-color: var(--positive-colors-base-active); color: var(--positive-colors-text-active); } 259 .button--skin-positive.button--active-interactive:hover, .button--skin-positive.button--active-interactive:active { background-color: var(--positive-colors-base-active-action); color: var(--positive-colors-text-action); } 260 .button--skin-positive.button--loading .button__loading-icon { color: var(--positive-colors-text-default); } 261 .button--skin-positive.button--outline.button--default-state { background-color: transparent; border-color: var(--positive-colors-base-default); color: var(--positive-colors-base-default); } 262 .button--skin-positive.button--outline.button--interactive:hover, .button--skin-positive.button--outline.button--interactive:active { background-color: transparent; border-color: var(--positive-colors-base-action); color: var(--positive-colors-base-action); } 263 .button--skin-positive.button--outline.button--active-state { background-color: transparent; border-color: var(--positive-colors-base-active); color: var(--positive-colors-base-active); } 264 .button--skin-positive.button--outline.button--active-interactive:hover, .button--skin-positive.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--positive-colors-base-active-action); color: var(--positive-colors-base-active-action); } 265 .button--skin-positive.button--outline.button--loading .button__loading-icon { color: var(--positive-colors-base-default); } 266 .button--skin-positive.button--text.button--default-state { background-color: transparent; color: var(--positive-colors-base-default); } 267 .button--skin-positive.button--text.button--interactive:hover, .button--skin-positive.button--text.button--interactive:active { background-color: transparent; color: var(--positive-colors-base-action); } 268 .button--skin-positive.button--text.button--active-state { background-color: transparent; color: var(--positive-colors-base-active); } 269 .button--skin-positive.button--text.button--active-interactive:hover, .button--skin-positive.button--text.button--active-interactive:active { background-color: transparent; c
269olor: var(--positive-colors-base-active-action); } 270 .button--skin-positive.button--text.button--loading .button__loading-icon { color: var(--positive-colors-base-default); } 271 .button--skin-negative.button--default-state { background-color: var(--negative-colors-base-default); color: var(--negative-colors-text-default); } 272 .button--skin-negative.button--interactive:hover, .button--skin-negative.button--interactive:active { background-color: var(--negative-colors-base-action); color: var(--negative-colors-text-action); } 273 .button--skin-negative.button--active-state { background-color: var(--negative-colors-base-active); color: var(--negative-colors-text-active); } 274 .button--skin-negative.button--active-interactive:hover, .button--skin-negative.button--active-interactive:active { background-color: var(--negative-colors-base-active-action); color: var(--negative-colors-text-action); } 275 .button--skin-negative.button--loading .button__loading-icon { color: var(--negative-colors-text-default); } 276 .button--skin-negative.button--outline.button--default-state { background-color: transparent; border-color: var(--negative-colors-base-default); color: var(--negative-colors-base-default); } 277 .button--skin-negative.button--outline.button--interactive:hover, .button--skin-negative.button--outline.button--interactive:active { background-color: transparent; border-color: var(--negative-colors-base-action); color: var(--negative-colors-base-action); } 278 .button--skin-negative.button--outline.button--active-state { background-color: transparent; border-color: var(--negative-colors-base-active); color: var(--negative-colors-base-active); } 279 .button--skin-negative.button--outline.button--active-interactive:hover, .button--skin-negative.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--negative-colors-base-active-action); color: var(--negative-colors-base-active-action); } 280 .button--skin-negative.button--outline.button--loading .button__loading-icon { color: var(--negative-colors-base-default); } 281 .button--skin-negative.button--text.button--default-state { background-color: transparent; color: var(--negative-colors-base-default); } 282 .button--skin-negative.button--text.button--interactive:hover, .button--skin-negative.button--text.button--interactive:active { background-color: transparent; color: var(--negative-colors-base-action); } 283 .button--skin-negative.button--text.button--active-state { background-color: transparent; color: var(--negative-colors-base-active); } 284 .button--skin-negative.button--text.button--active-interactive:hover, .button--skin-negative.button--text.button--active-interactive:active { background-color: transparent; color: var(--negative-colors-base-active-action); } 285 .button--skin-negative.button--text.button--loading .button__loading-icon { color: var(--negative-colors-base-default); } 286 .button--skin-black.button--default-state { background-color: var(--absolute-black-colors-base-default); color: var(--absolute-black-colors-text-default); } 287 .button--skin-black.button--interactive:hover, .button--skin-black.button--interactive:active { background-color: var(--absolute-black-colors-base-action); color: var(--absolute-black-colors-text-action); } 288 .button--skin-black.button--active-state { background-color: var(--absolute-black-colors-base-active); color: var(--absolute-black-colors-text-active); } 289 .button--skin-black.button--active-interactive:hover, .button--skin-black.button--active-interactive:active { background-color: var(--absolute-black-colors-base-active-action); color: var(--absolute-black-colors-text-action); } 290 .button--skin-black.button--loading .button__loading-icon { color: var(--absolute-black-colors-text-default); } 291 .button--skin-black.button--outline.button--default-state { background-color: transparent; border-color: var(--absolute-black-colors-base-default); color: var(--absolute-black-colors-base-default); } 292 .button--skin-black.button--outline.button--interactive:hover, .button--skin-black.button--outline.button--interactive:active { background-color: transparent; border-color: var(--absolute-black-colors-base-action); color: var(--absolute-black-colors-base-action); } 293 .button--skin-black.button--outline.button--active-state { background-color: transparent; border-color: var(--absolute-black-colors-base-active); color: var(--absolute-black-colors-base-active); } 294 .button--skin-black.button--outline.button--active-interactive:hover, .button--skin-black.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--absolute-black-colors-base-active-action); color: var(--absolute-black-colors-base-active-action); } 295 .button--skin-black.button--outline.button--loading .button__loading-icon { color: var(--absolute-black-colors-base-default); } 296 .button--skin-black.button--text.button--default-state { background-color: transparent; color: var(--absolute-black-colors-base-default); } 297 .button--skin-black.button--text.button--interactive:hover, .button--skin-black.button--text.button--interactive:active { background-color: transparent; color: var(--absolute-black-colors-base-action); } 298 .button--skin-black.button--text.button--active-state { background-color: transparent; color: var(--absolute-black-colors-base-active); } 299 .button--skin-black.button--text.button--active-interactive:hover, .button--skin-black.button--text.button--active-interactive:active { background-color: transparent; color: var(--absolute-black-colors-base-active-action); } 300 .button--skin-black.button--text.button--loading .button__loading-icon { color: var(--absolute-black-colors-base-default); } 301 .button--skin-white.button--default-state { background-color: var(--absolute-white-colors-base-default); color: var(--absolute-white-colors-text-default); } 302 .button--skin-white.button--interactive:hover, .button--skin-white.button--interactive:active { background-color: var(--absolute-white-colors-base-action); color: var(--absolute-white-colors-text-action); } 303 .button--skin-white.button--active-state { background-color: var(--absolute-white-colors-base-active); color: var(--absolute-white-colors-text-active); } 304 .button--skin-white.button--active-interactive:hover, .button--skin-white.button--active-interactive:active { background-color: var(--absolute-white-colors-base-active-action); color: var(--absolute-white-colors-text-action); } 305 .button--skin-white.button--loading .button__loading-icon { color: var(--absolute-white-colors-text-default); } 306 .button--skin-white.button--outline.button--default-state { background-color: transparent; border-color: var(--absolute-white-colors-base-default); color: var(--absolute-white-colors-base-default); } 307 .button--skin-white.button--outline.button--interactive:hover, .button--skin-white.button--outline.button--interactive:active { background-color: transparent; border-color: var(--absolute-white-colors-base-action); color: var(--absolute-white-colors-base-action); } 308 .button--skin-white.button--outline.button--active-state { background-color: transparent; border-color: var(--absolute-white-colors-base-active); color: var(--absolute-white-colors-base-active); } 309 .button--skin-white.button--outline.button--active-interactive:hover, .button--skin-white.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--absolute-white-colors-base-active-action); color: var(--absolute-white-colors-base-active-action); } 310 .button--skin-white.button--outline.button--loading .button__loading-icon { color: var(--absolute-white-colors-base-default); } 311 .button--skin-white.button--text.button--default-state { background-color: transparent; color: var(--absolute-white-colors-base-default); } 312 .button--skin-white.button--text.button--interactive:hover, .button--skin-white.button--text.button--interactive:active { background-color: transparent; color: var(--absolute-white-colors-base-action); } 313 .button--skin-white.button--text.button--active-state { background-color: transparent; color: var(--absolute-white-colors-base-active); } 314 .button--skin-white.button--text.button--active-interactive:hover, .button--skin-white.button--text.button--active-interactive:active { background-color: transparent; color: var(--absolute-white-colors-base-active-action); } 315 .button--skin-white.button--text.button--loading .button__loading-icon { color: var(--absolute-white-colors-base-default); } 316 .button--skin-facebook.button--default-state { background-color: var(--facebook-colors-base-default); color: var(--facebook-colors-text-default); } 317 .button--skin-facebook.button--interactive:hover, .button--skin-facebook.button--interactive:active { background-color: var(--facebook-colors-base-action); color: var(--facebook-colors-text-action); } 318 .button--skin-facebook.button--active-state { background-color: var(--facebook-colors-base-active); color: var(--facebook-colors-text-active); } 319 .button--skin-facebook.button--active-interactive:hover, .button--skin-facebook.button--active-interactive:active { background-color: var(--facebook-colors-base-active-action); color: var(--facebook-colors-text-action); } 320 .button--skin-facebook.button--loading .button__loading-icon { color: var(--facebook-colors-text-default); } 321 .button--skin-facebook.button--outline.button--default-state { background-color: transparent; border-color: var(--facebook-colors-base-default); color: var(--facebook-colors-base-default); } 322 .button--skin-facebook.button--outline.button--interactive:hover, .button--skin-facebook.button--outline.button--interactive:active { background-color: transparent; border-color: var(--facebook-colors-base-action); color: var(--facebook-colors-base-action); } 323 .button--skin-facebook.button--outline.button--active-state { background-color: transparent; border-color: var(--facebook-colors-base-active); color: var(--facebook-colors-base-active); } 324 .button--skin-facebook.button--outline.button--active-interactive:hover, .button--skin-facebook.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--facebook-colors-base-active-action); color: var(--facebook-colors-base-active-action); } 325 .button--skin-facebook.button--outline.button--loading .button__loading-icon { color: var(--facebook-colors-base-default); } 326 .button--skin-facebook.button--text.button--default-state { background-color: transparent; color: var(--facebook-colors-base-default); } 327 .button--skin-facebook.button--text.button--interactive:hover, .button--skin-facebook.button--text.button--interactive:active { background-color: transparent; color: var(--facebook-colors-base-action); } 328 .button--skin-facebook.button--text.button--active-state { background-color: transparent; color: var(--facebook-colors-base-active); } 329 .button--skin-facebook.button--text.button--active-interactive:hover, .button--skin-facebook.button--text.button--active-interactive:active { background-color: transparent; color: var(--facebook-colors-base-active-action); } 330 .button--skin-facebook.button--text.button--loading .button__loading-icon { color: var(--facebook-colors-base-default); } 331 .button--skin-google.button--default-state { background-color: var(--google-colors-base-default); color: var(--google-colors-text-default); } 332 .button--skin-google.button--interactive:hover, .button--skin-google.button--interactive:active { background-color: var(--google-colors-base-action); color: var(--google-colors-text-action); } 333 .button--skin-google.button--active-state { background-color: var(--google-colors-base-active); color: var(--google-colors-text-active); } 334 .button--skin-google.button--active-interactive:hover, .button--skin-google.button--active-interactive:active { background-color: var(--google-colors-base-active-action); color: var(--google-colors-text-action); } 335 .button--skin-google.button--loading .button__loading-icon { color: var(--google-colors-text-default); } 336 .button--skin-google.button--outline.button--default-state { background-color: transparent; border-color: var(--google-colors-base-default); color: var(--google-colors-base-default); } 337 .button--skin-google.button--outline.button--interactive:hover, .button--skin-google.button--outline.button--interactive:active { background-color: transparent; border-color: var(--google-colors-base-action); color: var(--google-colors-base-action); } 338 .button--skin-google.button--outline.button--active-state { background-color: transparent; border-color: var(--google-colors-base-active); color: var(--google-colors-base-active); } 339 .button--skin-google.button--outline.button--active-interactive:hover, .button--skin-google.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--google-colors-base-active-action); color: var(--google-colors-base-active-action); } 340 .button--skin-google.button--outline.button--loading .button__loading-icon { color: var(--google-colors-base-default); } 341 .button--skin-google.button--text.button--default-state { background-color: transparent; color: var(--google-colors-base-default); } 342 .button--skin-google.button--text.button--interactive:hover, .button--skin-google.button--text.button--interactive:active { background-color: transparent; color: var(--google-colors-base-action); } 343 .button--skin-google.button--text.button--active-state { background-color: transparent; color: var(--google-colors-base-active); } 344 .button--skin-google.button--text.button--active-interactive:hover, .button--skin-google.button--text.button--active-interactive:active { background-color: transparent; color: var(--google-colors-base-active-action); } 345 .button--skin-google.button--text.button--loading .button__loading-icon { color: var(--google-colors-base-default); } 346 .button--skin-apple.button--default-state { background-color: var(--apple-colors-base-default); color: var(--apple-colors-text-default); } 347 .button--skin-apple.button--interactive:hover, .button--skin-apple.button--interactive:active { background-color: var(--apple-colors-base-action); color: var(--apple-colors-text-action); } 348 .button--skin-apple.button--active-state { background-color: var(--apple-colors-base-active); color: var(--apple-colors-text-active); } 349 .button--skin-apple.button--active-interactive:hover, .button--skin-apple.button--active-interactive:active { background-color: var(--apple-colors-base-active-action); color: var(--apple-colors-text-action); } 350 .button--skin-apple.button--loading .button__loading-icon { color: var(--apple-colors-text-default); } 351 .button--skin-apple.button--outline.button--default-state { background-color: transparent; border-color: var(--apple-colors-base-default); color: var(--apple-colors-base-default); } 352 .button--skin-apple.button--outline.button--interactive:hover, .button--skin-apple.button--outline.button--interactive:active { background-color: transparent; border-color: var(--apple-colors-base-action); color: var(--apple-colors-base-action); } 353 .button--skin-apple.button--outline.button--active-state { background-color: transparent; border-color: var(--apple-colors-base-active); color: var(--apple-colors-base-active); } 354 .button--skin-apple.button--outline.button--active-interactive:hover, .button--skin-apple.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--apple-colors-base-active-action); color: var(--apple-colors-base-active-action); } 355 .button--skin-apple.button--outline.button--loading .button__loading-icon { color: var(--apple-colors-base-default); } 356 .button--skin-apple.button--text.button--default-state { background-color: transparent; color: var(--apple-colors-base-default); } 357 .button--skin-apple.button--text.button--interactive:hover, .button--skin-apple.button--text.button--interactive:active { background-color: transparent; color: var(--apple-colors-base-action); } 358 .button--skin-apple.button--text.button--active-state { background-color: transparent; color: var(--apple-colors-base-active); } 359 .button--skin-apple.button--text.button--active-interactive:hover, .button--skin-apple.button--text.button--active-interactive:active { background-color: transparent; color: var(--apple-colors-base-active-action); } 360 .button--skin-a
360pple.button--text.button--loading .button__loading-icon { color: var(--apple-colors-base-default); } 361 .button--skin-snapchat.button--default-state { background-color: var(--snapchat-colors-base-default); color: var(--snapchat-colors-text-default); } 362 .button--skin-snapchat.button--interactive:hover, .button--skin-snapchat.button--interactive:active { background-color: var(--snapchat-colors-base-action); color: var(--snapchat-colors-text-action); } 363 .button--skin-snapchat.button--active-state { background-color: var(--snapchat-colors-base-active); color: var(--snapchat-colors-text-active); } 364 .button--skin-snapchat.button--active-interactive:hover, .button--skin-snapchat.button--active-interactive:active { background-color: var(--snapchat-colors-base-active-action); color: var(--snapchat-colors-text-action); } 365 .button--skin-snapchat.button--loading .button__loading-icon { color: var(--snapchat-colors-text-default); } 366 .button--skin-snapchat.button--outline.button--default-state { background-color: transparent; border-color: var(--snapchat-colors-base-default); color: var(--snapchat-colors-base-default); } 367 .button--skin-snapchat.button--outline.button--interactive:hover, .button--skin-snapchat.button--outline.button--interactive:active { background-color: transparent; border-color: var(--snapchat-colors-base-action); color: var(--snapchat-colors-base-action); } 368 .button--skin-snapchat.button--outline.button--active-state { background-color: transparent; border-color: var(--snapchat-colors-base-active); color: var(--snapchat-colors-base-active); } 369 .button--skin-snapchat.button--outline.button--active-interactive:hover, .button--skin-snapchat.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--snapchat-colors-base-active-action); color: var(--snapchat-colors-base-active-action); } 370 .button--skin-snapchat.button--outline.button--loading .button__loading-icon { color: var(--snapchat-colors-base-default); } 371 .button--skin-snapchat.button--text.button--default-state { background-color: transparent; color: var(--snapchat-colors-base-default); } 372 .button--skin-snapchat.button--text.button--interactive:hover, .button--skin-snapchat.button--text.button--interactive:active { background-color: transparent; color: var(--snapchat-colors-base-action); } 373 .button--skin-snapchat.button--text.button--active-state { background-color: transparent; color: var(--snapchat-colors-base-active); } 374 .button--skin-snapchat.button--text.button--active-interactive:hover, .button--skin-snapchat.button--text.button--active-interactive:active { background-color: transparent; color: var(--snapchat-colors-base-active-action); } 375 .button--skin-snapchat.button--text.button--loading .button__loading-icon { color: var(--snapchat-colors-base-default); } 376 .button--skin-kakao.button--default-state { background-color: var(--kakao-colors-base-default); color: var(--kakao-colors-text-default); } 377 .button--skin-kakao.button--interactive:hover, .button--skin-kakao.button--interactive:active { background-color: var(--kakao-colors-base-action); color: var(--kakao-colors-text-action); } 378 .button--skin-kakao.button--active-state { background-color: var(--kakao-colors-base-active); color: var(--kakao-colors-text-active); } 379 .button--skin-kakao.button--active-interactive:hover, .button--skin-kakao.button--active-interactive:active { background-color: var(--kakao-colors-base-active-action); color: var(--kakao-colors-text-action); } 380 .button--skin-kakao.button--loading .button__loading-icon { color: var(--kakao-colors-text-default); } 381 .button--skin-kakao.button--outline.button--default-state { background-color: transparent; border-color: var(--kakao-colors-base-default); color: var(--kakao-colors-base-default); } 382 .button--skin-kakao.button--outline.button--interactive:hover, .button--skin-kakao.button--outline.button--interactive:active { background-color: transparent; border-color: var(--kakao-colors-base-action); color: var(--kakao-colors-base-action); } 383 .button--skin-kakao.button--outline.button--active-state { background-color: transparent; border-color: var(--kakao-colors-base-active); color: var(--kakao-colors-base-active); } 384 .button--skin-kakao.button--outline.button--active-interactive:hover, .button--skin-kakao.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--kakao-colors-base-active-action); color: var(--kakao-colors-base-active-action); } 385 .button--skin-kakao.button--outline.button--loading .button__loading-icon { color: var(--kakao-colors-base-default); } 386 .button--skin-kakao.button--text.button--default-state { background-color: transparent; color: var(--kakao-colors-base-default); } 387 .button--skin-kakao.button--text.button--interactive:hover, .button--skin-kakao.button--text.button--interactive:active { background-color: transparent; color: var(--kakao-colors-base-action); } 388 .button--skin-kakao.button--text.button--active-state { background-color: transparent; color: var(--kakao-colors-base-active); } 389 .button--skin-kakao.button--text.button--active-interactive:hover, .button--skin-kakao.button--text.button--active-interactive:active { background-color: transparent; color: var(--kakao-colors-base-active-action); } 390 .button--skin-kakao.button--text.button--loading .button__loading-icon { color: var(--kakao-colors-base-default); } 391 .button--skin-line.button--default-state { background-color: var(--line-colors-base-default); color: var(--line-colors-text-default); } 392 .button--skin-line.button--interactive:hover, .button--skin-line.button--interactive:active { background-color: var(--line-colors-base-action); color: var(--line-colors-text-action); } 393 .button--skin-line.button--active-state { background-color: var(--line-colors-base-active); color: var(--line-colors-text-active); } 394 .button--skin-line.button--active-interactive:hover, .button--skin-line.button--active-interactive:active { background-color: var(--line-colors-base-active-action); color: var(--line-colors-text-action); } 395 .button--skin-line.button--loading .button__loading-icon { color: var(--line-colors-text-default); } 396 .button--skin-line.button--outline.button--default-state { background-color: transparent; border-color: var(--line-colors-base-default); color: var(--line-colors-base-default); } 397 .button--skin-line.button--outline.button--interactive:hover, .button--skin-line.button--outline.button--interactive:active { background-color: transparent; border-color: var(--line-colors-base-action); color: var(--line-colors-base-action); } 398 .button--skin-line.button--outline.button--active-state { background-color: transparent; border-color: var(--line-colors-base-active); color: var(--line-colors-base-active); } 399 .button--skin-line.button--outline.button--active-interactive:hover, .button--skin-line.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--line-colors-base-active-action); color: var(--line-colors-base-active-action); } 400 .button--skin-line.button--outline.button--loading .button__loading-icon { color: var(--line-colors-base-default); } 401 .button--skin-line.button--text.button--default-state { background-color: transparent; color: var(--line-colors-base-default); } 402 .button--skin-line.button--text.button--interactive:hover, .button--skin-line.button--text.button--interactive:active { background-color: transparent; color: var(--line-colors-base-action); } 403 .button--skin-line.button--text.button--active-state { background-color: transparent; color: var(--line-colors-base-active); } 404 .button--skin-line.button--text.button--active-interactive:hover, .button--skin-line.button--text.button--active-interactive:active { background-color: transparent; color: var(--line-colors-base-active-action); } 405 .button--skin-line.button--text.button--loading .button__loading-icon { color: var(--line-colors-base-default); } 406 .button--disabled { opacity: var(--states-disabled); pointer-events: none; } 407 .button--loading { position: relative; color: transparent; pointer-events: none; } 408 .button--cursor-pointer { cursor: pointer; } 409 .button--cursor-default { cursor: default; }
410 .button--cursor-not-allowed { cursor: not-allowed; } 411 .button__icon { display: inline-block; flex: 0 0 20px; width: 20px; height: 20px; } 412 .button--small .button__icon { flex-basis: 20px; width: 20px; height: 20px; } 413 .button__icon > path:not([fill]) { fill: currentcolor; } 414 .button__content { display: flex; align-items: center; min-width: 0px; max-width: 100%; height: 20px; column-gap: var(--spacings-s4); font-family: var(--fonts-gilroy); } 415 .button--small .button__content { height: 20px; column-gap: var(--spacings-s4); } 416 .button__content--hidden { visibility: hidden; } 417 .button__text { min-width: 0px; padding-block: var(--spacings-s0); padding-inline: var(--spacings-s2); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 418 .button--small .button__text { padding-block: var(--spacings-s0); padding-inline: var(--spacings-s2); } 419 .button__credit { display: flex; flex-shrink: 0; align-items: center; column-gap: var(--spacings-s4); padding-inline-end: var(--spacings-s2); } 420 .button--small .button__credit { column-gap: var(--spacings-s4); } 421 .button__credit-icon { flex: 0 0 20px; width: 20px; height: 20px; } 422 .button--small .button__credit-icon { flex-basis: 20px; width: 20px; height: 20px; } 423 .button__credit-icon > path:not([fill]) { fill: currentcolor; } 424 .button__control { display: none; } 425 .button__loading-icon { position: absolute; inset: 0px; margin: auto; pointer-events: none; } 426 @keyframes button-rotate { 427 100% { transform: rotate(360deg); } 428} 429 .button__loading-icon { animation: button-rotate var(--timings-long) var(--easings-linear) infinite; } 430} 431@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 432@layer ds-atoms { 433 @keyframes toaster-animate-center { 434 0% { opacity: 0; transform: translate(0px) scale(1); } 435 100% { opacity: var(--final-opacity, 1); } 436} 437 @keyframes toaster-animate-left { 438 0% { opacity: 0; transform: translate(-20px) scale(1); } 439 100% { opacity: var(--final-opacity, 1); } 440} 441 @keyframes toaster-animate-right { 442 0% { opacity: 0; transform: translate(20px) scale(1); } 443 100% { opacity: var(--final-opacity, 1); } 444} 445 .toaster { display: flex; flex-direction: column; justify-content: center; gap: var(--spacings-s12); width: 100%; max-width: var(--toaster-width); position: fixed; z-index: var(--toaster-z-index); list-style-type: none; color: var(--text-colors-base); height: max(0px,var(--item-height) + max(0,var(--total) - 1) * 10px); top: var(--toaster-top); bottom: var(--toaster-bottom); left: var(--toaster-left); right: var(--toaster-right); transform: var(--toaster-transform); } 446 .toaster__item { opacity: 0; position: absolute; left: 0px; right: 0px; width: 100%;
446 top: var(--toaster-item-top); bottom: var(--toaster-item-bottom); transform-origin: var(--toaster-item-transform-origin); z-index: var(--index); animation-duration: var(--timings-default); animation-timing-function: var(--easings-ease); animation-fill-mode: forwards; transition: transform var(--timings-default) var(--easings-ease),opacity var(--timings-default) var(--easings-ease); --scale-factor: calc(1 - var(--reverse-index) * var(--scale-step, .03)); --older-offset: calc(var(--reverse-index) * .2px * var(--direction, 1) * -1); --translate-y: calc(var(--index) * 6px * var(--direction, 1) + var(--older-offset)); --translate-x: calc(var(--index) * 6px * var(--direction-x, 0)); --final-opacity: .6; transform: translate(var(--translate-x),var(--translate-y)) scale(var(--scale-factor)); } 447 .toaster__item:last-child { --final-opacity: 1; } 448 .toaster__item--animate-center { animation-name: toaster-animate-center; } 449 .toaster__item--animate-left { animation-name: toaster-animate-left; } 450 .toaster__item--animate-right { animation-name: toaster-animate-right; } 451} 452@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 453@layer ds-atoms { 454 .snackbar { display: inline-flex; align-items: center; width: 100%; border-radius: var(--spacings-s12); min-height: 48px; gap: var(--spacings-s4); padding: var(--spacings-s8); box-shadow: var(--shadows-tint-1); } 455 .snackbar--information { background-color: var(--information-colors-base-default); } 456 .snackbar--error { background-color: var(--error-colors-base-default); } 457 .snackbar--success { background-color: var(--success-colors-base-default); } 458 .snackbar--warning { background-color: var(--warning-colors-base-default); } 459 .snackbar--premium { background-color: var(--monetization-ultra-colors-base-default); } 460 .snackbar__button-no-handler { pointer-events: none; } 461 .snackbar__close-button { margin-inline-start: auto; } 462 .snackbar__text { word-break: break-word; min-width: 0px; } 463 .snackbar--information .snackbar__text { color: var(--information-colors-text-default); } 464 .snackbar--error .snackbar__text { color: var(--error-colors-text-default); } 465 .snackbar--success .snackbar__text { color: var(--success-colors-text-default); } 466 .snackbar--warning .snackbar__text { color: var(--warning-colors-text-default); } 467 .snackbar--premium .snackbar__text { color: var(--monetization-ultra-colors-text-default); } 468} 469@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 470@layer ds-atoms { 471 .text--t1 { font-size: var(--typography-t1-font-size); line-height: var(--typography-t1-line-height); } 472 .text--t2 { font-size: var(--typography-t2-font-size); line-height: var(--typography-t2-line-height); } 473 .text--t3 { font-size: var(--typography-t3-font-size); line-height: var(--typography-t3-line-height); } 474 .text--t4 { font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); } 475 .text--t5 { font-size: var(--typography-t5-font-size); line-height: var(--typography-t5-line-height); } 476 .text--t6 { font-size: var(--typography-t6-font-size); line-height: var(--typography-t6-line-height); } 477 .text--t7 { font-size: var(--typography-t7-font-size); line-height: var(--typography-t7-line-height); } 478 .text--t8 { font-size: var(--typography-t8-font-size); line-height: var(--typography-t8-line-height); } 479 .text--t9 { font-size: var(--typography-t9-font-size); line-height: var(--typography-t9-line-height); } 480 .text--t10 { font-size: var(--typography-t10-font-size); line-height: var(--typography-t10-line-height); } 481 .text--color-primary { color: var(--primary-colors-base-default); } 482 .text--color-neutral { color: var(--neutral-colors-base-default); } 483 .text--color-plus { color: var(--monetization-plus-colors-base-default); } 484 .text--color-pro { color: var(--monetization-pro-colors-base-default); } 485 .text--color-ultra { color: var(--monetization-ultra-colors-base-default); } 486 .text--color-success { color: var(--success-colors-base-default); } 487 .text--color-warning { color: var(--warning-colors-base-default); } 488 .text--color-error { color: var(--error-colors-base-default); } 489 .text--color-information { color: var(--information-colors-base-default); } 490 .text--color-positive { color: var(--positive-colors-base-default); } 491 .text--color-negative { color: var(--negative-colors-base-default); } 492 .text--color-black { color: var(--absolute-black-colors-base-default); } 493 .text--color-white { color: var(--absolute-white-colors-base-default); } 494 .text--color-base { color: var(--text-colors-base); } 495 .text--color-tint-1 { color: var(--text-colors-tint-1); } 496 .text--color-tint-2 { color: var(--text-colors-tint-2); }
497 .text--color-tint-3 { color: var(--text-colors-tint-3); } 498 .text--full-width { display: block; width: 100%; } 499 .text--align-left { text-align: left; } 500 .text--align-center { text-align: center; } 501 .text--align-right { text-align: right; } 502 .text--truncated { display: inline-block; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 503 .text--multi-line-truncated { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--text-max-visible-row-count); overflow: hidden; } 504} 505@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 506@layer ds-subatoms { 507 .base-text--font-gilroy { font-family: var(--fonts-gilroy); } 508 .base-text--font-acorn { font-family: var(--fonts-acorn); } 509 .base-text--weight-medium { font-weight: 500; } 510 .base-text--weight-semibold { font-weight: 600; } 511 .base-text--weight-bold { font-weight: 700; } 512 .base-text--weight-normal { font-weight: 400; } 513} 514@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 515@layer ds-molecules { 516 .notification { width: 100%; padding: var(--spacings-s12) var(--spacings-s12); border-width: 2px; border-style: solid; border-radius: var(--corner-radius-r16); box-shadow: var(--shadows-tint-1); background-color: var(--background-colors-tint-1); border-color: var(--ntf-border-color); } 517 .notification--large { max-width: 434px; } 518 .notification--small { max-width: 382px; } 519 .notification__information { display: flex; flex-wrap: wrap; column-gap: var(--spacings-s8); min-height: var(--typography-t7-line-height); } 520 .notification__information--centered { align-items: center; } 521 .notification__progress { padding: var(--spacings-s8) var(--spacings-s0) var(--spacings-s8) var(--spacings-s32); } 522 .notification__type-icon { display: inline-block; vertical-align: top; width: 24px; height: 24px; order: 0; } 523 .notification__close-icon { order: 2; } 524 .notification__title { display: block; word-break: break-word; margin-bottom: var(--spacings-s4); order: 1; flex: 1 1 0%; } 525 .notification__description { word-break: break-word; } 526 .notification__description--with-title { order: 3; flex: 0 0 100%; padding-left: 32px; margin-bottom: 6px; } 527 .notification__description--without-title { order: 1; flex: 1 1 0%; } 528 .notification__external-actions { display: flex; justify-content: flex-end; margin-top: var(--spacings-s8); gap: var(--spacings-s8); } 529 .notification--skin-success { --ntf-border-color: var(--success-colors-base-default); } 530 .notification--skin-success .ntf-typeIcon > path:not([fill]) { fill: var(--success-colors-base-default); } 531 .notification--skin-warning { --ntf-border-color: var(--warning-colors-base-default); } 532 .notification--skin-warning .ntf-typeIcon > path:not([fill]) { fill: var(--warning-colors-base-default); } 533 .notification--skin-error { --ntf-border-color: var(--error-colors-base-default); } 534 .notification--skin-error .ntf-typeIcon > path:not([fill]) { fill: var(--error-colors-base-default); } 535 .notification--skin-information { --ntf-border-color: var(--information-colors-base-default); } 536 .notification--skin-information .ntf-typeIcon > path:not([fill]) { fill: var(--information-colors-base-default); } 537 .notification--skin-premium { --ntf-border-color: var(--monetization-ultra-colors-base-default); } 538 .notification--skin-premium .ntf-typeIcon > path:not([fill]) { fill: var(--monetization-ultra-colors-base-default); } 539} 540@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 541@layer ds-atoms { 542 .inline-button { display: inline-flex; vertical-align: top; flex-shrink: 0; align-items: center; transition-property: background-color, border-color, color; transition-timing-function: var(--easings-ease); transition-duration: var(--timings-default); } 543 .inline-button--large { height: 40px; padding-block: var(--spacings-s10); padding-inline: var(--spacings-s10); column-gap: var(--spacings-s2); border-radius: var(--corner-radius-r8); font-weight: 600; font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); } 544 .inline-button--small { height: 32px; padding-block: var(--spacings-s6); padding-inline: var(--spacings-s6); column-gap: var(--spacings-s2); border-radius: var(--corner-radius-r8); font-weight: 600; font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); } 545 .inline-button--full-width { width: 100%; } 546 .inline-button--with-border { border-style: solid; border-width: 1px; } 547 .inline-button--with-border.inline-button--small { border-width: 1px; } 548 .inline-button--no-border { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; } 549 .inline-button--transparent-bg { background-color: transparent; } 550 .inline-button--center-content { justify-content: center; } 551 .inline-button--cursor-pointer { cursor: pointer; } 552 .inline-button--cursor-default { cursor: default; }
553 .inline-button--cursor-not-allowed { cursor: not-allowed; } 554 .inline-button--default { background-color: var(--control-colors-button-background-default); border-color: var(--control-colors-border-default); color: var(--control-colors-text-default); } 555 @media (hover: hover) and (pointer: fine) { 556 .inline-button--interactive:hover { background-color: var(--control-colors-button-background-action); border-color: var(--control-colors-border-action); color: var(--control-colors-text-action); } 557} 558 @media (hover: none) and (pointer: coarse) { 559 .inline-button--interactive:active { background-color: var(--control-colors-button-background-action); border-color: var(--control-colors-border-action); color: var(--control-colors-text-action); } 560} 561 .inline-button--active { background-color: var(--control-colors-button-background-active); border-color: var(--control-colors-border-active); color: var(--control-colors-text-active); } 562 @media (hover: hover) and (pointer: fine) { 563 .inline-button--active-interactive:hover { background-color: var(--control-colors-button-background-active-action); border-color: var(--control-colors-border-active-action); color: var(--control-colors-text-active-action); } 564} 565 @media (hover: none) and (pointer: coarse) { 566 .inline-button--active-interactive:active { background-color: var(--control-colors-button-background-active-action); border-color: var(--control-colors-border-active-action); color: var(--control-colors-text-active-action); } 567} 568 .inline-button--without-border-override { border-color: transparent; } 569 @media (hover: hover) and (pointer: fine) { 570 .inline-button--without-border-override:hover { border-color: transparent; } 571} 572 @media (hover: none) and (pointer: coarse) { 573 .inline-button--without-border-override:active { border-color: transparent; } 574} 575 .inline-button--without-bg-override { background-color: transparent; } 576 .inline-button--disabled { opacity: var(--states-disabled); cursor: not-allowed; } 577 .inline-button--loading-skin { position: relative; color: transparent; } 578 .inline-button__icon-holder { display: block; width: 20px; height: 20px; } 579 .inline-button--small .inline-button__icon-holder { width: 20px; height: 20px; } 580 .inline-button__icon { display: inline-block; flex-shrink: 0; flex-basis: 20px; width: 20px; height: 20px; min-width: 0px; min-height: 0px; transition-property: transform; transition-timing-function: var(--easings-ease); transition-duration: var(--timings-default); } 581 .inline-button--small .inline-button__icon { flex-basis: 20px; width: 20px; height: 20px; } 582 .inline-button__icon > path:not([fill]) { fill: currentcolor; } 583 .inline-button__arrow-active { transform: rotate(180deg); } 584 .inline-button__content-wrap { display: grid; flex-grow: 1; height: 20px; padding-block: var(--spacings-s0); padding-inline: var(--spacings-s2); } 585 .inline-button--small .inline-button__content-wrap { height: 20px; padding-block: var(--spacings-s0); padding-inline: var(--spacings-s2); } 586 .inline-button__content-align-start { text-align: start; } 587 .inline-button__content-align-center { text-align: center; } 588 .inline-button__content-align-end { text-align: end; } 589 .inline-button__content { width: 100%; min-width: 0px; min-height: 0px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--fonts-gilroy); } 590 .inline-button__control { display: none; } 591 .inline-button__loading-icon { position: absolute; inset: 0px; margin: auto; pointer-events: none; } 592 @keyframes inline-btn-rotate { 593 100% { transform: rotate(360deg); } 594} 595 .inline-button__loading-icon-skin { color: var(--control-colors-text-default); animation: inline-btn-rotate var(--timings-long) var(--easings-linear) infinite; } 596} 597@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 598@layer ds-atoms { 599 .monetization-badge { display: inline-flex; vertical-align: top; align-items: center; justify-content: center; background: var(--gradients-status-info); color: var(--information-colors-text-default); } 600 .monetization-badge--shadow { box-shadow: var(--shadows-tint-2); } 601 .monetization-badge--rectangle.monetization-badge--large { width: 44px; height: 20px; border-radius: var(--corner-radius-r16); } 602 .monetization-badge--rectangle.monetization-badge--small { width: 32px; height: 14px; border-radius: var(--corner-radius-r12); } 603 .monetization-badge--skin-plus { background: var(--gradients-monetization-plus); color: var(--monetization-plus-colors-text-default); } 604 .monetization-badge--skin-pro { background: var(--gradients-monetization-pro); color: var(--monetization-pro-colors-text-default); } 605 .monetization-badge--skin-ultra { background: var(--gradients-monetization-ultra); color: var(--negative-colors-text-default); } 606 .monetization-badge__icon { display: block; } 607 .monetization-badge__icon > path:not([fill]) { fill: currentcolor; } 608 .monetization-badge__icon--rectangle-large { width: 32px; height: 16px; } 609 .monetization-badge__icon--rectangle-small { width: 28px; height: 14px; } 610} 611@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 612@layer ds-atoms { 613 .tool-badge { display: inline-flex; vertical-align: top; align-items: center; justify-content: center; background-color: var(--information-colors-base-default); color: var(--information-colors-text-default); } 614 .tool-badge--shadow { box-shadow: var(--shadows-tint-2); } 615 .tool-badge--circle { border-radius: var(--corner-radius-circle); }
616 .tool-badge--circle.tool-badge--large { width: 20px; height: 20px; } 617 .tool-badge--circle.tool-badge--small { width: 14px; height: 14px; } 618 .tool-badge--rectangle.tool-badge--large { width: 44px; height: 20px; border-radius: var(--corner-radius-r16); } 619 .tool-badge--rectangle.tool-badge--small { width: 32px; height: 14px; border-radius: var(--corner-radius-r12); } 620 .tool-badge--skin-new { background: var(--gradients-status-success); color: var(--information-colors-text-default); } 621 .tool-badge--skin-live { background: var(--gradients-status-success); color: var(--success-colors-text-default); } 622 .tool-badge--skin-hot-text { background: var(--gradients-status-warning); color: var(--warning-colors-text-default); } 623 .tool-badge__icon { display: block; } 624 .tool-badge__icon > path:not([fill]) { fill: currentcolor; } 625 .tool-badge__icon--circle-large { width: 12px; height: 12px; } 626 .tool-badge__icon--circle-small { width: 10px; height: 10px; } 627 .tool-badge__icon--rectangle-large { width: 32px; height: 16px; } 628 .tool-badge__icon--rectangle-small { width: 28px; height: 14px; } 629} 630@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 631@layer ds-atoms { 632 .user-badge { display: inline-flex; vertical-align: top; align-items: center; justify-content: center; background-color: var(--information-colors-base-default); color: var(--information-colors-text-default); } 633 .user-badge--shadow { box-shadow: var(--shadows-tint-2); } 634 .user-badge--circle { border-radius: var(--corner-radius-circle); } 635 .user-badge--circle.user-badge--large { width: 20px; height: 20px; } 636 .user-badge--circle.user-badge--small { width: 14px; height: 14px; } 637 .user-badge--skin-crown { background-color: var(--warning-colors-base-default); color: var(--warning-colors-text-default); } 638 .user-badge__icon { display: block; } 639 .user-badge__icon > path:not([fill]) { fill: currentcolor; } 640 .user-badge__icon--circle-large { width: 12px; height: 12px; } 641 .user-badge__icon--circle-small { width: 10px; height: 10px; } 642} 643@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 644@layer ds-atoms { 645 @keyframes progress-loading-bar { 646 0% { transform: translate(-100%); } 647 100% { transform: translate(400%); } 648} 649 .progress { display: inline-block; vertical-align: top; } 650 .progress__circle-bg { stroke: var(--background-colors-tint-3); } 651 .progress__circle-load { stroke: var(--progress-status); transition: all var(--timings-fast) var(--easings-linear); } 652 .progress--circular { width: 60px; height: 60px; } 653 .progress--rectangular { background-color: var(--background-colors-tint-2); height: 4px; overflow: hidden; } 654 .progress--full-width { width: 100%; } 655 .progress--with-border-radius { border-radius: var(--corner-radius-r4); } 656 .progress--status-default { --progress-status: var(--primary-colors-base-default); } 657 .progress--status-error { --progress-status: var(--error-colors-base-default); } 658 .progress--status-success { --progress-status: var(--success-colors-base-default); } 659 .progress--status-warning { --progress-status: var(--warning-colors-base-default); } 660 .progress--status-information { --progress-status: var(--information-colors-base-default); } 661 .progress--linear::after { content: ""; display: block; width: 100%; height: 100%; background-color: var(--progress-status); will-change: transform; transition: all var(--timings-fast) var(--easings-linear); border-radius: inherit; } 662 [dir="ltr"] .progress--linear::after { transform: translate(calc(-1 * (100 - var(--progress-percent)) * 1%)); } 663 [dir="rtl"] .progress--linear::after { transform: translate(calc((100 - var(--progress-percent)) * 1%)); } 664 .progress--continues::before { content: ""; display: block; width: 30%; height: 100%; background-color: var(--progress-status); border-radius: inherit; transform: translate(-100%); animation: progress-loading-bar var(--timings-heavy) cubic-bezier(.65,.815,.735,.395) infinite; } 665} 666@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 667@layer ds-molecules { 668 .dialog { position: relative; max-width: 504px; } 669 .dialog--confirmation { max-width: 404px; } 670 .dialog__content-header { display: flex; justify-content: center; flex-direction: column; align-items: flex-start; gap: var(--spacings-s16); } 671 .dialog__content-header--centered { align-items: center; } 672 .dialog__type-icon { --icon-dimension: 56px; width: var(--icon-dimension); height: var(--icon-dimension); border-radius: var(--corner-radius-circle); display: flex; justify-content: center; align-items: center; background-color: var(--primary-colors-alpha-20); } 673 .dialog__icon > path { fill: var(--primary-colors-base-default); } 674 .dialog__message { display: flex; justify-content: center; flex-direction: column; align-items: flex-start; text-align: left; gap: var(--spacings-s8); } 675 .dialog__message--centered { align-items: center; text-align: center; } 676 .dialog__actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--spacings-s10); margin-top: var(--spacings-s24); } 677 @media screen and (max-width: 479px) { 678 .dialog__actions { flex-flow: column-reverse wrap; } 679} 680 .dialog__actions--centered { justify-content: center; } 681 .dialog__actions--mobile { flex-direction: column-reverse; } 682 .dialog__action-item { min-width: 75px; } 683 @media screen and (max-width: 479px) { 684 .dialog__action-item { min-width: 100%; } 685} 686 .dialog__action-item--with-icon { min-width: 140px; } 687 .dialog__action-item--mobile { min-width: 100%; } 688 .dialog__content { margin-top: var(--spacings-s12); } 689} 690@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 691@layer ds-molecules { 692 .popup { padding: var(--spacings-s24); position: relative; } 693 @media screen and (max-width: 479px) { 694 .popup { padding: var(--spacings-s16); } 695} 696 @media screen and (min-width: 480px) and (max-width: 767px) { 697 .popup { padding: var(--spacings-s16); } 698} 699 .popup__holder { padding: var(--spacings-s24); position: relative; background-color: var(--background-colors-base); box-shadow: var(--shadows-tint-1); border-radius: var(--corner-radius-r16); border: 1px solid var(--background-colors-tint-3); } 700 .popup__content--with-background-effect { background: var(--effects-vignette); } 701 .popup__close-button { --dir-position: calc(-1 * var(--spacings-s16)); position: absolute; inset-block-start: var(--dir-position); inset-inline: auto var(--dir-position); } 702 .popup__overlay-visible { opacity: 1; transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1); } 703 .popup__overlay-hidden { opacity: 0; transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1); } 704 .popup__holder--with-glassy-effect { background-color: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; } 705 .popup__glass { position: relative; overflow: hidden; background-color: var(--effects-glassy-tint); border: 1px solid var(--effects-glassy-highlight-border); box-shadow: var(--effects-glassy-shadow),var(--effects-glassy-inner-shadow); backdrop-filter: var(--effects-glassy-backdrop); border-block-start: 0px; border-inline-start: 0px; } 706 .popup__glass::before, .popup__glass::after { content: ""; position: absolute; pointer-events: none; } 707 .popup__glass::before { inset-block-start: 0px; inset-inline: 10%; height: var(--effects-glassy-border-width); background: var(--effects-glassy-edge-top); } 708 .popup__glass::after { inset-block: 0px; inset-inline-start: 0px; width: var(--effects-glassy-border-width); background: var(--effects-glassy-edge-side); } 709 .popup__glass { position: absolute; inset: 0px; z-index: -1; border-radius: inherit; pointer-events: none; } 710} 711@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 712@layer ds-atoms { 713 html.scroll-frozen { height: 100%; overflow: hidden; } 714 .overlay { position: relative; inset: 0px; width: 100%; height: 100%; overflow: auto; z-index: var(--overlay-z-index); background-color: var(--background-colors-transparent); } 715 @media (pointer: fine) { 716 .overlay::-webkit-scrollbar { width: 4px; } 717 .overlay::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; } 718 .overlay::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r4); background-color: var(--background-colors-border); } 719 .overlay::-webkit-scrollbar-corner { background: transparent; } 720} 721 @supports (-moz-appearance: none) { 722 .overlay { scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 723} 724 @media (pointer: coarse) { 725 .overlay::-webkit-scrollbar { display: none; } 726} 727 .overlay--hide-scrollbars { scrollbar-width: none; } 728 .overlay--hide-scrollbars::-webkit-scrollbar { display: none; } 729 .overlay--global { position: fixed; } 730 .overlay--local { position: absolute; } 731 .overlay--blurred { backdrop-filter: var(--effects-blurred); } 732 .overlay__table { display: table; table-layout: fixed; width: 100%; min-height: 100%; } 733 .overlay__row { display: table-row; } 734 .overlay__cell { display: table-cell; } 735 .overlay__cell--v-top { vertical-align: top; } 736 .overlay__cell--v-middle { vertical-align: middle; } 737 .overlay__cell--v-bottom { vertical-align: bottom; } 738 .overlay__cell--h-left { text-align: left; } 739 .overlay__cell--h-center { text-align: center; } 740 .overlay__cell--h-right { text-align: right; } 741 .overlay__content { display: inline-block; max-width: 100%; text-align: initial; } 742 .overlay__content--v-top { vertical-align: top; } 743 .overlay__content--v-middle { vertical-align: middle; } 744 .overlay__content--v-bottom { vertical-align: bottom; } 745 .overlay__content--full-width { width: 100%; } 746 .overlay__content--fit-width { width: fit-content; margin: auto; } 747} 748@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 749@layer ds-atoms { 750 @keyframes skeleton-ltr { 751 0% { transform: translate(-200%, -50%); } 752 100% { transform: translate(100%, -50%); } 753} 754 @keyframes skeleton-rtl { 755 0% { transform: translate(100%, -50%); } 756 100% { transform: translate(-200%, -50%); } 757} 758 .skeleton { display: block; position: relative; overflow: hidden; clip-path: view-box; background-color: var(--background-colors-tint-2); width: var(--skeleton-width); height: var(--skeleton-height); border-radius: var(--skeleton-border-radius, 0); } 759 .skeleton::before { content: ""; display: block; width: 50%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-image: linear-gradient(90deg,transparent,var(--background-colors-tint-3),transparent); will-change: transform; } 760 [dir="ltr"] .skeleton::before { animation: skeleton-ltr var(--timings-long) var(--easings-linear) infinite; } 761 [dir="rtl"] .skeleton::before { animation: skeleton-rtl var(--timings-long) var(--easings-linear) infinite; } 762} 763@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 764@layer ds-templates { 765 .footer-basic-link__navigation-link { display: inline-flex; padding: var(--spacings-s12) 0; } 766 @media (hover: hover) and (pointer: fine) { 767 .footer-basic-link__navigation-link:hover { color: var(--primary-colors-base-default); } 768 .footer-basic-link__navigation-link:active { color: var(--primary-colors-base-action); } 769} 770 @media (hover: none) and (pointer: coarse) { 771 .footer-basic-link__navigation-link:active { color: var(--primary-colors-base-action); } 772} 773} 774@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 775@layer ds-atoms { 776 .link { max-width: 100%; } 777 .link--t1 { font-size: var(--typography-t1-font-size);
777 line-height: var(--typography-t1-line-height); } 778 .link--t2 { font-size: var(--typography-t2-font-size); line-height: var(--typography-t2-line-height); } 779 .link--t3 { font-size: var(--typography-t3-font-size); line-height: var(--typography-t3-line-height); } 780 .link--t4 { font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); } 781 .link--t5 { font-size: var(--typography-t5-font-size); line-height: var(--typography-t5-line-height); } 782 .link--t6 { font-size: var(--typography-t6-font-size); line-height: var(--typography-t6-line-height); } 783 .link--t7 { font-size: var(--typography-t7-font-size); line-height: var(--typography-t7-line-height); } 784 .link--t8 { font-size: var(--typography-t8-font-size); line-height: var(--typography-t8-line-height); } 785 .link--t9 { font-size: var(--typography-t9-font-size); line-height: var(--typography-t9-line-height); } 786 .link--t10 { font-size: var(--typography-t10-font-size); line-height: var(--typography-t10-line-height); } 787 .link--color-primary { color: var(--primary-colors-base-default); } 788 .link--color-neutral { color: var(--neutral-colors-base-default); } 789 .link--color-plus { color: var(--monetization-plus-colors-base-default); } 790 .link--color-pro { color: var(--monetization-pro-colors-base-default); } 791 .link--color-ultra { color: var(--monetization-ultra-colors-base-default); } 792 .link--color-success { color: var(--success-colors-base-default); } 793 .link--color-warning { color: var(--warning-colors-base-default); } 794 .link--color-error { color: var(--error-colors-base-default); } 795 .link--color-information { color: var(--information-colors-base-default); } 796 .link--color-positive { color: var(--positive-colors-base-default); } 797 .link--color-negative { color: var(--negative-colors-base-default); } 798 .link--color-black { color: var(--absolute-black-colors-base-default); } 799 .link--color-white { color: var(--absolute-white-colors-base-default); } 800 .link--color-tint-1 { color: var(--text-colors-tint-1); } 801 .link--underline { text-decoration: underline; } 802 .link--prevent-next-line { display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: bottom; } 803 .link--multi-line-clamp { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: var(--link-max-row-count); } 804} 805@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 806@layer ds-subatoms { 807 .base-link--font-gilroy { font-family: var(--fonts-gilroy); } 808 .base-link--font-acorn { font-family: var(--fonts-acorn); } 809 .base-link--weight-normal { font-weight: 400; } 810 .base-link--weight-medium { font-weight: 500; } 811 .base-link--weight-semibold { font-weight: 600; } 812 .base-link--weight-bold { font-weight: 700; } 813} 814@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 815@layer ds-templates { 816 html { background-color: var(--background-colors-base); } 817 .standard-host { --header-height: 80px; position: relative; display: grid; background-color: var(--positive-colors-base-default); overscroll-behavior: contain; height: 100%; min-height: 100dvh; grid-template-rows: auto 1fr auto; } 818 .standard-host--mobile { padding-bottom: var(--standard-aside-mobile-height); } 819 .standard-host__wrapper { display: flex; flex-direction: column; } 820 .standard-host__shape { grid-area: 1 / 1; } 821 .standard-host__shape path { transition: fill var(--timings-default) var(--easings-ease); } 822 .standard-host__floating-action-container { width: 48px; height: 48px; margin-inline-start: auto; position: fixed; bottom: var(--spacings-s16); right: var(--spacings-s16); z-index: 99; } 823} 824@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 825@layer ds-templates { 826 html { --fixed-header-inset-start: 0; } 827 .standard-host-header { display: grid; align-items: center; height: var(--header-height); border-bottom: 1px solid var(--background-colors-tint-3); padding: var(--spacings-s0) var(--spacings-s16); } 828 .standard-host-header--fixed { --fixed-header-index: 2; position: sticky; top: 0px; left: 0px; right: 0px; background-color: inherit; z-index: var(--fixed-header-index); } 829 .standard-host-header__common { display: grid; grid-auto-flow: column; column-gap: var(--header-items-gap); align-items: center; min-width: 0px; min-height: 0px; } 830 .standard-host-header__left { grid-column: 1 / 2; justify-self: start; gap: var(--spacings-s8); } 831 .standard-host-header__center { justify-self: center; gap: var(--spacings-s8); } 832 .standard-host-header__center--with-siblings { grid-column: 2 / 3; } 833 .standard-host-header__right { grid-column: 3 / 4; justify-self: end; gap: var(--spacings-s8); } 834} 835@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 836@layer ds-templates { 837 .standard-host-footer { --footer-space: 240px; display: flex; flex-flow: column; background-color: var(--positive-colors-base-default); transition: transform var(--timings-default) var(--easings-ease); border-top: 1px solid var(--background-colors-tint-3); }
838 .standard-host-footer--fixed { position: fixed; bottom: env(safe-area-inset-bottom,0px); left: 0px; right: 0px; z-index: 999; max-height: calc(100% - var(--footer-space)); border-top: 1px solid var(--background-colors-tint-3); transform: translateY(100%); } 839 .standard-host-footer--open { transform: translateY(0px); } 840 .standard-host-footer__footer-content { overscroll-behavior: contain; overflow: auto; width: 100%; height: 100%; } 841 .standard-host-footer__arrow-icon { grid-area: 1 / 1; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%) scaleY(-1); transition: transform var(--timings-default) var(--easings-ease); } 842 .standard-host-footer__arrow-icon--open { transform: translate(-50%, -50%) scaleY(1); } 843 .standard-host-footer__arrow-icon path { fill: var(--text-colors-tint-1); transition: fill var(--timings-default) var(--easings-ease); } 844 .standard-host-footer__toggle-button { --toggle-height: 24px; position: absolute; height: var(--toggle-height); left: 50%; transform: translate(-50%); inset-block-start: calc(var(--toggle-height) * -1); display: grid; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: transparent; cursor: pointer; z-index: 1; } 845} 846@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 847@layer ds-templates { 848 .standard-footer-basic { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; gap: var(--spacings-s24); padding: var(--spacings-s24); background-color: var(--positive-colors-base-default); } 849 .standard-footer-basic__select-wrapper { width: 196px; } 850 .standard-footer-basic__top-content { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: var(--spacings-s24); row-gap: var(--spacings-s2); list-style: none; } 851 .standard-footer-basic__navigation-link { display: inline-flex; padding: var(--spacings-s12) 0; } 852} 853@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 854@layer ds-templates { 855 .standard-footer { display: grid; width: 100%; padding-block: var(--spacings-s12); background-color: var(--background-colors-base); } 856 .standard-footer--desktop { padding-block: var(--spacings-s48) var(--spacings-s0); } 857 .standard-footer__content { display: grid; gap: var(--spacings-s16); text-align: center; } 858 .standard-footer__content--desktop { padding-top: var(--spacings-s32); text-align: left; } 859 .standard-footer__bottom-content { display: flex; justify-content: space-between; align-items: center; gap: var(--spacings-s16); border-top: 1px solid var(--control-colors-border-default); } 860 .standard-footer__bottom-content--mobile { flex-direction: column; gap: var(--spacings-s8); } 861 .standard-footer__theme-toggle-segments { flex-shrink: 0; } 862} 863@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 864@layer ds-atoms { 865 .horizontal-container { width: 100%; margin: 0px auto; } 866 @media screen and (min-width: 1600px) { 867 .horizontal-container { max-width: 1600px; padding: 0 var(--spacings-s24); } 868} 869 @media screen and (min-width: 1366px) and (max-width: 1599px) { 870 .horizontal-container { max-width: 1366px; padding: 0 var(--spacings-s24); } 871} 872 @media screen and (min-width: 1280px) and (max-width: 1365px) { 873 .horizontal-container { max-width: 1280px; padding: 0 var(--spacings-s24); } 874} 875 @media screen and (min-width: 1024px) and (max-width: 1279px) { 876 .horizontal-container { max-width: 1024px; padding: 0 var(--spacings-s24); } 877} 878 @media screen and (min-width: 768px) and (max-width: 1023px) { 879 .horizontal-container { max-width: 768px; padding: 0 var(--spacings-s12); } 880} 881 @media screen and (min-width: 480px) and (max-width: 767px) { 882 .horizontal-container { max-width: 480px; padding: 0 var(--spacings-s12); } 883} 884 @media screen and (max-width: 479px) { 885 .horizontal-container { max-width: 100%; padding: 0 var(--spacings-s12); } 886} 887} 888@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 889@layer ds-molecules { 890 .segments { display: grid; grid-template-rows: 1fr; grid-template-columns: var(--seg-cols, repeat(1, 1fr)); list-style-type: none; border-radius: var(--corner-radius-r12); background-color: var(--background-colors-base); } 891 .segments--large { column-gap: var(--spacings-s4); padding: var(--spacings-s4); } 892 .segments--large.segments--bordered { padding: calc(var(--spacings-s4) - 1px); } 893 .segments--small { column-gap: var(--spacings-s4); padding: var(--spacings-s2); } 894 .segments--small.segments--bordered { padding: calc(var(--spacings-s4) - 1px); } 895 .segments--bordered { border: 1px solid var(--background-colors-border); } 896 .segments__item { min-width: 0px; } 897} 898@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 899@layer ds-templates { 900 .navigation-links { display: flex; justify-content: space-between; gap: var(--spacings-s40); } 901 @media screen and (min-width: 768px) and (max-width: 1023px) { 902 .navigation-links { flex-direction: column; gap: var(--spacings-s64); } 903} 904 @media screen and (min-width: 480px) and (max-width: 767px) { 905 .navigation-links { flex-direction: column; gap: var(--spacings-s64); } 906}
907 .navigation-links--mobile { flex-direction: column; } 908} 909@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 910@layer ds-templates { 911 .common-links { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--spacings-s8); } 912 .common-links--desktop { min-height: 64px; flex-direction: row; padding-block: var(--spacings-s8); } 913 .common-links--mobile { flex-direction: column; } 914 .common-links__links { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--spacings-s16); align-items: center; } 915 .common-links__links--mobile { padding-block: var(--spacings-s24); gap: var(--spacings-s8); justify-content: center; } 916 .common-links__link { white-space: nowrap; } 917 .common-links__link--mobile { padding-block: var(--spacings-s8); } 918 .common-links__link--mobile:not(:nth-last-child(-n+2))::after { content: ""; display: inline-block; vertical-align: middle; margin-inline-start: var(--spacings-s16); width: 1px; height: 16px; background-color: var(--control-colors-border-default); } 919 .common-links__copyright--desktop::before { content: ""; display: inline-block; vertical-align: middle; margin-inline-end: var(--spacings-s16); width: 1px; height: 16px; background-color: var(--control-colors-border-default); } 920 .common-links__copyright--mobile { margin-top: var(--spacings-s8); flex-basis: 100%; } 921} 922@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 923@layer ds-templates { 924 .external-links { display: grid; gap: var(--spacings-s32); } 925 @media screen and (min-width: 768px) and (max-width: 1023px) { 926 .external-links { justify-content: start; gap: var(--spacings-s24); } 927} 928 @media screen and (min-width: 480px) and (max-width: 767px) { 929 .external-links { justify-content: start; gap: var(--spacings-s24); } 930} 931 .external-links__logo-link { width: 100%; } 932 .external-links__logo-link--desktop { max-width: 140px; height: 32px; } 933 .external-links__logo-link--mobile { margin: auto; max-width: 105px; height: 24px; } 934 .external-links__logo-link > svg { width: 100%; height: 100%; } 935 .external-links__get-the-app-wrapper { display: grid; gap: var(--spacings-s16); } 936 @media screen and (min-width: 768px) and (max-width: 1023px) { 937 .external-links__get-the-app-wrapper { grid-area: 2 / 1 / 3; } 938} 939 @media screen and (min-width: 480px) and (max-width: 767px) { 940 .external-links__get-the-app-wrapper { grid-area: 2 / 1 / 3; } 941} 942 .external-links__get-the-apps { display: flex; gap: var(--spacings-s12); height: 40px; } 943 .external-links__get-the-app-item { max-width: 117px; width: 100%; height: 100%; } 944 .external-links__get-the-app-item > svg { width: 100%; height: 100%; } 945 .external-links__social-links-wrapper { display: flex; flex-direction: column; gap: var(--spacings-s12); } 946 @media screen and (min-width: 768px) and (max-width: 1023px) { 947 .external-links__social-links-wrapper { grid-area: 2 / 3 / 3; gap: var(--spacings-s0); justify-content: space-between; } 948} 949 @media screen and (min-width: 480px) and (max-width: 767px) { 950 .external-links__social-links-wrapper { grid-area: 2 / 3 / 3; gap: var(--spacings-s0); justify-content: space-between; } 951} 952 .external-links__social-links--desktop { display: flex; gap: var(--spacings-s12); justify-content: flex-start; } 953 .external-links__social-links--mobile { display: flex; gap: var(--spacings-s12); justify-content: center; } 954 .external-links__soc-link { display: inline-flex; width: 40px; justify-content: flex-start; } 955 @media screen and (min-width: 768px) and (max-width: 1023px) { 956 .external-links__soc-link { grid-area: 2 / 2 / 3; align-self: end; } 957} 958 @media screen and (min-width: 480px) and (max-width: 767px) { 959 .external-links__soc-link { grid-area: 2 / 2 / 3; align-self: end; } 960} 961 .external-links__soc-link--mobile { margin: auto; } 962} 963@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 964@layer ds-templates { 965 .internal-links { display: grid; } 966 .internal-links--desktop { grid-auto-flow: column; gap: var(--spacings-s40); } 967 .internal-links--mobile { grid-auto-flow: row; } 968 .internal-links__list-item { text-align: left; } 969 .internal-links__list-item--mobile { height: 48px; } 970} 971@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 972@layer ds-molecules { 973 .accordion { max-width: 100%; width: 100%; min-width: 0px; overflow: hidden; transition: border-color var(--timings-default) var(--easings-ease),opacity var(--timings-default) var(--easings-ease); --border-color: var(--control-colors-border-default); --border-color-hover: var(--control-colors-border-action); --border-color-active: var(--control-colors-border-active); --border-color-active-hover: var(--control-colors-border-active-action);
973 --toggle-bg-color: var(--control-colors-button-background-default); --toggle-bg-color-hover: var(--control-colors-button-background-action); --toggle-bg-color-active: var(--control-colors-button-background-active); --toggle-bg-color-active-hover: var(--control-colors-button-background-active-action); --accordion-content-bg: var(--background-colors-base); --toggle-text-color: var(--control-colors-text-default); --toggle-start-icon-color: var(--control-colors-start-icon-default); --toggle-end-icon-color: var(--control-colors-end-icon-default); } 974 .accordion--large { --acc-border-w: 1px; --acc-border-r: var(--corner-radius-r8); --acc-toggle-h: 40px; --acc-pad-v: var(--spacings-s10); --acc-pad-h: var(--spacings-s10); --acc-gap: var(--spacings-s2); --acc-icon-size: 20px; --acc-title-pad-h: var(--spacings-s2); --acc-title-pad-v: var(--spacings-s0); --acc-badge-pad: var(--spacings-s2); --acc-content-pad: var(--spacings-s12); } 975 .accordion--small { --acc-border-w: 1px; --acc-border-r: var(--corner-radius-r8); --acc-toggle-h: 32px; --acc-pad-v: var(--spacings-s6); --acc-pad-h: var(--spacings-s6); --acc-gap: var(--spacings-s2); --acc-icon-size: 20px; --acc-title-pad-h: var(--spacings-s2); --acc-title-pad-v: var(--spacings-s0); --acc-badge-pad: var(--spacings-s2); --acc-content-pad: var(--acc-pad-h); } 976 @media (hover: hover) and (pointer: fine) { 977 .accordion:hover { --toggle-text-color: var(--control-colors-text-action); --toggle-start-icon-color: var(--control-colors-start-icon-action); --toggle-end-icon-color: var(--control-colors-end-icon-action); --border-color: var(--border-color-hover); --toggle-bg-color: var(--toggle-bg-color-hover); } 978} 979 .accordion[data-is-disabled] { pointer-events: none; } 980 .accordion--with-border { border: var(--acc-border-w) solid var(--border-color); border-radius: var(--acc-border-r); } 981 .accordion--without-border { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 0px; --border-color: none; --toggle-bg-color: transparent; --border-color-hover: none; --toggle-bg-color-hover: transparent; --border-color-active: none; --toggle-bg-color-active: transparent; --border-color-active-hover: transparent; --toggle-bg-color-active-hover: transparent; --accordion-content-bg: transparent; } 982 .accordion--disabled { opacity: var(--states-disabled); } 983 .accordion--toggle-br-expanded { --toggle-br: calc(var(--acc-border-r) - var(--acc-border-w)) calc(var(--acc-border-r) - var(--acc-border-w)) 0 0; } 984 .accordion--toggle-br-collapsed { --toggle-br: calc(var(--acc-border-r) - var(--acc-border-w)); } 985 .accordion--active { --toggle-bg-color: var(--toggle-bg-color-active); --toggle-text-color: var(--control-colors-text-active); --toggle-start-icon-color: var(--control-colors-start-icon-active); --toggle-end-icon-color: var(--control-colors-end-icon-active); --border-color: var(--border-color-active); } 986 @media (hover: hover) and (pointer: fine) { 987 .accordion--active:hover { --toggle-text-color: var(--control-colors-text-active-action); --toggle-start-icon-color: var(--control-colors-start-icon-active-action); --toggle-end-icon-color: var(--control-colors-end-icon-active-action); --border-color: var(--border-color-active-hover); --toggle-bg-color: var(--toggle-bg-color-active-hover); } 988} 989 .accordion__toggle { width: 100%; background-color: var(--toggle-bg-color); color: var(--text-colors-base); cursor: pointer; display: flex; align-items: center; outline: none; transition: background-color var(--timings-default) var(--easings-ease); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; min-height: var(--acc-toggle-h); padding: calc(var(--acc-pad-v) - var(--acc-border-w)) calc(var(--acc-pad-h) - var(--acc-border-w)); gap: var(--acc-gap); border-radius: var(--toggle-br); } 990 .accordion__toggle--no-gap { gap: 0px; } 991 .accordion__toggle[disabled] { pointer-events: none; } 992 .accordion__content-holder { display: flex; align-items: center; flex: 1 1 auto; gap: var(--acc-gap); min-width: 0px; height: var(--acc-icon-size, 100%); } 993 .accordion__title-container { padding: var(--acc-title-pad-v) var(--acc-title-pad-h); min-width: 0px; height: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 994 .accordion__start-icon { flex-shrink: 0; width: var(--acc-icon-size); height: var(--acc-icon-size); color: var(--toggle-start-icon-color, var(--control-colors-start-icon-default)); transition: color var(--timings-default) var(--easings-ease); } 995 .accordion__start-icon path:not([fill]) { fill: currentcolor; } 996 .accordion__badge { margin: var(--acc-badge-pad); flex-shrink: 0; } 997 .accordion__checkbox-button { margin: 0px; margin-inline-start: auto; flex-shrink: 0; height: var(--acc-icon-size); } 998 .accordion__badge-wrapper { display: flex; align-items: center; height: calc(var(--acc-toggle-h) - var(--acc-pad-v) * 2); } 999 .accordion__toggle-icon { display: inline-block; width: var(--acc-icon-size); height: var(--acc-icon-size); flex-shrink: 0; margin-inline-start: auto; color: var(--toggle-end-icon-color, var(--control-colors-end-icon-default)); transition: color var(--timings-default) var(--easings-ease),transform var(--timings-default) var(--easings-ease); } 1000 .accordion__toggle-icon path { fill: currentcolor; } 1001 .accordion__toggle-icon--with-switch { margin-inline-start: 4px; } 1002 .accordion__toggle-icon--expanded { transform: rotate(180deg); } 1003 .accordion__title { text-align: left; word-break: break-word; color: var(--toggle-text-color); transition: color var(--timings-default) var(--easings-ease); } 1004 .accordion__content { display: grid; border-radius: 0 0 calc(var(--acc-border-r) - var(--acc-border-w)) calc(var(--acc-border-r) - var(--acc-border-w)); overflow: hidden; background-color: var(--accordion-content-bg); } 1005 .accordion__active-indicator { display: grid; grid-area: 1 / 1; } 1006 .accordion__active-indicator::before { content: ""; height: var(--acc-border-w); background: var(--border-color); } 1007 .accordion__content-wrap { padding: var(--acc-content-pad); grid-area: 1 / 1; min-width: 0px; } 1008 .accordion--without-border .accordion__content-wrap { padding: 2px 0 var(--acc-content-pad) 0; } 1009} 1010@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1011@layer ds-atoms { 1012 .switch { display: inline-block; vertical-align: top; align-items: center; position: relative; width: 34px; height: 32px; overflow: hidden; } 1013 .switch::before { content: ""; display: inline-block; width: 100%; height: 20px; border-radius: var(--corner-radius-r24); transition: background-color var(--timings-default) var(--easings-ease); position: absolute; top: 50%; left: var(--spacings-s0); right: var(--spacings-s0); transform: translateY(-50%); pointer-events: none; } 1014 .switch::after { content: ""; display: inline-block; width: 16px; height: 16px; border-radius: var(--corner-radius-circle); background-color: var(--positive-colors-base-default); box-shadow: var(--shadows-tint-1); position: absolute; top: 50%; transform: translateY(-50%); transition: transform var(--timings-default) var(--easings-ease); pointer-events: none; } 1015 .switch__control { display: inline-block; vertical-align: top; width: 100%; height: 100%; position: absolute; inset: var(--spacings-s0); cursor: pointer; }
1016 .switch__control--disabled { cursor: not-allowed; } 1017 .switch--unchecked::before { background-color: var(--background-colors-tint-3); } 1018 .switch--skin-primary.switch--checked::before { background-color: var(--primary-colors-base-default); } 1019 .switch--skin-premium.switch--checked::before { background-color: var(--monetization-ultra-colors-base-default); } 1020 @media (hover: hover) and (pointer: fine) { 1021 .switch--unchecked-interaction:hover::before { background-color: var(--control-colors-text-action); } 1022} 1023 @media (hover: none) and (pointer: coarse) { 1024 .switch--unchecked-interaction:active::before { background-color: var(--control-colors-text-action); } 1025} 1026 @media (hover: hover) and (pointer: fine) { 1027 .switch--skin-primary.switch--checked-interaction:hover::before { background-color: var(--primary-colors-base-action); } 1028} 1029 @media (hover: none) and (pointer: coarse) { 1030 .switch--skin-primary.switch--checked-interaction:active::before { background-color: var(--primary-colors-base-action); } 1031} 1032 @media (hover: hover) and (pointer: fine) { 1033 .switch--skin-premium.switch--checked-interaction:hover::before { background-color: var(--monetization-ultra-colors-base-action); } 1034} 1035 @media (hover: none) and (pointer: coarse) { 1036 .switch--skin-premium.switch--checked-interaction:active::before { background-color: var(--monetization-ultra-colors-base-action); } 1037} 1038 .switch--disabled { opacity: var(--states-disabled); } 1039 [dir="ltr"] .switch::after { left: var(--spacings-s2); } 1040 [dir="rtl"] .switch::after { right: calc(-1 * var(--spacings-s2)); } 1041 [dir="ltr"] .switch--checked::after { transform: translate(calc(100% - var(--spacings-s2))) translateY(-50%); left: var(--spacings-s2); } 1042 [dir="rtl"] .switch--checked::after { transform: translate(calc(-100% + var(--spacings-s2))) translateY(-50%); right: var(--spacings-s2); } 1043} 1044@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1045@layer ds-atoms { 1046 .tooltip { position: relative; background-color: var(--tooltip-bg-color); color: var(--negative-colors-text-default); box-shadow: var(--shadows-tint-1); border-radius: var(--corner-radius-r8); font-weight: 600; z-index: var(--tooltip-z-index); font-size: var(--typography-t3-font-size); line-height: var(--typography-t3-line-height); } 1047 .tooltip[data-placement$="-start"] { transform: translate(10px); } 1048 .tooltip[data-placement$="-end"] { transform: translate(-10px); } 1049 .tooltip--not-clickable { pointer-events: none; } 1050 .tooltip__wrapper[data-placement^="top"], .tooltip__wrapper[data-placement^="bottom"], .tooltip__wrapper[data-placement^="auto"] { padding: 10px 0px; } 1051 .tooltip__wrapper[data-placement^="left"], .tooltip__wrapper[data-placement^="right"] { padding: 0px 10px; } 1052 .tooltip__content { padding: var(--spacings-s8) var(--spacings-s12); color: var(--negative-colors-text-default); } 1053 .tooltip__content .text { color: var(--negative-colors-text-default); } 1054 .tooltip__indicator-wrapper { position: absolute; width: 20px; height: 13px; } 1055 .tooltip__indicator-wrapper[data-arrow-wrapper-dir^="top"] { bottom: -12px; } 1056 .tooltip__indicator-wrapper[data-arrow-wrapper-dir^="right"] { left: -12px; } 1057 .tooltip__indicator-wrapper[data-arrow-wrapper-dir^="bottom"] { top: -12px; } 1058 .tooltip__indicator-wrapper[data-arrow-wrapper-dir^="left"] { right: -12px; } 1059 .tooltip__indicator-wrapper svg { transform: translateY(-0.0125em); } 1060 .tooltip__indicator-wrapper[data-arrow-wrapper-dir^="right"] svg { transform: rotate(90deg); } 1061 .tooltip__indicator-wrapper[data-arrow-wrapper-dir^="bottom"] svg { transform: scaleY(-1); } 1062 .tooltip__indicator-wrapper[data-arrow-wrapper-dir^="left"] svg { transform: rotate(-90deg); } 1063 .tooltip__indicator { width: 20px; height: 13px; pointer-events: none; } 1064 .tooltip__indicator path:first-of-type, .tooltip__indicator path:last-of-type { fill: var(--tooltip-bg-color); } 1065} 1066@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1067@layer ds-atoms { 1068 .list { display: grid; list-style-type: none; } 1069 .list-item { min-width: 0px; min-height: 0px; } 1070} 1071@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1072@layer ds-templates {
1073 @keyframes burger-menu-open { 1074 0% { opacity: 0; transform-origin: left center; transform: translate(-100%); } 1075 100% { opacity: 1; transform: translate(0px); } 1076} 1077 .burger-menu__overlay { position: fixed; inset: 0px; background-color: var(--background-colors-transparent); z-index: 99; } 1078 .burger-menu__root { position: fixed; z-index: 999; inset: 0px; display: grid; grid-template-columns: 1fr; grid-template-rows: max-content 1fr; gap: var(--spacings-s24); height: 100%; background-color: var(--positive-colors-base-default); opacity: 0; transform: translate(-100%); transition: transform var(--timings-default) var(--easings-ease-in-out); } 1079 .burger-menu__root--wide { width: 400px; } 1080 .burger-menu__root--full { width: 100%; } 1081 .burger-menu__header { display: flex; gap: var(--spacings-s4); justify-content: flex-start; align-items: center; height: var(--header-height); border-bottom: 1px solid var(--control-colors-border-default); padding-inline: var(--spacings-s12); } 1082 .burger-menu__content { display: grid; padding-inline: var(--spacings-s12); height: max-content; } 1083 .burger-menu__close-button { margin-inline-start: auto; } 1084 .burger-menu__footer { display: grid; gap: var(--spacings-s16); padding-inline: var(--spacings-s12); padding-bottom: var(--spacings-s16); } 1085 .burger-menu--open { animation: burger-menu-open var(--timings-default) var(--easings-ease) forwards; visibility: visible; opacity: 1; } 1086} 1087@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1088@layer ds-templates { 1089 .standard-header { --menu-size: 40px; display: grid; align-items: center; width: 100%; background-color: var(--positive-colors-base-default); height: var(--standard-header-header-height); border-bottom: 1px solid var(--background-colors-border); } 1090 .standard-header--sticky { position: sticky; top: 0px; z-index: 1000; } 1091 .standard-header--relative { position: relative; } 1092 .standard-header__header-container { display: grid; grid-auto-flow: column; align-items: center; width: 100%; height: 100%; } 1093 .standard-header__header-container--desktop { grid-template-columns: max-content 1fr max-content max-content; } 1094 .standard-header__header-container--mobile { grid-template-columns: 1fr max-content max-content; } 1095 .standard-header__menu-icon-container { display: flex; align-items: center; } 1096 .standard-header__menu-icon-container--desktop { margin: var(--spacings-s0) 0; } 1097 .standard-header__menu-icon-container--mobile { margin: var(--spacings-s6) 0; } 1098 .standard-header__navigation-container { display: grid; grid-auto-flow: column; align-items: center; grid-template-columns: 1fr auto; height: 100%; } 1099 .standard-header__navigation-container--desktop { position: relative; } 1100 .standard-header__logo--desktop { margin-inline-end: var(--spacings-s40); } 1101 .standard-header__logo--mobile { margin-inline-end: 0px; width: var(--spacings-s40); height: var(--spacings-s40); } 1102 .standard-header__navigation { display: flex; flex-grow: 1; overflow: hidden; height: 100%; } 1103 .standard-header__hidden-navigation { visibility: hidden; opacity: 0; pointer-events: none; user-select: none; } 1104 .standard-header__navigation-list { display: inline-flex; gap: var(--spacings-s32); } 1105 .standard-header__navigation-item { display: flex; align-items: center; gap: var(--spacings-s8); } 1106 .standard-header__menu-icon--desktop { margin-inline-end: var(--spacings-s16); } 1107 .standard-header__menu-icon--mobile { margin-inline-end: var(--spacings-s12); } 1108 .standard-header__search-container--desktop { margin-inline-start: var(--spacings-s40); } 1109 .standard-header__actions-container { display: flex; align-items: center; gap: var(--spacings-s16); } 1110 .standard-header__actions-container--desktop { margin-inline-start: var(--spacings-s16); } 1111 .standard-header__actions-container--touch { margin-inline-end: var(--spacings-s12); } 1112} 1113@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1114@layer ds-atoms { 1115 .image { display: block; max-width: 100%; } 1116} 1117@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1118@layer ds-templates { 1119 @keyframes standard-header-search-slide-in { 1120 0% { width: 0px; opacity: 0; } 1121 100% { width: 100%; opacity: 1; } 1122} 1123 @keyframes standard-header-search-slide-out { 1124 0% { width: 100%; opacity: 1; } 1125 100% { width: 0px; opacity: 0; } 1126} 1127 @keyframes standard-header-search-overlay-in { 1128 0% { width: 0px; opacity: 0; } 1129 100% { width: 100%; opacity: 1; } 1130} 1131 @keyframes standard-header-search-overlay-out { 1132 0% { width: 100%; opacity: 1; } 1133 100% { width: 0px; opacity: 0; } 1134} 1135 .standard-header-search { display: grid; grid-auto-flow: column; } 1136 .standard-header-search--desktop::after { content: ""; display: block; width: 2px; height: 100%; background-color: var(--control-colors-border-default); margin-inline-start: var(--spacings-s16); } 1137 .standard-header-search__search-field { position: absolute; top: 0px; right: 0px; width: 0px; display: flex; gap: var(--spacings-s16); align-items: center; overflow: hidden; margin-inline-end: var(--spacings-s16); background-color: var(--positive-colors-base-default); height: 100%; } 1138 .standard-header-search__search-field--closed { animation: standard-header-search-slide-out var(--timings-default) var(--easings-ease-in-out) forwards; } 1139 .standard-header-search__search-field--open { animation-duration: ; animation-timing-function: ; animation-iteration-count: ; animation-direction: ; animation-fill-mode: ; animation-play-state: ; animation-name: ; animation-timeline: ; animation-range-start: ; animation-range-end: ; animation-delay: 0.1s; } 1140 .standard-header-search__search-button { width: auto; } 1141 .standard-header-search__search-action { display: flex; align-items: center; } 1142 .standard-header-search__search-field-overlay { position: absolute; inset: 0px; width: 0px; overflow: hidden; opacity: 0; background-color: var(--positive-colors-base-default); } 1143 .standard-header-search__search-field-overlay--open { animation: standard-header-search-overlay-in var(--timings-default) var(--easings-ease) forwards; height: 100%; z-index: 10; } 1144 .standard-header-search__search-field-overlay--closed { animation: standard-header-search-overlay-out var(--timings-default) var(--easings-ease) forwards; } 1145 .standard-header-search__search-field-overlay-header { display: flex; align-items: center; gap: var(--spacings-s8); height: 100%; padding: var(--spacings-s0) var(--spacings-s6); margin-inline: var(--spacings-s6); border-bottom: 1px solid var(--control-colors-border-default); } 1146 .standard-header-search__search-field-overlay-content { padding: var(--spacings-s12) var(--spacings-s6); } 1147 .standard-header-search__text-field-container { display: flex; align-items: center; width: 100%; height: 100%; } 1148} 1149@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1150@layer ds-atoms { 1151 .text-field { width: 100%; } 1152 .text-field--large { height: 40px; } 1153 .text-field--small { height: 32px; } 1154 .text-field--relative { position: relative; } 1155 .text-field__control { display: block; width: 100%; height: 100%; border-width: 1px; border-style: solid; border-radius: var(--corner-radius-r8); font-family: var(--fonts-gilroy); font-weight: 500; transition-property: background-color, border-color, color; transition-duration: var(--timings-default); transition-timing-function: var(--easings-ease); } 1156 .text-field__control::placeholder { font-size: var(--typography-t4-font-size); line-height: 1; font-family: inherit; } 1157 .text-field__control::-webkit-outer-spin-button, .text-field__control::-webkit-inner-spin-button { appearance: none; margin: 0px; } 1158 .text-field__control[type="number"] { } 1159 .text-field__control--centered { text-align: center; } 1160 .text-field__control--large, .text-field__control--small { font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); font-weight: 500; } 1161 .text-field__control--default-padding.text-field__control--large { padding: 0 calc(var(--spacings-s10) - 1px); } 1162 .text-field__control--default-padding.text-field__control--small { padding: 0 calc(var(--spacings-s6) - 1px); } 1163 .text-field__control--placeholder-padding.text-field__control--large { padding-inline-start: calc(var(--spacings-s10) + 20px + var(--spacings-s2) + var(--spacings-s2)); } 1164 .text-field__control--placeholder-padding.text-field__control--small { padding-inline-start: calc(var(--spacings-s6) + 20px + var(--spacings-s2) + var(--spacings-s2)); } 1165 .text-field__control--button-padding.text-field__control--large { padding-inline-end: calc(var(--spacings-s10) + 20px + var(--spacings-s2) + var(--spacings-s2)); } 1166 .text-field__control--button-padding.text-field__control--small { padding-inline-end: calc(var(--spacings-s6) + 20px + var(--spacings-s2) + var(--spacings-s2)); } 1167 .text-field__placeholder-icon { display: inline-block; vertical-align: top; position: absolute; top: 0px; bottom: 0px; margin: auto 0px; pointer-events: none; }
1168 .text-field__placeholder-icon--large { width: 20px; height: 20px; inset-inline-start: var(--spacings-s10); } 1169 .text-field__placeholder-icon--small { width: 20px; height: 20px; inset-inline-start: var(--spacings-s6); } 1170 .text-field__button { display: inline-block; vertical-align: top; position: absolute; top: 0px; bottom: 0px; margin: auto 0px; cursor: pointer; } 1171 .text-field__button--large { width: 20px; height: 20px; inset-inline-end: var(--spacings-s10); } 1172 .text-field__button--small { width: 20px; height: 20px; inset-inline-end: var(--spacings-s6); } 1173 .text-field--default-skin { border-color: var(--control-colors-border-default); color: var(--control-colors-value-default); background-color: var(--text-field-bg-override, var(--control-colors-field-background-default)); } 1174 @media (hover: hover) and (pointer: fine) { 1175 .text-field--interactive:hover { border-color: var(--control-colors-border-action); color: var(--control-colors-value-action); background-color: var(--text-field-bg-override, var(--control-colors-field-background-action)); } 1176} 1177 @media (hover: none) and (pointer: coarse) { 1178 .text-field--interactive:active { border-color: var(--control-colors-border-action); color: var(--control-colors-value-action); background-color: var(--text-field-bg-override, var(--control-colors-field-background-action)); } 1179} 1180 .text-field--interactive:focus { border-color: var(--control-colors-border-active); color: var(--control-colors-value-active); background-color: var(--text-field-bg-override, var(--control-colors-field-background-active)); } 1181 .text-field--filled { color: var(--control-colors-value-active); background-color: var(--text-field-bg-override, var(--control-colors-field-background-active)); border-color: var(--control-colors-border-active); } 1182 @media (hover: hover) and (pointer: fine) { 1183 .text-field--filled:hover { border-color: var(--control-colors-border-active-action); color: var(--control-colors-value-active-action); background-color: var(--text-field-bg-override, var(--control-colors-field-background-active-action)); } 1184} 1185 @media (hover: none) and (pointer: coarse) { 1186 .text-field--filled:active { border-color: var(--control-colors-border-active-action); color: var(--control-colors-value-active-action); background-color: var(--text-field-bg-override, var(--control-colors-field-background-active-action)); } 1187} 1188 .text-field--error { border-color: var(--error-colors-base-default); } 1189 @media (hover: hover) and (pointer: fine) { 1190 .text-field--error:hover { border-color: var(--error-colors-base-action); } 1191} 1192 @media (hover: none) and (pointer: coarse) { 1193 .text-field--error:active { border-color: var(--error-colors-base-active); } 1194} 1195 .text-field--error-active { border-color: var(--error-colors-base-active); } 1196 @media (hover: hover) and (pointer: fine) { 1197 .text-field--error-active:hover { border-color: var(--error-colors-base-active-action); } 1198} 1199 @media (hover: none) and (pointer: coarse) { 1200 .text-field--error-active:active { border-color: var(--error-colors-base-active-action); } 1201} 1202 .text-field--warning { border-color: var(--warning-colors-base-default); } 1203 @media (hover: hover) and (pointer: fine) { 1204 .text-field--warning:hover { border-color: var(--warning-colors-base-action); } 1205} 1206 @media (hover: none) and (pointer: coarse) { 1207 .text-field--warning:active { border-color: var(--warning-colors-base-action); } 1208} 1209 .text-field--warning-active { border-color: var(--warning-colors-base-active); } 1210 @media (hover: hover) and (pointer: fine) { 1211 .text-field--warning-active:hover { border-color: var(--warning-colors-base-active-action); } 1212} 1213 @media (hover: none) and (pointer: coarse) { 1214 .text-field--warning-active:active { border-color: var(--warning-colors-base-active-action); } 1215} 1216 .text-field--success { border-color: var(--success-colors-base-default); } 1217 @media (hover: hover) and (pointer: fine) { 1218 .text-field--success:hover { border-color: var(--success-colors-base-action); } 1219} 1220 @media (hover: none) and (pointer: coarse) { 1221 .text-field--success:active { border-color: var(--success-colors-base-action); } 1222} 1223 .text-field--success-active { border-color: var(--success-colors-base-active); } 1224 @media (hover: hover) and (pointer: fine) { 1225 .text-field--success-active:hover { border-color: var(--success-colors-base-active-action); } 1226} 1227 @media (hover: none) and (pointer: coarse) { 1228 .text-field--success-active:active { border-color: var(--success-colors-base-active-action); } 1229} 1230 .text-field--disabled { opacity: var(--states-disabled); } 1231 .text-field--disabled-icon { opacity: var(--states-disabled); cursor: auto; } 1232 .text-field--without-background { --text-field-bg-override: transparent; } 1233 .text-field--without-borders { border-style: none; } 1234 .text-field__skin-placeholder-icon { color: var(--control-colors-start-icon-default); } 1235 .text-field__skin-placeholder-icon > path { fill: currentcolor; } 1236 .text-field__skin-button { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: none; color: var(--control-colors-end-icon-default); transition: color var(--timings-default) var(--easings-ease); } 1237 @media (hover: hover) and (pointer: fine) { 1238 .text-field__skin-button:hover { color: var(--control-colors-end-icon-action); } 1239} 1240 @media (hover: none) and (pointer: coarse) { 1241 .text-field__skin-button:active { color: var(--control-colors-end-icon-action); } 1242} 1243 .text-field__skin-button-icon { display: block; width: 100%; height: 100%; } 1244 .text-field__skin-button-icon > path { fill: currentcolor; } 1245 @media (hover: hover) and (pointer: fine) { 1246 .text-field--interactive:hover + .text-field__skin-placeholder-icon { color: var(--control-colors-start-icon-action); } 1247} 1248 @media (hover: none) and (pointer: coarse) { 1249 .text-field--interactive:active + .text-field__skin-placeholder-icon { color: var(--control-colors-start-icon-action); } 1250} 1251 .text-field--filled + .text-field__skin-placeholder-icon { color: var(--control-colors-start-icon-active); } 1252 @media (hover: hover) and (pointer: fine) { 1253 .text-field--filled:hover + .text-field__skin-placeholder-icon { color: var(--control-colors-start-icon-active-action); } 1254} 1255 @media (hover: none) and (pointer: coarse) { 1256 .text-field--filled:active + .text-field__skin-placeholder-icon { color: var(--control-colors-start-icon-active-action); } 1257} 1258 .text-field--with-glassy-effect { position: relative; z-index: 0; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; --text-field-bg-override: transparent; } 1259 .text-field--with-glassy-effect .text-field__control:not(:where(.text-field--error, .text-field--warning, .text-field--success)) { border-color: transparent; } 1260 .text-field__glass { position: relative; overflow: hidden; background-color: var(--effects-glassy-tint); border: 1px solid var(--effects-glassy-highlight-border); box-shadow: var(--effects-glassy-shadow),var(--effects-glassy-inner-shadow); backdrop-filter: var(--effects-glassy-backdrop); border-block-start: 0px; border-inline-start: 0px; } 1261 .text-field__glass::before, .text-field__glass::after { content: ""; position: absolute; pointer-events: none; } 1262 .text-field__glass::before { inset-block-start: 0px; inset-inline: 10%; height: var(--effects-glassy-border-width); background: var(--effects-glassy-edge-top); } 1263 .text-field__glass::after { inset-block: 0px; inset-inline-start: 0px; width: var(--effects-glassy-border-width); background: var(--effects-glassy-edge-side); } 1264 .text-field__glass { position: absolute; inset: 0px; z-index: -1; border-radius: var(--corner-radius-r8); pointer-events: none; } 1265} 1266@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1267@layer ds-templates { 1268 .standard-header-user-actions--desktop { margin-inline-start: var(--spacings-s16); } 1269 .standard-header-user-actions--mobile { margin-inline-start: var(--spacings-s0); } 1270} 1271@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1272@layer ds-molecules { 1273 .avatar { display: flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; flex-shrink: 0; width: var(--avatar-size); height: var(--avatar-size); background-color: var(--avatar-bg, var(--control-colors-button-background-default)); box-shadow: var(--avatar-shadow, none); border: var(--avatar-border, var(--avatar-border-width, 0px) solid var(--avatar-border-color, transparent)); cursor: var(--avatar-cursor, default); } 1274 .avatar__placeholder-icon { width: 50%; height: 50%; } 1275 .avatar__image { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; } 1276 .avatar__icon { display: inline-block; } 1277 .avatar__icon > path { fill: var(--control-colors-value-default); } 1278 .avatar__skeleton { position: absolute; inset: calc(-1 * var(--avatar-border-width, 0px)); border-radius: inherit; } 1279 .avatar__control { display: none; } 1280 .avatar__badge { display: flex; position: absolute; bottom: 0px; } 1281 [dir="ltr"] .avatar__badge { right: 0px; }
1282 [dir="rtl"] .avatar__badge { left: 0px; } 1283 .avatar--with-shadow { box-shadow: var(--shadows-tint-1); } 1284 .avatar--no-border { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; } 1285 .avatar--cursor-pointer { cursor: pointer; } 1286 [dir="ltr"] .avatar__badge--rectangle, [dir="rtl"] .avatar__badge--rectangle { left: 50%; right: auto; transform: translate(-50%); } 1287} 1288@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1289@layer ds-templates { 1290 @keyframes standard-header-nav-slide-in { 1291 0% { max-height: 0px; opacity: 0; transform: translate(-10px); } 1292 100% { max-height: 1000px; opacity: 1; transform: translate(0px); } 1293} 1294 @keyframes standard-header-nav-slide-out { 1295 0% { max-height: 1000px; opacity: 1; transform: translate(0px); } 1296 100% { max-height: 0px; opacity: 0; transform: translate(-10px); } 1297} 1298 .standard-header-navigation { position: relative; display: grid; align-items: center; width: 100%; background-color: var(--positive-colors-base-default); transform: translate(0px); } 1299 .standard-header-navigation--desktop-nav { height: 100%; } 1300 .standard-header-navigation--desktop-nav::after { display: block; position: absolute; bottom: 0px; left: 0px; height: 2px; transition: width var(--timings-default) var(--easings-ease-in-out); content: ""; width: 0px; background-color: var(--primary-colors-base-active-action); } 1301 .standard-header-navigation--desktop-nav::before { display: block; position: absolute; bottom: 0px; left: 0px; height: 2px; transition: width var(--timings-default) var(--easings-ease-in-out); content: ""; width: 0px; background-color: var(--primary-colors-base-active); } 1302 .standard-header-navigation--desktop-nav:hover::before { width: 100%; } 1303 .standard-header-navigation--burger { height: 48px; } 1304 .standard-header-navigation--active::after { width: 100%; } 1305 .standard-header-navigation__navigation-item { display: flex; align-items: center; gap: var(--spacings-s8); height: 100%; cursor: pointer; white-space: nowrap; user-select: none; color: var(--text-colors-base); transition: color var(--timings-default) var(--easings-ease-in-out); } 1306 .standard-header-navigation__navigation-item--desktop-nav { justify-content: center; } 1307 .standard-header-navigation__navigation-item--burger { justify-content: flex-start; } 1308 .standard-header-navigation__navigation-item--burger:hover { color: var(--primary-colors-base-active); } 1309 .standard-header-navigation__arrow--burger { margin-inline-start: auto; transform: rotate(90deg); } 1310 .standard-header-navigation__arrow-active { transform: rotate(0deg); transition: transform var(--timings-default) var(--easings-ease-in-out); } 1311 .standard-header-navigation__arrow-default { transform: rotate(180deg); } 1312 .standard-header-navigation__list-heading-article, .standard-header-navigation__navigation-item-link { height: 100%; } 1313 .standard-header-navigation__mobile-navigation-content { overflow: hidden; max-height: 0px; opacity: 0; transform: translateY(-10px); transition: max-height var(--timings-default) var(--easings-ease-in-out),opacity var(--timings-default) var(--easings-ease-in-out),transform var(--timings-default) var(--easings-ease-in-out); background-color: var(--positive-colors-base-default); border-top: 1px solid rgba(var(--text-colors-base),.125); padding: var(--spacings-s16); } 1314 .standard-header-navigation__mobile-navigation-content--open { max-height: 1000px; opacity: 1; transform: translateY(0px); } 1315 .standard-header-navigation__burger-menu-content { position: absolute; top: var(--standard-header-header-height); left: 0px; right: 0px; bottom: 0px; width: 100%; overflow: hidden; max-height: 1000px; opacity: 1; z-index: 99; transform: translate(0px); transition: max-height var(--timings-default) var(--easings-ease-in-out),opacity var(--timings-default) var(--easings-ease-in-out),transform var(--timings-default) var(--easings-ease-in-out); background-color: var(--positive-colors-base-default); border-top: 1px solid rgba(var(--text-colors-base),.125); padding: var(--spacings-s16); animation: standard-header-nav-slide-in var(--timings-default) var(--easings-ease-in-out); }
1316 .standard-header-navigation__burger-menu-content--closing { max-height: 0px; opacity: 0; transform: translate(-10px); } 1317 .standard-header-navigation__portal-content-closing { animation: standard-header-nav-slide-out var(--timings-default) var(--easings-ease-in-out) forwards; } 1318} 1319@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1320@layer ds-templates { 1321 .standard-header-navigation-content { position: fixed; top: var(--standard-header-navigation-content-top); left: var(--spacings-s0); display: grid; align-items: start; width: var(--standard-header-navigation-content-width); height: 100%; overscroll-behavior: none; z-index: 1000; } 1322 .standard-header-navigation-content--with-overflow { overflow: auto; } 1323 .standard-header-navigation-content--with-pseudo::after { content: ""; width: 100%; height: 100vh; background-color: var(--background-colors-transparent); } 1324 .standard-header-navigation-content__content { position: absolute; max-height: var(--standard-header-navigation-content-max-height); display: grid; width: 100%; background-color: var(--positive-colors-base-default); overflow: auto;
1324 overscroll-behavior: none; } 1325 .standard-header-navigation-content__content-wrapper { display: flex; height: 100%; } 1326 .standard-header-navigation-content__content-wrapper--desktop { gap: var(--spacings-s40); flex-direction: row; } 1327 .standard-header-navigation-content__content-wrapper--mobile { gap: var(--spacings-s16); flex-direction: column; } 1328} 1329@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1330@layer ds-templates { 1331 .standard-header-nav-content-item { --icon-size: 36px; display: flex; flex-direction: column; gap: var(--spacings-s4); } 1332 .standard-header-nav-content-item:last-child { padding-inline-end: 0px; } 1333 .standard-header-nav-content-item--desktop { margin-block: var(--spacings-s48); padding-inline-end: var(--spacings-s40); } 1334 .standard-header-nav-content-item--desktop:not(:last-child) { border-right: 1px solid var(--background-colors-tint-3); } 1335 .standard-header-nav-content-item--burger { padding-block-start: var(--spacings-s24); } 1336 .standard-header-nav-content-item--burger:not(:last-child) { border-bottom: 1px solid var(--background-colors-tint-3); } 1337 .standard-header-nav-content-item__list-container { display: flex; } 1338 .standard-header-nav-content-item__list-container--desktop { gap: var(--spacings-s48); flex-direction: row; } 1339 .standard-header-nav-content-item__list-container--burger { gap: var(--spacings-s16); flex-direction: column; margin-block: var(--spacings-s24); } 1340 .standard-header-nav-content-item__list-item-containers-wrapper { display: flex; } 1341 @media screen and (min-width: 1366px) and (max-width: 1599px) { 1342 .standard-header-nav-content-item__list-item-containers-wrapper { flex-direction: column; } 1343} 1344 .standard-header-nav-content-item__list-item-containers-wrapper--desktop { gap: var(--spacings-s48); flex-direction: row; } 1345 .standard-header-nav-content-item__list-item-containers-wrapper--burger { gap: var(--spacings-s24); flex-direction: column; } 1346 .standard-header-nav-content-item__column-group { display: flex; flex-direction: column; gap: var(--spacings-s24); } 1347 .standard-header-nav-content-item__content { display: flex; flex-direction: column; } 1348 .standard-header-nav-content-item__content--burger { margin-inline: 0px; } 1349 .standard-header-nav-content-item__subtitle--desktop { margin-top: var(--spacings-s4); } 1350 .standard-header-nav-content-item__subtitle--burger { margin-top: var(--spacings-s8); } 1351 .standard-header-nav-content-item__list-item-container { display: flex; flex-direction: column; } 1352 .standard-header-nav-content-item__list-heading-item { display: grid; grid-auto-flow: column; justify-content: start; align-items: center; color: var(--text-colors-base); } 1353 .standard-header-nav-content-item__list-heading-item--desktop { grid-template-columns: auto 1fr; margin-top: var(--spacings-s40); margin-bottom: var(--spacings-s10); } 1354 .standard-header-nav-content-item__list-heading-item--burger { grid-template-columns: 1fr; margin-top: var(--spacings-s0); } 1355 .standard-header-nav-content-item__list-heading-title { display: flex; align-items: center; grid-row: 1; } 1356 .standard-header-nav-content-item__list-heading-title--desktop { margin-inline-start: var(--spacings-s12); max-width: 250px; } 1357 .standard-header-nav-content-item__list-heading-title--burger { max-width: 100%; height: 40px; } 1358 .standard-header-nav-content-item__list-heading-description { grid-row: 2; margin-top: var(--spacings-s12); margin-bottom: var(--spacings-s12); } 1359 .standard-header-nav-content-item__list-heading-description--desktop { max-width: 200px; margin-inline-start: var(--spacings-s12); } 1360 .standard-header-nav-content-item__list-heading-description--burger { max-width: 100%; } 1361 .standard-header-nav-content-item__list-heading-article { grid-row: 4; object-fit: cover; border-radius: var(--corner-radius-r16); padding: var(--spacings-s16); background-color: var(--background-colors-tint-1); border: 1px solid var(--background-colors-tint-2); display: flex; flex-direction: column; justify-content: space-between; transition: border var(--timings-fast) var(--easings-ease-in-out); } 1362 .standard-header-nav-content-item__list-heading-article:hover { border: 1px solid var(--primary-colors-base-action); cursor: pointer; } 1363 .standard-header-nav-content-item__list-heading-article--desktop { width: 274px; } 1364 .standard-header-nav-content-item__list-heading-article--burger { width: 100%; } 1365 .standard-header-nav-content-item__list-heading-article-image { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--corner-radius-r8); } 1366 .standard-header-nav-content-item__list-heading-article-image--desktop { width: 240px; } 1367 .standard-header-nav-content-item__list-heading-article-image--burger { width: 100%; } 1368 .standard-header-nav-content-item__multiple-lists-container { display: flex; } 1369 @media screen and (min-width: 1280px) and (max-width: 1365px) { 1370 .standard-header-nav-content-item__multiple-lists-container { flex-direction: column; } 1371} 1372 @media screen and (min-width: 1024px) and (max-width: 1279px) { 1373 .standard-header-nav-content-item__multiple-lists-container { flex-direction: column; } 1374} 1375 @media screen and (min-width: 768px) and (max-width: 1023px) { 1376 .standard-header-nav-content-item__multiple-lists-container { flex-direction: column; } 1377} 1378 @media screen and (min-width: 480px) and (max-width: 767px) { 1379 .standard-header-nav-content-item__multiple-lists-container { flex-direction: column; } 1380} 1381 @media screen and (max-width: 479px) { 1382 .standard-header-nav-content-item__multiple-lists-container { flex-direction: column; } 1383} 1384 .standard-header-nav-content-item__list-heading-icon { display: flex; align-items: center; justify-content: center; width: var(--icon-size); height: var(--icon-size); background-color: rgba(194, 9, 193, 0.2); border-radius: var(--corner-radius-circle); padding: var(--spacings-s4); color: var(--primary-colors-base-default); } 1385 .standard-header-nav-content-item__list-heading-icon svg path { fill: currentcolor; } 1386 .standard-header-nav-content-item__list { align-items: start; height: max-content; } 1387 .standard-header-nav-content-item__list--desktop { margin-inline-start: calc(var(--icon-size) + 12px); } 1388 .standard-header-nav-content-item__see-all-link { display: flex; align-items: center; width: max-content; color: var(--primary-colors-base-default); margin-top: var(--spacings-s16); font-weight: 600; height: 32px; } 1389 .standard-header-nav-content-item__see-all-link:hover { color: var(--primary-colors-base-action); } 1390 .standard-header-nav-content-item__see-all-link--desktop { margin-inline-start: calc(var(--icon-size) + 12px); } 1391 .standard-header-nav-content-item__list-item { display: flex; align-items: center; height: max-content; gap: var(--spacings-s8); margin-block: var(--spacings-s8); } 1392 .standard-header-nav-content-item__link { color: var(--text-colors-base); transition: color var(--timings-fast) var(--easings-ease-in-out); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; flex-shrink: 1; } 1393 .standard-header-nav-content-item__link:hover { color: var(--primary-colors-base-default); } 1394 .standard-header-nav-content-item__list-heading-image-text { margin-top: var(--spacings-s16); } 1395 .standard-header-nav-content-item__divider { background: var(--background-colors-tint-3); align-self: stretch; } 1396 .standard-header-nav-content-item__divider--desktop { width: 1px; height: auto; margin: 0 var(--spacings-s16); } 1397 .standard-header-nav-content-item__divider--burger { width: 100%; height: 1px; margin: var(--spacings-s16) 0; } 1398 .standard-header-nav-content-item__list-heading-image-content { display: flex; flex-direction: column; } 1399 .standard-header-nav-content-item__banners-container { display: flex; align-items: center; min-height: 56px; gap: var(--spacings-s12); } 1400 .standard-header-nav-content-item__banners-container--desktop { max-width: 440px; margin-top: var(--spacings-s32); flex-direction: row; } 1401 .standard-header-nav-content-item__banners-container--burger { max-width: 100%; margin-top: var(--spacings-s16); flex-direction: column; } 1402 .standard-header-nav-content-item__banner-card { display: flex; flex-basis: 50%; align-items: center; padding-inline: var(--spacings-s16); padding-block: var(--spacings-s8); width: 100%; height: 100%; background-color: var(--background-colors-base); border: 1px solid var(--background-colors-tint-2); border-radius: var(--corner-radius-r8); text-decoration: none; transition: border var(--timings-fast) var(--easings-ease-in-out); } 1403 .standard-header-nav-content-item__banner-card:hover { border: 1px solid var(--primary-colors-base-action); cursor: pointer; } 1404 .standard-header-nav-content-item__banner-card--desktop { flex: 1 1 0%; } 1405 .standard-header-nav-content-item__banner-card--burger { flex: 0 0 auto; } 1406 .standard-header-nav-content-item__banner-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--primary-colors-base-default); } 1407 .standard-header-nav-content-item__banner-icon svg path { fill: currentcolor; } 1408 .standard-header-nav-content-item__banner-content { display: flex; flex-direction: column; margin-inline-start: var(--spacings-s12); } 1409 .standard-header-nav-content-item__banner-title { color: var(--text-colors-base); font-weight: 600; } 1410 .standard-header-nav-content-item__banner-index { color: var(--text-colors-tint-1); font-weight: 500; margin-bottom: var(--spacings-s4); } 1411 .standard-header-nav-content-item__banner-description { color: var(--text-colors-tint-1); font-weight: 500; } 1412} 1413@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1414@layer ds-atoms { 1415 .bottom-sheet__content { display: grid; grid-template-rows: auto 1fr auto; height: 100%; min-height: 0px; } 1416 .bottom-sheet__header { position: sticky; top: 0px; padding: var(--spacings-s0) var(--spacings-s16) var(--spacings-s8) var(--spacings-s16); background-color: var(--background-colors-base); } 1417 .bottom-sheet__body { padding: var(--spacings-s0) var(--spacings-s16); overflow-y: auto; min-height: 0px; scrollbar-gutter: stable both-edges; } 1418 .bottom-sheet__footer { position: sticky; bottom: 0px; padding: var(--spacings-s0) var(--spacings-s16); background-color: var(--background-colors-base); } 1419} 1420@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1421@layer ds-subatoms { 1422 .base-bottom-sheet { position: fixed; bottom: 0px; left: 0px; z-index: var(--bbs-z-index, 9); width: 100%; border-radius: var(--corner-radius-r16); background-color: var(--background-colors-base); isolation: isolate; transform-origin: center bottom; will-change: transform, height; transition-property: transform, opacity, max-height; transition-duration: 0.25s; transition-timing-function: cubic-bezier(0.4, 0, 1, 1); } 1423 .base-bottom-sheet--static { padding-top: var(--spacings-s12); border-radius: var(--corner-radius-r0); } 1424 .base-bottom-sheet--full-height { border-radius: var(--corner-radius-r0); } 1425 .base-bottom-sheet--open { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } 1426 .base-bottom-sheet--dragging { transition-duration: 0s; } 1427 .base-bottom-sheet__touch-area { display: grid; place-content: center; position: relative; height: 12px; border-radius: var(--corner-radius-r16) var(--corner-radius-r16) var(--corner-radius-r0) var(--corner-radius-r0); background-color: var(--background-colors-base); } 1428 .base-bottom-sheet--full-height .base-bottom-sheet__touch-area { border-radius: var(--corner-radius-r0); } 1429 .base-bottom-sheet__touch-area::before { content: ""; position: absolute; left: 50%; z-index: calc(var(--bbs-z-index, 9) + 1); width: 100%; max-width: 80%; height: 44px; background-color: transparent; translate: -50%; transform: translateY(0px); } 1430 .base-bottom-sheet--open .base-bottom-sheet__touch-area::before { transform: translateY(-45%); } 1431 .base-bottom-sheet__touch-area::after { content: ""; width: 32px; height: 4px; border-radius: var(--corner-radius-r4); background-color: var(--background-colors-tint-3); } 1432 .base-bottom-sheet__overlay { position: absolute; top: 12px; z-index: -1; width: 100%; height: 105%; background-color: var(--background-colors-transparent); opacity: var(--bbs-overlay-opacity, 0); transform: translateY(-100%); transition: opacity var(--timings-default) var(--easings-ease); user-select: none; } 1433 .base-bottom-sheet--static .base-bottom-sheet__overlay { top: 0px; } 1434 .base-bottom-sheet__content { height: 100%; contain: layout; touch-action: pan-y; } 1435 .base-bottom-sheet__content--with-bg-effect::before { content: ""; position: absolute; top: 50%; left: 50%; z-index: 0; width: 100%; max-height: 100%; height: auto; aspect-ratio: 1 / 1; background: var(--effects-vignette); transform: translate(-50%, -50%); pointer-events: none; } 1436 .base-bottom-sheet--enter { opacity: 0; } 1437 .base-bottom-sheet--enter-active { opacity: 1; transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1), opacity 0.25s cubic-bezier(0, 0, 0.2, 1), max-height 0.25s cubic-bezier(0, 0, 0.2, 1); } 1438 .base-bottom-sheet--exit { opacity: 1; } 1439 .base-bottom-sheet--exit-active { opacity: 0; transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1), opacity 0.25s cubic-bezier(0.4, 0, 1, 1), max-height 0.25s cubic-bezier(0.4, 0, 1, 1); } 1440} 1441@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1442@layer ds-molecules { 1443 .credit-button { position: relative; display: inline-flex; vertical-align: top; align-items: center; justify-content: center; max-width: 100%; border-style: solid; border-width: 0px; background-color: transparent; transition: background-color var(--timings-default) var(--easings-ease),border-color var(--timings-default) var(--easings-ease),color var(--timings-default) var(--easings-ease),opacity var(--timings-default) var(--easings-ease); height: 32px; padding-block: 4px; padding-inline: 4px; border-radius: 30px; font-weight: 600; font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); --credit-button-blink-glow: var(--text-colors-base); --credit-button-blink-ring: #6C6C6C; } 1444 .credit-button--status-default { background-color: var(--neutral-colors-base-default); } 1445 @media (hover: hover) and (pointer: fine) { 1446 .credit-button--status-default:hover { background-color: var(--neutral-colors-base-action); } 1447} 1448 .credit-button--status-default:active { background-color: var(--neutral-colors-base-active); } 1449 @media (hover: hover) and (pointer: fine) { 1450 .credit-button--status-default:active:hover { background-color: var(--neutral-colors-base-active-action); } 1451}
1452 .credit-button--status-default { color: var(--neutral-colors-text-default); } 1453 @media (hover: hover) and (pointer: fine) { 1454 .credit-button--status-default:hover { color: var(--neutral-colors-text-action); } 1455} 1456 .credit-button--status-default:active { color: var(--neutral-colors-text-active); } 1457 @media (hover: hover) and (pointer: fine) { 1458 .credit-button--status-default:active:hover { color: var(--neutral-colors-text-active-action); } 1459} 1460 .credit-button--status-low { --credit-button-blink-glow: var(--warning-colors-base-default); --credit-button-blink-ring: var(--warning-colors-base-default); border-width: 1px; border-color: var(--warning-colors-base-default); } 1461 @media (hover: hover) and (pointer: fine) { 1462 .credit-button--status-low:hover { border-color: var(--warning-colors-base-action); } 1463} 1464 .credit-button--status-low:active { border-color: var(--warning-colors-base-active); } 1465 @media (hover: hover) and (pointer: fine) { 1466 .credit-button--status-low:active:hover { border-color: var(--warning-colors-base-active-action); } 1467} 1468 .credit-button--status-low { color: var(--warning-colors-base-default); } 1469 @media (hover: hover) and (pointer: fine) { 1470 .credit-button--status-low:hover { color: var(--warning-colors-base-action); } 1471} 1472 .credit-button--status-low:active { color: var(--warning-colors-base-active); } 1473 @media (hover: hover) and (pointer: fine) { 1474 .credit-button--status-low:active:hover { color: var(--warning-colors-base-active-action); } 1475} 1476 .credit-button--status-critical { --credit-button-blink-glow: var(--error-colors-base-default); --credit-button-blink-ring: var(--error-colors-base-default); border-width: 1px; border-color: var(--error-colors-base-default); } 1477 @media (hover: hover) and (pointer: fine) { 1478 .credit-button--status-critical:hover { border-color: var(--error-colors-base-action); } 1479} 1480 .credit-button--status-critical:active { border-color: var(--error-colors-base-active); } 1481 @media (hover: hover) and (pointer: fine) { 1482 .credit-button--status-critical:active:hover { border-color: var(--error-colors-base-active-action); } 1483} 1484 .credit-button--status-critical { color: var(--error-colors-base-default); } 1485 @media (hover: hover) and (pointer: fine) { 1486 .credit-button--status-critical:hover { color: var(--error-colors-base-action); } 1487} 1488 .credit-button--status-critical:active { color: var(--error-colors-base-active); } 1489 @media (hover: hover) and (pointer: fine) { 1490 .credit-button--status-critical:active:hover { color: var(--error-colors-base-active-action); } 1491} 1492 .credit-button__content { display: inline-flex; align-items: center; min-width: 0px; column-gap: var(--spacings-s2); } 1493 .credit-button__icon { display: inline-block; flex: 0 0 20px; width: 20px; height: 20px; } 1494 .credit-button__icon > path:not([fill]) { fill: currentcolor; } 1495 .credit-button__credits { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-inline: 2px; } 1496 .credit-button--blink { animation: credit-button-shadow var(--timings-medium) var(--easings-ease) forwards; } 1497 .credit-button--blink::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.1); transition: scale var(--timings-medium) var(--easings-ease),box-shadow var(--timings-medium) var(--easings-ease); width: calc(100% + 1px); height: calc(100% + 1px); border: 1px solid var(--credit-button-blink-ring); border-radius: 30px; animation: credit-button-blink var(--timings-medium) var(--easings-ease) forwards; pointer-events: none; } 1498 @keyframes credit-button-shadow { 1499 0%, 100% { box-shadow: none; } 1500 25%, 50% { box-shadow: 0 0 6px 6px color-mix(in srgb,var(--credit-button-blink-glow) 24%,transparent); } 1501} 1502 @keyframes credit-button-blink { 1503 0% { transform: translate(-50%, -50%) scale(1.1); opacity: 0; } 1504 25% { transform: translate(-50%, -50%) scale(1.1, 1.2); opacity: 0.8; } 1505 50% { transform: translate(-50%, -50%) scale(1.2, 1.3); opacity: 0.6; } 1506 100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0; } 1507} 1508} 1509@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1510@layer ds-subatoms { 1511 .base-button { appearance: none; margin: 0px; padding: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: none; font: inherit; color: inherit; text-align: inherit; } 1512 .base-button:disabled { color: inherit; }
1513 .base-button--not-interactive { cursor: not-allowed; pointer-events: none; } 1514 .base-button--enabled { cursor: pointer; } 1515 .base-button--disabled { opacity: var(--states-disabled); pointer-events: none; } 1516 .base-button--loading { cursor: default; pointer-events: none; } 1517} 1518@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1519@layer ds-molecules { 1520 .panel-heading__top { display: grid; align-items: center; grid-template: "action title optional" 1fr / auto 1fr auto; } 1521 .panel-heading__brand-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-inline-end: var(--spacings-s4); } 1522 .panel-heading__brand-icon svg { width: 20px; height: 20px; fill: var(--text-colors-tint-1); } 1523 .panel-heading__common { min-width: 0px; } 1524 .panel-heading__back-button { grid-area: action; margin-inline-end: var(--spacings-s4); } 1525 [dir="rtl"] .panel-heading__back-button { transform: rotate(180deg); } 1526 .panel-heading__center-container { grid-area: title; display: flex; align-items: center; } 1527 .panel-heading__title-start { justify-content: start; } 1528 .panel-heading__title-container { display: grid; align-items: center; grid-template: "mainTitle count badge" 1fr / auto min-content 1fr; } 1529 .panel-heading__title { display: block; grid-area: mainTitle; transition: color var(--timings-default) var(--easings-ease); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } 1530 .panel-heading__count { margin-inline-start: var(--spacings-s4); grid-area: count; } 1531 .panel-heading [data-testid="badge"] { grid-area: badge; vertical-align: baseline; margin-inline-start: var(--spacings-s8); } 1532 .panel-heading__optional { display: flex; gap: var(--spacings-s2); } 1533 .panel-heading__actions { grid-area: optional; display: flex; align-items: center; gap: var(--spacings-s2); margin-inline-start: var(--spacings-s8); } 1534 .panel-heading__bottom { margin-top: var(--spacings-s8); } 1535} 1536@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1537@layer ds-atoms { 1538 .text-tooltip { max-width: 390px; z-index: var(--text-tooltip-z-index); --container-background-color: var(--negative-colors-base-default); --container-border-color: var(--background-colors-border); background-color: var(--container-background-color); border-radius: var(--corner-radius-r8); } 1539 .text-tooltip__text { display: block; padding: var(--spacings-s8); color: var(--negative-colors-text-default); text-align: center; font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); } 1540} 1541@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1542@layer ds-subatoms { 1543 .base-floating-container { position: relative; border: 1px solid var(--container-border-color); background-color: var(--container-background-color); } 1544 .base-floating-container--transform-start { transform: translate(10px); } 1545 .base-floating-container--transform-end { transform: translate(-10px); } 1546 .base-floating-container--transform-default { transform: translate(0px); } 1547 .base-floating-container__indicator { display: inline-block; position: absolute; width: 20px; height: 14px; } 1548 .base-floating-container__indicator > path:nth-child(1) { fill: var(--container-background-color); } 1549 .base-floating-container__indicator > path:nth-child(2) { fill: var(--container-border-color); } 1550} 1551@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1552@layer ds-atoms { 1553 .loader { display: flex; width: 100%; height: 100%; inset: 0px; z-index: var(--loader-z-index, 1); background-color: var(--loader-bg-color, transparent); } 1554 .loader--local { position: absolute; } 1555 .loader--global { position: fixed; } 1556 .loader--no-bg { background-color: transparent; } 1557 @keyframes loader-rotate { 1558 100% { transform: rotate(360deg); } 1559} 1560 .loader__icon { display: inline-block; margin: auto; animation: loader-rotate var(--timings-long) var(--easings-linear) infinite; } 1561 .loader__icon path { fill: var(--primary-colors-base-default); } 1562 .loader--large .loader__icon { width: 48px; height: 48px; } 1563 .loader--small .loader__icon { width: 24px; height: 24px; } 1564} 1565@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1566@layer ds-atoms { 1567 .divider::before { content: ""; display: block; background-color: var(--background-colors-border); } 1568 .divider--rounded::before { border-radius: var(--corner-radius-r2); }
1569 .divider--horizontal { display: block; width: var(--divider-size, 100%); padding-top: var(--divider-start); padding-bottom: var(--divider-end); } 1570 .divider--horizontal::before { height: 2px; } 1571 .divider--vertical { display: inline-block; vertical-align: top; height: var(--divider-size, 100%); padding-inline-start: var(--divider-start); padding-inline-end: var(--divider-end); } 1572 .divider--vertical::before { width: 2px; height: 100%; } 1573} 1574@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1575@layer ds-atoms { 1576 .suggestion-menu-v2 { max-height: var(--smv2-max-height, 200px); min-width: var(--smv2-min-width, auto); margin-inline-start: var(--smv2-inline-offset, 0px); } 1577 .suggestion-menu-v2.suggestion-menu-v2 { transform: translateY(var(--smv2-block-offset, 0px)); } 1578 .suggestion-menu-v2 { background-color: var(--background-colors-popover); border: 1px solid var(--background-colors-border); border-radius: var(--corner-radius-r8); box-shadow: var(--shadows-tint-1); overflow: auto; padding: var(--spacings-s12); } 1579 @media (pointer: fine) { 1580 .suggestion-menu-v2::-webkit-scrollbar { width: 4px; } 1581 .suggestion-menu-v2::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; } 1582 .suggestion-menu-v2::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r4); background-color: var(--background-colors-border); } 1583 .suggestion-menu-v2::-webkit-scrollbar-corner { background: transparent; } 1584} 1585 @supports (-moz-appearance: none) { 1586 .suggestion-menu-v2 { scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 1587} 1588 @media (pointer: coarse) { 1589 .suggestion-menu-v2::-webkit-scrollbar { display: none; } 1590} 1591 .suggestion-menu-v2--small { border-width: 1px; border-radius: var(--corner-radius-r8); } 1592 .suggestion-menu-v2--disabled { opacity: var(--states-disabled); pointer-events: none; } 1593 .suggestion-menu-v2 [data-suggestion-highlighted] { background-color: var(--control-colors-button-background-action); } 1594} 1595@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1596@layer ds-molecules { 1597 .chip--skin-default { --border-color: var(--control-colors-border-default); --start-icon-color: var(--control-colors-start-icon-default); --text-color: var(--control-colors-text-default); --end-icon-color: var(--control-colors-end-icon-default); --bg-color: var(--control-colors-button-background-default); } 1598 @media (hover: hover) and (pointer: fine) { 1599 .chip--skin-default:hover { --border-color: var(--control-colors-border-action); --start-icon-color: var(--control-colors-start-icon-action); --text-color: var(--control-colors-text-action); --end-icon-color: var(--control-colors-end-icon-action); --bg-color: var(--control-colors-button-background-action); } 1600} 1601 @media (hover: none) and (pointer: coarse) { 1602 .chip--skin-default:active { --border-color: var(--control-colors-border-action); --start-icon-color: var(--control-colors-start-icon-action); --text-color: var(--control-colors-text-action); --end-icon-color: var(--control-colors-end-icon-action); --bg-color: var(--control-colors-button-background-action); } 1603} 1604 .chip--skin-default-active { --border-color: var(--control-colors-button-background-active); --start-icon-color: var(--control-colors-start-icon-active); --text-color: var(--control-colors-text-active); --end-icon-color: var(--control-colors-end-icon-active); --bg-color: var(--control-colors-button-background-active); } 1605 @media (hover: hover) and (pointer: fine) { 1606 .chip--skin-default-active:hover { --border-color: var(--control-colors-button-background-active-action); --start-icon-color: var(--control-colors-start-icon-active-action); --text-color: var(--control-colors-text-active-action); --end-icon-color: var(--control-colors-end-icon-active-action); --bg-color: var(--control-colors-button-background-active-action); } 1607} 1608 @media (hover: none) and (pointer: coarse) { 1609 .chip--skin-default-active:active { --border-color: var(--control-colors-button-background-active-action); --start-icon-color: var(--control-colors-start-icon-active-action); --text-color: var(--control-colors-text-active-action); --end-icon-color: var(--control-colors-end-icon-active-action); --bg-color: var(--control-colors-button-background-active-action); } 1610} 1611 .chip--skin-primary { --border-color: var(--primary-colors-base-default); --start-icon-color: var(--primary-colors-text-default); --text-color: var(--primary-colors-text-default); --end-icon-color: var(--primary-colors-text-default); --bg-color: var(--primary-colors-base-default); } 1612 @media (hover: hover) and (pointer: fine) { 1613 .chip--skin-primary:hover { --border-color: var(--primary-colors-base-action); --start-icon-color: var(--primary-colors-text-action); --text-color: var(--primary-colors-text-action); --end-icon-color: var(--primary-colors-text-action); --bg-color: var(--primary-colors-base-action); } 1614} 1615 @media (hover: none) and (pointer: coarse) { 1616 .chip--skin-primary:active { --border-color: var(--primary-colors-base-action); --start-icon-color: var(--primary-colors-text-action); --text-color: var(--primary-colors-text-action); --end-icon-color: var(--primary-colors-text-action); --bg-color: var(--primary-colors-base-action); } 1617} 1618 .chip--skin-primary-active { --border-color: var(--primary-colors-base-active); --start-icon-color: var(--primary-colors-text-active); --text-color: var(--primary-colors-text-active); --end-icon-color: var(--primary-colors-text-active); --bg-color: var(--primary-colors-base-active); } 1619 @media (hover: hover) and (pointer: fine) { 1620 .chip--skin-primary-active:hover { --border-color: var(--primary-colors-base-active-action); --start-icon-color: var(--primary-colors-text-active-action); --text-color: var(--primary-colors-text-active-action); --end-icon-color: var(--primary-colors-text-active-action); --bg-color: var(--primary-colors-base-active-action); } 1621} 1622 @media (hover: none) and (pointer: coarse) { 1623 .chip--skin-primary-active:active { --border-color: var(--primary-colors-base-active-action); --start-icon-color: var(--primary-colors-text-active-action); --text-color: var(--primary-colors-text-active-action); --end-icon-color: var(--primary-colors-text-active-action); --bg-color: var(--primary-colors-base-active-action); } 1624} 1625 .chip--skin-secondary { --border-color: var(--primary-colors-base-default); --start-icon-color: var(--primary-colors-text-default); --text-color: var(--primary-colors-text-default); --end-icon-color: var(--primary-colors-text-default); --bg-color: var(--primary-colors-base-default); } 1626 @media (hover: hover) and (pointer: fine) { 1627 .chip--skin-secondary:hover { --border-color: var(--primary-colors-base-action); --start-icon-color: var(--primary-colors-text-action); --text-color: var(--primary-colors-text-action); --end-icon-color: var(--primary-colors-text-action); --bg-color: var(--primary-colors-base-action); } 1628} 1629 @media (hover: none) and (pointer: coarse) { 1630 .chip--skin-secondary:active { --border-color: var(--primary-colors-base-action); --start-icon-color: var(--primary-colors-text-action); --text-color: var(--primary-colors-text-action); --end-icon-color: var(--primary-colors-text-action); --bg-color: var(--primary-colors-base-action); } 1631} 1632 .chip--skin-secondary-active { --border-color: var(--primary-colors-base-active); --start-icon-color: var(--primary-colors-text-active); --text-color: var(--primary-colors-text-active); --end-icon-color: var(--primary-colors-text-active); --bg-color: var(--primary-colors-base-active); } 1633 @media (hover: hover) and (pointer: fine) { 1634 .chip--skin-secondary-active:hover { --border-color: var(--primary-colors-base-active-action); --start-icon-color: var(--primary-colors-text-active-action); --text-color: var(--primary-colors-text-active-action); --end-icon-color: var(--primary-colors-text-active-action); --bg-color: var(--primary-colors-base-active-action); } 1635} 1636 @media (hover: none) and (pointer: coarse) { 1637 .chip--skin-secondary-active:active { --border-color: var(--primary-colors-base-active-action); --start-icon-color: var(--primary-colors-text-active-action); --text-color: var(--primary-colors-text-active-action); --end-icon-color: var(--primary-colors-text-active-action); --bg-color: var(--primary-colors-base-active-action); } 1638} 1639 .chip--skin-tertiary { --border-color: var(--neutral-colors-base-default); --start-icon-color: var(--neutral-colors-text-default); --text-color: var(--neutral-colors-text-default); --end-icon-color: var(--neutral-colors-text-default); --bg-color: var(--neutral-colors-base-default); } 1640 @media (hover: hover) and (pointer: fine) { 1641 .chip--skin-tertiary:hover { --border-color: var(--neutral-colors-base-action); --start-icon-color: var(--neutral-colors-text-action); --text-color: var(--neutral-colors-text-action); --end-icon-color: var(--neutral-colors-text-action); --bg-color: var(--neutral-colors-base-action); } 1642} 1643 @media (hover: none) and (pointer: coarse) { 1644 .chip--skin-tertiary:active { --border-color: var(--neutral-colors-base-action); --start-icon-color: var(--neutral-colors-text-action); --text-color: var(--neutral-colors-text-action); --end-icon-color: var(--neutral-colors-text-action); --bg-color: var(--neutral-colors-base-action); } 1645} 1646 .chip--skin-tertiary-active { --border-color: var(--neutral-colors-base-active); --start-icon-color: var(--neutral-colors-text-active); --text-color: var(--neutral-colors-text-active); --end-icon-color: var(--neutral-colors-text-active); --bg-color: var(--neutral-colors-base-active); } 1647 @media (hover: hover) and (pointer: fine) { 1648 .chip--skin-tertiary-active:hover { --border-color: var(--neutral-colors-base-active-action); --start-icon-color: var(--neutral-colors-text-active-action); --text-color: var(--neutral-colors-text-active-action); --end-icon-color: var(--neutral-colors-text-active-action); --bg-color: var(--neutral-colors-base-active-action); } 1649} 1650 @media (hover: none) and (pointer: coarse) { 1651 .chip--skin-tertiary-active:active { --border-color: var(--neutral-colors-base-active-action); --start-icon-color: var(--neutral-colors-text-active-action); --text-color: var(--neutral-colors-text-active-action); --end-icon-color: var(--neutral-colors-text-active-action); --bg-color: var(--neutral-colors-base-active-action); } 1652} 1653 .chip--skin-positive { --border-color: var(--positive-colors-base-default); --start-icon-color: var(--positive-colors-text-default); --text-color: var(--positive-colors-text-default); --end-icon-color: var(--positive-colors-text-default); --bg-color: var(--positive-colors-base-default); } 1654 @media (hover: hover) and (pointer: fine) { 1655 .chip--skin-positive:hover { --border-color: var(--positive-colors-base-action); --start-icon-color: var(--positive-colors-text-action); --text-color: var(--positive-colors-text-action); --end-icon-color: var(--positive-colors-text-action); --bg-color: var(--positive-colors-base-action); } 1656} 1657 @media (hover: none) and (pointer: coarse) { 1658 .chip--skin-positive:active { --border-color: var(--positive-colors-base-action); --start-icon-color: var(--positive-colors-text-action); --text-color: var(--positive-colors-text-action); --end-icon-color: var(--positive-colors-text-action); --bg-color: var(--positive-colors-base-action); } 1659} 1660 .chip--skin-positive-active { --border-color: var(--positive-colors-base-active); --start-icon-color: var(--positive-colors-text-active); --text-color: var(--positive-colors-text-active); --end-icon-color: var(--positive-colors-text-active); --bg-color: var(--positive-colors-base-active); } 1661 @media (hover: hover) and (pointer: fine) { 1662 .chip--skin-positive-active:hover { --border-color: var(--positive-colors-base-active-action); --start-icon-color: var(--positive-colors-text-active-action); --text-color: var(--positive-colors-text-active-action); --end-icon-color: var(--positive-colors-text-active-action); --bg-color: var(--positive-colors-base-active-action); } 1663} 1664 @media (hover: none) and (pointer: coarse) { 1665 .chip--skin-positive-active:active { --border-color: var(--positive-colors-base-active-action); --start-icon-color: var(--positive-colors-text-active-action); --text-color: var(--positive-colors-text-active-action); --end-icon-color: var(--positive-colors-text-active-action); --bg-color: var(--positive-colors-base-active-action); } 1666} 1667 .chip--skin-negative { --border-color: var(--negative-colors-base-default); --start-icon-color: var(--negative-colors-text-default); --text-color: var(--negative-colors-text-default); --end-icon-color: var(--negative-colors-text-default); --bg-color: var(--negative-colors-base-default); } 1668 @media (hover: hover) and (pointer: fine) { 1669 .chip--skin-negative:hover { --border-color: var(--negative-colors-base-action); --start-icon-color: var(--negative-colors-text-action); --text-color: var(--negative-colors-text-action); --end-icon-color: var(--negative-colors-text-action); --bg-color: var(--negative-colors-base-action); } 1670} 1671 @media (hover: none) and (pointer: coarse) { 1672 .chip--skin-negative:active { --border-color: var(--negative-colors-base-action); --start-icon-color: var(--negative-colors-text-action); --text-color: var(--negative-colors-text-action); --end-icon-color: var(--negative-colors-text-action); --bg-color: var(--negative-colors-base-action); } 1673} 1674 .chip--skin-negative-active { --border-color: var(--negative-colors-base-active); --start-icon-color: var(--negative-colors-text-active); --text-color: var(--negative-colors-text-active); --end-icon-color: var(--negative-colors-text-active); --bg-color: var(--negative-colors-base-active); } 1675 @media (hover: hover) and (pointer: fine) { 1676 .chip--skin-negative-active:hover { --border-color: var(--negative-colors-base-active-action); --start-icon-color: var(--negative-colors-text-active-action); --text-color: var(--negative-colors-text-active-action); --end-icon-color: var(--negative-colors-text-active-action); --bg-color: var(--negative-colors-base-active-action); } 1677} 1678 @media (hover: none) and (pointer: coarse) { 1679 .chip--skin-negative-active:active { --border-color: var(--negative-colors-base-active-action); --start-icon-color: var(--negative-colors-text-active-action); --text-color: var(--negative-colors-text-active-action); --end-icon-color: var(--negative-colors-text-active-action); --bg-color: var(--negative-colors-base-active-action); } 1680} 1681 .chip--skin-success { --border-color: var(--success-colors-base-default); --start-icon-color: var(--success-colors-text-default); --text-color: var(--success-colors-text-default); --end-icon-color: var(--success-colors-text-default); --bg-color: var(--success-colors-base-default); } 1682 @media (hover: hover) and (pointer: fine) { 1683 .chip--skin-success:hover { --border-color: var(--success-colors-base-action); --start-icon-color: var(--success-colors-text-action); --text-color: var(--success-colors-text-action); --end-icon-color: var(--success-colors-text-action); --bg-color: var(--success-colors-base-action); } 1684} 1685 @media (hover: none) and (pointer: coarse) { 1686 .chip--skin-success:active { --border-color: var(--success-colors-base-action); --start-icon-color: var(--success-colors-text-action); --text-color: var(--success-colors-text-action); --end-icon-color: var(--success-colors-text-action); --bg-color: var(--success-colors-base-action); } 1687} 1688 .chip--skin-success-active { --border-color: var(--success-colors-base-active); --start-icon-color: var(--success-colors-text-active); --text-color: var(--success-colors-text-active); --end-icon-color: var(--success-colors-text-active); --bg-color: var(--success-colors-base-active); } 1689 @media (hover: hover) and (pointer: fine) { 1690 .chip--skin-success-active:hover { --border-color: var(--success-colors-base-active-action); --start-icon-color: var(--success-colors-text-active-action); --text-color: var(--success-colors-text-active-action); --end-icon-color: var(--success-colors-text-active-action); --bg-color: var(--success-colors-base-active-action); } 1691} 1692 @media (hover: none) and (pointer: coarse) { 1693 .chip--skin-success-active:active { --border-color: var(--success-colors-base-active-action); --start-icon-color: var(--success-colors-text-active-action); --text-color: var(--success-colors-text-active-action); --end-icon-color: var(--s
1693uccess-colors-text-active-action); --bg-color: var(--success-colors-base-active-action); } 1694} 1695 .chip--skin-warning { --border-color: var(--warning-colors-base-default); --start-icon-color: var(--warning-colors-text-default); --text-color: var(--warning-colors-text-default); --end-icon-color: var(--warning-colors-text-default); --bg-color: var(--warning-colors-base-default); } 1696 @media (hover: hover) and (pointer: fine) { 1697 .chip--skin-warning:hover { --border-color: var(--warning-colors-base-action); --start-icon-color: var(--warning-colors-text-action); --text-color: var(--warning-colors-text-action); --end-icon-color: var(--warning-colors-text-action); --bg-color: var(--warning-colors-base-action); } 1698} 1699 @media (hover: none) and (pointer: coarse) { 1700 .chip--skin-warning:active { --border-color: var(--warning-colors-base-action); --start-icon-color: var(--warning-colors-text-action); --text-color: var(--warning-colors-text-action); --end-icon-color: var(--warning-colors-text-action); --bg-color: var(--warning-colors-base-action); } 1701} 1702 .chip--skin-warning-active { --border-color: var(--warning-colors-base-active); --start-icon-color: var(--warning-colors-text-active); --text-color: var(--warning-colors-text-active); --end-icon-color: var(--warning-colors-text-active); --bg-color: var(--warning-colors-base-active); } 1703 @media (hover: hover) and (pointer: fine) { 1704 .chip--skin-warning-active:hover { --border-color: var(--warning-colors-base-active-action); --start-icon-color: var(--warning-colors-text-active-action); --text-color: var(--warning-colors-text-active-action); --end-icon-color: var(--warning-colors-text-active-action); --bg-color: var(--warning-colors-base-active-action); } 1705} 1706 @media (hover: none) and (pointer: coarse) { 1707 .chip--skin-warning-active:active { --border-color: var(--warning-colors-base-active-action); --start-icon-color: var(--warning-colors-text-active-action); --text-color: var(--warning-colors-text-active-action); --end-icon-color: var(--warning-colors-text-active-action); --bg-color: var(--warning-colors-base-active-action); } 1708} 1709 .chip--skin-error { --border-color: var(--error-colors-base-default); --start-icon-color: var(--error-colors-text-default); --text-color: var(--error-colors-text-default); --end-icon-color: var(--error-colors-text-default); --bg-color: var(--error-colors-base-default); } 1710 @media (hover: hover) and (pointer: fine) { 1711 .chip--skin-error:hover { --border-color: var(--error-colors-base-action); --start-icon-color: var(--error-colors-text-action); --text-color: var(--error-colors-text-action); --end-icon-color: var(--error-colors-text-action); --bg-color: var(--error-colors-base-action); } 1712} 1713 @media (hover: none) and (pointer: coarse) { 1714 .chip--skin-error:active { --border-color: var(--error-colors-base-action); --start-icon-color: var(--error-colors-text-action); --text-color: var(--error-colors-text-action); --end-icon-color: var(--error-colors-text-action); --bg-color: var(--error-colors-base-action); } 1715} 1716 .chip--skin-error-active { --border-color: var(--error-colors-base-active); --start-icon-color: var(--error-colors-text-active); --text-color: var(--error-colors-text-active); --end-icon-color: var(--error-colors-text-active); --bg-color: var(--error-colors-base-active); } 1717 @media (hover: hover) and (pointer: fine) { 1718 .chip--skin-error-active:hover { --border-color: var(--error-colors-base-active-action); --start-icon-color: var(--error-colors-text-active-action); --text-color: var(--error-colors-text-active-action); --end-icon-color: var(--error-colors-text-active-action); --bg-color: var(--error-colors-base-active-action); } 1719} 1720 @media (hover: none) and (pointer: coarse) { 1721 .chip--skin-error-active:active { --border-color: var(--error-colors-base-active-action); --start-icon-color: var(--error-colors-text-active-action); --text-color: var(--error-colors-text-active-action); --end-icon-color: var(--error-colors-text-active-action); --bg-color: var(--error-colors-base-active-action); } 1722} 1723 @keyframes chip-rotate { 1724 100% { transform: rotate(360deg); } 1725} 1726 .chip { display: inline-grid; align-items: center; justify-content: center; vertical-align: top; max-width: 100%; background-color: var(--bg-color); border-style: solid; border-color: var(--border-color); transition-property: background-color, border; transition-timing-function: var(--easings-ease); transition-duration: var(--timings-default); cursor: pointer; overflow: hidden; position: relative; grid-template-columns: var(--chip-grid-cols, auto); width: var(--chip-width, auto); pointer-events: var(--chip-pointer-events, auto); } 1727 .chip--large { height: 40px; border-width: 1px; border-radius: var(--corner-radius-r8); column-gap: var(--spacings-s2); font-weight: 600; font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); } 1728 .chip--large .chip__interactive-area { gap: var(--spacings-s2); padding: calc(var(--spacings-s10) - 1px) calc(var(--spacings-s10) - 1px);
1728 padding-inline-end: var(--chip-ia-pie, calc(var(--spacings-s10) - 1px)); } 1729 .chip--large .chip__icon-holder { flex: 0 0 20px; width: 20px; height: 20px; } 1730 .chip--large .chip__text { padding: var(--spacings-s0) var(--spacings-s2); } 1731 .chip--large .chip__badge { margin: 0 var(--spacings-s2); } 1732 .chip--large .chip__dismiss-button, .chip--large .chip__dismiss-icon { width: 40px; height: 40px; } 1733 .chip--large .chip__dismiss-icon { width: 20px; height: 20px; } 1734 .chip--small { height: 32px; border-width: 1px; border-radius: var(--corner-radius-r8); column-gap: var(--spacings-s2); font-weight: 600; font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); } 1735 .chip--small .chip__interactive-area { gap: var(--spacings-s2); padding: calc(var(--spacings-s6) - 1px) calc(var(--spacings-s6) - 1px); padding-inline-end: var(--chip-ia-pie, calc(var(--spacings-s6) - 1px)); } 1736 .chip--small .chip__icon-holder { flex: 0 0 20px; width: 20px; height: 20px; } 1737 .chip--small .chip__text { padding: var(--spacings-s0) var(--spacings-s2); } 1738 .chip--small .chip__badge { margin: 0 var(--spacings-s2); } 1739 .chip--small .chip__dismiss-button { width: 32px; height: 32px; } 1740 .chip--small .chip__dismiss-icon { width: 20px; height: 20px; } 1741 .chip__interactive-area { min-width: 0px; display: flex; align-items: center; visibility: var(--chip-ia-visibility, visible); } 1742 .chip__icon { display: block; width: 100%; height: 100%; } 1743 .chip__icon-holder { min-width: 0px; } 1744 .chip__icon-holder path { fill: var(--start-icon-color); transition: fill var(--timings-default) var(--easings-ease); } 1745 .chip__loading-icon { animation: chip-rotate var(--timings-long) var(--easings-linear) infinite; } 1746 .chip__loading-icon-layout { position: absolute; inset: 0px; margin: auto; fill: var(--end-icon-color); width: 24px; height: 24px; } 1747 .chip__text-wrap { min-width: 0px; flex-grow: 1; color: var(--text-color); text-align: center; word-break: break-all; } 1748 .chip__text { width: 100%; color: var(--text-color); text-align: center; word-break: break-all; max-width: 100%; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; transition: color var(--timings-default) var(--easings-ease); } 1749 .chip__badge { min-width: 0px; } 1750 .chip__dismiss-button { display: grid; place-items: center; min-width: 0px; cursor: pointer; } 1751 .chip__dismiss-icon path { fill: var(--end-icon-color); transition: fill var(--timings-default) var(--easings-ease); } 1752} 1753@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1754@layer ds-atoms { 1755 .checkbox { display: inline-flex; column-gap: var(--spacings-s2); padding: var(--spacings-s6) 0; color: var(--text-colors-base); } 1756 .checkbox__box { display: inline-block; vertical-align: top; position: relative; flex: 0 0 auto; width: 20px; height: 20px; } 1757 .checkbox__control { display: inline-block; vertical-align: top; position: absolute; inset: 0px; width: 100%; height: 100%; } 1758 .checkbox__control--pointer { cursor: pointer; } 1759 .checkbox__control--not-allowed { cursor: not-allowed; } 1760 .checkbox__icon { display: block; width: 100%; height: 100%; transition: color var(--timings-default) var(--easings-ease); } 1761 .checkbox__icon > path:not([fill]) { fill: currentcolor; } 1762 .checkbox__label { display: flex; align-items: center; padding: var(--spacings-s0) var(--spacings-s2); font-weight: 600; user-select: none; font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); } 1763 .checkbox__label--pointer { cursor: pointer; } 1764 .checkbox--default .checkbox__icon { color: var(--control-colors-start-icon-default); } 1765 @media (hover: hover) and (pointer: fine) { 1766 .checkbox--default-interactive:hover .checkbox__icon { color: var(--control-colors-start-icon-action); } 1767} 1768 @media (hover: none) and (pointer: coarse) { 1769 .checkbox--default-interactive:active .checkbox__icon { color: var(--control-colors-start-icon-action); } 1770} 1771 .checkbox--skin-primary.checkbox--active .checkbox__icon { color: var(--primary-colors-base-active); } 1772 .checkbox--skin-primary.checkbox--active .checkbox__icon > path[fill] { fill: var(--primary-colors-base-active); } 1773 @media (hover: hover) and (pointer: fine) { 1774 .checkbox--skin-primary.checkbox--active-interactive:hover .checkbox__icon { color: var(--primary-colors-base-active-action); } 1775 .checkbox--skin-primary.checkbox--active-interactive:hover .checkbox__icon > path[fill] { fill: var(--primary-colors-base-active-action); } 1776} 1777 @media (hover: none) and (pointer: coarse) { 1778 .checkbox--skin-primary.checkbox--active-interactive:active .checkbox__icon { color: var(--primary-colors-base-active-action); } 1779 .checkbox--skin-primary.checkbox--active-interactive:active .checkbox__icon > path[fill] { fill: var(--primary-colors-base-active-action); } 1780} 1781 .checkbox--skin-premium.checkbox--active .checkbox__icon { color: var(--monetization-ultra-colors-base-active); } 1782 .checkbox--skin-premium.checkbox--active .checkbox__icon > path[fill] { fill: var(--monetization-ultra-colors-base-active); } 1783 @media (hover: hover) and (pointer: fine) { 1784 .checkbox--skin-premium.checkbox--active-interactive:hover .checkbox__icon { color: var(--monetization-ultra-colors-base-active-action); } 1785 .checkbox--skin-premium.checkbox--active-interactive:hover .checkbox__icon > path[fill] { fill: var(--monetization-ultra-colors-base-active-action); } 1786} 1787 @media (hover: none) and (pointer: coarse) { 1788 .checkbox--skin-premium.checkbox--active-interactive:active .checkbox__icon { color: var(--monetization-ultra-colors-base-active-action); } 1789 .checkbox--skin-premium.checkbox--active-interactive:active .checkbox__icon > path[fill] { fill: var(--monetization-ultra-colors-base-active-action); } 1790} 1791 .checkbox--disabled { opacity: var(--states-disabled); } 1792} 1793@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1794@layer ds-atoms { 1795 .picsart-lockup { --picsart-lockup-brand-color: var(--brand-colors-default); --picsart-lockup-name-color: var(--brand-colors-dark); } 1796 html.dark .picsart-lockup { --picsart-lockup-name-color: var(--brand-colors-light); } 1797 .picsart-lockup__brand { fill: var(--picsart-lockup-brand-color); } 1798 .picsart-lockup__name { fill: var(--picsart-lockup-name-color); } 1799} 1800@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1801@layer ds-atoms { 1802 .tag { display: inline-flex; vertical-align: top; align-items: center; justify-content: center; gap: var(--spacings-s4); border-radius: var(--corner-radius-r16); padding: var(--spacings-s0) var(--spacings-s6); } 1803 .tag--size-large { height: 20px; } 1804 .tag--size-small { height: 14px; } 1805 .tag--size-small .tag__icon { width: 10px; height: 10px; } 1806 .tag--low-prio { gap: 0px; padding: 0px; border-radius: var(--corner-radius-circle); }
1807 .tag--low-prio.tag--size-large { width: 20px; min-width: 20px; } 1808 .tag--low-prio.tag--size-small { width: 14px; min-width: 14px; } 1809 .tag--skin-black { background-color: var(--absolute-black-colors-base-default); color: var(--absolute-black-colors-text-default); } 1810 .tag--skin-negative { background-color: var(--negative-colors-base-default); color: var(--negative-colors-text-default); } 1811 .tag--skin-primary { background: linear-gradient(90deg, rgb(194, 9, 193), rgb(247, 73, 246)); color: var(--primary-colors-text-default); } 1812 .tag--skin-error { background: linear-gradient(90deg, rgb(238, 52, 70), rgb(255, 97, 112)); color: var(--error-colors-text-default); } 1813 .tag--skin-info { background: linear-gradient(90deg, rgb(34, 175, 236), rgb(111, 212, 255)); color: var(--information-colors-text-default); } 1814 .tag--skin-warning { background: linear-gradient(90deg, rgb(255, 146, 30), rgb(255, 146, 30)); color: var(--warning-colors-text-default); } 1815 .tag--skin-success { background: linear-gradient(90deg, rgb(5, 208, 143), rgb(5, 208, 143)); color: var(--success-colors-text-default); } 1816 .tag--skin-plus { background: var(--gradients-monetization-plus); color: var(--monetization-plus-colors-text-default); } 1817 .tag--skin-pro { background: var(--gradients-monetization-pro); color: var(--monetization-pro-colors-text-default); } 1818 .tag--skin-ultra { background: var(--gradients-monetization-ultra); color: var(--monetization-ultra-colors-text-default); } 1819 .tag--mode-muted.tag--skin-black { background-color: var(--absolute-white-colors-base-default); color: var(--absolute-white-colors-text-default); } 1820 .tag--mode-muted.tag--skin-negative { background-color: var(--background-colors-tint-3); color: var(--text-colors-base); } 1821 .tag--mode-muted.tag--skin-primary { background: rgb(60, 27, 60); color: rgb(255, 71, 255); } 1822 .tag--mode-muted.tag--skin-error { background: rgb(64, 29, 32); color: rgb(255, 93, 109); } 1823 .tag--mode-muted.tag--skin-info { background: rgb(17, 38, 70); color: rgb(122, 215, 255); } 1824 .tag--mode-muted.tag--skin-warning { background: rgb(70, 43, 0); color: rgb(255, 185, 73); } 1825 .tag--mode-muted.tag--skin-success { background: rgb(20, 51, 41); color: rgb(65, 255, 195); } 1826 .tag--mode-muted.tag--skin-plus { background: rgb(72, 8, 79); color: rgb(239, 94, 255); } 1827 .tag--mode-muted.tag--skin-pro { background: rgb(49, 10, 113); color: rgb(183, 138, 255); } 1828 .tag--mode-muted.tag--skin-ultra { background: rgb(0, 71, 69); color: rgb(36, 199, 194); } 1829 .tag__text { color: inherit; font-size: var(--typography-t3-font-size); line-height: var(--typography-t3-line-height); } 1830 .tag__icon { width: 12px; height: 12px; } 1831 .tag__icon > path:not([fill]) { fill: currentcolor; } 1832} 1833@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1834@layer ds-molecules { 1835 .select { display: grid; grid-auto-flow: column; width: 100%; } 1836 .select__menu { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacings-s8); background-color: var(--background-colors-popover); border-radius: var(--spacings-s8); border: 1px solid var(--control-colors-border-default); overscroll-behavior: contain; }
1837 .select__menu--large, .select__menu--small { padding: calc(var(--spacings-s12) - 1px); } 1838 @media (pointer: fine) { 1839 .select__menu::-webkit-scrollbar { width: 4px; } 1840 .select__menu::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; margin-block: var(--spacings-s4); } 1841 .select__menu::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r4); background-color: var(--background-colors-border); } 1842 .select__menu::-webkit-scrollbar-corner { background: transparent; } 1843} 1844 @supports (-moz-appearance: none) { 1845 .select__menu { scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 1846} 1847 @media (hover: none) and (pointer: coarse) { 1848 .select__menu::-webkit-scrollbar { display: none; } 1849} 1850 .select__mobile-menu { display: flex; flex-direction: column; align-items: flex-start; padding: var(--spacings-s4) var(--spacings-s8); gap: var(--spacings-s8); } 1851 .select__invisible-content { visibility: hidden; opacity: 0; pointer-events: none; } 1852 .select__badges { display: inline-flex; align-items: center; margin-inline-start: auto; gap: var(--spacings-s8); padding-inline-start: var(--spacings-s4); } 1853 .select__badge { box-shadow: none; } 1854} 1855@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1856@layer ds-atoms { 1857 .slider { --track-height: 4px; --track-filled-height: calc(var(--track-height) / 2); --thumb-size: 16px; --thumb-border-width: var(--slider-thumb-border-width, 0); --mark-thumb-size: 8px; position: relative; display: grid; align-items: center; width: 100%; height: calc(var(--thumb-size) + 2 * var(--spacings-s8)); } 1858 .slider--centered::before { content: ""; position: absolute; width: var(--mark-thumb-size); height: var(--mark-thumb-size); border: 1px solid var(--control-colors-border-default); background: var(--control-colors-slider-thumb-default); border-radius: var(--corner-radius-circle); box-sizing: border-box; pointer-events: none; top: 50%; z-index: 1; } 1859 [dir="ltr"] .slider--centered::before { left: 50%; transform: translate(-50%, -50%); } 1860 [dir="rtl"] .slider--centered::before { right: 50%; transform: translate(50%, -50%); } 1861 .slider--disabled { pointer-events: none; opacity: var(--states-disabled); } 1862 .slider__content-wrap { position: relative; height: 100%; } 1863 .slider__progress { display: grid; grid-area: 1 / 1; height: var(--track-filled-height); margin: var(--spacings-s0); margin-inline-end: var(--slider-track-inner-x-gap, var(--thumb-size)); border-radius: var(--corner-radius-r4); pointer-events: none; overflow: hidden; } 1864 .slider__progress--continuous::before { content: ""; grid-area: 1 / 1; background: var(--control-colors-slider-track-default); will-change: transform; } 1865 [dir="ltr"] .slider__progress--continuous::before { transform: var(--slider-progress-transform-ltr, translateX(-100%)); } 1866 [dir="rtl"] .slider__progress--continuous::before { transform: var(--slider-progress-transform-rtl, translateX(100%)); } 1867 .slider__progress--centered-grid { grid-template-columns: repeat(2, 1fr); } 1868 .slider__progress-side { display: grid; overflow: hidden; } 1869 .slider__progress-side::before { background: var(--control-colors-slider-track-default); will-change: transform; } 1870 .slider__progress-side--start::before { content: var(--slider-progress-start-content, none); } 1871 [dir="ltr"] .slider__progress-side--start::before { transform: var(--slider-progress-start-transform-ltr); } 1872 [dir="rtl"] .slider__progress-side--start::before { transform: var(--slider-progress-start-transform-rtl); } 1873 .slider__progress-side--end::before { content: var(--slider-progress-end-content, none); } 1874 [dir="ltr"] .slider__progress-side--end::before { transform: var(--slider-progress-end-transform-ltr); } 1875 [dir="rtl"] .slider__progress-side--end::before { transform: var(--slider-progress-end-transform-rtl); } 1876 .slider__marks-wrap { display: grid; grid-area: 1 / 1; height: var(--mark-thumb-size); pointer-events: none; } 1877 .slider__marks-wrap--centered { grid-template-columns: repeat(2, 1fr); } 1878 .slider__mark-side { position: relative; } 1879 .slider__mark { position: absolute; width: var(--mark-thumb-size); height: var(--mark-thumb-size); border: 1px solid var(--control-colors-border-default); background: var(--control-colors-slider-thumb-default); border-radius: var(--corner-radius-circle); box-sizing: border-box; pointer-events: none; } 1880 .slider__mark--continuous { top: 50%; } 1881 [dir="ltr"] .slider__mark--continuous { left: var(--x); transform: translate(calc(-1 * var(--x))) translateY(-50%); } 1882 [dir="rtl"] .slider__mark--continuous { right: var(--x); transform: translate(calc(var(--x))) translateY(-50%); } 1883 .slider__mark--centered { top: var(--spacings-s0); } 1884 [dir="ltr"] .slider__mark--centered { left: var(--x); transform: translate(calc(-1 * var(--x))); } 1885 [dir="rtl"] .slider__mark--centered { right: var(--x); transform: translate(calc(var(--x))); } 1886 .slider__mark--disabled { background: var(--control-colors-border-default); } 1887 .slider__wrap { display: grid; align-items: center; width: 100%; height: 100%; } 1888 .slider__wrap::before { content: ""; display: block; position: absolute; top: 50%; left: var(--spacings-s0); right: var(--spacings-s0); transform: translateY(-50%); background: var(--slider-track-bg, var(--control-colors-border-default)); height: var(--track-height); border-radius: var(--corner-radius-r4); } 1889 .slider__input { position: relative; grid-area: 1 / 1; width: 100%; height: 100%; background: transparent; appearance: none; z-index: 1; }
1890 .slider__input::-webkit-slider-thumb { width: var(--thumb-size); height: var(--thumb-size); box-shadow: 0 0 0 var(--thumb-border-width) var(--control-colors-slider-thumb-default) inset; border-radius: var(--corner-radius-circle); filter: drop-shadow(rgba(0, 0, 0, 0.24) 0px 0px 4px); appearance: none; transition: box-shadow var(--timings-default); cursor: pointer; background-image: ; background-position-x: ; background-position-y: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: var(--slider-thumb-bg-size, auto); } 1891 [dir="ltr"] .slider__input::-webkit-slider-thumb { background-position: var(--slider-thumb-bg-position-ltr, 0%); } 1892 [dir="rtl"] .slider__input::-webkit-slider-thumb { background-position: var(--slider-thumb-bg-position-rtl, 0%); } 1893 .slider__input::-webkit-slider-thumb:hover { box-shadow: 0 0 0 1px var(--control-colors-border-action) inset; } 1894 .slider__input:active::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--control-colors-border-active) inset; } 1895} 1896@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 1897@layer ds-atoms { 1898 .image-frame { position: relative; display: inline-grid; overflow: hidden; width: var(--imageframe-width); height: var(--imageframe-height); border-radius: var(--imageframe-border-radius, 0); } 1899 .image-frame::before { content: ""; position: absolute; inset: 0px; z-index: 1; border: 1px solid var(--background-colors-tint-2); border-radius: var(--imageframe-border-radius, 0); opacity: 0; transition: opacity var(--timings-default) var(--easings-ease); pointer-events: none; } 1900 .image-frame--bg { background-color: var(--background-colors-tint-1); } 1901 .image-frame--interactive { cursor: pointer; } 1902 .image-frame--interactive::before { opacity: 1; } 1903 @media (hover: hover) and (pointer: fine) { 1904 .image-frame--interactive:hover::before { opacity: 0; } 1905} 1906 .image-frame--active-border::before { border-color: var(--primary-colors-base-default); } 1907 @media (hover: hover) and (pointer: fine) { 1908 .image-frame--active-border:hover::before { opacity: 0.7; } 1909} 1910 .image-frame--transparent { background-image: conic-gradient(var(--background-colors-tint-1) 90deg,var(--background-colors-tint-3) 0 180deg,var(--background-colors-tint-1) 0 270deg,var(--background-colors-tint-3) 0); background-size: 8px 8px; background-clip: content-box; padding: var(--spacings-s2); } 1911 .image-frame--disabled { opacity: var(--states-disabled); pointer-events: none; } 1912 .image-frame__content { grid-area: 1 / 1; min-height: 0px; min-width: 0px; pointer-events: none; } 1913 .image-frame__content * { pointer-events: initial; } 1914} 1915</style> 1916 <style data-prerender-css data-original-href="/assets/picsart-rc-vendor-CsIoZm_u.css"> 1917.AuthCard-root-c4e85 { position: relative; max-width: 416px; height: 540px; border-radius: var(--corner-radius-r16); background-color: var(--positive-colors-base-default); box-shadow: 0 4px 16px var(--background-colors-tint-3); overflow: hidden; } 1918@media screen and (max-width: 768px) { 1919 .AuthCard-root-c4e85 { height: 100%; } 1920} 1921.AuthMedia-root-464de { --auth-media-progress-height: 2px; position: relative; display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; border-radius: var(--corner-radius-r16); overflow: hidden; } 1922.AuthMedia-media-b55ce.AuthMedia-media-b55ce { position: absolute; inset: 0px; height: 100%; width: 100%; object-fit: cover; object-position: center center; display: block; opacity: 0; transition: opacity 0.32s ease-out; } 1923.AuthMedia-poster-24241.AuthMedia-poster-24241 { z-index: 0; opacity: 1; transition: none; } 1924video.AuthMedia-mediavideo-5c079.AuthMedia-media-b55ce { z-index: 1; } 1925.AuthMedia-mediaLoaded-a9f4d.AuthMedia-mediaLoaded-a9f4d { opacity: 1; } 1926@media (prefers-reduced-motion: reduce) { 1927 .AuthMedia-media-b55ce.AuthMedia-media-b55ce { opacity: 1; transition: none; } 1928} 1929.AuthMedia-skeleton-fbfad { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } 1930.AuthMedia-card-d119c { position: absolute; left: var(--spacings-s12); bottom: calc(var(--spacings-s12) + var(--auth-media-progress-height) + var(--spacings-s12)); display: flex; align-items: center; gap: var(--spacings-s8); min-width: 0px; max-width: calc(100% - var(--spacings-s24)); padding: var(--spacings-s8); padding-inline-end: var(--spacings-s16); border-radius: var(--corner-radius-r12); background: var(--background-colors-popover); } 1931.AuthMedia-cardIcon-9f58a.AuthMedia-cardIcon-9f58a { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--corner-radius-r12); object-fit: cover; } 1932.AuthMedia-cardText-bf90f { display: flex; flex-direction: column; gap: var(--spacings-s2); min-width: 0px; } 1933.AuthMedia-cardTitle-6d136.AuthMedia-cardTitle-6d136 { color: var(--text-colors-base); } 1934.AuthMedia-cardDescription-4ea8b.AuthMedia-cardDescription-4ea8b { color: var(--text-colors-tint-1); } 1935.AuthMedia-progress-a290d { position: absolute; bottom: var(--spacings-s12); left: var(--spacings-s12); right: var(--spacings-s12); display: flex; gap: var(--spacings-s4); } 1936.AuthMedia-segment-13c7c { flex: 1 1 0%; height: var(--auth-media-progress-height); padding: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: var(--corner-radius-r4); background: rgba(255, 255, 255, 0.35); cursor: pointer; overflow: hidden; } 1937.AuthMedia-segmentFill-8baf3 { display: block; height: 100%; width: 100%; border-radius: inherit; background: rgba(255, 255, 255, 0.95); transform: scaleX(0); transform-origin: left center; will-change: transform; } 1938.AuthMedia-segmentFill-8baf3[data-active="true"] { transition: transform 0.26s linear; } 1939@media (prefers-reduced-motion: reduce) { 1940 .AuthMedia-segmentFill-8baf3.AuthMedia-segmentFill-8baf3 { transition: none; } 1941} 1942.withAuthModal-root-6de60 { position: relative; display: flex; flex-direction: row-reverse; justify-content: space-between; } 1943.withAuthModal-root-6de60[data-media-position="left"] { flex-direction: row; } 1944.withAuthModal-root-6de60 { align-items: center; max-height: 100dvh; height: 540px; width: 830px; max-width: 100%; border-radius: var(--corner-radius-r20); padding: var(--spacings-s8); background: var(--background-colors-base); border: 1px solid var(--control-colors-border-default); box-sizing: border-box; box-shadow: var(--shadows-tint-1); overflow-x: hidden; } 1945.withAuthModal-root-6de60 > div { width: 50%; } 1946.withAuthModal-root-6de60 img { height: 536px; width: 408px; } 1947@media screen and (max-width: 768px) { 1948 .withAuthModal-root-6de60 { position: absolute; top: var(--spacings-s0); left: var(--spacings-s0); justify-content: center; width: 100%; max-width: none; height: 100dvh; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; box-shadow: none; border-radius: var(--corner-radius-r0); } 1949 .withAuthModal-root-6de60 > div { width: 100%; } 1950}
1951.withAuthModal-modalCloseWrapper-55da0.withAuthModal-modalCloseWrapper-55da0 { display: inline-block; width: initial; z-index: 1; padding: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: none; } 1952.withAuthModal-image-f6d62 { display: flex; align-items: center; justify-content: center; height: 100%; border-radius: var(--corner-radius-r20); overflow: hidden; position: relative; } 1953@media (max-width: 768px) { 1954 .withAuthModal-image-f6d62 { display: none; } 1955} 1956.withAuthModal-skeleton-ff27a { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } 1957.withAuthModal-closeButton-fcc8b { position: absolute; top: var(--spacings-s12); right: var(--spacings-s12); cursor: pointer; fill: var(--negative-colors-text-default); } 1958@media (max-width: 768px) { 1959 .withAuthModal-closeButton-fcc8b.withAuthModal-closeButton-fcc8b { z-index: 9; fill: var(--positive-colors-text-default); } 1960} 1961.withAuthModal-root-6de60[data-media-position="left"] .withAuthModal-closeButton-fcc8b { fill: var(--positive-colors-text-default); } 1962@media (max-width: 768px) { 1963 .withAuthModal-root-6de60[data-media-position="left"] .withAuthModal-closeButton-fcc8b { fill: var(--negative-colors-text-default); } 1964} 1965.withAuthModal-pulseContainer-84333 { position: absolute; } 1966.withAuthModal-overlay-5dd2b.withAuthModal-overlay-5dd2b { background: var(--background-colors-transparent); backdrop-filter: blur(24px); } 1967@keyframes withAuthModal-overlay-fade-in-01bf1 { 1968 0% { opacity: 0; } 1969 100% { opacity: 1; } 1970} 1971@media (prefers-reduced-motion: reduce) { 1972 .withAuthModal-root-3367f.withAuthModal-root-3367f { animation: auto ease 0s 1 normal none running none; } 1973} 1974.withAuthModal-root-3367f { --auth-modal-padding: var(--spacings-s12); --auth-panel-padding: var(--spacings-s12); --auth-corner-inset: calc(var(--auth-modal-padding) + var(--auth-panel-padding)); position: relative; display: flex; flex-direction: row-reverse; justify-content: space-between; } 1975.withAuthModal-root-3367f[data-media-position="left"] { flex-direction: row; } 1976.withAuthModal-root-3367f { align-items: stretch; height: min(656px,54.6666666667vw,100dvh - var(--spacings-s24)); width: calc(min(656px,54.6666666667vw,100dvh - var(--spacings-s24)) * 1030 / 656); min-height: 500px; max-width: 1030px; border-radius: var(--corner-radius-r16); padding: var(--auth-modal-padding); background: var(--background-colors-base); border: 1px solid var(--control-colors-border-default); box-sizing: border-box; box-shadow: var(--shadows-tint-1); overflow: hidden; animation: 0.2s cubic-bezier(0, 0, 0.2, 1) 0s 1 normal none running withAuthModal-overlay-fade-in-01bf1; } 1977.withAuthModal-root-3367f > div { width: 50%; } 1978@media screen and (max-width: 834px) { 1979 .withAuthModal-root-3367f > div { width: 100%; } 1980} 1981@media screen and (max-width: 768px) { 1982 .withAuthModal-root-3367f { position: absolute; top: var(--spacings-s0); left: var(--spacings-s0); justify-content: center; width: 100%; max-width: none; height: 100dvh; min-height: 0px; max-height: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; box-shadow: none; border-radius: var(--corner-radius-r0); } 1983 .withAuthModal-root-3367f > div { width: 100%; } 1984} 1985.withAuthModal-modalCloseWrapper-bf4c4.withAuthModal-modalCloseWrapper-bf4c4 { position: absolute; top: var(--auth-corner-inset); right: var(--auth-corner-inset); z-index: 1; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0px; border-radius: 50%; background: var(--neutral-colors-base-default); border: 1px solid var(--control-colors-border-default); cursor: pointer; } 1986.withAuthModal-image-ee310 { display: flex; align-items: center; justify-content: center; align-self: stretch; border-radius: var(--corner-radius-r16); overflow: hidden; position: relative; } 1987@media (max-width: 834px) { 1988 .withAuthModal-image-ee310 { display: none; } 1989} 1990.withAuthModal-skeleton-e2535 { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } 1991.withAuthModal-closeButton-458b5 { cursor: pointer; fill: var(--text-colors-base); stroke: var(--text-colors-base); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; } 1992.withAuthModal-pulseContainer-401b9 { position: absolute; } 1993.AuthForm-root-d6c75 { height: 100%; }
1994.AuthForm-scrollable-cbf9f { overflow-y: scroll; } 1995@media (hover: hover) and (pointer: fine) { 1996 .AuthForm-scrollable-cbf9f::-webkit-scrollbar { width: 4px; } 1997 .AuthForm-scrollable-cbf9f::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; } 1998 .AuthForm-scrollable-cbf9f::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r4); background-color: var(--background-colors-border); } 1999 .AuthForm-scrollable-cbf9f::-webkit-scrollbar-corner { background: transparent; } 2000} 2001@supports (-moz-appearance: none) { 2002 .AuthForm-scrollable-cbf9f { scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 2003} 2004@media (hover: none) and (pointer: coarse) { 2005 .AuthForm-scrollable-cbf9f::-webkit-scrollbar { display: none; } 2006} 2007.Footer-root-6b75a { display: flex; gap: var(--spacings-s16); align-content: end; padding-top: var(--spacings-s6); width: 100%; } 2008.TopBackButton-root-beec4 { display: flex; justify-content: flex-start; flex-shrink: 0; } 2009.TopBackButton-button-16752.TopBackButton-button-16752.TopBackButton-button-16752.TopBackButton-button-16752 { display: flex; align-items: center; justify-content: center; width: 34px; min-width: initial; height: 34px; padding: 0px; border-radius: 50%; background: var(--neutral-colors-base-default); border: 1px solid var(--control-colors-border-default); color: var(--text-colors-base); } 2010.TopBackButton-button-16752.TopBackButton-button-16752.TopBackButton-button-16752.TopBackButton-button-16752 svg { width: 15px; height: 15px; stroke: currentcolor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; } 2011.TopBackButton-button-16752.TopBackButton-button-16752.TopBackButton-button-16752.TopBackButton-button-16752:hover { background: var(--neutral-colors-base-action); } 2012.NoInternet-root-00830 { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } 2013.NoInternet-formContent-2fe85 { display: grid; gap: var(--spacings-s16); } 2014.NoInternet-passwordField-5a2b9 { width: 100%; } 2015.NoInternet-rootNewDesign-4c82b { justify-content: flex-start; } 2016.NoInternet-content-a4cad { display: flex; flex-direction: column; justify-content: safe center; flex: 1 1 auto; min-height: 0px; gap: var(--spacings-s24); padding: var(--spacings-s0) var(--spacings-s32); overflow-y: auto; scrollbar-width: none; } 2017.NoInternet-content-a4cad::-webkit-scrollbar { display: none; } 2018@media screen and (max-width: 768px) { 2019 .NoInternet-content-a4cad { padding: var(--spacings-s0); } 2020} 2021.PicsartLegal-root-bba81 { max-width: 320px; margin: var(--spacings-s0) auto; } 2022.PicsartLegal-root-bba81 a { font-weight: 600; color: var(--primary-colors-base-default); } 2023.PicsartLegal-root-bba81 a:hover { color: var(--primary-colors-base-active-action); } 2024.PicsartLegal-link-fe0cb { font-weight: 600; color: var(--primary-colors-base-default); } 2025.PicsartLegal-link-fe0cb:hover { color: var(--primary-colors-base-active-action); } 2026.AppleButton-button-dff86 { overflow: hidden; } 2027.GoogleButton-googleSignInWrapper-6f97a { overflow: hidden; position: relative; width: 100%; } 2028.GoogleButton-googleSignInVisual-9365a { pointer-events: none; height: 100%; z-index: 2; } 2029.GoogleButton-googleNativeButton-4bca9 { top: 0px; left: 0px; position: absolute; height: 100%; width: 100%; overflow: hidden; opacity: 0.001; } 2030.GoogleButton-googleNativeButton-4bca9 > div { margin-top: var(--spacings-s4); height: 100%; } 2031.GoogleButton-googleNativeButton-4bca9 > div div:last-child { margin-top: var(--spacings-s4); height: 100%; } 2032.GoogleButton-googleNativeButton-4bca9:hover + .GoogleButton-googleSignInVisual-9365a > .google-new-button { background-color: var(--neutral-colors-base-action); color: var(--neutral-colors-text-action); } 2033.AuthButtons-root-baf3b { display: grid; gap: var(--spacings-s8); } 2034.AuthButtons-socialButton-a4c6d { position: relative; padding-left: var(--spacings-s44); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 2035.AuthButtons-socialButton-a4c6d > svg { position: absolute; left: var(--spacings-s12); } 2036.AuthButtons-facebookButton-bb2c1 > svg { color: var(--absolute-white-colors-base-default); } 2037.AuthButtons-divider-0e8a9 { display: flex; justify-content: center; align-items: center; color: var(--text-colors-tint-2); text-transform: uppercase; } 2038.AuthButtons-divider-0e8a9::after, .AuthButtons-divider-0e8a9::before { content: ""; display: block; background-color: var(--background-colors-tint-3); width: 32px; height: 1px; margin: var(--spacings-s0) var(--spacings-s8); } 2039.OptionsForm-root-d2fb6 { display: grid; gap: var(--spacings-s16); text-align: center; } 2040.OptionsForm-divider-ab6db { display: flex; justify-content: center; align-items: center; color: var(--text-colors-tint-2); text-transform: uppercase; } 2041.OptionsForm-divider-ab6db::after, .OptionsForm-divider-ab6db::before { content: ""; display: block; background-color: var(--background-colors-tint-3); width: 32px; height: 1px; margin: var(--spacings-s0) var(--spacings-s8); } 2042.OptionsForm-rootNewDesign-acab8.OptionsForm-rootNewDesign-acab8 { display: flex; flex-direction: column; height: 100%; padding: var(--spacings-s0); text-align: left; } 2043.OptionsForm-contentNewDesign-e4dbf { display: flex; flex-direction: column; justify-content: safe center; flex: 1 1 auto; min-height: 0px; gap: var(--spacings-s16); padding: var(--spacings-s0) var(--spacings-s32); overflow-y: auto; scrollbar-width: none; } 2044.OptionsForm-contentNewDesign-e4dbf::-webkit-scrollbar { display: none; } 2045@media screen and (max-width: 768px) { 2046 .OptionsForm-contentNewDesign-e4dbf { padding: var(--spacings-s0); } 2047} 2048.OptionsForm-legalNewDesign-16214 { flex-shrink: 0; padding: var(--spacings-s0) var(--spacings-s32); } 2049.OptionsForm-legalNewDesign-16214 > span { max-width: none; margin-inline: var(--spacings-s0); font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); } 2050@media screen and (min-width: 833px) and (max-width: 1030px) { 2051 .OptionsForm-legalNewDesign-16214 > span { font-size: var(--typography-t3-font-size); line-height: var(--typography-t3-line-height); } 2052} 2053@media screen and (max-width: 768px) { 2054 .OptionsForm-legalNewDesign-16214 { padding: var(--spacings-s0); } 2055} 2056.RecentLoginMethods-root-c38fc { display: grid; gap: var(--spacings-s24); text-align: center; align-content: center; height: 100%; } 2057.RecentLoginMethods-options-a698f { display: grid; gap: var(--spacings-s8); } 2058.RecentLoginMethods-rootNewDesign-05033.RecentLoginMethods-rootNewDesign-05033 { display: flex; flex-direction: column; padding: var(--spacings-s0); text-align: left; } 2059.RecentLoginMethods-contentNewDesign-c28c9 { display: flex; flex-direction: column; justify-content: safe center; flex: 1 1 auto; min-height: 0px; gap: var(--spacings-s24); padding: var(--spacings-s0) var(--spacings-s32); overflow-y: auto; scrollbar-width: none; } 2060.RecentLoginMethods-contentNewDesign-c28c9::-webkit-scrollbar { display: none; } 2061@media screen and (max-width: 768px) { 2062 .RecentLoginMethods-contentNewDesign-c28c9 { padding: var(--spacings-s0); } 2063} 2064.RecentLoginMethods-legalNewDesign-65c94 { flex-shrink: 0; padding: var(--spacings-s0) var(--spacings-s32); } 2065.RecentLoginMethods-legalNewDesign-65c94 > span { max-width: none; margin-inline: var(--spacings-s0); font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); } 2066@media screen and (min-width: 833px) and (max-width: 1030px) { 2067 .RecentLoginMethods-legalNewDesign-65c94 > span { font-size: var(--typography-t3-font-size); line-height: var(--typography-t3-line-height); } 2068} 2069@media screen and (max-width: 768px) { 2070 .RecentLoginMethods-legalNewDesign-65c94 { padding: var(--spacings-s0); } 2071} 2072.FormContainer-root-70531 { display: block; width: 100%; height: 100%; background-color: var(--background-colors-base); padding: var(--spacings-s48) var(--spacings-s32) var(--spacings-s16); overflow-y: hidden; } 2073@media (hover: none) and (pointer: coarse) { 2074 .FormContainer-root-70531 input { font-size: var(--typography-t5-font-size); } 2075 .FormContainer-root-70531 input::placeholder { font-size: var(--typography-t5-font-size); } 2076} 2077.FormContainer-rootNewDesign-699d4.FormContainer-rootNewDesign-699d4 { box-sizing: border-box; padding: var(--auth-panel-padding, var(--spacings-s12)); display: flex; flex-direction: column; align-self: stretch; height: auto; min-height: 0px; } 2078.FormContainer-rootNewDesign-699d4 > form { flex: 1 1 auto; min-height: 0px; height: auto; } 2079.FormContainer-rootNewDesign-699d4 .input-field-auth > input { border-radius: var(--corner-radius-r8); color: var(--control-colors-value-active); --text-field-bg-override: var(--control-colors-field-background-default); } 2080.FormContainer-rootNewDesign-699d4 .input-field-auth > input::placeholder { color: var(--control-colors-placeholder-default); } 2081.FormContainer-rootNewDesign-699d4 .input-field-auth > input:hover { --text-field-bg-override: var(--control-colors-field-background-action); } 2082.FormContainer-rootNewDesign-699d4 .input-field-auth > input:-webkit-autofill, .FormContainer-rootNewDesign-699d4 .input-field-auth > input:-webkit-autofill:hover { box-shadow: 0 0 0 1000px var(--control-colors-field-background-default) inset; -webkit-text-fill-color: var(--control-colors-value-active); } 2083.FormContainer-rootNewDesign-699d4 .input-field-auth >
2083 input:-webkit-autofill:focus, .FormContainer-rootNewDesign-699d4 .input-field-auth > input:-webkit-autofill:active { box-shadow: 0 0 0 1000px var(--control-colors-field-background-active) inset; -webkit-text-fill-color: var(--control-colors-value-active); caret-color: var(--control-colors-caret-default); } 2084.FormContainer-rootNewDesign-699d4 .input-field-auth > input:focus, .FormContainer-rootNewDesign-699d4 .input-field-auth > input:active { --text-field-bg-override: var(--control-colors-field-background-active); caret-color: var(--control-colors-caret-default); } 2085.FormContainer-rootNewDesign-699d4 .input-field-auth > button { color: var(--control-colors-end-icon-default); } 2086.FormContainer-rootNewDesign-699d4 .input-field-auth > button:hover { color: var(--control-colors-end-icon-active); } 2087.FormContainer-rootNewDesign-699d4 .auth-form-footer { flex-shrink: 0; padding-top: var(--spacings-s0); } 2088.FormContainer-rootNewDesign-699d4 .auth-intro { display: grid; gap: var(--spacings-s12); } 2089.FormContainer-rootNewDesign-699d4 .auth-description { color: var(--text-colors-tint-1); } 2090.FormContainer-rootNewDesign-699d4 .auth-field-label { text-align: start; } 2091.FormContainer-rootNewDesign-699d4 .auth-field-message { display: flex; align-items: center; gap: var(--spacings-s4); min-height: 16px; text-align: start; } 2092.FormContainer-rootNewDesign-699d4 .auth-field-message-icon { flex-shrink: 0; } 2093.FormContainer-rootNewDesign-699d4 .auth-field-message-icon > path:not([fill]) { fill: var(--error-colors-base-default); } 2094.TopProfileContent-teamImg-8d1fd { width: 24px; height: 24px; min-width: 24px; border-radius: 100%; overflow: hidden; background-color: var(--background-colors-tint-3); margin-right: var(--spacings-s16); background-image: url("https://cdn140.picsart.com/96964700141004781209.png"); background-repeat: round; } 2095.UserActions-suggestionBox-a5c7f { overflow: auto; max-height: calc(-120px + 100vh); min-width: 330px; } 2096.UserActions-applyButtonContainer-b267d { padding: var(--spacings-s16); } 2097.UserActions-profileAnchor-649f3 { position: relative; } 2098.UserActions-profileMenuPortal-968c7 { position: absolute; top: 100%; right: 0px; width: 0px; height: 0px; } 2099.UserActions-profileMenuPortal-968c7 > * { top: 0px !important; left: auto !important; right: 0px !important; } 2100.AppSmartBanner-root-cff35 { width: 100%; background: var(--negative-colors-base-default); padding: var(--spacings-s8) 0; border-top: 1px solid var(--control-colors-border-default); border-bottom: 1px solid var(--control-colors-border-default); } 2101.AppSmartBanner-homepage-545d0 { background: var(--gradients-monetization-pro); } 2102.AppSmartBanner-homepage-545d0 .AppSmartBanner-logo-e7074 { background: var(--primary-colors-base-default); } 2103.AppSmartBanner-homepage-545d0 .AppSmartBanner-titlesecondary-65c65 { color: var(--negative-colors-text-default); } 2104.AppSmartBanner-container-1e9e3 { display: flex; justify-content: space-between; align-items: center; } 2105.AppSmartBanner-sticky-eb4d0 { position: fixed; top: var(--spacings-s0); z-index: 99; } 2106.AppSmartBanner-centerContainer-7c00a { display: flex; align-items: center; flex: 1 1 0%; } 2107.AppSmartBanner-logo-e7074 { margin-right: var(--spacings-s8); min-width: 50px; height: 50px; background: unset; display: grid; place-items: center; border-radius: var(--corner-radius-r8); } 2108.AppSmartBanner-logo-e7074 svg path { fill: var(--positive-colors-base-default); } 2109.AppSmartBanner-closeButton-2e387 { background: transparent; width: initial; fill: var(--positive-colors-base-action); margin-right: var(--spacings-s6); display: block; } 2110.AppSmartBanner-closeButton-2e387:hover { background: transparent; } 2111.AppSmartBanner-closeButton-2e387 > svg > path { fill: var(--positive-colors-base-action); } 2112.AppSmartBanner-titleContainer-25cb0 { display: flex; flex-direction: column; align-items: start; justify-content: start; } 2113.AppSmartBanner-titleContainer-25cb0 > span { text-align: left; } 2114.AppSmartBanner-title-26eda { display: block; font-weight: 600; font-size: var(--typography-t3-font-size); line-height: var(--typography-t3-line-height); color: var(--negative-colors-text-default); } 2115.AppSmartBanner-titlesecondary-65c65 { font-weight: 500; font-size: var(--typography-t3-font-size); line-height: var(--typography-t3-line-height); color: var(--text-colors-tint-2); } 2116.AppSmartBanner-root-63409 { width: 100%; background: var(--primary-colors-base-default); padding: var(--spacings-s8) 0; }
2117.AppSmartBanner-container-06537 { display: flex; justify-content: space-between; align-items: center; } 2118.AppSmartBanner-centerContainer-2e0d6 { display: flex; align-items: center; gap: var(--spacings-s16); justify-content: center; flex: 1 1 0%; min-width: 0px; cursor: pointer; } 2119@media (max-width: 768px) { 2120 .AppSmartBanner-centerContainer-2e0d6 { gap: var(--spacings-s16); } 2121} 2122.AppSmartBanner-bannerText-dbd1f a { color: var(--absolute-black-colors-base-default); text-decoration: underline; } 2123.AppSmartBanner-ctaButton-e5167 { flex-shrink: 0; } 2124.AppSmartBanner-countdown-6d7b1 { align-items: center; display: flex; flex-shrink: 0; gap: var(--spacings-s4); } 2125.AppSmartBanner-countdownPlaceholder-3fad5 { visibility: hidden; } 2126.AppSmartBanner-countdownValue-18957 { background: var(--absolute-black-colors-base-default); border-radius: var(--spacings-s8); color: var(--absolute-white-colors-base-default); font-variant-numeric: tabular-nums; padding: var(--spacings-s4); white-space: nowrap; } 2127.AppSmartBanner-countdownSeparator-a3620 { color: var(--absolute-black-colors-base-default); } 2128.AppSmartBanner-countdownText-4a739 { color: var(--absolute-black-colors-base-default); white-space: nowrap; } 2129@media (max-width: 768px) { 2130 .AppSmartBanner-countdownText-4a739 { display: none; } 2131} 2132@media (max-width: 360px) { 2133 .AppSmartBanner-countdown-6d7b1 { gap: var(--spacings-s2); } 2134 .AppSmartBanner-countdownValue-18957 { padding: var(--spacings-s2); } 2135} 2136.HeaderSectionRight-createExperimentButtonStyle-95f81 { margin-right: var(--spacings-s8); background: var(--primary-colors-base-default); color: var(--negative-colors-text-default); } 2137@media screen and (max-width: 500px) { 2138 .HeaderSectionRight-createExperimentButtonStyle-95f81 { margin-left: var(--spacings-s8); } 2139} 2140.HeaderSectionRight-monetizationButton-8418c { display: flex; align-items: center; background-color: var(--primary-colors-base-default); padding: var(--spacings-s10) var(--spacings-s16) var(--spacings-s10) var(--spacings-s48); color: var(--negative-colors-text-default); } 2141@media screen and (max-width: 1024px) { 2142 .HeaderSectionRight-monetizationButton-8418c { display: none; } 2143} 2144.HeaderSectionRight-monetizationButtonIcon-be707 { position: absolute; top: 50%; transform: translateY(-50%); height: 26px; left: 16px; } 2145.HeaderSectionRight-monetizationButtonIcon-be707 svg { fill: var(--negative-colors-text-default); } 2146.HeaderSectionRight-monetizationButtonWrapper-56197 { position: relative; margin-right: var(--spacings-s12); } 2147.HeaderSectionRight-searchIcon-9039e { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-right: var(--spacings-s12); background-color: var(--background-colors-tint-2); border-radius: var(--corner-radius-circle); } 2148@media screen and (max-width: 500px) { 2149 .HeaderSectionRight-searchIcon-9039e { margin-right: var(--spacings-s12); } 2150} 2151@media screen and (max-width: 500px) { 2152 .HeaderSectionRight-searchIconBraze-ffd31 { margin-right: 0px; } 2153} 2154.HeaderSectionRight-searchInput-a16ec { margin-right: var(--spacings-s12); } 2155@media screen and (max-width: 500px) { 2156 .HeaderSectionRight-searchInput-a16ec { margin-right: var(--spacings-s12); } 2157} 2158@media screen and (max-width: 500px) { 2159 .HeaderSectionRight-searchInputBraze-99641 { margin-right: 0px; } 2160} 2161.HeaderSectionRight-section-27baf { height: 100%; display: flex; align-items: center; justify-content: right; } 2162[dir="ltr"] .HeaderSectionRight-section-27baf { margin-left: auto; } 2163[dir="rtl"] .HeaderSectionRight-section-27baf { margin-right: auto; } 2164.HeaderSectionRight-user-469a9 { display: inline-block; } 2165.Logo-root-31f45 { display: block; padding: 0px; } 2166.Logo-root-31f45 .button__content { height: 24px; } 2167.Logo-mobileSmall-a63ab { padding: 0px 10px; } 2168.Logo-logo-4b7ca { display: block; width: 104px; height: 24px; user-select: none; } 2169.Logo-mobileLogo-ee347 { display: none; height: 28px; width: 28px; } 2170@media screen and (max-width: 580px) { 2171 .Logo-mobileSmall-a63ab .Logo-logo-4b7ca { display: none; } 2172 .Logo-mobileSmall-a63ab .Logo-mobileLogo-ee347 { display: block; } 2173} 2174.HeaderSkeleton-root-65376 { height: 80px; display: flex; flex-direction: column; box-shadow: rgb(242, 242, 242) 0px 1px; } 2175.HeaderSkeleton-content-e6c51 { display: flex; justify-content: flex-start; flex-direction: row; height: 80px; align-items: center; position: relative; } 2176.HeaderSkeleton-logoHolder-d0e73 { padding-top: 5px; padding-bottom: 5px; } 2177.HeaderSkeleton-mobileLogo-93f1c { display: none; height: 28px; width: 28px; } 2178.HeaderSkeleton-logo-b828f { width: 104px; height: 34px; margin-top: 5px; margin-left: 0px; } 2179.HeaderSkeleton-burgerHolder-c23e6 { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; position: absolute; top: 3px; bottom: 0px; margin: auto 0px; } 2180.HeaderSkeleton-burger-749ea { display: block; width: 24px; height: 24px; } 2181.HeaderSkeleton-burger-749ea > path { fill: var(--background-colors-tint-2); } 2182.HeaderSkeleton-mobileAppBanner-a249e { display: none; background: var(--background-colors-tint-2); width: 100%; height: 66px; } 2183.HeaderSkeleton-itemsPlaceholder-88ada { display: flex; margin-left: 48px; } 2184.HeaderSkeleton-itemPlaceholder-49657 { display: flex; height: 36px; margin-right: 16px; border-radius: 8px; width: 80px; } 2185.HeaderSkeleton-loginPlaceholder-953ba { position: absolute; right: 24px; width: 130px; height: 36px; border-radius: 8px; } 2186.HeaderSkeleton-mobile-16ebb .HeaderSkeleton-content-e6c51 { justify-content: center; flex-direction: column; align-items: flex-start; } 2187.HeaderSkeleton-mobile-16ebb .HeaderSkeleton-logo-b828f { margin-left: 40px; } 2188.HeaderSkeleton-mobile-16ebb .HeaderSkeleton-burgerHolder-c23e6 { display: flex; } 2189.HeaderSkeleton-mobile-16ebb .HeaderSkeleton-mobileAppBanner-a249e { display: block; } 2190.HeaderSkeleton-mobile-16ebb .HeaderSkeleton-itemsPlaceholder-88ada { display: none; } 2191@media screen and (max-width: 580px) { 2192 .HeaderSkeleton-mobileLogo-93f1c { display: block; } 2193 .HeaderSkeleton-logo-b828f { display: none; } 2194} 2195.BrazeContentCardsPopup-popupContainer-f225c { position: relative; height: 526px; } 2196@media screen and (max-width: 600px) { 2197 .BrazeContentCardsPopup-popupContainer-f225c { height: 450px; } 2198} 2199.BrazeContentCardsPopup-popupContainerEmpty-94134 { position: relative; } 2200.BrazeContentCardsPopup-brazePopup-9c4b8 { position: fixed; width: 340px; height: 484px; right: var(--spacings-s48); bottom: var(--spacings-s12); left: auto; top: auto; border: 2px solid var(--background-colors-tint-3); background-color: var(--background-colors-base); border-radius: var(--corner-radius-r8); overflow-x: hidden; z-index: 10; } 2201@media (hover: hover) and (pointer: fine) { 2202 .BrazeContentCardsPopup-brazePopup-9c4b8::-webkit-scrollbar { width: 14px; height: 14px; } 2203 .BrazeContentCardsPopup-brazePopup-9c4b8::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; margin-block: var(--spacings-s16); } 2204 .BrazeContentCardsPopup-brazePopup-9c4b8::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r4); background-color: var(--control-colors-border-default); background-clip: content-box; border: 5px solid transparent; } 2205 .BrazeContentCardsPopup-brazePopup-9c4b8::-webkit-scrollbar-corner { background: transparent; } 2206} 2207@supports (-moz-appearance: none) { 2208 .BrazeContentCardsPopup-brazePopup-9c4b8 { scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 2209} 2210@media (hover: none) and (pointer: coarse) { 2211 .BrazeContentCardsPopup-brazePopup-9c4b8::-webkit-scrollbar { display: none; } 2212} 2213@media screen and (max-width: 600px) { 2214 .BrazeContentCardsPopup-brazePopup-9c4b8 { width: 314px; height: 410px; right: var(--spacings-s2); } 2215} 2216.BrazeContentCardsPopup-popupHeader-30b3d { width: 340px; z-index: 3; position: fixed; transform: translateY(-2px); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; display: block; margin-left: -2px; background: var(--positive-colors-base-default); box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px; border-radius: var(--corner-radius-r8) var(--corner-radius-r8) var(--corner-radius-r0) var(--corner-radius-r0); padding: var(--spacings-s8) var(--spacings-s16); } 2217.BrazeContentCardsPopup-popupHeader-30b3d > button { height: 24px; width: 24px; } 2218.BrazeContentCardsPopup-popupHeader-30b3d > button:hover { background-color: var(--positive-colors-base-default); } 2219@media screen and (max-width: 600px) { 2220 .BrazeContentCardsPopup-popupHeader-30b3d { width: 314px; } 2221} 2222.BrazeContentCardsPopup-closePopup-0689c { position: absolute; top: 10px; right: var(--spacings-s12); } 2223.BrazeContentCardsPopup-brazeStart-89a56 { display: flex; align-items: center; font-weight: 700; font-size: var(--typography-t6-font-size); line-height: var(--typography-t6-line-height); } 2224.BrazeContentCardsPopup-brazeStart-89a56 span { padding-top: var(--spacings-s2); font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); border-radius: var(--corner-radius-circle); background-color: var(--primary-colors-base-default); color: var(--primary-colors-text-default); margin-left: var(--spacings-s12); margin-bottom: var(--spacings-s2); text-align: center; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; font-weight: 500; } 2225.BrazeContentCardsPopup-brazeContentWrapper-dd475 { position: relative; top: var(--spacings-s64); padding: var(--spacings-s0) var(--spacings-s6) var(--spacings-s2) var(--spacings-s16); } 2226@media screen and (max-width: 600px) { 2227 .BrazeContentCardsPopup-brazeContentWrapper-dd475 { padding: var(--spacings-s0) var(--spacings-s16) var(--spacings-s2) var(--spacings-s16); } 2228} 2229.BrazeContentCardsPopup-brazeContentBlock-3fa95 { border-radius: var(--corner-radius-r8); border: 2px solid var(--background-colors-tint-3); overflow: hidden; margin-bottom: var(--spacings-s16); } 2230.BrazeContentCardsPopup-brazeContentImage-1bda1 img { max-width: 100%; height: auto; display: block; } 2231.BrazeContentCardsPopup-cardClassicTemplate-10957 { display: flex; background-color: var(--background-colors-tint-2); } 2232.BrazeContentCardsPopup-cardClassicTemplate-10957 img { margin: var(--spacings-s12); min-width: 60px; max-width: 60px; } 2233.BrazeContentCardsPopup-cardClassicTemplate-10957 h4 { font-size: var(--typography-t5-font-size); line-height: var(--typography-t5-line-height); } 2234.BrazeContentCardsPopup-cardBannerTemplate-b403f img { max-width: 300px; display: block; } 2235.BrazeContentCardsPopup-cardBannerTemplate-b403f a { display: block; } 2236.BrazeContentCardsPopup-cardDefaultTemplate-56ad3 { display: block; min-height: 302px; } 2237.BrazeContentCardsPopup-brazeContent-b625e { background-color: var(--background-colors-tint-2); padding: var(--spacings-s12); } 2238.BrazeContentCardsPopup-brazeContent-b625e h4 { color: var(--text-colors-base); font-weight: 600; margin-bottom: var(--spacings-s4); } 2239.BrazeContentCardsPopup-brazeContent-b625e p { font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); font-weight: 500; color: var(--text-colors-tint-1); } 2240.BrazeContentCardsPopup-brazeContent-b625e a { display: inline-block; margin-top: 16px; color: var(--primary-colors-base-default); font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); font-weight: 600; } 2241.BrazeContentCardsPopup-line-0ada2 { width: 100%; height: 4px; border: 1px solid var(--primary-colors-base-default); background-color: var(--primary-colors-base-default); } 2242.BrazeContentCardsPopup-cardEmpty-877a2 { height: 480px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--spacings-s0) var(--spacings-s32); } 2243@media screen and (max-width: 600px) { 2244 .BrazeContentCardsPopup-cardEmpty-877a2 { width: 310px; height: 400px; } 2245} 2246.BrazeContentCardsPopup-cardEmpty-877a2 div { width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; margin-bottom: var(--spacings-s24); margin-top: var(--spacings-s24); background-color: var(--background-colors-tint-2); border-radius: var(--corner-radius-circle); } 2247.BrazeContentCardsPopup-cardEmpty-877a2 p { font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); color: var(--text-colors-tint-1); } 2248.BrazeContentCards-root-8ebaf { position: relative; margin-right: var(--spacings-s32); display: inline-block; } 2249@media screen and (max-width: 500px) { 2250 .BrazeContentCards-root-8ebaf { margin-right: var(--spacings-s12); margin-left: var(--spacings-s0); } 2251} 2252.BrazeContentCards-brazeImageWrapper-3efcf { position: relative; cursor: pointer; } 2253.BrazeContentCards-brazeImageWrapper-3efcf img { width: 24px; height: 24px; } 2254.BrazeContentCards-brazeImageWrapper-3efcf span { position: absolute; background-color: var(--primary-colors-alpha-20); border: 1px solid var(--primary-colors-text-default); width: 9px; height: 9px; right: 14px; top: var(--spacings-s12); border-radius: var(--corner-radius-circle); } 2255@media screen and (max-width: 500px) { 2256 .BrazeContentCards-brazeImageWrapper-3efcf span { width: 7px; height: 7px; } 2257} 2258.DropDown-root-4b44b { display: none; position: absolute; top: 100%; background-color: var(--positive-colors-base-default); border: 1px solid var(--control-colors-border-default); border-radius: var(--corner-radius-r12); box-shadow: var(--shadows-tint-2); overflow: hidden; z-index: 13; } 2259@media screen and (max-height: 1640px) { 2260 .DropDown-root-4b44b { max-height: calc(-120px + 100vh); overflow: auto; } 2261} 2262.DropDown-root-4b44b.navigation:not(.toRight) { padding: var(--spacings-s0) var(--spacings-s12); } 2263[dir="ltr"] .DropDown-root-4b44b.navigation:not(.toRight) { left: var(--spacings-s0); } 2264[dir="rtl"] .DropDown-root-4b44b.navigation:not(.toRight) { right: var(--spacings-s0); } 2265[dir="ltr"] .DropDown-root-4b44b.navigation:not(.toRight).isFullWidth { left: -180p
2265x; } 2266.DropDown-root-4b44b.optimized { padding: var(--spacings-s0) var(--spacings-s16) var(--spacings-s0) var(--spacings-s24); } 2267[dir="ltr"] .DropDown-root-4b44b.toRight { right: var(--spacings-s0); } 2268[dir="rtl"] .DropDown-root-4b44b.toRight { left: var(--spacings-s0); } 2269.DropDown-root-4b44b.toRight .has-see-more { padding-bottom: var(--spacings-s0); } 2270.DropDown-root-4b44b.profile { padding: var(--spacings-s8); border: 1px solid var(--control-colors-border-default); } 2271[dir="ltr"] .DropDown-root-4b44b.profile { right: var(--spacings-s0); } 2272[dir="rtl"] .DropDown-root-4b44b.profile { left: var(--spacings-s0); } 2273.ProfileMenuItem-root-96cd3 { padding: var(--spacings-s12) var(--spacings-s0) var(--spacings-s0); margin: var(--spacings-s12) var(--spacings-s0) var(--spacings-s0); border-top: 1px solid var(--control-colors-border-default); } 2274.ProfileMenuItem-button-07ba7 { font-weight: 500; font-size: var(--typography-t4-font-size); align-items: center; background: none; cursor: pointer; color: var(--text-colors-base); line-height: 1.42; gap: var(--spacings-s8); display: flex; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; width: 100%; } 2275.ProfileMenuItem-skeleton-8276c { border-radius: var(--corner-radius-r8); width: 100%; height: 32px; } 2276.ProfileMenuItem-label-32266 { text-align: start; flex-grow: 1; } 2277.ProfileMenuItem-arrowIcon-b02e5 { fill: var(--primary-colors-base-default); height: 24px; width: 24px; } 2278.ProfileMenuItem-startIcon-3dfeb { fill: var(--text-colors-tint-1); height: 24px; width: 24px; } 2279html.desktop { min-width: 1024px; } 2280body.no-scroll { height: 100vh; overflow: hidden; } 2281body header { z-index: 3; } 2282body footer { z-index: 3; } 2283a { text-decoration: none; } 2284a.korea-link { color: var(--primary-colors-base-default) !important; } 2285a.inline-link { display: contents; color: var(--primary-colors-base-default); transition: color var(--timings-default) var(--easings-ease-in-out); } 2286@media (hover: hover) and (pointer: fine) { 2287 a.inline-link:hover { color: var(--primary-colors-base-action); } 2288} 2289@media (hover: none) and (pointer: coarse) { 2290 a.inline-link:active { color: var(--primary-colors-base-action); } 2291} 2292span.colored { color: var(--primary-colors-base-default); } 2293.ProfileThemeSwitcher-root-60158 { display: flex; align-items: center; height: 44px; margin-bottom: var(--spacings-s2); } 2294.ProfileThemeSwitcher-icon-acb90 { width: 24px; height: 24px; fill: var(--text-colors-tint-1); flex-shrink: 0; } 2295[dir="ltr"] .ProfileThemeSwitcher-icon-acb90 { margin-right: var(--spacings-s24); } 2296[dir="rtl"] .ProfileThemeSwitcher-icon-acb90 { margin-left: var(--spacings-s24); } 2297.ProfileThemeSwitcher-label-43a42 { font-weight: 600; font-size: var(--typography-t5-font-size); color: var(--text-colors-tint-1); flex-grow: 1; } 2298.ProfileThemeSwitcher-segments-89e14 { flex-shrink: 0; } 2299.TopProfileContent-root-9ffa4 { width: 330px; white-space: nowrap; } 2300.TopProfileContent-root-9ffa4.mobile { width: 100%; } 2301.TopProfileContent-header-e04f8 { border: 1px solid var(--background-colors-tint-3); border-radius: var(--corner-radius-r8); padding: var(--spacings-s12); } 2302.TopProfileContent-userProfile-20208 { white-space: nowrap; }
2303.TopProfileContent-user-15ae9 { padding: var(--spacings-s16) var(--spacings-s12) var(--spacings-s24) var(--spacings-s12); } 2304@media (hover: hover) and (pointer: fine) { 2305 .TopProfileContent-user-15ae9:hover .TopProfileContent-userTitle-bed4a { color: var(--primary-colors-base-default); } 2306 .TopProfileContent-user-15ae9:hover svg > path { fill: var(--primary-colors-base-default); } 2307} 2308.TopProfileContent-userTitle-bed4a { display: block; height: 24px; font-weight: 600; font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); color: var(--text-colors-tint-1); } 2309.TopProfileContent-userArrowIcon-712e3 { display: inline-block; vertical-align: baseline; width: 12px; height: 12px; fill: var(--background-colors-tint-3); } 2310[dir="rtl"] .TopProfileContent-userArrowIcon-712e3 { transform: rotate(180deg); } 2311.TopProfileContent-text-527b1 { font-weight: 500; font-size: var(--typography-t5-font-size); white-space: initial; text-align: center; min-width: 270px; line-height: 1.42; } 2312.TopProfileContent-upgradeBtn-38fa5 { width: 100%; margin: var(--spacings-s8) var(--spacings-s0); } 2313.TopProfileContent-username-83e8a { margin-bottom: var(--spacings-s12); margin-top: var(--spacings-s8); text-align: center; } 2314.TopProfileContent-skeleton-7b49d { margin: var(--spacings-s8) var(--spacings-s0); border-radius: var(--corner-radius-r20); width: 100%; height: 40px; } 2315.TopProfileContent-userLink-9af87 { display: flex; flex-direction: row; align-items: center; height: 44px; margin-bottom: var(--spacings-s2); position: relative; font-weight: 600; font-size: var(--typography-t5-font-size); line-height: var(--typography-t6-line-height); transition: color var(--timings-default) var(--easings-ease-in-out); cursor: pointer; } 2316.TopProfileContent-userLink-9af87.default { color: var(--text-colors-tint-1); } 2317.TopProfileContent-userLink-9af87.log-out { color: var(--error-colors-base-default); width: 100%; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; } 2318.TopProfileContent-userLink-9af87.log-out:hover { color: var(--error-colors-base-action); } 2319@media (hover: hover) and (pointer: fine) { 2320 .TopProfileContent-userLink-9af87:hover { color: var(--primary-colors-base-default); } 2321} 2322@media (hover: none) and (pointer: coarse) { 2323 .TopProfileContent-userLink-9af87:focus { color: var(--primary-colors-base-default); } 2324} 2325.TopProfileContent-userLink-9af87:not(:hover):focus { color: var(--primary-colors-base-default); } 2326.TopProfileContent-userLink-9af87:last-child { margin-bottom: var(--spacings-s0); } 2327.TopProfileContent-userLinkIcon-19404 { display: inline-block; width: 24px; height: 24px; min-width: 24px; fill: var(--text-colors-tint-1); } 2328[dir="ltr"] .TopProfileContent-userLinkIcon-19404 { margin-right: var(--spacings-s24); } 2329[dir="rtl"] .TopProfileContent-userLinkIcon-19404 { margin-left: var(--spacings-s24); } 2330.TopProfileContent-userLogoutIcon-c2d34 { fill: var(--error-colors-base-default); } 2331[dir="ltr"] .TopProfileContent-userLogoutIcon-c2d34 { margin-right: var(--spacings-s24); } 2332[dir="rtl"] .TopProfileContent-userLogoutIcon-c2d34 { margin-left: var(--spacings-s24); } 2333.TopProfileContent-avatar-4f3fb { display: flex; justify-content: center; } 2334.TopProfileContent-contributorWrapper-9e42f { position: relative; padding: var(--spacings-s16) var(--spacings-s12); border-top: 1px solid var(--primary-colors-base-default); } 2335.TopProfileContent-contributorCollectiveLink-5b00f { text-decoration: none; } 2336.TopProfileContent-contributorCollectiveLink-5b00f:hover > div { color: var(--primary-colors-base-default); } 2337.TopProfileContent-contributorText-d5de9 { display: flex; flex-direction: row; align-items: center; font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); font-weight: 600; color: var(--negative-colors-text-default); transition: color var(--timings-default) var(--easings-ease-in-out); } 2338.TopProfileContent-contributorText-d5de9 > span { padding: var(--spacings-s8) var(--spacings-s12) var(--spacings-s6); margin-left: var(--spacings-s6); font-size: var(--typography-t5-font-size); line-height: var(--typography-t5-line-height); background-color: var(--negative-colors-base-default); text-transform: uppercase; color: var(--negative-colors-text-default); border-radius: var(--corner-radius-r16); transition: color var(--timings-default) var(--easings-ease-in-out); } 2339.TopProfileContent-team-8e414 { margin: var(--spacings-s16) var(--spacings-s0) var(--spacings-s24); padding: var(--spacings-s8) var(--spacings-s12); position: relative; cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background-color: transparent; text-align: left; } 2340.TopProfileContent-teamBottom-544ad { display: flex; align-items: center; } 2341.TopProfileContent-teamTop-e695f { margin-bottom: var(--spacings-s6); } 2342.TopProfileContent-teamImg-8d1fd { width: 24px; height: 24px; min-width: 24px; border-radius: 100%; overflow: hidden; background-color: var(--background-colors-tint-3); margin-right: var(--spacings-s16); background-image: url("https://cdn140.picsart.com/96964700141004781209.png"); background-repeat: round; } 2343.TopProfileContent-teamName-a4a11 { width: 160px; word-break: break-word; white-space: pre-line; overflow-wrap: break-word; } 2344.TopProfileContent-userLinkLabel-f5f89 { flex-grow: 1; } 2345.TopProfileContent-featureSection-8dc11 { padding: var(--spacings-s12) 0; } 2346.TopProfileContent-languageButton-ad509 { width: 100%; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; text-align: left; } 2347.TopProfileContent-languageArrow-20629 { fill: var(--primary-colors-base-default); height: 24px; width: 24px; flex-shrink: 0; } 2348.TopProfileContent-privacyChoicesButton-f6f7e { width: 100%; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; text-align: left; } 2349.TopProfileContent-privacyChoicesIcon-1361a { display: inline-block; width: 24px; height: 11.2px; min-width: 24px; } 2350[dir="ltr"] .TopProfileContent-privacyChoicesIcon-1361a { margin-right: var(--spacings-s24); } 2351[dir="rtl"] .TopProfileContent-privacyChoicesIcon-1361a { margin-left: var(--spacings-s24); } 2352.LanguageSwitcherPopup-content-4af62 { display: flex; flex-direction: column; width: 550px; max-width: 100%; padding: var(--spacings-s24) var(--spacings-s24) var(--spacings-s16); box-sizing: border-box; } 2353.LanguageSwitcherPopup-title-75834 { margin-bottom: var(--spacings-s16); } 2354.LanguageSwitcherPopup-columnsContainer-36355 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacings-s4); max-height: 400px; overflow: hidden auto; } 2355@media (hover: hover) and (pointer: fine) { 2356 .LanguageSwitcherPopup-columnsContainer-36355::-webkit-scrollbar { width: 2px; } 2357 .LanguageSwitcherPopup-columnsContainer-36355::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; } 2358 .LanguageSwitcherPopup-columnsContainer-36355::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r4); background-color: var(--background-colors-border); } 2359 .LanguageSwitcherPopup-columnsContainer-36355::-webkit-scrollbar-corner { background: transparent; } 2360} 2361@supports (-moz-appearance: none) { 2362 .LanguageSwitcherPopup-columnsContainer-36355 { scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 2363} 2364@media (hover: none) and (pointer: coarse) { 2365 .LanguageSwitcherPopup-columnsContainer-36355::-webkit-scrollbar { display: none; } 2366} 2367@media (max-width: 550px) { 2368 .LanguageSwitcherPopup-columnsContainer-36355 { grid-template-columns: 1fr; } 2369} 2370.LanguageSwitcherPopup-singleColumn-836f0 { grid-template-columns: 1fr; max-height: none; } 2371.LanguageSwitcherPopup-column-bc49c { display: flex; flex-direction: column; } 2372.LanguageSwitcherPopup-langButtonActive-3d23b { color: var(--primary-colors-base-active); } 2373.LanguageSwitcherPopup-langSpan-cd393 { text-align: left; width: 100%; display: block; font-weight: 600; } 2374.LanguageSwitcherPopup-footer-28ff8 { margin-top: auto; padding-top: var(--spacings-s16); flex-shrink: 0; } 2375.Profile-root-5a988 { display: flex; align-items: center; height: 100%; position: relative; } 2376.Profile-root-5a988 .profile { display: block; } 2377.Profile-button-4d1ef { position: relative; display: block; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background-color: transparent; transition-property: background-color, color; transition-duration: var(--timings-default); transition-timing-function: var(--easings-ease-in-out); cursor: pointer; } 2378[dir="ltr"] .Profile-button-4d1ef { padding-right: var(--spacings-s24); } 2379[dir="rtl"] .Profile-button-4d1ef { padding-left: var(--spacings-s24); } 2380@media (hover: hover) and (pointer: fine) { 2381 .Profile-button-4d1ef:hover avataricon > svg > path, .Profile-button-4d1ef:focus avataricon > svg > path { fill: var(--primary-colors-base-default); } 2382 .Profile-button-4d1ef:hover .Profile-icon-89d56, .Profile-button-4d1ef:focus .Profile-icon-89d56 { fill: var(--primary-colors-base-default); } 2383} 2384@media (hover: none) and (pointer: coarse) { 2385 .Profile-button-4d1ef:focus avataricon > svg > path { fill: var(--primary-colors-base-default); } 2386 .Profile-button-4d1ef:focus .Profile-icon-89d56 > svg > path { fill: var(--primary-colors-base-default); } 2387} 2388.Profile-button-4d1ef:active .Profile-imageOuterHolder-4c77f::before { transform: scale(1); opacity: 1; } 2389.Profile-icon-89d56 { display: inline-block; width: 12px; height: 12px; position: absolute; top: var(--spacings-s0); bottom: var(--spacings-s0); margin: auto var(--spacings-s0); transition-property: background-color, color; transition-duration: var(--timings-default); transition-timing-function: var(--easings-ease-in-out); } 2390[dir="ltr"] .Profile-icon-89d56 { right: var(--spacings-s8); } 2391[dir="rtl"] .Profile-icon-89d56 { left: var(--spacings-s8); } 2392.Profile-imageOuterHolder-4c77f { display: block; width: 40px; height: 40px; border-radius: var(--corner-radius-r8); position: relative; } 2393.Profile-imageOuterHolder-4c77f::before { content: ""; display: block; position: absolute; inset: -4px; margin: auto; border: 2px solid var(--background-colors-base); border-radius: var(--corner-radius-circle); opacity: 0; transform: scale(0.8); transition-property: opacity, transform; transition-duration: var(--timings-default); transition-timing-function: var(--easings-ease-in-out); } 2394.Profile-notificationCircle-5897a { width: 8px; height: 8px; background-color: var(--error-colors-base-active); border-radius: var(--corner-radius-circle); display: flex; position: absolute; right: var(--spacings-s0); bottom: var(--spacings-s4); } 2395.Profile-mobileButton-a30a5 { padding: var(--spacings-s0); } 2396.Profile-tooltip-2a1b3 { text-align: center; margin-left: -11px; max-width: 236px; } 2397.Profile-applyButtonContainer-a5670 { padding: var(--spacings-s16); } 2398.Button-root-bc2d0 { display: block; height: 40px; padding: var(--spacings-s0) var(--spacings-s12); border-radius: var(--corner-radius-r8); font-weight: 600; font-size: var(--typography-t4-font-size); white-space: nowrap; position: relative; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; transition-property: background-color, color; transition-duration: var(--timings-default); transition-timing-function: var(--easings-ease-in-out); cursor: pointer; } 2399.Button-root-bc2d0::before { content: ""; display: block; position: absolute; inset: -1px; z-index: -1; margin: auto; border-width: 2px; border-style: solid; border-color: transparent; border-radius: var(--corner-radius-r8); opacity: 0; transition-property: opacity, top, right, bottom, left; transition-duration: var(--timings-fast); transition-timing-function: var(--easings-ease-in-out); transform: translateZ(0px); } 2400.Button-root-bc2d0::first-letter { text-transform: capitalize; } 2401.Button-root-bc2d0.sign { background-color: rgb(38, 38, 38); color: var(--absolute-black-colors-text-default); } 2402.Button-root-bc2d0.sign::before { border-color: rgb(38, 38, 38); } 2403@media (hover: hover) and (pointer: fine) { 2404 .Button-root-bc2d0.sign:hover { background-color: rgb(38, 38, 38); } 2405} 2406@media (hover: none) and (pointer: coarse) { 2407 .Button-root-bc2d0.sign:active { background-color: rgb(38, 38, 38); } 2408} 2409.Button-root-bc2d0:active::before { inset: -4px; z-index: initial; opacity: 1; } 2410.AgeConfirmationPopup-wrapper-38a35 { display: grid; align-content: baseline; box-sizing: border-box; width: var(--rc-age-wrapper-width); max-height: 440px; padding: var(--spacings-s56) var(--spacings-s24); position: relative; background-color: var(--positive-colors-base-default); border-radius: var(--corner-radius-r16); box-shadow: 0 8px 20px var(--text-colors-tint-3); } 2411@media screen and (max-width: 768px) { 2412 .AgeConfirmationPopup-wrapper-38a35 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 326px; right: var(--spacings-s0); bottom: var(--spacings-s0); box-shadow: 0 8 0 var(--positive-colors-base-default); width: 100%; height: 100%; } 2413} 2414.AgeConfirmationPopup-wrapper-38a35 p { text-align: center; } 2415.AgeConfirmationPopup-image-5b409 { margin: var(--spacings-s0) auto var(--spacings-s24); width: 48px; height: 48px; } 2416.AgeConfirmationPopup-description-1c5d7 { margin-top: var(--spacings-s8); } 2417.AgeConfirmationPopup-description-1c5d7 a { color: var(--primary-colors-base-default); font-weight: 700; } 2418.AgeConfirmationPopup-note-b9780 { margin-top: var(--spacings-s8); }
2419.AgeConfirmationPopup-closeIcon-eb2ab { width: 20px; height: 20px; border-radius: 50%; background-color: var(--negative-colors-base-default); position: absolute; top: var(--spacings-s10); right: var(--spacings-s10); cursor: pointer; display: initial; } 2420.AgeConfirmationPopup-closeIconHidden-0366b { display: none; } 2421.AgeConfirmationPopup-buttonsHolder-abea5 { display: grid; margin-top: var(--spacings-s24); gap: var(--spacings-s8); } 2422.AgeConfirmationPopup-buttonsHolder-abea5 > :last-child { display: initial; } 2423@media screen and (max-width: 768px) { 2424 .AgeConfirmationPopup-buttonsHolder-abea5 { position: absolute; bottom: var(--spacings-s32); right: var(--spacings-s24); left: var(--spacings-s24); } 2425} 2426.AgeConfirmationPopup-hideSkipBtn-ee12f > :last-child { display: none; } 2427@supports (padding-block-start: 16px) { 2428 .SearchAutoComplete-root-6d8e4 { padding-block-start: var(--spacings-s16); } 2429} 2430@supports not (padding-block-start: 16px) { 2431 .SearchAutoComplete-root-6d8e4 { padding-top: var(--spacings-s16); } 2432} 2433.SearchAutoComplete-root-6d8e4 { position: absolute; top: calc(100% + var(--spacings-s4)); width: 100%; z-index: 100; border: 2px solid var(--control-colors-border-default); border-radius: var(--corner-radius-r12); left: var(--spacings-s0); background-color: var(--positive-colors-base-default); overflow-y: auto; max-height: 290px; } 2434.SearchAutoComplete-skeleton-8b450 { position: absolute; top: calc(100% + var(--spacings-s4)); left: var(--spacings-s0); width: 100%; border-radius: var(--corner-radius-r12); z-index: 100; } 2435.SearchAutoComplete-skeletonDefault-2cf5f { border: 2px solid var(--control-colors-border-default); max-height: 290px; } 2436.SearchAutoComplete-skeletonOpenMode-6c513 { max-height: 100vh; } 2437.SearchAutoComplete-rootMobile-a37c9 { padding-block-start: var(--spacings-s16); position: absolute; top: calc(100% + var(--spacings-s8)); width: 100%; height: calc(-115px + 100vh); z-index: 100; left: var(--spacings-s0); background-color: var(--positive-colors-base-default); overflow-y: auto; } 2438.RecentlySearch-root-1afe0 { opacity: 0; animation: 0.4s ease-in-out 0s 1 normal forwards running RecentlySearch-rc-recently-search-fade-in-47fd2; margin-bottom: var(--spacings-s16); } 2439.RecentlySearch-mobile-d92b8 { margin-bottom: var(--spacings-s24); } 2440.RecentlySearch-titleWrapper-ced32 { display: flex; align-items: center; justify-content: space-between; gap: var(--spacings-s16); } 2441@supports (margin-inline-end: -12px) { 2442 .RecentlySearch-titleWrapper-ced32 { margin-block-end: var(--spacings-s8); } 2443} 2444@supports not (margin-inline-end: -12px) { 2445 .RecentlySearch-titleWrapper-ced32 { margin-bottom: var(--spacings-s8); } 2446} 2447.RecentlySearch-layoutSkeletonList-86ad7 { display: flex; flex-wrap: wrap; gap: var(--spacings-s8); width: 100%; } 2448.RecentlySearch-layoutSkeletonListItem-c3497 { width: 100%; } 2449.RecentlySearch-layoutSkeletonChip-fa264 { padding-inline-end: var(--spacings-s8); display: flex; flex-flow: row; gap: var(--spacings-s8); overflow-x: auto; scrollbar-width: none; } 2450.RecentlySearch-layoutSkeletonChip-fa264::-webkit-scrollbar { display: none; } 2451.RecentlySearch-layoutSkeletonChipItem-20061 { flex-shrink: 0; max-width: 280px; } 2452@keyframes RecentlySearch-rc-recently-search-fade-in-47fd2 { 2453 0% { opacity: 0; } 2454 100% { opacity: 1; } 2455} 2456.PopularSearchList-root-8c943 { display: flex; flex-direction: column; } 2457@supports (margin-block-start: var(--spacings-s8)) { 2458 .PopularSearchList-root-8c943 { margin-block-start: var(--spacings-s8); } 2459} 2460@supports not (margin-block-start: var(--spacings-s8)) { 2461 .PopularSearchList-root-8c943 { margin-top: var(--spacings-s8); } 2462} 2463.PopularSearchNewGrid-rootGrid-ad1c0 { display: grid; gap: var(--spacings-s12); grid-template-columns: repeat(var(--rc-popular-search-new-grid-columns),minmax(0,1fr)); width: 100%; } 2464@supports (margin-block-start: var(--spacings-s8)) { 2465 .PopularSearchNewGrid-rootGrid-ad1c0 { margin-block-start: var(--spacings-s8); } 2466} 2467@supports not (margin-block-start: var(--spacings-s8)) { 2468 .PopularSearchNewGrid-rootGrid-ad1c0 { margin-top: var(--spacings-s8); } 2469} 2470.PopularSearchNewGrid-rootCarousel-73425 { scrollbar-width: none; } 2471.PopularSearchNewGrid-rootCarousel-73425::-webkit-scrollbar { display: none; } 2472.PopularSearchNewGrid-rootCarousel-73425 { display: flex; gap: var(--spacings-s8); flex-direction: row; width: 100%; height: 128px; min-height: 128px; overflow: auto hidden; flex-shrink: 0; align-items: stretch; justify-content: flex-start; overscroll-behavior: contain; } 2473.PopularSearchNewGrid-cell-0c5f6 { aspect-ratio: 1 / 1; min-width: 0px; display: flex; flex-direction: column; } 2474.PopularSearchNewGrid-cellCarousel-7de7d { flex: 0 0 auto; width: 108px; height: 100%; min-width: 108px; display: flex; flex-direction: column; } 2475.PopularSearchOldGrid-rootCarousel-4be3c { gap: 8px; display: flex; overflow-x: auto; justify-content: start; padding-bottom: 2px; overscroll-behavior: contain; } 2476@media (hover: hover) and (pointer: fine) { 2477 .PopularSearchOldGrid-rootCarousel-4be3c::-webkit-scrollbar { width: 4px; height: 4px; }
2478 .PopularSearchOldGrid-rootCarousel-4be3c::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; } 2479 .PopularSearchOldGrid-rootCarousel-4be3c::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r4); background-color: var(--background-colors-border); } 2480 .PopularSearchOldGrid-rootCarousel-4be3c::-webkit-scrollbar-corner { background: transparent; } 2481} 2482@supports (-moz-appearance: none) { 2483 .PopularSearchOldGrid-rootCarousel-4be3c { scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 2484} 2485@media (hover: none) and (pointer: coarse) { 2486 .PopularSearchOldGrid-rootCarousel-4be3c::-webkit-scrollbar { display: none; } 2487} 2488.PopularSearchOldGrid-rootGrid-01bf0 { display: grid; gap: var(--spacings-s12); grid-template-columns: repeat(2, 1fr); } 2489@supports (margin-block-start: var(--spacings-s8)) { 2490 .PopularSearchOldGrid-rootGrid-01bf0 { margin-block-start: var(--spacings-s8); } 2491} 2492@supports not (margin-block-start: var(--spacings-s8)) { 2493 .PopularSearchOldGrid-rootGrid-01bf0 { margin-top: var(--spacings-s8); } 2494} 2495.PopularSearch-root-57cc0 { opacity: 0; animation: 0.4s ease-in-out 0s 1 normal forwards running PopularSearch-rc-popular-search-fade-in-aa90c; overflow: hidden auto; } 2496.PopularSearch-titleWrapper-a3d5d { display: flex; align-items: center; justify-content: space-between; gap: var(--spacings-s8); margin-bottom: var(--spacings-s8); } 2497@supports (margin-inline-end: -12px) { 2498 .PopularSearch-titleWrapper-a3d5d { margin-inline-end: calc(-1 * var(--spacings-s12)); } 2499} 2500@supports not (margin-inline-end: -12px) { 2501 .PopularSearch-titleWrapper-a3d5d { margin-right: calc(-1 * var(--spacings-s12)); } 2502} 2503@keyframes PopularSearch-rc-popular-search-fade-in-aa90c { 2504 0% { opacity: 0; } 2505 100% { opacity: 1; } 2506} 2507.ErrorState-root-d643c { display: flex; flex-direction: column; align-items: center; height: 308px; padding: var(--spacings-s16); text-align: center; } 2508.ErrorState-icon-0fd4f { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--primary-colors-alpha-20); margin-bottom: var(--spacings-s16); font-size: 32px; } 2509.ErrorState-title-ffa77 { margin-bottom: var(--spacings-s12); } 2510.ErrorState-text-14765 { margin-bottom: var(--spacings-s12); max-width: 400px; } 2511.ErrorState-retryButton-b95fb { margin-top: var(--spacings-s12); background: var(--primary-colors-base-default); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: var(--corner-radius-r24); width: 288px; cursor: pointer; outline: none; } 2512.ErrorState-retryButton-b95fb:hover { background: var(--primary-colors-base-action); } 2513.ImageCropper-container-c28e9 { position: relative; display: inline-block; width: 100%; height: 100%; } 2514.ImageCropper-cropOverlay-6841f { position: absolute; border: 2px solid rgb(247, 212, 247); border-radius: var(--corner-radius-r8); pointer-events: none; } 2515.ImageCropper-cornerBracket-945a1 { position: absolute; width: 25px; height: 25px; pointer-events: none; } 2516.ImageCropper-bracketTopLeft-10bfe { top: -2px; left: -2px; border-top: 2px solid var(--primary-colors-base-default); border-left: 2px solid var(--primary-colors-base-default); border-top-left-radius: var(--corner-radius-r8); } 2517.ImageCropper-bracketTopRight-42976 { top: -2px; right: -2px; border-top: 2px solid var(--primary-colors-base-default); border-right: 2px solid var(--primary-colors-base-default); border-top-right-radius: var(--corner-radius-r8); } 2518.ImageCropper-bracketBottomLeft-747f3 { bottom: -2px; left: -2px; border-bottom: 2px solid var(--primary-colors-base-default); border-left: 2px solid var(--primary-colors-base-default); border-bottom-left-radius: var(--corner-radius-r8); } 2519.ImageCropper-bracketBottomRight-b4d2f { bottom: -2px; right: -2px; border-bottom: 2px solid var(--primary-colors-base-default); border-right: 2px solid var(--primary-colors-base-default); border-bottom-right-radius: var(--corner-radius-r8); } 2520.ImageCropper-handle-06e79 { opacity: 0; position: absolute; width: 25px; height: 25px; background-color: var(--primary-colors-base-default); border-radius: var(--corner-radius-r4); pointer-events: auto; transform: translate(-50%, -50%); z-index: 10; } 2521.ImageCropper-topLeft-16e2f { top: 0px; left: 0px; } 2522.ImageCropper-topRight-69656 { top: 0px; right: 0px; transform: translate(50%, -50%); } 2523.ImageCropper-topRight-69656:hover { transform: translate(50%, -50%) scale(1.1); } 2524.ImageCropper-topRight-69656:active { transform: translate(50%, -50%) scale(0.9); } 2525.ImageCropper-bottomLeft-2a6e3 { bottom: 0px; left: 0px; transform: translate(-50%, 50%); } 2526.ImageCropper-bottomLeft-2a6e3:hover { transform: translate(-50%, 50%) scale(1.1); } 2527.ImageCropper-bottomLeft-2a6e3:active { transform: translate(-50%, 50%) scale(0.9); } 2528.ImageCropper-bottomRight-9cd72 { bottom: 0px; right: 0px; transform: translate(50%, 50%); } 2529.ImageCropper-bottomRight-9cd72:hover { transform: translate(50%, 50%) scale(1.1); } 2530.ImageCropper-bottomRight-9cd72:active { transform: translate(50%, 50%) scale(0.9); } 2531.VisualSearch-root-5f1c4 { display: flex; flex-direction: column; position: absolute; top: calc(100% + var(--spacings-s4)); background-color: var(--background-colors-base); padding: var(--spacings-s12); width: 100%; height: 308px; z-index: 100; border: 2px solid var(--control-colors-border-default); border-radius: var(--corner-radius-r12); max-width: 629px; } 2532.VisualSearch-mobileRoot-66fe2 { position: absolute; top: calc(100% + var(--spacings-s4)); width: 100%; z-index: 100; } 2533.VisualSearch-imageCropperContainerMobile-078c9 { display: flex; justify-content: center; height: auto; } 2534.VisualSearch-dropArea-a6922 { cursor: pointer; border: 2px dashed var(--primary-colors-alpha-20); border-radius: var(--corner-radius-r8); background-color: var(--primary-colors-alpha-20); flex-direction: column; padding: var(--spacings-s16); height: 220px; text-align: center; align-items: center; justify-content: center; position: relative; display: flex; transition: background-color 0.2s, border-color 0.2s; } 2535.VisualSearch-dropAreaPending-304ef { cursor: progress; pointer-events: none; opacity: 0.5; } 2536.VisualSearch-dropAreaDragOver-1f5c7 { background-color: var(--primary-colors-alpha-50); border-color: var(--primary-colors-base-default); } 2537.VisualSearch-iconCircle-e1905 { background-color: var(--primary-colors-alpha-20); border-radius: var(--corner-radius-circle); width: 64px; height: 64px; margin: 0 auto var(--spacings-s16); display: flex; align-items: center; justify-content: center; color: var(--primary-colors-base-default); } 2538.VisualSearch-imageContainer-c0eb0 { display: flex; flex-direction: row; flex-grow: 1; position: relative; width: 100%; height: 100%; min-height: 0px; } 2539.VisualSearch-imageContainerMobile-fb020 { gap: var(--spacings-s16); max-height: calc(100dvh - 250px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); height: auto; } 2540.VisualSearch-image-53ddd { flex-grow: 1; border-radius: var(--corner-radius-r12); position: absolute; top: 50%; left: 50%; max-width: 100%; max-height: 100%; transform: translate(-50%, -50%); object-fit: contain; width: auto; height: auto; } 2541.VisualSearch-mobileImage-c478e { border-radius: var(--corner-radius-r12); max-height: 100%; max-width: 100%; object-fit: contain; } 2542.VisualSearch-text-8bb00 { font-size: var(--typography-t5-font-size); } 2543.VisualSearch-uploadLink-e2d61 { margin-left: var(--spacings-s4); text-decoration: none; cursor: pointer; } 2544.VisualSearch-inputArea-e186a { display: flex; margin-top: var(--spacings-s12); gap: var(--spacings-s12); } 2545.VisualSearch-mobileInputArea-56850 { display: inline-grid; margin-top: var(--spacings-s12); gap: var(--spacings-s12); width: 100%; } 2546.VisualSearch-input-61142 { height: 40px; } 2547.VisualSearch-hiddenInput-54f7b { display: none; } 2548.VisualSearch-removeIcon-d6b45 { right: var(--spacings-s8); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1; } 2549.VisualSearch-button-41edc { padding: var(--spacings-s12) var(--spacings-s24); color: var(--primary-colors-base-default); border: 1px solid var(--primary-colors-base-default); background-color: transparent; border-radius: var(--corner-radius-r24); cursor: pointer; transition: background-color 0.3s; } 2550.VisualSearch-button-41edc:hover { background-color: var(--primary-colors-alpha-20); } 2551.VisualSearch-searchButtonMobile-f1cbf { margin-block-start: var(--spacings-s16); } 2552.VisualSearch-searchButtonMobile-f1cbf > svg { fill: var(--primary-colors-base-default); color: var(--primary-colors-base-default); } 2553.VisualSearch-searchTypes-6c511 { display: flex; gap: var(--spacings-s12); margin-bottom: var(--spacings-s8); overflow-x: auto; flex-shrink: 0; scrollbar-width: none; } 2554.VisualSearch-searchTypes-6c511::-webkit-scrollbar { display: none; } 2555.VisualSearch-chip-b3f59 { flex: 1 0 auto; min-width: fit-content; text-align: center; } 2556.EmailForm-root-90783 { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } 2557.EmailForm-container-31b01 { display: grid; gap: var(--spacings-s16);
2557 overflow-y: scroll; } 2558@media (hover: hover) and (pointer: fine) { 2559 .EmailForm-container-31b01::-webkit-scrollbar { width: 4px; } 2560 .EmailForm-container-31b01::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; } 2561 .EmailForm-container-31b01::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r4); background-color: var(--background-colors-border); } 2562 .EmailForm-container-31b01::-webkit-scrollbar-corner { background: transparent; } 2563} 2564@supports (-moz-appearance: none) { 2565 .EmailForm-container-31b01 { scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 2566} 2567@media (hover: none) and (pointer: coarse) { 2568 .EmailForm-container-31b01::-webkit-scrollbar { display: none; } 2569} 2570.EmailForm-inputContainer-b95b3 { display: grid; gap: var(--spacings-s4); } 2571.EmailForm-inputContainer-b95b3 .input-field-auth > input { color: var(--control-colors-value-default); } 2572.EmailForm-inputContainer-b95b3 .input-field-auth > button { cursor: default; } 2573.EmailForm-input-ec168 svg > path:not([fill]) { fill: var(--error-colors-base-default); } 2574.EmailForm-input-ec168:focus-within svg > path:not([fill]) { fill: var(--error-colors-base-action); } 2575.EmailForm-errText-b4244 { color: var(--error-colors-base-default); } 2576.EmailForm-recaptchaFallback-29dba:has(> div) { height: 84px; max-width: 100%; overflow: hidden; } 2577@media screen and (max-width: 380px) { 2578 .EmailForm-recaptchaFallback-29dba:has(> div) { height: 71px; transform: scale(0.85); transform-origin: left top; } 2579} 2580.EmailForm-rootNewDesign-438f9 { justify-content: flex-start; } 2581.EmailForm-containerNewDesign-6c46b.EmailForm-containerNewDesign-6c46b { display: flex; flex-direction: column; justify-content: safe center; flex: 1 1 auto; min-height: 0px; padding: var(--spacings-s0) var(--spacings-s32); overflow-y: auto; scrollbar-width: none; } 2582.EmailForm-containerNewDesign-6c46b.EmailForm-containerNewDesign-6c46b::-webkit-scrollbar { display: none; } 2583@media screen and (max-width: 768px) { 2584 .EmailForm-containerNewDesign-6c46b.EmailForm-containerNewDesign-6c46b { padding: var(--spacings-s0); } 2585} 2586.PasswordCheck-field-f6f3f { display: flex; align-items: center; padding: var(--spacings-s4) var(--spacings-s6); margin-right: var(--spacings-s4); margin-bottom: var(--spacings-s4); height: 24px; border-radius: var(--corner-radius-r8); } 2587.PasswordCheck-field-f6f3f.error { background-color: var(--background-colors-tint-1); } 2588.PasswordCheck-field-f6f3f.success { background-color: var(--primary-colors-alpha-20); } 2589.PasswordCheck-text-34e66 { color: var(--text-colors-tint-2); } 2590.PasswordCheck-text-34e66.error { color: var(--error-colors-base-default); } 2591.PasswordCheck-text-34e66.success { color: var(--primary-colors-base-active); } 2592.CreatePasswordForm-root-45827 { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } 2593.CreatePasswordForm-headSection-254db { display: grid; gap: var(--spacings-s16); overflow-y: scroll; } 2594@media (hover: hover) and (pointer: fine) { 2595 .CreatePasswordForm-headSection-254db::-webkit-scrollbar { width: 4px; } 2596 .CreatePasswordForm-headSection-254db::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; } 2597 .CreatePasswordForm-headSection-254db::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r4); background-color: var(--background-colors-border); } 2598 .CreatePasswordForm-headSection-254db::-webkit-scrollbar-corner { background: transparent; } 2599} 2600@supports (-moz-appearance: none) { 2601 .CreatePasswordForm-headSection-254db { scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 2602} 2603@media (hover: none) and (pointer: coarse) { 2604 .CreatePasswordForm-headSection-254db::-webkit-scrollbar { display: none; } 2605} 2606.CreatePasswordForm-passwordField-5a1c5 .input-field-auth > input { color: var(--control-colors-value-default); } 2607.CreatePasswordForm-passwordField-5a1c5 .input-field-auth > button { color: var(--control-colors-value-default); } 2608.CreatePasswordForm-passwordField-5a1c5 .input-field-auth > button:hover { color: var(--control-colors-value-default); } 2609.CreatePasswordForm-createPasswordInput-889c8 { width: 100%; } 2610.CreatePasswordForm-passwordLabel-740b4 { display: block; margin-bottom: var(--spacings-s6); } 2611.CreatePasswordForm-checkboxSection-55415 { display: grid; grid-template-columns: var(--spacings-s32) 1fr; margin-top: var(--spacings-s6); cursor: pointer; } 2612.CreatePasswordForm-passwordCheck-27c5d { display: flex; flex-wrap: wrap; margin-top: var(--spacings-s6); } 2613.CreatePasswordForm-errorMessage-1e8cc { display: block; color: var(--error-colors-base-default); font-size: var(--typography-t3-font-size); font-weight: 600; margin-top: var(--spacings-s4); min-height: 16px; } 2614.CreatePasswordForm-recaptchaFallback-da264:has(> div) { height: 84px; max-width: 100%; overflow: hidden; } 2615@media screen and (max-width: 380px) { 2616 .CreatePasswordForm-recaptchaFallback-da264:has(> div) { height: 71px; transform: scale(0.85); transform-origin: left top; } 2617} 2618.CreatePasswordForm-description-1260a { word-break: break-word; } 2619.CreatePasswordForm-rootNewDesign-c6951 { justify-content: flex-start; } 2620.CreatePasswordForm-headSectionNewDesign-bf6a8.CreatePasswordForm-headSectionNewDesign-bf6a8 { display: flex; flex-direction: column; justify-content: safe center; flex: 1 1 auto; min-height: 0px; padding: var(--spacings-s0) var(--spacings-s32); text-align: left; overflow-y: auto; scrollbar-width: none; } 2621.CreatePasswordForm-headSectionNewDesign-bf6a8.CreatePasswordForm-headSectionNewDesign-bf6a8::-webkit-scrollbar { display: none; } 2622@media screen and (max-width: 768px) { 2623 .CreatePasswordForm-headSectionNewDesign-bf6a8.CreatePasswordForm-headSectionNewDesign-bf6a8 { padding: var(--spacings-s0); } 2624} 2625.auth-field-message .CreatePasswordForm-errorMessage-1e8cc { margin-top: var(--spacings-s0); } 2626.BiometricCheckbox-checkboxSection-78320 { display: flex; align-items: center; gap: var(--spacings-s6); margin-top: var(--spacings-s6); cursor: pointer; } 2627.MarketingCheckbox-checkboxSection-19399 { display: flex; align-items: center; gap: var(--spacings-s6); margin-top: var(--spacings-s6); cursor: pointer; } 2628.grecaptcha-badge { visibility: hidden; } 2629.RecaptchaLegal-root-31719 { color: var(--text-colors-tint-1); font-size: var(--typography-t4-font-size); font-weight: 500; line-height: var(--typography-t4-line-height); } 2630@media screen and (min-width: 833px) and (max-width: 1030px) { 2631 .RecaptchaLegal-root-31719 { font-size: var(--typography-t3-font-size); line-height: var(--typography-t3-line-height); } 2632} 2633.RecaptchaLegal-link-7d5da { font-weight: 600; color: var(--primary-colors-base-default); } 2634.RecaptchaLegal-link-7d5da:hover { color: var(--primary-colors-base-active-action); } 2635.InlineSupportLink-link-07428 { text-decoration: underline; } 2636.InsertPasswordForm-root-573bf { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } 2637.InsertPasswordForm-formContent-f5daa { display: grid; gap: var(--spacings-s16);
2637 overflow-y: scroll; } 2638@media (hover: hover) and (pointer: fine) { 2639 .InsertPasswordForm-formContent-f5daa::-webkit-scrollbar { width: 4px; } 2640 .InsertPasswordForm-formContent-f5daa::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; } 2641 .InsertPasswordForm-formContent-f5daa::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r4); background-color: var(--background-colors-border); } 2642 .InsertPasswordForm-formContent-f5daa::-webkit-scrollbar-corner { background: transparent; } 2643} 2644@supports (-moz-appearance: none) { 2645 .InsertPasswordForm-formContent-f5daa { scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 2646} 2647@media (hover: none) and (pointer: coarse) { 2648 .InsertPasswordForm-formContent-f5daa::-webkit-scrollbar { display: none; } 2649} 2650.InsertPasswordForm-passwordContainer-1757b { display: grid; gap: var(--spacings-s6); } 2651.InsertPasswordForm-passwordContainer-1757b .input-field-auth > input { color: var(--control-colors-value-default); } 2652.InsertPasswordForm-passwordContainer-1757b .input-field-auth > button { color: var(--control-colors-value-default); } 2653.InsertPasswordForm-passwordContainer-1757b .input-field-auth > button:hover { color: var(--control-colors-value-default); } 2654.InsertPasswordForm-passwordField-f009f { width: 100%; } 2655.InsertPasswordForm-recaptchaFallback-6ee6d:has(> div) { height: 84px; max-width: 100%; overflow: hidden; } 2656@media screen and (max-width: 380px) { 2657 .InsertPasswordForm-recaptchaFallback-6ee6d:has(> div) { height: 71px; transform: scale(0.85); transform-origin: left top; } 2658} 2659.InsertPasswordForm-rootNewDesign-6de4c { justify-content: flex-start; } 2660.InsertPasswordForm-formContentNewDesign-ce58e.InsertPasswordForm-formContentNewDesign-ce58e { display: flex; flex-direction: column; justify-content: safe center; flex: 1 1 auto; min-height: 0px; padding: var(--spacings-s0) var(--spacings-s32); overflow-y: auto; scrollbar-width: none; } 2661.InsertPasswordForm-formContentNewDesign-ce58e.InsertPasswordForm-formContentNewDesign-ce58e::-webkit-scrollbar { display: none; } 2662@media screen and (max-width: 768px) { 2663 .InsertPasswordForm-formContentNewDesign-ce58e.InsertPasswordForm-formContentNewDesign-ce58e { padding: var(--spacings-s0); } 2664} 2665.InsertPasswordForm-linksRowNewDesign-10fdf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacings-s8); } 2666.InsertPasswordForm-signUpNewDesign-503f6 { display: flex; align-items: center; gap: var(--spacings-s8); } 2667.InsertPasswordForm-forgotPasswordNewDesign-b28b5.InsertPasswordForm-forgotPasswordNewDesign-b28b5 { color: var(--text-colors-base); } 2668.InsertPasswordForm-forgotPasswordNewDesign-b28b5.InsertPasswordForm-forgotPasswordNewDesign-b28b5:hover { color: var(--text-colors-tint-1); } 2669.InsertPasswordForm-signUpButton-cc4d9.InsertPasswordForm-signUpButton-cc4d9 { height: auto; padding: var(--spacings-s0); font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); font-weight: 700; } 2670.InsertPasswordForm-legalNewDesign-c832b { margin-top: auto; flex-shrink: 0; display: grid; gap: var(--spacings-s8); padding: var(--spacings-s0) var(--spacings-s32); } 2671@media screen and (max-width: 768px) { 2672 .InsertPasswordForm-legalNewDesign-c832b { padding: var(--spacings-s0); } 2673} 2674.ResetPassword-root-55492 { display: flex; flex-direction: column; height: 100%; } 2675.ResetPassword-content-c1f85 { display: flex; flex-direction: column; justify-content: safe center; flex: 1 1 auto; min-height: 0px; gap: var(--spacings-s24); padding: var(--spacings-s0) var(--spacings-s32); overflow-y: auto; scrollbar-width: none; } 2676.ResetPassword-content-c1f85::-webkit-scrollbar { display: none; } 2677@media screen and (max-width: 768px) { 2678 .ResetPassword-content-c1f85 { padding: var(--spacings-s0); } 2679} 2680.ResetPassword-field-dadff { display: grid; gap: var(--spacings-s6); } 2681.ResetPassword-input-6a002 { width: 100%; } 2682.ResetPassword-intro-8d491 { display: grid; gap: var(--spacings-s12); } 2683.ResetLinkSent-root-9dc96 { display: flex; flex-direction: column; height: 100%; } 2684.ResetLinkSent-content-55b44 { display: flex; flex-direction: column; justify-content: safe center; flex: 1 1 auto; min-height: 0px; gap: var(--spacings-s24); padding: var(--spacings-s0) var(--spacings-s32); overflow-y: auto; scrollbar-width: none; } 2685.ResetLinkSent-content-55b44::-webkit-scrollbar { display: none; } 2686@media screen and (max-width: 768px) { 2687 .ResetLinkSent-content-55b44 { padding: var(--spacings-s0); } 2688}
2689.ResetLinkSent-intro-97963, .ResetLinkSent-actions-10300 { display: grid; gap: var(--spacings-s12); } 2690.ResetLinkSent-successIcon-753b9 { flex-shrink: 0; } 2691.ResetLinkSent-successIcon-753b9 > path:not([fill]) { fill: var(--success-colors-base-default); } 2692.AccountTermination-root-7c011 { display: grid; align-items: center; justify-content: center; flex-direction: column; max-width: 100%; height: 100%; margin: var(--spacings-s0) auto; text-align: center; } 2693.AccountTermination-image-7fc03 { width: 116px; height: 116px; margin: var(--spacings-s0) auto; } 2694.AccountTermination-subtitle-3f6b6 { line-height: var(--typography-t5-line-height); } 2695.AccountTermination-strong-f4330 { font-weight: 700; font-size: var(--typography-t5-font-size); } 2696.AccountTermination-link-4efad { font-weight: 600; color: var(--primary-colors-base-default); } 2697.AccountTermination-link-4efad:hover { color: var(--primary-colors-base-active-action); } 2698.AccountTermination-icon-50ad0 { width: 116px; height: 116px; } 2699.CheckboxWithText-root-9e8c1 { width: 100%; height: fit-content; display: grid; grid-template-columns: 30px 1fr; gap: var(--spacings-s12); } 2700.CheckboxWithText-description-bfc36 { display: flex; margin-top: var(--spacings-s4); justify-content: center; flex-flow: column; } 2701.ToGetStarted-root-900f5 { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } 2702.ToGetStarted-contentContainer-cdb7e { display: grid; gap: var(--spacings-s16); padding-bottom: var(--spacings-s12); overflow-y: scroll; } 2703.ToGetStarted-container-79971 { display: grid; gap: var(--spacings-s16); } 2704.ToGetStarted-mandatorySection-429e6 { display: flex; flex-direction: column; justify-content: center; gap: var(--spacings-s16); } 2705.ToGetStarted-optionalTitle-a3ea4::before { content: ""; width: 100%; height: 2px; display: block; background: var(--control-colors-border-default); margin-bottom: var(--spacings-s16); } 2706.ToGetStarted-optionalSection-bae47 { display: flex; flex-direction: column; justify-content: center; gap: var(--spacings-s16); } 2707.ToGetStarted-footerContainer-4c6a0 { position: relative; } 2708.ToGetStarted-footerContainer-4c6a0::before { position: absolute; left: 50%; display: block; content: ""; background-color: var(--control-colors-border-default); height: 1px; width: calc(100% + 84px); transform: translate(-50%); } 2709.ToGetStarted-legalText-087dd { display: block; margin: var(--spacings-s16) auto var(--spacings-s12); text-align: center; } 2710.ToGetStarted-legalText-087dd a { text-decoration: underline; color: var(--text-colors-tint-1); } 2711.ToGetStarted-legalText-087dd a:not(:first-child) { color: var(--primary-colors-base-default); } 2712.ExpandableText-root-8e7de { width: 100%; height: fit-content; position: relative; margin: var(--spacings-s0) auto; } 2713.ExpandableText-root-8e7de strong { font-weight: 400; } 2714.ExpandableText-expandBtn-750bc { position: relative; margin-left: var(--spacings-s4); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background-color: transparent; color: var(--primary-colors-base-default); cursor: pointer; font-size: inherit; } 2715.SendEmailCode-headerTextContainer-ad6ec { display: flex; flex-direction: column; gap: var(--spacings-s16); } 2716.SendEmailCode-resendButton-c4308 { height: auto; padding: 2.5px 0px 0px; } 2717.WelcomeBackEmailCodeAndSSO-divider-79919 { display: flex; justify-content: center; align-items: center; color: var(--text-colors-tint-2); text-transform: uppercase; } 2718.WelcomeBackEmailCodeAndSSO-divider-79919::after, .WelcomeBackEmailCodeAndSSO-divider-79919::before { content: ""; display: block; background-color: var(--background-colors-tint-3); width: 100%; height: 1px; margin: var(--spacings-s0) var(--spacings-s8); } 2719.WelcomeBackEmailCodeAndSSO-mainContainer-63866 { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } 2720.WelcomeBackEmailCodeAndSSO-footerButtonsContainer-1fb09 { display: flex; flex-direction: column; gap: var(--spacings-s16); } 2721.WelcomeBackEmailCodeAndSSO-digitCodeContainer-2ce91 { display: flex; flex-direction: column; gap: var(--spacings-s4); } 2722.WelcomeBackEmailCodeAndSSO-bottomButtonsContainer-ab35d { display: flex; gap: var(--spacings-s16); } 2723.WelcomeBackEmailCodeAndSSO-rootNewDesign-3c1f1.WelcomeBackEmailCodeAndSSO-rootNewDesign-3c1f1 { justify-content: flex-start; } 2724.WelcomeBackEmailCodeAndSSO-contentNewDesign-88058 { display: flex; flex-direction: column; justify-content: safe center; flex: 1 1 auto; min-height: 0px; gap: var(--spacings-s16); padding: var(--spacings-s0) var(--spacings-s32); overflow-y: auto; scrollbar-width: none; } 2725.WelcomeBackEmailCodeAndSSO-contentNewDesign-88058::-webkit-scrollbar { display: none; } 2726@media screen and (max-width: 768px) { 2727 .WelcomeBackEmailCodeAndSSO-contentNewDesign-88058 { padding: var(--spacings-s0); } 2728} 2729.WelcomeBackMultipleSSO-headerTextContainer-a7494 { display: flex; flex-direction: column; gap: var(--spacings-s16); } 2730.WelcomeBackMultipleSSO-mainContainer-e46bd { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } 2731.WelcomeBackMultipleSSO-footerButtonsContainer-dc283 { display: flex; flex-direction: column; gap: var(--spacings-s16); } 2732.WelcomeBackMultipleSSO-bottomButtonsContainer-b7b88 { display: flex; gap: var(--spacings-s16); } 2733.WelcomeBackMultipleSSO-mainContainerNewDesign-9c92e { justify-content: flex-start; } 2734.WelcomeBackMultipleSSO-contentNewDesign-ae885 { flex: 1 1 auto; min-height: 0px; display: flex; flex-direction: column; justify-content: center; gap: var(--spacings-s16); padding: var(--spacings-s0) var(--spacings-s32); overflow-y: auto; scrollbar-width: none; } 2735.WelcomeBackMultipleSSO-contentNewDesign-ae885::-webkit-scrollbar { display: none; } 2736@media screen and (max-width: 768px) { 2737 .WelcomeBackMultipleSSO-contentNewDesign-ae885 { padding: var(--spacings-s0); } 2738} 2739.MarketingCheckbox-checkboxSection-19399, .BiometricCheckbox-checkboxSection-78320 { display: flex; align-items: center; gap: var(--spacings-s6); margin-top: var(--spacings-s6); cursor: pointer; } 2740.BiometricCheckbox-link-9f8ca { font-weight: 600; color: var(--primary-colors-base-default); } 2741.BiometricCheckbox-link-9f8ca:hover { color: var(--primary-colors-base-active-action); } 2742.UsernameForm-root-d901c { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } 2743.UsernameForm-inputContainer-db088 { display: grid; gap: var(--spacings-s4); } 2744.UsernameForm-inputContainer-db088 .input-field-auth > input { color: var(--control-colors-value-default); } 2745.UsernameForm-inputContainer-db088 .input-field-auth > button { cursor: pointer; } 2746.UsernameForm-errText-e79bd { color: var(--error-colors-base-default); } 2747.UsernameForm-headSection-500ef { display: grid; gap: var(--spacings-s16);
2747 overflow-y: scroll; } 2748@media (hover: hover) and (pointer: fine) { 2749 .UsernameForm-headSection-500ef::-webkit-scrollbar { width: 4px; } 2750 .UsernameForm-headSection-500ef::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; } 2751 .UsernameForm-headSection-500ef::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r4); background-color: var(--background-colors-border); } 2752 .UsernameForm-headSection-500ef::-webkit-scrollbar-corner { background: transparent; } 2753} 2754@supports (-moz-appearance: none) { 2755 .UsernameForm-headSection-500ef { scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 2756} 2757@media (hover: none) and (pointer: coarse) { 2758 .UsernameForm-headSection-500ef::-webkit-scrollbar { display: none; } 2759} 2760.UsernameForm-checkboxSection-5be22 { display: grid; grid-template-columns: var(--spacings-s32) 1fr; margin-top: var(--spacings-s6); cursor: pointer; } 2761.UsernameForm-errorMessage-1d434 { display: block; color: var(--error-colors-base-default); font-size: var(--typography-t3-font-size); font-weight: 600; margin-top: var(--spacings-s4); min-height: 16px; } 2762.UsernameForm-buttonWrapper-1daee { display: grid; gap: var(--spacings-s8); grid-template-columns: var(--spacings-s40) 1fr; align-content: end; padding-top: var(--spacings-s6); width: 100%; } 2763.EmailVerification-mainContainer-063a2 { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } 2764.EmailVerification-headerContainer-7abd3 { display: flex; flex-direction: column; gap: var(--spacings-s16); } 2765.EmailVerification-mainContainerNewDesign-22b68 { justify-content: flex-start; } 2766.EmailVerification-footerButtonsContainer-0151f { display: flex; flex-direction: column; gap: var(--spacings-s16); } 2767.EmailVerification-codeSection-a8aa4 { display: flex; flex-direction: column; gap: var(--spacings-s8); } 2768.EmailVerification-digitCodeContainer-fb2bb { display: flex; flex-direction: column; gap: var(--spacings-s4); } 2769.EmailVerification-resendRow-4a072 { display: flex; align-items: baseline; gap: var(--spacings-s4); } 2770.EmailVerification-resendButton-197ff { height: auto; padding: 0px; } 2771.EmailVerification-bottomButtonsContainer-db29b { display: flex; gap: var(--spacings-s16); } 2772.EmailVerification-content-dcd06 { display: flex; flex-direction: column; justify-content: safe center; flex: 1 1 auto; min-height: 0px; gap: var(--spacings-s16); padding: var(--spacings-s0) var(--spacings-s32); overflow-y: auto; scrollbar-width: none; } 2773.EmailVerification-content-dcd06::-webkit-scrollbar { display: none; } 2774@media screen and (max-width: 768px) { 2775 .EmailVerification-content-dcd06 { padding: var(--spacings-s0); } 2776} 2777.EmailVerification-skipButton-40bac { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 0px; cursor: pointer; color: var(--text-colors-base); font: inherit; text-align: center; width: 100%; } 2778.EmailVerification-skipButton-40bac:focus-visible { outline: auto; } 2779.TitleWithDescription-title-30479 { display: block; margin-bottom: var(--spacings-s4); } 2780.Links-title-ef4c4 { display: inline-block; padding-block: var(--spacings-s4); padding-inline: var(--spacings-s4); } 2781.Links-container-d8489 { list-style-type: none; } 2782.Links-linkWrapper-130c2 { padding-inline: var(--spacings-s4); padding-block: var(--spacings-s6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 2783.Links-link-68266:hover { color: var(--primary-colors-base-default); } 2784.rc-subsection-item__links-container { display: grid; list-style-type: none; } 2785.rc-subsection-item__title { display: block; margin-bottom: var(--spacings-s8); padding-inline: var(--spacings-s4); } 2786.rc-subsection-item__description { padding-inline: var(--spacings-s4); } 2787.rc-subsection-item__title-href > a { font-size: var(--typography-t5-font-size); } 2788.rc-subsection-item__title-href > a:hover { color: var(--negative-colors-base-action); } 2789.rc-subsection-item__more { display: inline-block; margin-top: var(--spacings-s8); } 2790.rc-menu-item-section { overflow: hidden; padding: var(--spacings-s24); } 2791.rc-menu-item-section__container { display: grid; grid-template-columns: repeat(var(--rc-menu-item-section-cols),auto); list-style-type: none; } 2792.rc-menu-item-section__image-wrapper { max-width: 306px; } 2793.rc-menu-item-section__heading { display: flex; } 2794.rc-menu-item-section__title-with-description { margin-bottom: var(--spacings-s24); } 2795.rc-menu-item-section__title-with-description--has-href { margin-bottom: 0px; } 2796.rc-menu-item-section__hr { border: 0px; background-color: var(--background-colors-tint-3); color: var(--background-colors-tint-3); font-size: 0px; height: 1px; margin-block: var(--spacings-s16); padding: 0px; } 2797.rc-menu-item-section__btn { flex-grow: 1; text-align: right; } 2798.rc-menu-dropdown { cursor: default;
2798 left: 136px; padding-top: 20px; position: absolute; top: 60px; } 2799.rc-menu-dropdown .MenuDropdown { display: grid; } 2800.rc-menu-dropdown__container { box-shadow: rgba(0, 0, 0, 0.24) 0px 4px 12px; height: 100%; list-style-type: none; } 2801.rc-menu-dropdown__container::before { content: ""; position: absolute; top: 9px; left: 0px; right: 0px; height: var(--spacings-s10); background-color: var(--positive-colors-base-default); } 2802.rc-menu-item { border-radius: var(--corner-radius-r8); cursor: default; display: inline-block; margin-right: var(--spacings-s4); padding: var(--spacings-s12) var(--spacings-s16); vertical-align: middle; } 2803.rc-menu-item:hover { background-color: var(--control-colors-button-background-action); } 2804.rc-menu-item:hover .rc-menu-item__text { color: var(--control-colors-text-active); } 2805@media (min-width: 1024px) { 2806 .rc-menu-item.Create .MenuDropdown { left: 0px; width: 100%; max-width: 100%; } 2807 .rc-menu-item.Create .MenuDropdown .MenuDropdownContainer { display: grid; grid-template-columns: 384px 1fr; } 2808 .rc-menu-item.Create .Section0 { gap: var(--spacings-s16); grid-template-columns: 1fr 1fr; } 2809 .rc-menu-item.Create .SubsectionItem { gap: var(--spacings-s16); } 2810 .rc-menu-item.Create .Templates .SubsectionItem { display: block; } 2811 .rc-menu-item.Create .Section1 { gap: var(--spacings-s16); grid-template-areas: "a a" "b c"; grid-template-columns: 182px 182px; } 2812 .rc-menu-item.Create .Section1 .Subsection0 { grid-area: a; } 2813 .rc-menu-item.Create .Section1 .Subsection1 { grid-area: b; } 2814 .rc-menu-item.Create .Section1 .Subsection2 { grid-area: c; margin-left: var(--spacings-s56); } 2815 .rc-menu-item.Create .Section1 .SubsectionItem { grid-template-columns: 182px 182px; gap: var(--spacings-s72); } 2816 .rc-menu-item.ForBusiness .MenuDropdownContainer { display: flex; } 2817 .rc-menu-item.ForBusiness .MenuDropdownContainer .Section0 { display: flex; flex-wrap: wrap; gap: var(--spacings-s72); justify-content: stretch; } 2818 .rc-menu-item.ForBusiness .MenuDropdownContainer .WithImg { display: flex; flex-direction: column-reverse; justify-content: flex-end; text-align: center; } 2819 .rc-menu-item.ForBusiness .MenuDropdownContainer .WithImg .MenuItemSectionImg { height: 180px; margin-bottom: var(--spacings-s32); width: 258px; } 2820 .rc-menu-item.ForBusiness .MenuDropdownContainer .WithImg .MenuItemSectionMore { margin-bottom: 0px; } 2821 .rc-menu-item.LearnConnect .MenuDropdownContainer { display: grid; grid-template-columns: 412px 434px; } 2822 .rc-menu-item.LearnConnect .MenuDropdownContainer .Section0 { display: grid; grid-template-columns: 166px 166px; grid-template-areas: "a b" "a c" "a d"; } 2823 .rc-menu-item.LearnConnect .MenuDropdownContainer .Subsection0 { grid-area: a; } 2824 .rc-menu-item.LearnConnect .MenuDropdownContainer .Subsection0 .SubsectionItemTitle { margin-bottom: var(--spacings-s16); } 2825 .rc-menu-item.LearnConnect .MenuDropdownContainer .Subsection1 { grid-area: b; } 2826 .rc-menu-item.LearnConnect .MenuDropdownContainer .Subsection1 .SubsectionItemTitle { margin-bottom: var(--spacings-s2); } 2827 .rc-menu-item.LearnConnect .MenuDropdownContainer .Hr { } 2828 .rc-menu-item.LearnConnect .MenuDropdownContainer .Subsection3 { grid-area: d; } 2829 .rc-menu-item.LearnConnect .MenuDropdownContainer .Subsection3 .SubsectionItemTitle { margin-bottom: var(--spacings-s2); } 2830 .rc-menu-item.LearnConnect .MenuDropdownContainer .WithImg { display: grid; grid-template-columns: 172px auto; grid-template-areas: "a a" "b c"; } 2831 .rc-menu-item.LearnConnect .MenuDropdownContainer .WithImg .MenuItemSectionImg { height: 248px; width: 172px; grid-area: b; } 2832 .rc-menu-item.LearnConnect .MenuDropdownContainer .WithImg .MenuItemSectionImg > img { width: 100%; } 2833 .rc-menu-item.LearnConnect .MenuDropdownContainer .WithImg > div { grid-area: a; } 2834 .rc-menu-item.LearnConnect .MenuDropdownContainer .WithImg .Section1 { display: block; margin-left: var(--spacings-s32); } 2835} 2836@media (max-width: 1279px) { 2837 .rc-menu-item.ForBusiness .MenuDropdown { left: 0px; width: 100%; } 2838 .rc-menu-item.ForBusiness .MenuDropdown .MenuDropdownContainer { justify-content: space-between; background: var(--positive-colors-base-default); } 2839 .rc-menu-item.ForBusiness .MenuDropdown .MenuDropdownContainer .Section0 { justify-content: stretch; } 2840} 2841@media (min-width: 1280px) { 2842 .rc-menu-item.Create .MenuDropdown .MenuDropdownContainer { grid-template-columns: 478px 1fr; } 2843 .rc-menu-item.Create .SubsectionItem { gap: var(--spacings-s12); grid-template-columns: 134px 134px; } 2844 .rc-menu-item.Create .Section1 { gap: var(--spacings-s16); grid-template-columns: 356px 172px 172px; grid-template-areas: "a b c"; } 2845 .rc-menu-item.Create .Section1 .Subsection2 { margin-left: 0px; } 2846 .rc-menu-item.Create .Section1 .SubsectionItem { grid-template-columns: 172px 172px; gap: var(--spacings-s16); } 2847} 2848@media (min-width: 1366px) { 2849 .rc-menu-item.Create .MenuDropdown .MenuDropdownContainer { grid-template-columns: 510px 1fr; } 2850 .rc-menu-item.Create .MenuDropdown .MenuDropdownContainer .MenuItemSection1 { padding-left: var(--spacings-s44); } 2851 .rc-menu-item.Create .Section0, .rc-menu-item.Create .Section1 { gap: var(--spacings-s40); } 2852} 2853@media (min-width: 1600px) { 2854 .rc-menu-item.Create .MenuDropdown .MenuDropdownContainer { grid-template-columns: 590px 1fr; } 2855 .rc-menu-item.Create .Section0, .rc-menu-item.Create .Section1 { gap: var(--spacings-s48); } 2856} 2857@media (min-width: 1800px) { 2858 .rc-menu-item.Create .MenuDropdown { left: 160px; max-width: 1600px; } 2859} 2860.rc-menu-item__link { color: var(--control-colors-text-default); } 2861.rc-menu-item__link:hover { background-color: unset; } 2862.rc-menu-item__link:hover > a { color: var(--control-colors-text-active); } 2863.rc-menu-item__text { color: var(--control-colors-text-default); display: inline-block; margin-right: var(--spacings-s4); vertical-align: middle; } 2864.rc-menu-item__icon { display: inline-block; vertical-align: middle; } 2865.rc-menu-item__hidden { display: none; } 2866.DesktopHeader-root-2571c { align-items: center; background-color: var(--positive-colors-base-default); border-bottom: 1px solid var(--background-colors-tint-3); display: flex; height: 80px; padding: var(--spacings-s12) var(--spacings-s24); position: sticky; top: 0px; } 2867.DesktopHeader-root-2571c .sign { border-radius: var(--corner-radius-r24); min-width: 80px; } 2868.DesktopHeader-logoContainer-7b0d9 > button { margin-right: var(--spacings-s32); padding: 0px; } 2869.DesktopHeader-logo-38242 { height: 56px; } 2870.DesktopHeader-btns-e18dc { display: flex; justify-content: flex-end; flex-grow: 1; align-items: center; margin-right: var(--spacings-s10); } 2871.DesktopHeader-btns-e18dc > a { margin-left: var(--spacings-s12); } 2872.DesktopHeader-btns-e18dc > button { margin-left: var(--spacings-s12); } 2873#credential_picker_container { top: 100px !important; } 2874.SearchField-root-75fa4 { max-width: var(--rc-search-field-width); width: 40px; min-width: 0px; overflow: hidden; } 2875@media screen and (max-width: 1366px) { 2876 .SearchField-root-75fa4 { max-width: 212px; width: 40px; } 2877} 2878@media screen and (max-width: 1280px) { 2879 .SearchField-root-75fa4 { max-width: 126px; width: 40px; } 2880} 2881@supports not (margin-block-start: 24px) { 2882 .SearchField-root-75fa4 { margin-top: var(--spacings-s12); margin-bottom: var(--spacings-s12); } 2883} 2884.SearchField-root-75fa4 { position: relative; } 2885@supports (margin-block-start: 24px) { 2886 .SearchField-noAnimation-65a7c { margin-block-start: var(--spacings-s12); margin-block-end: var(--spacings-s12); } 2887} 2888.SearchField-inputVisible-42b11 { width: var(--rc-search-field-width); overflow: visible; } 2889@media screen and (max-width: 1366px) { 2890 .SearchField-inputVisible-42b11 { width: 212px; } 2891} 2892@media screen and (max-width: 1280px) { 2893 .SearchField-inputVisible-42b11 { width: 126px; } 2894}
2895.SearchField-searchWrapper-50efe { position: relative; display: flex; align-items: center; justify-content: flex-end; min-width: 0px; } 2896.SearchField-searchInput-9703c { opacity: 0; visibility: hidden; } 2897.SearchField-searchInputInputVisible-07df8 { opacity: 1; transition: width 0.5s, opacity 0.5s; visibility: visible; } 2898.SearchField-searchIcon-7c537 { cursor: pointer; position: absolute; z-index: 10; right: var(--rc-search-field-icon-right); opacity: 0; animation: auto ease 0s 1 normal none running none; } 2899.SearchField-searchIconAnimateIn-e107d { right: 0px; opacity: 1; } 2900.SearchField-searchIconAnimateOut-06b77 { animation: 0.3s ease-out 0s 1 normal none running SearchField-slideLeft-96371; } 2901.SearchField-searchIconRtl-f3d45 { cursor: pointer; position: absolute; z-index: 10; left: 0px; opacity: 0; animation: auto ease 0s 1 normal none running none; } 2902.SearchField-searchIconRtlAnimateIn-240e2 { opacity: 1; } 2903.SearchField-searchIconRtlAnimateOut-99e95 { animation: 0.3s ease-out 0s 1 normal none running SearchField-slideLeft-96371; } 2904.SearchField-divider-a419a { height: 24px; width: 1px; background-color: var(--control-colors-border-default); margin-right: var(--spacings-s12); } 2905.SearchField-visualSearchWrapper-1515c { transition-property: background-color; transition-duration: var(--timings-default); transition-timing-function: var(--easings-ease); display: flex; align-items: center; border: 2px solid var(--control-colors-border-default); border-radius: var(--corner-radius-r12); background-color: var(--control-colors-field-background-default); opacity: 0; visibility: hidden; max-width: var(--rc-search-field-width); width: 40px; } 2906.SearchField-visualSearchWrapper-1515c:has(input:focus) { background-color: var(--control-colors-field-background-active); } 2907@media (hover: hover) and (pointer: fine) { 2908 .SearchField-visualSearchWrapper-1515c:hover { background-color: var(--control-colors-field-background-active-action); } 2909} 2910.SearchField-visualSearchWrapperInputVisible-76a48 { opacity: 1; visibility: visible; width: var(--rc-search-field-width); } 2911.SearchField-imageWrapper-4d589 { position: relative; flex-shrink: 0; cursor: pointer; } 2912.SearchField-image-9d9ce { object-fit: cover; width: 40px; height: 40px; border-radius: var(--corner-radius-r8); } 2913.SearchField-imageRemoveIcon-75450 { position: absolute; inset-block-start: -6px; inset-inline-end: -6px; width: 16px; height: 16px; cursor: pointer; z-index: 1; } 2914.SearchField-imageIcon-0a83f { margin-right: var(--spacings-s12); } 2915.SearchField-searchByUrl-6d168 { left: 0px; display: flex; } 2916.SearchField-inputWrapper-0c310 { width: 0px; display: flex; align-items: center; position: relative; } 2917.SearchField-inputWrapperInputVisible-a6c3c { width: 100%; } 2918.SearchField-content-56c67 { position: absolute; top: calc(100% + var(--spacings-s4)); left: var(--spacings-s0); width: 100%; max-height: 432px; padding: var(--spacings-s0); background-color: var(--positive-colors-base-default); border: 2px solid var(--control-colors-border-default); border-radius: var(--corner-radius-r12); overflow-y: auto; z-index: 100; } 2919.SearchField-contentInputVisible-8ed5f { padding: var(--spacings-s12); } 2920.SearchField-openStateContent-36ac9 { position: absolute; top: calc(100% + var(--spacings-s4)); left: var(--spacings-s0); width: 100%; height: calc(-120px + 100vh); padding-bottom: var(--spacings-s12); padding-top: var(--spacings-s12); overflow: hidden auto; z-index: 100; background-color: var(--positive-colors-base-default); } 2921@keyframes SearchField-slideLeft-96371 { 2922 0% { opacity: 1; left: calc(100% - 48px); } 2923 90% { opacity: 1; left: 2px; } 2924 100% { opacity: 0; left: 2px; } 2925} 2926.SearchInput-searchField-83890 { z-index: 10000; } 2927.Heading-root-4d9e9 { padding-inline: var(--spacings-s4); } 2928.Heading-root-4d9e9.NoPaddings { padding: 0px; margin: 0px; } 2929.Heading-btn-551a8 { padding-left: 0px; } 2930.Heading-root-8ca7a { align-items: center; border-bottom: 1px solid var(--background-colors-tint-3); display: flex; padding: 26px var(--spacings-s12); margin-bottom: var(--spacings-s24); } 2931.Heading-iconContainer-57a67 > svg { display: block; } 2932.Heading-txt-a4435 { margin-left: var(--spacings-s16); } 2933.Link-root-3160a { justify-content: space-between; } 2934.Link-root-3160a > svg path:not([fill]) { fill: var(--text-colors-tint-1); } 2935.Link-bold-89d41 > span { font-weight: 600; } 2936.Link-boldbutton-7eb96 { font-weight: 600; } 2937.PageSection-root-aacf8 { list-style-type: none; margin-bottom: var(--spacings-s24); } 2938.PageSection-title-a497f { margin-bottom: var(--spacings-s2); padding-inline: var(--spacings-s24); } 2939.PageSection-description-014cf { margin-bottom: var(--spacings-s24); padding-inline: var(--spacings-s24); } 2940.PageSection-link-29f6d { padding-inline: var(--spacings-s12); margin-bottom: var(--spacings-s8); } 2941.PageSection-more-83ff9 { margin-top: var(--spacings-s6); padding-inline: var(--spacings-s24); padding-block: var(--spacings-s10); } 2942.Footer-btn-da208 { padding-inline: var(--spacings-s12); margin-bottom: var(--spacings-s48); } 2943.Footer-imgContainer-78280 { align-items: center; background-color: var(--background-colors-tint-1); display: grid; gap: 20px; grid-template-columns: auto auto; padding: 20px 12px; } 2944.Footer-img-8e358 { width: 120px; } 2945.Page-root-1f75d { background-color: var(--positive-colors-base-default); display: flex; flex-direction: column; left: calc(-100% - var(--spacings-s32)); min-height: 100vh; max-width: 100%; position: fixed; top: 0px; transition: left 0.5s ease-in; width: 327px; } 2946.Page-rootHeight-e1d9b { min-height: 100dvh; } 2947.Page-container-713ff { display: flex; flex-direction: column; flex-grow: 1; } 2948.Page-body-4836a { flex-grow: 1; } 2949.Page-visible-1e02a { left: 0px; } 2950.Menu-root-9183e { background-color: var(--positive-colors-base-default); z-index: 1001; } 2951.Menu-container-b8c70 { padding: var(--spacings-s10); } 2952.Menu-overlay-05f17 { background-color: var(--background-colors-transparent); height: 100vh; position: fixed; top: 0px; left: 0px; z-index: 1000; width: 100vw; } 2953.MobileHeader-root-38287 { align-items: center; display: flex; background-color: var(--positive-colors-base-default); border-bottom: 1px solid var(--background-colors-tint-3); height: 81px; justify-content: space-between; position: sticky; top: 0px; padding-right: var(--spacings-s10); } 2954.MobileHeader-root-38287 .sign { border-radius: var(--corner-radius-r24); } 2955.MobileHeader-noProfile-74774 { padding-block: var(--spacings-s12); padding-inline: var(--spacings-s10); } 2956.MobileHeader-left-3632c { align-items: center; display: flex; } 2957.MobileHeader-menuButtons-eb179 { display: flex; gap: var(--spacings-s8); align-items: center; } 2958.MobileHeader-right-e10ee { width: 100%; display: flex; align-items: center; justify-content: flex-end; gap: var(--spacings-s8); } 2959.AuthActions-root-73e91 { display: flex; align-items: center; height: 100%; } 2960.AuthActions-actionHolder-7edb2 { display: inline-block; } 2961[dir="rtl"] .AuthActions-actionHolder-7edb2 { margin-left: var(--spacings-s24); } 2962.EmbeddedLogin-host-a6da3 { position: fixed; inset: 0px; z-index: 1002; display: flex; align-items: center; justify-content: center; pointer-events: none; } 2963.EmbeddedLogin-host-a6da3 > * { pointer-events: auto; } 2964.EmbeddedLogin-hidden-c1298 { clip-path: inset(100%); opacity: 0; } 2965.EmbeddedLogin-hidden-c1298 > * { pointer-events: none; } 2966.EmbeddedLogin-root-03e93 { position: relative; background: var(--background-colors-popover); height: 540px; max-height: 100vh; width: 830px; max-width: 100%; border-radius: var(--corner-radius-r20); box-sizing: border-box; overflow: hidden; } 2967@media screen and (max-width: 768px) { 2968 .EmbeddedLogin-root-03e93 { position: absolute; top: var(--spacings-s0); left: var(--spacings-s0); width: 100%; max-width: none; height: 100%; border-radius: var(--corner-radius-r0); } 2969} 2970.EmbeddedLogin-frame-c2413 { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; } 2971.EmbeddedLogin-frame-c2413 > iframe { flex: 1 1 auto; } 2972.EmbeddedLogin-loading-45c81 { position: absolute; inset: 0px; width: 100%; height: 100%; } 2973.EmbeddedLogin-error-6354c { position: absolute; inset: 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacings-s16); padding: var(--spacings-s24); text-align: center; color: var(--text-colors-base); background: var(--background-colors-popover); } 2974.EmbeddedLogin-errorTitle-ffe8a { font-weight: 600; } 2975.EmbeddedLogin-errorDescription-cb4bf { color: var(--text-colors-tint-2); word-break: break-word; } 2976.EmbeddedLogin-closeButton-03f4d { position: absolute; top: var(--spacings-s12); right: var(--spacings-s12); z-index: 1; cursor: pointer; fill: var(--positive-colors-text-default); } 2977.ToolCard-root-33a80 { flex-direction: column; justify-content: center; align-items: center; cursor: pointer; display: flex; gap: var(--spacings-s4); width: 68px; } 2978.ToolCard-toolImageWrapper-5fd47 { overflow: hidden; border-radius: var(--corner-radius-r12); min-height: 68px; height: 68px; width: 100%; display: flex; align-items: center; justify-content: center; } 2979.ToolCard-toolsImage-40836 { height: 100%; width: 100%; object-fit: cover; } 2980.ToolCard-text-778db { overflow: hidden; text-overflow: ellipsis; } 2981.ToolsAutocomplete-root-2e4e9 { padding-inline: var(--spacings-s16); } 2982.ToolsAutocomplete-toolCard-c4edd { flex-shrink: 0; } 2983.ToolsAutocomplete-toolsScrollableWrapper-4616f { align-items: baseline; padding-block-end: var(--spacings-s16); margin-block-start: var(--spacings-s12); overflow-x: auto; display: flex; gap: var(--spacings-s8); } 2984.KeywordAutocomplete-root-058a2 { display: flex; flex-direction: column; gap: var(--spacings-s8); } 2985.KeywordAutocomplete-open-558ca { gap: var(--spacings-s12); } 2986.KeywordAutocomplete-title-eef50 { padding-inline-start: var(--spacings-s16); padding-block-end: var(--spacings-s8); } 2987.KeywordAutocomplete-autocompleteListTextItem-89e85 { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: flex; align-items: center; width: 100%; gap: var(--spacings-s6); padding: var(--spacings-s4) var(--spacings-s16); cursor: pointer; } 2988@media (hover: hover) and (pointer: fine) { 2989 .KeywordAutocomplete-autocompleteListTextItem-89e85:hover { background: var(--control-colors-button-background-action); } 2990} 2991.KeywordAutocomplete-autocompleteText-8d19d { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 2992.RecentlySearchItem-root-5d759 { overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: space-between; width: 100%; } 2993.RecentlySearchItem-textAndStartIconWrapper-2d3db { display: flex; gap: var(--spacings-s6); min-width: 0px; } 2994.RecentlySearchItem-removeIcon-08f91, .RecentlySearchItem-iconClock-9644a { flex-shrink: 0; } 2995.RecentlySearchGrid-root-aeb02 { display: flex; flex-wrap: wrap; gap: var(--spacings-s8); } 2996.RecentlySearchChips-root-e684b { padding-inline-end: var(--spacings-s8); display: flex; flex-flow: row; gap: var(--spacings-s8); overflow-x: auto; scrollbar-width: none; } 2997.RecentlySearchChips-root-e684b::-webkit-scrollbar { display: none; } 2998.RecentlySearchChips-chip-65a5f { flex-shrink: 0; max-width: 280px; } 2999.PopularSearchImageCardOld-root-dc1ce { width: 125px; height: 136px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--background-colors-tint-3); border-radius: var(--corner-radius-r16); padding: var(--spacings-s10); cursor: pointer; box-sizing: border-box; } 3000.PopularSearchImageCardOld-image-66f31 { height: 100%; width: 100%; object-fit: contain; } 3001.PopularSearchImageCardOld-imagePlaceholder-4815b.PopularSearchImageCardOld-imagePlaceholder-4815b { width: 105px; height: 90px; aspect-ratio: 1.136 / 1; } 3002.PopularSearchImageCardOld-imagePlaceholderOpen-82db0.PopularSearchImageCardOld-imagePlaceholderOpen-82db0 { width: 100%; height: auto; aspect-ratio: 1.136 / 1; } 3003.PopularSearchImageCardOld-label-bc984 { margin-top: var(--spacings-s10); font-weight: 500; color: var(--positive-colors-text-default); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } 3004.PopularSearchImageCardOld-mobileRoot-4e882 { display: grid; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--background-colors-tint-3); border-radius: var(--corner-radius-r16); padding: var(--spacings-s12) var(--spacings-s12) var(--spacings-s10) var(--spacings-s12); cursor: pointer; box-sizing: border-box; } 3005.PopularSearchImageCardNew-root-3d810 { display: flex; flex-direction: column; height: 100%; min-height: 0px; flex: 1 1 0%; cursor: pointer; } 3006.PopularSearchImageCardNew-imageContainer-3fd37 { flex: 1 1 0%; min-height: 0px; width: 100%; display: flex; flex-direction: column; padding: var(--spacings-s8); border-radius: var(--corner-radius-r8); border: 1px solid var(--background-colors-tint-2); background-color: var(--background-colors-tint-1); overflow: hidden; } 3007.PopularSearchImageCardNew-image-07506 { flex: 1 1 0%; min-height: 0px; width: 100%; border-radius: var(--corner-radius-r8); display: block; } 3008.PopularSearchImageCardNew-titleDescriptionContainer-75fc9 { flex-shrink: 0; } 3009.PopularSearchListItem-root-0a16b { padding: var(--spacings-s4) 0; cursor: pointer; } 3010.PopularSearchListItem-root-0a16b:hover { background-color: var(--background-colors-tint-1); } 3011.DefaultTool-root-fda60 { cursor: pointer; display: flex; align-items: center; gap: var(--spacings-s6); padding: var(--spacings-s4) var(--spacings-s16); } 3012@media (hover: hover) and (pointer: fine) { 3013 .DefaultTool-root-fda60:hover { background: var(--control-colors-field-background-action); } 3014} 3015</style> 3016 <style data-prerender-css data-original-href="/assets/runtime-core-QIBLcLI3.css"> 3017[data-checkout-tier] { --checkout-accent: var(--primary-colors-base-default); --checkout-accent-action: var(--primary-colors-base-action); --checkout-accent-active: var(--primary-colors-base-active); --checkout-accent-active-action: var(--primary-colors-base-active-action);
3017 --checkout-trial-rundown-active: #c209c1; --checkout-features-gradient: linear-gradient(224deg, rgba(253, 151, 80, .15) 0%, rgba(255, 99, 225, .15) 100%); --checkout-gradient: var(--gradients-monetization-plus); } 3018[data-checkout-tier="pro"], [data-checkout-tier="max_performance"], [data-checkout-tier="max_starter"] { --checkout-accent: var(--monetization-pro-colors-base-default); --checkout-accent-action: var(--monetization-pro-colors-base-action); --checkout-accent-active: var(--monetization-pro-colors-base-active); --checkout-accent-active-action: var(--monetization-pro-colors-base-active-action); --checkout-trial-rundown-active: #9c66f5; --checkout-features-gradient: linear-gradient(224deg, rgba(222, 45, 239, .15) 0%, rgba(142, 63, 220, .15) 100%); --checkout-gradient: var(--gradients-monetization-pro); } 3019[data-checkout-tier="power"] { --checkout-accent: var(--monetization-ultra-colors-base-default); --checkout-accent-action: var(--monetization-ultra-colors-base-action); --checkout-accent-active: var(--monetization-ultra-colors-base-active); --checkout-accent-active-action: var(--monetization-ultra-colors-base-active-action); --checkout-trial-rundown-active: var(--monetization-ultra-colors-base-default); } 3020.Modal-icon-f4f56 { fill: var(--text-colors-tint-1); } 3021.Modal-focusTrap-42dee { height: 1px; width: 1px; opacity: 0; position: absolute; pointer-events: none; } 3022.Modal-bottomSheetWrapper-d4416 { height: calc(100% + var(--spacings-s32)); transform: translateY(-32px); } 3023.Modal-bottomSheet-44629 { position: relative; overflow: hidden; z-index: -1; } 3024.Modal-popup-7facf > div { padding: 0px; } 3025.Modal-popup-7facf > div > button { z-index: 5; } 3026.Modal-popupInner-e2282 { position: relative; width: 100%; height: 100%; transform: translateZ(0px); overflow: hidden; } 3027.TextLogo-logo-de08f { font-weight: 700; font-size: var(--typography-t9-font-size); display: inline-block; line-height: 1; -webkit-text-fill-color: transparent; background-clip: text; } 3028.TextLogo-maxPerformance-91a0b { background-image: linear-gradient(315deg, rgb(90, 0, 238) 14.64%, rgb(105, 154, 210) 85.36%); } 3029.TextLogo-maxStarter-d9476, .TextLogo-plus-3f1aa, .TextLogo-power-e2700 { background-image: var(--gradients-monetization-plus); } 3030.TextLogo-pro-c2ac4 { background-image: var(--gradients-monetization-pro); } 3031.TextLogo-free-df984 { background-image: none; } 3032.TierLogo-logo-626a3 { display: block; max-width: 80%; height: 25px; } 3033.TierLogo-hidden-6ea78 { display: none; } 3034.TierLogo-picsartLogo-5ad6a { display: block; height: 20px; width: auto; fill: var(--absolute-white-colors-base-default); } 3035html.light .TierLogo-picsartLogo-5ad6a { fill: var(--absolute-black-colors-base-default); } 3036.TierLogo-textLogo-c4b85 { display: inline-block; font-weight: 700; font-size: var(--typography-t9-font-size); line-height: 1; white-space: nowrap; } 3037.TierLogo-textLogo-c4b85 em { -webkit-text-fill-color: transparent; background-clip: text; margin-left: 0.2em; font-style: inherit; } 3038.TierLogo-textLogo-c4b85.TierLogo-pro-3d832 em { background-image: var(--gradients-monetization-pro); } 3039.TierLogo-textLogo-c4b85.TierLogo-plus-9ea37 em, .TierLogo-textLogo-c4b85.TierLogo-maxStarter-dec82 em { background-image: var(--gradients-monetization-plus); } 3040.TierLogo-textLogo-c4b85.TierLogo-power-2fc41 em { background-image: var(--gradients-monetization-ultra); } 3041.TierLogo-textLogo-c4b85.TierLogo-maxPerformance-6c1a8 em { background-image: linear-gradient(315deg, rgb(90, 0, 238) 14.64%, rgb(105, 154, 210) 85.36%); } 3042.TierLogo-lockupLogo-418e2 { height: 0.75em; width: auto; vertical-align: baseline; fill: var(--absolute-white-colors-base-default); } 3043html.light .TierLogo-lockupLogo-418e2 { fill: var(--absolute-black-colors-base-default); } 3044.StepHeader-root-61a7f { justify-content: space-between; margin-bottom: var(--spacings-s12); align-items: center; display: flex; } 3045.ViewHeader-root-78255 { display: grid; grid-template-columns: minmax(0px, 1fr) auto; align-items: center; row-gap: var(--spacings-s12); width: 100%; padding: var(--spacings-s0) var(--spacings-s24); margin-bottom: var(--spacings-s24); color: var(--text-colors-base); } 3046@media screen and (max-width: 1365px), screen and (max-height: 767px) { 3047 .ViewHeader-root-78255 { row-gap: var(--spacings-s12); } 3048} 3049@media screen and (max-width: 766px) { 3050 .ViewHeader-root-78255 { grid-template-columns: minmax(0px, 1fr); row-gap: var(--spacings-s12); padding: var(--spacings-s16) var(--spacings-s16) var(--spacings-s0); } 3051} 3052.ViewHeader-rootCompact-0d420 { row-gap: var(--spacings-s8); } 3053@media screen and (max-width: 766px) { 3054 .ViewHeader-rootCompact-0d420 { row-gap: var(--spacings-s12); } 3055} 3056.ViewHeader-rootCompact-0d420.ViewHeader-hasTitleSlot-beac0 { row-gap: var(--spacings-s12); } 3057.ViewHeader-title-2ddfe { grid-column: 1; order: 1; margin: var(--spacings-s0); font-weight: 700; text-align: center; font-size: var(--typography-t10-font-size); line-height: var(--typography-t10-line-height); } 3058@media screen and (max-width: 767px) { 3059 .ViewHeader-title-2ddfe { font-size: var(--typography-t9-font-size); line-height: var(--typography-t9-line-height); } 3060} 3061@media screen and (max-width: 766px) { 3062 .ViewHeader-title-2ddfe { order: 2; font-size: var(--typography-t8-font-size); line-height: var(--typography-t8-line-height); } 3063} 3064.ViewHeader-titleCompact-71805 { text-align: unset; font-size: var(--typography-t9-font-size); line-height: var(--typography-t9-line-height); } 3065@media screen and (max-width: 767px) { 3066 .ViewHeader-titleCompact-71805 { font-size: var(--typography-t8-font-size); line-height: var(--typography-t8-line-height); } 3067} 3068@media screen and (max-width: 766px) { 3069 .ViewHeader-titleCompact-71805 { text-align: center; } 3070} 3071.ViewHeader-titleSlot-b91c3 { grid-column: 2; justify-self: end; margin-left: var(--spacings-s8); order: 2; } 3072@media screen and (max-width: 766px) { 3073 .ViewHeader-titleSlot-b91c3 { grid-column: 1; justify-self: stretch; margin-left: var(--spacings-s0); order: 1; width: 100%; } 3074} 3075.ViewHeader-description-c64c5 { grid-column: 1; order: 3; min-height: 50px; margin: var(--spacings-s0); font-weight: 600; color: var(--text-colors-tint-1); text-align: center; align-content: center; font-size: var(--typography-t7-font-size); line-height: var(--typography-t7-line-height); } 3076@media screen and (max-width: 767px) { 3077 .ViewHeader-description-c64c5 { font-size: var(--typography-t6-font-size); line-height: var(--typography-t6-line-height); } 3078} 3079@media screen and (max-width: 766px) { 3080 .ViewHeader-description-c64c5 { font-size: var(--typography-t5-font-size); line-height: var(--typography-t5-line-height); } 3081} 3082.ViewHeader-descriptionCompact-c39bd { text-align: unset; font-size: var(--typography-t5-font-size); line-height: var(--typography-t5-line-height); } 3083@media screen and (max-width: 766px) { 3084 .ViewHeader-descriptionCompact-c39bd { text-align: center; } 3085} 3086.ViewHeader-descriptionSlot-f804b { grid-column: 2; justify-self: end; margin-left: var(--spacings-s8); order: 4; } 3087@media screen and (max-width: 766px) { 3088 .ViewHeader-descriptionSlot-f804b { grid-column: 1; justify-self: center; margin-left: var(--spacings-s0); } 3089} 3090.CheckoutFlowLayout-root-bffcd { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; overflow: auto; position: relative; padding-top: var(--spacings-s40); padding-bottom: var(--spacings-s40); scrollbar-width: none; } 3091.CheckoutFlowLayout-root-bffcd::-webkit-scrollbar { display: none; } 3092@media screen and (max-width: 767px) { 3093 .CheckoutFlowLayout-root-bffcd { padding-bottom: var(--spacings-s0); } 3094} 3095.CheckoutFlowLayout-rootCompact-597bb { padding: var(--spacings-s48) var(--spacings-s48) var(--spacings-s24); } 3096@media screen and (max-width: 767px) { 3097 .CheckoutFlowLayout-rootCompact-597bb { padding: var(--spacings-s24) var(--spacings-s0) var(--spacings-s0); } 3098} 3099.CheckoutFlowLayout-imageFooter-342fb { position: absolute; left: 0px; right: 0px; bottom: 0px; z-index: 0; pointer-events: none; } 3100.CheckoutFlowLayout-imageFooter-342fb::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(180deg,transparent 50%,var(--background-colors-base) 100%); } 3101@media screen and (max-width: 766px) { 3102 .CheckoutFlowLayout-imageFooter-342fb { display: none; } 3103} 3104.CheckoutFlowLayout-decorativeImage-05f61 { width: 100%; height: 100%; object-fit: contain; } 3105.CheckoutFlowLayout-flowSwitcherContainer-aab2d { width: 100%; padding-inline: var(--spacings-s16); } 3106.CheckoutFlowLayout-content-fe9ae { border-radius: var(--corner-radius-r16); flex-direction: column; align-items: center; display: flex; width: 100%; z-index: 1; } 3107@media screen and (max-width: 767px) { 3108 .CheckoutFlowLayout-content-fe9ae { padding: 80px 24px 32px; max-width: 100%; } 3109} 3110@media screen and (max-width: 766px) { 3111 .CheckoutFlowLayout-content-fe9ae { margin: 0px; padding: var(--spacings-s0) var(--spacings-s16) var(--spacings-s8); flex: 1 1 0%; overflow: auto; scrollbar-width: none; } 3112 .CheckoutFlowLayout-content-fe9ae::-webkit-scrollbar { display: none; } 3113} 3114.SegmentToggle-segments-7be4f { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: auto; border: 1px solid var(--background-colors-border); font-weight: 600; font-size: var(--typography-t5-font-size); } 3115.SegmentToggle-segment-6f429 { border: 1px solid transparent; background: none; min-width: 138px; display: flex; align-items: center; justify-content: center; } 3116.SegmentToggle-segment-6f429 > div { display: flex; align-items: center; justify-content: center; flex-grow: 0; } 3117.SegmentToggle-active-fb3f8 { background-color: var(--control-colors-button-background-active); border: 1px solid var(--control-colors-button-background-active); }
3118.SegmentToggle-icon-66d6e { width: 20px; height: 20px; fill: var(--text-colors-base); } 3119.FlowSwitcher-segmentToggle-9e8ca { width: min(100%, 572px); margin: var(--spacings-s0) auto var(--spacings-s24); } 3120@media screen and (max-width: 767px) { 3121 .FlowSwitcher-segmentToggle-9e8ca { margin: var(--spacings-s0) auto; } 3122} 3123.FlowSwitcher-segmentToggleCompact-ff763 { max-width: 383px; margin: var(--spacings-s0); } 3124@media screen and (max-width: 766px) { 3125 .FlowSwitcher-segmentToggleCompact-ff763 { width: 100%; max-width: none; } 3126} 3127.Taxes-taxContainerWrapper-234b7 { margin-top: var(--spacings-s16); } 3128.Taxes-priceContainer-33d78 { display: flex; flex-direction: row; justify-content: space-between; color: var(--text-colors-tint-1); font-weight: 500; font-size: var(--typography-t3-font-size); line-height: 1.33; } 3129.Taxes-priceContainer-33d78 .Taxes-highlighted-b0a54 { font-weight: 700; } 3130.Taxes-totalPriceContainer-cd7bf { display: flex; flex-direction: row; justify-content: space-between; font-weight: 600; font-size: var(--typography-t5-font-size); line-height: 1.5; color: var(--text-colors-base); } 3131.Taxes-totalPriceContainer-cd7bf .Taxes-highlighted-b0a54 { font-weight: 700; } 3132.Taxes-newVariant-02802 .Taxes-priceContainer-33d78 { font-weight: 600; } 3133.Taxes-newVariant-02802 .Taxes-totalPriceContainer-cd7bf { font-size: var(--typography-t3-font-size); } 3134.Taxes-lineThrough-5d446 { text-decoration: line-through; margin-right: var(--spacings-s4); font-size: var(--typography-t2-font-size); color: var(--text-colors-tint-3); } 3135.Taxes-highlighted-b0a54 { color: var(--checkout-accent); } 3136.Taxes-dueToday-be835 { justify-content: space-between; font-weight: 700; font-size: var(--typography-t5-font-size); margin-top: var(--spacings-s16); flex-direction: row; color: var(--text-colors-base); line-height: 1.5; display: flex; } 3137.Taxes-divider-cf731 { margin: var(--spacings-s4) var(--spacings-s0); } 3138.Taxes-discountLabel-51a9a { display: inline-flex; align-items: center; gap: var(--spacings-s8); } 3139.Taxes-promoTag-7479c.Taxes-promoTag-7479c { background: color-mix(in srgb,var(--success-colors-base-default) 16%,transparent); color: var(--success-colors-base-default); text-transform: uppercase; } 3140.Taxes-discountAmount-8c42b { color: var(--success-colors-base-default); } 3141.Taxes-orderSummary-b99cc { border-top: 1px solid var(--background-colors-border); margin-top: var(--spacings-s24); padding-top: var(--spacings-s16); display: flex; flex-direction: column; gap: var(--spacings-s10); } 3142.Taxes-orderSummary-b99cc .Taxes-priceContainer-33d78 { font-size: var(--typography-t5-font-size); font-weight: 500; line-height: 1.5; } 3143.Taxes-orderSummary-b99cc .Taxes-totalPriceContainer-cd7bf { font-size: var(--typography-t7-font-size); font-weight: 700; margin-top: var(--spacings-s6); } 3144.Taxes-orderSummary-b99cc .Taxes-dueToday-be835 { margin-top: var(--spacings-s0); font-size: var(--typography-t5-font-size); font-weight: 500; color: var(--text-colors-tint-1); } 3145.Taxes-orderSummary-b99cc .Taxes-divider-cf731 { margin: var(--spacings-s0) var(--spacings-s0); } 3146@media screen and (min-width: 768px) { 3147 .Taxes-orderSummary-b99cc .Taxes-lineThrough-5d446 { font-size: var(--typography-t4-font-size); } 3148 .Taxes-orderSummary-b99cc .Taxes-totalPriceContainer-cd7bf .Taxes-lineThrough-5d446 { font-size: var(--typography-t6-font-size); } 3149} 3150.CheckoutScrollbars-scrollbars-43b2b { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; } 3151.CheckoutScrollbars-scrollbars-43b2b.CheckoutScrollbars-scrollable-084c6 { border-bottom: 1px solid var(--background-colors-tint-3); } 3152.CheckoutScrollbars-thumb-8c3d6 { background-color: var(--background-colors-tint-3); cursor: pointer; border-radius: var(--corner-radius-r4); } 3153.CheckoutScrollbars-track-f7472 { padding: var(--spacings-s32) var(--spacings-s0); height: 100%; right: 8px; } 3154.CheckoutScrollbars-hidden-72617 { display: none; } 3155.SavedPaymentMethodViewer-checkoutLabel-b81ca { font-weight: 600; font-size: var(--typography-t4-font-size); line-height: 1.4; margin-bottom: var(--spacings-s8); color: var(--text-colors-tint-1); } 3156.SavedPaymentMethodViewer-container-e4b61 { border: 1px solid var(--background-colors-tint-3); border-radius: var(--corner-radius-r8); padding: var(--spacings-s16); display: flex; align-items: stretch; justify-content: flex-end; position: relative; } 3157.SavedPaymentMethodViewer-labelCont-6c8a9 { position: absolute; top: 20px; left: 16px; } 3158.SavedPaymentMethodViewer-dataCont-07d01 { margin-right: var(--spacings-s16); flex: 1 1 0%; display: flex; flex-direction: column; } 3159.SavedPaymentMethodViewer-placeHolder-b1deb { min-height: 24px; } 3160.SavedPaymentMethodViewer-creditCardData-bec07 { display: flex; align-items: flex-end; font-size: var(--typography-t4-font-size); font-weight: 500; line-height: 20px; color: var(--text-colors-base); }
3161.SavedPaymentMethodViewer-hideIcon-299c7 { display: none; } 3162.SavedPaymentMethodViewer-creditCardBig-0d43c { margin-right: var(--spacings-s8); width: 24px; height: 24px; display: inline-block; fill: var(--text-colors-base); } 3163.SavedPaymentMethodViewer-creditCardBig-0d43c path { fill: var(--text-colors-base); } 3164.SavedPaymentMethodViewer-paypalLogoCont-620d8 { max-height: 24px; } 3165.SavedPaymentMethodViewer-paypalLogoCont-620d8 picture { max-height: 24px; } 3166.SavedPaymentMethodViewer-paypalLogo-d2fdc { height: 24px; } 3167.SavedPaymentMethodViewer-billingAddress-40338 { display: inline-block; margin-top: var(--spacings-s8); font-size: var(--typography-t4-font-size); font-weight: 500; line-height: 20px; word-break: break-word; color: var(--text-colors-tint-1); } 3168.SavedPaymentMethodViewer-billingAddressBold-eeeaf { font-weight: 600; color: var(--text-colors-base); } 3169.SavedPaymentMethodViewer-buttonWrapper-76456 { display: flex; align-items: center; flex-basis: 80px; } 3170.SavedPaymentMethodViewer-button-97edd { max-height: 32px; padding: 0px; flex-shrink: 0; } 3171.js-iframe { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color-scheme: auto; height: 100%; overflow: hidden; width: 100%; } 3172.adyen-checkout-card-input__wrapper { position: relative; } 3173.adyen-checkout-card-input__icon { border-radius: var(--adyen-sdk-border-radius-s,4px); height: 18px; margin-right: var(--adyen-sdk-spacer-060,12px); width: 27px; } 3174.adyen-checkout-card-input__form { opacity: 1; } 3175.adyen-checkout-card-input__spinner { display: none; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; z-index: 1; } 3176.adyen-checkout-card-input__spinner--active { display: block; } 3177.adyen-checkout-card-input__form--loading { opacity: 0; } 3178.adyen-checkout__input { display: block; max-height: 100px; } 3179.adyen-checkout__field.adyen-checkout__card__cvc__input--hidden { display: none; } 3180.revolving-plan-installments__disabled { opacity: 0.4; pointer-events: none; } 3181.adyen-checkout__card__cardNumber { max-width: 400px; } 3182.adyen-checkout__card__cardNumber__input { padding-left: var(--adyen-sdk-spacer-060,12px); } 3183.adyen-checkout__card__holderName { margin-bottom: 0px; } 3184.adyen-checkout__card-input .adyen-checkout__fieldset--billingAddress, .adyen-checkout__card__holderName, .adyen-checkout__card__kcp-authentication, .adyen-checkout__card__socialSecurityNumber, .adyen-checkout__installments { margin-top: var(--adyen-sdk-spacer-070,16px); } 3185.adyen-checkout__card-input.adyen-checkout__card-input--loading { pointer-events: none; } 3186.adyen-checkout__card__holderName:first-child { margin: 0 0 var(--adyen-sdk-spacer-060,12px); } 3187.adyen-checkout__field--cardNumber .adyen-checkout__input--error + .adyen-checkout-brand-wrapper, .adyen-checkout__field--cardNumber .adyen-checkout__input--valid:not(.adyen-checkout__card__cardNumber__input--noBrand) + .adyen-checkout-input__inline-validation--valid { display: none; } 3188.adyen-checkout__field--securityCode.adyen-checkout__field--error .adyen-checkout__card__cvc__hint, .adyen-checkout__field--securityCode.adyen-checkout__field--valid .adyen-checkout__card__cvc__hint { opacity: 0; } 3189@keyframes cvc-indicate-location { 3190 0% { opacity: 1; } 3191 100% { opacity: 0.3; } 3192} 3193.adyen-checkout__label--focused .adyen-checkout__field__cvc--back-hint .adyen-checkout__card__cvc__hint--back .adyen-checkout__card__cvc__hint__location, .adyen-checkout__label--focused .adyen-checkout__field__cvc--front-hint .adyen-checkout__card__cvc__hint--front .adyen-checkout__card__cvc__hint__location { animation-direction: alternate; animation-duration: 1s; animation-iteration-count: infinite; animation-name: cvc-indicate-location; } 3194.adyen-checkout__card__cvc__hint__wrapper { align-items: center; backface-visibility: visible; display: flex; height: 100%; margin-right: var(--adyen-sdk-spacer-060,12px); position: absolute; right: 0px; transform: translateZ(0px); transform-origin: center center; transform-style: preserve-3d; transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); width: 27px; will-change: transform; } 3195.adyen-checkout__field__cvc--front-hint.adyen-checkout__card__cvc__hint__wrapper { transform: rotateY(180deg); } 3196.adyen-checkout__card__cvc__hint { backface-visibility: hidden; border-radius: var(--adyen-sdk-border-radius-s,4px); box-shadow: var(--adyen-sdk-shadow-low,0 2px 4px rgba(0,17,44,.04),0 1px 2px rgba(0,17,44,.02)); position: absolute; transition: opacity 0.1s linear; } 3197.adyen-checkout__card__cvc__hint--front { transform: rotateY(180deg); } 3198@media (prefers-reduced-motion: reduce) { 3199 .adyen-checkout__card__cvc__hint__wrapper { transition: none; } 3200} 3201.adyen-checkout__fieldset--revolving-plan .adyen-checkout__fieldset__fields { justify-content: left; } 3202.adyen-checkout__fieldset--revolving-plan .adyen-checkout__radio_group { display: flex; flex-direction: column; } 3203.adyen-checkout__fieldset--revolving-plan .adyen-checkout__radio_group__input-wrapper { margin-top: var(--adyen-sdk-spacer-080,20px); } 3204.adyen-checkout__fieldset--revolving-plan .adyen-checkout__field--revolving-plan-installments { height: 100%; margin-left: var(--adyen-sdk-spacer-070,16px); position: relative; top: 52px; width: 30%; } 3205.adyen-checkout__card-input .adyen-checkout__fieldset--dual-brand-switcher { margin-top: var(--adyen-sdk-spacer-070,16px); } 3206.adyen-checkout__card-input .adyen-checkout__fieldset--dual-brand-switcher .adyen-checkout__fieldset__title { padding-bottom: 0px; } 3207.adyen-checkout__card-input .adyen-checkout__fieldset--dual-brand-switcher .adyen-checkout-form-instruction { margin: 0px; } 3208.adyen-checkout__spinner__wrapper { align-items: center; display: flex; height: 100%; justify-content: center; } 3209.adyen-checkout__spinner__wrapper--inline { display: inline-block; height: auto; margin-right: var(--adyen-sdk-spacer-040,8px); } 3210[dir="rtl"] .adyen-checkout__spinner__wrapper--inline { margin-left: var(--adyen-sdk-spacer-040,8px); margin-right: 0px; } 3211.adyen-checkout__spinner { height: var(--adyen-sdk-spacer-090,24px); position: relative; width: var(--adyen-sdk-spacer-090,24px); } 3212.adyen-checkout__spinner::after, .adyen-checkout__spinner::before { animation: 1s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s infinite normal none running rotate; border: var(--adyen-sdk-border-width-l,3px) solid transparent; border-radius: 50%; box-sizing: border-box; content: ""; display: block; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; } 3213.adyen-checkout__spinner::before { border-right-color: ; border-bottom-color: ; border-left-color: ; border-top-color: transparent; opacity: 0.1; } 3214.adyen-checkout__spinner::after { border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; border-top-color: var(--adyen-sdk-color-outline-primary-active,#00112c); } 3215.adyen-checkout__spinner--small { height: var(--adyen-sdk-spacer-070,16px); width: var(--adyen-sdk-spacer-070,16px); } 3216.adyen-checkout__spinner--small::after, .adyen-checkout__spinner--small::before { border-width: var(--adyen-sdk-spacer-010,2px); } 3217.adyen-checkout__spinner--medium { height: 28px; width: 28px; } 3218.adyen-checkout__spinner--large { height: var(--adyen-sdk-spacer-120,48px); width: var(--adyen-sdk-spacer-120,48px); } 3219.adyen-checkout__spinner--large::after, .adyen-checkout__spinner--large::before { border-width: var(--adyen-sdk-spacer-020,4px); } 3220@keyframes rotate { 3221 0% { transform: rotate(0deg); } 3222 100% { transform: rotate(1turn); } 3223} 3224.loading-input__form { opacity: 1; } 3225.loading-input__form--loading { opacity: 0; } 3226.loading-input__spinner { display: none; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; z-index: 1; } 3227.loading-input__spinner--active { display: block; } 3228.adyen-checkout__image { display: block; opacity: 0; transition: opacity 0.6s ease-out; } 3229.adyen-checkout__image--loaded { opacity: 1; } 3230.adyen-checkout__field { display: block; margin-bottom: var(--adyen-sdk-spacer-070,16px); width: 100%; } 3231.adyen-checkout__field-static-value { background-color: var(--adyen-sdk-color-background-primary-hover,#f7f7f8); border-radius: var(--adyen-sdk-border-radius-s,4px); color: var(--adyen-sdk-color-background-inverse-primary,#00112c
3231); display: flex; font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); height: 28px; line-height: var(--adyen-sdk-text-body-line-height,20px); margin-left: var(--adyen-sdk-spacer-020,4px); padding: var(--adyen-sdk-spacer-020,4px) var(--adyen-sdk-spacer-030,6px); } 3232.adyen-checkout__field--no-borders .adyen-checkout__input-wrapper { background-color: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; box-shadow: none; } 3233.adyen-checkout__field--no-borders .adyen-checkout__input-wrapper:active, .adyen-checkout__field--no-borders .adyen-checkout__input-wrapper:active:hover, .adyen-checkout__field--no-borders .adyen-checkout__input-wrapper:focus-within, .adyen-checkout__field--no-borders .adyen-checkout__input-wrapper:focus-within:hover { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; box-shadow: none; } 3234.adyen-checkout__field--no-borders .adyen-checkout__input-wrapper:hover { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; box-shadow: none; } 3235@media (min-width: 480px) { 3236 .adyen-checkout__field--20 { width: 20%; } 3237 .adyen-checkout__field--30 { width: 30%; } 3238 .adyen-checkout__field--40 { width: 40%; } 3239 .adyen-checkout__field--50 { width: 50%; } 3240 .adyen-checkout__field--60 { width: 60%; } 3241 .adyen-checkout__field--70 { width: 70%; } 3242 .adyen-checkout__field--80 { width: 80%; } 3243 .adyen-checkout__field--col-20 { width: calc(20% - var(--adyen-sdk-spacer-040, 8px)); } 3244 .adyen-checkout__field--col-30 { width: calc(30% - var(--adyen-sdk-spacer-040, 8px)); } 3245 .adyen-checkout__field--col-40 { width: calc(40% - var(--adyen-sdk-spacer-040, 8px)); } 3246 .adyen-checkout__field--col-50 { width: calc(50% - var(--adyen-sdk-spacer-040, 8px)); } 3247 .adyen-checkout__field--col-60 { width: calc(60% - var(--adyen-sdk-spacer-040, 8px)); } 3248 .adyen-checkout__field--col-70 { width: calc(70% - var(--adyen-sdk-spacer-040, 8px)); } 3249 .adyen-checkout__field--col-80 { width: calc(80% - var(--adyen-sdk-spacer-040, 8px)); } 3250} 3251.adyen-checkout__input-wrapper { align-items: center; background: var(--adyen-sdk-color-background-primary,#ffffff); border: var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-outline-primary,#dbdee2); border-radius: var(--adyen-sdk-border-radius-m,8px); display: flex; position: relative; } 3252.adyen-checkout__input-wrapper div, .adyen-checkout__input-wrapper input, .adyen-checkout__input-wrapper span { border-radius: inherit; } 3253.adyen-checkout__input-wrapper button, .adyen-checkout__input-wrapper div, .adyen-checkout__input-wrapper input { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; } 3254.adyen-checkout__input-wrapper:active, .adyen-checkout__input-wrapper:active:hover, .adyen-checkout__input-wrapper:focus-within, .adyen-checkout__input-wrapper:focus-within:hover { border-color: var(--adyen-sdk-color-outline-primary-active,#00112c); box-shadow: 0 0 0 .5px var(--adyen-sdk-color-outline-primary-active,#00112c); } 3255.adyen-checkout__input-wrapper:hover { border-color: var(--adyen-sdk-color-outline-tertiary,#8d95a3); } 3256.adyen-checkout__field--inactive > .adyen-checkout__input-wrapper { background: var(--adyen-sdk-color-background-disabled,#eeeff1); border-color: transparent; } 3257.adyen-checkout__field--error > :not(.adyen-checkout__label--focused) + .adyen-checkout__input-wrapper:not(:focus-within, :active) { border-color: var(--adyen-sdk-color-outline-critical,#e22d2d); } 3258.adyen-checkout__label { display: block; position: relative; } 3259.adyen-checkout__label--focused + .adyen-checkout__input-wrapper { border-color: var(--adyen-sdk-color-outline-primary-active,#00112c); box-shadow: 0 0 0 .5px var(--adyen-sdk-color-outline-primary-active,#00112c); } 3260.adyen-checkout__label--disabled + .adyen-checkout__input-wrapper { background: var(--adyen-sdk-color-background-disabled,#eeeff1); border-color: transparent; } 3261.adyen-checkout__helper-text { color: var(--adyen-sdk-color-label-primary,#00112c
3261); display: block; font-size: var(--adyen-sdk-text-caption-font-size,.75rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); line-height: var(--adyen-sdk-text-caption-line-height,18px); margin-bottom: var(--adyen-sdk-spacer-020,4px); } 3262.adyen-checkout__label-adornment--end { position: absolute; right: 0px; top: 0px; } 3263.adyen-checkout__label__text { color: var(--adyen-sdk-color-label-primary,#00112c); display: block; font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: var(--adyen-sdk-text-body-stronger-font-weight,500); line-height: var(--adyen-sdk-text-body-line-height,20px); margin-bottom: var(--adyen-sdk-spacer-020,4px); overflow: hidden; text-overflow: ellipsis; transition: color 0.1s ease-out; white-space: nowrap; } 3264.adyen-checkout__label__text--error { color: var(--adyen-sdk-color-label-critical,#c72727); } 3265.adyen-checkout__label--focused .adyen-checkout__label__text { color: var(--adyen-sdk-color-label-primary,#00112c); } 3266.adyen-checkout-contextual-text, .adyen-checkout-contextual-text--error { align-items: center;
3266 color: var(--adyen-sdk-color-label-primary,#00112c); display: flex; font-size: var(--adyen-sdk-text-caption-font-size,.75rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); line-height: var(--adyen-sdk-text-caption-line-height,18px); margin-top: var(--adyen-sdk-spacer-020,4px); opacity: 1; transition: margin 0.2s ease-out, opacity 0.2s ease-out; } 3267.adyen-checkout-contextual-text--error { color: var(--adyen-sdk-color-label-critical,#c72727); } 3268.adyen-checkout-contextual-text--hidden { height: 0px; margin: 0px; opacity: 0; } 3269.adyen-checkout__field__cvc .adyen-checkout__input-wrapper { cursor: text; } 3270.adyen-checkout__filter-input:-webkit-autofill, .adyen-checkout__input:-webkit-autofill { color: var(--adyen-sdk-color-label-primary,#00112c) !important; -webkit-text-fill-color: var(--adyen-sdk-color-label-primary,#00112c) !important; background-clip: text !important; background-color: var(--adyen-sdk-color-label-primary,#00112c) !important; box-shadow: 0 0 0 1000px var(--adyen-sdk-color-background-primary,#ffffff) inset !important; transition: none !important; } 3271.adyen-checkout__filter-input:-webkit-autofill, .adyen-checkout__filter-input:-webkit-autofill:active, .adyen-checkout__filter-input:-webkit-autofill:focus, .adyen-checkout__filter-input:-webkit-autofill:hover, .adyen-checkout__filter-input:autofill, .adyen-checkout__input:-webkit-autofill, .adyen-checkout__input:-webkit-autofill:active, .adyen-checkout__input:-webkit-autofill:focus, .adyen-checkout__input:-webkit-autofill:hover, .adyen-checkout__input:autofill { color: var(--adyen-sdk-color-label-primary,#00112c
3271) !important; -webkit-text-fill-color: var(--adyen-sdk-color-label-primary,#00112c) !important; background-clip: text !important; background-color: var(--adyen-sdk-color-label-primary,#00112c) !important; box-shadow: 0 0 0 1000px var(--adyen-sdk-color-background-primary,#ffffff) inset !important; transition: none !important; } 3272.adyen-checkout__filter-input, .adyen-checkout__input { background-clip: text !important; color: var(--adyen-sdk-color-label-primary,#00112c) !important; } 3273.adyen-checkout__field-wrapper { display: flex; width: 100%; } 3274.adyen-checkout__field-wrapper > .adyen-checkout__field:first-child { margin-right: var(--adyen-sdk-spacer-040,8px); } 3275[dir="rtl"] .adyen-checkout__field-wrapper > .adyen-checkout__field:first-child { margin-left: var(--adyen-sdk-spacer-040,8px); margin-right: 0px; } 3276.adyen-checkout__field-wrapper > .adyen-checkout__field:nth-child(2) { margin-left: var(--adyen-sdk-spacer-040,8px); } 3277[dir="rtl"] .adyen-checkout__field-wrapper > .adyen-checkout__field:nth-child(2) { margin-left: 0px; margin-right: var(--adyen-sdk-spacer-040,8px); } 3278.adyen-checkout__field-wrapper:last-of-type > .adyen-checkout__field { margin-bottom: 0px; } 3279.adyen-checkout__input { background: inherit;
3279 color: var(--adyen-sdk-color-label-primary,#00112c); display: block; font-family: inherit; font-size: var(--adyen-sdk-text-subtitle-font-size,1rem); height: var(--adyen-sdk-spacer-110,40px); outline: none; padding-left: var(--adyen-sdk-spacer-060,12px); transition: border 0.2s ease-out, box-shadow 0.2s ease-out; width: 100%; } 3280.adyen-checkout__input:required { box-shadow: none; } 3281.adyen-checkout__input:disabled, .adyen-checkout__input:read-only { color: var(--adyen-sdk-color-label-secondary,#5c687c) !important; cursor: default; } 3282span.adyen-checkout__input { overflow: hidden; } 3283.adyen-checkout-input__inline-validation { height: var(--adyen-sdk-spacer-070,16px); margin-right: var(--adyen-sdk-spacer-060,12px); width: var(--adyen-sdk-spacer-070,16px); } 3284[dir="rtl"] .adyen-checkout-input__inline-validation { margin-left: var(--adyen-sdk-spacer-060,12px); } 3285.adyen-checkout-input__inline-validation > .adyen-checkout__icon { display: block; } 3286.adyen-checkout-input__inline-validation--invalid { color: var(--adyen-sdk-color-label-critical,#c72727); } 3287.adyen-checkout__input--date { padding: 0.5em; } 3288.adyen-checkout__fieldset { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; display: block; margin-inline: 0px; margin: 0px; padding-block: 0px; padding-bottom: var(--adyen-sdk-spacer-040,8px); padding-inline: 0px; width: 100%; } 3289.adyen-checkout__fieldset__description { color: var(--adyen-sdk-color-label-secondary,#5c687c); font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); line-height: 1.5; list-style-type: disc; margin: 0px; } 3290.adyen-checkout__fieldset:last-of-type { padding-bottom: 0px; } 3291.adyen-checkout__fieldset + .adyen-checkout__fieldset { margin-top: var(--adyen-sdk-spacer-070,16px); } 3292.adyen-checkout__fieldset__title { color: var(--adyen-sdk-color-label-primary,#00112c
3292); display: block; font-size: var(--adyen-sdk-text-subtitle-font-size,1rem); font-weight: var(--adyen-sdk-text-subtitle-font-weight,500); line-height: var(--adyen-sdk-text-subtitle-line-height,26px); margin: 0px; padding: 0 0 var(--adyen-sdk-spacer-060,12px); } 3293.adyen-checkout__fieldset__title:has(+ .adyen-checkout__fieldset__description) { padding: 0px; } 3294.adyen-checkout__fieldset__fields { display: flex; flex-wrap: wrap; gap: var(--adyen-sdk-spacer-070,16px); width: 100%; } 3295.adyen-checkout__fieldset__fields > .adyen-checkout__field { margin-bottom: 0px; } 3296.adyen-checkout__fieldset--readonly .adyen-checkout__fieldset__fields { color: var(--adyen-sdk-color-label-primary,#00112c); font-size: var(--adyen-sdk-text-body-font-size,.875rem); line-height: var(--adyen-sdk-text-caption-line-height,18px); margin: 0px; } 3297.adyen-checkout__card__exp-date__input--oneclick { font-weight: var(--adyen-sdk-text-body-font-weight,400); line-height: var(--adyen-sdk-text-title-line-height,26px); overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; } 3298.adyen-checkout__radio_group + .adyen-checkout-input__inline-validation { display: none; } 3299.adyen-checkout__radio_group__input { opacity: 0; position: absolute; } 3300.adyen-checkout__radio_group__label { color: inherit; display: block; font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: 400; line-height: var(--adyen-sdk-text-body-line-height,20px); margin: 0px; overflow: visible; padding-bottom: 0px; padding-left: var(--adyen-sdk-spacer-090,24px); position: relative; } 3301.adyen-checkout__label--focused .adyen-checkout__radio_group__label { color: inherit; } 3302.adyen-checkout__radio_group__label::before { background-color: var(--adyen-sdk-color-background-primary,#ffffff); border: var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-outline-tertiary,#8d95a3); border-radius: 50%; content: ""; height: var(--adyen-sdk-spacer-070,16px); left: 0px; position: absolute; top: var(--adyen-sdk-spacer-010,2px); transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out; width: var(--adyen-sdk-spacer-070,16px); } 3303.adyen-checkout__radio_group__label:hover::before { box-shadow: 0 0 0 var(--adyen-sdk-spacer-010,2px) var(--adyen-sdk-color-outline-primary-hover,#c9cdd3); cursor: pointer; } 3304.adyen-checkout__radio_group__label::after { background-color: var(--adyen-sdk-color-background-primary,#ffffff); border-radius: 50%; box-shadow: rgba(0, 15, 45, 0.25) 0px 1px 1px; content: ""; display: block; height: var(--adyen-sdk-spacer-030,6px); left: 5px; margin: 0px auto; position: absolute; top: 7px; transform: scale(0); transition: transform 0.2s ease-out; width: var(--adyen-sdk-spacer-030,6px); } 3305.adyen-checkout__radio_group__label:hover { border-color: var(--adyen-sdk-color-label-primary,#00112c
3305); cursor: pointer; } 3306.adyen-checkout__radio_group__input:checked + .adyen-checkout__radio_group__label::before { background-color: var(--adyen-sdk-color-label-primary,#00112c); border: 0px; transition: 0.2s ease-out; } 3307.adyen-checkout__radio_group__input:checked + .adyen-checkout__radio_group__label::after { transform: scale(1); } 3308.adyen-checkout__radio_group__input:focus + .adyen-checkout__radio_group__label::before { border-color: var(--adyen-sdk-color-label-primary,#00112c); } 3309.adyen-checkout__radio_group__input:checked + .adyen-checkout__radio_group__label:hover::before, .adyen-checkout__radio_group__input:checked:active + .adyen-checkout__radio_group__label::before, .adyen-checkout__radio_group__input:checked:focus + .adyen-checkout__radio_group__label::before, .adyen-checkout__radio_group__input:focus + .adyen-checkout__radio_group__label::before { box-shadow: 0 0 0 var(--adyen-sdk-spacer-010,2px) var(--adyen-sdk-color-outline-tertiary,#8d95a3); } 3310.adyen-checkout__radio_group__label.adyen-checkout__radio_group__label--invalid::before { border: var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-outline-critical,#e22d2d); } 3311.adyen-checkout__radio_group--button { align-items: flex-start; align-self: stretch; display: flex; flex-wrap: wrap; gap: var(--adyen-sdk-spacer-070,16px); width: 100%; } 3312.adyen-checkout__radio_group--button .adyen-checkout__radio_group__input-wrapper { display: flex; flex: 1 0 0px; } 3313.adyen-checkout__radio_group--button .adyen-checkout__radio_group__label::after { left: calc(var(--adyen-sdk-spacer-060, 12px) + 5px); position: absolute; top: calc(50% - var(--adyen-sdk-spacer-030, 6px)/2); } 3314.adyen-checkout__radio_group--button .adyen-checkout__radio_group__label::before { left: calc(var(--adyen-sdk-spacer-060, 12px)); position: absolute; top: calc(50% - var(--adyen-sdk-spacer-070, 16px)/2); } 3315.adyen-checkout__radio_group--button .adyen-checkout__radio_group__label { background-color: var(--adyen-sdk-color-background-primary,#ffffff); border: var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-outline-primary,#dbdee2); border-radius: var(--adyen-sdk-border-radius-m,8px); padding-top: ; padding-right: ; padding-bottom: ; padding-left: calc(var(--adyen-sdk-spacer-060, 12px) + var(--adyen-sdk-spacer-090, 24px)); width: 100%; } 3316.adyen-checkout__radio_group--button .adyen-checkout__radio_group__input + .adyen-checkout__radio_group__label:hover, .adyen-checkout__radio_group--button .adyen-checkout__radio_group__input:checked + .adyen-checkout__radio_group__label { border-color: var(--adyen-sdk-color-outline-primary-active,#00112c); } 3317.adyen-checkout__radio_group--button .adyen-checkout__radio_group__input:checked:active + .adyen-checkout__radio_group__label, .adyen-checkout__radio_group--button .adyen-checkout__radio_group__input:checked:focus + .adyen-checkout__radio_group__label { border-color: var(--adyen-sdk-color-outline-primary-active,#00112c); box-shadow: 0 0 0 .5px var(--adyen-sdk-color-outline-primary-active,#00112c); } 3318.adyen-checkout__dropdown { max-width: 100%; position: relative; } 3319.adyen-checkout__dropdown, .adyen-checkout__dropdown__button { font-size: var(--adyen-sdk-text-subtitle-font-size,1rem); width: 100%; } 3320.adyen-checkout__dropdown__button { align-items: center; background: inherit; border-radius: inherit;
3320 color: var(--adyen-sdk-color-label-primary,#00112c); cursor: pointer; display: flex; height: var(--adyen-sdk-spacer-110,40px); line-height: var(--adyen-sdk-text-body-line-height,20px); outline: 0px; padding: 0 var(--adyen-sdk-spacer-060,12px); text-decoration: none; transition: border 0.2s ease-out, box-shadow 0.2s ease-out; user-select: none; } 3321[dir="rtl"] .adyen-checkout__dropdown__button { padding: 7px var(--adyen-sdk-spacer-060,12px) 7px var(--adyen-sdk-spacer-090,24px); } 3322.adyen-checkout__dropdown__button::after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' fill='none' viewBox='0 0 16 17'%3E%3Cpath fill='%2300112c' fill-rule='evenodd' d='M4.47 6.47a.75.75 0 0 1 1.06 0L8 8.94l2.47-2.47a.75.75 0 0 1 1.06 1.06l-3 3a.75.75 0 0 1-1.06 0l-3-3a.75.75 0 0 1 0-1.06' clip-rule='evenodd'/%3E%3C/svg%3E"); background-position: 50% center; background-repeat: no-repeat; content: ""; height: var(--adyen-sdk-spacer-030,6px); position: absolute; right: var(--adyen-sdk-spacer-070,16px); width: var(--adyen-sdk-spacer-040,8px); } 3323[dir="rtl"] .adyen-checkout__dropdown__button::after { left: var(--adyen-sdk-spacer-070,16px); right: auto; } 3324.adyen-checkout__dropdown__button--active::after { transform: rotate(180deg); } 3325.adyen-checkout__dropdown__button--disabled { opacity: 0.4; } 3326.adyen-checkout__dropdown__button--readonly, .adyen-checkout__dropdown__button--readonly--active, .adyen-checkout__dropdown__button--readonly:focus, .adyen-checkout__dropdown__button--readonly:hover { background: var(--adyen-sdk-color-background-disabled,#eeeff1); border-color: transparent;
3326 color: var(--adyen-sdk-color-label-primary,#00112c); cursor: not-allowed; } 3327.adyen-checkout__dropdown__button--readonly::after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' fill='none' viewBox='0 0 8 7'%3E%3Cpath fill='%23b9c4c9' d='M3.195 6.565a1 1 0 0 0 1.6 0l2.992-3.98a1 1 0 0 0-.8-1.602H1.013a1 1 0 0 0-.8 1.6z'/%3E%3C/svg%3E"); } 3328.adyen-checkout__dropdown__button--invalid { border-color: var(--adyen-sdk-color-outline-critical,#e22d2d); } 3329.adyen-checkout__dropdown__button__icon { border-radius: 3px; height: 26px; margin-right: var(--adyen-sdk-spacer-060,12px); max-width: var(--adyen-sdk-spacer-110,40px); } 3330.adyen-checkout__dropdown__button__text { flex-grow: 1; overflow: hidden; pointer-events: none; text-align: left; text-overflow: ellipsis; white-space: nowrap; } 3331.adyen-checkout__dropdown__button__text-placeholder { color: var(--adyen-sdk-color-label-secondary,#5c687c); } 3332.adyen-checkout__dropdown__button__secondary-text { margin-right: var(--adyen-sdk-spacer-070,16px); } 3333.adyen-checkout__filter-input { background: inherit; border: 0px;
3333 color: var(--adyen-sdk-color-label-primary,#00112c); font-family: inherit; font-size: var(--adyen-sdk-text-subtitle-font-size,1rem); height: 100%; padding: 0px; width: 100%; } 3334.adyen-checkout__filter-input:active, .adyen-checkout__filter-input:focus { outline: 0px; } 3335.adyen-checkout__filter-input[readonly] { border-color: transparent; cursor: not-allowed; color: var(--adyen-sdk-color-label-secondary,#5c687c) !important; } 3336.adyen-checkout__dropdown__list { background: var(--adyen-sdk-color-background-primary,#ffffff); border-radius: var(--adyen-sdk-border-radius-m,8px); box-shadow: 0 var(--adyen-sdk-spacer-010,2px) 7px #000f2d4d; display: none; list-style: none; margin: 0 0 var(--adyen-sdk-spacer-120,48px); max-height: 375px; overflow-y: auto; padding: 0px; position: absolute; width: 100%; z-index: 2; } 3337.adyen-checkout__dropdown__list.adyen-checkout__dropdown__list--active { display: block; margin-top: var(--adyen-sdk-spacer-010,2px); } 3338.adyen-checkout__dropdown__element { align-items: center; border: var(--adyen-sdk-border-width-s,1px) solid transparent; cursor: pointer; display: flex; font-size: var(--adyen-sdk-text-body-font-size,.875rem); hyphens: auto; line-height: var(--adyen-sdk-text-body-line-height,20px); outline: 0px; padding: var(--adyen-sdk-spacer-040,8px); transition: background 0.2s ease-out, border-color 0.2s ease-out; user-select: none; word-break: break-word; } 3339.adyen-checkout__dropdown__element .adyen-checkout__icon { position: absolute; right: var(--adyen-sdk-spacer-040,8px); } 3340.adyen-checkout__dropdown__element:last-child { border-bottom: 0px; } 3341.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active { background: rgba(230, 233, 235, 0.6); border-radius: var(--adyen-sdk-border-radius-m,8px); box-shadow: inset 0 0 0 var(--adyen-sdk-border-width-s,1px) var(--adyen-sdk-color-outline-primary-active,#00112c); } 3342.adyen-checkout__dropdown__element:hover { background: rgba(230, 233, 235, 0.6); } 3343.adyen-checkout__dropdown__element--disabled { cursor: not-allowed; opacity: 0.4; } 3344.adyen-checkout__dropdown__element__icon { border-radius: var(--adyen-sdk-border-radius-s,4px); margin-right: var(--adyen-sdk-spacer-060,12px); max-height: 26px; max-width: var(--adyen-sdk-spacer-110,40px); } 3345.adyen-checkout__dropdown__element__text { flex-grow: 1; } 3346.adyen-checkout__dropdown__element__secondary-text:not(:last-child) { margin-right: var(--adyen-sdk-spacer-040,8px); } 3347.adyen-checkout__dropdown + .adyen-checkout-input__inline-validation { right: var(--adyen-sdk-spacer-100,32px); } 3348.adyen-checkout__installments--revolving-plan .adyen-checkout__input-wrapper { background-color: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; box-shadow: none; } 3349.adyen-checkout__installments--revolving-plan .adyen-checkout__input-wrapper:active, .adyen-checkout__installments--revolving-plan .adyen-checkout__input-wrapper:active:hover, .adyen-checkout__installments--revolving-plan .adyen-checkout__input-wrapper:focus-within, .adyen-checkout__installments--revolving-plan .adyen-checkout__input-wrapper:focus-within:hover { box-shadow: none; } 3350.adyen-checkout__installments--revolving-plan .adyen-checkout__fieldset--revolving-plan { margin-top: -5px; } 3351.adyen-checkout-disclaimer__label { color: var(--adyen-sdk-color-label-secondary,#5c687c); display: inline-block; font-size: var(--adyen-sdk-text-caption-font-size,.75rem); font-weight: 400; line-height: var(--adyen-sdk-text-caption-line-height,18px); margin-top: var(--adyen-sdk-spacer-070,16px); padding-left: 0px; } 3352[dir="rtl"] .adyen-checkout-disclaimer__label { padding-right: 0px; } 3353.adyen-checkout-link { --text-decoration: none; color: var(--adyen-sdk-color-label-highlight,#0070f5); text-decoration: var(--text-decoration); } 3354.adyen-checkout-link:focus-visible { outline: none; } 3355.adyen-checkout-link:active, .adyen-checkout-link:hover { --text-decoration: underline; } 3356.adyen-checkout-link:focus-visible { border-radius: var(--adyen-sdk-border-radius-xs,2px); box-shadow: 0 0 0 1px #fff,0 0 0 3px var(--adyen-sdk-focus-ring-color,rgba(0,112,245,.8)); transition: 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86); } 3357.adyen-checkout-brand-wrapper { align-items: center; border-radius: var(--adyen-sdk-border-radius-s,4px); box-shadow: var(--adyen-sdk-shadow-low,0 2px 4px rgba(0,17,44,.04),0 1px 2px rgba(0,17,44,.02)); display: flex; justify-content: center; overflow: hidden; position: relative; } 3358.adyen-checkout-brand-wrapper--error { display: none; } 3359.adyen-checkout__field--cardNumber .adyen-checkout__input-wrapper { cursor: text; } 3360.adyen-checkout__field--cardNumber .adyen-checkout-brand-wrapper { border-radius: var(--adyen-sdk-border-radius-s,4px); margin-right: var(--adyen-sdk-spacer-060,12px); } 3361.adyen-checkout__field--cardNumber .adyen-checkout-card-input__icon { margin-right: 0px; } 3362.adyen-checkout__card__dual-branding__icons { display: flex; } 3363.adyen-checkout__card__dual-branding__icons .adyen-checkout__card__cardNumber__brandIcon { opacity: 1; } 3364.adyen-checkout__card__dual-branding__sr-only { border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; } 3365.DualBrandSelector-module_dualBrandSelector__Fz7UW { background-color: var(--adyen-sdk-color-background-tertiary,#eeeff1); border-radius: var(--adyen-sdk-border-radius-m,8px); display: flex; gap: var(--adyen-sdk-spacer-020,4px); margin-right: var(--adyen-sdk-spacer-060,12px); padding: var(--adyen-sdk-spacer-020,4px); } 3366.DualBrandSelector-module_dualBrandSelectorButton__3Dxem { align-items: center; background-color: transparent; border: 1px solid transparent; border-radius: var(--adyen-sdk-border-radius-s,4px); cursor: pointer; display: flex; height: 24px; justify-content: center; padding: 0px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; width: 34px; } 3367.DualBrandSelector-module_dualBrandSelectorButton__3Dxem:hover { background-color: var(--adyen-sdk-color-background-primary,#ffffff); border-color: var(--adyen-sdk-color-outline-primary,#dbdee2); box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 4px; } 3368.DualBrandSelector-module_dualBrandSelectorButtonSelected__EswTK { background-color: var(--adyen-sdk-color-background-primary,#ffffff); box-shadow: inset 0 0 0 .5px var(--adyen-sdk-color-outline-primary,#dbdee2),0 2px 4px #00000080; } 3369.DualBrandSelector-module_dualBrandSelectorIcon__qeN0L { border-radius: var(--adyen-sdk-border-radius-s,4px); height: 16px; width: 24px; } 3370.adyen-checkout__field.adyen-checkout__card__exp-date__input--hidden { display: none; } 3371.adyen-checkout__card__exp-cvc__exp-date__input--hidden { justify-content: flex-end; } 3372.adyen-checkout__field__exp-date .adyen-checkout__input-wrapper { cursor: text; } 3373.adyen-checkout__input-wrapper .adyen-checkout__field__exp-date_hint_wrapper { border-radius: var(--adyen-sdk-border-radius-s,4px); height: 18px; margin-right: var(--adyen-sdk-spacer-060,12px); position: absolute; right: 0px; transition: opacity 0.1s linear; width: 27px; } 3374.adyen-checkout__input-wrapper .adyen-checkout__field__exp-date_hint_wrapper.adyen-checkout__field__exp-date_hint_wrapper--hidden { opacity: 0; } 3375.adyen-checkout__field__exp-date_hint { height: 18px; width: 27px; } 3376.BrandIcons-module_container__FeCxK { align-items: center; display: flex; flex-basis: auto; flex-wrap: wrap; gap: var(--adyen-sdk-spacer-040,8px); margin: var(--adyen-sdk-spacer-020,4px) var(--adyen-sdk-spacer-000,0); } 3377.BrandIcons-module_grid__wb0DE { display: grid; grid-template-columns: repeat(auto-fill,minmax(var(--adyen-sdk-spacer-110,40px),1fr)); } 3378.BrandIcons-module_smallImgGrid__iCMqT { grid-template-columns: repeat(auto-fill,minmax(var(--adyen-sdk-spacer-090,24px),1fr)); } 3379.BrandIcons-module_remainingBrandsLabel__v0FKS { color: var(--adyen-sdk-color-label-secondary,#5c687c); font-size: var(--adyen-sdk-text-body-font-size,.875rem); } 3380.BrandIcons-module_img__Oe3i- { display: block; height: var(--adyen-sdk-spacer-090,24px); padding: 0px; width: var(--adyen-sdk-spacer-110,40px); } 3381.BrandIcons-module_smallImg__GwOZ0 { height: var(--adyen-sdk-spacer-070,16px); width: var(--adyen-sdk-spacer-090,24px); } 3382.adyen-checkout__card__brands { margin-bottom: var(--adyen-sdk-spacer-060,12px); margin-top: calc(var(--adyen-sdk-spacer-040, 8px)*-1); } 3383.adyen-checkout__card__brands--hidden { margin: -8px 0px 8px; max-height: 0px; min-height: 0px; opacity: 0; } 3384.adyen-checkout__card__exp-cvc { display: flex; flex-wrap: wrap; gap: var(--adyen-sdk-spacer-070,16px); width: 100%; } 3385.adyen-checkout__card__exp-cvc > .adyen-checkout__field { margin-bottom: 0px; } 3386@media (min-width: 480px) { 3387 .adyen-checkout__card__exp-cvc .adyen-checkout__field { margin-bottom: 0px; } 3388} 3389.adyen-checkout__checkbox { display: flex; width: 100%; } 3390.adyen-checkout__checkbox__label { color: var(--adyen-sdk-color-label-primary,#00112c
3390); cursor: pointer; display: inline-block; flex: 1 1 0%; font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: 400; line-height: var(--adyen-sdk-text-caption-line-height,18px); padding-left: var(--adyen-sdk-spacer-090,24px); position: relative; user-select: none; } 3391[dir="rtl"] .adyen-checkout__checkbox__label { padding-left: 0px; padding-right: var(--adyen-sdk-spacer-090,24px); } 3392.adyen-checkout__checkbox__input { opacity: 0; pointer-events: none; position: absolute; } 3393.adyen-checkout__checkbox__input:checked + .adyen-checkout__checkbox__label::before { opacity: 1; } 3394.adyen-checkout__checkbox__input:checked + .adyen-checkout__checkbox__label::after { background-color: var(--adyen-sdk-color-label-primary,#00112c); border: var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-label-primary,#00112c); } 3395.adyen-checkout__checkbox__input:checked:hover + .adyen-checkout__checkbox__label::after { border-color: var(--adyen-sdk-color-label-primary,#00112c); box-shadow: 0 0 0 var(--adyen-sdk-spacer-010,2px) var(--adyen-sdk-color-outline-tertiary,#8d95a3); } 3396.adyen-checkout__checkbox__input:focus + .adyen-checkout__checkbox__label::after { border: var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-label-primary,#00112c
3396); box-shadow: 0 0 0 var(--adyen-sdk-spacer-010,2px) var(--adyen-sdk-color-outline-tertiary,#8d95a3); } 3397.adyen-checkout__checkbox__input:hover:not(:focus) + .adyen-checkout__checkbox__label::after { border-color: var(--adyen-sdk-color-outline-tertiary,#8d95a3); box-shadow: 0 0 0 var(--adyen-sdk-spacer-010,2px) var(--adyen-sdk-color-outline-primary-hover,#c9cdd3); } 3398.adyen-checkout__checkbox__input + .adyen-checkout__checkbox__label::before { border-bottom: var(--adyen-sdk-spacer-010,2px) solid var(--adyen-sdk-color-label-on-color,#ffffff); border-left: 1px solid transparent; border-radius: 0 var(--adyen-sdk-spacer-010,2px) 1px; border-right: var(--adyen-sdk-spacer-010,2px) solid var(--adyen-sdk-color-label-on-color,#ffffff); border-top: 1px solid transparent; content: ""; height: 11px; left: 1px; opacity: 0; position: absolute; top: var(--adyen-sdk-spacer-010,2px); transform: rotate(37deg); transform-origin: 100% 100%; transition: opacity 0.2s ease-out; width: var(--adyen-sdk-spacer-030,6px); z-index: 1; } 3399[dir="rtl"] .adyen-checkout__checkbox__input + .adyen-checkout__checkbox__label::before { left: auto; right: var(--adyen-sdk-spacer-040,8px); } 3400.adyen-checkout__checkbox__input + .adyen-checkout__checkbox__label::after { background-color: var(--adyen-sdk-color-background-primary,#ffffff); border: var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-outline-primary,#dbdee2); border-radius: var(--adyen-sdk-border-radius-s,4px); content: ""; height: var(--adyen-sdk-spacer-070,16px); left: 0px; position: absolute; top: 0px; transition: background 0.15s ease-out, border 0.05s ease-out, box-shadow 0.1s ease-out; width: var(--adyen-sdk-spacer-070,16px); z-index: 0; } 3401[dir="rtl"] .adyen-checkout__checkbox__input + .adyen-checkout__checkbox__label::after { left: auto; right: 0px; } 3402.adyen-checkout__field--consentCheckbox { align-items: center; background: var(--adyen-sdk-color-background-primary,#ffffff); border: var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-outline-primary,#dbdee2); border-radius: var(--adyen-sdk-border-radius-m,8px); display: flex; } 3403.adyen-checkout__field--consentCheckbox, [dir="rtl"] .adyen-checkout__field--consentCheckbox { padding: var(--adyen-sdk-spacer-060,12px) var(--adyen-sdk-spacer-070,16px); } 3404.adyen-checkout__field--consentCheckbox .adyen-checkout__input-wrapper { background-color: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; box-shadow: none; flex: 1 1 0%; justify-content: space-between; } 3405.adyen-checkout__field--consentCheckbox .adyen-checkout__input-wrapper:active, .adyen-checkout__field--consentCheckbox .adyen-checkout__input-wrapper:active:hover, .adyen-checkout__field--consentCheckbox .adyen-checkout__input-wrapper:focus-within, .adyen-checkout__field--consentCheckbox .adyen-checkout__input-wrapper:focus-within:hover { box-shadow: none; } 3406.adyen-checkout__field--consentCheckbox.adyen-checkout__field--error { border-color: var(--adyen-sdk-color-outline-critical,#e22d2d); } 3407.adyen-checkout__field--consentCheckbox .adyen-checkout-input__inline-validation { margin-right: 0px; } 3408[dir="rtl"] .adyen-checkout__field--consentCheckbox .adyen-checkout-input__inline-validation { margin-left: 0px; } 3409.adyen-checkout__store-details { align-items: center; background: var(--adyen-sdk-color-background-primary,#ffffff); border: var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-outline-primary,#dbdee2); border-radius: var(--adyen-sdk-border-radius-m,8px); display: flex; gap: var(--adyen-sdk-spacer-060,12px); margin-top: var(--adyen-sdk-spacer-070,16px); padding: var(--adyen-sdk-spacer-060,12px) var(--adyen-sdk-spacer-070,16px); } 3410.adyen-checkout__address-search { position: relative; } 3411.adyen-checkout__address-search .adyen-checkout__dropdown__button::after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23687282' d='M6.5 11.9a4.5 4.5 0 0 0 2.6-.83l2.77 2.74c.13.13.3.19.48.19.38 0 .65-.29.65-.66a.63.63 0 0 0-.19-.46l-2.75-2.73a4.4 4.4 0 0 0 .92-2.7 4.48 4.48 0 0 0-8.98 0 4.48 4.48 0 0 0 4.5 4.45m0-.96a3.53 3.53 0 0 1-3.53-3.49 3.52 3.52 0 0 1 7.04 0c0 1.9-1.59 3.49-3.52 3.49Z'/%3E%3C/svg%3E"); background-position: 50% center; background-repeat: no-repeat; content: ""; height: var(--adyen-sdk-spacer-070,16px); left: var(--adyen-sdk-spacer-060,12px); position: absolute; width: var(--adyen-sdk-spacer-070,16px); } 3412.adyen-checkout__address-search .adyen-checkout__dropdown__button--active::after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%2300112c' d='M6.5 11.9a4.5 4.5 0 0 0 2.6-.83l2.77 2.74c.13.13.3.19.48.19.38 0 .65-.29.65-.66a.63.63 0 0 0-.19-.46l-2.75-2.73a4.4 4.4 0 0 0 .92-2.7 4.48 4.48 0 0 0-8.98 0 4.48 4.48 0 0 0 4.5 4.45m0-.96a3.53 3.53 0 0 1-3.53-3.49 3.52 3.52 0 0 1 7.04 0c0 1.9-1.59 3.49-3.52 3.49Z'/%3E%3C/svg%3E"); transform: none; } 3413.adyen-checkout__address-search .adyen-checkout__filter-input { padding-left: calc(var(--adyen-sdk-spacer-040, 8px) + var(--adyen-sdk-spacer-070, 16px)); position: relative; } 3414.adyen-checkout__address-search__manual-add { position: absolute; right: 0px; top: 0px; } 3415.adyen-checkout__address-search__manual-add .adyen-checkout__address-search__manual-add__button { border: 0px; padding: 0px; } 3416.adyen-checkout__fieldset--address .adyen-checkout__field-group { display: flex; flex-wrap: wrap; gap: var(--adyen-sdk-spacer-070,16px); width: 100%; } 3417.adyen-checkout__fieldset--address .adyen-checkout__field-group > .adyen-checkout__field { margin-bottom: 0px; } 3418.adyen-checkout-form-instruction { color: var(--adyen-sdk-color-label-primary,#00112c
3418); font-size: var(--adyen-sdk-text-caption-font-size,.75rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); line-height: var(--adyen-sdk-text-caption-line-height,18px); margin-bottom: var(--adyen-sdk-spacer-070,16px); margin-top: 0px; } 3419[dir="rtl"] .adyen-checkout-form-instruction { padding-right: 0px; } 3420.adyen-checkout-toggle { color: inherit; cursor: pointer; display: flex; width: auto; } 3421.adyen-checkout-toggle, .adyen-checkout-toggle *, .adyen-checkout-toggle ::after, .adyen-checkout-toggle ::before, .adyen-checkout-toggle::after, .adyen-checkout-toggle::before { box-sizing: border-box; } 3422.adyen-checkout-toggle--disabled { cursor: not-allowed; display: flex; } 3423.adyen-checkout-toggle--readonly { pointer-events: none; } 3424.adyen-checkout-toggle--label-first { align-items: flex-start; flex-direction: row-reverse; justify-content: flex-end; } 3425.adyen-checkout-toggle__input { cursor: inherit; opacity: 0; position: absolute; } 3426.adyen-checkout-toggle__track { align-items: center; background-color: var(--adyen-sdk-toggle-track-background-color,#ffffff); border: var(--adyen-sdk-toggle-track-border,1px solid #8d95a3); border-radius: var(--adyen-sdk-toggle-track-border-radius,12px); display: flex; height: var(--adyen-sdk-toggle-track-height,20px); min-width: var(--adyen-sdk-toggle-track-width,36px); padding: var(--adyen-sdk-toggle-track-padding,2px 4px); position: relative; } 3427.adyen-checkout-toggle__input:focus-visible + .adyen-checkout-toggle__track { box-shadow: 0 0 0 1px #fff,0 0 0 3px var(--adyen-sdk-focus-ring-color,rgba(0,112,245,.8)); transition: 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86); } 3428.adyen-checkout-toggle__input:hover:enabled + .adyen-checkout-toggle__track { background-color: var(--adyen-sdk-toggle-track-hover-background-color,#f7f7f8); border-color: var(--adyen-sdk-toggle-track-hover-border-color,#6d7789); } 3429.adyen-checkout-toggle__input:active:enabled + .adyen-checkout-toggle__track { background-color: var(--adyen-sdk-toggle-track-active-background-color,#eeeff1); border-color: var(--adyen-sdk-toggle-track-active-border-color,#00112c); } 3430.adyen-checkout-toggle__input:disabled + .adyen-checkout-toggle__track { background-color: var(--adyen-sdk-toggle-track-disabled-background-color,#f7f7f8); border-color: var(--adyen-sdk-toggle-track-disabled-border-color,#dbdee2); cursor: not-allowed; } 3431.adyen-checkout-toggle__input:disabled + .adyen-checkout-toggle__track path { fill: rgb(141, 149, 163); } 3432.adyen-checkout-toggle--readonly .adyen-checkout-toggle__input + .adyen-checkout-toggle__track { background-color: var(--adyen-sdk-toggle-track-readonly-background-color,#f7f7f8); border-color: var(--adyen-sdk-toggle-track-readonly-border-color,#dbdee2); } 3433.adyen-checkout-toggle__input:checked + .adyen-checkout-toggle__track { background-color: var(--adyen-sdk-toggle-track-toggled-background-color,#00112c); border: var(--adyen-sdk-toggle-track-toggled-border,0); padding: var(--adyen-sdk-toggle-track-toggled-padding,2px); } 3434.adyen-checkout-toggle__input:checked:hover:enabled + .adyen-checkout-toggle__track { background-color: var(--adyen-sdk-toggle-track-toggled-hover-background-color,#5c687c); } 3435.adyen-checkout-toggle__input:checked:active:enabled + .adyen-checkout-toggle__track { background-color: var(--adyen-sdk-toggle-track-toggled-active-background-color,#8d95a3); } 3436.adyen-checkout-toggle__input:checked:disabled + .adyen-checkout-toggle__track { background-color: var(--adyen-sdk-toggle-track-toggled-disabled-background-color,#c0c5cc); } 3437.adyen-checkout-toggle--readonly .adyen-checkout-toggle__input:checked + .adyen-checkout-toggle__track { background-color: var(--adyen-sdk-toggle-track-toggled-readonly-background-color,#c0c5cc); } 3438.adyen-checkout-toggle__handle { place-content: center; background-color: var(--adyen-sdk-toggle-handle-background-color,#00112c); border-radius: var(--adyen-sdk-toggle-handle-border-radius,12px); color: var(--adyen-sdk-toggle-handle-toggled-color,#00112c); display: inline-flex; height: var(--adyen-sdk-toggle-handle-height,12px); transition: var(--adyen-sdk-toggle-handle-transition,transform .15s cubic-bezier(.2,0,.4,.9)); width: var(--adyen-sdk-toggle-handle-width,12px); } 3439.adyen-checkout-toggle__input:disabled + * .adyen-checkout-toggle__handle { background-color: var(--adyen-sdk-toggle-handle-disabled-background-color,#8d95a3);
3439 cursor: not-allowed; } 3440.adyen-checkout-toggle__input:checked + * .adyen-checkout-toggle__handle { background-color: var(--adyen-sdk-toggle-handle-toggled-background-color,#ffffff); height: var(--adyen-sdk-toggle-handle-toggled-height,16px); transform: translate(100%); width: var(--adyen-sdk-toggle-handle-toggled-width,16px); } 3441.adyen-checkout-toggle__input:checked:disabled + * .adyen-checkout-toggle__handle { background-color: var(--adyen-sdk-toggle-handle-toggled-disabled-background-color,#eeeff1); color: var(--adyen-sdk-toggle-handle-toggled-disabled-color,#8d95a3); cursor: not-allowed; } 3442.adyen-checkout-toggle--readonly .adyen-checkout-toggle__input:checked + * .adyen-checkout-toggle__handle { background-color: var(--adyen-sdk-toggle-handle-toggled-readonly-background-color,#eeeff1); } 3443.adyen-checkout-toggle__label-container { display: flex; flex-direction: column; font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); line-height: var(--adyen-sdk-text-body-line-height,20px); padding-left: var(--adyen-sdk-toggle-label-padding,16px); } 3444.adyen-checkout-toggle--label-first > .adyen-checkout-toggle__label-container { padding-left: 0px; padding-right: var(--adyen-sdk-toggle-label-padding,16px); } 3445.adyen-checkout-toggle__label { vertical-align: baseline; } 3446.adyen-checkout-toggle__description, .adyen-checkout-toggle__label { font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); line-height: var(--adyen-sdk-text-body-line-height,20px); } 3447.adyen-checkout-toggle__description { color: var(--adyen-sdk-toggle-description-color,#5c687c); padding-top: var(--adyen-sdk-toggle-description-padding,4px); } 3448.adyen-checkout__modal-wrapper { align-items: center; display: flex; height: 100%; left: 0px; overflow-y: auto; overscroll-behavior-y: contain; padding: var(--adyen-sdk-spacer-090,24px); position: fixed; top: 0px; visibility: hidden; width: 100%; z-index: 10; } 3449.adyen-checkout__modal-wrapper::before { background: rgba(0, 17, 44, 0.5); content: ""; height: 100%; left: 0px; opacity: 0; position: fixed; top: 0px; transition: opacity 0.3s linear; width: 100%; z-index: 10; } 3450.adyen-checkout__modal-wrapper--open { visibility: visible; } 3451.adyen-checkout__modal-wrapper--open .adyen-checkout__modal, .adyen-checkout__modal-wrapper--open::before { opacity: 1; } 3452.adyen-checkout__modal { background-color: var(--adyen-sdk-color-background-primary,#ffffff); border-radius: var(--adyen-sdk-border-radius-m,8px); box-shadow: 0 var(--adyen-sdk-spacer-040,8px) var(--adyen-sdk-spacer-090,24px) #00112c26; margin: auto; opacity: 0; padding: var(--adyen-sdk-spacer-070,16px); position: relative; transition: opacity 0.2s, visibility 0.2s; z-index: 11; } 3453.adyen-checkout__button { background: var(--adyen-sdk-color-background-always-dark,#00112c); border: 0px; border-radius: var(--adyen-sdk-border-radius-m,8px); color: var(--adyen-sdk-color-label-on-color,#ffffff); cursor: pointer; font-size: var(--adyen-sdk-text-title-font-size,1rem); font-weight: var(--adyen-sdk-text-body-stronger-font-weight,500); height: var(--adyen-sdk-spacer-120,48px); margin: 0px; padding: var(--adyen-sdk-spacer-060,12px) var(--adyen-sdk-spacer-000,0); text-decoration: none; transition: background 0.3s ease-out, box-shadow 0.3s ease-out; width: 100%; } 3454.adyen-checkout__button:focus-visible { box-shadow: 0 0 0 var(--adyen-sdk-focus-ring-spacer,1px) var(--adyen-sdk-color-background-primary,#ffffff),0 0 0 var(--adyen-sdk-focus-ring-outline,3px) var(--adyen-sdk-focus-ring-color,rgba(0,112,245,.8)); outline: 0px; } 3455.adyen-checkout__button:hover { background: var(--adyen-sdk-color-background-inverse-primary-hover,#5c687c); } 3456.adyen-checkout__button:active { background: var(--adyen-sdk-color-background-always-dark-active,#8d95a3); } 3457.adyen-checkout__button:disabled, .adyen-checkout__button:disabled:hover, .adyen-checkout__button[aria-disabled="true"], .adyen-checkout__button[aria-disabled="true"]:hover { box-shadow: none; cursor: not-allowed; opacity: 0.4; user-select: all; } 3458.adyen-checkout__button.adyen-checkout__button--loading { background: var(--adyen-sdk-color-label-disabled,#8d95a3); box-shadow: none; pointer-events: none; user-select: none; } 3459.adyen-checkout__button.adyen-checkout__button--pay { align-items: center; display: flex; gap: var(--adyen-sdk-spacer-020,4px); justify-content: center; margin-top: var(--adyen-sdk-spacer-070,16px); } 3460.adyen-checkout__button.adyen-checkout__button--pay:disabled { opacity: 0.4; } 3461.adyen-checkout__button.adyen-checkout__button--standalone { margin-top: 0px; } 3462.adyen-checkout__button.adyen-checkout__button--inline { display: block; font-size: 0.81em; height: auto; padding: var(--adyen-sdk-spacer-050,10px) var(--adyen-sdk-spacer-040,8px); width: auto; } 3463.adyen-checkout__button.adyen-checkout__button--ghost { background: none; border: 0px;
3463 color: var(--adyen-sdk-color-label-primary,#00112c); } 3464.adyen-checkout__button.adyen-checkout__button--ghost .adyen-checkout__spinner::before { border-right-color: ; border-bottom-color: ; border-left-color: ; border-top-color: transparent; opacity: 0.1; } 3465.adyen-checkout__button.adyen-checkout__button--ghost .adyen-checkout__spinner::after { border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; border-top-color: var(--adyen-sdk-color-outline-primary-active,#00112c); } 3466.adyen-checkout__button.adyen-checkout__button--ghost:hover { background: var(--adyen-sdk-color-background-secondary-hover,#eeeff1); } 3467.adyen-checkout__button.adyen-checkout__button--ghost:active { background: var(--adyen-sdk-color-background-secondary-active,#e3e5e9); box-shadow: none; } 3468.adyen-checkout__button.adyen-checkout__button--secondary { background: var(--adyen-sdk-color-background-primary,#ffffff); border: var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-label-primary,#00112c);
3468 color: var(--adyen-sdk-color-label-primary,#00112c); padding: var(--adyen-sdk-spacer-050,10px) var(--adyen-sdk-spacer-060,12px); } 3469.adyen-checkout__button.adyen-checkout__button--secondary .adyen-checkout__spinner::before { border-right-color: ; border-bottom-color: ; border-left-color: ; border-top-color: transparent; opacity: 0.1; } 3470.adyen-checkout__button.adyen-checkout__button--secondary .adyen-checkout__spinner::after { border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; border-top-color: var(--adyen-sdk-color-outline-primary-active,#00112c); } 3471.adyen-checkout__button.adyen-checkout__button--secondary:hover { background: var(--adyen-sdk-color-background-secondary,#f7f7f8); } 3472.adyen-checkout__button.adyen-checkout__button--secondary:hover:not(:focus-visible) { box-shadow: 0 var(--adyen-sdk-spacer-010,2px) var(--adyen-sdk-spacer-020,4px) #1b2a3c33,0 var(--adyen-sdk-spacer-020,4px) 5px #1b2a3c24; } 3473.adyen-checkout__button.adyen-checkout__button--secondary:active, .adyen-checkout__button.adyen-checkout__button--secondary:active:hover { background: var(--adyen-sdk-color-background-secondary,#f7f7f8); box-shadow: none; } 3474.adyen-checkout__button.adyen-checkout__button--secondary:disabled, .adyen-checkout__button.adyen-checkout__button--secondary:disabled:hover { background-color: var(--adyen-sdk-color-background-secondary,#f7f7f8); border-color: var(--adyen-sdk-color-outline-disabled,#dbdee2); box-shadow: none; cursor: not-allowed; opacity: 0.5; user-select: all; } 3475.adyen-checkout__button.adyen-checkout__button--action { background: var(--adyen-sdk-color-background-always-dark,#00112c); border: var(--adyen-sdk-border-width-s,1px) solid transparent; color: var(--adyen-sdk-color-label-on-color,#ffffff); padding: var(--adyen-sdk-spacer-050,10px) var(--adyen-sdk-spacer-060,12px); } 3476.adyen-checkout__button.adyen-checkout__button--action:hover { background: var(--adyen-sdk-color-background-inverse-primary-hover,#5c687c); } 3477.adyen-checkout__button.adyen-checkout__button--action:active, .adyen-checkout__button.adyen-checkout__button--action:active:hover { background: var(--adyen-sdk-color-background-always-dark-active,#8d95a3); box-shadow: none; } 3478.adyen-checkout__button.adyen-checkout__button--link { background: transparent; border: var(--adyen-sdk-border-width-s,1px) solid transparent; border-radius: var(--adyen-sdk-border-radius-s,4px); color: var(--adyen-sdk-color-label-highlight,#0070f5); font-weight: var(--adyen-sdk-text-body-font-weight,400); padding: var(--adyen-sdk-spacer-010,2px); text-decoration: none; } 3479.adyen-checkout__button.adyen-checkout__button--link:hover { background: transparent; text-decoration: underline; } 3480.adyen-checkout__button.adyen-checkout__button--completed, .adyen-checkout__button.adyen-checkout__button--completed:active, .adyen-checkout__button.adyen-checkout__button--completed:active:hover, .adyen-checkout__button.adyen-checkout__button--completed:hover { background: var(--adyen-sdk-color-label-success,#07893c); color: var(--adyen-sdk-color-label-on-color,#ffffff); } 3481.adyen-checkout__button.adyen-checkout__button--completed .adyen-checkout__button__icon { filter: brightness(0) invert(1); } 3482.adyen-checkout__button__content { align-items: center; display: flex; height: 100%; justify-content: center; } 3483.adyen-checkout__button__icon { margin-right: var(--adyen-sdk-spacer-040,8px); } 3484[dir="rtl"] .adyen-checkout__button__icon { margin-left: var(--adyen-sdk-spacer-040,8px); margin-right: 0px; } 3485.adyen-checkout__button__text { display: block; justify-content: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 3486.adyen-checkout__button__text--sr-only { border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; } 3487.adyen-checkout__button .adyen-checkout__spinner::before { border-right-color: ; border-bottom-color: ; border-left-color: ; border-top-color: transparent; opacity: 0.1; } 3488.adyen-checkout__button .adyen-checkout__spinner::after { border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; border-top-color: var(--adyen-sdk-color-label-on-color,#ffffff); } 3489.adyen-checkout__button.adyen-checkout__button--iconOnly { align-items: center; background: transparent; border-radius: var(--adyen-sdk-border-radius-m,8px);
3489 box-shadow: var(--adyen-sdk-button-tertiary-box-shadow,inset 0 0 0 1px rgba(0,0,0,0)); color: var(--adyen-sdk-button-tertiary-color,#00112c); display: flex; height: auto; padding: var(--adyen-sdk-button-icon-only-padding,10px); width: auto; } 3490.adyen-checkout__button.adyen-checkout__button--iconOnly:hover { background-color: var(--adyen-sdk-color-background-secondary-hover,#eeeff1); } 3491.adyen-checkout__button.adyen-checkout__button--iconOnly:active { background-color: var(--adyen-sdk-button-tertiary-active-background-color,rgba(0,0,0,0)); color: var(--adyen-sdk-button-tertiary-active-color,#8d95a3); } 3492.adyen-checkout__button.adyen-checkout__button--iconOnly:focus { box-shadow: none; } 3493.adyen-checkout__button.adyen-checkout__button--iconOnly:focus-visible { box-shadow: 0 0 0 var(--adyen-sdk-focus-ring-spacer,1px) var(--adyen-sdk-color-background-primary,#ffffff),0 0 0 var(--adyen-sdk-focus-ring-outline,3px) var(--adyen-sdk-focus-ring-color,rgba(0,112,245,.8)); outline: 0px; } 3494.adyen-checkout__button.adyen-checkout__button--iconOnly:disabled, .adyen-checkout__button.adyen-checkout__button--iconOnly:disabled:hover { box-shadow: none; cursor: not-allowed; opacity: 0.4; user-select: all; } 3495.adyen-checkout__button.adyen-checkout__button--iconOnly .adyen-checkout__button__icon { margin: 0px; } 3496.adyen-checkout-card-fastlane__modal { margin-bottom: var(--adyen-sdk-spacer-070,16px); max-width: 372px; } 3497.adyen-checkout-card-fastlane__modal-section { column-gap: var(--adyen-sdk-spacer-070,16px); display: grid; grid-template-areas: "image header" ". text"; grid-template-columns: auto 1fr; grid-template-rows: auto; margin-bottom: var(--adyen-sdk-spacer-060,12px); place-items: start; } 3498.adyen-checkout-card-fastlane__modal-section-image { grid-area: image; place-self: center; } 3499.adyen-checkout-card-fastlane__modal-section-header { color: var(--adyen-sdk-color-background-inverse-primary,#00112c
3499); font-size: var(--adyen-sdk-text-title-m-font-size,1.25rem); font-weight: var(--adyen-sdk-text-title-m-font-weight,600); grid-area: header; line-height: var(--adyen-sdk-text-title-m-line-height,30px); margin: 0px; } 3500.adyen-checkout-card-fastlane__modal-section-text { color: var(--adyen-sdk-color-background-inverse-primary,#00112c); font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); grid-area: text; line-height: var(--adyen-sdk-text-body-line-height,20px); } 3501.adyen-checkout-card-fastlane__modal-brand { height: 23px; margin-top: var(--adyen-sdk-spacer-040,8px); width: 168px; } 3502.adyen-checkout-card-fastlane__modal-button-container { display: flex; flex-direction: row-reverse; margin-bottom: var(--adyen-sdk-spacer-060,12px); } 3503.adyen-checkout-card-fastlane__modal-button-container > button { line-height: 0; } 3504.adyen-checkout-card__fastlane { align-items: center; background: var(--adyen-sdk-color-background-primary,#ffffff); border: var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-outline-primary,#dbdee2); border-radius: var(--adyen-sdk-border-radius-m,8px); margin-top: var(--adyen-sdk-spacer-070,16px); } 3505.adyen-checkout-card__fastlane, [dir="rtl"] .adyen-checkout-card__fastlane { padding: var(--adyen-sdk-spacer-060,12px) var(--adyen-sdk-spacer-070,16px); } 3506.adyen-checkout-card__fastlane-consent-toggle { display: flex; } 3507.adyen-checkout-card__fastlane-consent-text, .adyen-checkout-card__fastlane-consent-toggle--active { margin-bottom: var(--adyen-sdk-spacer-070,16px); } 3508.adyen-checkout-card__fastlane-consent-text { font-size: var(--adyen-sdk-text-caption-font-size,.75rem); font-weight: var(--adyen-sdk-text-caption-font-weight,400); line-height: var(--adyen-sdk-text-caption-line-height,18px); } 3509.adyen-checkout-card__fastlane-brand { height: 23px; width: 168px; } 3510.adyen-checkout__button.adyen-checkout__button--fastlane-info-modal { height: 20px; line-height: 0; margin-left: var(--adyen-sdk-spacer-020,4px); padding: 0px; vertical-align: bottom; width: 20px; } 3511.adyen-checkout-ctp__otp-resend-code-wrapper { line-height: var(--adyen-sdk-text-body-line-height,20px); margin-left: auto; position: absolute; right: 0px; top: 0px; } 3512.adyen-checkout-ctp__otp-resend-code--confirmation, .adyen-checkout-ctp__otp-resend-code--disabled { color: var(--adyen-sdk-color-label-tertiary,#5c687c); cursor: default; font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); margin-left: auto; pointer-events: none; } 3513.adyen-checkout-ctp__otp-resend-code--confirmation { align-items: center; display: flex; } 3514.adyen-checkout-ctp__otp-resend-code--confirmation > img { margin-left: var(--adyen-sdk-spacer-020,4px); } 3515.adyen-checkout-ctp__otp-resend-code-counter { color: var(--adyen-sdk-color-label-primary,#00112c
3515); cursor: default; display: inline-block; font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); margin-left: auto; text-align: right; } 3516.adyen-checkout-ctp__section > .adyen-checkout__field.adyen-checkout__field--otp { margin-bottom: var(--adyen-sdk-spacer-060,12px); } 3517.adyen-checkout-ctp__otp-field-wrapper { position: relative; } 3518.adyen_checkout-ctp__brand-wrapper { align-items: center; display: flex; height: 18px; } 3519.adyen_checkout-ctp__brand-logo { margin-right: var(--adyen-sdk-spacer-030,6px); width: var(--adyen-sdk-spacer-090,24px); } 3520.adyen_checkout-ctp__brand-pipe { height: 15px; margin-right: var(--adyen-sdk-spacer-030,6px); } 3521.adyen_checkout-ctp__brand-scheme { margin-right: var(--adyen-sdk-spacer-030,6px); object-fit: none; } 3522.adyen_checkout-ctp__brand-scheme-mc { width: 27px; } 3523.adyen_checkout-ctp__brand-scheme-visa { width: 35px; } 3524.adyen-checkout__ctp-modal-header-image { display: block; margin: auto; } 3525.adyen-checkout__ctp-modal-title { font-size: var(--adyen-sdk-text-title-m-font-size,1.25rem); font-weight: 700; line-height: var(--adyen-sdk-spacer-090,24px); margin: 0 0 var(--adyen-sdk-spacer-060,12px); padding: 0px; } 3526.adyen-checkout__ctp-modal-text { font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); line-height: var(--adyen-sdk-text-caption-line-height,18px); margin-bottom: var(--adyen-sdk-spacer-070,16px); } 3527.adyen-checkout__ctp-modal-benefits { margin-left: 0px; padding-left: var(--adyen-sdk-spacer-080,20px); } 3528.adyen-checkout__ctp-modal-benefits li { list-style: disc; margin-bottom: var(--adyen-sdk-spacer-070,16px); } 3529.adyen-checkout__modal-wrapper--ctp .adyen-checkout__modal { max-width: 464px; } 3530.adyen_checkout-ctp__brand-wrapper--popup { justify-content: center; margin-bottom: var(--adyen-sdk-spacer-090,24px); } 3531.adyen-web__ctp-info-button { background-color: transparent; border: 0px; cursor: pointer; padding: 0px; } 3532.adyen-checkout__button--section-logout-button { margin-left: auto; } 3533.adyen-checkout__button--section-logout-button--disabled { color: var(--adyen-sdk-color-label-disabled,#8d95a3); pointer-events: none; } 3534.adyen-checkout-ctp__section { background-color: rgb(255, 255, 255); border-radius: var(--adyen-sdk-spacer-060,12px); box-shadow: rgba(0, 17, 44, 0.08) 0px 6px 12px, rgba(0, 17, 44, 0.04) 0px 2px 4px; padding: var(--adyen-sdk-spacer-070,16px); position: relative; } 3535.adyen-checkout-ctp__section-brand { align-items: center; display: flex; height: 18px; margin-bottom: 16px; } 3536.adyen-checkout-ctp__section--standalone { all: unset; } 3537.adyen-checkout-ctp__section .adyen-checkout__fieldset { margin-bottom: var(--adyen-sdk-spacer-090,24px); } 3538.adyen-checkout-ctp__section-header { align-items: center; display: flex; } 3539.adyen-checkout-ctp__section-header-title { font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: var(--adyen-sdk-text-title-font-weight,600); line-height: 22px; margin: 0px; padding: 0px; width: auto; } 3540@media (min-width: 480px) { 3541 .adyen-checkout-ctp__section-header-title { font-size: var(--adyen-sdk-text-title-font-size,1rem); } 3542} 3543.adyen-checkout-ctp__section-header-adornment { margin-left: 5px; } 3544.adyen-checkout-ctp__section-text { color: var(--adyen-sdk-color-label-tertiary,#5c687c); line-height: var(--adyen-sdk-text-caption-line-height,18px); margin: 0 0 var(--adyen-sdk-spacer-070,16px); } 3545.adyen-checkout-ctp__section-text, .adyen-checkout-ctp__separator { font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); } 3546.adyen-checkout-ctp__separator { color: var(--adyen-sdk-color-label-primary,#00112c
3546); } 3547.adyen-checkout-ctp__otp-subtitle--highlighted { color: var(--adyen-sdk-color-label-primary,#00112c); font-weight: var(--adyen-sdk-text-body-stronger-font-weight,500); } 3548.adyen-checkout-ctp__otp-checkbox-container { background-color: rgb(247, 248, 249); border-radius: var(--adyen-sdk-border-radius-s,4px); margin-bottom: var(--adyen-sdk-spacer-070,16px); padding: var(--adyen-sdk-spacer-060,12px); } 3549.adyen-checkout-ctp__otp-checkbox-container--checked { background-color: rgb(242, 248, 255); } 3550.adyen-checkout-ctp__otp-checkbox-container label { cursor: pointer; } 3551.adyen-checkout-ctp__section .adyen-checkout__field.adyen-checkout-ctp__otp-checkbox-container { margin-bottom: var(--adyen-sdk-spacer-020,4px); } 3552.adyen-checkout-ctp__otp-checkbox-info { color: rgb(112, 112, 112); font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); line-height: var(--adyen-sdk-text-body-line-height,20px); margin: var(--adyen-sdk-spacer-020,4px) 0 0; } 3553.adyen-checkout-ctp__otp-readmore-button { color-scheme: unset; forced-color-adjust: unset; math-depth: unset; position: unset; position-anchor: unset; text-size-adjust: unset; appearance: unset; font: unset; font-palette: unset; font-synthesis: unset; position-area: unset; text-orientation: unset; text-rendering: unset; text-spacing-trim: unset; -webkit-font-smoothing: unset; -webkit-locale: unset; -webkit-text-orientation: unset; -webkit-writing-mode: unset; writing-mode: unset; zoom: unset; accent-color: unset; place-content: unset; place-items: unset; place-self: unset; alignment-baseline: unset; anchor-name: unset; anchor-scope: unset; animation-composition: unset; animation: unset; animation-trigger: unset; app-region: unset; aspect-ratio: unset; backdrop-filter: unset; backface-visibility: unset; background: unset; background-blend-mode: unset; baseline-shift: unset; baseline-source: unset; block-size: unset; border-block: unset; border: unset; border-radius: unset; border-collapse: unset; border-end-end-radius: unset; border-end-start-radius: unset; border-inline: unset; border-shape: unset; border-start-end-radius: unset; border-start-start-radius: unset; inset: unset; box-decoration-break: unset; box-shadow: unset; box-sizing: unset; break-after: unset; break-before: unset; break-inside: unset; buffered-rendering: unset; caption-side: unset; caret-animation: unset; caret-color: unset; caret-shape: unset; clear: unset; clip: unset; clip-path: unset; clip-rule: unset; color-interpolation: unset; color-interpolation-filters: unset; color-rendering: unset; columns: unset; column-fill: unset; gap: unset; column-rule: unset; column-span: unset; contain: unset; contain-intrinsic-block-size: unset; contain-intrinsic-size: unset; contain-intrinsic-inline-size: unset; container: unset; content: unset; content-visibility: unset; corner-shape: unset; corner-block-end-shape: unset; corner-block-start-shape: unset; counter-increment: unset; counter-reset: unset; counter-set: unset; cx: unset; cy: unset; d: unset; display: unset; dominant-baseline: unset; dynamic-range-limit: unset; empty-cells: unset; field-sizing: unset; fill: unset; fill-opacity: unset; fill-rule: unset; filter: unset; flex: unset; flex-flow: unset; float: unset; flood-color: unset; flood-opacity: unset; grid: unset; grid-area: unset; height: unset; hyphenate-character: unset; hyphenate-limit-chars: unset; hyphens: unset; image-orientation: unset; image-rendering: unset; initial-letter: unset; inline-size: unset; inset-block: unset; inset-inline: unset; interactivity: unset; interest-delay: unset; interpolate-size: unset; isolation: unset; letter-spacing: unset; lighting-color: unset; line-break: unset; list-style: unset; margin-block: unset; margin: unset; margin-inline: unset; marker: unset; mask: unset; mask-type: unset; math-shift: unset; math-style: unset; max-block-size: unset; max-height: unset; max-inline-size: unset; max-width: unset; min-block-size: unset; min-height: unset; min-inline-size: unset; min-width: unset; mix-blend-mode: unset; object-fit: unset; object-position: unset; object-view-box: unset; offset: unset; opacity: unset; order: unset; orphans: unset; outline: unset; outline-offset: unset; overflow-anchor: unset; overflow-block: unset; overflow-clip-margin: unset; overflow-inline: unset; overflow-wrap: unset; overflow: unset; overlay: unset; overscroll-behavior-block: unset; overscroll-behavior-inline: unset; overscroll-behavior: unset; padding-block: unset; padding: unset; padding-inline: unset; page: unset; page-orientation: unset; paint-order: unset; perspective: unset; perspective-origin: unset; pointer-events: unset; position-try: unset; position-visibility: unset; print-color-adjust: unset; quotes: unset;
3553 r: unset; reading-flow: unset; reading-order: unset; resize: unset; rotate: unset; ruby-align: unset; ruby-position: unset; rx: unset; ry: unset; scale: unset; scroll-behavior: unset; scroll-initial-target: unset; scroll-margin-block: unset; scroll-margin: unset; scroll-margin-inline: unset; scroll-marker-group: unset; scroll-padding-block: unset; scroll-padding: unset; scroll-padding-inline: unset; scroll-snap-align: unset; scroll-snap-stop: unset; scroll-snap-type: unset; scroll-target-group: unset; scroll-timeline: unset; scrollbar-color: unset; scrollbar-gutter: unset; scrollbar-width: unset; shape-image-threshold: unset; shape-margin: unset; shape-outside: unset; shape-rendering: unset; size: unset; speak: unset; stop-color: unset; stop-opacity: unset; stroke: unset; stroke-dasharray: unset; stroke-dashoffset: unset; stroke-linecap: unset; stroke-linejoin: unset; stroke-miterlimit: unset; stroke-opacity: unset; stroke-width: unset; tab-size: unset; table-layout: unset; text-align: unset; text-align-last: unset; text-anchor: unset; text-autospace: unset; text-box: unset; text-combine-upright: unset; text-decoration: unset; text-decoration-skip-ink: unset; text-emphasis: unset; text-emphasis-position: unset; text-indent: unset; text-justify: unset; text-overflow: unset; text-shadow: unset; text-underline-offset: unset; text-underline-position: unset; text-wrap: unset; timeline-scope: unset; timeline-trigger: unset; touch-action: unset; transform: unset; transform-box: unset; transform-origin: unset; transform-style: unset; transition: unset; translate: unset; trigger-scope: unset; user-select: unset; vector-effect: unset; vertical-align: unset; view-timeline: unset; view-transition-class: unset; view-transition-group: unset; view-transition-name: unset; view-transition-scope: unset; visibility: unset; border-spacing: unset; -webkit-box-align: unset; -webkit-box-decoration-break: unset; -webkit-box-direction: unset; -webkit-box-flex: unset; -webkit-box-ordinal-group: unset; -webkit-box-orient: unset; -webkit-box-pack: unset; -webkit-box-reflect: unset; -webkit-line-break: unset; -webkit-line-clamp: unset; -webkit-mask-box-image: unset; -webkit-rtl-ordering: unset; -webkit-ruby-position: unset; -webkit-tap-highlight-color: unset; -webkit-text-combine: unset; -webkit-text-decorations-in-effect: unset; -webkit-text-fill-color: unset; -webkit-text-security: unset; -webkit-text-stroke: unset; -webkit-user-drag: unset; white-space-collapse: unset; widows: unset; width: unset; will-change: unset; word-break: unset; word-spacing: unset; x: unset; y: unset; z-index: unset; color: rgb(0, 117, 255); cursor: pointer; text-transform: lowercase; } 3554.adyen-checkout-ctp__card-list-single-card { align-items: center; background-color: var(--adyen-sdk-color-background-secondary,#f7f7f8); border-radius: var(--adyen-sdk-spacer-030,6px); display: flex; font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); height: var(--adyen-sdk-spacer-110,40px); line-height: var(--adyen-sdk-text-caption-line-height,18px); margin-top: var(--adyen-sdk-spacer-070,16px); padding: var(--adyen-sdk-spacer-060,12px); } 3555.adyen-checkout-ctp__card-list-single-card-expired { color: var(--adyen-sdk-color-label-tertiary,#5c687c); text-decoration: line-through; } 3556.adyen-checkout-ctp__expired-label { color: var(--adyen-sdk-color-label-tertiary,#5c687c); font-weight: var(--adyen-sdk-text-body-stronger-font-weight,500); line-height: 17px; margin-left: auto; } 3557.adyen-checkout-ctp__card-image { border-radius: 3px; height: 24px; margin-right: var(--adyen-sdk-spacer-040,8px); } 3558.adyen-checkout-ctp__cards-list-field .adyen-checkout__label { margin-bottom: var(--adyen-sdk-spacer-070,16px); } 3559.adyen-checkout-ctp__cards-list-field .adyen-checkout__label__text { color: var(--adyen-sdk-color-label-tertiary,#5c687c); font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); line-height: var(--adyen-sdk-text-caption-line-height,18px); } 3560.adyen-checkout-ctp__cards-list-dropdown .adyen-checkout__dropdown__element--disabled { opacity: 1; } 3561.adyen-checkout-ctp__cards-list-dropdown .adyen-checkout__dropdown__element--disabled .adyen-checkout__dropdown__element__text { margin: 0px; opacity: 0.4; text-decoration: line-through; } 3562.adyen-checkout-ctp__cards-list-dropdown .adyen-checkout__dropdown__element--disabled .adyen-checkout__dropdown__element__secondary-text { color: var(--adyen-sdk-color-label-tertiary,#5c687c);
3562 font-weight: var(--adyen-sdk-text-body-stronger-font-weight,500); line-height: 17px; } 3563.adyen-checkout-ctp__cards-list-dropdown .adyen-checkout__dropdown__button--disabled { opacity: 1; } 3564.adyen-checkout-ctp__cards-list-dropdown .adyen-checkout__dropdown__button--disabled .adyen-checkout__dropdown__button__text { opacity: 0.4; text-decoration: line-through; } 3565.adyen-checkout-ctp__cards-list-dropdown .adyen-checkout__dropdown__button--disabled .adyen-checkout__dropdown__button__secondary-text { color: var(--adyen-sdk-color-label-tertiary,#5c687c); font-weight: var(--adyen-sdk-text-body-stronger-font-weight,500); opacity: 1; } 3566.adyen-checkout__iframe { border: 0px; } 3567.adyen-checkout-ctp__card { background-color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: var(--adyen-sdk-spacer-020,4px); box-shadow: 0 0 0 var(--adyen-sdk-spacer-010,2px) #999595; cursor: pointer; height: var(--adyen-sdk-spacer-110,40px); margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: var(--adyen-sdk-spacer-080,20px); width: 100%; } 3568.adyen-checkout-ctp__empty-cards { align-items: center; background-color: var(--adyen-sdk-color-background-secondary,#f7f7f8); border-radius: var(--adyen-sdk-spacer-030,6px); color: var(--adyen-sdk-color-label-tertiary,#5c687c); display: flex; font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); height: var(--adyen-sdk-spacer-110,40px); line-height: var(--adyen-sdk-text-caption-line-height,18px); margin-bottom: var(--adyen-sdk-spacer-090,24px); margin-top: var(--adyen-sdk-spacer-070,16px); padding: var(--adyen-sdk-spacer-060,12px) var(--adyen-sdk-spacer-070,16px); } 3569.adyen-checkout__iframe--ctpIframe { pointer-events: auto; } 3570.adyen-checkout__iframe--ctpIframe-hidden { display: none; } 3571@keyframes card-bounce { 3572 0% { animation-timing-function: cubic-bezier(0.17, 0.17, 0.32, 1); translate: 0px -60%; } 3573 9.70874% { animation-timing-function: cubic-bezier(0.41, 0, 0.49, 1); translate: 0px 8.5%; } 3574 23.4466% { animation-timing-function: cubic-bezier(0.29, 0, 0.26, 1); translate: 0px -22.5%; } 3575 47.7184% { translate: 0px; } 3576 63.8835% { animation-timing-function: cubic-bezier(1, 0, 0.78, 1); translate: 0px; } 3577 86.5534% { translate: 0px 40.7%; } 3578 100% { translate: 0px 40.7%; } 3579} 3580@keyframes card-fade-100 { 3581 0% { animation-timing-function: linear; opacity: 0; } 3582 8.1068% { opacity: 1; } 3583 78.4466% { opacity: 1; } 3584 86.5534% { opacity: 0; } 3585 100% { opacity: 0; } 3586} 3587@keyframes card-fade-60 { 3588 0% { animation-timing-function: linear; opacity: 0; } 3589 8.1068% { opacity: 0.6; } 3590 78.4466% { opacity: 0.6; } 3591 86.5534% { opacity: 0; } 3592 100% { opacity: 0; } 3593} 3594@keyframes card-fade-20 { 3595 0% { animation-timing-function: linear; opacity: 0; } 3596 8.1068% { opacity: 0.2; } 3597 78.4466% { opacity: 0.2; } 3598 86.5534% { opacity: 0; } 3599 100% { opacity: 0; } 3600} 3601.adyen-checkout-ctp__card-animation { aspect-ratio: 1 / 0.438; filter: grayscale(1); margin: 40px auto 50px; max-width: 100%; position: relative; width: 140px; } 3602.adyen-checkout-ctp__card-animation > .adyen-checkout-ctp__card-animation-layer { height: 100%; opacity: 0; position: absolute; width: 100%; background-size: contain !important; } 3603.adyen-checkout-ctp__card-animation > .adyen-checkout-ctp__card-animation-layer:first-of-type { animation: 2.06s linear 0.1s infinite normal both running card-bounce, 2.06s linear infinite normal both running card-fade-100; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1064' height='466' fill='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='m895.31 228.862-46.416-10.988c-1.172-.381-2.528-.481-3.565-.203-1.582.424-1.825 1.567-.543 2.554.676.52 1.641.893 2.634 1.067l42.816 10.545-.537 21.742-2.328.624-6.897 1.848 1.146-20.056q.002-.019.003-.037h.005c.061-.536-.274-1.054-.864-1.494-.563-.447-1.399-.831-2.462-1.065l-.003.001-.072-.016-46.587-10.849-.032-.008c-1.18-.39-2.554-.496-3.601-.215l-16.926 4.535c-1.582.424-1.825 1.568-.542 2.555.389.299.859.593 1.407.742l44.453 10.938-.526 19.429c-.021.101.234 2.007-2.662 2.783l-22.831 6.118c-3.105.832-7.644.01-10.253-1.998l-32.227-24.8c-2.271-1.748-2.029-4.233 1.146-5.083l14.204-3.806c1.674-.449 1.938-1.481.58-2.526s-3.556-1.501-5.23-1.053l-14.297 3.879c-6.795 1.82-6.817 6.539-2.199 10.093l32.275 24.837c4.972 3.826 14.615 5.636 20.567 4.042l22.824-6.116c1.151-.309 2.067-.696 2.797-1.118q.156-.091.301-.183c2.32-1.48 2.521-3.296 2.528-3.671l1.19-21.406c.081-.992-1.14-2.073-3.289-2.548l-.003.002-.072-.017-39.385-9.196 7.065-1.893 2.329-.624 41.998 10.256-.496 22.836q0 .01.093.032c.113.304.361.618.75.918 1.283.987 3.605 1.443 5.187 1.02l16.925-4.535c1.048-.281 1.507-.878 1.326-1.536l1.612-23.779.002-.037.005-.001c.123-1.083-1.369-2.092-3.323-2.539'/%3E%3Cpath stroke='%23fff' d='m895.31 228.862-46.416-10.988c-1.172-.381-2.528-.481-3.565-.203-1.582.424-1.825 1.567-.543 2.554.676.52 1.641.893 2.634 1.067l42.816 10.545-.537 21.742-2.328.624-6.897 1.848 1.146-20.056q.002-.019.003-.037h.005c.061-.536-.274-1.054-.864-1.494-.563-.447-1.399-.831-2.462-1.065l-.003.001-.072-.016-46.587-10.849-.032-.008c-1.18-.39-2.554-.496-3.601-.215l-16.926 4.535c-1.582.424-1.825 1.568-.542 2.555.389.299.859.593 1.407.742l44.453 10.938-.526 19.429c-.021.101.234 2.007-2.662 2.783l-22.831 6.118c-3.105.832-7.644.01-10.253-1.998l-32.227-24.8c-2.271-1.748-2.029-4.233 1.146-5.083l14.204-3.806c1.674-.449 1.938-1.481.58-2.526s-3.556-1.501-5.23-1.053l-14.297 3.879c-6.795 1.82-6.817 6.539-2.199 10.093l32.275 24.837c4.972 3.826 14.615 5.636 20.567 4.042l22.824-6.116c1.151-.309 2.067-.696 2.797-1.118q.156-.091.301-.183c2.32-1.48 2.521-3.296 2.528-3.671l1.19-21.406c.081-.992-1.14-2.073-3.289-2.548l-.003.002-.072-.017-39.385-9.196 7.065-1.893 2.329-.624 41.998 10.256-.496 22.836q0 .01.093.032c.113.304.361.618.75.918 1.283.987 3.605 1.443 5.187 1.02l16.925-4.535c1.048-.281 1.507-.878 1.326-1.536l1.612-23.779.002-.037.005-.001c.123-1.083-1.369-2.092-3.323-2.539'/%3E%3Cpath fill='%23fff' fill-opacity='.9' fill-rule='evenodd' d='M418.95 242.813c-1.166.08-3.042-.372-4.121-.994-.702-.405-.941-.755-1.527-2.243-2.373-6.017-6.517-11.028-13.679-16.54-6.921-5.325-13.863-9.053-24.178-12.987-2.215-.844-4.182-1.652-4.368-1.795-.687-.528-.979-1.482-.612-1.986.505-.691 2.349-1.081 3.824-.809.567.103 2.521.743 4.345 1.421 7.215 2.687 13.99 5.937 20.009 9.598 3.723 2.267 9.803 6.823 12.219 9.164 4.462 4.317 7.493 8.422 9.4 12.73 1.153 2.604 1.269 3.77.4 4.003a2.4 2.4 0 0 0-.548.23c-.132.08-.653.173-1.164.208m-16.069-.701c-1.791.122-4.29-.719-4.965-1.671-.163-.23-.697-1.349-1.
360319-2.485-2.083-4.815-6.346-9.43-12.427-13.455-4.994-3.305-8.797-5.218-15.392-7.737-4.424-1.69-4.929-2-5.087-3.117-.146-1.06 1.961-1.804 4.061-1.431 1.457.258 8.467 2.972 11.969 4.634 11.594 5.498 19.993 12.484 23.913 19.889 2.008 3.792 1.779 5.192-.882 5.373m-16.492-.659c-1.224-.015-2.768-.406-3.758-.951-.603-.332-.912-.797-1.614-2.437-2.575-6.024-8.768-10.833-18.898-14.676-4.447-1.688-5.038-2.104-4.718-3.324.158-.605.358-.757 1.34-1.02 1.642-.44 3.175-.146 7.121 1.365 6.068 2.325 10.298 4.621 14.525 7.881 4.345 3.352 6.465 5.882 8.069 9.62.915 2.141.839 2.79-.389 3.282-.375.149-1.131.266-1.678.26m-15.379-.611c-.949.006-2.546-.385-3.476-.851-1.035-.519-1.424-1.045-1.796-2.434-.477-1.786-1.147-2.632-3.558-4.488s-3.719-2.531-6.931-3.584c-1.089-.356-2.302-.809-2.698-1.003-1.658-.818-1.914-2.296-.508-2.936 1.187-.544 2.67-.406 5.617.522 8.533 2.685 14.934 7.611 15.941 12.27.357 1.645-.521 2.495-2.591 2.504'/%3E%3Crect width='110' height='74' fill='url(%23a)' rx='10' transform='matrix(.96593 -.25882 .7925 .60987 199.717 245.906)'/%3E%3Cg stroke='%23000' stroke-opacity='.8' stroke-width='2'%3E%3Cpath d='m233.447 236.868 46.846 36.05c.876.673.72 1.451-.347 1.737l-31.799 8.521M266.657 262.424l-33.731 9.038m17.126-21.816-33.73 9.038m115.215 13.423-46.846-36.05c-.875-.673-.72-1.451.347-1.737l31.799-8.52M298.327 246.551l33.731-9.038m-17.126 21.816 33.731-9.038'/%3E%3Crect width='112' height='76' x='-1.758' y='-.351' rx='11' style='mix-blend-mode:soft-light' transform='matrix(.96593 -.25882 .7925 .60987 199.935 245.314)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='a' x1='-12.604' x2='99.193' y1='0' y2='88.114' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23fff'/%3E%3Cstop offset='.484' stop-color='%23b3b3b3'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") 0px 0px no-repeat, url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1064' height='466' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Crect width='728' height='455' fill='url(%23b)' rx='24' transform='matrix(.96593 -.25882 .7925 .60987 0 188.42)'/%3E%3Cg fill='%23033783'%3E%3Cpath fill-opacity='.2' d='M638.209-50.009C376.564 99.506 477.408 320.518 560.535 412.335L1063.78 277.49z'/%3E%3Cpath fill-opacity='.4' d='M711.119 6.099C494.132 130.043 577.63 313.21 646.503 389.3l417.277-111.81z'/%3E%3C/g%3E%3Cpath fill='%23003780' d='M791.162 67.695C624.04 163.343 688.839 304.87 742.129 363.677l321.651-86.187z'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='72.545' x2='249.224' y1='26.435' y2='498.002' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%233382ea'/%3E%3Cstop offset='1' stop-color='%23003ea9'/%3E%3C/linearGradient%3E%3CclipPath id='a'%3E%3Crect width='728' height='455' fill='%23fff' rx='24' transform='matrix(.96593 -.25882 .7925 .60987 0 188.42)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") 0px 0px no-repeat; opacity: 1; z-index: 3; } 3604.adyen-checkout-ctp__card-animation > .adyen-checkout-ctp__card-animation-layer:nth-of-type(2) { animation: 2.06s linear 50ms infinite normal both running card-bounce, 2.06s linear infinite normal both running card-fade-60; opacity: 0.6; transform: translateY(25%); z-index: 2; } 3605.adyen-checkout-ctp__card-animation > .adyen-checkout-ctp__card-animation-layer:nth-of-type(2), .adyen-checkout-ctp__card-animation > .adyen-checkout-ctp__card-animation-layer:nth-of-type(3) { background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1064' height='466' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Crect width='728' height='455' fill='url(%23b)' rx='24' transform='matrix(.96593 -.25882 .7925 .60987 0 188.42)'/%3E%3Cg fill='%23033783'%3E%3Cpath fill-opacity='.2' d='M638.209-50.009C376.564 99.506 477.408 320.518 560.535 412.335L1063.78 277.49z'/%3E%3Cpath fill-opacity='.4' d='M711.119 6.099C494.132 130.043 577.63 313.21 646.503 389.3l417.277-111.81z'/%3E%3C/g%3E%3Cpath fill='%23003780' d='M791.162 67.695C624.04 163.343 688.839 304.87 742.129 363.677l321.651-86.187z'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='72.545' x2='249.224' y1='26.435' y2='498.002' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%233382ea'/%3E%3Cstop offset='1' stop-color='%23003ea9'/%3
3605E%3C/linearGradient%3E%3CclipPath id='a'%3E%3Crect width='728' height='455' fill='%23fff' rx='24' transform='matrix(.96593 -.25882 .7925 .60987 0 188.42)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") 0px 0px no-repeat; } 3606.adyen-checkout-ctp__card-animation > .adyen-checkout-ctp__card-animation-layer:nth-of-type(3) { animation: 2.06s linear 0s infinite normal both running card-bounce, 2.06s linear 0s infinite normal both running card-fade-20; opacity: 0.2; transform: translateY(50%); z-index: 1; } 3607.adyen-checkout-ctp__loading-subtitle { font-size: var(--adyen-sdk-text-subtitle-font-size,1rem); line-height: var(--adyen-sdk-text-caption-line-height,18px); margin: 0px auto 58px; max-width: 280px; text-align: center; } 3608.adyen-checkout-ctp__section > .adyen-checkout__field.adyen-checkout__field--shopperLogin { margin-bottom: var(--adyen-sdk-spacer-080,20px); } 3609.adyen-checkout__content-separator { align-items: center; color: var(--adyen-sdk-color-label-primary,#00112c); display: flex; font-size: var(--adyen-sdk-text-body-font-size,.875rem); justify-content: center; line-height: var(--adyen-sdk-text-caption-line-height,18px); margin-bottom: var(--adyen-sdk-spacer-070,16px); margin-top: var(--adyen-sdk-spacer-070,16px); text-transform: capitalize; white-space: nowrap; } 3610.adyen-checkout__content-separator::after, .adyen-checkout__content-separator::before { border-bottom: 1px solid var(--adyen-sdk-color-separator-primary,#dbdee2); content: ""; flex: 1 1 0%; } 3611.adyen-checkout__content-separator::after { margin-left: var(--adyen-sdk-spacer-080,20px); } 3612.adyen-checkout__content-separator::before { margin-right: var(--adyen-sdk-spacer-080,20px); } 3613[class^="adyen-checkout"], [class^="adyen-checkout"] *, [class^="adyen-checkout"] ::after, [class^="adyen-checkout"] ::before, [class^="adyen-checkout"]::after, [class^="adyen-checkout"]::before { box-sizing: border-box; } 3614.adyen-checkout__threeds2__challenge { background-color: transparent; display: block; height: inherit; min-height: 400px; overflow: hidden; position: relative; width: 100%; } 3615.adyen-checkout__threeds2__challenge--01, .adyen-checkout__threeds2__challenge--01 .adyen-checkout__iframe--threeDSIframe { height: 400px; width: 250px; } 3616.adyen-checkout__threeds2__challenge--02, .adyen-checkout__threeds2__challenge--02 .adyen-checkout__iframe--threeDSIframe { height: 400px; width: 390px; } 3617.adyen-checkout__threeds2__challenge--03, .adyen-checkout__threeds2__challenge--03 .adyen-checkout__iframe--threeDSIframe { height: 600px; width: 500px; } 3618.adyen-checkout__threeds2__challenge--04, .adyen-checkout__threeds2__challenge--04 .adyen-checkout__iframe--threeDSIframe { height: 400px; width: 600px; } 3619.adyen-checkout__threeds2__challenge--05, .adyen-checkout__threeds2__challenge--05 .adyen-checkout__iframe--threeDSIframe { height: 100%; width: 100%; } 3620.adyen-checkout__iframe--threeDSIframe { border: 0px; left: 0px; position: absolute; top: 0px; } 3621.adyen-checkout__threeds2-challenge-error .adyen-checkout__status__icon { display: block; margin: var(--adyen-sdk-spacer-130,56px) auto var(--adyen-sdk-spacer-100,32px); } 3622.adyen-checkout__threeds2-challenge-error .adyen-checkout__status__text { color: var(--adyen-sdk-color-label-critical,#c72727); font-size: var(--adyen-sdk-text-title-font-size,1rem); margin-bottom: var(--adyen-sdk-spacer-130,56px); text-align: center; } 3623.adyen-checkout__bacs--confirm { position: relative; } 3624.adyen-checkout__bacs--confirm .adyen-checkout-input__inline-validation--valid { display: none; } 3625.adyen-checkout__bacs .adyen-checkout__field--inactive { pointer-events: none; } 3626.adyen-checkout__bacs .adyen-checkout__bacs--edit { cursor: pointer; position: absolute; right: 0px; top: 0px; } 3627.adyen-checkout__bacs .adyen-checkout__bacs--edit-dropin { top: -50px; } 3628.adyen-checkout__bacs .adyen-checkout__bacs--edit .adyen-checkout__bacs--edit-button { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial;
3628 color: var(--adyen-sdk-color-label-primary,#00112c); cursor: pointer; padding: 0px; text-align: end; text-decoration: underline; } 3629.adyen-checkout__details-table { list-style: none; margin: -1px auto 0px; padding: 0px; } 3630.adyen-checkout__details-table__item { align-items: center; border-top: 1px solid var(--adyen-sdk-color-separator-primary,#dbdee2); color: var(--adyen-sdk-color-label-primary,#00112c); display: flex; font-size: var(--adyen-sdk-text-body-font-size,.875rem); justify-content: space-between; padding: var(--adyen-sdk-spacer-070,16px) var(--adyen-sdk-spacer-090,24px); word-break: break-word; } 3631.adyen-checkout__details-table__item:last-child { margin-bottom: 0px; } 3632.adyen-checkout__details-table__label { font-weight: var(--adyen-sdk-text-body-font-weight,400); text-align: left; } 3633.adyen-checkout__details-table__label, .adyen-checkout__details-table__value { font-size: var(--adyen-sdk-text-body-font-size,.875rem); line-height: var(--adyen-sdk-text-body-line-height,20px); max-width: 50%; } 3634.adyen-checkout__details-table__value { align-items: center; display: flex; font-weight: var(--adyen-sdk-text-body-strongest-font-weight,600); gap: var(--adyen-sdk-spacer-070,16px); text-align: right; } 3635.adyen-checkout-tooltip { background: var(--adyen-sdk-tooltip-background-color,#00112c); border-radius: var(--adyen-sdk-tooltip-border-radius,4px); color: var(--adyen-sdk-tooltip-color,#ffffff); display: inline-block; font-size: var(--adyen-sdk-text-body-font-size,.875rem); padding: var(--adyen-sdk-tooltip-padding,4px 8px); pointer-events: none; position: absolute; user-select: none; white-space: nowrap; z-index: var(--adyen-sdk-tooltip-z-index,5); } 3636.adyen-checkout-tooltip--hidden { height: 1px; margin: -1px; overflow: hidden; padding: 0px; width: 1px; clip: rect(0px, 0px, 0px, 0px); border: 0px; clip-path: inset(50%); white-space: nowrap; } 3637.adyen-checkout-tooltip-arrow { border-style: solid; height: 0px; position: absolute; width: 0px; } 3638.adyen-checkout-tooltip-arrow.adyen-checkout-tooltip-arrow--top { border-color: var(--adyen-sdk-tooltip-background-color,#00112c) transparent transparent; border-width: 6px 6px 0px; bottom: -4px; left: 50%; transform: translate(-50%); } 3639.adyen-checkout-tooltip-arrow.adyen-checkout-tooltip-arrow--bottom { border-color: transparent transparent var(--adyen-sdk-tooltip-background-color,#00112c); border-width: 0px 6px 6px; left: 50%; top: -4px; transform: translate(-50%); } 3640.adyen-checkout__button--iconOnly__icon { fill: currentcolor; transition: fill 0.3s; } 3641.adyen-checkout__voucher-result__bottom, .adyen-checkout__voucher-result__top { background: var(--adyen-sdk-color-background-primary,#ffffff); border: var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-separator-primary,#dbdee2); } 3642.adyen-checkout__voucher-result__bottom .adyen-checkout__details-table, .adyen-checkout__voucher-result__top .adyen-checkout__details-table { background: var(--adyen-sdk-color-background-secondary,#f7f7f8); border-radius: var(--adyen-sdk-border-radius-m,8px); margin: 0 var(--adyen-sdk-spacer-090,24px) var(--adyen-sdk-spacer-100,32px); } 3643.adyen-checkout__voucher-result__bottom .adyen-checkout__details-table__item:first-child, .adyen-checkout__voucher-result__top .adyen-checkout__details-table__item:first-child { border-top-width: medium; border-top-style: none; border-top-color: currentcolor; } 3644.adyen-checkout__voucher-result__top { border-bottom: 0px; border-radius: var(--adyen-sdk-border-radius-m,8px) var(--adyen-sdk-border-radius-m,8px) 0 0; padding: var(--adyen-sdk-spacer-110,40px) 0 var(--adyen-sdk-spacer-090,24px); } 3645.adyen-checkout__voucher-result__bottom { border-radius: 0 0 var(--adyen-sdk-border-radius-m,8px) var(--adyen-sdk-border-radius-m,8px); border-top: 0px; } 3646.adyen-checkout__voucher-result__separator { align-items: center; background: var(--adyen-sdk-color-background-primary,#ffffff); display: flex; margin: 0px auto; position: relative; } 3647.adyen-checkout__voucher-result__separator__inner { border-top: 1px solid var(--adyen-sdk-color-separator-primary,#dbdee2); width: 100%; } 3648.adyen-checkout__voucher-result__image { align-items: center; display: flex; justify-content: center; margin-bottom: var(--adyen-sdk-spacer-110,40px); width: 100%; } 3649.adyen-checkout-link--voucher-result-instructions { display: inline-block; } 3650.adyen-checkout__voucher-result__image__wrapper { display: block; height: var(--adyen-sdk-spacer-120,48px); margin: 0 var(--adyen-sdk-spacer-090,24px); position: relative; } 3651.adyen-checkout__voucher-result__image__wrapper::after { border-radius: var(--adyen-sdk-border-radius-m,8px); box-shadow: var(--adyen-sdk-shadow-low,0 2px 4px rgba(0,17,44,.04),0 1px 2px rgba(0,17,44,.02)); content: ""; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; } 3652.adyen-checkout__voucher-result__image__wrapper:nth-child(2) { margin-left: 0px; } 3653.adyen-checkout__voucher-result__image__brand, .adyen-checkout__voucher-result__image__issuer { border-radius: var(--adyen-sdk-border-radius-m,8px); height: var(--adyen-sdk-spacer-120,48px); } 3654.adyen-checkout__voucher-result__introduction { color: var(--adyen-sdk-color-label-primary,#00112c
3654); font-size: var(--adyen-sdk-text-body-font-size,.875rem); line-height: var(--adyen-sdk-text-caption-line-height,18px); margin: 0px auto; max-width: 400px; text-align: center; } 3655.adyen-checkout__voucher-result__amount { color: var(--adyen-sdk-color-label-primary,#00112c); font-size: var(--adyen-sdk-text-subtitle-font-size,1rem); font-weight: 700; margin: var(--adyen-sdk-spacer-090,24px) auto 0; text-align: center; } 3656.adyen-checkout__voucher-result__surcharge { color: var(--adyen-sdk-color-label-secondary,#5c687c); font-size: var(--adyen-sdk-text-body-font-size,.875rem); text-align: center; } 3657.adyen-checkout__voucher-result__code__label, .adyen-checkout__voucher-result__surcharge { display: block; font-weight: 400; line-height: var(--adyen-sdk-text-caption-line-height,18px); } 3658.adyen-checkout__voucher-result__code__label { left: 0px; margin: 0px auto; position: absolute; right: 0px; user-select: none; width: auto; } 3659.adyen-checkout__voucher-result__code__label::before { content: ""; position: absolute; } 3660.adyen-checkout__voucher-result__code__label__text { background: var(--adyen-sdk-color-background-primary,#ffffff);
3660 color: var(--adyen-sdk-color-label-primary,#00112c); font-size: var(--adyen-sdk-text-body-font-size,.875rem); letter-spacing: normal; line-height: 1; padding: 0 var(--adyen-sdk-spacer-040,8px); } 3661.adyen-checkout__voucher-result__code__barcode { display: block; height: var(--adyen-sdk-spacer-130,56px); margin: 0 auto var(--adyen-sdk-spacer-040,8px); max-width: 100%; user-select: none; } 3662.adyen-checkout__voucher-result__code { border-width: 1px 0px; color: var(--adyen-sdk-color-label-primary,#00112c); display: inline-block; font-size: var(--adyen-sdk-text-title-l-font-size,1.5rem); font-weight: 700; letter-spacing: 1px; line-height: 1.2; margin: 0px auto; padding: var(--adyen-sdk-spacer-070,16px) var(--adyen-sdk-spacer-120,48px); position: relative; text-align: center; user-select: all; width: 100%; word-break: break-word; } 3663.adyen-checkout__voucher-result__actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--adyen-sdk-spacer-040,8px); justify-content: center; list-style: none; margin: 0 auto var(--adyen-sdk-spacer-100,32px); max-width: 300px; min-width: 200px; padding: 0 var(--adyen-sdk-spacer-090,24px); width: 100%; } 3664.adyen-checkout__voucher-result__actions__item { flex: 1 1 0px; min-width: 100px; } 3665.adyen-checkout__voucher-result__actions__item .adyen-checkout__button--inline { width: 100%; } 3666.adyen-checkout__voucher-result__introduction { font-size: var(--adyen-sdk-text-title-font-size,1rem); max-width: 420px; } 3667.adyen-checkout__alert-message { align-items: center; border: var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-outline-secondary,#c9cdd3); border-radius: var(--adyen-sdk-border-radius-m,8px); display: flex; font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); line-height: var(--adyen-sdk-text-body-line-height,20px); margin: 0 0 var(--adyen-sdk-spacer-070,16px); padding: var(--adyen-sdk-spacer-070,16px); text-align: left; } 3668.adyen-checkout__alert-message--error { background: var(--adyen-sdk-alert-critical-background-color,#fef4f4); } 3669.adyen-checkout__alert-message--warning { background: var(--adyen-sdk-alert-warning-background-color,#fff5e9); } 3670.adyen-checkout__alert-message--info { background: var(--adyen-sdk-alert-highlight-background-color,#f2f8ff); } 3671.adyen-checkout__alert-message--success { background: var(--adyen-sdk-alert-success-background-color,#edfaf3); } 3672.adyen-checkout__alert-message__icon { height: 14px; margin-right: var(--adyen-sdk-spacer-040,8px); width: 14px; } 3673.adyen-checkout__fieldset + .adyen-checkout__eftpad-canada-info { margin-top: var(--adyen-sdk-spacer-070,16px); } 3674.adyen-checkout_eftpad-canada-store-details { margin: var(--adyen-sdk-spacer-070,16px) 0; } 3675.adyen-checkout__field--separateDeliveryAddress .adyen-checkout__input-wrapper { background-color: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; box-shadow: none; } 3676.adyen-checkout__field--separateDeliveryAddress .adyen-checkout__input-wrapper:active, .adyen-checkout__field--separateDeliveryAddress .adyen-checkout__input-wrapper:active:hover, .adyen-checkout__field--separateDeliveryAddress .adyen-checkout__input-wrapper:focus-within, .adyen-checkout__field--separateDeliveryAddress .adyen-checkout__input-wrapper:focus-within:hover { box-shadow: none; } 3677.adyen-checkout__open-invoice .adyen-checkout__fieldset--billingAddress, .adyen-checkout__open-invoice .adyen-checkout__fieldset--personalDetails { padding-bottom: var(--adyen-sdk-spacer-040,8px); } 3678.adyen-checkout__open-invoice .adyen-checkout__fieldset--deliveryAddress { margin-top: var(--adyen-sdk-spacer-090,24px); padding-bottom: var(--adyen-sdk-spacer-040,8px); } 3679.adyen-checkout__open-invoice .adyen-checkout__input--separateDeliveryAddress { margin-bottom: 0px; } 3680.adyen-checkout__open-invoice .adyen-checkout__field--consentCheckbox { margin-top: var(--adyen-sdk-spacer-070,16px); } 3681.adyen-checkout__open-invoice--loading { pointer-events: none; } 3682.adyen-checkout__amazonpay__button { margin: auto; } 3683.adyen-checkout__amazonpay .adyen-checkout__button--ghost { display: block; margin: var(--adyen-sdk-spacer-040,8px) auto 0; width: auto; } 3684apple-pay-button { --apple-pay-button-width: 100%; --apple-pay-button-height: 48px; --apple-pay-button-border-radius: 4px; } 3685.adyen-checkout__cashapp > .adyen-checkout__store-details { margin-bottom: var(--adyen-sdk-spacer-070,16px); margin-top: 0px; } 3686.adyen-checkout__paywithgoogle { height: var(--adyen-sdk-spacer-120,48px); } 3687.adyen-checkout__paypal__buttons { position: relative; z-index: 0; } 3688.adyen-checkout__paypal__button { display: flex; margin-bottom: var(--adyen-sdk-spacer-070,16px); } 3689.adyen-checkout__paypal__button:empty { display: none; } 3690.adyen-checkout__paypal__status--pending { margin: var(--adyen-sdk-spacer-070,16px) 0; } 3691.adyen-checkout__paypal__status--processing { align-items: center; display: flex; font-size: var(--adyen-sdk-text-body-font-size,.875rem); justify-content: center; padding: var(--adyen-sdk-spacer-090,24px) 0; } 3692.adyen-checkout__paypal-processing .adyen-checkout__paypal__button { display: none; } 3693.adyen-checkout__payment-method .adyen-checkout__paypal__status--pending { margin: var(--adyen-sdk-spacer-070,16px) 0 38px; } 3694.adyen-checkout__payment-method .adyen-checkout__paypal__status--processing { padding: var(--adyen-sdk-spacer-080,20px) 0 65px; } 3695.adyen-checkout-fastlane__card-brand--wrapper { align-items: center; border-radius: var(--adyen-sdk-border-radius-s,4px); box-shadow: var(--adyen-sdk-shadow-low,0 2px 4px rgba(0,17,44,.04),0 1px 2px rgba(0,17,44,.02)); display: flex;
3695 height: 26px; justify-content: center; margin-right: var(--adyen-sdk-spacer-060,12px); overflow: hidden; position: relative; width: var(--adyen-sdk-spacer-110,40px); } 3696.adyen-checkout-fastlane__card-section { align-items: center; display: flex; } 3697.adyen-checkout-fastlane__card-number { font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: var(--adyen-sdk-text-body-stronger-font-weight,500); line-height: var(--adyen-sdk-text-body-line-height,20px); } 3698.adyen-checkout-fastlane__brand { display: flex; justify-content: center; margin-top: var(--adyen-sdk-spacer-070,16px); } 3699.adyen-checkout-fastlane__brand img { width: 95px; } 3700.adyen-checkout__field--sendCopyToEmail .adyen-checkout__input-wrapper { background-color: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; box-shadow: none; } 3701.adyen-checkout__field--sendCopyToEmail .adyen-checkout__input-wrapper:active, .adyen-checkout__field--sendCopyToEmail .adyen-checkout__input-wrapper:active:hover, .adyen-checkout__field--sendCopyToEmail .adyen-checkout__input-wrapper:focus-within, .adyen-checkout__field--sendCopyToEmail .adyen-checkout__input-wrapper:focus-within:hover { box-shadow: none; } 3702.adyen-checkout__voucher-result--boletobancario .adyen-checkout__voucher-result__code, .adyen-checkout__voucher-result--oxxo .adyen-checkout__voucher-result__code { font-size: var(--adyen-sdk-text-body-font-size,.875rem); line-height: var(--adyen-sdk-text-caption-line-height,18px); padding: var(--adyen-sdk-spacer-090,24px); word-break: break-all; } 3703.adyen-checkout__issuer-button { align-items: center; background-color: var(--adyen-sdk-color-background-primary,#ffffff); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: var(--adyen-sdk-border-radius-m,8px); box-shadow: inset 0 0 0 1px var(--adyen-sdk-color-outline-primary,#dbdee2); cursor: pointer; display: flex; flex-basis: 47%; flex-grow: 2; font-size: var(--adyen-sdk-text-body-font-size,.875rem); height: var(--adyen-sdk-spacer-110,40px); justify-content: space-between; padding: var(--adyen-sdk-spacer-000,0) var(--adyen-sdk-spacer-060,12px); transition: background 0.3s ease-out, box-shadow 0.3s ease-out; } 3704.adyen-checkout__issuer-button:active { color: var(--adyen-sdk-color-label-primary,#00112c
3704); } 3705.adyen-checkout__issuer-button:not(.adyen-checkout__issuer-button--selected):focus { box-shadow: inset 0 0 0 1px var(--adyen-sdk-color-outline-tertiary,#8d95a3); outline: none; } 3706.adyen-checkout__issuer-button:not(.adyen-checkout__issuer-button--selected):focus-visible { box-shadow: inset 0 0 0 1px var(--adyen-sdk-color-outline-tertiary,#8d95a3); outline: none; } 3707.adyen-checkout__issuer-button:not(.adyen-checkout__issuer-button--selected):hover { box-shadow: inset 0 0 0 1px var(--adyen-sdk-color-outline-tertiary,#8d95a3); outline: none; } 3708.adyen-checkout__issuer-button--selected { background: var(--adyen-sdk-color-background-primary,#ffffff); box-shadow: inset 0 0 0 1.5px var(--adyen-sdk-color-outline-primary-active,#00112c); color: var(--adyen-sdk-color-label-primary,#00112c); font-weight: var(--adyen-sdk-text-body-stronger-font-weight,500); height: var(--adyen-sdk-spacer-110,40px); transition: none; } 3709.adyen-checkout__issuer-button-img { margin-right: var(--adyen-sdk-spacer-040,8px); max-height: 26px; } 3710.adyen-checkout__issuer-button-group { display: flex; flex-wrap: wrap; gap: var(--adyen-sdk-spacer-070,16px); } 3711.adyen-checkout__field--issuer-list { margin-bottom: 0px; } 3712.adyen-checkout__field--issuer-list .adyen-checkout__dropdown { position: static; } 3713.adyen-checkout__field--issuer-list .adyen-checkout__dropdown__button { position: relative; } 3714.adyen-checkout__qr-loader { align-items: center; background: var(--adyen-sdk-color-background-primary,#ffffff); border: var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-outline-secondary,#c9cdd3); border-radius: var(--adyen-sdk-border-radius-m,8px); display: flex; flex-direction: column; padding: 16px; } 3715.adyen-checkout__qr-loader--result { gap: var(--adyen-sdk-spacer-090,24px); padding: 100px; } 3716.adyen-checkout__qr-loader__brand-logo-wrapper { border-radius: var(--adyen-sdk-border-radius-s,4px); box-shadow: var(--adyen-sdk-shadow-low,0 2px 4px rgba(0,17,44,.04),0 1px 2px rgba(0,17,44,.02)); margin-bottom: var(--adyen-sdk-spacer-090,24px); overflow: hidden; } 3717.adyen-checkout__qr-loader__brand-logo { display: block; width: 80px; } 3718.adyen-checkout__qr-loader__subtitle { color: var(--adyen-sdk-color-label-secondary,#5c687c); font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); line-height: var(--adyen-sdk-text-body-line-height,20px); max-width: 400px; text-align: center; } 3719.adyen-checkout__qr-loader__icon { height: 88px; width: 88px; } 3720.adyen-checkout__qr-loader__payment_amount { color: var(--adyen-sdk-color-label-primary,#00112c
3720); font-size: var(--adyen-sdk-text-title-l-font-size,1.5rem); font-weight: var(--adyen-sdk-text-title-l-font-weight,600); line-height: var(--adyen-sdk-text-body-wide-line-height,24px); margin-bottom: var(--adyen-sdk-spacer-090,24px); } 3721.adyen-checkout__qr-loader__progress { background: var(--adyen-sdk-color-outline-secondary,#c9cdd3); border-radius: var(--adyen-sdk-border-radius-l,12px); height: var(--adyen-sdk-spacer-020,4px); margin-bottom: var(--adyen-sdk-spacer-060,12px); padding-right: 3%; width: 152px; } 3722[dir="rtl"] .adyen-checkout__qr-loader__progress { padding-left: 3%; padding-right: 0px; } 3723.adyen-checkout__qr-loader__percentage { background: var(--adyen-sdk-color-label-primary,#00112c); border-radius: var(--adyen-sdk-border-radius-l,12px); display: block; height: 100%; } 3724.adyen-checkout__qr-loader__countdown { font-size: var(--adyen-sdk-text-caption-font-size,.75rem); text-align: center; } 3725.adyen-checkout__qr-loader > .adyen-checkout__spinner__wrapper { margin: 60px 0px; } 3726.adyen-checkout__qr-loader__app-link { display: none; } 3727.adyen-checkout__button.adyen-checkout__button--qr-loader { margin-top: var(--adyen-sdk-spacer-090,24px); text-decoration: none; } 3728.adyen-checkout__qr-loader__instructions { color: var(--adyen-sdk-color-label-tertiary,#5c687c); font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); line-height: 1.5; margin-top: var(--adyen-sdk-spacer-090,24px); max-width: 300px; text-align: center; } 3729.adyen-checkout__qr-loader__actions { align-items: center; display: flex; justify-content: center; margin-top: var(--adyen-sdk-spacer-100,32px); max-width: 400px; width: 100%; } 3730@media (max-width: 1024px) { 3731 .adyen-checkout__qr-loader__app-link { display: block; min-width: 220px; } 3732} 3733.adyen-checkout__segmented-control { background: var(--adyen-sdk-color-background-tertiary,#eeeff1); border-radius: var(--adyen-sdk-border-radius-l,12px); display: grid; gap: var(--adyen-sdk-spacer-020,4px); grid-template-columns: repeat(auto-fit,minmax(var(--adyen-sdk-spacer-140,64px),1fr)); padding: var(--adyen-sdk-spacer-030,6px); } 3734.adyen-checkout__segmented-control--disabled { pointer-events: none; } 3735.adyen-checkout__segmented-control--disabled > .adyen-checkout__segmented-control-segment { color: var(--adyen-sdk-color-label-disabled,#8d95a3); } 3736.adyen-checkout__segmented-control-segment { background: transparent; border: 0px; border-radius: var(--adyen-sdk-border-radius-m,8px);
3736 color: var(--adyen-sdk-color-label-primary,#00112c); cursor: pointer; font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: var(--adyen-sdk-text-body-stronger-font-weight,500); padding: var(--adyen-sdk-spacer-040,8px) var(--adyen-sdk-spacer-060,12px); text-align: center; transition: background 0.3s ease-out; } 3737.adyen-checkout__segmented-control-segment:active, .adyen-checkout__segmented-control-segment:not(.adyen-checkout__segmented-control-segment--selected):hover { background-color: var(--adyen-sdk-color-background-secondary,#f7f7f8); } 3738.adyen-checkout__segmented-control-segment--selected { background: var(--adyen-sdk-color-background-primary,#ffffff); box-shadow: var(--adyen-sdk-shadow-low,0 2px 4px rgba(0,17,44,.04),0 1px 2px rgba(0,17,44,.02)); color: var(--adyen-sdk-color-label-primary,#00112c); } 3739.IrisGenerateQRCode-module_instruction__uDTb- { color: var(--adyen-sdk-color-label-secondary,#5c687c); font-size: var(--adyen-sdk-text-caption-font-size,.75rem); font-weight: var(--adyen-sdk-text-caption-font-weight,400); line-height: var(--adyen-sdk-text-caption-line-height,18px); } 3740.IrisComponent-module_bankList__fehP- { padding-top: var(--adyen-sdk-spacer-070,16px); } 3741.adyen-checkout-timeline-wrapper { background-color: var(--adyen-sdk-color-background-secondary,#f7f7f8); border-radius: var(--adyen-sdk-border-radius-m,8px); max-width: 300px; padding: var(--adyen-sdk-spacer-070,16px); } 3742.adyen-checkout-timeline { scrollbar-color: var(--adyen-sdk-color-background-quaternary,#c0c5cc) transparent; } 3743.adyen-checkout-timeline__items { all: unset; } 3744.adyen-checkout-timeline-item { scrollbar-color: var(--adyen-sdk-color-background-quaternary,#c0c5cc) transparent; -webkit-font-smoothing: antialiased; list-style-type: none; max-width: 500px; } 3745.adyen-checkout-timeline-item:last-child .adyen-checkout-timeline-item__separator { display: none; } 3746.adyen-checkout-timeline-item:last-child .adyen-checkout-timeline-item__content { padding-bottom: 0px; } 3747.adyen-checkout-timeline-item__row { display: flex; gap: var(--adyen-sdk-spacer-070,16px); } 3748.adyen-checkout-timeline-item__marker { display: flex; flex-flow: column; margin-top: var(--adyen-sdk-spacer-010,2px); max-width: var(--adyen-sdk-spacer-070,16px); width: 100%; } 3749.adyen-checkout-timeline-item__separator { flex-grow: 1; position: relative; } 3750.adyen-checkout-timeline-item__separator::before { background-color: var(--adyen-sdk-color-separator-secondary,#c9cdd3); content: ""; height: 100%; left: 50%; position: absolute; transform: translate(-50%); width: 1px; } 3751.adyen-checkout-timeline-item__content { align-items: flex-start; display: flex; flex-direction: column; flex-grow: 1; padding-bottom: var(--adyen-sdk-spacer-060,12px); } 3752.adyen-checkout-timeline-item__title { color: var(--adyen-sdk-color-label-primary,#00112c
3752); font-size: var(--adyen-sdk-text-caption-font-size,.75rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); letter-spacing: 0px; line-height: var(--adyen-sdk-text-body-line-height,20px); margin-bottom: var(--adyen-sdk-spacer-010,2px); text-align: left; } 3753.adyen-checkout__econtext-input__field > .adyen-checkout__button--pay:only-child { margin-top: 0px; } 3754.adyen-checkout-trustly { margin-bottom: var(--adyen-sdk-spacer-070,16px); } 3755.adyen-checkout-trustly__descriptor { font-size: var(--adyen-sdk-text-subtitle-font-size,1rem); font-weight: var(--adyen-sdk-text-body-stronger-font-weight,500); margin: var(--adyen-sdk-spacer-000,0) var(--adyen-sdk-spacer-000,0) var(--adyen-sdk-spacer-020,4px); } 3756.adyen-checkout-trustly__description-list { font-size: var(--adyen-sdk-text-body-font-size,.875rem); line-height: 1.5; list-style-type: disc; margin: 0px; padding-left: var(--adyen-sdk-spacer-080,20px); } 3757.adyen-checkout-paybybank_AIS_DD { margin-bottom: var(--adyen-sdk-spacer-070,16px); } 3758.adyen-checkout-paybybank_AIS_DD__description-header { color: var(--adyen-sdk-color-label-primary,#00112c
3758); font-size: var(--adyen-sdk-text-subtitle-font-size,1rem); font-weight: var(--adyen-sdk-text-body-stronger-font-weight,500); margin: var(--adyen-sdk-spacer-000,0) var(--adyen-sdk-spacer-000,0) var(--adyen-sdk-spacer-020,4px); } 3759.adyen-checkout-paybybank_AIS_DD__description-body { color: var(--adyen-sdk-color-label-secondary,#5c687c); font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); line-height: 1.5; list-style-type: disc; margin: 0px; } 3760@media (max-width: 330px) { 3761 .adyen-checkout__payment-method--paybybank_AIS_DD .adyen-checkout__payment-method__brands .adyen-checkout__payment-method__image__wrapper:nth-child(2) { display: none; } 3762} 3763@media (max-width: 360px) { 3764 .adyen-checkout__payment-method--paybybank_AIS_DD .adyen-checkout__payment-method__brands .adyen-checkout__payment-method__image__wrapper:nth-child(3) { display: none; } 3765} 3766@media (max-width: 390px) { 3767 .adyen-checkout__payment-method--paybybank_AIS_DD .adyen-checkout__payment-method__brands .adyen-checkout__payment-method__image__wrapper:nth-child(4) { display: none; } 3768} 3769.adyen-checkout__payment-method--paybybank_AIS_DD .adyen-checkout__payment-method__brand-number { text-overflow: clip; white-space: nowrap; } 3770.adyen-checkout__voucher-result--paybybank_pix { background-color: var(--adyen-sdk-color-background-primary,#ffffff); margin-bottom: var(--adyen-sdk-spacer-070,16px); } 3771.adyen-checkout__voucher-result--paybybank_pix .adyen-checkout__voucher-result__top { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; margin: var(--adyen-sdk-spacer-070,16px) var(--adyen-sdk-spacer-000,0); padding: var(--adyen-sdk-spacer-000,0); } 3772.adyen-checkout__voucher-result--paybybank_pix .adyen-checkout__voucher-result__bottom { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; } 3773.adyen-checkout__voucher-result--paybybank_pix .adyen-checkout__voucher-result__image { margin-bottom: var(--adyen-sdk-spacer-070,16px); } 3774.adyen-checkout__voucher-result--paybybank_pix .adyen-checkout__voucher-result__image__wrapper { width: 8em; } 3775.adyen-checkout__voucher-result--paybybank_pix .adyen-checkout__voucher-result__image__wrapper > img { width: 100%; } 3776.adyen-checkout__voucher-result--paybybank_pix .adyen-checkout__voucher-result__amount { font-size: var(--adyen-sdk-text-title-l-font-size,1.5rem); font-weight: var(--adyen-sdk-text-title-l-font-weight,600); line-height: var(--adyen-sdk-text-title-l-line-height,34px); margin-top: var(--adyen-sdk-spacer-000,0); } 3777.adyen-checkout-await-logo-container { align-items: center; background: var(--adyen-sdk-color-background-secondary,#f7f7f8); border-radius: var(--adyen-sdk-border-radius-m,8px); display: flex; flex-direction: column; gap: var(--adyen-sdk-spacer-070,16px); padding: var(--adyen-sdk-spacer-070,16px) var(--adyen-sdk-spacer-090,24px); width: fit-content; } 3778.adyen-checkout-await-logo-container:has(> :only-child) { background: none; } 3779.adyen-checkout__await { background: var(--adyen-sdk-color-background-primary,#ffffff); border: var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-outline-secondary,#c9cdd3); border-radius: var(--adyen-sdk-border-radius-m,8px); padding: var(--adyen-sdk-spacer-110,40px); text-align: center; } 3780.adyen-checkout__await--result { padding: 100px; } 3781.adyen-checkout__await__brand-logo { border-radius: 3px; width: 74px; } 3782.adyen-checkout__await__instructions { display: flex; justify-content: center; } 3783.adyen-checkout__await__indicator-text, .adyen-checkout__await__subtitle { color: var(--adyen-sdk-color-label-primary,#00112c
3783); font-size: var(--adyen-sdk-text-subtitle-font-size,1rem); line-height: var(--adyen-sdk-text-caption-line-height,18px); margin-top: var(--adyen-sdk-spacer-100,32px); } 3784.adyen-checkout__await__indicator-holder .adyen-checkout__await__indicator-text { margin-left: var(--adyen-sdk-spacer-050,10px); margin-top: var(--adyen-sdk-spacer-030,6px); } 3785.adyen-checkout__await__indicator-holder { display: flex; justify-content: center; margin-bottom: var(--adyen-sdk-spacer-080,20px); margin-top: var(--adyen-sdk-spacer-100,32px); } 3786.adyen-checkout__await__subtitle--result { margin-bottom: var(--adyen-sdk-spacer-100,32px); } 3787.adyen-checkout__await__icon { height: 88px; width: 88px; } 3788.adyen-checkout__await__progress { background: var(--adyen-sdk-color-outline-secondary,#c9cdd3); border-radius: var(--adyen-sdk-border-radius-l,12px); height: var(--adyen-sdk-spacer-020,4px); margin: var(--adyen-sdk-spacer-100,32px) auto var(--adyen-sdk-spacer-060,12px); width: 152px; } 3789.adyen-checkout__await__percentage { background: var(--adyen-sdk-color-label-primary,#00112c
3789); border-radius: var(--adyen-sdk-border-radius-l,12px); display: block; height: 100%; } 3790.adyen-checkout__await__countdown { color: var(--adyen-sdk-color-label-secondary,#5c687c); font-size: var(--adyen-sdk-text-body-font-size,.875rem); } 3791.adyen-checkout__await > .adyen-checkout__spinner__wrapper { margin: 60px 0px; } 3792.adyen-checkout__await__app-link { display: block; margin-top: var(--adyen-sdk-spacer-070,16px); } 3793.adyen-checkout__await__amount { font-size: var(--adyen-sdk-text-title-l-font-size,1.5rem); font-weight: var(--adyen-sdk-text-title-font-weight,600); margin-top: var(--adyen-sdk-spacer-070,16px); text-align: center; } 3794@media (min-width: 1280px) { 3795 .adyen-checkout__await__app-link { display: none; } 3796} 3797.adyen-checkout-pay-by-bank-pix-await { align-items: center; display: flex; flex-direction: column; } 3798.adyen-checkout-pay-by-bank-pix-await .adyen-checkout__await__countdown-holder, .adyen-checkout-pay-by-bank-pix-await .adyen-checkout__await__subtitle { display: none; } 3799.adyen-checkout-pay-by-bank-pix-await .adyen-checkout__await, .adyen-checkout-pay-by-bank-pix-await .adyen-checkout__await--paybybank_pix { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 0px; } 3800.adyen-checkout-pay-by-bank-pix-await .adyen-checkout__await__indicator-holder { margin-top: var(--adyen-sdk-spacer-090,24px); } 3801.adyen-checkout-pay-by-bank-pix-await .adyen-checkout__await__countdown { color: var(--adyen-sdk-color-label-primary,#00112c
3801); } 3802.adyen-checkout-pay-by-bank-pix-await .adyen-checkout__await__end-slot { color: var(--adyen-sdk-color-label-tertiary,#5c687c); font-size: var(--adyen-sdk-text-caption-font-size,.75rem); font-weight: var(--adyen-sdk-text-caption-font-weight,400); line-height: var(--adyen-sdk-text-caption-line-height,18px); margin-top: var(--adyen-sdk-spacer-090,24px); } 3803.adyen-checkout-issuer-list-introduction-logo-container { border-radius: var(--adyen-sdk-border-radius-m,8px); padding: var(--adyen-sdk-spacer-070,16px) var(--adyen-sdk-spacer-070,16px) 0; text-align: center; } 3804.adyen-checkout-issuer-list-introduction-logo-container__title { font-size: var(--adyen-sdk-text-caption-font-size,.75rem); font-weight: var(--adyen-sdk-text-caption-stronger-font-weight,500); line-height: var(--adyen-sdk-text-caption-line-height,18px); margin: 0px; } 3805.adyen-checkout-issuer-list-introduction-logo-container__logo { height: auto; width: 8em; } 3806.adyen-checkout-pix-enrollment-issuer-list { display: flex; flex-direction: column; gap: var(--adyen-sdk-spacer-070,16px); } 3807.adyen-checkout-pix-enrollment-issuer-list .adyen-checkout-disclaimer__label { color: var(--adyen-sdk-color-label-secondary,#5c687c); display: inline-block; font-size: var(--adyen-sdk-text-caption-font-size,.75rem); font-weight: var(--adyen-sdk-text-caption-font-weight,400); line-height: var(--adyen-sdk-text-caption-line-height,18px); margin: 0px; } 3808.adyen-checkout-await-logo-open-finance { height: auto; width: 8em; } 3809.adyen-checkout-await-logo-arrow-down { height: auto; width: 1em; } 3810.adyen-checkout-await-logo-bank { height: auto; width: 3em; } 3811.adyen-checkout__klarna-widget { pointer-events: all; } 3812.adyen-checkout__qr-loader--pix { padding-bottom: var(--adyen-sdk-spacer-110,40px); } 3813.adyen-checkout__qr-loader--pix__qr_details { align-items: center; display: flex; flex-direction: column; gap: var(--adyen-sdk-spacer-070,16px); max-width: 318px; width: 100%; } 3814.adyen-checkout__qr-loader--pix__qr_details__timer { align-items: center; display: flex; flex-direction: column; margin-bottom: var(--adyen-sdk-spacer-040,8px); } 3815.adyen-checkout__qr-loader--pix__qr_details__code { font-size: var(--adyen-sdk-text-body-font-size,.875rem); text-align: center; } 3816.adyen-checkout__qr-loader--swish > .adyen-checkout__qr-loader__instructions { text-align: center; } 3817.adyen-checkout-paynow__introduction, .adyen-checkout-paynow__instructions { color: var(--adyen-sdk-color-label-primary,#00112c
3817); font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); line-height: var(--adyen-sdk-text-body-line-height,20px); text-align: center; } 3818.adyen-checkout-paynow__instructions > p { margin-bottom: 0px; } 3819.adyen-checkout__blik__helper { color: var(--adyen-sdk-color-label-primary,#00112c); font-size: var(--adyen-sdk-text-subtitle-font-size,1rem); font-weight: 400; margin: 0 0 var(--adyen-sdk-spacer-070,16px); padding: 0px; } 3820.adyen-checkout__loading-input__form { transition: opacity 0.25s ease-out; } 3821.adyen-checkout__fieldset--phone-input { direction: ltr; } 3822.adyen-checkout__fieldset--phone-input .adyen-checkout__fieldset__fields { gap: var(--adyen-sdk-spacer-070,16px); } 3823.adyen-checkout__fieldset--phone-input .adyen-checkout__fieldset__fields > .adyen-checkout__field { margin-bottom: 0px; } 3824.adyen-checkout-field--phone-prefix { width: 144px; } 3825.adyen-checkout-field--phone-number { flex: 1 1 0%; } 3826.adyen-checkout__payment-method__header__title { align-items: center; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial;
3826 color: var(--adyen-sdk-color-label-primary,#00112c); cursor: pointer; display: flex; flex: 1 1 0%; font-size: 1em; font-weight: var(--adyen-sdk-text-body-stronger-font-weight,500); gap: var(--adyen-sdk-spacer-060,12px); max-height: 38px; max-width: 100%; padding: 0px; } 3827[dir="rtl"] .adyen-checkout__payment-method__header__title { margin-left: var(--adyen-sdk-spacer-070,16px); margin-right: var(--adyen-sdk-spacer-000,0); } 3828.adyen-checkout__payment-method__header__title--standalone { cursor: default; } 3829.adyen-checkout__payment-method__radio { background-color: var(--adyen-sdk-color-background-primary,#ffffff); border: var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-outline-secondary,#c9cdd3); border-radius: 50%; height: var(--adyen-sdk-spacer-070,16px); left: var(--adyen-sdk-spacer-070,16px); transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out; width: var(--adyen-sdk-spacer-070,16px); } 3830[dir="rtl"] .adyen-checkout__payment-method__radio { left: auto; right: var(--adyen-sdk-spacer-070,16px); } 3831.adyen-checkout__payment-method__radio::after { background-color: var(--adyen-sdk-color-background-primary,#ffffff); border-radius: 50%; content: ""; display: block; height: var(--adyen-sdk-spacer-040,8px); left: 0px; margin: 0px auto; position: relative; right: 0px; top: 50%; transform: translateY(-50%) scale(0); transition: transform 0.3s ease-out; width: var(--adyen-sdk-spacer-040,8px); } 3832.adyen-checkout__payment-method__radio--selected { background-color: var(--adyen-sdk-color-label-primary,#00112c
3832); border: 0px; transition: 0.3s ease-out; } 3833.adyen-checkout__payment-method__radio--selected:hover { box-shadow: 0 0 0 var(--adyen-sdk-spacer-010,2px) var(--adyen-sdk-color-outline-primary-hover,#c9cdd3); } 3834.adyen-checkout__payment-method__radio--selected::after { transform: translateY(-50%) scale(1); } 3835.adyen-checkout-upi-app-item { align-items: center; background: var(--adyen-sdk-color-background-primary,#ffffff); border: var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-outline-primary,#dbdee2); border-radius: var(--adyen-sdk-border-radius-m,8px); cursor: pointer; display: flex; gap: var(--adyen-sdk-spacer-070,16px); justify-content: space-between; padding: var(--adyen-sdk-spacer-050,10px) var(--adyen-sdk-spacer-070,16px); transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, border-radius 0.15s; width: 100%; } 3836.adyen-checkout-upi-app-item__label { cursor: pointer; font-size: var(--adyen-sdk-text-body-font-size,.875rem); } 3837.adyen-checkout-upi-app-item:hover:not(.adyen-checkout-upi-app-item--selected) { border-color: var(--adyen-sdk-color-outline-primary-hover,#c9cdd3); } 3838.adyen-checkout-upi-app-item--selected { border-color: var(--adyen-sdk-color-outline-primary-active,#00112c); box-shadow: 0 0 0 .5px var(--adyen-sdk-color-outline-primary-active,#00112c); cursor: default; } 3839.adyen-checkout-upi-app-item--selected .adyen-checkout-expand-button--upi-app-item, .adyen-checkout-upi-app-item--selected .adyen-checkout-expand-button--upi-app-item > label { cursor: default; } 3840.adyen-checkout-upi-app-item .adyen-checkout-expand-button--upi-app-item { margin-right: 0px; } 3841.adyen-checkout-upi-app-item__checkmark { border-bottom: 1.5px solid var(--adyen-sdk-color-label-primary,#00112c
3841); border-right: 1.5px solid var(--adyen-sdk-color-label-primary,#00112c); height: var(--adyen-sdk-spacer-060,12px); transform: rotate(45deg); width: var(--adyen-sdk-spacer-030,6px); } 3842.adyen-checkout-upi-app-list { display: flex; flex-direction: column; gap: var(--adyen-sdk-spacer-070,16px); list-style: none; margin: 0px; padding: 0px; } 3843.adyen-checkout-upi-app-list--loading { pointer-events: none; user-select: none; } 3844.adyen-checkout-upi-area-intent .adyen-checkout__alert-message--info, .adyen-checkout-upi-area-intent .adyen-checkout__button--pay { margin-top: var(--adyen-sdk-spacer-070,16px); } 3845.adyen-checkout-upi-area-qr-code .adyen-checkout__button--pay, .adyen-checkout-upi-instruction-label { margin-top: var(--adyen-sdk-spacer-000,0); } 3846.adyen-checkout-upi-instruction-label { color: var(--adyen-sdk-color-label-secondary,#5c687c); display: flex; font-size: var(--adyen-sdk-text-caption-font-size,.75rem); font-weight: var(--adyen-sdk-text-caption-font-weight,400); line-height: var(--adyen-sdk-text-caption-line-height,18px); } 3847.adyen-checkout-upi-brands, .adyen-checkout-upi-instruction-label { margin-bottom: var(--adyen-sdk-spacer-070,16px); } 3848.adyen-checkout__payto-component .adyen-checkout__fieldset, .adyen-checkout__payto-component .adyen-checkout__fieldset .adyen-checkout__fieldset__fields { margin-top: var(--adyen-sdk-spacer-070,16px); } 3849.adyen-checkout__payto-component .adyen-checkout-field--phone-prefix { width: 98px; } 3850.adyen-checkout__payto-component--loading { pointer-events: none; } 3851.adyen-checkout__await--payto .adyen-checkout__details-table { margin-top: var(--adyen-sdk-spacer-070,16px); padding-top: var(--adyen-sdk-spacer-060,12px); } 3852.adyen-checkout__await--payto .adyen-checkout__details-table__item:first-child { border-top-width: medium; border-top-style: none; border-top-color: currentcolor; } 3853.adyen-checkout__giftcard-result__balance { list-style: none; margin: var(--adyen-sdk-spacer-070,16px) 0 0; padding: 0px; } 3854.adyen-checkout__giftcard-result__balance__item { display: flex; justify-content: space-between; margin-bottom: var(--adyen-sdk-spacer-040,8px); } 3855.adyen-checkout__giftcard-result__balance__item .adyen-checkout__giftcard-result__balance__title--transactionLimit { color: var(--adyen-sdk-color-label-secondary,#5c687c); } 3856.adyen-checkout__giftcard-result__balance__item:last-child { margin-bottom: 0px; } 3857.adyen-checkout__giftcard-result__balance__value--amount { font-weight: 700; } 3858.adyen-checkout__giftcard-result__remaining-balance { color: var(--adyen-sdk-color-label-secondary,#5c687c); font-size: var(--adyen-sdk-text-body-font-size,.875rem); line-height: var(--adyen-sdk-text-caption-line-height,18px); margin: var(--adyen-sdk-spacer-040,8px) auto 0; text-align: center; } 3859.adyen-checkout__voucher-result { border-radius: var(--adyen-sdk-border-radius-m,8px); position: relative; text-align: center; } 3860.adyen-checkout__voucher-result--bankTransfer .adyen-checkout__voucher-result-title { font-size: var(--adyen-sdk-text-title-font-size,1rem); font-weight: var(--adyen-sdk-text-title-font-weight,600); line-height: var(--adyen-sdk-text-title-line-height,26px); margin-bottom: var(--adyen-sdk-spacer-070,16px); } 3861.adyen-checkout__voucher-result--bankTransfer .adyen-checkout__voucher-result__bottom, .adyen-checkout__voucher-result--bankTransfer .adyen-checkout__voucher-result__top { background: var(--adyen-sdk-color-background-primary,#ffffff); border: var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-separator-primary,#dbdee2); display: flex; flex-direction: column; } 3862.adyen-checkout__voucher-result--bankTransfer .adyen-checkout__voucher-result__bottom .adyen-checkout__details-table, .adyen-checkout__voucher-result--bankTransfer .adyen-checkout__voucher-result__top .adyen-checkout__details-table { background: var(--adyen-sdk-color-background-secondary,#f7f7f8); border-radius: var(--adyen-sdk-border-radius-m,8px); margin: 0px; } 3863.adyen-checkout__voucher-result--bankTransfer .adyen-checkout__voucher-result__bottom .adyen-checkout__details-table__item:first-child, .adyen-checkout__voucher-result--bankTransfer .adyen-checkout__voucher-result__top .adyen-checkout__details-table__item:first-child { border-top-width: medium; border-top-style: none; border-top-color: currentcolor; } 3864.adyen-checkout__voucher-result--bankTransfer .adyen-checkout__voucher-result__top { align-items: center; border-bottom: 0px; border-radius: var(--adyen-sdk-border-radius-m,8px) var(--adyen-sdk-border-radius-m,8px) 0 0; padding: var(--adyen-sdk-spacer-100,32px) var(--adyen-sdk-spacer-090,24px) var(--adyen-sdk-spacer-090,24px); } 3865.adyen-checkout__voucher-result--bankTransfer .adyen-checkout__voucher-result__bottom { border-radius: 0 0 var(--adyen-sdk-border-radius-m,8px) var(--adyen-sdk-border-radius-m,8px); border-top: 0px; padding: 0 var(--adyen-sdk-spacer-090,24px) var(--adyen-sdk-spacer-100,32px); } 3866.adyen-checkout__voucher-result--bankTransfer .adyen-checkout__voucher-result__image { align-items: center; display: flex; justify-content: center; margin-bottom: var(--adyen-sdk-spacer-090,24px); width: 100%; } 3867.adyen-checkout__voucher-result--bankTransfer .adyen-checkout-link--voucher-result-instructions { display: inline-block; } 3868.adyen-checkout__voucher-result--bankTransfer .adyen-checkout__voucher-result__image__wrapper { display: block; height: var(--adyen-sdk-spacer-120,48px); position: relative; } 3869.adyen-checkout__voucher-result--bankTransfer .adyen-checkout__voucher-result__image__wrapper::after { border-radius: var(--adyen-sdk-border-radius-m,8px); box-shadow: var(--adyen-sdk-shadow-low,0 2px 4px rgba(0,17,44,.04),0 1px 2px rgba(0,17,44,.02)); content: ""; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; } 3870.adyen-checkout__voucher-result--bankTransfer .adyen-checkout__voucher-result__image__wrapper:nth-child(2) { margin-left: 0px; } 3871.adyen-checkout__voucher-result--bankTransfer .adyen-checkout__voucher-result__image__brand, .adyen-checkout__voucher-result--bankTransfer .adyen-checkout__voucher-result__image__issuer { border-radius: var(--adyen-sdk-border-radius-m,8px); height: var(--adyen-sdk-spacer-120,48px); } 3872.adyen-checkout__voucher-result--bankTransfer .adyen-checkout__voucher-result__amount { font-size: var(--adyen-sdk-text-title-l-font-size,1.5rem);
3872 font-weight: var(--adyen-sdk-text-title-l-font-weight,600); line-height: var(--adyen-sdk-text-title-l-line-height,34px); margin: 0 auto var(--adyen-sdk-spacer-090,24px); } 3873.adyen-checkout__bankTransfer__introduction { color: var(--adyen-sdk-color-label-primary,#00112c); font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); margin: 0 0 var(--adyen-sdk-spacer-070,16px); padding: 0px; } 3874.adyen-checkout__bankTransfer__emailField { margin: 0 0 var(--adyen-sdk-spacer-070,16px); } 3875.adyen-checkout__adyen-giving .adyen-checkout__status__icon { display: block; margin: var(--adyen-sdk-spacer-130,56px) auto var(--adyen-sdk-spacer-100,32px); } 3876.adyen-checkout__adyen-giving .adyen-checkout__status__text { color: var(--adyen-sdk-color-label-primary,#00112c); margin-bottom: var(--adyen-sdk-spacer-130,56px); text-align: center; } 3877.adyen-checkout__adyen-giving .adyen-checkout-disclaimer__label { color: var(--adyen-sdk-color-label-primary,#00112c); margin-top: 0px; } 3878.adyen-checkout__campaign { position: relative; } 3879.adyen-checkout__campaign-link:hover .adyen-checkout__campaign-description { text-decoration: underline; } 3880.adyen-checkout__campaign-logo { border: var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-outline-primary,#dbdee2); border-radius: var(--adyen-sdk-border-radius-s,4px); display: block; flex-shrink: 0; height: var(--adyen-sdk-spacer-120,48px); object-fit: cover; object-position: center center; overflow: hidden; width: var(--adyen-sdk-spacer-120,48px); } 3881.adyen-checkout__campaign-background-image { aspect-ratio: 5 / 2;
3881 background-color: var(--adyen-sdk-color-label-primary,#00112c); background-position: 50% center; background-size: 100%; border-radius: var(--adyen-sdk-border-radius-m,8px); margin-bottom: var(--adyen-sdk-spacer-060,12px); overflow: hidden; transition: background-size 0.6s ease-out; } 3882.adyen-checkout__campaign-background-image:hover { background-size: 110%; } 3883.adyen-checkout__campaign-link { text-decoration: none; } 3884.adyen-checkout__campaign-link:hover { text-decoration: underline; } 3885.adyen-checkout__campaign-content { align-items: flex-start; display: flex; gap: var(--adyen-sdk-spacer-060,12px); } 3886.adyen-checkout__campaign-description, .adyen-checkout__campaign-title { color: var(--adyen-sdk-color-label-primary,#00112c); margin: 0px; } 3887.adyen-checkout__campaign-title { font-size: var(--adyen-sdk-text-title-font-size,1rem); font-weight: var(--adyen-sdk-text-title-font-weight,600); line-height: var(--adyen-sdk-text-title-line-height,26px); } 3888.adyen-checkout__campaign-cause { font-weight: var(--adyen-sdk-text-caption-stronger-font-weight,500); } 3889.adyen-checkout__campaign-cause, .adyen-checkout__campaign-description { font-size: var(--adyen-sdk-text-caption-font-size,.75rem); line-height: var(--adyen-sdk-text-caption-line-height,18px); } 3890.adyen-checkout__campaign-description { font-weight: var(--adyen-sdk-text-caption-font-weight,400); margin-top: var(--adyen-sdk-spacer-060,12px); } 3891.adyen-checkout-roundup-description { color: var(--adyen-sdk-color-label-secondary,#5c687c); display: inline-block; font-size: var(--adyen-sdk-text-caption-font-size,.75rem); font-weight: var(--adyen-sdk-text-caption-font-weight,400); line-height: var(--adyen-sdk-text-caption-line-height,18px); padding-left: 0px; } 3892.adyen-checkout__adyen-giving-actions { display: flex; flex-direction: column; gap: var(--adyen-sdk-spacer-070,16px); margin-top: var(--adyen-sdk-spacer-070,16px); text-align: center; } 3893.adyen-checkout__button.adyen-checkout__button--donate { margin: var(--adyen-sdk-spacer-000,0); } 3894.adyen-checkout__button.adyen-checkout__button--decline { display: block; margin: auto; } 3895.adyen-checkout__button-group { background: transparent; display: flex; justify-content: space-between; } 3896.adyen-checkout__button-group .adyen-checkout__button { background: transparent; border: 0px; box-shadow: inset 0 0 0 1px var(--adyen-sdk-color-outline-primary,#dbdee2);
3896 color: var(--adyen-sdk-color-label-primary,#00112c); font-size: var(--adyen-sdk-text-body-font-size,.875rem); font-weight: 400; height: var(--adyen-sdk-spacer-110,40px); line-height: var(--adyen-sdk-spacer-110,40px); margin-right: var(--adyen-sdk-spacer-040,8px); padding: 0px; text-align: center; } 3897.adyen-checkout__button-group .adyen-checkout__button:last-child { margin-right: 0px; } 3898.adyen-checkout__button-group .adyen-checkout__button:hover { background: transparent; box-shadow: inset 0 0 0 var(--adyen-sdk-spacer-010,2px) var(--adyen-sdk-color-outline-primary-hover,#c9cdd3); } 3899.adyen-checkout__button-group .adyen-checkout__button:active { background: var(--adyen-sdk-color-background-secondary,#f7f7f8); box-shadow: inset 0 0 0 var(--adyen-sdk-spacer-010,2px) var(--adyen-sdk-color-outline-tertiary,#8d95a3); } 3900.adyen-checkout__button-group .adyen-checkout__button--disabled, .adyen-checkout__button-group .adyen-checkout__button--disabled:hover { cursor: not-allowed; opacity: 0.4; user-select: none; } 3901.adyen-checkout__button-group .adyen-checkout__button--selected, .adyen-checkout__button-group .adyen-checkout__button--selected:active, .adyen-checkout__button-group .adyen-checkout__button--selected:active:hover, .adyen-checkout__button-group .adyen-checkout__button--selected:hover { background: var(--adyen-sdk-color-background-secondary,#f7f7f8); box-shadow: inset 0 0 0 1px var(--adyen-sdk-color-label-primary,#00112c
3901); color: var(--adyen-sdk-color-label-primary,#00112c); font-weight: var(--adyen-sdk-text-body-stronger-font-weight,500); height: var(--adyen-sdk-spacer-110,40px); transition: none; } 3902.adyen-checkout__button-group .adyen-checkout__button .adyen-checkout__button-group__input { opacity: 0; pointer-events: none; position: absolute; } 3903.adyen-checkout__order-payment-methods-list { list-style: none; margin: 0 auto var(--adyen-sdk-spacer-070,16px); padding: 0px; } 3904.adyen-checkout__order-payment-method { background: var(--adyen-sdk-color-background-primary,#ffffff); border: var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-outline-tertiary,#8d95a3); margin-top: -1px; position: relative; width: 100%; } 3905.adyen-checkout__order-payment-method:first-child { border-top-left-radius: var(--adyen-sdk-border-radius-m,8px); border-top-right-radius: var(--adyen-sdk-border-radius-m,8px); } 3906.adyen-checkout__order-payment-method:last-child { border-bottom-left-radius: var(--adyen-sdk-border-radius-m,8px); border-bottom-right-radius: var(--adyen-sdk-border-radius-m,8px); } 3907.adyen-checkout__order-payment-method__header { align-items: center;
3907 color: var(--adyen-sdk-color-label-primary,#00112c); display: flex; flex-wrap: nowrap; font-size: var(--adyen-sdk-text-title-font-size,1rem); font-weight: var(--adyen-sdk-text-body-stronger-font-weight,500); justify-content: space-between; padding: var(--adyen-sdk-spacer-070,16px); position: relative; transition: background 0.1s ease-out; width: 100%; } 3908.adyen-checkout__order-payment-method__header .adyen-checkout__payment-method__header__title { padding: var(--adyen-sdk-spacer-000,0); } 3909.adyen-checkout__order-payment-method__details { padding: 0 var(--adyen-sdk-spacer-070,16px) var(--adyen-sdk-spacer-070,16px); } 3910.adyen-checkout__order-payment-method__deducted-amount { display: flex; font-size: var(--adyen-sdk-text-subtitle-font-size,1rem); justify-content: space-between; line-height: var(--adyen-sdk-text-subtitle-font-size,1rem); } 3911.adyen-checkout__order-payment-method__deducted-amount__label { font-size: var(--adyen-sdk-text-body-font-size,.875rem); } 3912.adyen-checkout__order-payment-method__deducted-amount__value { font-weight: var(--adyen-sdk-text-body-stronger-font-weight,500); } 3913.adyen-checkout__order-remaining-amount { border-radius: var(--adyen-sdk-border-radius-m,8px); color: var(--adyen-sdk-color-label-secondary,#5c687c); display: block; font-size: var(--adyen-sdk-text-body-font-size,.875rem); padding: var(--adyen-sdk-spacer-040,8px) var(--adyen-sdk-spacer-070,16px); width: 100%; } 3914.adyen-checkout__order-remaining-amount strong { font-weight: 700; } 3915.adyen-checkout__dropin--loading .adyen-checkout__instant-payment-methods-list { opacity: 0.2; pointer-events: none; user-select: none; } 3916.adyen-checkout__payment-method__disable-confirmation { background: var(--adyen-sdk-color-background-critical-strong,#e22d2d); border-left: 1px solid rgb(225, 36, 36); border-right: 1px solid rgb(225, 36, 36); color: var(--adyen-sdk-color-label-on-color,#ffffff); display: grid; font-size: var(--adyen-sdk-text-body-font-size,.875rem); grid-template-rows: 0fr; margin: 0px -17px; opacity: 0; overflow: hidden; transition: grid-template-rows var(--adyen-sdk-animation-duration-moderate,.15s) var(--adyen-sdk-animation-easing-linear,linear),opacity var(--adyen-sdk-animation-duration-moderate,.15s) var(--adyen-sdk-animation-easing-standard,cubic-bezier(.2,0,.4,.9)),margin-bottom var(--adyen-sdk-animation-duration-fast,.1s) var(--adyen-sdk-animation-easing-linear,linear); } 3917.adyen-checkout__payment-method__disable-confirmation__content { align-items: center; display: flex; justify-content: space-between; min-height: 0px; transition: visibility var(--adyen-sdk-animation-duration-moderate,.15s) var(--adyen-sdk-animation-easing-linear,linear),padding var(--adyen-sdk-animation-duration-fast,.1s) var(--adyen-sdk-animation-easing-linear,linear); visibility: hidden; } 3918.adyen-checkout__payment-method__disable-confirmation--open { grid-template-rows: 1fr; margin-bottom: var(--adyen-sdk-spacer-070,16px); opacity: 1; } 3919.adyen-checkout__payment-method__disable-confirmation--open .adyen-checkout__payment-method__disable-confirmation__content { padding: var(--adyen-sdk-spacer-040,8px) var(--adyen-sdk-spacer-070,16px); visibility: visible; } 3920.adyen-checkout__payment-method__disable-confirmation__buttons { display: flex; } 3921.adyen-checkout__payment-method__disable-confirmation__button { background: var(--adyen-sdk-color-background-critical-strong,#e22d2d); border: var(--adyen-sdk-border-width-s,1px) solid transparent; border-radius: var(--adyen-sdk-border-radius-m,8px); color: var(--adyen-sdk-color-label-on-color,#ffffff); cursor: pointer; display: block; font-size: var(--adyen-sdk-text-body-font-size,.875rem); height: auto; margin: 0 0 0 var(--adyen-sdk-spacer-040,8px); padding: var(--adyen-sdk-spacer-040,8px); width: auto; } 3922.adyen-checkout__payment-method__disable-confirmation__button:hover, .adyen-checkout__payment-method__disable-confirmation__button:hover:focus { background: rgb(216, 30, 30); box-shadow: none; } 3923.adyen-checkout__payment-method__disable-confirmation__button:active, .adyen-checkout__payment-method__disable-confirmation__button:hover:active { background: rgb(193, 27, 27); box-shadow: none; } 3924.adyen-checkout__payment-method__disable-confirmation__button--remove, .adyen-checkout__payment-method__disable-confirmation__button--remove:disabled { border-color: var(--adyen-sdk-color-label-on-color,#ffffff); } 3925.adyen-checkout__payment-method__disable-confirmation__button--cancel, .adyen-checkout__payment-method__disable-confirmation__button--cancel:disabled { border-color: transparent; } 3926.adyen-checkout__payment-method__name { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } 3927.adyen-checkout__payment-method__additional-info { color: var(--adyen-sdk-color-label-secondary,#5c687c); font-size: var(--adyen-sdk-text-caption-font-size,.75rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); } 3928.adyen-checkout__payment-method__name_wrapper { align-items: flex-start; display: flex; flex-direction: column; gap: var(--adyen-sdk-spacer-020,4px); min-width: var(--adyen-sdk-spacer-120,48px); text-align: start; } 3929.adyen-checkout__payment-method { background: var(--adyen-sdk-color-background-primary,#ffffff); border: var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-outline-primary,#dbdee2); border-radius: var(--adyen-sdk-border-radius-m,8px); cursor: pointer; position: relative; transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, border-radius 0.15s; width: 100%; } 3930.adyen-checkout__payment-method:focus { outline: 0px; } 3931.adyen-checkout__payment-method:hover:not(.adyen-checkout__payment-method--selected) { border-color: var(--adyen-sdk-color-outline-primary-hover,#c9cdd3); } 3932.adyen-checkout__payment-method--loading { opacity: 0.2; } 3933.adyen-checkout__payment-method--selected.adyen-checkout__payment-method--loading { opacity: 0.9; } 3934.adyen-checkout__payment-method--confirming .adyen-checkout__payment-method__details__content, .adyen-checkout__payment-method--disabling { pointer-events: none; user-select: none; } 3935.adyen-checkout__payment-method--disabling { opacity: 0.3; } 3936.adyen-checkout__payment-method--standalone .adyen-checkout__payment-method__radio { display: none; }
3937.adyen-checkout__payment-method__header { color: var(--adyen-sdk-color-label-primary,#00112c); display: flex; flex-wrap: nowrap; font-size: var(--adyen-sdk-text-title-font-size,1rem); font-weight: var(--adyen-sdk-text-body-font-weight,400); justify-content: space-between; padding: var(--adyen-sdk-spacer-070,16px); position: relative; transition: background 0.1s ease-out; width: 100%; } 3938[dir="rtl"] .adyen-checkout__payment-method__header { padding-top: ; padding-bottom: ; padding-left: ; padding-right: calc(var(--adyen-sdk-spacer-120, 48px) - var(--adyen-sdk-spacer-020, 4px)); } 3939.adyen-checkout__payment-method__header .adyen-checkout__payment-method__header__content { max-height: fit-content; } 3940@media (min-width: 427.5px) { 3941 .adyen-checkout__payment-method__header .adyen-checkout__payment-method__header__content { align-items: center; } 3942} 3943.adyen-checkout__payment-method__header .adyen-checkout__payment-method__header__details { display: flex; flex: 1 1 0%; flex-direction: column; gap: var(--adyen-sdk-spacer-040,8px); justify-content: space-between; overflow: hidden; } 3944@media (min-width: 427.5px) { 3945 .adyen-checkout__payment-method__header .adyen-checkout__payment-method__header__details { align-items: center; flex-direction: row; } 3946} 3947.adyen-checkout__payment-method--standalone .adyen-checkout__payment-method__header { padding: var(--adyen-sdk-spacer-070,16px); } 3948.adyen-checkout__payment-method__surcharge { color: var(--adyen-sdk-color-label-secondary,#5c687c); margin-left: var(--adyen-sdk-spacer-020,4px); } 3949.adyen-checkout__payment-method--selected { background: var(--adyen-sdk-color-background-secondary,#f7f7f8); border: var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-outline-secondary,#c9cdd3); cursor: default; transition: opacity 0.3s ease-out; } 3950.adyen-checkout__payment-method--selected .adyen-checkout__payment-method__header { flex-wrap: wrap; } 3951.adyen-checkout__payment-method__details { padding: var(--adyen-sdk-spacer-000,0) var(--adyen-sdk-spacer-070,16px); position: relative; } 3952.adyen-checkout__payment-method__details__content > :last-child { margin-bottom: var(--adyen-sdk-spacer-070,16px); } 3953.adyen-checkout__payment-method__image__wrapper { align-items: center; border-radius: var(--adyen-sdk-border-radius-s,4px); display: flex; height: 26px; justify-content: center; overflow: hidden; position: relative; width: var(--adyen-sdk-spacer-110,40px); } 3954.adyen-checkout__payment-method__image { border-radius: var(--adyen-checkout-border-radius-s); display: block; flex-shrink: 0; height: 100%; overflow: hidden; width: 100%; } 3955.adyen-checkout__payment-method--selected .adyen-checkout__payment-method__brands { height: auto; overflow: visible; text-align: left; } 3956.adyen-checkout__payment-method__brands .adyen-checkout__payment-method__image__wrapper { display: inline-block; height: var(--adyen-sdk-spacer-070,16px); transition: opacity 0.2s ease-out; width: var(--adyen-sdk-spacer-090,24px); } 3957.adyen-checkout__payment-method__brands .adyen-checkout__payment-method__image__wrapper:last-child { margin: var(--adyen-sdk-spacer-000,0); } 3958.adyen-checkout__payment-method--selected .adyen-checkout__payment-method__brands .adyen-checkout__payment-method__image__wrapper { margin-bottom: var(--adyen-sdk-spacer-020,4px); } 3959.adyen-checkout__payment-method__brands img { height: 100%; width: 100%; } 3960.adyen-checkout__payment-method:hover:not(.adyen-checkout__payment-method--selected) .adyen-checkout__payment-method__radio { box-shadow: 0 0 0 var(--adyen-sdk-spacer-010,2px) var(--adyen-sdk-color-outline-primary-hover,#c9cdd3); cursor: pointer; } 3961.adyen-checkout__status { align-items: center; background-color: var(--adyen-sdk-color-background-primary,#ffffff); border: var(--adyen-sdk-border-width-s,1px) solid var(--adyen-sdk-color-outline-secondary,#c9cdd3); border-radius: var(--adyen-sdk-border-radius-m,8px);
3961 color: var(--adyen-sdk-color-label-primary,#00112c); display: flex; flex-direction: column; font-size: var(--adyen-sdk-text-title-font-size,1rem); height: 350px; justify-content: center; margin: 0px; padding: var(--adyen-sdk-spacer-100,32px); text-align: center; } 3962.adyen-checkout__status__icon { margin-bottom: var(--adyen-sdk-spacer-090,24px); } 3963.adyen-checkout__status .adyen-checkout__spinner__wrapper { max-height: 88px; } 3964.adyen-checkout__dropin { display: flex; flex-direction: column; gap: var(--adyen-sdk-spacer-070,16px); } 3965.adyen-checkout__button--dropin-show-paymentmethods { align-self: start; } 3966.adyen-checkout-payment-methods-container { display: flex; flex-direction: column; gap: var(--adyen-sdk-spacer-070,16px); } 3967.adyen-checkout-payment-methods-list-label { color: var(--adyen-sdk-color-label-primary,#00112c); font-size: var(--adyen-sdk-text-subtitle-font-size,1rem); font-weight: var(--adyen-sdk-text-subtitle-stronger-font-weight,600); line-height: var(--adyen-sdk-text-subtitle-line-height,26px); } 3968.adyen-checkout__payment-methods-list { display: flex; flex-direction: column; gap: var(--adyen-sdk-spacer-070,16px); list-style: none; margin: 0px; padding: 0px; } 3969.adyen-checkout__payment-methods-list--loading { pointer-events: none; user-select: none; } 3970.adyen-checkout__instant-payment-methods-list { display: flex; flex-wrap: wrap; gap: var(--adyen-sdk-spacer-070,16px); list-style: none; margin: 0px; padding: 0px; } 3971.adyen-checkout__instant-payment-methods-list li { flex: 1 0 calc(50% - var(--adyen-sdk-spacer-070, 16px)/2); } 3972.adyen-checkout__payment-method { display: block; } 3973.adyen-checkout__payment-method__details { overflow: hidden; } 3974.adyen-checkout__payment-method__image { height: 26px; width: var(--adyen-sdk-spacer-110,40px); } 3975[dir="rtl"] .adyen-checkout__payment-method__image__wrapper { margin-left: var(--adyen-sdk-spacer-040,8px); margin-right: 0px; } 3976.adyen-checkout-pm-details-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s; visibility: hidden; } 3977.adyen-checkout-pm-details-wrapper[aria-hidden="false"] { grid-template-rows: 1fr; visibility: visible; } 3978.adyen-checkout-pm-details-wrapper[aria-hidden="false"] .adyen-checkout__payment-method__details { overflow: visible; } 3979.adyen-checkout-sr-panel { font-size: 0.75em; margin-bottom: var(--adyen-sdk-spacer-080,20px); } 3980.adyen-checkout-sr-panel--sr-only { border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; } 3981apple-pay-button { --apple-pay-button-box-sizing: border-box !important; --apple-pay-button-border-radius: 24px !important; --apple-pay-button-height: 40px !important; --apple-pay-button-padding: 4px !important; --apple-pay-button-width: 100% !important; } 3982:root { --google-pay-button-color: black; --apple-pay-button-color: black; --checkout-modal-background-color: var(--background-colors-base); --adyen-sdk-color-label-critical: var(--error-colors-base-default); --adyen-sdk-color-outline-primary: var(--background-colors-tint-3); --adyen-sdk-color-background-primary: transparent; --adyen-input-placeholder-color: var(--text-colors-tint-2); --adyen-input-text-color: var(--text-colors-base); } 3983:root.dark { --google-pay-button-color: white; --apple-pay-button-color: white; --checkout-modal-background-color: var(--background-colors-base); } 3984[data-checkout-tier] { --adyen-sdk-color-outline-primary-active: var(--checkout-accent); --adyen-sdk-color-outline-tertiary: var(--checkout-accent-action); } 3985.adyen-checkout-form-instruction { display: none; } 3986.adyen-checkout__paypal__button.adyen-checkout__paypal__button { margin-bottom: var(--spacings-s0); } 3987.adyen-checkout__paywithgoogle.adyen-checkout__paywithgoogle { height: 40px; } 3988.adyen-checkout__applepay__button.adyen-checkout__applepay__button { border-radius: 50%; display: block; width: 100%; } 3989.adyen-checkout__card__brands.adyen-checkout__card__brands { display: none; } 3990.adyen-checkout__card-input .adyen-checkout__payment-method { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: none; } 3991.adyen-checkout__card-input .adyen-checkout__payment-method__header { display: none; } 3992.adyen-checkout__card-input .adyen-checkout__payment-method__details { padding: var(--spacings-s0); } 3993.adyen-checkout__card-input .adyen-checkout__error-text { font-weight: 600; font-size: var(--typography-t3-font-size); line-height: 1.2; color: var(--error-colors-base-default); margin: var(--spacings-s2) var(--spacings-s8); } 3994.adyen-checkout__card-input .adyen-checkout__label__text, .adyen-checkout__card-input .adyen-checkout__label--focused .adyen-checkout__label__text { display: none; font-weight: 600; font-size: var(--typography-t4-font-size); line-height: 1.4; padding: var(--spacings-s0); margin-bottom: var(--spacings-s8); color: var(--text-colors-tint-1); } 3995.adyen-checkout__card-input .adyen-checkout-contextual-text { display: none; } 3996.adyen-checkout__card-input .adyen-checkout__input_wrapper { display: flex; align-items: center; } 3997.adyen-checkout__card-input .adyen-checkout__input_wrapper .adyen-checkout__input
3997:-webkit-autofill, .adyen-checkout__card-input .adyen-checkout__input_wrapper .adyen-checkout__input:autofill { caret-color: var(--text-colors-base); box-shadow: 0 0 0 1000px var(--checkout-modal-background-color) inset !important; -webkit-text-fill-color: var(--text-colors-base) !important; } 3998@keyframes Input-rotation-df697 { 3999 0% { transform: rotate(0deg); } 4000 100% { transform: rotate(360deg); } 4001} 4002.Input-container-24a6a { position: relative; border: 1px solid var(--background-colors-tint-3); border-radius: var(--corner-radius-r8); padding: var(--spacings-s0) var(--spacings-s16); display: flex; align-items: center; box-sizing: border-box; width: 100%; height: 40px; font-weight: 500; font-size: var(--typography-t4-font-size); color: var(--text-colors-base); line-height: 20px; } 4003.Input-container-24a6a > input { flex-grow: 1; max-width: 100%; background: none; appearance: none; font-weight: inherit; line-height: inherit; font-size: inherit; color: inherit; display: block; outline: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: var(--spacings-s0); margin: var(--spacings-s0); } 4004.Input-container-24a6a > input::placeholder, .Input-container-24a6a > input:placeholder-shown { color: var(--text-colors-tint-2); font-weight: 500; } 4005.Input-container-24a6a > input:-webkit-autofill, .Input-container-24a6a > input:-webkit-autofill:hover, .Input-container-24a6a > input:-webkit-autofill:focus, .Input-container-24a6a > input:autofill { transition: background-color 9999s ease-in-out, color 9999s ease-in-out; -webkit-text-fill-color: var(--text-colors-base); caret-color: var(--text-colors-base); filter: none; } 4006.Input-container-24a6a.Input-withIcon-e74b8 { padding-right: var(--spacings-s32); } 4007.Input-container-24a6a.Input-error-ebffe { border: 2px solid var(--error-colors-base-default); } 4008.Input-container-24a6a.Input-disabled-fa4aa { opacity: var(--states-disabled); } 4009.Input-container-24a6a:not(.Input-disabled-fa4aa):not(.Input-error-ebffe):hover { border: 1px solid var(--checkout-accent-action); } 4010.Input-container-24a6a:not(.Input-disabled-fa4aa):not(.Input-error-ebffe):focus-within, .Input-container-24a6a:not(.Input-disabled-fa4aa):not(.Input-error-ebffe):active { border: 1px solid var(--checkout-accent); } 4011.Input-iconWrapper-4764d { display: block; position: absolute; width: 24px; height: 24px; right: 8px; top: 0px; bottom: 0px; margin: auto; } 4012.Input-tooltip-e17dd.Input-tooltip-e17dd { color: var(--text-colors-tint-1); } 4013.Input-icon-af7a4 { display: block; width: 100%; height: 100%; fill: var(--text-colors-tint-1); } 4014.Input-icon-af7a4.Input-loader-ca308 { animation: 1s linear 0s infinite normal none running Input-rotation-df697; } 4015.Input-icon-af7a4.Input-error-ebffe { fill: var(--error-colors-base-default); } 4016.Input-icon-af7a4.Input-checkmark-ea330 { fill: var(--success-colors-base-default); } 4017.Input-prefix-e1c26 { flex-grow: 0; flex-shrink: 0; margin-right: var(--spacings-s16); padding: var(--spacings-s0) var(--spacings-s12) var(--spacings-s0) var(--spacings-s0); border-right: 1px solid var(--background-colors-tint-3); font-weight: inherit; line-height: inherit; font-size: inherit; } 4018.Input-errorMessage-437a5 { color: var(--error-colors-base-default); font-weight: 600; font-size: var(--typography-t3-font-size); line-height: 1.2; margin: var(--spacings-s2) var(--spacings-s8); padding: var(--spacings-s0); } 4019.Avatax-zipCode-31926 input { font-weight: 500; font-family: Arial, sans-serif; } 4020.Avatax-zipCode-31926.Avatax-mobilePayment-81965 { margin-top: var(--spacings-s8); } 4021.Avatax-zipCode-31926.Avatax-mobilePayment-81965 input { font-size: var(--typography-t5-font-size); } 4022.Avatax-avataxTitle-4a1f0 { display: flex; flex-direction: column; gap: var(--spacings-s4); } 4023.Avatax-avataxContainer-e4cab { display: flex; flex-direction: column; gap: var(--spacings-s16); } 4024.CheckoutAccordion-accordion-8ca88 { border: 1px solid var(--background-colors-tint-2); border-radius: var(--corner-radius-r16); overflow: hidden; width: 100%; } 4025.CheckoutAccordion-item-9556c { border-top: 1px solid var(--background-colors-tint-2); padding: var(--spacings-s16); } 4026.CheckoutAccordion-header-38a61 { font-weight: 600; font-size: var(--typography-t5-font-size); padding: var(--spacings-s2); align-items: center; cursor: pointer; gap: var(--spacings-s8); display: flex; } 4027.CheckoutAccordion-cardPaymentIconsContainer-7cf91 { display: flex; gap: var(--spacings-s8); height: var(--spacings-s24); align-items: center; } 4028.CheckoutAccordion-cardPaymentIcon-deed4 { height: var(--spacings-s24); } 4029html.dark .CheckoutAccordion-visaIcon-88902 { filter: brightness(0) invert(1); } 4030.CheckoutAccordion-securityText-81cf4 { display: block; margin-top: var(--spacings-s16); } 4031.CheckoutAccordion-headerTitle-5b0ef { color: var(--text-colors-base); flex-grow: 1; } 4032.CheckoutAccordion-radio-d936f { place-content: center; height: var(--spacings-s16); width: var(--spacings-s16); border: 2px solid; border-radius: 50%; color: var(--text-colors-base); display: grid; } 4033.CheckoutAccordion-radio-d936f::before { transition: transform 0.12s ease-in-out; background-color: var(--text-colors-base); transform: scale(0); border-radius: 50%; content: ""; height: 8px; width: 8px; } 4034.CheckoutAccordion-radio-d936f:checked::before { transform: scale(1); } 4035.CheckoutAccordion-content-91f13 { transition: 0.2s ease-in-out; overflow: hidden; max-height: 0px; } 4036.CheckoutAccordion-contentOpen-842c2 { max-height: 50vh; opacity: 1; } 4037.CheckoutAccordion-contentClosed-315b2 { max-height: 0px !important; opacity: 0; } 4038.CheckoutAccordion-contentInner-d63bc { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: var(--spacings-s16); } 4039.CheckoutAccordion-benefitsList-ca2fa { margin-bottom: var(--spacings-s16); gap: var(--spacings-s8); display: grid; width: 100%; } 4040.CheckoutAccordion-listItem-9bc63 { gap: var(--spacings-s12); display: flex; } 4041.CheckoutAccordion-applePayIcon-c7ae1 { fill: var(--negative-colors-base-default); } 4042.CheckoutAccordion-googlePayIcon-9ccff { height: var(--spacings-s24); } 4043.CheckoutAccordion-tickIcon-41bfb { fill: var(--negative-colors-base-default); flex-shrink: 0; } 4044.CheckoutAccordion-avatax-1b5f1, .CheckoutAccordion-cardContainer-f1163 { width: 100%; margin-bottom: var(--spacings-s16); } 4045.CheckoutAccordion-hidden-c7de2 { display: none; } 4046.CheckoutFormRadioButton-root-5f53d { display: inline-flex; align-items: stretch; position: relative; color: var(--text-colors-tint-1); } 4047.CheckoutFormRadioButton-root-5f53d.CheckoutFormRadioButton-withTextIcon-b2055 svg path { fill: var(--text-colors-tint-1); } 4048.CheckoutFormRadioButton-root-5f53d:active:not(.CheckoutFormRadioButton-disabled-3c669) .CheckoutFormRadioButton-outline-2a0a7, .CheckoutFormRadioButton-root-5f53d.CheckoutFormRadioButton-selected-4d6de:not(.CheckoutFormRadioButton-disabled-3c669) .CheckoutFormRadioButton-outline-2a0a7, .CheckoutFormRadioButton-root-5f53d:focus:not(.CheckoutFormRadioButton-disabled-3c669) .CheckoutFormRadioButton-outline-2a0a7 { box-shadow: inset 0 0 0 2px var(--checkout-accent); color: var(--text-colors-base); } 4049.CheckoutFormRadioButton-root-5f53d:active .CheckoutFormRadioButton-ribbon-d6da2, .CheckoutFormRadioButton-root-5f53d.CheckoutFormRadioButton-selected-4d6de .CheckoutFormRadioButton-ribbon-d6da2, .CheckoutFormRadioButton-root-5f53d:focus .CheckoutFormRadioButton-ribbon-d6da2 { background-color: var(--checkout-accent); } 4050.CheckoutFormRadioButton-root-5f53d:active .CheckoutFormRadioButton-ribbonIcon-80763 > path:first-child, .CheckoutFormRadioButton-root-5f53d.CheckoutFormRadioButton-selected-4d6de .CheckoutFormRadioButton-ribbonIcon-80763 > path:first-child, .CheckoutFormRadioButton-root-5f53d:focus .CheckoutFormRadioButton-ribbonIcon-80763 > path:first-child { fill: var(--checkout-accent); } 4051.CheckoutFormRadioButton-root-5f53d.CheckoutFormRadioButton-withTextIcon-b2055:active:not(.CheckoutFormRadioButton-disabled-3c669) .CheckoutFormRadioButton-outline-2a0a7 svg path, .CheckoutFormRadioButton-root-5f53d.CheckoutFormRadioButton-withTextIcon-b2055.CheckoutFormRadioButton-selected-4d6de:not(.CheckoutFormRadioButton-disabled-3c669) .CheckoutFormRadioButton-outline-2a0a7 svg path, .CheckoutFormRadioButton-root-5f53d.CheckoutFormRadioButton-withTextIcon-b2055:focus:not(.CheckoutFormRadioButton-disabled-3c669) .CheckoutFormRadioButton-outline-2a0a7 svg path { fill: var(--text-colors-base); } 4052@media (hover: hover) { 4053 .CheckoutFormRadioButton-root-5f53d:not(.CheckoutFormRadioButton-disabled-3c669):not(.CheckoutFormRadioButton-selected-4d6de):not(:focus):not
4053(:active):hover .CheckoutFormRadioButton-outline-2a0a7 { box-shadow: inset 0 0 0 1px var(--checkout-accent-action); } 4054 .CheckoutFormRadioButton-root-5f53d:not(.CheckoutFormRadioButton-disabled-3c669):not(.CheckoutFormRadioButton-selected-4d6de):not(:focus):not(:active):hover .CheckoutFormRadioButton-ribbon-d6da2 { background-color: var(--checkout-accent-action); } 4055 .CheckoutFormRadioButton-root-5f53d:not(.CheckoutFormRadioButton-disabled-3c669):not(.CheckoutFormRadioButton-selected-4d6de):not(:focus):not(:active):hover .CheckoutFormRadioButton-ribbonIcon-80763 > svg > path { fill: var(--checkout-accent-action); } 4056} 4057.CheckoutFormRadioButton-root-5f53d.CheckoutFormRadioButton-disabled-3c669 { pointer-events: none; } 4058.CheckoutFormRadioButton-root-5f53d.CheckoutFormRadioButton-disabled-3c669 .CheckoutFormRadioButton-outline-2a0a7 { opacity: var(--states-disabled); } 4059.CheckoutFormRadioButton-root-5f53d.CheckoutFormRadioButton-disabled-3c669 input[type="radio"] { cursor: default; } 4060.CheckoutFormRadioButton-root-5f53d input[type="radio"] { display: block; position: absolute; z-index: 1; top: 0px; left: 0px; width: 100%; height: 100%; border-radius: var(--corner-radius-r8); margin: var(--spacings-s0); padding: var(--spacings-s0); cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: none; appearance: none; } 4061.CheckoutFormRadioButton-outline-2a0a7 { box-shadow: inset 0 0 0 1px var(--background-colors-tint-3); padding: var(--spacings-s12) var(--spacings-s16); border-radius: var(--corner-radius-r8); position: relative; overflow: hidden; width: 100%; } 4062.CheckoutFormRadioButton-outline-2a0a7.CheckoutFormRadioButton-hasFullWidthRibbon-117f4 { padding-top: var(--spacings-s32); } 4063.CheckoutFormRadioButton-ribbon-d6da2 { border-bottom-left-radius: var(--corner-radius-r8); width: auto; padding: var(--spacings-s4) var(--spacings-s8); background-color: var(--background-colors-tint-3); font-weight: 600; font-size: var(--typography-t3-font-size); color: var(--negative-colors-text-default); position: absolute; text-align: center; line-height: 1.33; right: -1px; top: -1px; } 4064.CheckoutFormRadioButton-ribbonFullWidth-ee5b0 { border-bottom-left-radius: var(--corner-radius-r0); width: calc(100% + 2px); } 4065.CheckoutFormRadioButton-ribbonIcon-80763 { display: none; position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; } 4066.CheckoutFormRadioButton-ribbonIcon-80763 > path:first-child { fill: var(--background-colors-tint-3); } 4067@media screen and (max-width: 1023px) { 4068 .CheckoutFormRadioButton-ribbonIcon-80763 { display: block; } 4069} 4070.PlanRadioButtonLabelNew-root-ef92a { display: flex; justify-content: space-between; } 4071.PlanRadioButtonLabelNew-frequency-28d1e { font-weight: 700; font-size: var(--typography-t6-font-size); line-height: 1.4; } 4072.PlanRadioButtonLabelNew-price-a04ab { display: flex; justify-content: flex-end; align-items: baseline; font-weight: 700; font-size: var(--typography-t7-font-size); line-height: 32px; } 4073.PlanRadioButtonLabelNew-price-a04ab small { font-weight: 600; font-size: var(--typography-t4-font-size); line-height: 20px; } 4074.PlanRadioButtonLabelNew-info-c7d72 { font-weight: 500; font-size: var(--typography-t5-font-size); line-height: 1.5; color: var(--text-colors-tint-1); } 4075.PlanRadioButtonLabelNew-infoContainer-78258 { justify-content: center; flex-direction: column; gap: var(--spacings-s4); display: flex; } 4076.PlanRadioButtonInline-radioButton-64400 { flex-grow: 1; } 4077.PlanRadioButtonInline-container-f28bf { display: flex; justify-content: space-between; } 4078.PlanRadioButtonInline-radioButtonFrequency-662c0 { text-transform: capitalize; } 4079.PlanRadioButtonInline-disconuntText-e3d64 { text-decoration: line-through; } 4080.PlanRadioButtonInline-monthlyPrice-6114f { display: flex; } 4081.PlanSelector-toggle-f3185 { width: 100%; } 4082.PlanSelector-toggle-f3185 + .PlanSelector-toggle-f3185 { margin-top: var(--spacings-s16); } 4083.PlanSelector-inlineToggle-55287 { width: 100%; } 4084.PlanSelector-oldPrice-d00ac { font-weight: 600; margin-right: var(--spacings-s4); font-size: var(--typography-t6-font-size); display: inline-block; color: var(--text-colors-tint-1); } 4085.PlanSelector-price-2765b { align-self: flex-end; } 4086.PlanSelector-planRadioButtonLabelWithRibbon-a1378 { min-height: var(--spacings-s40); } 4087.PlanSelector-checkoutLabel-b87d6 { font-weight: 600; font-size: var(--typography-t4-font-size); line-height: 1.4; margin-bottom: var(--spacings-s8); color: var(--text-colors-tint-1); } 4088.SeatSelectorV2-container-34850 { border: 1px solid var(--background-colors-border); border-radius: var(--corner-radius-r12); padding: var(--spacings-s4); color: var(--text-colors-tint-1); align-items: center; gap: var(--spacings-s4); display: flex; } 4089.SeatSelectorV2-button-c9c55.SeatSelectorV2-button-c9c55 { height: 24px; width: var(--spacings-s32); padding: 4px 0px 0px; display: flex; align-items: center; justify-content: center; } 4090.SeatSelectorV2-icon-7934e { fill: var(--text-colors-tint-1); } 4091.SeatSelectorV2-input-c056c.SeatSelectorV2-input-c056c { height: 26p
4091x; width: var(--spacings-s32); } 4092.SeatSelectorV2-input-c056c.SeatSelectorV2-input-c056c > input { text-align: center; } 4093.CreditsCallout-credits-4a8fc { display: flex; align-items: center; gap: var(--spacings-s12); padding: var(--spacings-s12) var(--spacings-s16); border-radius: var(--corner-radius-r12); border: 1px solid var(--background-colors-border); background-color: var(--background-colors-tint-2); } 4094.CreditsCallout-creditsIcon-0037d { fill: var(--credits-accent); flex-shrink: 0; } 4095.CreditsCallout-creditsCopy-7cdca { display: flex; flex-direction: column; gap: var(--spacings-s2); } 4096.SeatsBreakdown-root-7d20a { display: flex; flex-direction: column; gap: var(--spacings-s10); padding-bottom: var(--spacings-s12); border-bottom: 1px dashed var(--background-colors-border); } 4097.SeatsBreakdown-header-2f29d { display: flex; align-items: center; justify-content: space-between; gap: var(--spacings-s12); } 4098.SeatsBreakdown-headerLabel-73785 { display: flex; align-items: center; gap: var(--spacings-s8); color: var(--text-colors-base); } 4099.SeatsBreakdown-headerIcon-cc0ae { width: 20px; height: 20px; flex-shrink: 0; fill: currentcolor; } 4100.SeatsBreakdown-row-4d5e8 { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacings-s16); } 4101.SeatsBreakdown-rowLabel-be7c1 { display: flex; flex-direction: column; gap: var(--spacings-s2); min-width: 0px; } 4102.CheckoutFooterNote-root-1d796 { font-weight: 600; margin-bottom: var(--spacings-s8); font-size: var(--typography-t4-font-size); text-align: center; color: var(--text-colors-base); } 4103.ErrorMessage-root-2744f { color: var(--error-colors-base-default); font-weight: 600; line-height: var(--typography-t3-line-height); font-size: var(--typography-t3-font-size); } 4104.TermsFooterV2-termsFooterContainer-7e5f9.TermsFooterV2-termsFooterContainer-7e5f9 { display: flex; width: 100%; justify-content: center; align-items: center; color: var(--text-colors-tint-2); gap: var(--spacings-s8); } 4105.TermsFooterV2-termsButton-fae4f { padding: 0px; color: var(--text-colors-tint-2); } 4106.PaymentMethodSelector-toggle-9dc34 { flex-basis: 50%; } 4107.PaymentMethodSelector-toggle-9dc34:only-child { flex-basis: 100%; text-align: center; } 4108.PaymentMethodSelector-togglePaymentMethod-1eaa0 { justify-content: flex-start; font-weight: 600; font-size: var(--typography-t4-font-size); line-height: 1.4; display: flex; align-items: center; } 4109.PaymentMethodSelector-applePayIcon-2d2a4 { fill: var(--negative-colors-base-default); } 4110.PaymentMethodSelector-segment-fef08 { padding: var(--spacings-s0) var(--spacings-s4); } 4111.PaymentMethodSelector-segment-fef08 > :first-child { height: 24px; } 4112.PaymentMethodSelector-segmentContent-c2b3b { display: flex; align-items: center; justify-content: center; line-height: 1; } 4113.PaymentMethodSelector-textIcon-8259e path { fill: currentcolor; } 4114.PaymentMethodSelector-toggleIcon-1a2cd { margin-right: var(--toggle-icon-gap); display: inline-block; vertical-align: top; height: 24px; width: 24px; flex-shrink: 0; } 4115.PaymentMethodSelector-toggleImg-7b535 { height: 24px; width: auto; } 4116.PaymentMethodSelector-toggles-b194e { border: 1px solid var(--control-colors-button-background-active); width: 100%; } 4117.FrequencySwitch-container-ee988 { flex-direction: column; align-items: center; text-align: center; gap: var(--spacings-s4); display: flex; } 4118.FrequencySwitch-toggle-3d3bb { border: 1px solid var(--background-colors-border); border-radius: var(--corner-radius-r12); padding: var(--spacings-s8); display: inline-flex; align-items: center; gap: var(--spacings-s12); } 4119@media screen and (max-width: 1365px) { 4120 .FrequencySwitch-toggle-3d3bb { padding: var(--spacings-s4) var(--spacings-s8); } 4121} 4122.FrequencySwitch-label-fe8be { font-weight: 600; font-size: var(--typography-t4-font-size); color: var(--text-colors-tint-2); background: none; cursor: pointer; padding: 0px; border: 0px; } 4123.FrequencySwitch-tag-03c12 { white-space: nowrap; } 4124.FrequencySwitch-labelActive-feb26 { color: var(--text-colors-base); } 4125.FrequencyToggle-container-bddfe { flex-direction: column; text-align: center; gap: var(--spacings-s4); display: flex; } 4126.FrequencyToggle-segments-0f75f { grid-template-columns: repeat(2, auto); border: 1px solid var(--background-colors-border); font-weight: 600; font-size: var(--typography-t5-font-size); } 4127@media screen and (max-width: 1365px), screen and (max-height: 767px) { 4128 .FrequencyToggle-segments-0f75f { padding: var(--spacings-s2); } 4129} 4130.FrequencyToggle-segment-60695 { border: 1px solid transparent; background: none; min-width: 138px; } 4131@media screen and (max-width: 1365px), screen and (max-height: 767px) { 4132 .FrequencyToggle-segment-60695 { padding-block: var(--spacings-s6); padding-inline: var(--spacings-s6); height: 32px; } 4133} 4134.FrequencyToggle-segmentContent-ad534 { padding-inline: var(--spacings-s10); display: inline-flex; align-items: center; gap: var(--spacings-s4); } 4135.FrequencyToggle-segmentYearly-bd95e { position: relative; } 4136.FrequencyToggle-tag-73159 { top: calc(-1 * var(--spacings-s16)); position: absolute; right: var(--spacings-s4); } 4137.FrequencyToggle-active-6be5d { background-color: var(--control-colors-button-background-active); border: 1px solid var(--control-colors-button-background-active); } 4138.MarqueeSlider-container-0ebf6 { display: flex; overflow: hidden; width: 100%; mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(0, 0, 0) 10%, rgb(0, 0, 0) 90%, rgba(0, 0, 0, 0)); } 4139@media (hover: hover) { 4140 .MarqueeSlider-container-0ebf6:hover .MarqueeSlider-track-1916d { animation-play-state: paused; } 4141} 4142.MarqueeSlider-track-1916d { padding-right: var(--spacings-s32); will-change: transform; gap: var(--spacings-s32); display: flex; flex-shrink: 0; } 4143.MarqueeSlider-trackLeft-c4cc0 { animation: 40s linear 0s infinite normal none running MarqueeSlider-scrollLeft-497e0; } 4144.MarqueeSlider-trackRight-b2c74 { animation: 40s linear 0s infinite normal none running MarqueeSlider-scrollRight-6374c; } 4145.MarqueeSlider-item-453ac { display: inline-flex; white-space: nowrap; align-items: center; flex-shrink: 0; } 4146.MarqueeSlider-item-453ac::after { background-color: var(--background-colors-tint-3); margin-left: var(--spacings-s32); display: inline-block; height: var(--spacings-s8); width: var(--spacings-s8); border-radius: 50%; flex-shrink: 0; content: ""; } 4147.MarqueeSlider-chipIcon-d84a1 { fill: var(--text-colors-base); } 4148.MarqueeSlider-chipIcon-d84a1 > path { fill: var(--text-colors-base); } 4149@keyframes MarqueeSlider-scrollLeft-497e0 { 4150 0% { transform: translate(0px); } 4151 100% { transform: translate(-100%); } 4152} 4153@keyframes MarqueeSlider-scrollRight-6374c { 4154 0% { transform: translate(-100%); } 4155 100% { transform: translate(0px); } 4156} 4157.AiModelsSlider-container-e7a43 { padding-bottom: var(--spacings-s72); width: 100%; } 4158.AiModelsSlider-item-867c8 { display: inline-flex; white-space: nowrap; align-items: center; gap: var(--spacings-s8); flex-shrink: 0; } 4159.AiModelsSlider-title-71d42 { margin-bottom: var(--spacings-s64); font-size: var(--typography-t10-font-size); line-height: var(--typography-t10-line-height); } 4160@media screen and (max-width: 767px) { 4161 .AiModelsSlider-title-71d42 { font-size: var(--typography-t9-font-size); line-height: var(--typography-t9-line-height); } 4162} 4163.AiModelsSlider-sliderContainer-1baf8 { flex-direction: column; gap: var(--spacings-s24); display: flex; } 4164.AiModelsSlider-chipIcon-d0e16 { fill: var(--text-colors-base); height: 28px; width: 28px; } 4165.AiModelsSlider-chipIcon-d0e16 > path { fill: var(--text-colors-base); } 4166.Tooltip-root-a29ba { --arrow-width: 24px; --arrow-height: 24px; --arrow-gap: -13px; box-shadow: var(--shadows-tint-1); background-color: var(--negative-colors-base-default); color: var(--negative-colors-text-default); border-radius: var(--corner-radius-r4); padding: var(--spacings-s2) var(--spacings-s6); } 4167.Tooltip-content-a2201 { padding: var(--spacings-s4); } 4168.Tooltip-indicatorWrapper-4da39 { width: var(--arrow-width); height: var(--arrow-height); } 4169.Tooltip-indicatorWrapper-4da39[data-arrow-wrapper-dir^="top"] { bottom: var(--arrow-gap); } 4170.Tooltip-indicatorWrapper-4da39[data-arrow-wrapper-dir^="right"] { left: var(--arrow-gap); } 4171.Tooltip-indicatorWrapper-4da39[data-arrow-wrapper-dir^="bottom"] { top: var(--arrow-gap); } 4172.Tooltip-indicatorWrapper-4da39[data-arrow-wrapper-dir^="left"] { right: var(--arrow-gap); } 4173.Tooltip-indicator-99840 { border-width: 0px 5px; width: var(--arrow-width); height: var(--arrow-height); pointer-events: none; } 4174.Tooltip-indicator-99840 path { fill: var(--negative-colors-base-default); } 4175.Tooltip-tooltipContainer-f9152 { display: flex; align-items: center; }
4176.TooltipWrapper-wrapper-be582 { vertical-align: bottom; } 4177.Select-root-e6afd { position: relative; width: 100%; } 4178.Select-trigger-3882a { display: flex; align-items: center; width: 100%; height: 48px; padding: var(--spacings-s12) var(--spacings-s12); gap: var(--spacings-s8); background-color: var(--control-colors-button-background-default); color: var(--control-colors-value-default); border: 1px solid var(--control-colors-border-default); border-radius: var(--corner-radius-r8); font-size: var(--typography-t5-font-size); line-height: var(--typography-t5-line-height); font-weight: 500; cursor: pointer; text-align: left; transition: background-color 0.15s, border-color 0.15s; } 4179.Select-trigger-3882a:hover { background-color: var(--control-colors-button-background-action); } 4180.Select-trigger-3882a:focus-visible { outline: none; border-color: var(--control-colors-border-active); } 4181.Select-triggerOpen-e0bb3 { background-color: var(--control-colors-button-background-active); } 4182.Select-startIcon-36dc1 { flex-shrink: 0; width: 24px; height: 24px; fill: var(--control-colors-start-icon-default); } 4183.Select-startIcon-36dc1 path { fill: var(--control-colors-start-icon-default); } 4184.Select-label-71336 { flex: 1 1 0%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 4185.Select-endIcon-9d3ff { flex-shrink: 0; width: 24px; height: 24px; fill: var(--control-colors-end-icon-default); transition: transform 0.15s; } 4186.Select-endIcon-9d3ff path { fill: var(--control-colors-end-icon-default); } 4187.Select-endIconOpen-89261 { transform: rotate(180deg); } 4188.Select-menu-3a9a3 { position: fixed; display: flex; flex-direction: column; gap: var(--spacings-s4); padding: var(--spacings-s8); background-color: var(--background-colors-popover); border: 1px solid var(--control-colors-border-default); border-radius: var(--corner-radius-r8); box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 16px; max-height: 320px; overflow-y: auto; } 4189.Select-item-b8a6b { display: flex; align-items: center; width: 100%; min-height: 48px; padding: var(--spacings-s12) var(--spacings-s12); gap: var(--spacings-s8); background-color: transparent; color: var(--text-colors-base); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: var(--corner-radius-r8); font-size: var(--typography-t5-font-size); line-height: var(--typography-t5-line-height); font-weight: 500; text-align: left; cursor: pointer; transition: background-color 0.15s; } 4190.Select-item-b8a6b:hover { background-color: var(--control-colors-button-background-action); } 4191.Select-item-b8a6b:focus-visible { outline: none; background-color: var(--control-colors-button-background-action); } 4192.Select-itemActive-0a89c, .Select-itemActive-0a89c:hover { background-color: var(--control-colors-button-background-active); } 4193.Select-itemDisabled-671d6 { cursor: not-allowed; opacity: 0.4; } 4194.Select-itemDisabled-671d6:hover { background-color: transparent; } 4195.Select-itemDisabled-671d6:focus-visible { background-color: transparent; } 4196.Select-itemLabel-55864 { flex: 1 1 0%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 4197.Select-tickIcon-02136 { flex-shrink: 0; width: 24px; height: 24px; fill: var(--text-colors-base); } 4198.Select-tickIcon-02136 path { fill: var(--text-colors-base); } 4199.SubscriptionBenefits-benefitSection-9ee2a { margin-bottom: var(--spacings-s24); color: var(--text-colors-base); width: 100%; } 4200.SubscriptionBenefits-benefitSection-9ee2a:not(:first-of-type) { margin-top: var(--spacings-s24); } 4201.SubscriptionBenefits-benefitSection-9ee2a:last-of-type ~ .SubscriptionBenefits-divider-f291a { display: none; } 4202.SubscriptionBenefits-divider-f291a { --subscription-benefits-divider: 1; } 4203.SubscriptionBenefits-benefitSectionTitle-5eafe { font-weight: 700; margin-bottom: var(--spacings-s12); font-size: var(--typography-t5-font-size); align-items: center; gap: var(--spacings-s8); line-height: 1.5; display: flex; } 4204.SubscriptionBenefits-benefitSectionTitle-5eafe svg { fill: var(--text-colors-base); } 4205.SubscriptionBenefits-benefitsList-e4272 { padding-left: var(--spacings-s0); list-style: none; } 4206.SubscriptionBenefits-benefitsList-e4272 > li:not(:last-child) { margin-bottom: var(--spacings-s8); } 4207.SubscriptionBenefits-benefitsList-e4272 a { color: var(--primary-colors-base-default); cursor: pointer; } 4208.SubscriptionBenefits-benefitsItem-286ba { gap: var(--spacings-s8); display: flex; } 4209.SubscriptionBenefits-benefitsText-eed99 { margin-right: var(--spacings-s8); } 4210.SubscriptionBenefits-benefitsText-eed99 a { font-weight: 700; text-decoration: underline; cursor: pointer; color: unset; } 4211.SubscriptionBenefits-tickIcon-e6e32 { flex-shrink: 0; } 4212.SubscriptionBenefits-tickIconNeutral-ced73 { fill: var(--text-colors-base); } 4213.SubscriptionBenefits-tier-max_performance-39d6f { fill: var(--monetization-pro-colors-base-default); } 4214.SubscriptionBenefits-tier-max_starter-b67b8 { fill: var(--monetization-plus-colors-base-default); } 4215.SubscriptionBenefits-tier-power-9e29c { fill: var(--monetization-ultra-colors-base-default); } 4216.SubscriptionBenefits-tier-pro-0cf9e { fill: var(--monetization-pro-colors-base-default); } 4217.SubscriptionBenefits-tier-plus-83c20 { fill: var(--monetization-plus-colors-base-default); } 4218.SubscriptionBenefits-tier-free-28827, .SubscriptionBenefits-tier-enterprise-b9bcb { fill: var(--text-colors-base); } 4219.SubscriptionBenefits-infoIcon-6eaa3 { fill: var(--text-colors-tint-1); height: var(--spacings-s16); width: var(--spacings-s16); vertical-align: middle; display: inline-block; } 4220.SubscriptionBenefits-benefitsItemContent-8ad5b > div { display: inline-block; } 4221.SubscriptionBenefits-tooltip-a0b6a { font-weight: 500; text-align: center; max-width: 188px; } 4222@keyframes PricingCard-fadeIn-cf634 { 4223 0% { opacity: 0; translate: 0px 24px; } 4224 100% { opacity: 1; translate: 0px; } 4225} 4226.PricingCard-card-a370c { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); border: 1px solid var(--background-colors-tint-3); border-radius: var(--corner-radius-r16); position: relative; color: var(--text-colors-base); display: flex; overflow: hidden; flex-direction: column; flex-shrink: 0; } 4227@media (hover: hover) { 4228 .PricingCard-card-a370c:hover:not(.PricingCard-standalone-baf6c):not(.PricingCard-static-3e007) { box-shadow: var(--card-hover-shadow, none); transform: translateY(-6px) scale(1.008) !important; } 4229} 4230.PricingCard-highlighted-afb84 { padding: var(--spacings-s2); background: var(--card-highlight-background); border-color: var(--card-highlight-border-color); } 4231.PricingCard-highlighted-afb84 .PricingCard-cardContent-c6827 { border-radius: var(--corner-radius-r12); } 4232.PricingCard-highlighted-afb84.PricingCard-standalone-baf6c { padding: 1px; } 4233.PricingCard-tier-max_performance-828c8 { --card-highlight-background: var(--monetization-pro-colors-base-default); --card-highlight-border-color: var(--monetization-pro-colors-base-default); } 4234.PricingCard-tier-max_starter-934fa { --card-highlight-background: var(--monetization-plus-colors-base-default); --card-highlight-border-color: var(--monetization-plus-colors-base-default); } 4235.PricingCard-tier-power-4bf93 { --card-highlight-background: var(--monetization-ultra-colors-base-default); --card-highlight-border-color: var(--monetization-ultra-colors-base-default); } 4236.PricingCard-tier-pro-c52c6 { --card-highlight-background: var(--monetization-pro-colors-base-default); --card-highlight-border-color: var(--monetization-pro-colors-base-default); } 4237.PricingCard-tier-plus-a635d { --card-highlight-background: var(--monetization-plus-colors-base-default); --card-highlight-border-color: var(--monetization-plus-colors-base-default); } 4238.PricingCard-tier-free-0c51f, .PricingCard-tier-enterprise-e1c24 { --card-highlight-background: var(--text-colors-base); --card-highlight-border-color: var(--text-colors-base); } 4239.PricingCard-tier-pro-c52c6 { --card-hover-shadow: 0 4px 8px rgba(90, 0, 238, .43); } 4240.PricingCard-tier-plus-a635d { --card-hover-shadow: 0 4px 8px rgba(194, 9, 193, .43); } 4241.PricingCard-tier-power-4bf93 { --card-hover-shadow: 0 4px 8px rgba(21, 131, 128, .43); } 4242.PricingCard-tier-enterprise-e1c24 { --card-hover-shadow: 0 4px 8px rgba(179, 179, 179, .43); } 4243.PricingCard-tier-power-4bf93 { --card-highlight-background: linear-gradient(90deg, #24c7c2 0%, #009994 100%); --card-highlight-border-color: transparent; } 4244.PricingCard-tier-free-0c51f { background-color: var(--background-colors-tint-1); } 4245.PricingCard-neutralHoverShadow-0eafd { --card-hover-shadow: 0 4px 8px rgba(179, 179, 179, .43); } 4246.PricingCard-animated-6bf5e { animation: 0.4s ease 0s 1 normal backwards running PricingCard-fadeIn-cf634; } 4247.PricingCard-cardContent-c6827 { background-color: var(--background-colors-base); padding: var(--spacings-s24); flex-direction: column; display: flex; flex-grow: 1; } 4248@media screen and (max-width: 767px) { 4249 .PricingCard-cardContent-c6827 { padding: var(--spacings-s16); } 4250} 4251.PricingCard-disabled-596ad { opacity: 0.32; pointer-events: none; } 4252.SavingText-savingText-c1d0c { color: var(--primary-colors-base-default); font-weight: 600; background-color: transparent; line-height: var(--typography-t5-line-height); justify-content: center; font-size: var(--typography-t5-font-size); display: inline-flex; padding: var(--spacings-s12); align-items: center; gap: var(--spacings-s4); height: 48px; overflow: hidden; transition: height 0.8s, padding 0.8s, margin 0.8s, opacity 0.8s; } 4253.SavingText-skinPro-f8be0 { color: var(--monetization-pro-colors-base-default); } 4254.SavingText-skinUltra-9fd43 { color: var(--monetization-ultra-colors-base-default); } 4255.SavingText-skinNegative-59018 { color: var(--negative-colors-base-default); } 4256.SavingText-savingTextHidden-fbe19 { height: 0px; opacity: 0; padding-top: 0px; padding-bottom: 0px; pointer-events: none; margin-top: 0px !important; margin-bottom: 0px !important; } 4257.SavingText-savingTextIcon-e3409 { fill: currentcolor; flex-shrink: 0; height: 24px; width: 24px; } 4258.SavingText-savingTextContent-c4f2b { padding: var(--spacings-s0) var(--spacings-s4); text-align: center; } 4259@keyframes ActionButton-fadeSwap-204fa { 4260 0% { opacity: 0; translate: 0px 8px; } 4261 100% { opacity: 1; translate: 0px; } 4262} 4263.ActionButton-swapAnimated-b26fe { animation: 0.8s ease 0s 1 normal backwards running ActionButton-fadeSwap-204fa; } 4264.ActionButton-label-641fe { display: inline-block; } 4265@keyframes ActionButton-ctaShimmerSweep-766bd { 4266 0%, 35% { transform: translate(-100%); } 4267 75%, 100% { transform: translate(220%); } 4268} 4269.ActionButton-shimmer-6cf93 { position: relative; overflow: hidden; } 4270.ActionButton-shimmer-6cf93::after { content: ""; position: absolute; top: 0px; left: 0px; width: 70%; height: 100%; pointer-events: none; background: linear-gradient(105deg, transparent 0%, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%, transparent 100%); animation: 3s ease-in-out 0s infinite normal none running ActionButton-ctaShimmerSweep-766bd; will-change: transform; } 4271@media screen and (min-width: 1024px) { 4272 .ExpandButton-expandButton-d6a9c { display: none; } 4273} 4274.PackageSelector-container-62ff0 { margin-top: var(--spacings-s8); margin-bottom: var(--spacings-s8); width: 100%; } 4275.PackageSelector-select-9fb15 { width: 100%; } 4276.PackageSelector-optionLabel-6e272 { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--spacings-s8); width: 100%; } 4277.PackageSelector-badge-98f9f { background-color: var(--background-colors-tint-2); border: 1px solid var(--text-colors-base); font-weight: 600; padding: 0 var(--spacings-s8); border-radius: 999px; display: inline-flex; margin-left: auto; align-items: center; color: var(--text-colors-base); font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); }
4278.ProrateNote-tooltipWrapper-fa149 { vertical-align: bottom; display: inline-flex; align-items: center; height: var(--spacings-s24); } 4279.ProrateNote-tooltipIcon-fdfbd { height: var(--spacings-s16); width: var(--spacings-s16); } 4280.ProrateNote-tooltip-c1b0e { color: var(--negative-colors-text-default); font-weight: 500; font-size: var(--typography-t4-font-size); word-break: normal; text-align: center; max-width: 278px; } 4281@keyframes Description-fadeSwap-19535 { 4282 0% { opacity: 0; translate: 0px 8px; } 4283 100% { opacity: 1; translate: 0px; } 4284} 4285.Description-swapAnimated-e7301 { animation: 0.8s ease 0s 1 normal backwards running Description-fadeSwap-19535; } 4286.Credits-credits-8a09a { color: var(--text-colors-tint-1); font-weight: 600; font-size: var(--typography-t5-font-size); line-height: var(--typography-t5-line-height); align-items: center; gap: var(--spacings-s8); display: flex; } 4287.Credits-creditsIcon-38c35 { fill: var(--text-colors-tint-1); } 4288.Credits-tooltip-2b27d { color: var(--negative-colors-text-default); font-weight: 500; font-size: var(--typography-t4-font-size); word-break: normal; text-align: center; max-width: 340px; } 4289.Credits-tooltipIcon-780d6 { fill: var(--text-colors-tint-1); margin-left: var(--spacings-s4); cursor: pointer; } 4290.Credits-tooltipWrapper-31a2d { vertical-align: bottom; display: inline-block; height: var(--spacings-s24); } 4291.AddCreditsLine-addCreditsLine-6dce3 { color: var(--text-colors-tint-1); font-weight: 600; font-size: var(--typography-t5-font-size); line-height: var(--typography-t5-line-height); margin-top: var(--spacings-s12); align-items: center; gap: var(--spacings-s8); display: flex; } 4292.AddCreditsLine-addCreditsIcon-25c13 { fill: var(--text-colors-tint-1); } 4293.AddCreditsLine-tooltip-022af { color: var(--negative-colors-text-default); font-weight: 500; font-size: var(--typography-t4-font-size); word-break: normal; text-align: center; max-width: 340px; } 4294.AddCreditsLine-tooltipIcon-b3e57 { fill: var(--text-colors-tint-1); margin-left: var(--spacings-s4); cursor: pointer; } 4295.AddCreditsLine-tooltipWrapper-edb69 { vertical-align: bottom; display: inline-block; height: var(--spacings-s24); } 4296.ModelGenerations-wrapper-bf595 { flex-direction: column; gap: var(--spacings-s8); display: flex; } 4297.ModelGenerations-row-f81f4 { font-weight: 500; font-size: var(--typography-t4-font-size); color: var(--text-colors-tint-1); gap: var(--spacings-s8); display: flex; line-height: 1.5; } 4298.ModelGenerations-row-f81f4 > span:first-child { white-space: nowrap; } 4299.ModelGenerations-countSkeleton-33273 { align-self: center; } 4300.CreditsVolume-root-4c1e6 { justify-content: space-between; align-items: center; display: flex; height: 24px; width: 100%; } 4301.CreditsVolume-tick-8a3fa { transition: height 0.18s, background-color 0.18s, box-shadow 0.18s; background-color: var(--background-colors-tint-3); border-radius: 100px; flex-shrink: 0; width: 6px; } 4302@media screen and (max-width: 766px) { 4303 .CreditsVolume-tick-8a3fa { width: 4px; } 4304} 4305.CreditsVolume-tickFilled-c1a7a { color: var(--text-colors-base); background-color: currentcolor; } 4306.CreditsVolume-tickFilledPower-3b0ac { color: var(--monetization-ultra-colors-base-default); } 4307.CreditsVolume-tickPeak-7e0bb { box-shadow: currentcolor 0px 0px 4px 0px; } 4308.CreditsLine-creditsLine-ffaac { color: var(--text-colors-tint-1); font-weight: 600; font-size: var(--typography-t5-font-size); line-height: var(--typography-t5-line-height); margin-top: var(--spacings-s12); align-items: center; gap: var(--spacings-s12); display: flex; } 4309.CreditsLine-creditsIcon-701c6 { fill: var(--text-colors-base); flex-shrink: 0; } 4310.CreditsLine-creditsIconLarge-bf06f { width: 32px; height: 32px; } 4311.CreditsLine-creditsValue-4c87b { color: var(--text-colors-base); } 4312.CreditsLine-creditsValueLarge-17fee { font-size: var(--typography-t8-font-size); line-height: var(--typography-t8-line-height); } 4313.CreditsLine-creditsSuffix-c95b9 { color: var(--text-colors-tint-1); margin-left: 0.25em; } 4314.CreditsLine-odometer-df319 { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; line-height: var(--typography-t5-line-height); } 4315.CreditsLine-odometerSlot-f0e82 { display: inline-block; height: 1.3em; overflow: hidden; vertical-align: bottom; line-height: 1.3em; } 4316.CreditsLine-odometerReel-7d989 { display: flex; flex-direction: column; transition: transform 0.7s cubic-bezier(0.34, 1.2, 0.4, 1); will-change: transform; } 4317.CreditsLine-odometerDigit-aa494 { height: 1.3em; line-height: 1.3em; display: block; } 4318.CreditsLine-odometerComma-225ce { display: inline-block; line-height: 1.3em; } 4319@keyframes CreditsBox-fadeSwap-44aa5 { 4320 0% { opacity: 0; translate: 0px 8px; } 4321 100% { opacity: 1; translate: 0px; } 4322} 4323.CreditsBox-swapAnimated-b463b { animation: 0.8s ease 0s 1 normal backwards running CreditsBox-fadeSwap-44aa5; } 4324.CreditsBox-box-0d7e4 { border: 1px solid var(--control-colors-border-default); border-radius: var(--corner-radius-r12); padding: var(--spacings-s16); flex-direction: column; gap: var(--spacings-s12); display: flex; } 4325.CreditsBox-header-8529c { align-items: center; display: flex; } 4326.CreditsBox-header-8529c > div:first-child { margin-top: var(--spacings-s0); } 4327.CreditsBox-benefitsSwap-b1f5e:empty { display: none; } 4328.CreditsBox-selectorSlot-a061e { flex-direction: column; min-height: 0px; display: flex; } 4329@media screen and (min-width: 1024px) { 4330 .CreditsBox-selectorSlot-a061e { min-height: 56px; } 4331} 4332.CreditsBox-enterpriseBenefits-5c131 { min-height: 110px; flex-direction: column; padding-left: var(--spacings-s0); margin: var(--spacings-s0); gap: var(--spacings-s8); list-style: none; display: flex; } 4333.CreditsBox-enterpriseBenefitsInline-3e76b { min-height: 0px; } 4334.CreditsBox-enterpriseBenefit-78b25 { font-weight: 500; font-size: var(--typography-t4-font-size); color: var(--text-colors-tint-1); align-items: center; gap: var(--spacings-s8); display: flex; line-height: 1.5; } 4335.CreditsBox-tickIcon-1d52f { fill: var(--text-colors-tint-1); height: 21px; width: auto; flex-shrink: 0; } 4336.CreditsBox-tooltipIcon-aeacb { fill: var(--text-colors-tint-1); margin-left: var(--spacings-s4); cursor: pointer; height: var(--spacings-s16); width: var(--spacings-s16); }
4337.CreditsBox-tooltipWrapper-8ca2b { vertical-align: bottom; display: inline-flex; align-items: center; height: var(--spacings-s24); } 4338.CreditsBox-tooltip-31ff7 { color: var(--negative-colors-text-default); font-weight: 500; font-size: var(--typography-t4-font-size); word-break: normal; text-align: center; max-width: 340px; } 4339@keyframes CreditSlider-thumbHaloAnim-00369 { 4340 0% { opacity: 0; transform: scale(0.8); } 4341 18% { opacity: 0.95; transform: scale(1.5); } 4342 100% { opacity: 0; transform: scale(2.8); } 4343} 4344@keyframes CreditSlider-thumbRippleAnim-6740e { 4345 0% { opacity: 0.9; transform: scale(1); } 4346 100% { opacity: 0; transform: scale(3); } 4347} 4348.CreditSlider-container-acde4 { width: 100%; } 4349.CreditSlider-readOnly-1021e { pointer-events: none; } 4350.CreditSlider-sliderWrap-96a95 { position: relative; width: 100%; } 4351.CreditSlider-slider-c8072.CreditSlider-slider-c8072 { width: 100%; --slider-thumb-bg: var(--control-colors-text-active); } 4352.CreditSlider-slider-c8072.CreditSlider-slider-c8072 .slider__mark { background: var(--control-colors-text-active); } 4353.CreditSlider-fillGlow-d4524 { position: absolute; top: 50%; left: 0px; height: 4px; pointer-events: none; border-radius: 2px; transform: translateY(-50%); transition: width 0.5s cubic-bezier(0.3, 0, 0.2, 1), background 0.5s cubic-bezier(0.3, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.3, 0, 0.2, 1); z-index: 3; } 4354.CreditSlider-thumbOverlay-4de0e { position: absolute; top: 50%; width: 16px; height: 16px; pointer-events: none; transform: translate(-50%, -50%); transition: left 0.5s cubic-bezier(0.3, 0, 0.2, 1); z-index: 2; } 4355.CreditSlider-thumbHalo-f8416 { position: absolute; inset: 0px; border-radius: 50%; background: radial-gradient(circle,color-mix(in srgb,var(--control-colors-text-active) 55%,transparent) 0%,transparent 70%); pointer-events: none; animation: 0.6s cubic-bezier(0.25, 0.6, 0.3, 1) 0s 1 normal forwards running CreditSlider-thumbHaloAnim-00369; transform-origin: center center; } 4356.CreditSlider-thumbRipple-c34db { position: absolute; inset: 0px; border-radius: 50%; border: 1.5px solid color-mix(in srgb,var(--control-colors-text-active) 70%,transparent); pointer-events: none; animation: 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) 0s 1 normal forwards running CreditSlider-thumbRippleAnim-6740e; transform-origin: center center; } 4357.CreditSlider-labelsRow-ab631 { position: relative; width: 100%; height: var(--typography-t5-line-height); } 4358.CreditSlider-label-88529 { position: absolute; top: 0px; appearance: none; background: none; border: 0px; padding: 0px; margin: 0px; cursor: pointer; color: var(--text-colors-tint-1); font-weight: 600; font-size: var(--typography-t3-font-size); line-height: var(--typography-t3-line-height); transition: color 0.3s; white-space: nowrap; font-variant-numeric: tabular-nums; } 4359.CreditSlider-labelActive-53382 { color: var(--text-colors-base); } 4360.CreditSlider-labelFirst-326db { text-align: left; } 4361.CreditSlider-labelLast-5f281 { text-align: right; } 4362.CreditSlider-labelCurrent-f93e5 { cursor: not-allowed; opacity: 0.5; } 4363.CreditSlider-currentNote-53668 { display: block; color: inherit; font-weight: 500; font-size: var(--typography-t3-font-size); line-height: var(--typography-t3-line-height); } 4364.FixedCreditsLine-fixedCreditsLine-2b7e1 { font-weight: 500; font-size: var(--typography-t4-font-size); color: var(--text-colors-tint-1); justify-content: flex-start; align-items: center; gap: var(--spacings-s8); display: flex; line-height: 1.5; } 4365.FixedCreditsLine-tickIcon-1ee65 { fill: var(--text-colors-tint-1); flex-shrink: 0; } 4366.AiModels-modelsTitle-6e149 { margin-bottom: var(--spacings-s24); } 4367.AiModels-modelsWrapper-2cd9f { flex-flow: column; gap: var(--spacings-s4); display: flex; } 4368@media screen and (min-width: 375px) { 4369 .AiModels-modelsWrapper-2cd9f { flex-flow: wrap; gap: var(--spacings-s8); } 4370} 4371.AiModels-modelChip-d8a2b { font-weight: 500; border-radius: var(--corner-radius-r4); background-color: unset; font-size: var(--typography-t5-font-size); color: var(--text-colors-base); padding: var(--spacings-s4); align-items: center; gap: var(--spacings-s8); display: flex; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; } 4372@media screen and (min-width: 375px) { 4373 .AiModels-modelChip-d8a2b { border: 1px solid var(--background-colors-border); background-color: var(--background-colors-tint-1); } 4374} 4375.AiModels-chipIcon-51b0d { fill: var(--chip-icon-color, var(--text-colors-base)); } 4376.AiModels-chipIcon-51b0d > path { fill: var(--chip-icon-color, var(--text-colors-base)); } 4377.AiModels-tier-max_performance-665ef { --chip-icon-color: var(--monetization-pro-colors-base-default); } 4378.AiModels-tier-max_starter-25f5b { --chip-icon-color: var(--monetization-plus-colors-base-default); } 4379.AiModels-tier-power-62be7 { --chip-icon-color: var(--monetization-ultra-colors-base-default); } 4380.AiModels-tier-pro-e9032 { --chip-icon-color: var(--monetization-pro-colors-base-default); } 4381.AiModels-tier-plus-b04cc { --chip-icon-color: var(--monetization-plus-colors-base-default); } 4382.AiModels-tier-free-1b26e, .AiModels-tier-enterprise-3fff9 { --chip-icon-color: var(--text-colors-base); } 4383.AiModels-accordionToggle-7623c { color: var(--control-colors-text-default); justify-content: space-between; padding: var(--spacings-s0); } 4384.AiModels-divider-54e38 { width: 100%; margin: var(--spacings-s16) var(--spacings-s0); background-color: var(--control-colors-border-default); height: 1px; } 4385.AiModels-accordionContent-0158b { grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-in-out; display: grid; } 4386.AiModels-accordionContent-0158b.AiModels-expanded-303a1 { grid-template-rows: 1fr; } 4387.AiModels-accordionInner-37636 { overflow: hidden; min-height: 0px; }
4388.ModelAccessSection-root-78fff { background-color: var(--background-colors-tint-1); border: 1px solid var(--background-colors-border); border-radius: var(--corner-radius-r16); flex-direction: column; padding: var(--spacings-s16); gap: var(--spacings-s16); display: flex; } 4389.ModelAccessSection-rootPower-fc5e1 { background-color: var(--monetization-ultra-colors-alpha-10); } 4390.ModelAccessSection-header-fb8ef { justify-content: space-between; align-items: center; display: flex; gap: var(--spacings-s8); } 4391.ModelAccessSection-headerTitle-3728b { align-items: center; display: flex; gap: var(--spacings-s6); min-width: 0px; } 4392.ModelAccessSection-infoIcon-84db9 { fill: var(--text-colors-tint-1); flex-shrink: 0; height: var(--spacings-s16); width: var(--spacings-s16); } 4393.ModelAccessSection-tooltip-3ef99 { font-weight: 500; text-align: center; max-width: 188px; } 4394.ModelAccessSection-models-ff376 { flex-direction: column; gap: var(--spacings-s12); list-style: none; display: flex; padding: 0px; margin: 0px; } 4395.ModelAccessSection-modelRow-7f971 { justify-content: space-between; align-items: center; gap: var(--spacings-s8); display: flex; } 4396.ModelAccessSection-modelChips-eeaac { align-items: center; gap: var(--spacings-s12); flex-wrap: wrap; list-style: none; display: flex; padding: 0px; margin: 0px; } 4397.ModelAccessSection-modelChip-2b8f8 { align-items: center; gap: var(--spacings-s8); display: flex; } 4398.ModelAccessSection-chipTag-87d6f { background-color: var(--background-colors-tint-3); color: var(--text-colors-base); white-space: nowrap; } 4399.ModelAccessSection-chipTag-87d6f svg { fill: var(--text-colors-base); } 4400.ModelAccessSection-modelInfo-cb603 { align-items: center; display: flex; gap: var(--spacings-s6); min-width: 0px; } 4401.ModelAccessSection-modelIcon-6120a { fill: var(--text-colors-base); flex-shrink: 0; height: 20px; width: 20px; } 4402.ModelAccessSection-modelIcon-6120a > path { fill: var(--text-colors-base); } 4403.ModelAccessSection-modelName-9b816 { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 4404.ModelAccessSection-tag-54092 { flex-shrink: 0; white-space: nowrap; } 4405.ModelAccessSection-valueTag-03cbc { background-color: var(--background-colors-tint-3); color: var(--text-colors-base); flex-shrink: 0; white-space: nowrap; } 4406.Header-headerImg-4db53 { margin: var(--spacings-s0) auto var(--spacings-s16); display: block; width: auto; height: 24px; } 4407@media screen and (min-width: 1024px) { 4408 .Header-headerImg-4db53 { height: 18px; } 4409} 4410@media screen and (min-width: 1281px) { 4411 .Header-headerImg-4db53 { height: 24px; } 4412} 4413.Header-headerImgEnterprise-8e412 { margin-bottom: var(--spacings-s8); height: 32px; } 4414@media screen and (min-width: 1024px) { 4415 .Header-headerImgEnterprise-8e412 { height: 24px; } 4416} 4417@media screen and (min-width: 1281px) { 4418 .Header-headerImgEnterprise-8e412 { height: 32px; } 4419} 4420.Header-header-534fe { width: 100%; display: flex; align-items: center; gap: var(--spacings-s8); } 4421.Header-title-506b2 { color: var(--text-colors-base); font-weight: 700; line-height: var(--typography-t9-line-height); font-size: var(--typography-t9-font-size); } 4422@media screen and (min-width: 1281px) { 4423 .Header-title-506b2 { font-size: var(--typography-t9-font-size); } 4424} 4425.Header-tier-max_performance-46cd8 { color: var(--monetization-pro-colors-base-default); } 4426.Header-tier-max_starter-b91be { color: var(--monetization-plus-colors-base-default); } 4427.Header-tier-power-88f5c { color: var(--monetization-ultra-colors-base-default); } 4428.Header-tier-pro-7fb45 { color: var(--monetization-pro-colors-base-default); } 4429.Header-tier-plus-2a0ea { color: var(--monetization-plus-colors-base-default); } 4430.Header-tier-free-9fb2e, .Header-tier-enterprise-4adf0 { color: var(--text-colors-base); } 4431.Header-titleGradient-d92d0 { -webkit-text-fill-color: transparent; background-clip: text; background-image: linear-gradient(90deg, rgb(36, 199, 194), rgb(0, 153, 148)); } 4432.Header-tag-5a338 { flex-shrink: 0; white-space: nowrap; } 4433@keyframes Price-fadeSwap-1e6ea { 4434 0% { opacity: 0; translate: 0px 8px; } 4435 100% { opacity: 1; translate: 0px; } 4436} 4437.Price-swapAnimated-43575 { animation: 0.8s ease 0s 1 normal backwards running Price-fadeSwap-1e6ea; } 4438.Price-prices-33f1a { display: flex; flex-direction: column; justify-content: space-between; margin-bottom: var(--spacings-s16); } 4439@media screen and (min-width: 1024px) { 4440 .Price-prices-33f1a { min-height: 0px; } 4441} 4442@media screen and (min-width: 1024px) { 4443 .Price-prices-33f1a.Price-hasChildren-c9e1c { min-height: 90px; } 4444} 4445.Price-prices-33f1a em { color: var(--price-accent); font-style: inherit; } 4446.Price-priceContainer-db8c8 { flex-grow: 1; } 4447.Price-tier-max_performance-f4b0f { --price-accent: var(--monetization-pro-colors-base-default); } 4448.Price-tier-max_starter-b2899 { --price-accent: var(--monetization-plus-colors-base-default); } 4449.Price-tier-power-886b7 { --price-accent: var(--monetization-ultra-colors-base-default); } 4450.Price-tier-pro-b9f31 { --price-accent: var(--monetization-pro-colors-base-default); } 4451.Price-tier-plus-c283e { --price-accent: var(--monetization-plus-colors-base-default); } 4452.Price-tier-free-37b5a, .Price-tier-enterprise-eb7c7 { --price-accent: var(--text-colors-base); } 4453.Price-pricesGradientEm-51671 em { -webkit-text-fill-color: transparent; background-clip: text; background-image: linear-gradient(90deg, rgb(36, 199, 194), rgb(0, 153, 148)); } 4454.Price-monthlyPrice-57018 { font-size: var(--typography-t10-font-size); font-weight: 700; line-height: var(--typography-t8-line-height); align-items: baseline; gap: var(--spacings-s4); display: flex; } 4455.Price-monthlyPrice-57018 s { font-weight: 500; font-size: var(--typography-t8-font-size); color: var(--text-colors-tint-1); line-height: 1; } 4456@media screen and (min-width: 1024px) { 4457 .Price-monthlyPriceEnterprise-3e9da { font-size: var(--typography-t9-font-size); } 4458} 4459.Price-contactSalesPrice-4a646 { font-size: var(--typography-t7-font-size); font-weight: 700; line-height: var(--typography-t8-line-height); display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacings-s4); } 4460.Price-priceFrequency-70be3 { font-size: var(--typography-t7-font-size); line-height: 24px; } 4461.Price-pricingNote-e5ee1 { font-weight: 500; font-size: var(--typography-t5-font-size); color: var(--text-colors-tint-1); line-height: 1.5; margin-top: auto; } 4462.Price-infoBox-2fcea { justify-content: space-between; font-weight: 500; font-size: var(--typography-t5-font-size); color: var(--text-colors-tint-1); align-items: flex-end; gap: var(--spacings-s8); display: flex; line-height: 1.5; } 4463.InlinePricingCard-topSection-e7d58 { align-items: center; justify-content: space-between; gap: var(--spacings-s24); display: flex; } 4464.InlinePricingCard-leftSide-4adce { flex-direction: column; gap: var(--spacings-s4); display: flex; max-width: 400px; flex: 1 1 0%; } 4465.InlinePricingCard-rightSide-68a31 { flex: 1 1 0%; } 4466.InlinePricingCard-rightSide-68a31 > div { margin-bottom: var(--spacings-s0); width: 100%; } 4467.InlinePricingCard-packageSelectorContainer-02305 { flex-direction: column; align-items: flex-end; gap: var(--spacings-s8); display: flex; width: 284px; } 4468.InlinePricingCard-addCreditsLine-3847d { margin-top: var(--spacings-s0); } 4469.InlinePricingCard-credits-8dcdb { margin-bottom: var(--spacings-s16); } 4470.InlinePricingCard-packageSelector-bb9cb { width: 100%; margin-bottom: var(--spacings-s0); } 4471.InlinePricingCard-price-c23fc { margin-top: var(--spacings-s8); } 4472.InlinePricingCard-actionButton-e75c1 { margin-top: var(--spacings-s2); } 4473.InlinePricingCard-description-ce235 { font-weight: 500; font-size: var(--typography-t5-font-size); color: var(--text-colors-tint-1); line-height: 1.5; } 4474.InlinePricingCard-prorateNote-7e0f5 { margin-top: var(--spacings-s8); font-weight: 500; font-size: var(--typography-t4-font-size); color: var(--text-colors-tint-1); align-items: center; gap: var(--spacings-s4); display: flex; line-height: 1.5; } 4475.InlinePricingCard-prorateNote-7e0f5 svg { fill: var(--text-colors-tint-1); } 4476.InlinePricingCard-divider-68968 { margin: var(--spacings-s24) var(--spacings-s0); background-color: var(--control-colors-border-default); height: 1px; } 4477.InlinePricingCard-modelAccessSections-a542e { margin-bottom: var(--spacings-s24); align-items: stretch; gap: var(--spacings-s16); display: flex; } 4478.InlinePricingCard-modelAccessSections-a542e > * { min-width: 0px; } 4479.InlinePricingCard-trendingModelsBlock-7ffab { flex: 3 1 0px; } 4480.InlinePricingCard-freeAccessBlock-04a55 { flex: 2 1 0px; } 4481.InlinePricingCard-benefitsColumns-ab3a9 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacings-s16); } 4482@media screen and (min-width: 1024px) { 4483 .InlinePricingCard-benefitsColumns-ab3a9 { gap: var(--spacings-s24); } 4484} 4485.VerticalPricingCard-card-16ef9 { max-width: 536px; width: 100%; margin-left: auto; margin-right: auto; } 4486.VerticalPricingCard-description-b7f84 { font-weight: 500; margin-bottom: var(--spacings-s16); font-size: var(--typography-t5-font-size); color: var(--text-colors-tint-1); line-height: 1.5; } 4487@media screen and (min-width: 1024px) { 4488 .VerticalPricingCard-description-b7f84 { margin-bottom: var(--spacings-s4); min-height: var(--spacings-s48); } 4489} 4490.VerticalPricingCard-priceSuffix-5b98e { align-self: center; } 4491.VerticalPricingCard-creditsBox-6e126 { margin-bottom: var(--spacings-s24); } 4492.VerticalPricingCard-savingText-a466b { font-weight: 600; font-size: var(--typography-t5-font-size); line-height: 1.5; } 4493.VerticalPricingCard-savingTextSmall-79c0f { padding: var(--spacings-s8); height: auto; font-size: var(--typography-t3-font-size); line-height: var(--typography-t3-line-height); } 4494.VerticalPricingCard-prorateNote-e7658 { margin-bottom: var(--spacings-s0); margin-top: var(--spacings-s16); font-weight: 500; font-size: var(--typography-t4-font-size); color: var(--text-colors-tint-1); align-items: center; gap: var(--spacings-s4); display: flex; line-height: 1.5; } 4495.VerticalPricingCard-prorateNote-e7658 svg { fill: var(--text-colors-tint-1); } 4496.VerticalPricingCard-actionButton-8550a { margin-bottom: var(--spacings-s16); } 4497.VerticalPricingCard-ctaFirstActions-083c4 { background-color: var(--background-colors-tint-1); border-radius: var(--corner-radius-r20); flex-direction: column; display: flex; gap: var(--spacings-s0); } 4498.VerticalPricingCard-ctaFirstActions-083c4:not(:empty) { margin-bottom: var(--spacings-s16); } 4499.VerticalPricingCard-benefitViewMoreBtn-3687b { font-weight: 700; text-decoration: underline; font-size: var(--typography-t4-font-size); color: var(--positive-colors-text-default); padding: var(--spacings-s0); align-items: center; background: none; cursor: pointer; gap: var(--spacings-s8); display: flex; line-height: 1.5; } 4500.VerticalPricingCard-expandedViewActions-919e3 { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-in-out; } 4501.VerticalPricingCard-expandedViewActions-919e3.VerticalPricingCard-expanded-a82db { grid-template-rows: 1fr; } 4502.VerticalPricingCard-expandedViewActionsInner-19a3b { min-height: 0px; overflow: hidden; } 4503.VerticalPricingCard-collapsedViewActions-fdb60 { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.3s ease-in-out; } 4504.VerticalPricingCard-collapsedViewActions-fdb60.VerticalPricingCard-expanded-a82db { grid-template-rows: 0fr; } 4505.VerticalPricingCard-collapsedViewActionsInner-fe7f7 { overflow: hidden; min-height: 0px; } 4506.VerticalPricingCard-collapsedViewActionsContent-bec84 { transform: translateY(0px); transition: transform 0.3s ease-in-out; flex-direction: column; display: flex; } 4507.VerticalPricingCard-collapsedViewActionsContent-bec84.VerticalPricingCard-expanded-a82db { transform: translateY(-100%); } 4508.VerticalPricingCard-divider-cc972 { margin: var(--spacings-s16) var(--spacings-s0); background-color: var(--control-colors-border-default); height: 1px; } 4509.VerticalPricingCard-divider-cc972.VerticalPricingCard-expanded-a82db { margin: var(--spacings-s24) var(--spacings-s0); } 4510.VerticalPricingCard-modelAccessWrapper-71f51 { grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-in-out; display: grid; } 4511.VerticalPricingCard-modelAccessWrapper-71f51.VerticalPricingCard-expanded-a82db { grid-template-rows: 1fr; } 4512.VerticalPricingCard-modelAccessWrapperInner-d59c0 { overflow: hidden; min-height: 0px; } 4513.VerticalPricingCard-modelAccessSections-eb515 { flex-direction: column; margin-top: var(--spacings-s16); gap: var(--spacings-s12); display: flex; } 4514.VerticalPricingCard-featuresWrapper-1e5d5 { margin-bottom: var(--spacings-s0); grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-in-out; display: grid; } 4515.VerticalPricingCard-featuresWrapper-1e5d5.VerticalPricingCard-expanded-a82db { margin-bottom: var(--spacings-s16); grid-template-rows: 1fr; } 4516.VerticalPricingCard-featuresWrapperInner-8307a { overflow: hidden; min-height: 0px; } 4517.MiniPricingCard-description-dc94b { font-weight: 500; margin-bottom: var(--spacings-s16); font-size: var(--typography-t5-font-size); color: var(--text-colors-tint-1); line-height: 1.5; } 4518.MiniPricingCard-card-d9c5e { margin-bottom: var(--spacings-s0) !important; } 4519.MiniPricingCard-creditsBox-8e200 > div:last-child { min-height: var(--spacings-s0); } 4520.MiniPricingCard-usage-98327 { margin-block: var(--spacings-s16); } 4521.MiniPricingCard-usageHeader-c11e5 { justify-content: space-between; align-items: center; margin-bottom: var(--spacings-s12); display: flex; gap: var(--spacings-s8); } 4522.MiniPricingCard-usageLabel-48202 { font-weight: 600; line-height: var(--typography-t4-line-height); font-size: var(--typography-t4-font-size); color: var(--text-colors-base); } 4523.MiniPricingCard-usageValue-99ce5 { font-weight: 600; line-height: var(--typography-t4-line-height); font-size: var(--typography-t4-font-size); white-space: nowrap; } 4524.MiniPricingCard-tier-max_performance-60b63 { color: var(--monetization-pro-colors-base-default); } 4525.MiniPricingCard-tier-max_starter-2ced9 { color: var(--monetization-plus-colors-base-default); } 4526.MiniPricingCard-tier-power-b49a2 { color: var(--monetization-ultra-colors-base-default); } 4527.MiniPricingCard-tier-pro-cc651 { color: var(--monetization-pro-colors-base-default); } 4528.MiniPricingCard-tier-plus-bc57c { color: var(--monetization-plus-colors-base-default); } 4529.MiniPricingCard-tier-free-49f27, .MiniPricingCard-tier-enterprise-be26c { color: var(--text-colors-base); } 4530.MiniPricingCard-usageProgress-780f9 { --progress-status: var(--text-colors-base); } 4531.MiniPricingCard-mobileCreditsBox-17184 { border: 1px solid var(--control-colors-border-default); border-radius: var(--corner-radius-r16); margin-bottom: var(--spacings-s24); padding: var(--spacings-s12); flex-direction: column; gap: var(--spacings-s16); display: flex; } 4532.MiniPricingCard-mobileCreditsLine-6d06a { margin-top: var(--spacings-s0); } 4533.MiniPricingCard-infoBox-5dca5 { display: none; } 4534.MiniPricingCard-price-691ed { margin-bottom: var(--spacings-s16); min-height: auto !important; } 4535.MiniPricingCard-actionButton-c33a4 { margin-bottom: var(--spacings-s8); } 4536.MiniPricingCard-savingText-af746 { margin-top: var(--spacings-s0); } 4537.PricingCards-container-7e031 { padding: var(--spacings-s0) var(--spacings-s24); } 4538@media screen and (max-width: 766px) { 4539 .PricingCards-container-7e031 { padding: var(--spacings-s0) var(--spacings-s12); } 4540}
4541.PricingCards-containerTop-b2e1e { justify-content: center; margin-bottom: var(--spacings-s32); display: flex; } 4542@media screen and (max-width: 1365px), screen and (max-height: 767px) { 4543 .PricingCards-containerTop-b2e1e { margin-bottom: var(--spacings-s24); } 4544} 4545.PricingCards-cardsContainer-5bd1d { --card-track: 1fr; grid-template-columns: 1fr; margin-bottom: var(--spacings-s24); justify-content: center; flex-direction: column; display: grid; } 4546.PricingCards-cardsContainer-5bd1d > * { border-radius: var(--corner-radius-r16); } 4547@media screen and (min-width: 1024px) { 4548 .PricingCards-cardsContainer-5bd1d { grid-template-columns: repeat(var(--cards-count-md),var(--card-track)); padding-bottom: var(--spacings-s24); margin-bottom: var(--spacings-s72); flex-direction: row; gap: var(--spacings-s16); } 4549} 4550@media screen and (min-width: 1366px) { 4551 .PricingCards-cardsContainer-5bd1d { grid-template-columns: repeat(var(--cards-count),var(--card-track)); } 4552} 4553.PricingCards-verticalCards-03b4c { --card-track: minmax(0, 536px); } 4554.PricingCards-fourCards-d67cc { grid-template-areas: "power" "free" "pro" "enterprise"; } 4555@media screen and (min-width: 1024px) { 4556 .PricingCards-fourCards-d67cc { grid-template-areas: "pro power" "free enterprise"; } 4557} 4558@media screen and (min-width: 1366px) { 4559 .PricingCards-fourCards-d67cc { grid-template-areas: "free pro power enterprise"; } 4560} 4561.PricingCards-frequencyToggleSegments-61303 { margin: var(--spacings-s12) auto var(--spacings-s0); } 4562.PricingCards-highlighted-95eb4 { --pricing-cards-highlighted: 1; } 4563.PricingCards-firstOnMobile-e5157 { order: -1; } 4564@media screen and (min-width: 1024px) { 4565 .PricingCards-firstOnMobile-e5157 { order: 0; } 4566} 4567.PricingCards-card-21143 { margin-top: var(--spacings-s0); margin-bottom: var(--spacings-s32); } 4568@media screen and (min-width: 1024px) { 4569 .PricingCards-card-21143 { margin-bottom: var(--spacings-s0); flex-shrink: 1; margin-top: var(--spacings-s16); } 4570} 4571.WelcomeView-root-99105 { justify-content: center; align-items: center; position: relative; overflow: hidden; min-height: 100%; display: flex; width: 100%; } 4572.WelcomeView-content-56c68 { padding: var(--spacings-s44) var(--spacings-s48) var(--spacings-s24); align-items: center; text-align: center; justify-content: center; flex-direction: column; margin: 0px auto; max-width: 100%; display: flex; height: 100%; width: 640px; z-index: 1; } 4573.WelcomeView-content-56c68.WelcomeView-mobile-4e486 { padding: var(--spacings-s44) var(--spacings-s32) 140px; } 4574.WelcomeView-content-56c68.WelcomeView-creditsMobile-d4be6 { align-items: initial; } 4575.WelcomeView-logo-7face { height: 42px; margin-bottom: var(--spacings-s32); width: auto; } 4576.WelcomeView-credits-9b844 { background: linear-gradient(58deg, rgb(3, 2, 182) -40.37%, rgb(255, 52, 249) 81.3%) text; -webkit-text-fill-color: transparent; font-weight: 600; margin-bottom: var(--spacings-s32); letter-spacing: -2px; line-height: 1; font-size: 56px; } 4577.WelcomeView-description-1363f { font-size: var(--typography-t6-font-size); font-weight: 500; color: var(--text-colors-tint-1); line-height: 1.4; margin: 0px; } 4578.WelcomeView-description-1363f.WelcomeView-mobile-4e486 { font-size: var(--typography-t5-font-size); } 4579.WelcomeView-space-5f1ad { flex-grow: 1; } 4580.WelcomeView-imageWrapper-ce76a { margin-bottom: var(--spacings-s24); justify-content: center; align-items: center; display: flex; max-height: 200px; } 4581.WelcomeView-confetti-719e3 { position: absolute; z-index: 0; scale: 2; inset: 0px; } 4582@media (orientation: portrait) { 4583 .WelcomeView-confetti-719e3 { scale: 3; } 4584} 4585.WelcomeView-title-db111 { font-weight: 700; margin-bottom: var(--spacings-s32); font-size: var(--typography-t6-font-size); color: var(--text-colors-base); line-height: 1.4; } 4586.WelcomeView-qrBlock-67878 { border: 1px solid var(--primary-colors-base-default); justify-content: space-between; background: var(--background-colors-tint-2); border-radius: var(--corner-radius-r16); margin-top: var(--spacings-s32); align-items: center; display: flex; max-width: 648px; width: 100%; } 4587.WelcomeView-qrText-b34b3 { color: var(--primary-colors-base-default); font-weight: 500; border-radius: var(--corner-radius-r16); font-size: var(--typography-t6-font-size); padding: var(--spacings-s24); line-height: 1.4; max-width: 400px; flex-grow: 1; } 4588.WelcomeView-qrImgContainer-ac706 { padding: var(--spacings-s32) var(--spacings-s32) var(--spacings-s32) var(--spacings-s0); flex-shrink: 0; } 4589.WelcomeView-qrImg-5f72b { max-width: 100px; } 4590.WelcomeView-footer-aca93 { grid-template-columns: 1fr; margin-top: var(--spacings-s16); gap: var(--spacings-s8); display: grid; width: 100%; } 4591.WelcomeView-footer-aca93.WelcomeView-creditsView-88934 { margin-bottom: var(--spacings-s48); } 4592.WelcomeView-letsGoButton-65ca0 { margin-top: var(--spacings-s16); max-width: 100%; min-width: 328px; } 4593.WelcomeView-letsGoButton-65ca0.WelcomeView-mobile-4e486 { min-width: 100%; } 4594.WelcomeView-image-e29d6 { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } 4595.WelcomeView-hidden-69882 { display: none; } 4596.DiscountTicket-container-94224 { position: relative; height: 194px; max-width: 100%; width: 378px; } 4597.DiscountTicket-ticket-ebc50 { background-repeat: no-repeat; background-position: center center; background-size: contain; justify-content: center; flex-direction: column; padding: var(--spacings-s24); align-items: center; position: relative; height: 194px; max-width: 378px; width: 100%; text-align: center; display: flex; z-index: 2; scale: 1; } 4598.DiscountTicket-ticket-ebc50.DiscountTicket-transparent-02915 { scale: 1.4; }
4599.DiscountTicket-title-bc80e { color: var(--absolute-white-colors-base-default); font-weight: 600; font-size: var(--typography-t7-font-size); line-height: 1.32; } 4600.DiscountTicket-discount-49a69 { color: var(--absolute-white-colors-base-default); font-weight: 600; font-size: var(--typography-t10-font-size); line-height: 1.2; } 4601.DiscountTicket-product-c30c5 { color: var(--absolute-white-colors-base-default); font-weight: 600; font-size: var(--typography-t7-font-size); line-height: 1.32; } 4602.DiscountTicket-transparent-02915 .DiscountTicket-discount-49a69 { font-size: var(--typography-t11-font-size); line-height: 1; } 4603.DiscountTicket-magenta-d9642 .DiscountTicket-title-bc80e, .DiscountTicket-magenta-d9642 .DiscountTicket-discount-49a69, .DiscountTicket-magenta-d9642 .DiscountTicket-product-c30c5 { color: var(--absolute-black-colors-base-default); } 4604.DiscountTicket-bgGradient-dce3b { transform: translate(-50%, -50%); background: var(--gradients-general-brand); position: absolute; filter: blur(57px); border-radius: 50%; left: 50%; top: 50%; height: 284px; width: 284px; z-index: 1; } 4605.Authentication-root-1015a { padding-bottom: var(--spacings-s16); padding-top: var(--spacings-s40); flex-direction: column; display: flex; width: 100%; padding-left: var(--spacings-s40); padding-right: var(--spacings-s40); } 4606@media screen and (max-width: 766px) { 4607 .Authentication-root-1015a { padding-bottom: var(--spacings-s16); padding-top: var(--spacings-s48); } 4608} 4609.Authentication-title-b6f6a { margin-bottom: var(--spacings-s24); } 4610.Authentication-registration-858fb { background: none; flex-grow: 1; padding: 0px; overflow: visible; } 4611.Authentication-registration-858fb form { overflow: auto; height: 100%; } 4612.Authentication-registration-858fb.Authentication-campaignWithMedia-23c91 form { height: auto; } 4613.Authentication-registration-858fb h2, .Authentication-registration-858fb h3 { font-weight: 700; font-size: var(--typography-t6-font-size); color: var(--text-colors-base); line-height: 1.4; display: flex; gap: var(--spacings-s12); align-items: center; margin-bottom: var(--spacings-s0); text-align: start; } 4614.Authentication-media-16b1d { width: 100%; display: flex; justify-content: center; align-items: center; } 4615.PackageCard-root-1e07e { display: inline-flex; align-items: stretch; position: relative; cursor: pointer; } 4616.PackageCard-radioButton-c66c1 { display: block; position: absolute; z-index: 1; top: 0px; left: 0px; width: 100%; height: 100%; border-radius: var(--corner-radius-r16); margin: var(--spacings-s0); padding: var(--spacings-s0); cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: none; appearance: none; } 4617.PackageCard-card-81493 { background-color: var(--background-colors-tint-1); border-radius: var(--corner-radius-r16); padding: var(--spacings-s12) var(--spacings-s16); position: relative; overflow: hidden; width: 100%; display: flex; align-items: center; justify-content: space-between; box-shadow: inset 0 0 0 1px var(--background-colors-border); } 4618@media screen and (max-width: 766px) { 4619 .PackageCard-card-81493 { box-shadow: inset 0 0 0 1px var(--background-colors-border); } 4620} 4621.PackageCard-ribbonSelected-61609 { background-color: var(--primary-colors-base-default) !important; color: var(--negative-colors-text-default) !important; border-color: var(--primary-colors-base-default) !important; } 4622.PackageCard-cardSelected-cfd15 { box-shadow: inset 0 0 0 2px var(--primary-colors-base-default); } 4623.PackageCard-planInfo-a89e5 { display: flex; flex-direction: column; } 4624.PackageCard-creditCount-b4be3 { font-weight: 700; font-size: var(--typography-t6-font-size); line-height: var(--typography-t6-line-height); color: var(--text-colors-base); } 4625@media screen and (max-width: 766px) { 4626 .PackageCard-creditCount-b4be3 { font-size: var(--typography-t5-font-size); line-height: var(--typography-t5-line-height); } 4627} 4628.PackageCard-creditCountInactive-beece { color: var(--text-colors-tint-1); } 4629.PackageCard-totalPrice-90041 { font-weight: 600; font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); color: var(--text-colors-tint-1); } 4630@media screen and (max-width: 766px) { 4631 .PackageCard-totalPrice-90041 { font-size: var(--typography-t3-font-size); line-height: var(--typography-t3-line-height); } 4632} 4633.PackageCard-totalPriceInactive-b00d0 { color: var(--text-colors-tint-2); } 4634.PackageCard-pricePerCredit-5aca2 { font-weight: 700; font-size: var(--typography-t6-font-size); line-height: var(--typography-t6-line-height); color: var(--text-colors-base); } 4635@media screen and (max-width: 766px) { 4636 .PackageCard-pricePerCredit-5aca2 { font-size: var(--typography-t5-font-size); line-height: var(--typography-t5-line-height); } 4637} 4638.PackageCard-pricePerCreditInactive-71f0b { color: var(--text-colors-tint-1); } 4639.PackageCard-ribbon-42e09 { position: absolute; top: -1px; right: -1px; background-color: var(--background-colors-tint-2); color: var(--text-colors-tint-1); border: 1px solid var(--background-colors-border); font-weight: 600; font-size: var(--typography-t2-font-size); line-height: var(--typography-t2-line-height); padding: var(--spacings-s4) var(--spacings-s10); border-bottom-left-radius: var(--corner-radius-r16); border-top-right-radius: var(--corner-radius-r16); } 4640@keyframes OtpPackagesV2Content-fadeIn-40183 { 4641 0% { opacity: 0; translate: 0px 24px; } 4642 100% { opacity: 1; translate: 0px; } 4643} 4644.OtpPackagesV2Content-selectorWrapper-45c19 { backdrop-filter: blur(10px); border-radius: var(--corner-radius-r16); margin-top: var(--spacings-s8); flex-direction: column; padding: var(--spacings-s24); align-items: center; display: flex; width: 100%; max-width: 524px; border: 1px solid var(--background-colors-border); } 4645@media screen and (max-width: 766px) { 4646 .OtpPackagesV2Content-selectorWrapper-45c19 { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 0px; padding: 0px; max-width: 100%; flex-grow: 1; } 4647} 4648.OtpPackagesV2Content-packages-ccb6f { display: flex; flex-direction: column; gap: var(--spacings-s8); width: 100%; flex-grow: 1; margin-bottom: var(--spacings-s32); } 4649@media screen and (max-width: 766px) { 4650 .OtpPackagesV2Content-packages-ccb6f { margin-bottom: 0px; } 4651} 4652.OtpPackagesV2Content-animated-2f56e { animation: 0.4s ease 0s 1 normal backwards running OtpPackagesV2Content-fadeIn-40183; } 4653.OtpPackagesV2Content-ctaSection-1fd0f { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--spacings-s8); } 4654.OtpPackagesV2Content-ctaButton-c8f27 { width: 100%; } 4655.OtpPackagesV2Content-footerNote-b750e { font-size: var(--typography-t4-font-size); font-weight: 600; color: var(--text-colors-tint-1); line-height: var(--typography-t4-line-height); text-align: center; } 4656.PlanCard-root-82728 { display: inline-flex; align-items: stretch; position: relative; cursor: pointer; } 4657.PlanCard-radioButton-76b43 { display: block; position: absolute; z-index: 1; top: 0px; left: 0px; width: 100%; height: 100%; border-radius: var(--corner-radius-r16); margin: var(--spacings-s0); padding: var(--spacings-s0); cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: none; appearance: none; } 4658.PlanCard-card-f32ec { background-color: var(--background-colors-tint-1); border-radius: var(--corner-radius-r16); padding: var(--spacings-s24) var(--spacings-s16); position: relative; overflow: hidden; width: 100%; display: flex; align-items: center; justify-content: space-between; box-shadow: inset 0 0 0 1px var(--background-colors-border); } 4659@media screen and (max-width: 766px) { 4660 .PlanCard-card-f32ec { box-shadow: inset 0 0 0 1px var(--background-colors-border); } 4661} 4662.PlanCard-ribbonSelected-0c374 { background-color: var(--primary-colors-base-default) !important; color: var(--negative-colors-text-default) !important; border-color: var(--primary-colors-base-default) !important; } 4663.PlanCard-cardSelected-a74c6 { box-shadow: inset 0 0 0 2px var(--primary-colors-base-default); } 4664.PlanCard-planInfo-3a232 { display: flex; flex-direction: column; } 4665.PlanCard-creditCount-f02cb { font-weight: 700; font-size: var(--typography-t6-font-size); line-height: var(--typography-t6-line-height); color: var(--text-colors-base); } 4666@media screen and (max-width: 766px) { 4667 .PlanCard-creditCount-f02cb { font-size: var(--typography-t5-font-size); line-height: var(--typography-t5-line-height); } 4668} 4669.PlanCard-creditCountInactive-90db6 { color: var(--text-colors-tint-1); } 4670.PlanCard-totalPrice-f12a6 { font-weight: 600; font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); color: var(--text-colors-tint-1); } 4671@media screen and (max-width: 766px) { 4672 .PlanCard-totalPrice-f12a6 { font-size: var(--typography-t3-font-size); line-height: var(--typography-t3-line-height); } 4673} 4674.PlanCard-totalPriceInactive-68fe0 { color: var(--text-colors-tint-2); } 4675.PlanCard-pricePerCredit-6dbda { font-weight: 700; font-size: var(--typography-t6-font-size); line-height: var(--typography-t6-line-height); color: var(--text-colors-base); } 4676@media screen and (max-width: 766px) { 4677 .PlanCard-pricePerCredit-6dbda { font-size: var(--typography-t5-font-size); line-height: var(--typography-t5-line-height); } 4678} 4679.PlanCard-pricePerCreditInactive-4550d { color: var(--text-colors-tint-1); } 4680.PlanCard-ribbon-67bcc { position: absolute; top: -1px; right: -1px; background-color: var(--background-colors-tint-2); color: var(--text-colors-tint-1); border: 1px solid var(--background-colors-border); font-weight: 600; font-size: var(--typography-t2-font-size); line-height: var(--typography-t2-line-height); padding: var(--spacings-s4) var(--spacings-s10); border-bottom-left-radius: var(--corner-radius-r16); border-top-right-radius: var(--corner-radius-r16); } 4681.AppPlansContent-selectorWrapper-ea8df { backdrop-filter: blur(10px); border-radius: var(--corner-radius-r16); margin-top: var(--spacings-s32); flex-direction: column; padding: var(--spacings-s24); align-items: center; display: flex; width: 100%; max-width: 524px; border: 1px solid var(--background-colors-border); } 4682@media screen and (max-width: 766px) { 4683 .AppPlansContent-selectorWrapper-ea8df { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 0px; padding: 0px; max-width: 100%; flex-grow: 1; } 4684}
4685.AppPlansContent-plans-a2b9d { display: flex; flex-direction: column; gap: var(--spacings-s8); width: 100%; flex-grow: 1; margin-bottom: var(--spacings-s32); } 4686@media screen and (max-width: 766px) { 4687 .AppPlansContent-plans-a2b9d { margin-bottom: 0px; } 4688} 4689.AppPlansContent-ctaSection-71ba0 { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--spacings-s8); } 4690.AppPlansContent-ctaButton-0f9c8 { width: 100%; } 4691.AppPlansContent-footerNote-927bd { font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); font-weight: 600; color: var(--text-colors-tint-1); text-align: center; } 4692.MobileOrderSummary-sentinel-25939 { height: 36px; margin-bottom: -36px; flex-shrink: 0; pointer-events: none; } 4693.MobileOrderSummary-bar-ef3d2 { position: sticky; top: 0px; z-index: 6; padding-top: 32px; margin-bottom: -88px; flex-shrink: 0; background-color: transparent; border-bottom: 1px solid transparent; transition: background-color 0.22s, border-color 0.22s; } 4694.MobileOrderSummary-barSolid-f7e31 { background-color: var(--background-colors-base); border-bottom-color: var(--background-colors-border); } 4695.MobileOrderSummary-barOpen-45b7a { background-color: var(--background-colors-popover); border-bottom-color: transparent; } 4696.MobileOrderSummary-barRow-a98c6 { display: flex; align-items: center; justify-content: space-between; gap: var(--spacings-s12); height: 56px; padding: 0 var(--spacings-s16); box-sizing: border-box; } 4697.MobileOrderSummary-brand-90b0f { min-width: 0px; } 4698.MobileOrderSummary-brand-90b0f.MobileOrderSummary-brand-90b0f > * { font-size: var(--typography-t5-font-size); } 4699.MobileOrderSummary-detailsToggle-fb1dc { display: inline-flex; align-items: center; gap: var(--spacings-s4); padding: var(--spacings-s0); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: none; cursor: pointer; color: var(--text-colors-base); } 4700.MobileOrderSummary-detailsToggleLabel-c7eab { text-decoration: underline; } 4701.MobileOrderSummary-chevron-b1ed9 { width: 16px; height: 16px; fill: currentcolor; transition: transform 0.25s; } 4702.MobileOrderSummary-chevronOpen-76fd1 { transform: rotate(180deg); } 4703.MobileOrderSummary-details-d0816 { position: absolute; top: 100%; left: 0px; right: 0px; z-index: 8; overflow: hidden; max-height: 0px; opacity: 0; pointer-events: none; background-color: var(--background-colors-popover); border-bottom: 1px solid var(--background-colors-border); border-radius: 0 0 var(--corner-radius-r16) var(--corner-radius-r16); transition: max-height 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.28s, box-shadow 0.3s; } 4704.MobileOrderSummary-detailsOpen-10736 { max-height: 800px; opacity: 1; pointer-events: auto; box-shadow: rgba(0, 0, 0, 0.45) 0px 24px 48px; } 4705.MobileOrderSummary-detailsContent-6c468 { display: flex; flex-direction: column; gap: var(--spacings-s16); padding: var(--spacings-s16); } 4706.MobileOrderSummary-taxesAfterSeats-46ac7.MobileOrderSummary-taxesAfterSeats-46ac7 { border-top-width: medium; border-top-style: none; border-top-color: currentcolor; margin-top: var(--spacings-s0); padding-top: var(--spacings-s0); } 4707.MobileOrderSummary-detailsActions-90ebd { display: flex; justify-content: center; } 4708.MobileOrderSummary-hero-b33b0 { position: relative; flex-shrink: 0; background-color: var(--background-colors-tint-1); border-bottom: 1px solid var(--background-colors-border); } 4709.MobileOrderSummary-heroGlow-73c06 { position: absolute; inset: 0px; pointer-events: none; } 4710.MobileOrderSummary-heroContent-b9e68 { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--spacings-s4); padding: calc(88px + var(--spacings-s6)) var(--spacings-s16) var(--spacings-s16); } 4711.MobileOrderSummary-badge-8f3e2 { margin-bottom: var(--spacings-s4); } 4712.MobileOrderSummary-badge-8f3e2.MobileOrderSummary-badge-8f3e2 { background: var(--order-summary-accent); } 4713.MobileOrderSummary-priceRow-d2732 { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: var(--spacings-s6); } 4714.MobileOrderSummary-viewDetails-da7f8 { display: flex; justify-content: center; padding-top: var(--spacings-s16); } 4715.CardVerificationInfo-root-b2de4 { display: flex; padding: var(--spacings-s8); gap: var(--spacings-s8); background: var(--background-colors-tint-2); border-radius: var(--spacings-s8); align-items: center; margin-top: var(--spacings-s24); } 4716.CardVerificationInfo-icon-f2fd0 { fill: var(--success-colors-base-default); } 4717.PromoCode-labelCont-f357f { padding: var(--spacings-s0); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: none; margin: var(--spacings-s24) var(--spacings-s0) var(--spacings-s8) var(--spacings-s0); cursor: pointer; } 4718.PromoCode-label-4ae50 { text-decoration: underline; } 4719.PromoCode-label-4ae50.PromoCode-label-4ae50 { font-weight: 600; color: var(--checkout-accent); cursor: pointer; } 4720.PromoCode-label-4ae50.PromoCode-label-4ae50:hover { color: var(--checkout-accent-action); } 4721.PromoCode-validationBlock-15c9c { min-height: 16px; margin: var(--spacings-s4) var(--spacings-s0); padding-left: var(--spacings-s4); } 4722.PromoCode-validationMessage-9c3ed { font-size: var(--typography-t3-font-size); } 4723.PromoCode-validationSuccess-5c559 { color: var(--success-colors-base-default); } 4724.PromoCode-validationFail-3c6b8 { color: var(--error-colors-base-default); } 4725.PromoCode-checkoutLabel-ab2d8 { font-weight: 600; font-size: var(--typography-t4-font-size); line-height: 1.4; margin-bottom: var(--spacings-s8); color: var(--text-colors-tint-1); } 4726.PromoCode-inputWrapper-019d8 { margin-top: var(--spacings-s8); } 4727.PaymentFormFooter-footer-22473 { padding-top: var(--spacings-s16); padding-bottom: var(--spacings-s16); bottom: 0px; border-bottom-left-radius: var(--corner-radius-r16); margin: var(--spacings-s0) calc(-1 * var(--spacings-s40)); } 4728@media screen and (max-width: 766px) { 4729 .PaymentFormFooter-footer-22473 { margin: var(--spacings-s0) calc(-1 * var(--spacings-s16)); } 4730} 4731.PaymentFormFooter-errorMsg-5b561 { margin: var(--spacings-s8) var(--spacings-s8) var(--spacings-s4); text-align: center; } 4732.PaymentFormFooter-terms-29ee2 { margin-top: var(--spacings-s8); } 4733.PaymentFormFooter-stepperContent-c11c9 { padding-left: var(--spacings-s40); padding-right: var(--spacings-s40); } 4734@media screen and (max-width: 766px) { 4735 .PaymentFormFooter-stepperContent-c11c9 { padding-left: var(--spacings-s16); padding-right: var(--spacings-s16); } 4736} 4737.CheckoutForm-root-7ca29 { display: flex; flex-direction: column; width: 100%; height: 100%; } 4738.CheckoutForm-combinedPlanSelector-d7ff6 { display: flex; gap: var(--spacings-s8); width: 100%; } 4739.CheckoutForm-formTopElement-5396f { display: flex; justify-content: center; align-items: center; } 4740.CheckoutForm-planSelector-8c29c { margin-bottom: var(--spacings-s12); } 4741.CheckoutForm-mainContainer-d4b36 { flex-grow: 1; display: flex; flex-direction: column; height: 100%; } 4742.CheckoutForm-content-83d5e { padding-top: var(--spacings-s40); padding-bottom: var(--spacings-s0); } 4743@media screen and (max-width: 766px) { 4744 .CheckoutForm-content-83d5e { padding-top: var(--spacings-s48); } 4745} 4746.CheckoutForm-content-83d5e { padding-bottom: var(--spacings-s16); padding-top: var(--spacings-s24); } 4747.CheckoutForm-contentBelowSummary-497c9.CheckoutForm-contentBelowSummary-497c9 { padding-top: var(--spacings-s16); } 4748.CheckoutForm-checkoutTitle-499ab { font-weight: 700; color: var(--text-colors-base); display: flex; gap: var(--spacings-s12); align-items: center; margin-bottom: var(--spacings-s16); font-size: var(--typography-t8-font-size); line-height: var(--typography-t8-line-height); } 4749@media screen and (max-width: 766px) { 4750 .CheckoutForm-checkoutTitle-499ab { font-size: var(--typography-t7-font-size); line-height: var(--typography-t7-line-height); } 4751} 4752.CheckoutForm-scrollbars-ca25b { flex-grow: 1; } 4753.CheckoutForm-scrollbars-ca25b::after { width: calc(100% - var(--spacings-s40) - var(--spacings-s40)); display: none; background: var(--background-colors-tint-2); left: var(--spacings-s40); position: absolute; content: ""; bottom: 0px; height: 1px; } 4754.CheckoutForm-scrollbars-ca25b.CheckoutForm-scrollable-72b58::after { display: block; } 4755.CheckoutForm-scrollbars-ca25b.CheckoutForm-accordionForm-3f402 { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; } 4756.CheckoutForm-track-1d371 { right: 8px; height: 100%; } 4757.CheckoutForm-thumb-97ee7 { border-radius: var(--corner-radius-r4); cursor: pointer; } 4758.CheckoutForm-adyenWrapper-cc84d { margin-top: var(--spacings-s16); } 4759.CheckoutForm-footerComponent-c0790 { width: 100%; display: flex; flex-direction: column; align-items: flex-start; } 4760.CheckoutForm-footerComponent-c0790 > div { width: 100%; } 4761.CheckoutForm-footerComponent-c0790 > button { margin: var(--spacings-s0); } 4762.CheckoutForm-checkoutDescription-2cbfa { margin-bottom: var(--spacings-s16); } 4763.CheckoutForm-priceInfoContainer-23b7c { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacings-s16); } 4764.CheckoutForm-paymentContainer-e90e3 { position: relative; width: 100%; } 4765.CheckoutForm-paymentContainer-e90e3.CheckoutForm-disabled-c1e35 { pointer-events: none; } 4766.CheckoutForm-paymentContainer-e90e3.CheckoutForm-disabled-c1e35::after { content: ""; display: block; width: 100%; position: absolute; top: 0px; bottom: 0px; height: 100%; background-color: var(--absolute-white-colors-base-default); border-radius: var(--corner-radius-r24); opacity: 0.7; } 4767.CheckoutForm-togglesPaymentMethods-1b1c8 { margin-bottom: var(--spacings-s16); } 4768.CheckoutForm-infoBox-df594 { margin: var(--spacings-s24) var(--spacings-s0); padding: var(--spacings-s8) var(--spacings-s16) var(--spacings-s12); border-radius: var(--corner-radius-r8); border: 2px solid var(--success-colors-base-default); color: var(--success-colors-base-default); font-size: var(--typography-t3-font-size); font-weight: 500; line-height: 1.33; } 4769.CheckoutForm-infoBoxTitle-ce972 { font-size: var(--typography-t4-font-size); font-weight: 600; line-height: 1.42; margin-bottom: var(--spacings-s4); } 4770.CheckoutForm-plans-e21af { margin-bottom: var(--spacings-s16); } 4771.CheckoutForm-recaptchaBranding-0e732 { margin-top: var(--spacings-s16); } 4772.CheckoutForm-recaptchaBranding-0e732 a { color: var(--checkout-accent); } 4773.CheckoutForm-recaptchaBranding-0e732 a:hover { color: var(--checkout-accent-action); } 4774.CheckoutForm-registrationForm-8dd0d.CheckoutForm-registrationForm-8dd0d { height: 380px; padding: 16px 0px 0px; } 4775.CheckoutForm-registrationForm-8dd0d.CheckoutForm-registrationForm-8dd0d form { overflow: hidden; } 4776.CheckoutForm-hidden-da3a1.CheckoutForm-hidden-da3a1 { display: none; } 4777.CheckoutForm-actions-1e4a0 { display: flex; align-items: center; margin-bottom: var(--spacings-s8); } 4778.CheckoutForm-actions-1e4a0 > :last-child { flex-grow: 1; } 4779.CheckoutForm-checkoutLabel-8a24a { font-weight: 600; font-size: var(--typography-t4-font-size); line-height: 1.4; margin-bottom: var(--spacings-s8); color: var(--text-colors-tint-1); } 4780.CheckoutForm-stepperContent-d5441 { padding-left: var(--spacings-s40); padding-right: var(--spacings-s40); } 4781@media screen and (max-width: 766px) { 4782 .CheckoutForm-stepperContent-d5441 { padding-left: var(--spacings-s16); padding-right: var(--spacings-s16); } 4783} 4784.CheckoutForm-checkoutButton-2a1ad { display: flex; width: 100%; justify-content: center; } 4785.CheckoutForm-form-90c1c { display: flex; flex-direction: column; gap: var(--spacings-s8); } 4786.CheckoutForm-requiredAsterisk-23cd0 { color: var(--error-colors-base-default); font-size: var(--typography-t4-font-size); font-weight: 600; line-height: 1.42; margin-bottom: var(--spacings-s4); } 4787.CheckoutForm-avataxTitle-897f5 span { display: inline-block; color: var(--error-colors-base-default); } 4788.CheckoutForm-avataxTitle-897f5 em { font-size: var(--typography-t4-font-size); color: var(--text-colors-tint-2); font-style: normal; } 4789.CheckoutForm-formDivider-fd643 { width: 100%; height: 1px; margin: var(--spacings-s8) var(--spacings-s0); background-color: var(--control-colors-border-default); } 4790.CheckoutForm-walletContainer-fdf0f { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(50% - 4px), 1fr)); gap: var(--spacings-s8); width: 100%; } 4791.CheckoutForm-walletSlot-bf35c { position: relative; min-width: 0px; } 4792.CheckoutForm-walletSlot-bf35c iframe { border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; } 4793.CheckoutForm-walletSlot-bf35c:empty { display: none; } 4794.CheckoutForm-walletSlot-bf35c.CheckoutForm-disabled-c1e35 { pointer-events: none; } 4795.CheckoutForm-walletSlot-bf35c.CheckoutForm-disabled-c1e35::after { content: ""; display: block; width: 100%; position: absolute; top: 0px; bottom: 0px; height: 100%; background-color: var(--absolute-white-colors-base-default); border-radius: var(--corner-radius-r8); opacity: 0.7; } 4796.CheckoutForm-divider-b169e { display: flex; align-items: center; gap: var(--spacings-s12); margin: var(--spacings-s4) var(--spacings-s0); font-size: var(--typography-t4-font-size); font-weight: 500; color: var(--text-colors-tint-2); text-transform: uppercase; } 4797.CheckoutForm-divider-b169e::before, .CheckoutForm-divider-b169e::after { content: ""; flex: 1 1 0%; height: 1px; background-color: var(--control-colors-border-default); } 4798.Pricing-title-9c931 > span { -webkit-text-fill-color: transparent; background-clip: text; background-image: var(--gradients-monetization-pro); } 4799@media screen and (max-width: 766px) { 4800 .Pricing-title-9c931 { text-align: center; } 4801} 4802.Pricing-pricingCardsContainer-84e68 { max-width: 980px; } 4803@media screen and (min-width: 767px) { 4804 .Pricing-pricingCardsContainer-84e68 { margin: 0px auto; } 4805} 4806.Pricing-pricingCardsContainerCompact-54d57 { max-width: unset; } 4807.Pricing-plansSectionToggle-7c6fe { box-shadow: rgba(0, 0, 0, 0.24) 0px 0px 16px; } 4808.Pricing-columnsWrapper-8dddc { padding: var(--spacings-s0) var(--spacings-s24); margin-bottom: var(--spacings-s40); justify-content: center; gap: var(--spacings-s24); display: flex; } 4809.Pricing-columnsWrapper-8dddc em { color: var(--monetization-ultra-colors-base-default); font-style: inherit; } 4810@media screen and (max-width: 767px) { 4811 .Pricing-columnsWrapper-8dddc { flex-direction: column-reverse; } 4812} 4813.WelcomeDiscount-container-2728f { justify-content: center; flex-direction: column; padding: var(--spacings-s24); align-items: center; position: relative; overflow: hidden; display: flex; height: 100%; width: 100%; } 4814.WelcomeDiscount-content-c0499 { justify-content: center; flex-direction: column; position: relative; align-items: center; text-align: center; gap: var(--spacings-s16); display: flex; height: 100%; max-width: 590px; z-index: 1; } 4815.WelcomeDiscount-title-157a8 { font-weight: 700; font-size: var(--typography-t9-font-size); color: var(--text-colors-base); line-height: 1.32; } 4816.WelcomeDiscount-description-d0d3d { margin: var(--spacings-s0) var(--spacings-s0) var(--spacings-s24); font-weight: 500; font-size: var(--typography-t5-font-size); color: var(--text-colors-tint-1); line-height: 1.5; } 4817.WelcomeDiscount-description-d0d3d a { color: var(--primary-colors-base-default); font-weight: 600; cursor: pointer; } 4818.WelcomeDiscount-confetti-30f4a { position: absolute; z-index: 0; scale: 2; inset: 0px; } 4819.WelcomeDiscount-iconWrapper-5b2d8 { border: 2px solid var(--background-colors-tint-3); justify-content: center; align-items: center; border-radius: 50%; display: flex; height: 56px; width: 56px; } 4820.WelcomeDiscount-icon-a07ee { fill: var(--text-colors-tint-2); height: 32px; width: 32px; } 4821.WelcomeDiscount-imageWrapper-982a6 { justify-content: center; align-items: center; margin-bottom: -24px; display: flex; } 4822.WelcomeDiscount-imageWrapper-982a6 img { width: auto; height: 200px; } 4823.WelcomeDiscount-cta-a0f83 { min-width: 320px; } 4824.WelcomeTiers-otpFooter-4e9a0 { justify-items: center; } 4825.WelcomeTiers-button-89ce6 { max-width: 328px; width: 100%; } 4826.WelcomeDesktop-container-64773 { justify-content: center; flex-direction: column; padding: var(--spacings-s24); align-items: center; position: relative; overflow: hidden; display: flex; height: 100%; width: 100%; } 4827.WelcomeDesktop-content-37136 { justify-content: center; flex-direction: column; position: relative; al
4827ign-items: center; text-align: center; gap: var(--spacings-s16); display: flex; height: 100%; z-index: 1; } 4828@media screen and (max-width: 767px) { 4829 .WelcomeDesktop-content-37136 { justify-content: space-between; } 4830} 4831.WelcomeDesktop-textContainer-f3142 { justify-content: center; flex-direction: column; align-items: center; gap: var(--spacings-s16); display: flex; } 4832.WelcomeDesktop-title-b6374 { font-weight: 600; color: var(--text-colors-base); font-size: var(--typography-t11-font-size); line-height: 1.2; } 4833@media screen and (max-width: 767px) { 4834 .WelcomeDesktop-title-b6374 { font-size: var(--typography-t8-font-size); } 4835} 4836.WelcomeDesktop-description-3e7db { margin: var(--spacings-s0) var(--spacings-s0) var(--spacings-s8); font-weight: 500; color: var(--text-colors-base); font-size: var(--typography-t6-font-size); line-height: var(--typography-t6-line-height); max-width: 540px; } 4837.WelcomeDesktop-description-3e7db a { color: var(--checkout-accent); font-weight: 600; cursor: pointer; } 4838@media screen and (max-width: 767px) { 4839 .WelcomeDesktop-description-3e7db { font-size: var(--typography-t5-font-size); } 4840} 4841.WelcomeDesktop-note-a6b38 { margin-bottom: var(--spacings-s8); margin-top: var(--spacings-s32); } 4842.WelcomeDesktop-confetti-7c696 { position: absolute; z-index: 0; inset: 0px; } 4843.WelcomeDesktop-imageWrapper-6a7a6 { justify-content: center; align-items: center; margin-bottom: -24px; display: flex; } 4844.WelcomeDesktop-imageWrapper-6a7a6 img { width: auto; height: 200px; } 4845.WelcomeDesktop-cta-d2dd2 { min-width: 320px; } 4846.WelcomeDesktop-image-cb9eb { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } 4847.WelcomeDesktop-hidden-d1b89 { display: none; } 4848.WelcomeDesktop-ctaContainer-ba8c3 { gap: var(--spacings-s12); display: flex; flex-direction: column; align-items: center; } 4849.TrialSkipWelcome-container-78af7 { display: flex; align-items: center; justify-content: center; height: 100%; overflow: hidden; width: 100%; position: relative; } 4850.TrialSkipWelcome-content-0f1e1 { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: var(--spacings-s16); z-index: 1; padding-right: ; padding-bottom: ; padding-left: ; width: min(100%, 514px); padding-top: var(--spacings-s24); } 4851.TrialSkipWelcome-mainCta-ab585 { min-width: min(378px, 100%); } 4852.TrialSkipWelcome-confetti-66574 { position: absolute; scale: 1.5; inset: 0px; } 4853@media (orientation: portrait) { 4854 .TrialSkipWelcome-confetti-66574 { scale: 3; } 4855} 4856.TrialSkipWelcome-image-5ed17 { width: 200px; height: 200px; scale: 1.55; } 4857.TrialSkipWelcome-toggle-a4e1f { width: min(100%, 378px); } 4858.TrialSkipWelcome-oldPrice-22fc9 { margin-right: var(--spacings-s4); display: inline-block; color: var(--text-colors-tint-1); } 4859.TrialSkipWelcome-title-514f6 { font-size: var(--typography-t9-font-size); line-height: var(--typography-t9-line-height); } 4860@media screen and (max-width: 766px) { 4861 .TrialSkipWelcome-title-514f6 { font-size: var(--typography-t7-font-size); line-height: var(--typography-t7-line-height); } 4862} 4863@media screen and (max-width: 766px) { 4864 .TrialSkipWelcome-description-87a99 br { display: none; } 4865} 4866.TrialSkipWelcome-emptySpace-cc278 { flex-grow: 1; display: none; } 4867@media screen and (max-width: 766px) { 4868 .TrialSkipWelcome-emptySpace-cc278 { display: block; } 4869} 4870.TrialSkipWelcome-price-905a8 { align-self: center; } 4871.PowerBadge-root-95210 { padding: 1px var(--spacings-s4) var(--spacings-s0); color: var(--absolute-white-colors-base-default); font-weight: 600; background-image: linear-gradient(315deg, rgb(38, 93, 174) 14.64%, rgb(34, 175, 185) 51.75%); font-size: var(--typography-t4-font-size); display: inline-block; border-radius: 12px; line-height: 23px; width: 100%; } 4872.PlanComparison-container-2def4 { padding: var(--spacings-s32) var(--spacings-s4) var(--spacings-s8) var(--spacings-s16); background-color: var(--positive-colors-base-default); height: 100%; } 4873.PlanComparison-container-2def4.PlanComparison-tierPro-bd1ca { background-image: linear-gradient(220deg, rgba(0, 0, 0, 0) 47.32%, rgb(90, 0, 238) 133.96%); } 4874.PlanComparison-container-2def4.PlanComparison-tierPlus-b248b { background-image: linear-gradient(220deg, rgba(0, 0, 0, 0) 47.32%, rgb(229, 67, 170) 133.96%); } 4875.PlanComparison-container-2def4.PlanComparison-tierPower-f81f1 { background-image: linear-gradient(220deg, rgba(0, 0, 0, 0) 47.32%, rgb(34, 175, 185) 133.96%); } 4876.PlanComparison-container-2def4.PlanComparison-inline-4d74e { background-image: none; background-color: transparent; } 4877.PlanComparison-content-026b1 { position: relative; padding-bottom: var(--spacings-s8); } 4878.PlanComparison-content-026b1::before { border-radius: 28px; position: absolute; display: block; width: 56px; margin: auto; content: ""; opacity: 0.1; z-index: 0; bottom: 0px; right: var(--comparison-highlight-right, 0); top: 0px; } 4879.PlanComparison-tierPro-bd1ca .PlanComparison-content-026b1::before { background-image: var(--gradients-monetization-pro); } 4880.PlanComparison-tierPro-bd1ca .PlanComparison-active-ea61b { color: var(--monetization-pro-colors-base-default); } 4881.PlanComparison-tierPro-bd1ca .PlanComparison-activeIcon-af3cb { stroke: var(--monetization-pro-colors-base-default); } 4882.PlanComparison-tierPlus-b248b .PlanComparison-content-026b1::before { background-image: var(--gradients-monetization-plus); } 4883.PlanComparison-tierPlus-b248b .PlanComparison-active-ea61b { color: var(--primary-colors-base-default); } 4884.PlanComparison-tierPlus-b248b .PlanComparison-activeIcon-af3cb { stroke: var(--primary-colors-base-default); } 4885.PlanComparison-tierPower-f81f1 .PlanComparison-content-026b1::before { background-image: linear-gradient(315deg, rgb(38, 93, 174) 14.64%, rgb(34, 175, 185) 51.75%); } 4886.PlanComparison-tierPower-f81f1 .PlanComparison-active-ea61b { color: var(--monetization-ultra-colors-base-default); } 4887.PlanComparison-tierPower-f81f1 .PlanComparison-activeIcon-af3cb { stroke: var(--monetization-ultra-colors-base-default); } 4888.PlanComparison-title-437b9 { font-weight: 700; margin-bottom: var(--spacings-s16); font-size: var(--typography-t6-font-size); color: var(--positive-colors-text-default); text-align: center; line-height: 1.4; } 4889.PlanComparison-featuresList-21f74 > li { height: var(--comparison-row-height); font-weight: 500; font-size: var(--typography-t5-font-size); margin-top: var(--spacings-s2); color: var(--positive-colors-text-default); align-items: center; display: flex; line-height: 1.2; } 4890.PlanComparison-featureTitle-3b52b { flex-grow: 1; } 4891.PlanComparison-col-ec5d5 { justify-content: center; align-items: center; display: flex; width: 56px; flex-shrink: 0; flex-grow: 0; } 4892.PlanComparison-header-dabb6 { font-weight: 600; justify-content: flex-end; margin-bottom: var(--spacings-s4); font-size: var(--typography-t4-font-size); color: var(--positive-colors-text-default); align-items: center; text-align: center; display: flex; } 4893.PlanComparison-featureTitleContent-d0584 { display: flex; align-items: center; } 4894.PlanComparison-featureTitleContent-d0584 > div { height: var(--spacings-s24); width: var(--spacings-s24); margin-left: var(--spacings-s8); } 4895.PlanComparison-icon-85bcd { stroke: var(--text-colors-tint-3); stroke-width: 2px; } 4896.PlanComparison-activeIcon-af3cb { stroke-width: 2px; } 4897.PlanComparison-notAvailableIcon-3e601 { fill: var(--text-colors-tint-3); } 4898.PlanComparison-infoIcon-dfbc4 { fill: var(--text-colors-tint-1); height: var(--spacings-s24); width: var(--spacings-s24); } 4899.PlanComparison-tooltip-210e8 { font-weight: 500; font-size: var(--typography-t4-font-size); text-align: center; max-width: 188px; } 4900.TierFeaturesList-root-4419b { font-size: var(--typography-t5-font-size); color: var(--text-colors-base); line-height: 1.5; } 4901.TierFeaturesList-title-29be1 { font-weight: 600; margin-bottom: var(--spacings-s16); } 4902.TierFeaturesList-list-214e9 { margin-bottom: var(--spacings-s16); list-style: none; } 4903.TierFeaturesList-listItem-b97ee { grid-template-columns: 24px 1fr; margin-bottom: var(--spacings-s16); gap: var(--spacings-s12); display: grid; } 4904.TierFeaturesList-icon-2baa2 { background: var(--checkout-gradient); border-radius: 50%; margin: var(--spacings-s2); height: 20px;
4904 width: 20px; } 4905.TierFeaturesList-icon-2baa2 path { fill: var(--absolute-white-colors-base-default); transform-origin: center center; scale: 1.1; } 4906.TierFeatures-root-ac527 { background: var(--checkout-features-gradient); padding: var(--spacings-s32); color: var(--text-colors-base); height: 100%; } 4907.TierFeatures-title-71aec { margin: var(--spacings-s0) auto var(--spacings-s24); font-weight: 600; font-size: var(--typography-t6-font-size); text-align: center; line-height: 1.4; max-width: 320px; } 4908.TierFeatures-numbersSection-7986e { margin: var(--spacings-s0) auto var(--spacings-s32); grid-template-columns: 1fr 1fr; text-align: center; gap: var(--spacings-s16); display: grid; max-width: 320px; width: 100%; } 4909.TierFeatures-numbersSectionContainer-0562a { padding: var(--spacings-s8) var(--spacings-s12); background-color: rgb(255, 249, 249); border-radius: var(--corner-radius-r12); } 4910.TierFeatures-numbersSectionTitle-34132 { color: var(--checkout-accent); font-weight: 600; margin-bottom: var(--spacings-s4); line-height: 1.2; font-size: 34px; } 4911.TierFeatures-numbersSectionDescription-468b4 { color: var(--absolute-black-colors-base-default); font-weight: 500; font-size: var(--typography-t4-font-size); line-height: 1.42; } 4912.Awards-imageContainer-1116e { background-repeat: no-repeat; background-position: center center; background-size: contain; width: 100%; height: 82px; } 4913html[class*="dark"] .Awards-imageContainer-1116e { background-image: url("https://pastatic.picsart.com/cms-pastatic/1a1b6f08-f96a-4ac8-81c7-7e746ddf6c2b.png"); } 4914html[class*="light"] .Awards-imageContainer-1116e { background-image: url("https://pastatic.picsart.com/cms-pastatic/e39ee417-10bc-4ba0-8705-144fdf8e0112.png"); } 4915@keyframes RundownIcon-spin-5f5c2 { 4916 0% { --angle: 0deg; } 4917 100% { --angle: 360deg; } 4918} 4919@keyframes RundownIcon-zoomInOut-63b7a { 4920 0% { transform: scale(1); } 4921 50% { transform: scale(1.2); } 4922 100% { transform: scale(1); } 4923} 4924.RundownIcon-iconContainer-473c2 { display: flex; align-items: center; justify-content: center; flex-shrink: 0; flex-grow: 0; width: 42px; height: 42px; margin-right: var(--spacings-s12); border-radius: var(--corner-radius-circle); border: 2px solid var(--checkout-trial-rundown-active); background-color: var(--background-colors-tint-2); box-sizing: border-box; } 4925.RundownIcon-iconContainerAnimated-ab75c { fill: var(--checkout-trial-rundown-active); position: relative; } 4926.RundownIcon-iconContainerAnimated-ab75c::after { content: ""; position: absolute; inset: -1px; border-radius: var(--corner-radius-circle); background: conic-gradient(transparent 0deg var(--angle),var(--background-colors-tint-2) var(--angle) 360deg); animation-duration: 0.7s; animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: forwards; animation-play-state: running; animation-name: RundownIcon-spin-5f5c2; animation-timeline: auto; animation-range: normal; animation-delay: var(--rundown-animation-delay, 0ms); } 4927.RundownIcon-iconContainerFilled-43171 { background-color: var(--checkout-trial-rundown-active); z-index: 1; } 4928.RundownIcon-iconContainerFilled-43171 svg { fill: var(--background-colors-tint-2); } 4929.RundownIcon-iconAnimated-946e5 { animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: forwards; animation-play-state: running; animation-name: RundownIcon-zoomInOut-63b7a; animation-timeline: auto; animation-range: normal; animation-delay: calc(var(--rundown-animation-delay, 0ms) + .7s); } 4930.RundownIcon-icon-1a85f { width: 24px; height: 24px; fill: var(--checkout-trial-rundown-active); } 4931.TrialRundown-containerWrapper-f7e35 { height: 100%; width: 100%; background-color: var(--background-colors-tint-2); display: flex; align-items: center; justify-content: center; } 4932.TrialRundown-container-3335f { height: 100%; padding: var(--spacings-s40) var(--spacings-s32) var(--spacings-s32); display: flex; flex-direction: column; align-items: center; max-width: 456px; justify-content: center; } 4933.TrialRundown-gap-cb0db { height: 40px; } 4934.TrialRundown-title-5fab5 { font-weight: 700; font-size: var(--typography-t6-font-size); line-height: 1.4; text-align: center; color: var(--text-colors-base); flex-basis: 52px; } 4935.TrialRundown-steps-9bc15 { position: relative; flex-basis: 260px; display: flex; flex-direction: column; justify-content: space-between; } 4936.TrialRundown-steps-9bc15 .TrialRundown-section-a71cc:not(:last-child) { margin-bottom: var(--spacings-s8); }
4937@keyframes TrialRundown-progressBarFill-c75cb { 4938 0% { height: 0%; } 4939 22% { height: 0%; } 4940 50% { height: 50%; } 4941 72% { height: 50%; } 4942 100% { height: 100%; } 4943} 4944@keyframes TrialRundown-sectionTitleFill-eb559 { 4945 0% { color: var(--checkout-trial-rundown-active); opacity: 0.4; } 4946 100% { color: var(--text-colors-base); opacity: 1; } 4947} 4948@keyframes TrialRundown-sectionDescriptionFill-df140 { 4949 0% { color: var(--checkout-trial-rundown-active); opacity: 0.4; } 4950 100% { color: var(--text-colors-tint-1); opacity: 1; } 4951} 4952.TrialRundown-progressBar-763cd { position: absolute; width: 4px; top: 0px; bottom: 0px; left: 19px; z-index: 0; background-color: var(--background-colors-tint-3); } 4953.TrialRundown-progressBar-763cd::after { content: ""; display: block; width: 100%; height: 0%; background-color: var(--checkout-trial-rundown-active); } 4954.TrialRundown-progressBarAnimated-ae25d::after { animation: 3.6s ease-in-out 0s 1 normal forwards running TrialRundown-progressBarFill-c75cb; } 4955.TrialRundown-section-a71cc { display: flex; z-index: 1; } 4956.TrialRundown-section-a71cc:last-child { background-color: var(--background-colors-tint-2); } 4957.TrialRundown-sectionTitle-db589 { font-weight: 600; font-size: var(--typography-t5-font-size); line-height: 1.5; margin-bottom: 2px; } 4958.TrialRundown-sectionTitleAnimated-9875d { color: var(--checkout-trial-rundown-active); opacity: 0.4; animation: 0.7s ease-out 0s 1 normal forwards running TrialRundown-sectionTitleFill-eb559; } 4959.TrialRundown-sectionDescription-989de { font-weight: 500; font-size: var(--typography-t4-font-size); line-height: 1.42; margin: var(--spacings-s0); } 4960.TrialRundown-sectionDescriptionAnimated-8afee { color: var(--checkout-trial-rundown-active); opacity: 0.4; animation: 0.7s ease-out 0s 1 normal forwards running TrialRundown-sectionDescriptionFill-df140; } 4961.TrialRundown-awards-acd79 { margin-right: calc(-1 * var(--spacings-s16)); margin-left: calc(-1 * var(--spacings-s16)); width: calc(100% + var(--spacings-s32)); } 4962.DiscountView-container-a73e1 { background-color: var(--background-colors-tint-2); place-content: center; position: relative; display: grid; height: 100%; overflow: hidden; } 4963.DiscountView-video-e9f53 { transform: translate(-50%, -50%); position: absolute; height: 900px; width: 900px; left: 50%; top: 50%; } 4964.DiscountView-videoSmall-bca8e { height: 600px; width: 450px; } 4965.OrderSummary-root-50d49 { position: relative; display: flex; width: 100%; height: 100%; background-color: var(--background-colors-tint-1); overflow: hidden; } 4966.OrderSummary-glow-7acf8 { position: absolute; inset: 0px; pointer-events: none; } 4967.OrderSummary-content-d21de { position: relative; z-index: 1; flex: 1 1 0%; display: flex; flex-direction: column; padding: var(--spacings-s16) var(--spacings-s32) var(--spacings-s32); box-sizing: border-box; } 4968.OrderSummary-object-ee283 { width: 100%; flex: 0 1 250px; max-height: 250px; min-height: 200px; margin-top: var(--spacings-s8); } 4969.OrderSummary-badgeRow-81c5a { display: flex; margin-top: var(--spacings-s8); } 4970.OrderSummary-badge-1c685.OrderSummary-badge-1c685 { background: var(--order-summary-accent); } 4971.OrderSummary-title-83463 { margin-top: var(--spacings-s12); } 4972.OrderSummary-notes-dca06 { margin-top: var(--spacings-s4); display: flex; flex-direction: column; gap: var(--spacings-s2); } 4973.OrderSummary-credits-d43a7 { margin-top: var(--spacings-s16); } 4974.OrderSummary-seats-dea14 { margin-top: var(--spacings-s24); padding-top: var(--spacings-s16); border-top: 1px solid var(--background-colors-border); } 4975.OrderSummary-taxesAfterSeats-717cc.OrderSummary-taxesAfterSeats-717cc { border-top-width: medium; border-top-style: none; border-top-color: currentcolor; margin-top: var(--spacings-s12); padding-top: 0px; } 4976.Carousel-carousel-7dbd7 { position: relative; height: 100%; } 4977.Carousel-carouselContainer-7b9dc { overflow: hidden; height: 100%; width: 100%; } 4978.Carousel-carouselWrapper-6938a { display: flex; flex-shrink: 0; height: 100%; width: 100%; } 4979.Carousel-carouselWrapper-6938a.Carousel-animated-3c03c { transition: transform 0.3s; } 4980.Carousel-carouselSlide-fa9b6 { height: 100%; width: 100%; flex-shrink: 0; } 4981.Carousel-dots-58632 { transform: translate(-50%); justify-content: center; bottom: var(--spacings-s12); align-items: center; position: absolute; display: flex; left: 50%; } 4982.Carousel-dot-bb7a3 { background-color: var(--background-colors-tint-3); margin: var(--spacings-s4); height: var(--spacings-s8); width: var(--spacings-s8); border-radius: 50%; cursor: pointer; } 4983.Carousel-activeDot-3f7d4 { background-color: var(--primary-colors-base-active); } 4984.VideoPlayer-root-eb8ee { width: 100%; height: 100%; position: relative; } 4985.VideoPlayer-root-eb8ee.full { padding-top: 100%; } 4986.VideoPlayer-root-eb8ee.aspect-ratio-16-9 { padding-top: 56.25%; } 4987.VideoPlayer-root-eb8ee.aspect-ratio-4-3 { padding-top: 75%; } 4988@media (hover: hover) { 4989 .VideoPlayer-root-eb8ee:hover >
4989 .VideoPlayer-controls-5cd9a { display: block; } 4990} 4991.VideoPlayer-player-468c4 { inset: 0px; margin: auto; display: block; position: absolute; width: 100%; height: 100%; } 4992.VideoPlayer-controls-5cd9a { display: none; } 4993.VideoPlayer-control-0f716 { inset: 0px; margin: auto; display: block; position: absolute; width: 74px; height: 74px; cursor: pointer; } 4994.VideoPlayer-icon-b0a49 { display: block; width: 100%; height: 100%; } 4995.LayoutMedia-creative-cbb3b { display: block; width: 100%; height: 100%; object-fit: cover; } 4996.Layout-root-a8c26 { position: relative; display: flex; flex-direction: row-reverse; align-items: stretch; width: 1100px; height: 790px; max-height: 90vh; padding: var(--spacings-s0); max-width: 100%; } 4997.Layout-root-a8c26.Layout-expanded-565d9 { width: 1300px; height: 90vh; } 4998@media screen and (max-width: 767px) { 4999 .Layout-root-a8c26, .Layout-root-a8c26.Layout-expanded-565d9 { height: 100%; } 5000} 5001.Layout-content-acdb3 { width: 50%; align-items: stretch; position: relative; overflow: auto; display: flex; flex-grow: 1; scrollbar-width: none; } 5002.Layout-content-acdb3::-webkit-scrollbar { display: none; } 5003.Layout-content-acdb3.Layout-flushMedia-a2e3e { width: calc(100% - 460px); } 5004.Layout-content-acdb3.Layout-noMedia-7784d { width: 100%; } 5005.Layout-mediaWrapper-ff37d { padding: var(--spacings-s24); justify-content: stretch; flex-direction: column; position: relative; display: flex; width: 50%; flex-grow: 1; flex-shrink: 0; } 5006.Layout-mediaWrapper-ff37d.Layout-flushMedia-a2e3e { padding: var(--spacings-s0); width: 460px; flex-grow: 0; } 5007@media screen and (max-width: 767px) { 5008 .Layout-mediaWrapper-ff37d { display: none; } 5009} 5010.Layout-media-a4c63 { border-radius: var(--corner-radius-r12); overflow: hidden; height: 100%; flex-grow: 1; } 5011.Layout-media-a4c63.Layout-flushMedia-a2e3e { border-radius: 0px; } 5012.Layout-loader-3e8e7 { max-width: 100%; width: auto; } 5013.Layout-backIconButton-8d993 { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: var(--background-colors-transparent); border-radius: var(--corner-radius-circle); padding: var(--spacings-s0); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; position: absolute; left: 8px; top: 8px; cursor: pointer; } 5014.Layout-backIcon-bbc2a { fill: var(--background-colors-transparent); } 5015.StepFooter-stepperContent-12772 { padding-left: var(--spacings-s40); padding-right: var(--spacings-s40); } 5016@media screen and (max-width: 766px) { 5017 .StepFooter-stepperContent-12772 { padding-left: var(--spacings-s16); padding-right: var(--spacings-s16); } 5018} 5019.StepFooter-footerDescription-ab531 { padding-top: var(--spacings-s16); margin-bottom: -4px; } 5020.StepFooter-footerDefaultButtonContainer-fbe84 { display: flex; align-items: center; padding-top: var(--spacings-s0); width: 100%; padding-bottom: var(--spacings-s16); } 5021.StepFooter-footer-75e02 { display: flex; align-items: center; padding-top: var(--spacings-s16); width: 100%; flex-direction: column; gap: var(--spacings-s12); } 5022.CheckoutViewContentLayout-root-bd1a1 { display: flex; flex-direction: column; width: 100%; padding-bottom: var(--spacings-s0); } 5023.CheckoutViewContentLayout-tabsContainer-85024 { padding-left: var(--spacings-s40); padding-right: var(--spacings-s40); } 5024@media screen and (max-width: 766px) { 5025 .CheckoutViewContentLayout-tabsContainer-85024 { padding-left: var(--spacings-s16); padding-right: var(--spacings-s16); } 5026} 5027.CheckoutViewContentLayout-tabsContainer-85024 { padding-top: var(--spacings-s40); padding-bottom: var(--spacings-s0); margin-bottom: var(--spacings-s24); } 5028.CheckoutViewContentLayout-tabs-699ba { border: 1px solid var(--control-colors-button-background-active); width: 100%; } 5029.CheckoutViewContentLayout-content-bcbb9 { overflow: auto; flex-grow: 1; padding-left: var(--spacings-s40); padding-right: var(--spacings-s40); } 5030@media screen and (max-width: 766px) { 5031 .CheckoutViewContentLayout-content-bcbb9 { padding-left: var(--spacings-s16); padding-right: var(--spacings-s16); } 5032} 5033.CheckoutViewContentLayout-content-bcbb9 { padding-top: var(--spacings-s40); padding-bottom: var(--spacings-s0); } 5034.CheckoutViewContentLayout-content-bcbb9.CheckoutViewContentLayout-withSegments-33b5e { padding-top: var(--spacings-s0); } 5035.CheckoutStepper-container-652d6 { border-radius: var(--corner-radius-r16); overflow: hidden; max-width: 100%; height: 100%; } 5036.CheckoutStepper-containerCompact-23449 { max-width: 100%; } 5037.CheckoutStepper-hidden-7f7f6 { display: none; } 5038.CheckoutStepper-checkoutButtonBack-92def { margin-right: var(--spacings-s8); flex-shrink: 0; } 5039.CheckoutStepper-checkoutStepperProgress-52bfb { margin: -12px var(--spacings-s0) var(--spacings-s12) -6px; } 5040.StepperProgress-wrapper-35683 { display: flex; position: relative; width: max-content; } 5041.StepperProgress-wrapper-35683::before, .StepperProgress-wrapper-35683::after { content: ""; display: block; position: absolute; left: 12px; bottom: 0px; top: 0px; z-index: 0; height: 1px; margin: auto; } 5042.StepperProgress-wrapper-35683::before { width: var(--stepper-line-width); background-color: var(--background-colors-tint-3); } 5043.StepperProgress-wrapper-35683::after { width: var(--stepper-progress-width); background-color: var(--stepper-active-color, var(--checkout-accent)); } 5044.StepperProgress-step-2b994 { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: var(--corner-radius-circle); cursor: pointer; flex-shrink: 0; flex-grow: 0; padding: var(--spacings-s0); z-index: 2; } 5045.StepperProgress-step-2b994::after { content: ""; display: block; width: 12px; height: 12px; background-color: var(--stepper-inactive-color, var(--checkout-modal-background-color, #ffffff)); border: 1px solid var(--background-colors-tint-3); border-radius: var(--corner-radius-circle); } 5046.StepperProgress-step-2b994 + .StepperProgress-step-2b994 { margin-left: 4px; } 5047.StepperProgress-active-2dfa9::before { background-color: var(--stepper-active-color, var(--checkout-accent)); } 5048.StepperProgress-active-2dfa9::after { background-color: var(--stepper-active-color, var(--checkout-accent)); border-color: var(--stepper-active-color, var(--checkout-accent)); } 5049[data-checkout-tier] .grecaptcha-badge { visibility: hidden; } 5050.CheckoutModal-root-3b422 { height: 100%; } 5051.CheckoutObject3D-root-31b2c { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; } 5052</style> 5053 <style data-prerender-css data-original-href="https://6f306cef61ba7a422fdcb7b25b91c10fd31af00d.miniapps-webapps.picsart.com/assets/entry-Gbngg0aW.css"> 5054@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5055@layer ds-atoms { 5056 @keyframes toaster-animate-center { 5057 0% { opacity: 0; transform: translate(0px) scale(1); } 5058 100% { opacity: var(--final-opacity, 1); } 5059} 5060 @keyframes toaster-animate-left { 5061 0% { opacity: 0; transform: translate(-20px) scale(1); } 5062 100% { opacity: var(--final-opacity, 1); } 5063} 5064 @keyframes toaster-animate-right { 5065 0% { opacity: 0; transform: translate(20px) scale(1); } 5066 100% { opacity: var(--final-opacity, 1); } 5067} 5068 .toaster { display: flex; flex-direction: column; justify-content: center; gap: var(--spacings-s12); width: 100%; max-width: var(--toaster-width); position: fixed; z-index: var(--toaster-z-index); list-style-type: none; color: var(--text-colors-base); height: max(0px,var(--item-height) + max(0,var(--total) - 1) * 10px); top: var(--toaster-top); bottom: var(--toaster-bottom); left: var(--toaster-left); right: var(--toaster-right); transform: var(--toaster-transform); } 5069 .toaster__item { opacity: 0; position: absolute; left: 0px; right: 0px; width: 100%;
5069 top: var(--toaster-item-top); bottom: var(--toaster-item-bottom); transform-origin: var(--toaster-item-transform-origin); z-index: var(--index); animation-duration: var(--timings-default); animation-timing-function: var(--easings-ease); animation-fill-mode: forwards; transition: transform var(--timings-default) var(--easings-ease),opacity var(--timings-default) var(--easings-ease); --scale-factor: calc(1 - var(--reverse-index) * var(--scale-step, .03)); --older-offset: calc(var(--reverse-index) * .2px * var(--direction, 1) * -1); --translate-y: calc(var(--index) * 6px * var(--direction, 1) + var(--older-offset)); --translate-x: calc(var(--index) * 6px * var(--direction-x, 0)); --final-opacity: .6; transform: translate(var(--translate-x),var(--translate-y)) scale(var(--scale-factor)); } 5070 .toaster__item:last-child { --final-opacity: 1; } 5071 .toaster__item--animate-center { animation-name: toaster-animate-center; } 5072 .toaster__item--animate-left { animation-name: toaster-animate-left; } 5073 .toaster__item--animate-right { animation-name: toaster-animate-right; } 5074} 5075@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5076@layer ds-atoms { 5077 .snackbar { display: inline-flex; align-items: center; width: 100%; border-radius: var(--spacings-s12); min-height: 48px; gap: var(--spacings-s4); padding: var(--spacings-s8); box-shadow: var(--shadows-tint-1); } 5078 .snackbar--information { background-color: var(--information-colors-base-default); } 5079 .snackbar--error { background-color: var(--error-colors-base-default); } 5080 .snackbar--success { background-color: var(--success-colors-base-default); } 5081 .snackbar--warning { background-color: var(--warning-colors-base-default); } 5082 .snackbar--premium { background-color: var(--monetization-ultra-colors-base-default); } 5083 .snackbar__button-no-handler { pointer-events: none; } 5084 .snackbar__close-button { margin-inline-start: auto; } 5085 .snackbar__text { word-break: break-word; min-width: 0px; } 5086 .snackbar--information .snackbar__text { color: var(--information-colors-text-default); } 5087 .snackbar--error .snackbar__text { color: var(--error-colors-text-default); } 5088 .snackbar--success .snackbar__text { color: var(--success-colors-text-default); } 5089 .snackbar--warning .snackbar__text { color: var(--warning-colors-text-default); } 5090 .snackbar--premium .snackbar__text { color: var(--monetization-ultra-colors-text-default); } 5091} 5092@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5093@layer ds-atoms { 5094 .button { display: inline-flex; vertical-align: top; align-items: center; justify-content: center; max-width: 100%; transition-property: background-color, border, color; transition-timing-function: var(--easings-ease); transition-duration: var(--timings-default); } 5095 .button--large { height: 40px; padding-block: var(--spacings-s10); padding-inline: var(--spacings-s10); border-radius: var(--corner-radius-r20); column-gap: var(--spacings-s2); font-weight: 600; font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); } 5096 .button--small { height: 32px; padding-block: var(--spacings-s6); padding-inline: var(--spacings-s6); border-radius: var(--corner-radius-r16); column-gap: var(--spacings-s2); font-weight: 600; font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); } 5097 .button--outline { border-style: solid; border-width: 1px; } 5098 .button--outline.button--small { border-width: 1px; } 5099 .button--no-border { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; } 5100 .button--center-icon { padding: 0px; font-size: 0px; border-radius: var(--corner-radius-circle); } 5101 .button--center-icon.button--large:not(.button--center-icon-full-width) { width: 40px; min-width: 40px; } 5102 .button--center-icon.button--small:not(.button--center-icon-full-width) { width: 32px; min-width: 32px; } 5103 .button--center-icon-full-width.button--large { border-radius: var(--corner-radius-r20); } 5104 .button--center-icon-full-width.button--small { border-radius: var(--corner-radius-r16); } 5105 .button--full-width { width: 100%; } 5106 .button--skin-primary.button--default-state { background-color: var(--primary-colors-base-default); color: var(--primary-colors-text-default); } 5107 .button--skin-primary.button--interactive:hover, .button--skin-primary.button--interactive:active { background-color: var(--primary-colors-base-action); color: var(--primary-colors-text-action); } 5108 .button--skin-primary.button--active-state { background-color: var(--primary-colors-base-active); color: var(--primary-colors-text-active); } 5109 .button--skin-primary.button--active-interactive:hover, .button--skin-primary.button--active-interactive:active { background-color: var(--primary-colors-base-active-action); color: var(--primary-colors-text-action); } 5110 .button--skin-primary.button--loading .button__loading-icon { color: var(--primary-colors-text-default); } 5111 .button--skin-primary.button--outline.button--default-state { background-color: transparent; border-color: var(--primary-colors-base-default); color: var(--primary-colors-base-default); } 5112 .button--skin-primary.button--outline.button--interactive:hover, .button--skin-primary.button--outline.button--interactive:active { background-color: transparent; border-color: var(--primary-colors-base-action); color: var(--primary-colors-base-action); } 5113 .button--skin-primary.button--outline.button--active-state { background-color: transparent; border-color: var(--primary-colors-base-active); color: var(--primary-colors-base-active); } 5114 .button--skin-primary.button--outline.button--active-interactive:hover, .button--skin-primary.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--primary-colors-base-active-action); color: var(--primary-colors-base-active-action); } 5115 .button--skin-primary.button--outline.button--loading .button__loading-icon { color: var(--primary-colors-base-default); } 5116 .button--skin-primary.button--text.button--default-state { background-color: transparent; color: var(--primary-colors-base-default); } 5117 .button--skin-primary.button--text.button--interactive:hover, .button--skin-primary.button--text.button--interactive:active { background-color: transparent; color: var(--primary-colors-base-action); } 5118 .button--skin-primary.button--text.button--active-state { background-color: transparent; color: var(--primary-colors-base-active); } 5119 .button--skin-primary.button--text.button--active-interactive:hover, .button--skin-primary.button--text.button--active-interactive:active { background-color: transparent; color: var(--primary-colors-base-active-action); } 5120 .button--skin-primary.button--text.button--loading .button__loading-icon { color: var(--primary-colors-base-default); } 5121 .button--skin-neutral.button--default-state { background-color: var(--neutral-colors-base-default); color: var(--neutral-colors-text-default); } 5122 .button--skin-neutral.button--interactive:hover, .button--skin-neutral.button--interactive:active { background-color: var(--neutral-colors-base-action); color: var(--neutral-colors-text-action); } 5123 .button--skin-neutral.button--active-state { background-color: var(--neutral-colors-base-active); color: var(--neutral-colors-text-active); } 5124 .button--skin-neutral.button--active-interactive:hover, .button--skin-neutral.button--active-interactive:active { background-color: var(--neutral-colors-base-active-action); color: var(--neutral-colors-text-action); } 5125 .button--skin-neutral.button--loading .button__loading-icon { color: var(--neutral-colors-text-default); } 5126 .button--skin-neutral.button--outline.button--default-state { background-color: transparent; border-color: var(--neutral-colors-base-default); color: var(--neutral-colors-base-default); } 5127 .button--skin-neutral.button--outline.button--interactive:hover, .button--skin-neutral.button--outline.button--interactive:active { background-color: transparent; border-color: var(--neutral-colors-base-action); color: var(--neutral-colors-base-action); } 5128 .button--skin-neutral.button--outline.button--active-state { background-color: transparent; border-color: var(--neutral-colors-base-active); color: var(--neutral-colors-base-active); } 5129 .button--skin-neutral.button--outline.button--active-interactive:hover, .button--skin-neutral.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--neutral-colors-base-active-action); color: var(--neutral-colors-base-active-action); } 5130 .button--skin-neutral.button--outline.button--loading .button__loading-icon { color: var(--neutral-colors-base-default); } 5131 .button--skin-neutral.button--text.button--default-state { background-color: transparent; color: var(--neutral-colors-base-default); } 5132 .button--skin-neutral.button--text.button--interactive:hover, .button--skin-neutral.button--text.button--interactive:active { background-color: transparent; color: var(--neutral-colors-base-action); } 5133 .button--skin-neutral.button--text.button--active-state { background-color: transparent; color: var(--neutral-colors-base-active); } 5134 .button--skin-neutral.button--text.button--active-interactive:hover, .button--skin-neutral.button--text.button--active-interactive:active { background-color: transparent; color: var(--neutral-colors-base-active-action); } 5135 .button--skin-neutral.button--text.button--loading .button__loading-icon { color: var(--neutral-colors-base-default); } 5136 .button--skin-plus.button--default-state { background-color: var(--monetization-plus-colors-base-default); color: var(--monetization-plus-colors-text-default); } 5137 .button--skin-plus.button--interactive:hover, .button--skin-plus.button--interactive:active { background-color: var(--monetization-plus-colors-base-action); color: var(--monetization-plus-colors-text-action); } 5138 .button--skin-plus.button--active-state { background-color: var(--monetization-plus-colors-base-active); color: var(--monetization-plus-colors-text-active); } 5139 .button--skin-plus.button--active-interactive:hover, .button--skin-plus.button--active-interactive:active { background-color: var(--monetization-plus-colors-base-active-action); color: var(--monetization-plus-colors-text-action); } 5140 .button--skin-plus.button--loading .button__loading-icon { color: var(--monetization-plus-colors-text-default); } 5141 .button--skin-plus.button--outline.button--default-state { background-color: transparent; border-color: var(--monetization-plus-colors-base-default); color: var(--monetization-plus-colors-base-default); } 5142 .button--skin-plus.button--outline.button--interactive:hover, .button--skin-plus.button--outline.button--interactive:active { background-color: transparent; border-color: var(--monetization-plus-colors-base-action); color: var(--monetization-plus-colors-base-action); } 5143 .button--skin-plus.button--outline.button--active-state { background-color: transparent; border-color: var(--monetization-plus-colors-base-active); color: var(--monetization-plus-colors-base-active); } 5144 .button--skin-plus.button--outline.button--active-interactive:hover, .button--skin-plus.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--monetization-plus-colors-base-active-action); color: var(--monetization-plus-colors-base-active-action); } 5145 .button--skin-plus.button--outline.button--loading .button__loading-icon { color: var(--monetization-plus-colors-base-default); } 5146 .button--skin-plus.button--text.button--default-state { background-color: transparent; color: var(--monetization-plus-colors-base-default); } 5147 .button--skin-plus.button--text.button--interactive:hover, .button--skin-plus.button--text.button--interactive:active { background-color: transparent; color: var(--monetization-plus-colors-base-action); } 5148 .button--skin-plus.button--text.button--active-state { background-color: transparent; color: var(--monetization-plus-colors-base-active); } 5149 .button--skin-plus.button--text.button--active-interactive:hover, .button--skin-plus.button--text.button--active-interactive:active { background-color: transparent; color: var(--monetization-plus-colors-base-active-action); } 5150 .button--skin-plus.button--text.button--loading .button__loading-icon { color: var(--monetization-plus-colors-base-default); } 5151 .button--skin-pro.button--default-state { background-color: var(--monetization-pro-colors-base-default); color: var(--monetization-pro-colors-text-default); } 5152 .button--skin-pro.button--interactive:hover, .button--skin-pro.button--interactive:active { background-color: var(--monetization-pro-colors-base-action); color: var(--monetization-pro-colors-text-action); } 5153 .button--skin-pro.button--active-state { background-color: var(--monetization-pro-colors-base-active); color: var(--monetization-pro-colors-text-active); } 5154 .button--skin-pro.button--active-interactive:hover, .button--skin-pro.button--active-interactive:active { background-color: var(--monetization-pro-colors-base-active-action); color: var(--monetization-pro-colors-text-action); } 5155 .button--skin-pro.button--loading .button__loading-icon { color: var(--monetization-pro-colors-text-default); } 5156 .button--skin-pro.button--outline.button--default-state { background-color: transparent; border-color: var(--monetization-pro-colors-base-default); color: var(--monetization-pro-colors-base-default); } 5157 .button--skin-pro.button--outline.button--interactive:hover, .button--skin-pro.button--outline.button--interactive:active { background-color: transparent; border-color: var(--monetization-pro-colors-base-action); color: var(--monetization-pro-colors-base-action); } 5158 .button--skin-pro.button--outline.button--active-state { background-color: transparent; border-color: var(--monetization-pro-colors-base-active); color: var(--monetization-pro-colors-base-active); } 5159 .button--skin-pro.button--outline.button--active-interactive:hover, .button--skin-pro.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--monetization-pro-colors-base-active-action); color: var(--monetization-pro-colors-base-active-action); } 5160 .button--skin-pro.button--outline.button--loading .button__loading-icon { color: var(--monetization-pro-colors-base-default); } 5161 .button--skin-pro.button--text.button--default-state { background-color: transparent; color: var(--monetization-pro-colors-base-default); } 5162 .button--skin-pro.button--text.button--interactive:hover, .button--skin-pro.button--text.button--interactive:active { background-color: transparent; color: var(--monetization-pro-colors-base-action); } 5163 .button--skin-pro.button--text.button--active-state { background-color: transparent; color: var(--monetization-pro-colors-base-active); } 5164 .button--skin-pro.button--text.button--active-interactive:hover, .button--skin-pro.button--text.button--active-interactive:active { background-color: transparent; color: var(--monetization-pro-colors-base-active-action); } 5165 .button--skin-pro.button--text.button--loading .button__loading-icon { color: var(--monetization-pro-colors-base-default); } 5166 .button--skin-ultra.button--default-state { background-color: var(--monetization-ultra-colors-base-default); color: var(--monetization-ultra-colors-text-default); } 5167 .button--skin-ultra.button--interactive:hover, .button--skin-ultra.button--interactive:active { background-color: var(--monetization-ultra-colors-base-action); color: var(--monetization-ultra-colors-text-action); } 5168 .button--skin-ultra.button--active-state { background-color: var(--monetization-ultra-colors-base-active); color: var(--monetization-ultra-colors-text-active); } 5169 .button--skin-ultra.button--active-interactive:hover, .button--skin-ultra.button--active-interactive:active { background-color: var(--monetization-ultra-colors-base-active-action); color: var(--monetization-ultra-colors-text-action); } 5170 .button--skin-ultra.button--loading .button__loading-icon { color: var(--monetization-ultra-colors-text-default); } 5171 .button--skin-ultra.button--outline.button--default-state { background-color: transparent; border-color: var(--monetization-ultra-colors-base-default); color: var(--monetization-ultra-colors-base-default); } 5172 .button--skin-ultra.button--outline.button
5172--interactive:hover, .button--skin-ultra.button--outline.button--interactive:active { background-color: transparent; border-color: var(--monetization-ultra-colors-base-action); color: var(--monetization-ultra-colors-base-action); } 5173 .button--skin-ultra.button--outline.button--active-state { background-color: transparent; border-color: var(--monetization-ultra-colors-base-active); color: var(--monetization-ultra-colors-base-active); } 5174 .button--skin-ultra.button--outline.button--active-interactive:hover, .button--skin-ultra.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--monetization-ultra-colors-base-active-action); color: var(--monetization-ultra-colors-base-active-action); } 5175 .button--skin-ultra.button--outline.button--loading .button__loading-icon { color: var(--monetization-ultra-colors-base-default); } 5176 .button--skin-ultra.button--text.button--default-state { background-color: transparent; color: var(--monetization-ultra-colors-base-default); } 5177 .button--skin-ultra.button--text.button--interactive:hover, .button--skin-ultra.button--text.button--interactive:active { background-color: transparent; color: var(--monetization-ultra-colors-base-action); } 5178 .button--skin-ultra.button--text.button--active-state { background-color: transparent; color: var(--monetization-ultra-colors-base-active); } 5179 .button--skin-ultra.button--text.button--active-interactive:hover, .button--skin-ultra.button--text.button--active-interactive:active { background-color: transparent; color: var(--monetization-ultra-colors-base-active-action); } 5180 .button--skin-ultra.button--text.button--loading .button__loading-icon { color: var(--monetization-ultra-colors-base-default); } 5181 .button--skin-success.button--default-state { background-color: var(--success-colors-base-default); color: var(--success-colors-text-default); } 5182 .button--skin-success.button--interactive:hover, .button--skin-success.button--interactive:active { background-color: var(--success-colors-base-action); color: var(--success-colors-text-action); } 5183 .button--skin-success.button--active-state { background-color: var(--success-colors-base-active); color: var(--success-colors-text-active); } 5184 .button--skin-success.button--active-interactive:hover, .button--skin-success.button--active-interactive:active { background-color: var(--success-colors-base-active-action); color: var(--success-colors-text-action); } 5185 .button--skin-success.button--loading .button__loading-icon { color: var(--success-colors-text-default); } 5186 .button--skin-success.button--outline.button--default-state { background-color: transparent; border-color: var(--success-colors-base-default); color: var(--success-colors-base-default); } 5187 .button--skin-success.button--outline.button--interactive:hover, .button--skin-success.button--outline.button--interactive:active { background-color: transparent; border-color: var(--success-colors-base-action); color: var(--success-colors-base-action); } 5188 .button--skin-success.button--outline.button--active-state { background-color: transparent; border-color: var(--success-colors-base-active); color: var(--success-colors-base-active); } 5189 .button--skin-success.button--outline.button--active-interactive:hover, .button--skin-success.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--success-colors-base-active-action); color: var(--success-colors-base-active-action); } 5190 .button--skin-success.button--outline.button--loading .button__loading-icon { color: var(--success-colors-base-default); } 5191 .button--skin-success.button--text.button--default-state { background-color: transparent; color: var(--success-colors-base-default); } 5192 .button--skin-success.button--text.button--interactive:hover, .button--skin-success.button--text.button--interactive:active { background-color: transparent; color: var(--success-colors-base-action); } 5193 .button--skin-success.button--text.button--active-state { background-color: transparent; color: var(--success-colors-base-active); } 5194 .button--skin-success.button--text.button--active-interactive:hover, .button--skin-success.button--text.button--active-interactive:active { background-color: transparent; color: var(--success-colors-base-active-action); } 5195 .button--skin-success.button--text.button--loading .button__loading-icon { color: var(--success-colors-base-default); } 5196 .button--skin-warning.button--default-state { background-color: var(--warning-colors-base-default); color: var(--warning-colors-text-default); } 5197 .button--skin-warning.button--interactive:hover, .button--skin-warning.button--interactive:active { background-color: var(--warning-colors-base-action); color: var(--warning-colors-text-action); } 5198 .button--skin-warning.button--active-state { background-color: var(--warning-colors-base-active); color: var(--warning-colors-text-active); } 5199 .button--skin-warning.button--active-interactive:hover, .button--skin-warning.button--active-interactive:active { background-color: var(--warning-colors-base-active-action); color: var(--warning-colors-text-action); } 5200 .button--skin-warning.button--loading .button__loading-icon { color: var(--warning-colors-text-default); } 5201 .button--skin-warning.button--outline.button--default-state { background-color: transparent; border-color: var(--warning-colors-base-default); color: var(--warning-colors-base-default); } 5202 .button--skin-warning.button--outline.button--interactive:hover, .button--skin-warning.button--outline.button--interactive:active { background-color: transparent; border-color: var(--warning-colors-base-action); color: var(--warning-colors-base-action); } 5203 .button--skin-warning.button--outline.button--active-state { background-color: transparent; border-color: var(--warning-colors-base-active); color: var(--warning-colors-base-active); } 5204 .button--skin-warning.button--outline.button--active-interactive:hover, .button--skin-warning.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--warning-colors-base-active-action); color: var(--warning-colors-base-active-action); } 5205 .button--skin-warning.button--outline.button--loading .button__loading-icon { color: var(--warning-colors-base-default); } 5206 .button--skin-warning.button--text.button--default-state { background-color: transparent; color: var(--warning-colors-base-default); } 5207 .button--skin-warning.button--text.button--interactive:hover, .button--skin-warning.button--text.button--interactive:active { background-color: transparent; color: var(--warning-colors-base-action); } 5208 .button--skin-warning.button--text.button--active-state { background-color: transparent; color: var(--warning-colors-base-active); } 5209 .button--skin-warning.button--text.button--active-interactive:hover, .button--skin-warning.button--text.button--active-interactive:active { background-color: transparent; color: var(--warning-colors-base-active-action); } 5210 .button--skin-warning.button--text.button--loading .button__loading-icon { color: var(--warning-colors-base-default); } 5211 .button--skin-error.button--default-state { background-color: var(--error-colors-base-default); color: var(--error-colors-text-default); } 5212 .button--skin-error.button--interactive:hover, .button--skin-error.button--interactive:active { background-color: var(--error-colors-base-action); color: var(--error-colors-text-action); } 5213 .button--skin-error.button--active-state { background-color: var(--error-colors-base-active); color: var(--error-colors-text-active); } 5214 .button--skin-error.button--active-interactive:hover, .button--skin-error.button--active-interactive:active { background-color: var(--error-colors-base-active-action); color: var(--error-colors-text-action); } 5215 .button--skin-error.button--loading .button__loading-icon { color: var(--error-colors-text-default); } 5216 .button--skin-error.button--outline.button--default-state { background-color: transparent; border-color: var(--error-colors-base-default); color: var(--error-colors-base-default); } 5217 .button--skin-error.button--outline.button--interactive:hover, .button--skin-error.button--outline.button--interactive:active { background-color: transparent; border-color: var(--error-colors-base-action); color: var(--error-colors-base-action); } 5218 .button--skin-error.button--outline.button--active-state { background-color: transparent; border-color: var(--error-colors-base-active); color: var(--error-colors-base-active); } 5219 .button--skin-error.button--outline.button--active-interactive:hover, .button--skin-error.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--error-colors-base-active-action); color: var(--error-colors-base-active-action); } 5220 .button--skin-error.button--outline.button--loading .button__loading-icon { color: var(--error-colors-base-default); } 5221 .button--skin-error.button--text.button--default-state { background-color: transparent; color: var(--error-colors-base-default); } 5222 .button--skin-error.button--text.button--interactive:hover, .button--skin-error.button--text.button--interactive:active { background-color: transparent; color: var(--error-colors-base-action); } 5223 .button--skin-error.button--text.button--active-state { background-color: transparent; color: var(--error-colors-base-active); } 5224 .button--skin-error.button--text.button--active-interactive:hover, .button--skin-error.button--text.button--active-interactive:active { background-color: transparent; color: var(--error-colors-base-active-action); } 5225 .button--skin-error.button--text.button--loading .button__loading-icon { color: var(--error-colors-base-default); } 5226 .button--skin-information.button--default-state { background-color: var(--information-colors-base-default); color: var(--information-colors-text-default); } 5227 .button--skin-information.button--interactive:hover, .button--skin-information.button--interactive:active { background-color: var(--information-colors-base-action); color: var(--information-colors-text-action); } 5228 .button--skin-information.button--active-state { background-color: var(--information-colors-base-active); color: var(--information-colors-text-active); } 5229 .button--skin-information.button--active-interactive:hover, .button--skin-information.button--active-interactive:active { background-color: var(--information-colors-base-active-action); color: var(--information-colors-text-action); } 5230 .button--skin-information.button--loading .button__loading-icon { color: var(--information-colors-text-default); } 5231 .button--skin-information.button--outline.button--default-state { background-color: transparent; border-color: var(--information-colors-base-default); color: var(--information-colors-base-default); } 5232 .button--skin-information.button--outline.button--interactive:hover, .button--skin-information.button--outline.button--interactive:active { background-color: transparent; border-color: var(--information-colors-base-action); color: var(--information-colors-base-action); } 5233 .button--skin-information.button--outline.button--active-state { background-color: transparent; border-color: var(--information-colors-base-active); color: var(--information-colors-base-active); } 5234 .button--skin-information.button--outline.button--active-interactive:hover, .button--skin-information.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--information-colors-base-active-action); color: var(--information-colors-base-active-action); } 5235 .button--skin-information.button--outline.button--loading .button__loading-icon { color: var(--information-colors-base-default); } 5236 .button--skin-information.button--text.button--default-state { background-color: transparent; color: var(--information-colors-base-default); } 5237 .button--skin-information.button--text.button--interactive:hover, .button--skin-information.button--text.button--interactive:active { background-color: transparent; color: var(--information-colors-base-action); } 5238 .button--skin-information.button--text.button--active-state { background-color: transparent; color: var(--information-colors-base-active); } 5239 .button--skin-information.button--text.button--active-interactive:hover, .button--skin-information.button--text.button--active-interactive:active { background-color: transparent; color: var(--information-colors-base-active-action); } 5240 .button--skin-information.button--text.button--loading .button__loading-icon { color: var(--information-colors-base-default); } 5241 .button--skin-positive.button--default-state { background-color: var(--positive-colors-base-default); color: var(--positive-colors-text-default); } 5242 .button--skin-positive.button--interactive:hover, .button--skin-positive.button--interactive:active { background-color: var(--positive-colors-base-action); color: var(--positive-colors-text-action); } 5243 .button--skin-positive.button--active-state { background-color: var(--positive-colors-base-active); color: var(--positive-colors-text-active); } 5244 .button--skin-positive.button--active-interactive:hover, .button--skin-positive.button--active-interactive:active { background-color: var(--positive-colors-base-active-action); color: var(--positive-colors-text-action); } 5245 .button--skin-positive.button--loading .button__loading-icon { color: var(--positive-colors-text-default); } 5246 .button--skin-positive.button--outline.button--default-state { background-color: transparent; border-color: var(--positive-colors-base-default); color: var(--positive-colors-base-default); } 5247 .button--skin-positive.button--outline.button--interactive:hover, .button--skin-positive.button--outline.button--interactive:active { background-color: transparent; border-color: var(--positive-colors-base-action); color: var(--positive-colors-base-action); } 5248 .button--skin-positive.button--outline.button--active-state { background-color: transparent; border-color: var(--positive-colors-base-active); color: var(--positive-colors-base-active); } 5249 .button--skin-positive.button--outline.button--active-interactive:hover, .button--skin-positive.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--positive-colors-base-active-action); color: var(--positive-colors-base-active-action); } 5250 .button--skin-positive.button--outline.button--loading .button__loading-icon { color: var(--positive-colors-base-default); } 5251 .button--skin-positive.button--text.button--default-state { background-color: transparent; color: var(--positive-colors-base-default); } 5252 .button--skin-positive.button--text.button--interactive:hover, .button--skin-positive.button--text.button--interactive:active { background-color: transparent; color: var(--positive-colors-base-action); } 5253 .button--skin-positive.button--text.button--active-state { background-color: transparent; color: var(--positive-colors-base-active); } 5254 .button--skin-positive.button--text.button--active-interactive:hover, .button--skin-positive.button--text.button--active-interactive:active { background-color: transparent; color: var(--positive-colors-base-active-action); } 5255 .button--skin-positive.button--text.button--loading .button__loading-icon { color: var(--positive-colors-base-default); } 5256 .button--skin-negative.button--default-state { background-color: var(--negative-colors-base-default); color: var(--negative-colors-text-default); } 5257 .button--skin-negative.button--interactive:hover, .button--skin-negative.button--interactive:active { background-color: var(--negative-colors-base-action); color: var(--negative-colors-text-action); } 5258 .button--skin-negative.button--active-state { background-color: var(--negative-colors-base-active); color: var(--negative-colors-text-active); } 5259 .button--skin-negative.button--active-interactive:hover, .button--skin-negative.button--active-interactive:active { background-color: var(--negative-colors-base-active-action); color: var(--negative-colors-text-action); } 5260 .button--skin-negative.button--loading .button__loading-icon { color: var(--negative-colors-text-default); } 5261 .button--skin-negative.button--outline.button--default-state { background-color: transparent; border-color: var(--negative-colors-base-default); color: var(--negative-colors-base-default); } 5262 .button--skin-negative.button--outline.button--intera
5262ctive:hover, .button--skin-negative.button--outline.button--interactive:active { background-color: transparent; border-color: var(--negative-colors-base-action); color: var(--negative-colors-base-action); } 5263 .button--skin-negative.button--outline.button--active-state { background-color: transparent; border-color: var(--negative-colors-base-active); color: var(--negative-colors-base-active); } 5264 .button--skin-negative.button--outline.button--active-interactive:hover, .button--skin-negative.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--negative-colors-base-active-action); color: var(--negative-colors-base-active-action); } 5265 .button--skin-negative.button--outline.button--loading .button__loading-icon { color: var(--negative-colors-base-default); } 5266 .button--skin-negative.button--text.button--default-state { background-color: transparent; color: var(--negative-colors-base-default); } 5267 .button--skin-negative.button--text.button--interactive:hover, .button--skin-negative.button--text.button--interactive:active { background-color: transparent; color: var(--negative-colors-base-action); } 5268 .button--skin-negative.button--text.button--active-state { background-color: transparent; color: var(--negative-colors-base-active); } 5269 .button--skin-negative.button--text.button--active-interactive:hover, .button--skin-negative.button--text.button--active-interactive:active { background-color: transparent; color: var(--negative-colors-base-active-action); } 5270 .button--skin-negative.button--text.button--loading .button__loading-icon { color: var(--negative-colors-base-default); } 5271 .button--skin-black.button--default-state { background-color: var(--absolute-black-colors-base-default); color: var(--absolute-black-colors-text-default); } 5272 .button--skin-black.button--interactive:hover, .button--skin-black.button--interactive:active { background-color: var(--absolute-black-colors-base-action); color: var(--absolute-black-colors-text-action); } 5273 .button--skin-black.button--active-state { background-color: var(--absolute-black-colors-base-active); color: var(--absolute-black-colors-text-active); } 5274 .button--skin-black.button--active-interactive:hover, .button--skin-black.button--active-interactive:active { background-color: var(--absolute-black-colors-base-active-action); color: var(--absolute-black-colors-text-action); } 5275 .button--skin-black.button--loading .button__loading-icon { color: var(--absolute-black-colors-text-default); } 5276 .button--skin-black.button--outline.button--default-state { background-color: transparent; border-color: var(--absolute-black-colors-base-default); color: var(--absolute-black-colors-base-default); } 5277 .button--skin-black.button--outline.button--interactive:hover, .button--skin-black.button--outline.button--interactive:active { background-color: transparent; border-color: var(--absolute-black-colors-base-action); color: var(--absolute-black-colors-base-action); } 5278 .button--skin-black.button--outline.button--active-state { background-color: transparent; border-color: var(--absolute-black-colors-base-active); color: var(--absolute-black-colors-base-active); } 5279 .button--skin-black.button--outline.button--active-interactive:hover, .button--skin-black.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--absolute-black-colors-base-active-action); color: var(--absolute-black-colors-base-active-action); } 5280 .button--skin-black.button--outline.button--loading .button__loading-icon { color: var(--absolute-black-colors-base-default); } 5281 .button--skin-black.button--text.button--default-state { background-color: transparent; color: var(--absolute-black-colors-base-default); } 5282 .button--skin-black.button--text.button--interactive:hover, .button--skin-black.button--text.button--interactive:active { background-color: transparent; color: var(--absolute-black-colors-base-action); } 5283 .button--skin-black.button--text.button--active-state { background-color: transparent; color: var(--absolute-black-colors-base-active); } 5284 .button--skin-black.button--text.button--active-interactive:hover, .button--skin-black.button--text.button--active-interactive:active { background-color: transparent; color: var(--absolute-black-colors-base-active-action); } 5285 .button--skin-black.button--text.button--loading .button__loading-icon { color: var(--absolute-black-colors-base-default); } 5286 .button--skin-white.button--default-state { background-color: var(--absolute-white-colors-base-default); color: var(--absolute-white-colors-text-default); } 5287 .button--skin-white.button--interactive:hover, .button--skin-white.button--interactive:active { background-color: var(--absolute-white-colors-base-action); color: var(--absolute-white-colors-text-action); } 5288 .button--skin-white.button--active-state { background-color: var(--absolute-white-colors-base-active); color: var(--absolute-white-colors-text-active); } 5289 .button--skin-white.button--active-interactive:hover, .button--skin-white.button--active-interactive:active { background-color: var(--absolute-white-colors-base-active-action); color: var(--absolute-white-colors-text-action); } 5290 .button--skin-white.button--loading .button__loading-icon { color: var(--absolute-white-colors-text-default); } 5291 .button--skin-white.button--outline.button--default-state { background-color: transparent; border-color: var(--absolute-white-colors-base-default); color: var(--absolute-white-colors-base-default); } 5292 .button--skin-white.button--outline.button--interactive:hover, .button--skin-white.button--outline.button--interactive:active { background-color: transparent; border-color: var(--absolute-white-colors-base-action); color: var(--absolute-white-colors-base-action); } 5293 .button--skin-white.button--outline.button--active-state { background-color: transparent; border-color: var(--absolute-white-colors-base-active); color: var(--absolute-white-colors-base-active); } 5294 .button--skin-white.button--outline.button--active-interactive:hover, .button--skin-white.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--absolute-white-colors-base-active-action); color: var(--absolute-white-colors-base-active-action); } 5295 .button--skin-white.button--outline.button--loading .button__loading-icon { color: var(--absolute-white-colors-base-default); } 5296 .button--skin-white.button--text.button--default-state { background-color: transparent; color: var(--absolute-white-colors-base-default); } 5297 .button--skin-white.button--text.button--interactive:hover, .button--skin-white.button--text.button--interactive:active { background-color: transparent; color: var(--absolute-white-colors-base-action); } 5298 .button--skin-white.button--text.button--active-state { background-color: transparent; color: var(--absolute-white-colors-base-active); } 5299 .button--skin-white.button--text.button--active-interactive:hover, .button--skin-white.button--text.button--active-interactive:active { background-color: transparent; color: var(--absolute-white-colors-base-active-action); } 5300 .button--skin-white.button--text.button--loading .button__loading-icon { color: var(--absolute-white-colors-base-default); } 5301 .button--skin-facebook.button--default-state { background-color: var(--facebook-colors-base-default); color: var(--facebook-colors-text-default); } 5302 .button--skin-facebook.button--interactive:hover, .button--skin-facebook.button--interactive:active { background-color: var(--facebook-colors-base-action); color: var(--facebook-colors-text-action); } 5303 .button--skin-facebook.button--active-state { background-color: var(--facebook-colors-base-active); color: var(--facebook-colors-text-active); } 5304 .button--skin-facebook.button--active-interactive:hover, .button--skin-facebook.button--active-interactive:active { background-color: var(--facebook-colors-base-active-action); color: var(--facebook-colors-text-action); } 5305 .button--skin-facebook.button--loading .button__loading-icon { color: var(--facebook-colors-text-default); } 5306 .button--skin-facebook.button--outline.button--default-state { background-color: transparent; border-color: var(--facebook-colors-base-default); color: var(--facebook-colors-base-default); } 5307 .button--skin-facebook.button--outline.button--interactive:hover, .button--skin-facebook.button--outline.button--interactive:active { background-color: transparent; border-color: var(--facebook-colors-base-action); color: var(--facebook-colors-base-action); } 5308 .button--skin-facebook.button--outline.button--active-state { background-color: transparent; border-color: var(--facebook-colors-base-active); color: var(--facebook-colors-base-active); } 5309 .button--skin-facebook.button--outline.button--active-interactive:hover, .button--skin-facebook.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--facebook-colors-base-active-action); color: var(--facebook-colors-base-active-action); } 5310 .button--skin-facebook.button--outline.button--loading .button__loading-icon { color: var(--facebook-colors-base-default); } 5311 .button--skin-facebook.button--text.button--default-state { background-color: transparent; color: var(--facebook-colors-base-default); } 5312 .button--skin-facebook.button--text.button--interactive:hover, .button--skin-facebook.button--text.button--interactive:active { background-color: transparent; color: var(--facebook-colors-base-action); } 5313 .button--skin-facebook.button--text.button--active-state { background-color: transparent; color: var(--facebook-colors-base-active); } 5314 .button--skin-facebook.button--text.button--active-interactive:hover, .button--skin-facebook.button--text.button--active-interactive:active { background-color: transparent; color: var(--facebook-colors-base-active-action); } 5315 .button--skin-facebook.button--text.button--loading .button__loading-icon { color: var(--facebook-colors-base-default); } 5316 .button--skin-google.button--default-state { background-color: var(--google-colors-base-default); color: var(--google-colors-text-default); } 5317 .button--skin-google.button--interactive:hover, .button--skin-google.button--interactive:active { background-color: var(--google-colors-base-action); color: var(--google-colors-text-action); } 5318 .button--skin-google.button--active-state { background-color: var(--google-colors-base-active); color: var(--google-colors-text-active); } 5319 .button--skin-google.button--active-interactive:hover, .button--skin-google.button--active-interactive:active { background-color: var(--google-colors-base-active-action); color: var(--google-colors-text-action); } 5320 .button--skin-google.button--loading .button__loading-icon { color: var(--google-colors-text-default); } 5321 .button--skin-google.button--outline.button--default-state { background-color: transparent; border-color: var(--google-colors-base-default); color: var(--google-colors-base-default); } 5322 .button--skin-google.button--outline.button--interactive:hover, .button--skin-google.button--outline.button--interactive:active { background-color: transparent; border-color: var(--google-colors-base-action); color: var(--google-colors-base-action); } 5323 .button--skin-google.button--outline.button--active-state { background-color: transparent; border-color: var(--google-colors-base-active); color: var(--google-colors-base-active); } 5324 .button--skin-google.button--outline.button--active-interactive:hover, .button--skin-google.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--google-colors-base-active-action); color: var(--google-colors-base-active-action); } 5325 .button--skin-google.button--outline.button--loading .button__loading-icon { color: var(--google-colors-base-default); } 5326 .button--skin-google.button--text.button--default-state { background-color: transparent; color: var(--google-colors-base-default); } 5327 .button--skin-google.button--text.button--interactive:hover, .button--skin-google.button--text.button--interactive:active { background-color: transparent; color: var(--google-colors-base-action); } 5328 .button--skin-google.button--text.button--active-state { background-color: transparent; color: var(--google-colors-base-active); } 5329 .button--skin-google.button--text.button--active-interactive:hover, .button--skin-google.button--text.button--active-interactive:active { background-color: transparent; color: var(--google-colors-base-active-action); } 5330 .button--skin-google.button--text.button--loading .button__loading-icon { color: var(--google-colors-base-default); } 5331 .button--skin-apple.button--default-state { background-color: var(--apple-colors-base-default); color: var(--apple-colors-text-default); } 5332 .button--skin-apple.button--interactive:hover, .button--skin-apple.button--interactive:active { background-color: var(--apple-colors-base-action); color: var(--apple-colors-text-action); } 5333 .button--skin-apple.button--active-state { background-color: var(--apple-colors-base-active); color: var(--apple-colors-text-active); } 5334 .button--skin-apple.button--active-interactive:hover, .button--skin-apple.button--active-interactive:active { background-color: var(--apple-colors-base-active-action); color: var(--apple-colors-text-action); } 5335 .button--skin-apple.button--loading .button__loading-icon { color: var(--apple-colors-text-default); } 5336 .button--skin-apple.button--outline.button--default-state { background-color: transparent; border-color: var(--apple-colors-base-default); color: var(--apple-colors-base-default); } 5337 .button--skin-apple.button--outline.button--interactive:hover, .button--skin-apple.button--outline.button--interactive:active { background-color: transparent; border-color: var(--apple-colors-base-action); color: var(--apple-colors-base-action); } 5338 .button--skin-apple.button--outline.button--active-state { background-color: transparent; border-color: var(--apple-colors-base-active); color: var(--apple-colors-base-active); } 5339 .button--skin-apple.button--outline.button--active-interactive:hover, .button--skin-apple.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--apple-colors-base-active-action); color: var(--apple-colors-base-active-action); } 5340 .button--skin-apple.button--outline.button--loading .button__loading-icon { color: var(--apple-colors-base-default); } 5341 .button--skin-apple.button--text.button--default-state { background-color: transparent; color: var(--apple-colors-base-default); } 5342 .button--skin-apple.button--text.button--interactive:hover, .button--skin-apple.button--text.button--interactive:active { background-color: transparent; color: var(--apple-colors-base-action); } 5343 .button--skin-apple.button--text.button--active-state { background-color: transparent; color: var(--apple-colors-base-active); } 5344 .button--skin-apple.button--text.button--active-interactive:hover, .button--skin-apple.button--text.button--active-interactive:active { background-color: transparent; color: var(--apple-colors-base-active-action); } 5345 .button--skin-apple.button--text.button--loading .button__loading-icon { color: var(--apple-colors-base-default); } 5346 .button--skin-snapchat.button--default-state { background-color: var(--snapchat-colors-base-default); color: var(--snapchat-colors-text-default); } 5347 .button--skin-snapchat.button--interactive:hover, .button--skin-snapchat.button--interactive:active { background-color: var(--snapchat-colors-base-action); color: var(--snapchat-colors-text-action); } 5348 .button--skin-snapchat.button--active-state { background-color: var(--snapchat-colors-base-active); color: var(--snapchat-colors-text-active); } 5349 .button--skin-snapchat.button--active-interactive:hover, .button--skin-snapchat.button--active-interactive:active { background-color: var(--snapchat-colors-base-active-action); color: var(--snapchat-colors-text-action); } 5350 .button--skin-snapchat.button--loading .button__loading-icon { color: var(--snapchat-colors-text-default); } 5351 .button--skin-snapchat.button--outline.button--default-state { background-color: transparent; border-color: var(--snapchat-colors-base-default); color: var(--snapchat-colors-base-default); } 5352 .button--skin-snapchat.button--outline.button--interactive:hover, .button--skin-snapchat.button--outline.button--interactive:ac
5352tive { background-color: transparent; border-color: var(--snapchat-colors-base-action); color: var(--snapchat-colors-base-action); } 5353 .button--skin-snapchat.button--outline.button--active-state { background-color: transparent; border-color: var(--snapchat-colors-base-active); color: var(--snapchat-colors-base-active); } 5354 .button--skin-snapchat.button--outline.button--active-interactive:hover, .button--skin-snapchat.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--snapchat-colors-base-active-action); color: var(--snapchat-colors-base-active-action); } 5355 .button--skin-snapchat.button--outline.button--loading .button__loading-icon { color: var(--snapchat-colors-base-default); } 5356 .button--skin-snapchat.button--text.button--default-state { background-color: transparent; color: var(--snapchat-colors-base-default); } 5357 .button--skin-snapchat.button--text.button--interactive:hover, .button--skin-snapchat.button--text.button--interactive:active { background-color: transparent; color: var(--snapchat-colors-base-action); } 5358 .button--skin-snapchat.button--text.button--active-state { background-color: transparent; color: var(--snapchat-colors-base-active); } 5359 .button--skin-snapchat.button--text.button--active-interactive:hover, .button--skin-snapchat.button--text.button--active-interactive:active { background-color: transparent; color: var(--snapchat-colors-base-active-action); } 5360 .button--skin-snapchat.button--text.button--loading .button__loading-icon { color: var(--snapchat-colors-base-default); } 5361 .button--skin-kakao.button--default-state { background-color: var(--kakao-colors-base-default); color: var(--kakao-colors-text-default); } 5362 .button--skin-kakao.button--interactive:hover, .button--skin-kakao.button--interactive:active { background-color: var(--kakao-colors-base-action); color: var(--kakao-colors-text-action); } 5363 .button--skin-kakao.button--active-state { background-color: var(--kakao-colors-base-active); color: var(--kakao-colors-text-active); } 5364 .button--skin-kakao.button--active-interactive:hover, .button--skin-kakao.button--active-interactive:active { background-color: var(--kakao-colors-base-active-action); color: var(--kakao-colors-text-action); } 5365 .button--skin-kakao.button--loading .button__loading-icon { color: var(--kakao-colors-text-default); } 5366 .button--skin-kakao.button--outline.button--default-state { background-color: transparent; border-color: var(--kakao-colors-base-default); color: var(--kakao-colors-base-default); } 5367 .button--skin-kakao.button--outline.button--interactive:hover, .button--skin-kakao.button--outline.button--interactive:active { background-color: transparent; border-color: var(--kakao-colors-base-action); color: var(--kakao-colors-base-action); } 5368 .button--skin-kakao.button--outline.button--active-state { background-color: transparent; border-color: var(--kakao-colors-base-active); color: var(--kakao-colors-base-active); } 5369 .button--skin-kakao.button--outline.button--active-interactive:hover, .button--skin-kakao.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--kakao-colors-base-active-action); color: var(--kakao-colors-base-active-action); } 5370 .button--skin-kakao.button--outline.button--loading .button__loading-icon { color: var(--kakao-colors-base-default); } 5371 .button--skin-kakao.button--text.button--default-state { background-color: transparent; color: var(--kakao-colors-base-default); } 5372 .button--skin-kakao.button--text.button--interactive:hover, .button--skin-kakao.button--text.button--interactive:active { background-color: transparent; color: var(--kakao-colors-base-action); } 5373 .button--skin-kakao.button--text.button--active-state { background-color: transparent; color: var(--kakao-colors-base-active); } 5374 .button--skin-kakao.button--text.button--active-interactive:hover, .button--skin-kakao.button--text.button--active-interactive:active { background-color: transparent; color: var(--kakao-colors-base-active-action); } 5375 .button--skin-kakao.button--text.button--loading .button__loading-icon { color: var(--kakao-colors-base-default); } 5376 .button--skin-line.button--default-state { background-color: var(--line-colors-base-default); color: var(--line-colors-text-default); } 5377 .button--skin-line.button--interactive:hover, .button--skin-line.button--interactive:active { background-color: var(--line-colors-base-action); color: var(--line-colors-text-action); } 5378 .button--skin-line.button--active-state { background-color: var(--line-colors-base-active); color: var(--line-colors-text-active); } 5379 .button--skin-line.button--active-interactive:hover, .button--skin-line.button--active-interactive:active { background-color: var(--line-colors-base-active-action); color: var(--line-colors-text-action); } 5380 .button--skin-line.button--loading .button__loading-icon { color: var(--line-colors-text-default); } 5381 .button--skin-line.button--outline.button--default-state { background-color: transparent; border-color: var(--line-colors-base-default); color: var(--line-colors-base-default); } 5382 .button--skin-line.button--outline.button--interactive:hover, .button--skin-line.button--outline.button--interactive:active { background-color: transparent; border-color: var(--line-colors-base-action); color: var(--line-colors-base-action); } 5383 .button--skin-line.button--outline.button--active-state { background-color: transparent; border-color: var(--line-colors-base-active); color: var(--line-colors-base-active); } 5384 .button--skin-line.button--outline.button--active-interactive:hover, .button--skin-line.button--outline.button--active-interactive:active { background-color: transparent; border-color: var(--line-colors-base-active-action); color: var(--line-colors-base-active-action); } 5385 .button--skin-line.button--outline.button--loading .button__loading-icon { color: var(--line-colors-base-default); } 5386 .button--skin-line.button--text.button--default-state { background-color: transparent; color: var(--line-colors-base-default); } 5387 .button--skin-line.button--text.button--interactive:hover, .button--skin-line.button--text.button--interactive:active { background-color: transparent; color: var(--line-colors-base-action); } 5388 .button--skin-line.button--text.button--active-state { background-color: transparent; color: var(--line-colors-base-active); } 5389 .button--skin-line.button--text.button--active-interactive:hover, .button--skin-line.button--text.button--active-interactive:active { background-color: transparent; color: var(--line-colors-base-active-action); } 5390 .button--skin-line.button--text.button--loading .button__loading-icon { color: var(--line-colors-base-default); } 5391 .button--disabled { opacity: var(--states-disabled); pointer-events: none; } 5392 .button--loading { position: relative; color: transparent; pointer-events: none; } 5393 .button--cursor-pointer { cursor: pointer; } 5394 .button--cursor-default { cursor: default; }
5395 .button--cursor-not-allowed { cursor: not-allowed; } 5396 .button__icon { display: inline-block; flex: 0 0 20px; width: 20px; height: 20px; } 5397 .button--small .button__icon { flex-basis: 20px; width: 20px; height: 20px; } 5398 .button__icon > path:not([fill]) { fill: currentcolor; } 5399 .button__content { display: flex; align-items: center; min-width: 0px; max-width: 100%; height: 20px; column-gap: var(--spacings-s4); font-family: var(--fonts-gilroy); } 5400 .button--small .button__content { height: 20px; column-gap: var(--spacings-s4); } 5401 .button__content--hidden { visibility: hidden; } 5402 .button__text { min-width: 0px; padding-block: var(--spacings-s0); padding-inline: var(--spacings-s2); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 5403 .button--small .button__text { padding-block: var(--spacings-s0); padding-inline: var(--spacings-s2); } 5404 .button__credit { display: flex; flex-shrink: 0; align-items: center; column-gap: var(--spacings-s4); padding-inline-end: var(--spacings-s2); } 5405 .button--small .button__credit { column-gap: var(--spacings-s4); } 5406 .button__credit-icon { flex: 0 0 20px; width: 20px; height: 20px; } 5407 .button--small .button__credit-icon { flex-basis: 20px; width: 20px; height: 20px; } 5408 .button__credit-icon > path:not([fill]) { fill: currentcolor; } 5409 .button__control { display: none; } 5410 .button__loading-icon { position: absolute; inset: 0px; margin: auto; pointer-events: none; } 5411 @keyframes button-rotate { 5412 100% { transform: rotate(360deg); } 5413} 5414 .button__loading-icon { animation: button-rotate var(--timings-long) var(--easings-linear) infinite; } 5415} 5416@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5417@layer ds-atoms { 5418 .text--t1 { font-size: var(--typography-t1-font-size); line-height: var(--typography-t1-line-height); } 5419 .text--t2 { font-size: var(--typography-t2-font-size); line-height: var(--typography-t2-line-height); } 5420 .text--t3 { font-size: var(--typography-t3-font-size); line-height: var(--typography-t3-line-height); } 5421 .text--t4 { font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); } 5422 .text--t5 { font-size: var(--typography-t5-font-size); line-height: var(--typography-t5-line-height); } 5423 .text--t6 { font-size: var(--typography-t6-font-size); line-height: var(--typography-t6-line-height); } 5424 .text--t7 { font-size: var(--typography-t7-font-size); line-height: var(--typography-t7-line-height); } 5425 .text--t8 { font-size: var(--typography-t8-font-size); line-height: var(--typography-t8-line-height); } 5426 .text--t9 { font-size: var(--typography-t9-font-size); line-height: var(--typography-t9-line-height); } 5427 .text--t10 { font-size: var(--typography-t10-font-size); line-height: var(--typography-t10-line-height); } 5428 .text--color-primary { color: var(--primary-colors-base-default); } 5429 .text--color-neutral { color: var(--neutral-colors-base-default); } 5430 .text--color-plus { color: var(--monetization-plus-colors-base-default); } 5431 .text--color-pro { color: var(--monetization-pro-colors-base-default); } 5432 .text--color-ultra { color: var(--monetization-ultra-colors-base-default); } 5433 .text--color-success { color: var(--success-colors-base-default); } 5434 .text--color-warning { color: var(--warning-colors-base-default); } 5435 .text--color-error { color: var(--error-colors-base-default); } 5436 .text--color-information { color: var(--information-colors-base-default); } 5437 .text--color-positive { color: var(--positive-colors-base-default); } 5438 .text--color-negative { color: var(--negative-colors-base-default); } 5439 .text--color-black { color: var(--absolute-black-colors-base-default); } 5440 .text--color-white { color: var(--absolute-white-colors-base-default); } 5441 .text--color-base { color: var(--text-colors-base); } 5442 .text--color-tint-1 { color: var(--text-colors-tint-1); } 5443 .text--color-tint-2 { color: var(--text-colors-tint-2); }
5444 .text--color-tint-3 { color: var(--text-colors-tint-3); } 5445 .text--full-width { display: block; width: 100%; } 5446 .text--align-left { text-align: left; } 5447 .text--align-center { text-align: center; } 5448 .text--align-right { text-align: right; } 5449 .text--truncated { display: inline-block; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 5450 .text--multi-line-truncated { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--text-max-visible-row-count); overflow: hidden; } 5451} 5452@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5453@layer ds-subatoms { 5454 .base-text--font-gilroy { font-family: var(--fonts-gilroy); } 5455 .base-text--font-acorn { font-family: var(--fonts-acorn); } 5456 .base-text--weight-medium { font-weight: 500; } 5457 .base-text--weight-semibold { font-weight: 600; } 5458 .base-text--weight-bold { font-weight: 700; } 5459 .base-text--weight-normal { font-weight: 400; } 5460} 5461@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5462@layer ds-molecules { 5463 .notification { width: 100%; padding: var(--spacings-s12) var(--spacings-s12); border-width: 2px; border-style: solid; border-radius: var(--corner-radius-r16); box-shadow: var(--shadows-tint-1); background-color: var(--background-colors-tint-1); border-color: var(--ntf-border-color); } 5464 .notification--large { max-width: 434px; } 5465 .notification--small { max-width: 382px; } 5466 .notification__information { display: flex; flex-wrap: wrap; column-gap: var(--spacings-s8); min-height: var(--typography-t7-line-height); } 5467 .notification__information--centered { align-items: center; } 5468 .notification__progress { padding: var(--spacings-s8) var(--spacings-s0) var(--spacings-s8) var(--spacings-s32); } 5469 .notification__type-icon { display: inline-block; vertical-align: top; width: 24px; height: 24px; order: 0; } 5470 .notification__close-icon { order: 2; } 5471 .notification__title { display: block; word-break: break-word; margin-bottom: var(--spacings-s4); order: 1; flex: 1 1 0%; } 5472 .notification__description { word-break: break-word; } 5473 .notification__description--with-title { order: 3; flex: 0 0 100%; padding-left: 32px; margin-bottom: 6px; } 5474 .notification__description--without-title { order: 1; flex: 1 1 0%; } 5475 .notification__external-actions { display: flex; justify-content: flex-end; margin-top: var(--spacings-s8); gap: var(--spacings-s8); } 5476 .notification--skin-success { --ntf-border-color: var(--success-colors-base-default); } 5477 .notification--skin-success .ntf-typeIcon > path:not([fill]) { fill: var(--success-colors-base-default); } 5478 .notification--skin-warning { --ntf-border-color: var(--warning-colors-base-default); } 5479 .notification--skin-warning .ntf-typeIcon > path:not([fill]) { fill: var(--warning-colors-base-default); } 5480 .notification--skin-error { --ntf-border-color: var(--error-colors-base-default); } 5481 .notification--skin-error .ntf-typeIcon > path:not([fill]) { fill: var(--error-colors-base-default); } 5482 .notification--skin-information { --ntf-border-color: var(--information-colors-base-default); } 5483 .notification--skin-information .ntf-typeIcon > path:not([fill]) { fill: var(--information-colors-base-default); } 5484 .notification--skin-premium { --ntf-border-color: var(--monetization-ultra-colors-base-default); } 5485 .notification--skin-premium .ntf-typeIcon > path:not([fill]) { fill: var(--monetization-ultra-colors-base-default); } 5486} 5487@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5488@layer ds-atoms { 5489 .inline-button { display: inline-flex; vertical-align: top; flex-shrink: 0; align-items: center; transition-property: background-color, border-color, color; transition-timing-function: var(--easings-ease); transition-duration: var(--timings-default); } 5490 .inline-button--large { height: 40px; padding-block: var(--spacings-s10); padding-inline: var(--spacings-s10); column-gap: var(--spacings-s2); border-radius: var(--corner-radius-r8); font-weight: 600; font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); } 5491 .inline-button--small { height: 32px; padding-block: var(--spacings-s6); padding-inline: var(--spacings-s6); column-gap: var(--spacings-s2); border-radius: var(--corner-radius-r8); font-weight: 600; font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); } 5492 .inline-button--full-width { width: 100%; } 5493 .inline-button--with-border { border-style: solid; border-width: 1px; } 5494 .inline-button--with-border.inline-button--small { border-width: 1px; } 5495 .inline-button--no-border { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; } 5496 .inline-button--transparent-bg { background-color: transparent; } 5497 .inline-button--center-content { justify-content: center; } 5498 .inline-button--cursor-pointer { cursor: pointer; } 5499 .inline-button--cursor-default { cursor: default; }
5500 .inline-button--cursor-not-allowed { cursor: not-allowed; } 5501 .inline-button--default { background-color: var(--control-colors-button-background-default); border-color: var(--control-colors-border-default); color: var(--control-colors-text-default); } 5502 @media (hover: hover) and (pointer: fine) { 5503 .inline-button--interactive:hover { background-color: var(--control-colors-button-background-action); border-color: var(--control-colors-border-action); color: var(--control-colors-text-action); } 5504} 5505 @media (hover: none) and (pointer: coarse) { 5506 .inline-button--interactive:active { background-color: var(--control-colors-button-background-action); border-color: var(--control-colors-border-action); color: var(--control-colors-text-action); } 5507} 5508 .inline-button--active { background-color: var(--control-colors-button-background-active); border-color: var(--control-colors-border-active); color: var(--control-colors-text-active); } 5509 @media (hover: hover) and (pointer: fine) { 5510 .inline-button--active-interactive:hover { background-color: var(--control-colors-button-background-active-action); border-color: var(--control-colors-border-active-action); color: var(--control-colors-text-active-action); } 5511} 5512 @media (hover: none) and (pointer: coarse) { 5513 .inline-button--active-interactive:active { background-color: var(--control-colors-button-background-active-action); border-color: var(--control-colors-border-active-action); color: var(--control-colors-text-active-action); } 5514} 5515 .inline-button--without-border-override { border-color: transparent; } 5516 @media (hover: hover) and (pointer: fine) { 5517 .inline-button--without-border-override:hover { border-color: transparent; } 5518} 5519 @media (hover: none) and (pointer: coarse) { 5520 .inline-button--without-border-override:active { border-color: transparent; } 5521} 5522 .inline-button--without-bg-override { background-color: transparent; } 5523 .inline-button--disabled { opacity: var(--states-disabled); cursor: not-allowed; } 5524 .inline-button--loading-skin { position: relative; color: transparent; } 5525 .inline-button__icon-holder { display: block; width: 20px; height: 20px; } 5526 .inline-button--small .inline-button__icon-holder { width: 20px; height: 20px; } 5527 .inline-button__icon { display: inline-block; flex-shrink: 0; flex-basis: 20px; width: 20px; height: 20px; min-width: 0px; min-height: 0px; transition-property: transform; transition-timing-function: var(--easings-ease); transition-duration: var(--timings-default); } 5528 .inline-button--small .inline-button__icon { flex-basis: 20px; width: 20px; height: 20px; } 5529 .inline-button__icon > path:not([fill]) { fill: currentcolor; } 5530 .inline-button__arrow-active { transform: rotate(180deg); } 5531 .inline-button__content-wrap { display: grid; flex-grow: 1; height: 20px; padding-block: var(--spacings-s0); padding-inline: var(--spacings-s2); } 5532 .inline-button--small .inline-button__content-wrap { height: 20px; padding-block: var(--spacings-s0); padding-inline: var(--spacings-s2); } 5533 .inline-button__content-align-start { text-align: start; } 5534 .inline-button__content-align-center { text-align: center; } 5535 .inline-button__content-align-end { text-align: end; } 5536 .inline-button__content { width: 100%; min-width: 0px; min-height: 0px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--fonts-gilroy); } 5537 .inline-button__control { display: none; } 5538 .inline-button__loading-icon { position: absolute; inset: 0px; margin: auto; pointer-events: none; } 5539 @keyframes inline-btn-rotate { 5540 100% { transform: rotate(360deg); } 5541} 5542 .inline-button__loading-icon-skin { color: var(--control-colors-text-default); animation: inline-btn-rotate var(--timings-long) var(--easings-linear) infinite; } 5543} 5544@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5545@layer ds-atoms { 5546 .monetization-badge { display: inline-flex; vertical-align: top; align-items: center; justify-content: center; background: var(--gradients-status-info); color: var(--information-colors-text-default); } 5547 .monetization-badge--shadow { box-shadow: var(--shadows-tint-2); } 5548 .monetization-badge--rectangle.monetization-badge--large { width: 44px; height: 20px; border-radius: var(--corner-radius-r16); } 5549 .monetization-badge--rectangle.monetization-badge--small { width: 32px; height: 14px; border-radius: var(--corner-radius-r12); } 5550 .monetization-badge--skin-plus { background: var(--gradients-monetization-plus); color: var(--monetization-plus-colors-text-default); } 5551 .monetization-badge--skin-pro { background: var(--gradients-monetization-pro); color: var(--monetization-pro-colors-text-default); } 5552 .monetization-badge--skin-ultra { background: var(--gradients-monetization-ultra); color: var(--negative-colors-text-default); } 5553 .monetization-badge__icon { display: block; } 5554 .monetization-badge__icon > path:not([fill]) { fill: currentcolor; } 5555 .monetization-badge__icon--rectangle-large { width: 32px; height: 16px; } 5556 .monetization-badge__icon--rectangle-small { width: 28px; height: 14px; } 5557} 5558@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5559@layer ds-atoms { 5560 .tool-badge { display: inline-flex; vertical-align: top; align-items: center; justify-content: center; background-color: var(--information-colors-base-default); color: var(--information-colors-text-default); } 5561 .tool-badge--shadow { box-shadow: var(--shadows-tint-2); } 5562 .tool-badge--circle { border-radius: var(--corner-radius-circle); }
5563 .tool-badge--circle.tool-badge--large { width: 20px; height: 20px; } 5564 .tool-badge--circle.tool-badge--small { width: 14px; height: 14px; } 5565 .tool-badge--rectangle.tool-badge--large { width: 44px; height: 20px; border-radius: var(--corner-radius-r16); } 5566 .tool-badge--rectangle.tool-badge--small { width: 32px; height: 14px; border-radius: var(--corner-radius-r12); } 5567 .tool-badge--skin-new { background: var(--gradients-status-success); color: var(--information-colors-text-default); } 5568 .tool-badge--skin-live { background: var(--gradients-status-success); color: var(--success-colors-text-default); } 5569 .tool-badge--skin-hot-text { background: var(--gradients-status-warning); color: var(--warning-colors-text-default); } 5570 .tool-badge__icon { display: block; } 5571 .tool-badge__icon > path:not([fill]) { fill: currentcolor; } 5572 .tool-badge__icon--circle-large { width: 12px; height: 12px; } 5573 .tool-badge__icon--circle-small { width: 10px; height: 10px; } 5574 .tool-badge__icon--rectangle-large { width: 32px; height: 16px; } 5575 .tool-badge__icon--rectangle-small { width: 28px; height: 14px; } 5576} 5577@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5578@layer ds-atoms { 5579 .user-badge { display: inline-flex; vertical-align: top; align-items: center; justify-content: center; background-color: var(--information-colors-base-default); color: var(--information-colors-text-default); } 5580 .user-badge--shadow { box-shadow: var(--shadows-tint-2); } 5581 .user-badge--circle { border-radius: var(--corner-radius-circle); } 5582 .user-badge--circle.user-badge--large { width: 20px; height: 20px; } 5583 .user-badge--circle.user-badge--small { width: 14px; height: 14px; } 5584 .user-badge--skin-crown { background-color: var(--warning-colors-base-default); color: var(--warning-colors-text-default); } 5585 .user-badge__icon { display: block; } 5586 .user-badge__icon > path:not([fill]) { fill: currentcolor; } 5587 .user-badge__icon--circle-large { width: 12px; height: 12px; } 5588 .user-badge__icon--circle-small { width: 10px; height: 10px; } 5589} 5590@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5591@layer ds-atoms { 5592 @keyframes progress-loading-bar { 5593 0% { transform: translate(-100%); } 5594 100% { transform: translate(400%); } 5595} 5596 .progress { display: inline-block; vertical-align: top; } 5597 .progress__circle-bg { stroke: var(--background-colors-tint-3); } 5598 .progress__circle-load { stroke: var(--progress-status); transition: all var(--timings-fast) var(--easings-linear); } 5599 .progress--circular { width: 60px; height: 60px; } 5600 .progress--rectangular { background-color: var(--background-colors-tint-2); height: 4px; overflow: hidden; } 5601 .progress--full-width { width: 100%; } 5602 .progress--with-border-radius { border-radius: var(--corner-radius-r4); } 5603 .progress--status-default { --progress-status: var(--primary-colors-base-default); } 5604 .progress--status-error { --progress-status: var(--error-colors-base-default); } 5605 .progress--status-success { --progress-status: var(--success-colors-base-default); } 5606 .progress--status-warning { --progress-status: var(--warning-colors-base-default); } 5607 .progress--status-information { --progress-status: var(--information-colors-base-default); } 5608 .progress--linear::after { content: ""; display: block; width: 100%; height: 100%; background-color: var(--progress-status); will-change: transform; transition: all var(--timings-fast) var(--easings-linear); border-radius: inherit; } 5609 [dir="ltr"] .progress--linear::after { transform: translate(calc(-1 * (100 - var(--progress-percent)) * 1%)); } 5610 [dir="rtl"] .progress--linear::after { transform: translate(calc((100 - var(--progress-percent)) * 1%)); } 5611 .progress--continues::before { content: ""; display: block; width: 30%; height: 100%; background-color: var(--progress-status); border-radius: inherit; transform: translate(-100%); animation: progress-loading-bar var(--timings-heavy) cubic-bezier(.65,.815,.735,.395) infinite; } 5612} 5613@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5614@layer ds-templates { 5615 .blank-skeleton { display: flex; flex-direction: column; gap: var(--spacings-s8); width: 100%; padding: var(--spacings-s16); } 5616 .blank-skeleton__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacings-s8); } 5617 .blank-skeleton__item { aspect-ratio: 1 / 1; } 5618} 5619@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5620@layer ds-atoms { 5621 @keyframes skeleton-ltr { 5622 0% { transform: translate(-200%, -50%); } 5623 100% { transform: translate(100%, -50%); } 5624} 5625 @keyframes skeleton-rtl { 5626 0% { transform: translate(100%, -50%); } 5627 100% { transform: translate(-200%, -50%); } 5628} 5629 .skeleton { display: block; position: relative; overflow: hidden; clip-path: view-box; background-color: var(--background-colors-tint-2); width: var(--skeleton-width); height: var(--skeleton-height); border-radius: var(--skeleton-border-radius, 0); } 5630 .skeleton::before { content: ""; display: block; width: 50%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-image: linear-gradient(90deg,transparent,var(--background-colors-tint-3),transparent); will-change: transform; } 5631 [dir="ltr"] .skeleton::before { animation: skeleton-ltr var(--timings-long) var(--easings-linear) infinite; } 5632 [dir="rtl"] .skeleton::before { animation: skeleton-rtl var(--timings-long) var(--easings-linear) infinite; } 5633} 5634@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5635@layer ds-templates { 5636 .blank-credits-count { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: var(--spacings-s6); padding-top: var(--spacings-s10); padding-bottom: var(--spacings-s10); } 5637 .blank-credits-count__info { display: flex; align-items: center; gap: var(--spacings-s6); }
5638 .blank-credits-count__icon { width: 20px; height: 20px; fill: var(--text-colors-base); } 5639 .blank-credits-count__action-button { font-size: var(--typography-t3-font-size); line-height: var(--typography-t3-line-height); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: var(--primary-colors-base-default); background-color: transparent; font-weight: 600; cursor: pointer; white-space: nowrap; } 5640 @media (hover: hover) and (pointer: fine) { 5641 .blank-credits-count__action-button:hover { color: var(--primary-colors-base-action); } 5642} 5643} 5644@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5645@layer ds-templates { 5646 .blank-footer-text-block { display: flex; justify-content: center; text-align: center; font-size: var(--typography-t3-font-size); line-height: var(--typography-t3-line-height); } 5647} 5648@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5649@layer ds-atoms { 5650 .anchor-text__anchor { color: var(--primary-colors-base-default); text-decoration: none; cursor: pointer; } 5651 .anchor-text__anchor--underlined { text-decoration: underline; } 5652 @media (hover: hover) and (pointer: fine) { 5653 .anchor-text__anchor:hover { text-decoration: underline; } 5654} 5655} 5656@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5657@layer ds-subatoms { 5658 .base-link--font-gilroy { font-family: var(--fonts-gilroy); } 5659 .base-link--font-acorn { font-family: var(--fonts-acorn); } 5660 .base-link--weight-normal { font-weight: 400; } 5661 .base-link--weight-medium { font-weight: 500; } 5662 .base-link--weight-semibold { font-weight: 600; } 5663 .base-link--weight-bold { font-weight: 700; } 5664} 5665@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5666@layer ds-templates { 5667 .blank { display: grid; grid-template: "header" "body" 1fr "footer" / 1fr; width: 100%; background-color: var(--background-colors-base); transition: background-color var(--timings-default) var(--easings-ease); } 5668 .blank--disabled { opacity: var(--states-disabled); pointer-events: none; } 5669 .blank--full-height { height: 100%; } 5670 .blank--dynamic { min-height: 100%; } 5671 .blank__common { min-width: 0px; min-height: 0px; } 5672 .blank__header { grid-area: header; padding: var(--spacings-s6) var(--spacings-s16) var(--spacings-s8) var(--spacings-s16); } 5673 @media screen and (min-width: 1600px) { 5674 .blank__header--desktop { padding-top: var(--spacings-s10); } 5675} 5676 .blank__body { grid-area: body; height: 100%; padding-inline-start: var(--spacings-s16); overflow: hidden scroll; } 5677 @supports (-moz-appearance: none) { 5678 .blank__body { padding-inline-end: var(--spacings-s16); scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 5679} 5680 @media (pointer: fine) { 5681 .blank__body::-webkit-scrollbar { width: 16px; height: 16px; } 5682 .blank__body::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; } 5683 .blank__body::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r12); background-color: var(--background-colors-border); background-clip: content-box; border: 6px solid transparent; transition: background-color var(--timings-default) var(--easings-ease); } 5684 .blank__body::-webkit-scrollbar-corner { background: transparent; } 5685} 5686 @media (pointer: coarse) { 5687 .blank__body::-webkit-scrollbar { display: none; } 5688} 5689 @supports not (-moz-appearance: none) { 5690 .blank__body--desktop { padding-inline-end: 0px; } 5691} 5692 @supports not (-moz-appearance: none) { 5693 .blank__body--non-desktop { padding-inline-end: var(--spacings-s16); } 5694} 5695 .blank__body--loading { padding-inline: 0px; overflow-y: hidden; } 5696 .blank__footer { grid-area: footer; display: flex; flex-direction: column; gap: var(--spacings-s8); padding: var(--spacings-s8) var(--spacings-s16) var(--spacings-s16) var(--spacings-s16); } 5697} 5698@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5699@layer ds-molecules { 5700 .credit-button { position: relative; display: inline-flex; vertical-align: top; align-items: center; justify-content: center; max-width: 100%; border-style: solid; border-width: 0px; background-color: transparent; transition: background-color var(--timings-default) var(--easings-ease),border-color var(--timings-default) var(--easings-ease),color var(--timings-default) var(--easings-ease),opacity var(--timings-default) var(--easings-ease); height: 32px; padding-block: 4px; padding-inline: 4px; border-radius: 30px; font-weight: 600; font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); --credit-button-blink-glow: var(--text-colors-base); --credit-button-blink-ring: #6C6C6C; } 5701 .credit-button--status-default { background-color: var(--neutral-colors-base-default); } 5702 @media (hover: hover) and (pointer: fine) { 5703 .credit-button--status-default:hover { background-color: var(--neutral-colors-base-action); } 5704} 5705 .credit-button--status-default:active { background-color: var(--neutral-colors-base-active); } 5706 @media (hover: hover) and (pointer: fine) { 5707 .credit-button--status-default:active:hover { background-color: var(--neutral-colors-base-active-action); } 5708}
5709 .credit-button--status-default { color: var(--neutral-colors-text-default); } 5710 @media (hover: hover) and (pointer: fine) { 5711 .credit-button--status-default:hover { color: var(--neutral-colors-text-action); } 5712} 5713 .credit-button--status-default:active { color: var(--neutral-colors-text-active); } 5714 @media (hover: hover) and (pointer: fine) { 5715 .credit-button--status-default:active:hover { color: var(--neutral-colors-text-active-action); } 5716} 5717 .credit-button--status-low { --credit-button-blink-glow: var(--warning-colors-base-default); --credit-button-blink-ring: var(--warning-colors-base-default); border-width: 1px; border-color: var(--warning-colors-base-default); } 5718 @media (hover: hover) and (pointer: fine) { 5719 .credit-button--status-low:hover { border-color: var(--warning-colors-base-action); } 5720} 5721 .credit-button--status-low:active { border-color: var(--warning-colors-base-active); } 5722 @media (hover: hover) and (pointer: fine) { 5723 .credit-button--status-low:active:hover { border-color: var(--warning-colors-base-active-action); } 5724} 5725 .credit-button--status-low { color: var(--warning-colors-base-default); } 5726 @media (hover: hover) and (pointer: fine) { 5727 .credit-button--status-low:hover { color: var(--warning-colors-base-action); } 5728} 5729 .credit-button--status-low:active { color: var(--warning-colors-base-active); } 5730 @media (hover: hover) and (pointer: fine) { 5731 .credit-button--status-low:active:hover { color: var(--warning-colors-base-active-action); } 5732} 5733 .credit-button--status-critical { --credit-button-blink-glow: var(--error-colors-base-default); --credit-button-blink-ring: var(--error-colors-base-default); border-width: 1px; border-color: var(--error-colors-base-default); } 5734 @media (hover: hover) and (pointer: fine) { 5735 .credit-button--status-critical:hover { border-color: var(--error-colors-base-action); } 5736} 5737 .credit-button--status-critical:active { border-color: var(--error-colors-base-active); } 5738 @media (hover: hover) and (pointer: fine) { 5739 .credit-button--status-critical:active:hover { border-color: var(--error-colors-base-active-action); } 5740} 5741 .credit-button--status-critical { color: var(--error-colors-base-default); } 5742 @media (hover: hover) and (pointer: fine) { 5743 .credit-button--status-critical:hover { color: var(--error-colors-base-action); } 5744} 5745 .credit-button--status-critical:active { color: var(--error-colors-base-active); } 5746 @media (hover: hover) and (pointer: fine) { 5747 .credit-button--status-critical:active:hover { color: var(--error-colors-base-active-action); } 5748} 5749 .credit-button__content { display: inline-flex; align-items: center; min-width: 0px; column-gap: var(--spacings-s2); } 5750 .credit-button__icon { display: inline-block; flex: 0 0 20px; width: 20px; height: 20px; } 5751 .credit-button__icon > path:not([fill]) { fill: currentcolor; } 5752 .credit-button__credits { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-inline: 2px; } 5753 .credit-button--blink { animation: credit-button-shadow var(--timings-medium) var(--easings-ease) forwards; } 5754 .credit-button--blink::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.1); transition: scale var(--timings-medium) var(--easings-ease),box-shadow var(--timings-medium) var(--easings-ease); width: calc(100% + 1px); height: calc(100% + 1px); border: 1px solid var(--credit-button-blink-ring); border-radius: 30px; animation: credit-button-blink var(--timings-medium) var(--easings-ease) forwards; pointer-events: none; } 5755 @keyframes credit-button-shadow { 5756 0%, 100% { box-shadow: none; } 5757 25%, 50% { box-shadow: 0 0 6px 6px color-mix(in srgb,var(--credit-button-blink-glow) 24%,transparent); } 5758} 5759 @keyframes credit-button-blink { 5760 0% { transform: translate(-50%, -50%) scale(1.1); opacity: 0; } 5761 25% { transform: translate(-50%, -50%) scale(1.1, 1.2); opacity: 0.8; } 5762 50% { transform: translate(-50%, -50%) scale(1.2, 1.3); opacity: 0.6; } 5763 100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0; } 5764} 5765} 5766@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5767@layer ds-subatoms { 5768 .base-button { appearance: none; margin: 0px; padding: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: none; font: inherit; color: inherit; text-align: inherit; } 5769 .base-button:disabled { color: inherit; }
5770 .base-button--not-interactive { cursor: not-allowed; pointer-events: none; } 5771 .base-button--enabled { cursor: pointer; } 5772 .base-button--disabled { opacity: var(--states-disabled); pointer-events: none; } 5773 .base-button--loading { cursor: default; pointer-events: none; } 5774} 5775@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5776@layer ds-molecules { 5777 .panel-heading__top { display: grid; align-items: center; grid-template: "action title optional" 1fr / auto 1fr auto; } 5778 .panel-heading__brand-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-inline-end: var(--spacings-s4); } 5779 .panel-heading__brand-icon svg { width: 20px; height: 20px; fill: var(--text-colors-tint-1); } 5780 .panel-heading__common { min-width: 0px; } 5781 .panel-heading__back-button { grid-area: action; margin-inline-end: var(--spacings-s4); } 5782 [dir="rtl"] .panel-heading__back-button { transform: rotate(180deg); } 5783 .panel-heading__center-container { grid-area: title; display: flex; align-items: center; } 5784 .panel-heading__title-start { justify-content: start; } 5785 .panel-heading__title-container { display: grid; align-items: center; grid-template: "mainTitle count badge" 1fr / auto min-content 1fr; } 5786 .panel-heading__title { display: block; grid-area: mainTitle; transition: color var(--timings-default) var(--easings-ease); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } 5787 .panel-heading__count { margin-inline-start: var(--spacings-s4); grid-area: count; } 5788 .panel-heading [data-testid="badge"] { grid-area: badge; vertical-align: baseline; margin-inline-start: var(--spacings-s8); } 5789 .panel-heading__optional { display: flex; gap: var(--spacings-s2); } 5790 .panel-heading__actions { grid-area: optional; display: flex; align-items: center; gap: var(--spacings-s2); margin-inline-start: var(--spacings-s8); } 5791 .panel-heading__bottom { margin-top: var(--spacings-s8); } 5792} 5793@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5794@layer ds-atoms { 5795 .text-tooltip { max-width: 390px; z-index: var(--text-tooltip-z-index); --container-background-color: var(--negative-colors-base-default); --container-border-color: var(--background-colors-border); background-color: var(--container-background-color); border-radius: var(--corner-radius-r8); } 5796 .text-tooltip__text { display: block; padding: var(--spacings-s8); color: var(--negative-colors-text-default); text-align: center; font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); } 5797} 5798@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5799@layer ds-subatoms { 5800 .base-floating-container { position: relative; border: 1px solid var(--container-border-color); background-color: var(--container-background-color); } 5801 .base-floating-container--transform-start { transform: translate(10px); } 5802 .base-floating-container--transform-end { transform: translate(-10px); } 5803 .base-floating-container--transform-default { transform: translate(0px); } 5804 .base-floating-container__indicator { display: inline-block; position: absolute; width: 20px; height: 14px; } 5805 .base-floating-container__indicator > path:nth-child(1) { fill: var(--container-background-color); } 5806 .base-floating-container__indicator > path:nth-child(2) { fill: var(--container-border-color); } 5807} 5808@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5809@layer ds-atoms { 5810 .text-field { width: 100%; } 5811 .text-field--large { height: 40px; } 5812 .text-field--small { height: 32px; } 5813 .text-field--relative { position: relative; } 5814 .text-field__control { display: block; width: 100%; height: 100%; border-width: 1px; border-style: solid; border-radius: var(--corner-radius-r8); font-family: var(--fonts-gilroy); font-weight: 500; transition-property: background-color, border-color, color; transition-duration: var(--timings-default); transition-timing-function: var(--easings-ease); } 5815 .text-field__control::placeholder { font-size: var(--typography-t4-font-size); line-height: 1; font-family: inherit; } 5816 .text-field__control::-webkit-outer-spin-button, .text-field__control::-webkit-inner-spin-button { appearance: none; margin: 0px; } 5817 .text-field__control[type="number"] { } 5818 .text-field__control--centered { text-align: center; } 5819 .text-field__control--large, .text-field__control--small { font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); font-weight: 500; } 5820 .text-field__control--default-padding.text-field__control--large { padding: 0 calc(var(--spacings-s10) - 1px); } 5821 .text-field__control--default-padding.text-field__control--small { padding: 0 calc(var(--spacings-s6) - 1px); } 5822 .text-field__control--placeholder-padding.text-field__control--large { padding-inline-start: calc(var(--spacings-s10) + 20px + var(--spacings-s2) + var(--spacings-s2)); } 5823 .text-field__control--placeholder-padding.text-field__control--small { padding-inline-start: calc(var(--spacings-s6) + 20px + var(--spacings-s2) + var(--spacings-s2)); } 5824 .text-field__control--button-padding.text-field__control--large { padding-inline-end: calc(var(--spacings-s10) + 20px + var(--spacings-s2) + var(--spacings-s2)); } 5825 .text-field__control--button-padding.text-field__control--small { padding-inline-end: calc(var(--spacings-s6) + 20px + var(--spacings-s2) + var(--spacings-s2)); } 5826 .text-field__placeholder-icon { display: inline-block; vertical-align: top; position: absolute; top: 0px; bottom: 0px; margin: auto 0px; pointer-events: none; }
5827 .text-field__placeholder-icon--large { width: 20px; height: 20px; inset-inline-start: var(--spacings-s10); } 5828 .text-field__placeholder-icon--small { width: 20px; height: 20px; inset-inline-start: var(--spacings-s6); } 5829 .text-field__button { display: inline-block; vertical-align: top; position: absolute; top: 0px; bottom: 0px; margin: auto 0px; cursor: pointer; } 5830 .text-field__button--large { width: 20px; height: 20px; inset-inline-end: var(--spacings-s10); } 5831 .text-field__button--small { width: 20px; height: 20px; inset-inline-end: var(--spacings-s6); } 5832 .text-field--default-skin { border-color: var(--control-colors-border-default); color: var(--control-colors-value-default); background-color: var(--text-field-bg-override, var(--control-colors-field-background-default)); } 5833 @media (hover: hover) and (pointer: fine) { 5834 .text-field--interactive:hover { border-color: var(--control-colors-border-action); color: var(--control-colors-value-action); background-color: var(--text-field-bg-override, var(--control-colors-field-background-action)); } 5835} 5836 @media (hover: none) and (pointer: coarse) { 5837 .text-field--interactive:active { border-color: var(--control-colors-border-action); color: var(--control-colors-value-action); background-color: var(--text-field-bg-override, var(--control-colors-field-background-action)); } 5838} 5839 .text-field--interactive:focus { border-color: var(--control-colors-border-active); color: var(--control-colors-value-active); background-color: var(--text-field-bg-override, var(--control-colors-field-background-active)); } 5840 .text-field--filled { color: var(--control-colors-value-active); background-color: var(--text-field-bg-override, var(--control-colors-field-background-active)); border-color: var(--control-colors-border-active); } 5841 @media (hover: hover) and (pointer: fine) { 5842 .text-field--filled:hover { border-color: var(--control-colors-border-active-action); color: var(--control-colors-value-active-action); background-color: var(--text-field-bg-override, var(--control-colors-field-background-active-action)); } 5843} 5844 @media (hover: none) and (pointer: coarse) { 5845 .text-field--filled:active { border-color: var(--control-colors-border-active-action); color: var(--control-colors-value-active-action); background-color: var(--text-field-bg-override, var(--control-colors-field-background-active-action)); } 5846} 5847 .text-field--error { border-color: var(--error-colors-base-default); } 5848 @media (hover: hover) and (pointer: fine) { 5849 .text-field--error:hover { border-color: var(--error-colors-base-action); } 5850} 5851 @media (hover: none) and (pointer: coarse) { 5852 .text-field--error:active { border-color: var(--error-colors-base-active); } 5853} 5854 .text-field--error-active { border-color: var(--error-colors-base-active); } 5855 @media (hover: hover) and (pointer: fine) { 5856 .text-field--error-active:hover { border-color: var(--error-colors-base-active-action); } 5857} 5858 @media (hover: none) and (pointer: coarse) { 5859 .text-field--error-active:active { border-color: var(--error-colors-base-active-action); } 5860} 5861 .text-field--warning { border-color: var(--warning-colors-base-default); } 5862 @media (hover: hover) and (pointer: fine) { 5863 .text-field--warning:hover { border-color: var(--warning-colors-base-action); } 5864} 5865 @media (hover: none) and (pointer: coarse) { 5866 .text-field--warning:active { border-color: var(--warning-colors-base-action); } 5867} 5868 .text-field--warning-active { border-color: var(--warning-colors-base-active); } 5869 @media (hover: hover) and (pointer: fine) { 5870 .text-field--warning-active:hover { border-color: var(--warning-colors-base-active-action); } 5871} 5872 @media (hover: none) and (pointer: coarse) { 5873 .text-field--warning-active:active { border-color: var(--warning-colors-base-active-action); } 5874} 5875 .text-field--success { border-color: var(--success-colors-base-default); } 5876 @media (hover: hover) and (pointer: fine) { 5877 .text-field--success:hover { border-color: var(--success-colors-base-action); } 5878} 5879 @media (hover: none) and (pointer: coarse) { 5880 .text-field--success:active { border-color: var(--success-colors-base-action); } 5881} 5882 .text-field--success-active { border-color: var(--success-colors-base-active); } 5883 @media (hover: hover) and (pointer: fine) { 5884 .text-field--success-active:hover { border-color: var(--success-colors-base-active-action); } 5885} 5886 @media (hover: none) and (pointer: coarse) { 5887 .text-field--success-active:active { border-color: var(--success-colors-base-active-action); } 5888} 5889 .text-field--disabled { opacity: var(--states-disabled); } 5890 .text-field--disabled-icon { opacity: var(--states-disabled); cursor: auto; } 5891 .text-field--without-background { --text-field-bg-override: transparent; } 5892 .text-field--without-borders { border-style: none; } 5893 .text-field__skin-placeholder-icon { color: var(--control-colors-start-icon-default); } 5894 .text-field__skin-placeholder-icon > path { fill: currentcolor; } 5895 .text-field__skin-button { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: none; color: var(--control-colors-end-icon-default); transition: color var(--timings-default) var(--easings-ease); } 5896 @media (hover: hover) and (pointer: fine) { 5897 .text-field__skin-button:hover { color: var(--control-colors-end-icon-action); } 5898} 5899 @media (hover: none) and (pointer: coarse) { 5900 .text-field__skin-button:active { color: var(--control-colors-end-icon-action); } 5901} 5902 .text-field__skin-button-icon { display: block; width: 100%; height: 100%; } 5903 .text-field__skin-button-icon > path { fill: currentcolor; } 5904 @media (hover: hover) and (pointer: fine) { 5905 .text-field--interactive:hover + .text-field__skin-placeholder-icon { color: var(--control-colors-start-icon-action); } 5906} 5907 @media (hover: none) and (pointer: coarse) { 5908 .text-field--interactive:active + .text-field__skin-placeholder-icon { color: var(--control-colors-start-icon-action); } 5909} 5910 .text-field--filled + .text-field__skin-placeholder-icon { color: var(--control-colors-start-icon-active); } 5911 @media (hover: hover) and (pointer: fine) { 5912 .text-field--filled:hover + .text-field__skin-placeholder-icon { color: var(--control-colors-start-icon-active-action); } 5913} 5914 @media (hover: none) and (pointer: coarse) { 5915 .text-field--filled:active + .text-field__skin-placeholder-icon { color: var(--control-colors-start-icon-active-action); } 5916} 5917 .text-field--with-glassy-effect { position: relative; z-index: 0; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; --text-field-bg-override: transparent; } 5918 .text-field--with-glassy-effect .text-field__control:not(:where(.text-field--error, .text-field--warning, .text-field--success)) { border-color: transparent; } 5919 .text-field__glass { position: relative; overflow: hidden; background-color: var(--effects-glassy-tint); border: 1px solid var(--effects-glassy-highlight-border); box-shadow: var(--effects-glassy-shadow),var(--effects-glassy-inner-shadow); backdrop-filter: var(--effects-glassy-backdrop); border-block-start: 0px; border-inline-start: 0px; } 5920 .text-field__glass::before, .text-field__glass::after { content: ""; position: absolute; pointer-events: none; } 5921 .text-field__glass::before { inset-block-start: 0px; inset-inline: 10%; height: var(--effects-glassy-border-width); background: var(--effects-glassy-edge-top); } 5922 .text-field__glass::after { inset-block: 0px; inset-inline-start: 0px; width: var(--effects-glassy-border-width); background: var(--effects-glassy-edge-side); } 5923 .text-field__glass { position: absolute; inset: 0px; z-index: -1; border-radius: var(--corner-radius-r8); pointer-events: none; } 5924} 5925@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5926@layer ds-atoms { 5927 .image-frame { position: relative; display: inline-grid; overflow: hidden; width: var(--imageframe-width); height: var(--imageframe-height); border-radius: var(--imageframe-border-radius, 0); } 5928 .image-frame::before { content: ""; position: absolute; inset: 0px; z-index: 1; border: 1px solid var(--background-colors-tint-2); border-radius: var(--imageframe-border-radius, 0); opacity: 0; transition: opacity var(--timings-default) var(--easings-ease); pointer-events: none; } 5929 .image-frame--bg { background-color: var(--background-colors-tint-1); } 5930 .image-frame--interactive { cursor: pointer; } 5931 .image-frame--interactive::before { opacity: 1; } 5932 @media (hover: hover) and (pointer: fine) { 5933 .image-frame--interactive:hover::before { opacity: 0; } 5934} 5935 .image-frame--active-border::before { border-color: var(--primary-colors-base-default); } 5936 @media (hover: hover) and (pointer: fine) { 5937 .image-frame--active-border:hover::before { opacity: 0.7; } 5938} 5939 .image-frame--transparent { background-image: conic-gradient(var(--background-colors-tint-1) 90deg,var(--background-colors-tint-3) 0 180deg,var(--background-colors-tint-1) 0 270deg,var(--background-colors-tint-3) 0); background-size: 8px 8px; background-clip: content-box; padding: var(--spacings-s2); } 5940 .image-frame--disabled { opacity: var(--states-disabled); pointer-events: none; } 5941 .image-frame__content { grid-area: 1 / 1; min-height: 0px; min-width: 0px; pointer-events: none; } 5942 .image-frame__content * { pointer-events: initial; } 5943} 5944@keyframes marching-ants {
5945 0% { background-position: 0px 0px, 0px 100%, 0px 0px, 100% 0px; } 5946 100% { background-position: 20px 0px, -20px 100%, 0px -20px, 100% 20px; } 5947} 5948:root { --rc-drag-handle-size: 12px; --rc-drag-handle-mobile-size: 24px; --rc-drag-handle-bg-colour: #0003; --rc-drag-bar-size: 6px; --rc-border-color: #ffffffb3; --rc-focus-color: #08f; } 5949.ReactCrop { cursor: crosshair; max-width: 100%; display: inline-block; position: relative; } 5950.ReactCrop *, .ReactCrop ::before, .ReactCrop ::after { box-sizing: border-box; } 5951.ReactCrop--disabled, .ReactCrop--locked { cursor: inherit; } 5952.ReactCrop__child-wrapper { max-height: inherit; overflow: hidden; } 5953.ReactCrop__child-wrapper > img, .ReactCrop__child-wrapper > video { max-width: 100%; max-height: inherit; display: block; } 5954.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > img, .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > video, .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection { touch-action: none; } 5955.ReactCrop__crop-mask { pointer-events: none; width: calc(100% + 0.5px); height: calc(100% + 0.5px); position: absolute; inset: 0px; } 5956.ReactCrop__crop-selection { cursor: move; position: absolute; top: 0px; left: 0px; transform: translate(0px); } 5957.ReactCrop--disabled .ReactCrop__crop-selection { cursor: inherit; } 5958.ReactCrop--circular-crop .ReactCrop__crop-selection { border-radius: 50%; } 5959.ReactCrop--circular-crop .ReactCrop__crop-selection::after { pointer-events: none; content: ""; border: 1px solid var(--rc-border-color); opacity: 0.3; position: absolute; inset: -1px; } 5960.ReactCrop--no-animate .ReactCrop__crop-selection { outline: rgb(255, 255, 255) dashed 1px; } 5961.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection) { color: rgb(255, 255, 255); background-image: linear-gradient(90deg, rgb(255, 255, 255) 50%, rgb(68, 68, 68) 50%), linear-gradient(90deg, rgb(255, 255, 255) 50%, rgb(68, 68, 68) 50%), linear-gradient(rgb(255, 255, 255) 50%, rgb(68, 68, 68) 50%), linear-gradient(rgb(255, 255, 255) 50%, rgb(68, 68, 68) 50%);
5961 background-position: 0px 0px, 0px 100%, 0px 0px, 100% 0px; background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; background-size: 10px 1px, 10px 1px, 1px 10px, 1px 10px; animation: 1s linear 0s infinite normal none running marching-ants; } 5962.ReactCrop__crop-selection:focus { outline: 2px solid var(--rc-focus-color); outline-offset: -1px; } 5963.ReactCrop--invisible-crop .ReactCrop__crop-mask, .ReactCrop--invisible-crop .ReactCrop__crop-selection { display: none; } 5964.ReactCrop__rule-of-thirds-vt::before, .ReactCrop__rule-of-thirds-vt::after, .ReactCrop__rule-of-thirds-hz::before, .ReactCrop__rule-of-thirds-hz::after { content: ""; background-color: rgba(255, 255, 255, 0.4); display: block; position: absolute; } 5965.ReactCrop__rule-of-thirds-vt::before, .ReactCrop__rule-of-thirds-vt::after { width: 1px; height: 100%; } 5966.ReactCrop__rule-of-thirds-vt::before { left: 33.3333%; } 5967.ReactCrop__rule-of-thirds-vt::after { left: 66.6667%; } 5968.ReactCrop__rule-of-thirds-hz::before, .ReactCrop__rule-of-thirds-hz::after { width: 100%; height: 1px; } 5969.ReactCrop__rule-of-thirds-hz::before { top: 33.3333%; } 5970.ReactCrop__rule-of-thirds-hz::after { top: 66.6667%; } 5971.ReactCrop__drag-handle { width: var(--rc-drag-handle-size); height: var(--rc-drag-handle-size); background-color: var(--rc-drag-handle-bg-colour); border: 1px solid var(--rc-border-color); position: absolute; } 5972.ReactCrop__drag-handle:focus { background: var(--rc-focus-color); } 5973.ReactCrop .ord-nw { cursor: nw-resize; top: 0px; left: 0px; transform: translate(-50%, -50%); } 5974.ReactCrop .ord-n { cursor: n-resize; top: 0px; left: 50%; transform: translate(-50%, -50%); } 5975.ReactCrop .ord-ne { cursor: ne-resize; top: 0px; right: 0px; transform: translate(50%, -50%); } 5976.ReactCrop .ord-e { cursor: e-resize; top: 50%; right: 0px; transform: translate(50%, -50%); } 5977.ReactCrop .ord-se { cursor: se-resize; bottom: 0px; right: 0px; transform: translate(50%, 50%); } 5978.ReactCrop .ord-s { cursor: s-resize; bottom: 0px; left: 50%; transform: translate(-50%, 50%); } 5979.ReactCrop .ord-sw { cursor: sw-resize; bottom: 0px; left: 0px; transform: translate(-50%, 50%); } 5980.ReactCrop .ord-w { cursor: w-resize; top: 50%; left: 0px; transform: translate(-50%, -50%); } 5981.ReactCrop__disabled .ReactCrop__drag-handle { cursor: inherit; } 5982.ReactCrop__drag-bar { position: absolute; } 5983.ReactCrop__drag-bar.ord-n { width: 100%; height: var(--rc-drag-bar-size); top: 0px; left: 0px; transform: translateY(-50%); } 5984.ReactCrop__drag-bar.ord-e { width: var(--rc-drag-bar-size); height: 100%; top: 0px; right: 0px; transform: translate(50%); } 5985.ReactCrop__drag-bar.ord-s { width: 100%; height: var(--rc-drag-bar-size); bottom: 0px; left: 0px; transform: translateY(50%); } 5986.ReactCrop__drag-bar.ord-w { width: var(--rc-drag-bar-size); height: 100%; top: 0px; left: 0px; transform: translate(-50%); } 5987.ReactCrop--new-crop .ReactCrop__drag-bar, .ReactCrop--new-crop .ReactCrop__drag-handle, .ReactCrop--fixed-aspect .ReactCrop__drag-bar, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w { display: none; } 5988@media (pointer: coarse) { 5989 .ReactCrop .ord-n, .ReactCrop .ord-e, .ReactCrop .ord-s, .ReactCrop .ord-w { display: none; } 5990 .ReactCrop__drag-handle { width: var(--rc-drag-handle-mobile-size); height: var(--rc-drag-handle-mobile-size); } 5991} 5992@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 5993@layer ds-atoms { 5994 .image { display: block; max-width: 100%; } 5995} 5996.crop-modal__backdrop { position: fixed; inset: 0px; z-index: 9999; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); } 5997@media (max-width: 768px) { 5998 .crop-modal__backdrop { align-items: flex-end; } 5999} 6000.crop-modal__dialog { position: relative; display: flex; flex-direction: column; background-color: var(--background-colors-base); border-radius: var(--corner-radius-r12); border: 1px solid var(--background-colors-border); box-shadow: rgba(0, 0, 0, 0.24) 0px 8px 32px; padding: var(--spacings-s24) 124px; gap: var(--spacings-s16); width: 700px; max-width: 95vw; height: 620px; max-height: 85vh; min-height: 0px; } 6001@media (max-width: 768px) { 6002 .crop-modal__dialog { width: 100%; height: 85vh; max-width: 100%; max-height: 85vh; border-radius: 16px 16px 0px 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px -4px 24px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: var(--spacings-s24) var(--spacings-s16) var(--spacings-s24); } 6003} 6004.crop-modal__close-btn { position: absolute; top: 0px; right: 0px; transform: translate(50%, -50%); z-index: 1; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; border-radius: 50% !important; min-width: 36px !important; width: 36px !important; height: 36px !important; padding: 0px !important; } 6005@media (max-width: 768px) { 6006 .crop-modal__close-btn { top: var(--spacings-s24); right: var(--spacings-s16); transform: none; box-shadow: none; } 6007} 6008.crop-modal__header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--spacings-s6); padding-bottom: var(--spacings-s8); } 6009@media (max-width: 768px) { 6010 .crop-modal__header { align-items: flex-start; text-align: left; padding-right: 44px; } 6011} 6012.crop-modal__header-title { font-family: Bangers, cursive; font-weight: 400;
6012 line-height: 26px; margin: 0px; } 6013@media (max-width: 768px) { 6014 .crop-modal__header-title { font-size: var(--typography-t5-font-size); line-height: 20px; } 6015} 6016.crop-modal__header-subtitle { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); font-weight: 500; line-height: 20px; color: var(--text-colors-tint-1); margin: 0px; } 6017@media (max-width: 768px) { 6018 .crop-modal__header-subtitle { font-size: var(--typography-t3-font-size); line-height: 16px; } 6019} 6020.crop-modal__crop-container { flex: 1 1 0%; min-height: 0px; overflow: hidden; display: flex; align-items: center; justify-content: center; } 6021.crop-modal__react-crop { max-width: 100%; max-height: 100%; overflow: hidden; } 6022@media (max-width: 768px) { 6023 .crop-modal__react-crop { max-height: 55vh; } 6024} 6025.crop-modal__crop-image { display: block; width: auto; height: auto; max-width: 100%; } 6026.crop-modal__footer { display: flex; align-items: center; justify-content: center; } 6027.crop-modal__done-btn { min-width: 118px; height: 40px; } 6028@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 6029@layer ds-molecules { 6030 .segments { display: grid; grid-template-rows: 1fr; grid-template-columns: var(--seg-cols, repeat(1, 1fr)); list-style-type: none; border-radius: var(--corner-radius-r12); background-color: var(--background-colors-base); } 6031 .segments--large { column-gap: var(--spacings-s4); padding: var(--spacings-s4); } 6032 .segments--large.segments--bordered { padding: calc(var(--spacings-s4) - 1px); } 6033 .segments--small { column-gap: var(--spacings-s4); padding: var(--spacings-s2); } 6034 .segments--small.segments--bordered { padding: calc(var(--spacings-s4) - 1px); } 6035 .segments--bordered { border: 1px solid var(--background-colors-border); } 6036 .segments__item { min-width: 0px; } 6037} 6038.story-types { display: flex; flex-direction: column; gap: var(--spacings-s12); } 6039.story-types__tier { display: flex; flex-direction: column; gap: var(--spacings-s4); } 6040.story-types__title { font-family: Bangers, cursive; font-size: 16px; line-height: 24px; letter-spacing: 0.5px; color: var(--absolute-white-colors-base-default); margin: 0px; user-select: none; } 6041.story-types__carousel { display: flex; gap: var(--spacings-s8); overflow: auto hidden; } 6042@media (pointer: fine) { 6043 .story-types__carousel::-webkit-scrollbar { width: 4px; height: 0px; } 6044 .story-types__carousel::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; } 6045 .story-types__carousel::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r4); background-color: var(--background-colors-border); } 6046 .story-types__carousel::-webkit-scrollbar-corner { background: transparent; } 6047} 6048@supports (-moz-appearance: none) { 6049 .story-types__carousel { scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 6050} 6051@media (pointer: coarse) { 6052 .story-types__carousel::-webkit-scrollbar { display: none; } 6053} 6054.story-types__carousel { scrollbar-width: none; } 6055.story-types__carousel::-webkit-scrollbar { display: none; } 6056.story-types__carousel--fade-end { mask-image: linear-gradient(to right,#000 calc(100% - var(--spacings-s24)),transparent 100%); } 6057.story-types__carousel--fade-start { mask-image: linear-gradient(to left,#000 calc(100% - var(--spacings-s24)),transparent 100%); } 6058.story-types__carousel--fade-both { mask-image: linear-gradient(to right,transparent 0,#000 var(--spacings-s24),#000 calc(100% - var(--spacings-s24)),transparent 100%); } 6059.story-types__carousel-wrap { position: relative; } 6060.story-types__arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: var(--corner-radius-circle); background: var(--background-colors-tint-3); color: var(--absolute-white-colors-base-default); } 6061.story-types__arrow .button__icon { flex-basis: 16px; width: 16px; height: 16px; } 6062.story-types__arrow { cursor: pointer; transition: opacity 0.12s; } 6063.story-types__arrow:hover { background: var(--background-colors-tint-2); } 6064.story-types__arrow:active { opacity: 0.8; } 6065.story-types__arrow:focus-visible { outline: 2px solid var(--background-colors-border); outline-offset: 2px; } 6066.story-types__arrow--start { left: 0px; } 6067.story-types__arrow--end { right: 0px; } 6068.story-types__card { display: flex; flex-direction: column; align-items: center; flex: 1 1 0px; min-width: 88px; height: 64px; gap: var(--spacings-s4); padding: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: none; cursor: pointer; transition: opacity 0.12s; } 6069.story-types__card:active { opacity: 0.8; } 6070.story-types__card:focus-visible { outline: 2px solid var(--background-colors-border); outline-offset: 2px; } 6071.story-types__card-frame { width: 100%; height: 46px; } 6072.story-types__label-text { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t2-font-size); font-weight: 600; line-height: var(--typography-t2-line-height); color: var(--absolute-white-colors-base-default); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0px; max-width: 100%; } 6073.story-types__format-segments { width: 100%; } 6074.story-types__format-icon { display: inline-flex; vertical-align: middle; margin-right: var(--spacings-s4); } 6075.credits-badge__badge { display: inline-flex; align-items: center; gap: var(--spacings-s4); padding: 0px; color: currentcolor; font-family: Picsart-Fonts, sans-serif; font-weight: 600; font-size: var(--typography-t3-font-size); line-height: 1; flex-shrink: 0; letter-spacing: 0.01em; } 6076.credits-badge__badge .credits-badge__value { color: currentcolor; letter-spacing: inherit; } 6077.credits-badge__badge .credits-badge__value--sm, .credits-badge__badge--sm { font-size: 11px; } 6078.credits-badge__icon { display: inline-flex; } 6079.button-label { display: inline-flex; align-items: center; gap: var(--spacings-s8); } 6080.button-label > .text { color: currentcolor; font-size: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; letter-spacing: inherit; } 6081.button-label--gap-sm { gap: var(--spacings-s6); } 6082.button-label--center { justify-content: center; } 6083.button-label--fill { flex: 1 1 0%; } 6084@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 6085@layer ds-atoms { 6086 .link { max-width: 100%; } 6087 .link--t1 { font-size: var(--typography-t1-font-size);
6087 line-height: var(--typography-t1-line-height); } 6088 .link--t2 { font-size: var(--typography-t2-font-size); line-height: var(--typography-t2-line-height); } 6089 .link--t3 { font-size: var(--typography-t3-font-size); line-height: var(--typography-t3-line-height); } 6090 .link--t4 { font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); } 6091 .link--t5 { font-size: var(--typography-t5-font-size); line-height: var(--typography-t5-line-height); } 6092 .link--t6 { font-size: var(--typography-t6-font-size); line-height: var(--typography-t6-line-height); } 6093 .link--t7 { font-size: var(--typography-t7-font-size); line-height: var(--typography-t7-line-height); } 6094 .link--t8 { font-size: var(--typography-t8-font-size); line-height: var(--typography-t8-line-height); } 6095 .link--t9 { font-size: var(--typography-t9-font-size); line-height: var(--typography-t9-line-height); } 6096 .link--t10 { font-size: var(--typography-t10-font-size); line-height: var(--typography-t10-line-height); } 6097 .link--color-primary { color: var(--primary-colors-base-default); } 6098 .link--color-neutral { color: var(--neutral-colors-base-default); } 6099 .link--color-plus { color: var(--monetization-plus-colors-base-default); } 6100 .link--color-pro { color: var(--monetization-pro-colors-base-default); } 6101 .link--color-ultra { color: var(--monetization-ultra-colors-base-default); } 6102 .link--color-success { color: var(--success-colors-base-default); } 6103 .link--color-warning { color: var(--warning-colors-base-default); } 6104 .link--color-error { color: var(--error-colors-base-default); } 6105 .link--color-information { color: var(--information-colors-base-default); } 6106 .link--color-positive { color: var(--positive-colors-base-default); } 6107 .link--color-negative { color: var(--negative-colors-base-default); } 6108 .link--color-black { color: var(--absolute-black-colors-base-default); } 6109 .link--color-white { color: var(--absolute-white-colors-base-default); } 6110 .link--color-tint-1 { color: var(--text-colors-tint-1); } 6111 .link--underline { text-decoration: underline; } 6112 .link--prevent-next-line { display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: bottom; } 6113 .link--multi-line-clamp { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: var(--link-max-row-count); } 6114} 6115@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 6116@layer ds-atoms { 6117 .text-area { display: flex; flex-direction: column; row-gap: var(--spacings-s4); border-style: solid; transition-property: background-color, border, color; transition-duration: var(--timings-default); transition-timing-function: var(--easings-ease); height: var(--textarea-container-height, auto); max-height: var(--textarea-max-height, none); } 6118 .text-area--large { border-width: 1px; border-radius: var(--corner-radius-r8); min-height: 40px; } 6119 .text-area--large .text-area__input { font-size: 14px; } 6120 .text-area--small { border-width: 1px; border-radius: var(--corner-radius-r8); min-height: 32px; } 6121 .text-area--small .text-area__input { font-size: 14px; } 6122 .text-area--full-height .text-area__input, .text-area--custom-height .text-area__input { height: 100%; } 6123 .text-area__input { display: block; width: 100%; background-color: inherit; font-family: var(--fonts-gilroy); font-weight: 500; color: inherit; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; resize: none; cursor: auto; line-height: var(--typography-t4-line-height); } 6124 @media (pointer: fine) { 6125 .text-area__input::-webkit-scrollbar { width: 14px; } 6126 .text-area__input::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; } 6127 .text-area__input::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r4); background-color: var(--background-colors-border); } 6128 .text-area__input::-webkit-scrollbar-corner { background: transparent; } 6129} 6130 @supports (-moz-appearance: none) { 6131 .text-area__input { scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 6132} 6133 @media (pointer: coarse) { 6134 .text-area__input::-webkit-scrollbar { display: none; } 6135} 6136 .text-area__input::-webkit-scrollbar-track { margin-block: var(--spacings-s4); } 6137 .text-area__input::-webkit-scrollbar-thumb { background-clip: content-box; border: 4px solid transparent; background-color: var(--control-colors-border-action); border-radius: var(--corner-radius-r12); } 6138 .text-area__action-wrapper { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 32px; } 6139 .text-area__left-side { display: inline-flex; align-items: center; column-gap: var(--spacings-s6); } 6140 .text-area__right-side { display: inline-flex; align-items: center; column-gap: var(--spacings-s6); margin-inline-start: auto; align-self: flex-start; } 6141 .text-area--default-skin { color: var(--control-colors-value-default); border-color: var(--control-colors-border-default); background-color: var(--textarea-bg-override, var(--control-colors-field-background-default)); } 6142 @media (hover: hover) and (pointer: fine) { 6143 .text-area--interactive:hover { color: var(--control-colors-value-action); border-color: var(--control-colors-border-action); background-color: var(--textarea-bg-override, var(--control-colors-field-background-action)); } 6144} 6145 @media (hover: none) and (pointer: coarse) { 6146 .text-area--interactive:active { color: var(--control-colors-value-action); border-color: var(--control-colors-border-action); background-color: var(--textarea-bg-override, var(--control-colors-field-background-action)); } 6147} 6148 .text-area--interactive:focus { color: var(--control-colors-value-active); border-color: var(--control-colors-border-active); background-color: var(--textarea-bg-override, var(--control-colors-field-background-active)); } 6149 .text-area--filled { color: var(--control-colors-value-active); border-color: var(--control-colors-border-active); background-color: var(--textarea-bg-override, var(--control-colors-field-background-active)); } 6150 @media (hover: hover) and (pointer: fine) { 6151 .text-area--filled:hover { border-color: var(--control-colors-border-active-action); background-color: var(--textarea-bg-override, var(--control-colors-field-background-active-action)); } 6152} 6153 @media (hover: none) and (pointer: coarse) { 6154 .text-area--filled:active { border-color: var(--control-colors-border-active-action); background-color: var(--textarea-bg-override, var(--control-colors-field-background-active-action)); } 6155} 6156 .text-area--error { border-color: var(--error-colors-base-default); background-color: var(--textarea-bg-override, var(--control-colors-field-background-default)); } 6157 @media (hover: hover) and (pointer: fine) { 6158 .text-area--error:hover { border-color: var(--error-colors-base-action); } 6159} 6160 @media (hover: none) and (pointer: coarse) { 6161 .text-area--error:active { border-color: var(--error-colors-base-action); } 6162} 6163 .text-area--error-active { border-color: var(--error-colors-base-active); } 6164 @media (hover: hover) and (pointer: fine) { 6165 .text-area--error-active:hover { border-color: var(--error-colors-base-active-action); } 6166} 6167 @media (hover: none) and (pointer: coarse) { 6168 .text-area--error-active:active { border-color: var(--error-colors-base-active-action); } 6169} 6170 .text-area--warning { border-color: var(--warning-colors-base-default); background-color: var(--textarea-bg-override, var(--control-colors-field-background-default)); } 6171 @media (hover: hover) and (pointer: fine) { 6172 .text-area--warning:hover { border-color: var(--warning-colors-base-action); } 6173} 6174 @media (hover: none) and (pointer: coarse) { 6175 .text-area--warning:active { border-color: var(--warning-colors-base-action); } 6176} 6177 .text-area--warning-active { border-color: var(--warning-colors-base-active); } 6178 @media (hover: hover) and (pointer: fine) { 6179 .text-area--warning-active:hover { border-color: var(--warning-colors-base-active-action); } 6180} 6181 @media (hover: none) and (pointer: coarse) { 6182 .text-area--warning-active:active { border-color: var(--warning-colors-base-active-action); } 6183} 6184 .text-area--success { border-color: var(--success-colors-base-default); background-color: var(--textarea-bg-override, var(--control-colors-field-background-default)); } 6185 @media (hover: hover) and (pointer: fine) { 6186 .text-area--success:hover { border-color: var(--success-colors-base-action); } 6187} 6188 @media (hover: none) and (pointer: coarse) { 6189 .text-area--success:active { border-color: var(--success-colors-base-action); } 6190} 6191 .text-area--success-active { border-color: var(--success-colors-base-active); } 6192 @media (hover: hover) and (pointer: fine) { 6193 .text-area--success-active:hover { border-color: var(--success-colors-base-active-action); } 6194} 6195 @media (hover: none) and (pointer: coarse) { 6196 .text-area--success-active:active { border-color: var(--success-colors-base-active-action); } 6197} 6198 .text-area--with-glassy-effect { position: relative; border: 0px; z-index: 0; --textarea-bg-override: transparent; } 6199 .text-area__glass { position: relative; overflow: hidden; background-color: var(--effects-glassy-tint); border: 1px solid var(--effects-glassy-highlight-border); box-shadow: var(--effects-glassy-shadow),var(--effects-glassy-inner-shadow); backdrop-filter: var(--effects-glassy-backdrop); border-block-start: 0px; border-inline-start: 0px; } 6200 .text-area__glass::before, .text-area__glass::after { content: ""; position: absolute; pointer-events: none; } 6201 .text-area__glass::before { inset-block-start: 0px; inset-inline: 10%; height: var(--effects-glassy-border-width); background: var(--effects-glassy-edge-top); } 6202 .text-area__glass::after { inset-block: 0px; inset-inline-start: 0px; width: var(--effects-glassy-border-width); background: var(--effects-glassy-edge-side); } 6203 .text-area__glass { position: absolute; inset: 0px; z-index: -1; border-radius: inherit; pointer-events: none; } 6204 .text-area--without-borders { border-style: none; } 6205 .text-area--disabled { opacity: var(--states-disabled); } 6206} 6207@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 6208@layer ds-molecules { 6209 .chip--skin-default { --border-color: var(--control-colors-border-default); --start-icon-color: var(--control-colors-start-icon-default); --text-color: var(--control-colors-text-default); --end-icon-color: var(--control-colors-end-icon-default); --bg-color: var(--control-colors-button-background-default); } 6210 @media (hover: hover) and (pointer: fine) { 6211 .chip--skin-default:hover { --border-color: var(--control-colors-border-action); --start-icon-color: var(--control-colors-start-icon-action); --text-color: var(--control-colors-text-action); --end-icon-color: var(--control-colors-end-icon-action); --bg-color: var(--control-colors-button-background-action); } 6212} 6213 @media (hover: none) and (pointer: coarse) { 6214 .chip--skin-default:active { --border-color: var(--control-colors-border-action); --start-icon-color: var(--control-colors-start-icon-action); --text-color: var(--control-colors-text-action); --end-icon-color: var(--control-colors-end-icon-action); --bg-color: var(--control-colors-button-background-action); } 6215} 6216 .chip--skin-default-active { --border-color: var(--control-colors-button-background-active); --start-icon-color: var(--control-colors-start-icon-active); --text-color: var(--control-colors-text-active); --end-icon-color: var(--control-colors-end-icon-active); --bg-color: var(--control-colors-button-background-active); } 6217 @media (hover: hover) and (pointer: fine) { 6218 .chip--skin-default-active:hover { --border-color: var(--control-colors-button-background-active-action); --start-icon-color: var(--control-colors-start-icon-active-action); --text-color: var(--control-colors-text-active-action); --end-icon-color: var(--control-colors-end-icon-active-action); --bg-color: var(--control-colors-button-background-active-action); } 6219} 6220 @media (hover: none) and (pointer: coarse) { 6221 .chip--skin-default-active:active { --border-color: var(--control-colors-button-background-active-action); --start-icon-color: var(--control-colors-start-icon-active-action); --text-color: var(--control-colors-text-active-action); --end-icon-color: var(--control-colors-end-icon-active-action); --bg-color: var(--control-colors-button-background-active-action); } 6222} 6223 .chip--skin-primary { --border-color: var(--primary-colors-base-default); --start-icon-color: var(--primary-colors-text-default); --text-color: var(--primary-colors-text-default); --end-icon-color: var(--primary-colors-text-default); --bg-color: var(--primary-colors-base-default); } 6224 @media (hover: hover) and (pointer: fine) { 6225 .chip--skin-primary:hover { --border-color: var(--primary-colors-base-action); --start-icon-color: var(--primary-colors-text-action); --text-color: var(--primary-colors-text-action); --end-icon-color: var(--primary-colors-text-action); --bg-color: var(--primary-colors-base-action); } 6226} 6227 @media (hover: none) and (pointer: coarse) { 6228 .chip--skin-primary:active { --border-color: var(--primary-colors-base-action); --start-icon-color: var(--primary-colors-text-action); --text-color: var(--primary-colors-text-action); --end-icon-color: var(--primary-colors-text-action); --bg-color: var(--primary-colors-base-action); } 6229} 6230 .chip--skin-primary-active { --border-color: var(--primary-colors-base-active); --start-icon-color: var(--primary-colors-text-active); --text-color: var(--primary-colors-text-active); --end-icon-color: var(--primary-colors-text-active); --bg-color: var(--primary-colors-base-active); } 6231 @media (hover: hover) and (pointer: fine) { 6232 .chip--skin-primary-active:hover { --border-color: var(--primary-colors-base-active-action); --start-icon-color: var(--primary-colors-text-active-action); --text-color: var(--primary-colors-text-active-action); --end-icon-color: var(--primary-colors-text-active-action); --bg-color: var(--primary-colors-base-active-action); } 6233} 6234 @media (hover: none) and (pointer: coarse) { 6235 .chip--skin-primary-active:active { --border-color: var(--primary-colors-base-active-action); --start-icon-color: var(--primary-colors-text-active-action); --text-color: var(--primary-colors-text-active-action); --end-icon-color: var(--primary-colors-text-active-action); --bg-color: var(--primary-colors-base-active-action); } 6236} 6237 .chip--skin-secondary { --border-color: var(--primary-colors-base-default); --start-icon-color: var(--primary-colors-text-default); --text-color: var(--primary-colors-text-default); --end-icon-color: var(--primary-colors-text-default); --bg-color: var(--primary-colors-base-default); } 6238 @media (hover: hover) and (pointer: fine) { 6239 .chip--skin-secondary:hover { --border-color: var(--primary-colors-base-action); --start-icon-color: var(--primary-colors-text-action); --text-color: var(--primary-colors-text-action); --end-icon-color: var(--primary-colors-text-action); --bg-color: var(--primary-colors-base-action); } 6240} 6241 @media (hover: none) and (pointer: coarse) { 6242 .chip--skin-secondary:active { --border-color: var(--primary-colors-base-action); --start-icon-color: var(--primary-colors-text-action); --text-color: var(--primary-colors-text-action); --end-icon-color: var(--primary-colors-text-action); --bg-color: var(--primary-colors-base-action); } 6243} 6244 .chip--skin-secondary-active { --border-color: var(--primary-colors-base-active); --start-icon-color: var(--primary-colors-text-active); --text-color: var(--primary-colors-text-active); --end-icon-color: var(--primary-colors-text-active); --bg-color: var(--primary-colors-base-active); } 6245 @media (hover: hover) and (pointer: fine) { 6246 .chip--skin-secondary-active:hover { --border-color: var(--primary-colors-base-active-action); --start-icon-color: var(--primary-colors-text-active-action); --text-color: var(--primary-colors-text-active-action); --end-icon-color: var(--primary-colors-text-active-action); --bg-color: var(--primary-colors-base-active-action); } 6247} 6248 @media (hover: none) and (pointer: coarse) { 6249 .chip--skin-secondary-active:active { --border-color: var(--primary-colors-base-active-action); --start-icon-color: var(--primary-colors-text-active-action); --text-color: var(--primary-colors-text-active-action); --end-icon-color: var(--primary-colors-text-active-
6249action); --bg-color: var(--primary-colors-base-active-action); } 6250} 6251 .chip--skin-tertiary { --border-color: var(--neutral-colors-base-default); --start-icon-color: var(--neutral-colors-text-default); --text-color: var(--neutral-colors-text-default); --end-icon-color: var(--neutral-colors-text-default); --bg-color: var(--neutral-colors-base-default); } 6252 @media (hover: hover) and (pointer: fine) { 6253 .chip--skin-tertiary:hover { --border-color: var(--neutral-colors-base-action); --start-icon-color: var(--neutral-colors-text-action); --text-color: var(--neutral-colors-text-action); --end-icon-color: var(--neutral-colors-text-action); --bg-color: var(--neutral-colors-base-action); } 6254} 6255 @media (hover: none) and (pointer: coarse) { 6256 .chip--skin-tertiary:active { --border-color: var(--neutral-colors-base-action); --start-icon-color: var(--neutral-colors-text-action); --text-color: var(--neutral-colors-text-action); --end-icon-color: var(--neutral-colors-text-action); --bg-color: var(--neutral-colors-base-action); } 6257} 6258 .chip--skin-tertiary-active { --border-color: var(--neutral-colors-base-active); --start-icon-color: var(--neutral-colors-text-active); --text-color: var(--neutral-colors-text-active); --end-icon-color: var(--neutral-colors-text-active); --bg-color: var(--neutral-colors-base-active); } 6259 @media (hover: hover) and (pointer: fine) { 6260 .chip--skin-tertiary-active:hover { --border-color: var(--neutral-colors-base-active-action); --start-icon-color: var(--neutral-colors-text-active-action); --text-color: var(--neutral-colors-text-active-action); --end-icon-color: var(--neutral-colors-text-active-action); --bg-color: var(--neutral-colors-base-active-action); } 6261} 6262 @media (hover: none) and (pointer: coarse) { 6263 .chip--skin-tertiary-active:active { --border-color: var(--neutral-colors-base-active-action); --start-icon-color: var(--neutral-colors-text-active-action); --text-color: var(--neutral-colors-text-active-action); --end-icon-color: var(--neutral-colors-text-active-action); --bg-color: var(--neutral-colors-base-active-action); } 6264} 6265 .chip--skin-positive { --border-color: var(--positive-colors-base-default); --start-icon-color: var(--positive-colors-text-default); --text-color: var(--positive-colors-text-default); --end-icon-color: var(--positive-colors-text-default); --bg-color: var(--positive-colors-base-default); } 6266 @media (hover: hover) and (pointer: fine) { 6267 .chip--skin-positive:hover { --border-color: var(--positive-colors-base-action); --start-icon-color: var(--positive-colors-text-action); --text-color: var(--positive-colors-text-action); --end-icon-color: var(--positive-colors-text-action); --bg-color: var(--positive-colors-base-action); } 6268} 6269 @media (hover: none) and (pointer: coarse) { 6270 .chip--skin-positive:active { --border-color: var(--positive-colors-base-action); --start-icon-color: var(--positive-colors-text-action); --text-color: var(--positive-colors-text-action); --end-icon-color: var(--positive-colors-text-action); --bg-color: var(--positive-colors-base-action); } 6271} 6272 .chip--skin-positive-active { --border-color: var(--positive-colors-base-active); --start-icon-color: var(--positive-colors-text-active); --text-color: var(--positive-colors-text-active); --end-icon-color: var(--positive-colors-text-active); --bg-color: var(--positive-colors-base-active); } 6273 @media (hover: hover) and (pointer: fine) { 6274 .chip--skin-positive-active:hover { --border-color: var(--positive-colors-base-active-action); --start-icon-color: var(--positive-colors-text-active-action); --text-color: var(--positive-colors-text-active-action); --end-icon-color: var(--positive-colors-text-active-action); --bg-color: var(--positive-colors-base-active-action); } 6275} 6276 @media (hover: none) and (pointer: coarse) { 6277 .chip--skin-positive-active:active { --border-color: var(--positive-colors-base-active-action); --start-icon-color: var(--positive-colors-text-active-action); --text-color: var(--positive-colors-text-active-action); --end-icon-color: var(--positive-colors-text-active-action); --bg-color: var(--positive-colors-base-active-action); } 6278} 6279 .chip--skin-negative { --border-color: var(--negative-colors-base-default); --start-icon-color: var(--negative-colors-text-default); --text-color: var(--negative-colors-text-default); --end-icon-color: var(--negative-colors-text-default); --bg-color: var(--negative-colors-base-default); } 6280 @media (hover: hover) and (pointer: fine) { 6281 .chip--skin-negative:hover { --border-color: var(--negative-colors-base-action); --start-icon-color: var(--negative-colors-text-action); --text-color: var(--negative-colors-text-action); --end-icon-color: var(--negative-colors-text-action); --bg-color: var(--negative-colors-base-action); } 6282} 6283 @media (hover: none) and (pointer: coarse) { 6284 .chip--skin-negative:active { --border-color: var(--negative-colors-base-action); --start-icon-color: var(--negative-colors-text-action); --text-color: var(--negative-colors-text-action); --end-icon-color: var(--negative-colors-text-action); --bg-color: var(--negative-colors-base-action); } 6285} 6286 .chip--skin-negative-active { --border-color: var(--negative-colors-base-active); --start-icon-color: var(--negative-colors-text-active); --text-color: var(--negative-colors-text-active); --end-icon-color: var(--negative-colors-text-active); --bg-color: var(--negative-colors-base-active); } 6287 @media (hover: hover) and (pointer: fine) { 6288 .chip--skin-negative-active:hover { --border-color: var(--negative-colors-base-active-action); --start-icon-color: var(--negative-colors-text-active-action); --text-color: var(--negative-colors-text-active-action); --end-icon-color: var(--negative-colors-text-active-action); --bg-color: var(--negative-colors-base-active-action); } 6289} 6290 @media (hover: none) and (pointer: coarse) { 6291 .chip--skin-negative-active:active { --border-color: var(--negative-colors-base-active-action); --start-icon-color: var(--negative-colors-text-active-action); --text-color: var(--negative-colors-text-active-action); --end-icon-color: var(--negative-colors-text-active-action); --bg-color: var(--negative-colors-base-active-action); } 6292} 6293 .chip--skin-success { --border-color: var(--success-colors-base-default); --start-icon-color: var(--success-colors-text-default); --text-color: var(--success-colors-text-default); --end-icon-color: var(--success-colors-text-default); --bg-color: var(--success-colors-base-default); } 6294 @media (hover: hover) and (pointer: fine) { 6295 .chip--skin-success:hover { --border-color: var(--success-colors-base-action); --start-icon-color: var(--success-colors-text-action); --text-color: var(--success-colors-text-action); --end-icon-color: var(--success-colors-text-action); --bg-color: var(--success-colors-base-action); } 6296} 6297 @media (hover: none) and (pointer: coarse) { 6298 .chip--skin-success:active { --border-color: var(--success-colors-base-action); --start-icon-color: var(--success-colors-text-action); --text-color: var(--success-colors-text-action); --end-icon-color: var(--success-colors-text-action); --bg-color: var(--success-colors-base-action); } 6299} 6300 .chip--skin-success-active { --border-color: var(--success-colors-base-active); --start-icon-color: var(--success-colors-text-active); --text-color: var(--success-colors-text-active); --end-icon-color: var(--success-colors-text-active); --bg-color: var(--success-colors-base-active); } 6301 @media (hover: hover) and (pointer: fine) { 6302 .chip--skin-success-active:hover { --border-color: var(--success-colors-base-active-action); --start-icon-color: var(--success-colors-text-active-action); --text-color: var(--success-colors-text-active-action); --end-icon-color: var(--success-colors-text-active-action); --bg-color: var(--success-colors-base-active-action); } 6303} 6304 @media (hover: none) and (pointer: coarse) { 6305 .chip--skin-success-active:active { --border-color: var(--success-colors-base-active-action); --start-icon-color: var(--success-colors-text-active-action); --text-color: var(--success-colors-text-active-action); --end-icon-color: var(--success-colors-text-active-action); --bg-color: var(--success-colors-base-active-action); } 6306} 6307 .chip--skin-warning { --border-color: var(--warning-colors-base-default); --start-icon-color: var(--warning-colors-text-default); --text-color: var(--warning-colors-text-default); --end-icon-color: var(--warning-colors-text-default); --bg-color: var(--warning-colors-base-default); } 6308 @media (hover: hover) and (pointer: fine) { 6309 .chip--skin-warning:hover { --border-color: var(--warning-colors-base-action); --start-icon-color: var(--warning-colors-text-action); --text-color: var(--warning-colors-text-action); --end-icon-color: var(--warning-colors-text-action); --bg-color: var(--warning-colors-base-action); } 6310} 6311 @media (hover: none) and (pointer: coarse) { 6312 .chip--skin-warning:active { --border-color: var(--warning-colors-base-action); --start-icon-color: var(--warning-colors-text-action); --text-color: var(--warning-colors-text-action); --end-icon-color: var(--warning-colors-text-action); --bg-color: var(--warning-colors-base-action); } 6313} 6314 .chip--skin-warning-active { --border-color: var(--warning-colors-base-active); --start-icon-color: var(--warning-colors-text-active); --text-color: var(--warning-colors-text-active); --end-icon-color: var(--warning-colors-text-active); --bg-color: var(--warning-colors-base-active); } 6315 @media (hover: hover) and (pointer: fine) { 6316 .chip--skin-warning-active:hover { --border-color: var(--warning-colors-base-active-action); --start-icon-color: var(--warning-colors-text-active-action); --text-color: var(--warning-colors-text-active-action); --end-icon-color: var(--warning-colors-text-active-action); --bg-color: var(--warning-colors-base-active-action); } 6317} 6318 @media (hover: none) and (pointer: coarse) { 6319 .chip--skin-warning-active:active { --border-color: var(--warning-colors-base-active-action); --start-icon-color: var(--warning-colors-text-active-action); --text-color: var(--warning-colors-text-active-action); --end-icon-color: var(--warning-colors-text-active-action); --bg-color: var(--warning-colors-base-active-action); } 6320} 6321 .chip--skin-error { --border-color: var(--error-colors-base-default); --start-icon-color: var(--error-colors-text-default); --text-color: var(--error-colors-text-default); --end-icon-color: var(--error-colors-text-default); --bg-color: var(--error-colors-base-default); } 6322 @media (hover: hover) and (pointer: fine) { 6323 .chip--skin-error:hover { --border-color: var(--error-colors-base-action); --start-icon-color: var(--error-colors-text-action); --text-color: var(--error-colors-text-action); --end-icon-color: var(--error-colors-text-action); --bg-color: var(--error-colors-base-action); } 6324} 6325 @media (hover: none) and (pointer: coarse) { 6326 .chip--skin-error:active { --border-color: var(--error-colors-base-action); --start-icon-color: var(--error-colors-text-action); --text-color: var(--error-colors-text-action); --end-icon-color: var(--error-colors-text-action); --bg-color: var(--error-colors-base-action); } 6327} 6328 .chip--skin-error-active { --border-color: var(--error-colors-base-active); --start-icon-color: var(--error-colors-text-active); --text-color: var(--error-colors-text-active); --end-icon-color: var(--error-colors-text-active); --bg-color: var(--error-colors-base-active); } 6329 @media (hover: hover) and (pointer: fine) { 6330 .chip--skin-error-active:hover { --border-color: var(--error-colors-base-active-action); --start-icon-color: var(--error-colors-text-active-action); --text-color: var(--error-colors-text-active-action); --end-icon-color: var(--error-colors-text-active-action); --bg-color: var(--error-colors-base-active-action); } 6331} 6332 @media (hover: none) and (pointer: coarse) { 6333 .chip--skin-error-active:active { --border-color: var(--error-colors-base-active-action); --start-icon-color: var(--error-colors-text-active-action); --text-color: var(--error-colors-text-active-action); --end-icon-color: var(--error-colors-text-active-action); --bg-color: var(--error-colors-base-active-action); } 6334} 6335 @keyframes chip-rotate { 6336 100% { transform: rotate(360deg); } 6337} 6338 .chip { display: inline-grid; align-items: center; justify-content: center; vertical-align: top; max-width: 100%; background-color: var(--bg-color); border-style: solid; border-color: var(--border-color); transition-property: background-color, border; transition-timing-function: var(--easings-ease); transition-duration: var(--timings-default); cursor: pointer; overflow: hidden; position: relative; grid-template-columns: var(--chip-grid-cols, auto); width: var(--chip-width, auto); pointer-events: var(--chip-pointer-events, auto); } 6339 .chip--large { height: 40px; border-width: 1px; border-radius: var(--corner-radius-r8); column-gap: var(--spacings-s2); font-weight: 600; font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); } 6340 .chip--large .chip__interactive-area { gap: var(--spacings-s2); padding: calc(var(--spacings-s10) - 1px) calc(var(--spacings-s10) - 1px);
6340 padding-inline-end: var(--chip-ia-pie, calc(var(--spacings-s10) - 1px)); } 6341 .chip--large .chip__icon-holder { flex: 0 0 20px; width: 20px; height: 20px; } 6342 .chip--large .chip__text { padding: var(--spacings-s0) var(--spacings-s2); } 6343 .chip--large .chip__badge { margin: 0 var(--spacings-s2); } 6344 .chip--large .chip__dismiss-button, .chip--large .chip__dismiss-icon { width: 40px; height: 40px; } 6345 .chip--large .chip__dismiss-icon { width: 20px; height: 20px; } 6346 .chip--small { height: 32px; border-width: 1px; border-radius: var(--corner-radius-r8); column-gap: var(--spacings-s2); font-weight: 600; font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); } 6347 .chip--small .chip__interactive-area { gap: var(--spacings-s2); padding: calc(var(--spacings-s6) - 1px) calc(var(--spacings-s6) - 1px); padding-inline-end: var(--chip-ia-pie, calc(var(--spacings-s6) - 1px)); } 6348 .chip--small .chip__icon-holder { flex: 0 0 20px; width: 20px; height: 20px; } 6349 .chip--small .chip__text { padding: var(--spacings-s0) var(--spacings-s2); } 6350 .chip--small .chip__badge { margin: 0 var(--spacings-s2); } 6351 .chip--small .chip__dismiss-button { width: 32px; height: 32px; } 6352 .chip--small .chip__dismiss-icon { width: 20px; height: 20px; } 6353 .chip__interactive-area { min-width: 0px; display: flex; align-items: center; visibility: var(--chip-ia-visibility, visible); } 6354 .chip__icon { display: block; width: 100%; height: 100%; } 6355 .chip__icon-holder { min-width: 0px; } 6356 .chip__icon-holder path { fill: var(--start-icon-color); transition: fill var(--timings-default) var(--easings-ease); } 6357 .chip__loading-icon { animation: chip-rotate var(--timings-long) var(--easings-linear) infinite; } 6358 .chip__loading-icon-layout { position: absolute; inset: 0px; margin: auto; fill: var(--end-icon-color); width: 24px; height: 24px; } 6359 .chip__text-wrap { min-width: 0px; flex-grow: 1; color: var(--text-color); text-align: center; word-break: break-all; } 6360 .chip__text { width: 100%; color: var(--text-color); text-align: center; word-break: break-all; max-width: 100%; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; transition: color var(--timings-default) var(--easings-ease); } 6361 .chip__badge { min-width: 0px; } 6362 .chip__dismiss-button { display: grid; place-items: center; min-width: 0px; cursor: pointer; } 6363 .chip__dismiss-icon path { fill: var(--end-icon-color); transition: fill var(--timings-default) var(--easings-ease); } 6364} 6365@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 6366@layer ds-atoms { 6367 .loader { display: flex; width: 100%; height: 100%; inset: 0px; z-index: var(--loader-z-index, 1); background-color: var(--loader-bg-color, transparent); } 6368 .loader--local { position: absolute; } 6369 .loader--global { position: fixed; } 6370 .loader--no-bg { background-color: transparent; } 6371 @keyframes loader-rotate { 6372 100% { transform: rotate(360deg); } 6373} 6374 .loader__icon { display: inline-block; margin: auto; animation: loader-rotate var(--timings-long) var(--easings-linear) infinite; } 6375 .loader__icon path { fill: var(--primary-colors-base-default); } 6376 .loader--large .loader__icon { width: 48px; height: 48px; } 6377 .loader--small .loader__icon { width: 24px; height: 24px; } 6378} 6379.sidebar { box-sizing: border-box; width: 100%; height: 100%; background-color: var(--background-colors-base); display: flex; flex-direction: column; overflow: hidden; } 6380.sidebar--blocked { pointer-events: none; } 6381.sidebar--mobile { height: 100%; width: 100%; min-width: 100%; max-width: 100%; } 6382.sidebar__content { flex: 1 1 0%; min-height: 0px; overflow: hidden auto; margin-top: var(--spacings-s16); display: flex; flex-direction: column; padding: 0 var(--spacings-s16) var(--spacings-s16); } 6383@media (pointer: fine) { 6384 .sidebar__content::-webkit-scrollbar { width: 4px; height: 4px; } 6385 .sidebar__content::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; } 6386 .sidebar__content::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r4); background-color: var(--background-colors-border); } 6387 .sidebar__content::-webkit-scrollbar-corner { background: transparent; } 6388} 6389@supports (-moz-appearance: none) { 6390 .sidebar__content { scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 6391} 6392@media (pointer: coarse) { 6393 .sidebar__content::-webkit-scrollbar { display: none; } 6394} 6395.sidebar--mobile .sidebar__content { padding: 0px; margin-top: var(--spacings-s8); } 6396.sidebar--mobile .sidebar__story-types-bar { padding: 0px; position: sticky; top: 0px; z-index: 3; background-color: var(--background-colors-base); } 6397.sidebar--mobile .sidebar__story-types-bar--scrollable { position: static; } 6398.sidebar__story-types-bar { display: flex; flex-direction: column; gap: var(--spacings-s12); padding: var(--spacings-s16) var(--spacings-s16) 0; flex-shrink: 0; overflow-x: auto; } 6399@media (pointer: fine) { 6400 .sidebar__story-types-bar::-webkit-scrollbar { width: 4px; height: 0px; } 6401 .sidebar__story-types-bar::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; } 6402 .sidebar__story-types-bar::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r4); background-color: var(--background-colors-border); } 6403 .sidebar__story-types-bar::-webkit-scrollbar-corner { background: transparent; } 6404} 6405@supports (-moz-appearance: none) { 6406 .sidebar__story-types-bar { scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 6407} 6408@media (pointer: coarse) { 6409 .sidebar__story-types-bar::-webkit-scrollbar { display: none; } 6410} 6411.sidebar__story-types-bar { scrollbar-width: none; } 6412.sidebar__story-types-bar::-webkit-scrollbar { display: none; } 6413.sidebar__upload-section { display: flex; flex-direction: column; gap: var(--spacings-s12); width: 100%; } 6414.sidebar__upload-heading-block { display: flex; flex-direction: column; gap: var(--spacings-s2); } 6415.sidebar__upload-heading { font-family: Bangers, cursive; font-size: var(--typography-t5-font-size); line-height: var(--typography-t5-line-height); letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-colors-base); margin: 0px; } 6416.sidebar__upload-cards { display: flex; flex-flow: wrap; gap: var(--spacings-s8); width: 100%; } 6417.sidebar__upload-cards--scrollable { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; } 6418@media (pointer: fine) { 6419 .sidebar__upload-cards--scrollable::-webkit-scrollbar { width: 4px; height: 0px; } 6420 .sidebar__upload-cards--scrollable::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; } 6421 .sidebar__upload-cards--scrollable::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r4); background-color: var(--background-colors-border); } 6422 .sidebar__upload-cards--scrollable::-webkit-scrollbar-corner { background: transparent; } 6423} 6424@supports (-moz-appearance: none) { 6425 .sidebar__upload-cards--scrollable { scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 6426} 6427@media (pointer: coarse) { 6428 .sidebar__upload-cards--scrollable::-webkit-scrollbar { display: none; } 6429} 6430.sidebar__upload-cards--scrollable { scrollbar-width: none; } 6431.sidebar__upload-cards--scrollable::-webkit-scrollbar { display: none; } 6432.sidebar__upload-card-arrow-wrap { position: relative; width: 100%; } 6433.sidebar__upload-card-arrow { position: absolute; top: 50%; right: var(--spacings-s8); transform: translateY(-50%); z-index: 2; width: 32px; height: 32px; border-radius: 50%; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background-color: rgba(0, 0, 0, 0.55); color: var(--absolute-white-colors-base-default); display: flex; align-items: center; justify-content: center; cursor: pointer; appearance: none; padding: 0px; } 6434.sidebar__upload-card-col { flex: 0 0 calc(50% - var(--spacings-s8) / 2); min-width: 0px; display: flex; flex-direction: column; gap: var(--spacings-s8); scroll-snap-align: start; } 6435.sidebar--mobile .sidebar__upload-card { aspect-ratio: auto; height: 136px; } 6436.sidebar__upload-card { appearance: none; font: inherit; position: relative; width: 100%; aspect-ratio: 1 / 1; box-sizing: border-box; border-radius: var(--corner-radius-r8); border: 1px dashed var(--background-colors-tint-3); background-color: var(--background-colors-tint-1); display: flex; align-items: flex-end; justify-content: center; padding: var(--spacings-s10); color: var(--text-colors-base); cursor: pointer; overflow: hidden; transition: border-color 0.15s; } 6437.sidebar__upload-card:hover { border-color: var(--primary-colors-base-default); } 6438.sidebar__upload-card:focus-visible { outline: 2px solid var(--primary-colors-base-default); outline-offset: 2px; } 6439.sidebar__upload-card--hero { background-image: image-set(url("https://cdn-cms-uploads.picsart.com/cms-uploads/96a94082-fc02-41ed-a2a9-91f4d10b4773.png?to=max&r=160&format=webp") 1x, url("https://cdn-cms-uploads.picsart.com/cms-uploads/96a94082-fc02-41ed-a2a9-91f4d10b4773.png?to=max&r=320&format=webp") 2x); background-size: cover; background-position: center center; background-repeat: no-repeat; } 6440.sidebar__upload-card--nemesis { background-image: image-set(url("https://cdn-cms-uploads.picsart.com/cms-uploads/b207b8a3-b4eb-4ff0-b491-55aea41fa43c.png?to=max&r=160&format=webp") 1x, url("https://cdn-cms-uploads.picsart.com/cms-uploads/b207b8a3-b4eb-4ff0-b491-55aea41fa43c.png?to=max&r=320&format=webp") 2x); background-size: cover; background-position: center center; background-repeat: no-repeat; } 6441.sidebar__upload-card--tale-hero { background-image: image-set(url("https://cdn-cms-uploads.picsart.com/cms-uploads/766990d0-96e8-4c7e-81a7-8c36c2597285.png?to=max&r=160&format=webp") 1x, url("https://cdn-cms-uploads.picsart.com/cms-uploads/766990d0-96e8-4c7e-81a7-8c36c2597285.png?to=max&r=320&format=webp") 2x); background-size: cover; background-position: center center; background-repeat: no-repeat; } 6442.sidebar__upload-card--tale-companion { background-image: image-set(url("https://cdn-cms-uploads.picsart.com/cms-uploads/acf105d8-be71-4f5d-8772-4495224830a9.png?to=max&r=160&format=webp") 1x, url("https://cdn-cms-uploads.picsart.com/cms-uploads/acf105d8-be71-4f5d-8772-4495224830a9.png?to=max&r=320&format=webp") 2x); background-size: cover; background-position: center center; background-repeat: no-repeat; } 6443@media (max-width: 600px) { 6444 .sidebar__upload-card--hero { background-image: image-set(url("https://cdn-cms-uploads.picsart.com/cms-uploads/96a94082-fc02-41ed-a2a9-91f4d10b4773.png?to=max&r=220&format=webp") 1x, url("https://cdn-cms-uploads.picsart.com/cms-uploads/96a94082-fc02-41ed-a2a9-91f4d10b4773.png?to=max&r=440&format=webp") 2x); background-size: cover; background-position: center center; background-repeat: no-repeat; } 6445 .sidebar__upload-card--nemesis { background-image: image-set(url("https://cdn-cms-uploads.picsart.com/cms-uploads/b207b8a3-b4eb-4ff0-b491-55aea41fa43c.png?to=max&r=220&format=webp") 1x, url("https://cdn-cms-uploads.picsart.com/cms-uploads/b207b8a3-b4eb-4ff0-b491-55aea41fa43c.png?to=max&r=440&format=webp") 2x); background-size: cover; background-position: center center; background-repeat: no-repeat; } 6446 .sidebar__upload-card--tale-hero { background-image: image-set(url("https://cdn-cms-uploads.picsart.com/cms-uploads/766990d0-96e8-4c7e-81a7-8c36c2597285.png?to=max&r=220&format=webp") 1x, url("https://cdn-cms-uploads.picsart.com/cms-uploads/766990d0-96e8-4c7e-81a7-8c36c2597285.png?to=max&r=440&format=webp") 2x); background-size: cover; background-position: center center; background-repeat: no-repeat; } 6447 .sidebar__upload-card--tale-companion { background-image: image-set(url("https://cdn-cms-uploads.picsart.com/cms-uploads/acf105d8-be71-4f5d-8772-4495224830a9.png?to=max&r=220&format=webp") 1x, url("https://cdn-cms-uploads.picsart.com/cms-uploads/acf105d8-be71-4f5d-8772-4495224830a9.png?to=max&r=440&format=webp") 2x); background-size: cover; background-position: center center; background-repeat: no-repeat; } 6448} 6449.sidebar__upload-card--filled { border: 1px solid var(--background-colors-border); background-color: var(--background-colors-base); overflow: hidden; } 6450.sidebar__upload-card-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacings-s4); width: 100%; height: 100%; box-sizing: border-box; } 6451.sidebar__upload-icon-circle { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; box-sizing: border-box; border-radius: 50%; background: rgba(255, 255, 255, 0.1); } 6452.sidebar__upload-card-title { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); font-weight: 600; line-height: var(--typography-t4-line-height); color: var(--text-colors-base); margin: 0px; text-align: center; } 6453.sidebar__upload-card-subtitle { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t3-font-size); color: var(--text-colors-tint-2); margin: 0px; text-align: center; } 6454.sidebar__upload-card-img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; display: block; } 6455.sidebar__upload-card-filled-actions { position: absolute; top: 0px; right: 0px; display: flex; flex-direction: row; gap: var(--spacings-s4); z-index: 2; } 6456.sidebar__upload-card-icon-btn { width: 36px; height: 36px; border-radius: var(--corner-radius-r8); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background-color: var(--control-colors-button-background-default); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0px; transition: background-color 0.12s; color: var(--text-colors-base); } 6457.sidebar__upload-card-icon-btn:hover { background-color: var(--control-colors-button-background-action); } 6458.sidebar__section-title { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); font-weight: 600; color: var(--text-colors-tint-1); margin: 0px; } 6459.sidebar--mobile .sidebar__section-header { align-items: center; text-align: center; } 6460.sidebar__options-panel { display: flex; flex-direction: column; gap: var(--spacings-s16); } 6461.sidebar--mobile .sidebar__options-panel { gap: var(--spacings-s12); } 6462.sidebar__option-label { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); font-weight: 500; color: var(--text-colors-base); margin-bottom: var(--spacings-s6); } 6463.sidebar__option-hint { display: block; margin-bottom: var(--spacings-s12); line-height: 1.4; } 6464.sidebar__custom-premise { margin-top: var(--spacings-s12); display: flex; flex-direction: column; gap: 14px; } 6465.sidebar__tall-text-box textarea { min-height: 88px; } 6466.sidebar__char-count { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t2-font-size); color: var(--text-colors-tint-2); align-self: flex-end; margin: -8px 0px 0px; } 6467.sidebar__quote-card { margin-top: var(--spacings-s12); display: flex; flex-direction: column; gap: var(--spacings-s8); padding: var(--spacings-s16); border-radius: var(--corner-radius-r12); border: 1px solid var(--background-colors-border); background-color: var(--background-colors-tint-1); } 6468.sidebar__quote-mark { font-family: Bangers, cursive; font-size: var(--typography-t7-font-size); line-height: 0.6; color: var(--primary-colors-base-default); margin: 0px; } 6469.sidebar__quote-text { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); font-style: italic; font-weight: 500; line-height: 1.45; color: var(--text-colors-base); margin: 0px; } 6470.sidebar__quote-author { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t3-font-size); font-weight: 600; color: var(--text-colors-tint-2); text-align: right; margin: 0px; } 6471.sidebar__plot-highlight { padding: var(--spacings-s12); border-radius: var(--corner-radius-r12); border: 1.5px solid var(--primary-colors-base-default); background-color: var(--background-colors-tint-1); } 6472.sidebar__plot-label-row { display: flex; align-items: center; gap: var(--spacings-s6); margin-bottom: var(--spacings-s2); } 6473.sidebar__plot-badge { display: inline-flex; align-items: center; gap: 2px; padding: 1px var(--spacings-s6); border-radius: var(--corner-radius-r20); font-family: Picsart-Fonts, sans-serif; font-size: var(--
6473typography-t2-font-size); font-weight: 600; color: var(--primary-colors-base-default); background: var(--primary-colors-alpha-20); text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; } 6474.sidebar__plot-hint { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t3-font-size); color: var(--text-colors-tint-2); margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: var(--spacings-s6); } 6475.sidebar__genre-scroll-inner { display: inline-flex; align-items: flex-start; gap: var(--spacings-s8); flex-wrap: nowrap; } 6476.sidebar__preset-item { display: inline-flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 91px; gap: var(--spacings-s4); cursor: pointer; } 6477.sidebar__preset-item:focus-visible { outline: none; } 6478.sidebar__preset-frame-content { position: relative; width: 100%; height: 100%; overflow: hidden; } 6479.sidebar__genre-preset-frame { background-color: transparent; } 6480.sidebar__genre-preset-frame.image-frame--interactive:not(.image-frame--active-border)::before { opacity: 0; } 6481.sidebar__setting-preset-frame { background-color: transparent; } 6482.sidebar__setting-preset-frame.image-frame--interactive:not(.image-frame--active-border)::before { opacity: 0; } 6483.sidebar__preset-img { width: 100%; height: 100%; background-size: 130%; background-position: center center; background-repeat: no-repeat; display: block; pointer-events: none; } 6484.sidebar__preset-check-badge { position: absolute; top: var(--spacings-s4); right: var(--spacings-s4); display: flex; align-items: center; justify-content: center; z-index: 2; } 6485.sidebar__preset-label { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); font-weight: 500; color: var(--text-colors-base); text-align: center; line-height: 1.3; } 6486.sidebar__chips-row { overflow: auto hidden; padding-bottom: var(--spacings-s2); } 6487@media (pointer: fine) { 6488 .sidebar__chips-row::-webkit-scrollbar { width: 4px; height: 0px; } 6489 .sidebar__chips-row::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; } 6490 .sidebar__chips-row::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r4); background-color: var(--background-colors-border); } 6491 .sidebar__chips-row::-webkit-scrollbar-corner { background: transparent; } 6492} 6493@supports (-moz-appearance: none) { 6494 .sidebar__chips-row { scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 6495} 6496@media (pointer: coarse) { 6497 .sidebar__chips-row::-webkit-scrollbar { display: none; } 6498} 6499.sidebar__chips-row { scrollbar-width: none; } 6500.sidebar__chips-row::-webkit-scrollbar { display: none; } 6501.sidebar__chips-row-inner { display: inline-flex; align-items: flex-start; gap: var(--spacings-s6); flex-wrap: nowrap; } 6502.sidebar__chip-btn { flex-shrink: 0; } 6503.sidebar__footer { flex-shrink: 0; width: 100%; box-sizing: border-box; padding: var(--spacings-s8) var(--spacings-s16); background-color: var(--background-colors-base); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--spacings-s8); } 6504.sidebar__terms-wrapper { display: flex; flex-direction: column; align-items: center; gap: var(--spacings-s4); } 6505.sidebar__terms-text { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t3-font-size); color: var(--text-colors-tint-3); text-align: center; line-height: 1.5; } 6506.sidebar__terms-link { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t3-font-size); color: var(--primary-colors-base-default); padding-right: var(--spacings-s8); text-decoration: underline; } 6507.sidebar__terms-link:hover { color: var(--primary-colors-base-action); } 6508@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 6509@layer ds-atoms { 6510 .divider::before { content: ""; display: block; background-color: var(--background-colors-border); } 6511 .divider--rounded::before { border-radius: var(--corner-radius-r2); } 6512 .divider--horizontal { display: block; width: var(--divider-size, 100%);
6512 padding-top: var(--divider-start); padding-bottom: var(--divider-end); } 6513 .divider--horizontal::before { height: 2px; } 6514 .divider--vertical { display: inline-block; vertical-align: top; height: var(--divider-size, 100%); padding-inline-start: var(--divider-start); padding-inline-end: var(--divider-end); } 6515 .divider--vertical::before { width: 2px; height: 100%; } 6516} 6517@keyframes gcc-halftone-pulse { 6518 0% { opacity: 0.2; } 6519 50% { opacity: 0.5; } 6520 100% { opacity: 0.2; } 6521} 6522@keyframes gcc-star-float { 6523 0% { transform: translateY(0px) rotate(0deg) scale(1); } 6524 100% { transform: translateY(-14px) rotate(200deg) scale(1.2); } 6525} 6526@keyframes gcc-progress-sweep { 6527 0% { transform: scaleX(0); transform-origin: left center; } 6528 50% { transform: scaleX(1); transform-origin: left center; } 6529 51% { transform: scaleX(1); transform-origin: right center; } 6530 100% { transform: scaleX(0); transform-origin: right center; } 6531} 6532@keyframes gcc-glow-pulse { 6533 0% { opacity: 0.5; transform: scale(1); } 6534 50% { opacity: 0.9; transform: scale(1.05); } 6535 100% { opacity: 0.5; transform: scale(1); } 6536} 6537@keyframes gcc-sweep-diagonal { 6538 0% { transform: translate(-60%, 60%) rotate(-35deg); opacity: 0; } 6539 15% { opacity: 1; } 6540 55% { opacity: 1; } 6541 100% { transform: translate(60%, -60%) rotate(-35deg); opacity: 0; } 6542} 6543.generating-creative-card { width: 100%; aspect-ratio: 2 / 3; border-radius: var(--corner-radius-r12); background: linear-gradient(160deg, rgb(26, 10, 46), rgb(45, 16, 96) 40%, rgb(26, 10, 46)); display: flex; flex-direction: column; align-items: stretch; position: relative; overflow: hidden; cursor: default; container-type: inline-size; padding: 8% 6% 5%; box-sizing: border-box; } 6544.generating-creative-card__root-clickable { cursor: pointer; } 6545.generating-creative-card__glow { position: absolute; width: 70%; height: 50%; border-radius: 50%; background: radial-gradient(rgba(168, 85, 247, 0.35) 0%, transparent 70%); animation-name: gcc-glow-pulse; animation-duration: 3s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; pointer-events: none; } 6546.generating-creative-card__halftone { position: absolute; inset: 0px; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 1px, transparent 1px); background-size: 10px 10px; animation-name: gcc-halftone-pulse; animation-duration: 3s; animation-timing-function: ease; animation-iteration-count: infinite; pointer-events: none; } 6547.generating-creative-card__film-left { position: absolute; top: 0px; left: 0px; bottom: 0px; width: 12px; display: flex; flex-direction: column; gap: 5px; padding: 8px 0px; pointer-events: none; z-index: 3; } 6548.generating-creative-card__film-right { position: absolute; top: 0px; right: 0px; bottom: 0px; width: 12px; display: flex; flex-direction: column; gap: 5px; padding: 8px 0px; pointer-events: none; z-index: 3; } 6549.generating-creative-card__film-hole { width: 8px; height: 8px; border-radius: 2px; background-color: rgba(0, 0, 0, 0.7); border: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; align-self: center; } 6550.generating-creative-card__star { position: absolute; border-radius: 50%; animation-name: gcc-star-float; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; pointer-events: none; box-shadow: currentcolor 0px 0px 6px 2px; } 6551.generating-creative-card__badge-wrap { display: flex; justify-content: center; z-index: 2; margin-bottom: 3%; } 6552.generating-creative-card__badge { position: relative; transform: rotate(-2deg); font-family: Bangers, cursive; font-size: clamp(12px, 7cqi, 18px); line-height: normal; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.35em 1.1em; white-space: nowrap; clip-path: polygon(4% 0%, 96% 0%, 100% 50%, 96% 100%, 4% 100%, 0% 50%); box-shadow: rgba(0, 0, 0, 0.4) 0px 3px 6px; } 6553.generating-creative-card__badge-gold { background: linear-gradient(90deg, rgb(246, 209, 90), rgb(246, 166, 35)); color: rgb(36, 16, 64); } 6554.generating-creative-card__badge-blue { background: linear-gradient(90deg, rgb(91, 141, 239), rgb(58, 99, 209)); color: rgb(245, 248, 255); } 6555.generating-creative-card__headline-wrap { display: flex; align-items: center; justify-content: center; gap: 4%; z-index: 2; margin-bottom: 4%; } 6556.generating-creative-card__sparkle { font-size: clamp(10px, 4.5cqi, 15px); line-height: normal;
6556 color: rgba(255, 255, 255, 0.6); flex-shrink: 0; } 6557.generating-creative-card__headline-text { text-align: center; font-family: Picsart-Fonts, sans-serif; font-size: clamp(12px, 6.5cqi, 18px); line-height: normal; font-weight: 600; color: rgba(255, 255, 255, 0.9); } 6558.generating-creative-card__headline-lead { position: relative; font-weight: 800; color: rgb(201, 163, 255); margin-right: 0.3em; display: inline-block; line-height: inherit; } 6559.generating-creative-card__headline-underline { position: absolute; left: 0px; right: 0px; bottom: -0.18em; height: 2px; opacity: 0.8; } 6560.generating-creative-card__headline-underline::before { height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgb(168, 85, 247), rgb(236, 72, 153)); } 6561.generating-creative-card__centerpiece { position: relative; flex: 1 1 0%; min-height: 0px; display: flex; align-items: center; justify-content: center; z-index: 1; margin-bottom: 4%; } 6562.generating-creative-card__steps-row { position: relative; display: flex; align-items: center; justify-content: center; z-index: 2; margin-bottom: 3%; } 6563.generating-creative-card__step-traveler { position: absolute; top: 50%; width: 6px; height: 6px; border-radius: 50%; background-color: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.85) 0px 0px 8px 3px; transform: translate(-50%, -50%); transition: left 0.7s cubic-bezier(0.65, 0, 0.35, 1); z-index: 3; pointer-events: none; } 6564.generating-creative-card__step-dot { width: clamp(16px, 8cqi, 30px); height: clamp(16px, 8cqi, 30px); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: clamp(10px, 5.5cqi, 16px); background-color: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.25); transition: 0.4s; flex-shrink: 0; } 6565.generating-creative-card__step-dot-active { background: linear-gradient(135deg, rgb(246, 209, 90), rgb(246, 166, 35)); border-color: transparent; box-shadow: rgba(246, 166, 35, 0.8) 0px 0px 10px; transform: scale(1.12); } 6566.generating-creative-card__step-connector { flex: 1 1 8px; min-width: 4px; height: 0px; border-top: 2px dotted rgba(255, 255, 255, 0.25); align-self: center; } 6567.generating-creative-card__caption { text-align: center; font-family: Picsart-Fonts, sans-serif; font-size: clamp(11px, 5.5cqi, 16px); font-weight: 600; color: rgba(255, 255, 255, 0.85); line-height: 1.35; padding: 0px 4%; z-index: 2; } 6568.generating-creative-card__caption-gold { color: rgb(246, 209, 90); font-weight: 800; line-height: inherit; } 6569.generating-creative-card__caption-blue { color: rgb(201, 214, 255); font-weight: 800; line-height: inherit; } 6570.generating-creative-card__hint { text-align: center; font-family: Picsart-Fonts, sans-serif; font-size: clamp(8px, 4cqi, 12px); font-weight: 500; color: rgba(255, 255, 255, 0.55); line-height: 1.3; z-index: 2; } 6571.generating-creative-card__progress-bar { position: absolute; bottom: 0px; left: 0px; right: 0px; height: 5px; background-color: rgba(255, 255, 255, 0.1); overflow: hidden; border-radius: 0 0 var(--corner-radius-r12) var(--corner-radius-r12); } 6572.generating-creative-card__progress-fill { height: 100%; width: 100%; background: linear-gradient(90deg, rgb(168, 85, 247), rgb(236, 72, 153), rgb(168, 85, 247)) 0% 0% / 200% 100%; transform-origin: left center; animation-name: gcc-progress-sweep; animation-duration: 3s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } 6573.generating-creative-card__art-frame { position: relative; width: 86%; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.5) 0px 8px 18px; overflow: hidden; line-height: 0; } 6574.generating-creative-card__art-image { display: block; width: 100%; height: auto; } 6575.generating-creative-card__art-sweep { position: absolute; inset: -30%; background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%); animation-name: gcc-sweep-diagonal; animation-duration: 3.2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; pointer-events: none; } 6576.empty-state { width: 100%; height: 100%; overflow: hidden auto; box-sizing: border-box; background-color: var(--background-colors-base); display: flex; align-items: center; justify-content: center; } 6577@media (pointer: fine) { 6578 .empty-state::-webkit-scrollbar { width: 4px; height: 4px; } 6579 .empty-state::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; } 6580 .empty-state::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r4); background-color: var(--background-colors-border); } 6581 .empty-state::-webkit-scrollbar-corner { background: transparent; } 6582} 6583@supports (-moz-appearance: none) { 6584 .empty-state { scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 6585} 6586@media (pointer: coarse) { 6587 .empty-state::-webkit-scrollbar { display: none; } 6588} 6589.empty-state--mobile { padding-block: var(--spacings-s32); } 6590.empty-state--mobile .empty-state__content { padding: var(--spacings-s16); } 6591.empty-state__content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--spacings-s16); padding: var(--spacings-s24); max-width: 420px; } 6592.empty-state__heading { font-family: Bangers, cursive; font-weight: 400; color: var(--text-colors-base); font-size: 24px; line-height: normal; letter-spacing: 1px; margin: 0px; } 6593.empty-state__subtitle { margin: 0px; } 6594.collection { height: 100%; overflow-y: auto; } 6595@media (pointer: fine) { 6596 .collection::-webkit-scrollbar { width: 4px; height: 4px; } 6597 .collection::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; } 6598 .collection::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r4); background-color: var(--background-colors-border); } 6599 .collection::-webkit-scrollbar-corner { background: transparent; } 6600} 6601@supports (-moz-appearance: none) { 6602 .collection { scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 6603} 6604@media (pointer: coarse) { 6605 .collection::-webkit-scrollbar { display: none; } 6606} 6607.collection { padding: var(--spacings-s8); box-sizing: border-box; background-color: var(--background-colors-base); } 6608.collection--mobile { padding-bottom: var(--spacings-s32); } 6609.collection--with-header { display: flex; flex-direction: column; gap: var(--spacings-s24); padding: var(--spacings-s24) 0 var(--spacings-s64); } 6610.collection--with-header > * { flex-shrink: 0; } 6611.collection__title { font-family: Bangers, cursive; font-weight: 400; font-size: 42px; line-height: 48px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-colors-base); margin: 0px; } 6612.collection__chip-bar { display: flex; flex-direction: row; align-items: center; gap: var(--spacings-s6); min-width: 0px; } 6613.collection__chip-bar > .collection__chip-row { flex: 0 1 auto; min-width: 0px; } 6614.collection__chip-row { display: flex; flex-direction: row; align-items: center; gap: var(--spacings-s6); min-width: 0px; overflow-x: auto; scrollbar-width: none; } 6615.collection__chip-row::-webkit-scrollbar { display: none; } 6616.collection__chip-row > * { flex-shrink: 0; } 6617.collection__filter-empty-state { display: flex; flex: 1 1 auto; min-height: 0px; } 6618.collection__loading-state { height: 100%; display: flex; align-items: center; justify-content: center; background-image: none; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: var(--background-colors-base); } 6619.collection__centered { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacings-s8); text-align: center; background-color: var(--background-colors-base); } 6620.collection__centered-clickable { cursor: pointer; border-radius: 12px; padding: var(--spacings-s16); display: flex; flex-direction: column; align-items: center; gap: var(--spacings-s8); } 6621.collection__centered-clickable:active { transform: scale(0.98); } 6622.collection__empty-images-container { position: relative; width: 350px; height: 300px; } 6623.collection__empty-frame { width: 180px; aspect-ratio: 2 / 3; overflow: hidden; position: absolute; } 6624.collection__empty-frame.collection__empty-frame { border-radius: var(--corner-radius-r12); } 6625.collection__empty-frame-back { left: 20px; top: 0px; transform: rotate(-12.5deg); z-index: 2; } 6626.collection__empty-frame-front { right: 25px; top: 10px; transform: rotate(10deg); z-index: 1; } 6627.collection__empty-frame-placeholder { display: flex; align-items: center; justify-content: center; font-size: 64px; background: var(--background-colors-tint-1); border-radius: var(--corner-radius-r12); } 6628.collection__empty-frame-image { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; display: block; } 6629.collection__empty-text-container { display: flex; flex-direction: column; align-items: center; gap: var(--spacings-s4); } 6630.collection__empty-title { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); font-weight: 600; color: var(--text-colors-base); margin: 0px; } 6631.collection__empty-subtext { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t3-font-size); color: var(--text-colors-tint-1); margin: 0px; } 6632.collection__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--spacings-s16); } 6633.collection--mobile .collection__grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacings-s10); } 6634.collection__card { display: block; } 6635.collection__frame { width: 100%; aspect-ratio: 2 / 3; overflow: visible; position: relative; cursor: pointer; background-color: var(--background-colors-tint-3); border-radius: var(--corner-radius-r12) !important; } 6636@media (hover: hover) { 6637 .collection__frame:hover .collection__play-overlay { opacity: 1; } 6638} 6639.collection__image-wrapper { position: absolute; inset: 0px; border-radius: var(--corner-radius-r12); overflow: hidden; } 6640.collection__cover-img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; display: block; } 6641.collection__fallback { position: absolute; inset: 0px; display: flex; align-items: center; justify-content: center; background: var(--background-colors-tint-3); } 6642.collection__fallback-icon { font-size: 36px; line-height: normal; opacity: 0.7; } 6643.collection__overlay { position: absolute; inset: 0px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; } 6644.collection__top-actions { display: flex; justify-content: flex-end; padding: var(--spacings-s6); pointer-events: auto; } 6645.collection__menu-root { position: relative; } 6646.collection__more-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--corner-radius-r8); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background-color: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); cursor: pointer; padding: 0px; transition: background-color 0.12s; } 6647.collection__more-btn:hover { background-color: rgba(0, 0, 0, 0.75); } 6648.collection__more-btn { color: var(--absolute-white-colors-base-default); min-width: 28px; } 6649.collection__more-btn-mobile { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--corner-radius-r8); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background-color: rgba(0, 0, 0, 0.5); cursor: pointer; padding: 0px; transition: background-color 0.12s; } 6650.collection__more-btn-mobile:hover { background-color: rgba(0, 0, 0, 0.7); } 6651.collection__more-btn-mobile { color: var(--absolute-white-colors-base-default); } 6652.collection__dropdown { position: absolute; top: calc(100% + 4px); right: 0px; min-width: 160px; background-color: var(--background-colors-tint-1); border-radius: var(--corner-radius-r12); box-shadow: rgba(0, 0, 0, 0.35) 0px 8px 24px; overflow: hidden; z-index: 200; }
6653.collection__dropdown--open-right { left: 0px; right: auto; } 6654.collection__dropdown--open-up { top: auto; bottom: calc(100% + 4px); } 6655.collection__dropdown-item { display: flex; align-items: center; gap: var(--spacings-s8); width: 100%; padding: var(--spacings-s12) var(--spacings-s16); font-size: var(--typography-t4-font-size); font-family: Picsart-Fonts, sans-serif; font-weight: 500; color: var(--text-colors-base); background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; text-align: left; transition: background-color 0.12s; } 6656.collection__dropdown-item:hover { background-color: var(--background-colors-tint-2); } 6657.collection__dropdown-item--delete { color: var(--negative-colors-base-default); } 6658.collection__dropdown-item--delete svg { fill: var(--negative-colors-base-default); } 6659.collection__page-count-badge { display: flex; justify-content: flex-end; padding: var(--spacings-s6); pointer-events: none; } 6660.collection__page-count-text { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t3-font-size); font-weight: 600; color: rgb(255, 255, 255); background-color: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); border-radius: var(--corner-radius-r4); padding: var(--spacings-s2) var(--spacings-s6); line-height: 1.4; } 6661.collection__generating-card { position: absolute; inset: 0px; display: flex; align-items: center; justify-content: center; } 6662.collection__generating-cover-img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; filter: blur(4px) brightness(0.7); transform: scale(1.05); } 6663.collection__generating-overlay { position: relative; display: flex; align-items: center; justify-content: center; z-index: 1; width: 64px; height: 64px; border-radius: 50%; } 6664.collection__section-header { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); font-weight: 600; color: var(--text-colors-tint-1); padding: var(--spacings-s8) var(--spacings-s4) var(--spacings-s4); margin: 0px; } 6665.collection__video-card { display: block; cursor: pointer; border-radius: var(--corner-radius-r12); overflow: hidden; position: relative; aspect-ratio: 9 / 16; background-color: rgb(0, 0, 0); } 6666.collection__video-card:hover .collection__video-overlay { opacity: 1; } 6667.collection__video-el { width: 100%; height: 100%; object-fit: cover; display: block; } 6668.collection__video-overlay { position: absolute; inset: 0px; display: flex; align-items: flex-end; padding: var(--spacings-s8); background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 60%); opacity: 0; transition: opacity 0.2s; } 6669.collection__video-label { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t3-font-size); font-weight: 600; color: rgb(255, 255, 255); } 6670.collection__video-player-backdrop { position: fixed; inset: 0px; z-index: 1000; background-color: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; } 6671.collection__video-player-content { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--spacings-s12); max-height: 100vh; max-width: 100vw; padding: var(--spacings-s16); box-sizing: border-box; } 6672.collection__video-player-el { max-height: calc(-120px + 100vh); max-width: 100%; border-radius: var(--corner-radius-r12); display: block; } 6673.collection__video-player-close { position: absolute; top: var(--spacings-s8); right: var(--spacings-s8); background: rgba(255, 255, 255, 0.15); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; width: 36px; height: 36px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: rgb(255, 255, 255); font-size: 20px; line-height: 1; }
6674.collection__video-player-close:hover { background: rgba(255, 255, 255, 0.3); } 6675.collection__video-player-open-book { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); font-weight: 600; color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--corner-radius-r8); padding: var(--spacings-s8) var(--spacings-s16); cursor: pointer; } 6676.collection__video-player-open-book:hover { background: rgba(255, 255, 255, 0.35); } 6677.collection__bottom-actions { display: flex; justify-content: space-between; align-items: center; padding: var(--spacings-s6); pointer-events: auto; gap: var(--spacings-s4); } 6678.collection__video-play-badge { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 28px; min-height: 28px; border-radius: 50%; background: var(--negative-colors-base-default); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; padding: 0px; transition: background-color 0.12s; } 6679.collection__video-play-badge:hover { background: var(--negative-colors-base-action); } 6680.collection__video-play-badge { color: var(--negative-colors-text-default); } 6681.collection__video-play-badge .button__icon { flex-basis: 16px; width: 16px; height: 16px; } 6682.collection__play-overlay { position: absolute; inset: 0px; display: flex; align-items: center; justify-content: center; opacity: 0.9; transition: opacity 0.18s; z-index: 2; pointer-events: none; } 6683.collection__play-circle { width: 44px; height: 44px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px); border: 1.5px solid rgba(255, 255, 255, 0.3); display: flex; align-items: center; justify-content: center; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 12px; cursor: pointer; padding: 0px; pointer-events: auto; color: var(--absolute-white-colors-base-default); } 6684.collection__video-generating-badge { display: flex; align-items: center; justify-content: center; gap: var(--spacings-s4); height: 24px; border-radius: var(--corner-radius-r12); padding: 0 var(--spacings-s8); background: var(--negative-colors-base-default); box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 8px; white-space: nowrap; } 6685.collection__video-generating-badge-text { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); font-weight: 600; color: var(--negative-colors-text-default); } 6686.collection__play-menu { position: absolute; bottom: calc(100% + 4px); right: 0px; background: rgba(20, 20, 20, 0.95); border-radius: var(--corner-radius-r8); overflow: hidden; z-index: 300; white-space: nowrap; box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 12px; } 6687.collection__play-menu-item { display: block; width: 100%; padding: var(--spacings-s6) var(--spacings-s12); color: rgb(255, 255, 255); background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; text-align: left; font-size: var(--typography-t4-font-size); font-family: Picsart-Fonts, sans-serif; font-weight: 500; transition: background-color 0.1s; } 6688.collection__play-menu-item:hover { background: rgba(255, 255, 255, 0.15); } 6689.collection__video-generating-banner { position: absolute; bottom: 0px; left: 0px; right: 0px; display: flex; align-items: center; justify-content: center; gap: var(--spacings-s4); padding: var(--spacings-s6) var(--spacings-s8); background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 100%); border-radius: 0 0 var(--corner-radius-r12) var(--corner-radius-r12); pointer-events: none; } 6690.collection__video-generating-banner-text { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t2-font-size); font-weight: 600; color: rgb(255, 255, 255); letter-spacing: 0.02em; } 6691.collection__video-book-label { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t2-font-size); font-weight: 600; color: rgb(255, 255, 255); letter-spacing: 0.6px; text-transform: uppercase; padding: 2px var(--spacings-s6); background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); border-radius: var(--corner-radius-r20); } 6692.book-options-sheet__sheet-header { display: flex; justify-content: space-between; align-items: center; width: 100%; } 6693.book-options-sheet__sheet-title { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t5-font-size); font-weight: 600; line-height: var(--typography-t5-line-height); color: var(--text-colors-base); margin: 0px; } 6694.book-options-sheet__content { display: flex; flex-direction: column; align-items: center; padding-top: var(--spacings-s8); width: 100%; } 6695.book-options-sheet__cover-image { width: 166px; height: 246px; object-fit: cover; border-radius: 16px; margin-bottom: var(--spacings-s8); } 6696.book-options-sheet__cover-placeholder { width: 166px; height: 246px; border-radius: 16px; margin-bottom: var(--spacings-s8); background-color: rgba(128, 128, 128, 0.15); } 6697.book-options-sheet__options-list { display: flex; flex-direction: column; gap: var(--spacings-s4); width: 100%; } 6698.book-options-sheet__option-item { display: flex; align-items: center; gap: var(--spacings-s12); padding: var(--spacings-s12) var(--spacings-s16); background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: var(--corner-radius-r8); cursor: pointer; width: 100%; text-align: left; transition: background-color 0.12s; } 6699.book-options-sheet__option-item:hover { background-color: var(--backgrounds-tint-1); } 6700.book-options-sheet__option-item:disabled { opacity: 0.4;
6700 cursor: not-allowed; } 6701.book-options-sheet__option-text { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t5-font-size); font-weight: 500; color: var(--control-colors-text-default); } 6702.book-options-sheet__confirm-content { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 32px; padding-bottom: 16px; width: 100%; } 6703.book-options-sheet__confirm-icon-circle { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 28px; background: var(--primary-colors-alpha-20); margin-bottom: var(--spacings-s12); } 6704.book-options-sheet__confirm-title { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t5-font-size); font-weight: 600; line-height: var(--typography-t5-line-height); color: var(--text-colors-base); margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: var(--spacings-s8); } 6705.book-options-sheet__confirm-subtitle { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); font-weight: 500; line-height: var(--typography-t4-line-height); color: var(--text-colors-tint-1); margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: var(--spacings-s16); } 6706.book-options-sheet__confirm-actions { display: flex; flex-direction: column; gap: var(--spacings-s8); width: 100%; } 6707.book-options-sheet__generating-image { filter: blur(4px) brightness(0.7); } 6708.book-options-sheet__generating-overlay { position: absolute; inset: 0px; display: flex; align-items: center; justify-content: center; z-index: 1; } 6709@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 6710@layer ds-atoms { 6711 .bottom-sheet__content { display: grid; grid-template-rows: auto 1fr auto; height: 100%; min-height: 0px; } 6712 .bottom-sheet__header { position: sticky; top: 0px; padding: var(--spacings-s0) var(--spacings-s16) var(--spacings-s8) var(--spacings-s16); background-color: var(--background-colors-base); } 6713 .bottom-sheet__body { padding: var(--spacings-s0) var(--spacings-s16); overflow-y: auto; min-height: 0px; scrollbar-gutter: stable both-edges; } 6714 .bottom-sheet__footer { position: sticky; bottom: 0px; padding: var(--spacings-s0) var(--spacings-s16); background-color: var(--background-colors-base); } 6715} 6716@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 6717@layer ds-subatoms { 6718 .base-bottom-sheet { position: fixed; bottom: 0px; left: 0px; z-index: var(--bbs-z-index, 9); width: 100%; border-radius: var(--corner-radius-r16); background-color: var(--background-colors-base); isolation: isolate; transform-origin: center bottom; will-change: transform, height; transition-property: transform, opacity, max-height; transition-duration: 0.25s; transition-timing-function: cubic-bezier(0.4, 0, 1, 1); } 6719 .base-bottom-sheet--static { padding-top: var(--spacings-s12); border-radius: var(--corner-radius-r0); } 6720 .base-bottom-sheet--full-height { border-radius: var(--corner-radius-r0); } 6721 .base-bottom-sheet--open { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } 6722 .base-bottom-sheet--dragging { transition-duration: 0s; } 6723 .base-bottom-sheet__touch-area { display: grid; place-content: center; position: relative; height: 12px; border-radius: var(--corner-radius-r16) var(--corner-radius-r16) var(--corner-radius-r0) var(--corner-radius-r0); background-color: var(--background-colors-base); } 6724 .base-bottom-sheet--full-height .base-bottom-sheet__touch-area { border-radius: var(--corner-radius-r0); } 6725 .base-bottom-sheet__touch-area::before { content: ""; position: absolute; left: 50%; z-index: calc(var(--bbs-z-index, 9) + 1); width: 100%; max-width: 80%; height: 44px; background-color: transparent; translate: -50%; transform: translateY(0px); } 6726 .base-bottom-sheet--open .base-bottom-sheet__touch-area::before { transform: translateY(-45%); } 6727 .base-bottom-sheet__touch-area::after { content: ""; width: 32px; height: 4px; border-radius: var(--corner-radius-r4); background-color: var(--background-colors-tint-3); } 6728 .base-bottom-sheet__overlay { position: absolute; top: 12px; z-index: -1; width: 100%; height: 105%; background-color: var(--background-colors-transparent); opacity: var(--bbs-overlay-opacity, 0); transform: translateY(-100%); transition: opacity var(--timings-default) var(--easings-ease); user-select: none; } 6729 .base-bottom-sheet--static .base-bottom-sheet__overlay { top: 0px; } 6730 .base-bottom-sheet__content { height: 100%; contain: layout; touch-action: pan-y; } 6731 .base-bottom-sheet__content--with-bg-effect::before { content: ""; position: absolute; top: 50%; left: 50%; z-index: 0; width: 100%; max-height: 100%; height: auto; aspect-ratio: 1 / 1; background: var(--effects-vignette); transform: translate(-50%, -50%); pointer-events: none; } 6732 .base-bottom-sheet--enter { opacity: 0; } 6733 .base-bottom-sheet--enter-active { opacity: 1; transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1), opacity 0.25s cubic-bezier(0, 0, 0.2, 1), max-height 0.25s cubic-bezier(0, 0, 0.2, 1); } 6734 .base-bottom-sheet--exit { opacity: 1; } 6735 .base-bottom-sheet--exit-active { opacity: 0; transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1), opacity 0.25s cubic-bezier(0.4, 0, 1, 1), max-height 0.25s cubic-bezier(0.4, 0, 1, 1); } 6736} 6737.filter-chips__filter-bar { flex-shrink: 0; overflow: auto hidden; padding-top: ; padding-right: ; padding-left: ; padding-bottom: var(--spacings-s8); } 6738@media (pointer: fine) { 6739 .filter-chips__filter-bar::-webkit-scrollbar { width: 4px; height: 0px; } 6740 .filter-chips__filter-bar::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; } 6741 .filter-chips__filter-bar::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r4); background-color: var(--background-colors-border); } 6742 .filter-chips__filter-bar::-webkit-scrollbar-corner { background: transparent; } 6743} 6744@supports (-moz-appearance: none) { 6745 .filter-chips__filter-bar { scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 6746} 6747@media (pointer: coarse) { 6748 .filter-chips__filter-bar::-webkit-scrollbar { display: none; } 6749} 6750.filter-chips__filter-bar { scrollbar-width: none; } 6751.filter-chips__filter-bar::-webkit-scrollbar { display: none; } 6752.filter-chips__filter-bar--fade-end { mask-image: linear-gradient(to right,#000 calc(100% - var(--spacings-s24)),transparent 100%); } 6753.filter-chips__filter-bar--fade-start { mask-image: linear-gradient(to left,#000 calc(100% - var(--spacings-s24)),transparent 100%); } 6754.filter-chips__filter-bar--fade-both { mask-image: linear-gradient(to right,transparent 0,#000 var(--spacings-s24),#000 calc(100% - var(--spacings-s24)),transparent 100%); } 6755.filter-chips__chips-row-inner { display: inline-flex; align-items: center; gap: var(--spacings-s8); flex-wrap: nowrap; } 6756.filter-chips__chips-row-inner > .chip { flex-shrink: 0; } 6757.filter-menu { position: relative; flex-shrink: 0; } 6758.filter-menu__dropdown { position: absolute; top: calc(100% + var(--spacings-s4)); left: 0px; z-index: 200; }
6759.filter-menu__dropdown--align-right { left: auto; right: 0px; } 6760.filter-menu__dropdown { display: flex; flex-direction: column; min-width: 180px; padding: var(--spacings-s12); background-color: var(--background-colors-tint-1); border: 1px solid var(--background-colors-border); border-radius: var(--corner-radius-r16); box-shadow: rgba(0, 0, 0, 0.35) 0px 8px 24px; } 6761.filter-menu__dropdown--mobile { min-width: 150px; max-width: calc(100vw - var(--spacings-s16) * 2); box-sizing: border-box; } 6762.filter-menu__option { display: flex; align-items: center; } 6763@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 6764@layer ds-atoms { 6765 .checkbox { display: inline-flex; column-gap: var(--spacings-s2); padding: var(--spacings-s6) 0; color: var(--text-colors-base); } 6766 .checkbox__box { display: inline-block; vertical-align: top; position: relative; flex: 0 0 auto; width: 20px; height: 20px; } 6767 .checkbox__control { display: inline-block; vertical-align: top; position: absolute; inset: 0px; width: 100%; height: 100%; } 6768 .checkbox__control--pointer { cursor: pointer; } 6769 .checkbox__control--not-allowed { cursor: not-allowed; } 6770 .checkbox__icon { display: block; width: 100%; height: 100%; transition: color var(--timings-default) var(--easings-ease); } 6771 .checkbox__icon > path:not([fill]) { fill: currentcolor; } 6772 .checkbox__label { display: flex; align-items: center; padding: var(--spacings-s0) var(--spacings-s2); font-weight: 600; user-select: none; font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); } 6773 .checkbox__label--pointer { cursor: pointer; } 6774 .checkbox--default .checkbox__icon { color: var(--control-colors-start-icon-default); } 6775 @media (hover: hover) and (pointer: fine) { 6776 .checkbox--default-interactive:hover .checkbox__icon { color: var(--control-colors-start-icon-action); } 6777} 6778 @media (hover: none) and (pointer: coarse) { 6779 .checkbox--default-interactive:active .checkbox__icon { color: var(--control-colors-start-icon-action); } 6780} 6781 .checkbox--skin-primary.checkbox--active .checkbox__icon { color: var(--primary-colors-base-active); } 6782 .checkbox--skin-primary.checkbox--active .checkbox__icon > path[fill] { fill: var(--primary-colors-base-active); } 6783 @media (hover: hover) and (pointer: fine) { 6784 .checkbox--skin-primary.checkbox--active-interactive:hover .checkbox__icon { color: var(--primary-colors-base-active-action); } 6785 .checkbox--skin-primary.checkbox--active-interactive:hover .checkbox__icon > path[fill] { fill: var(--primary-colors-base-active-action); } 6786} 6787 @media (hover: none) and (pointer: coarse) { 6788 .checkbox--skin-primary.checkbox--active-interactive:active .checkbox__icon { color: var(--primary-colors-base-active-action); } 6789 .checkbox--skin-primary.checkbox--active-interactive:active .checkbox__icon > path[fill] { fill: var(--primary-colors-base-active-action); } 6790} 6791 .checkbox--skin-premium.checkbox--active .checkbox__icon { color: var(--monetization-ultra-colors-base-active); } 6792 .checkbox--skin-premium.checkbox--active .checkbox__icon > path[fill] { fill: var(--monetization-ultra-colors-base-active); } 6793 @media (hover: hover) and (pointer: fine) { 6794 .checkbox--skin-premium.checkbox--active-interactive:hover .checkbox__icon { color: var(--monetization-ultra-colors-base-active-action); } 6795 .checkbox--skin-premium.checkbox--active-interactive:hover .checkbox__icon > path[fill] { fill: var(--monetization-ultra-colors-base-active-action); } 6796} 6797 @media (hover: none) and (pointer: coarse) { 6798 .checkbox--skin-premium.checkbox--active-interactive:active .checkbox__icon { color: var(--monetization-ultra-colors-base-active-action); } 6799 .checkbox--skin-premium.checkbox--active-interactive:active .checkbox__icon > path[fill] { fill: var(--monetization-ultra-colors-base-active-action); } 6800} 6801 .checkbox--disabled { opacity: var(--states-disabled); } 6802} 6803.anime-episode-feed { position: relative; width: 100%; height: 100%; aspect-ratio: 2 / 3; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; background: rgb(0, 0, 0); } 6804.anime-episode-feed::-webkit-scrollbar { display: none; } 6805.anime-episode-feed__slide { position: relative; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; background: rgb(0, 0, 0); } 6806.anime-episode-feed__slide--with-submit { flex-direction: column; align-items: stretch; } 6807.anime-episode-feed__slide--with-submit .anime-episode-feed__video { flex: 1 1 0%; min-height: 0px; height: auto; } 6808.anime-episode-feed__submit { flex-shrink: 0; padding: var(--spacings-s16); } 6809.anime-episode-feed__video { width: 100%; height: 100%; object-fit: cover; background: rgb(0, 0, 0); } 6810.anime-episode-feed__video:fullscreen, .anime-episode-feed__video:-webkit-full-screen { object-fit: contain; } 6811.anime-episode-feed__placeholder { flex-direction: column; gap: var(--spacings-s16); background-color: var(--background-colors-tint-1); } 6812.anime-episode-feed__placeholder--generate { background: linear-gradient(135deg,#4c1d958c,#9333ac80,#db27776b),var(--background-colors-tint-1); } 6813.anime-episode-feed__placeholder--busy { background-size: 200% 200%; animation: 8s ease-in-out 0s infinite normal none running anime-episode-feed-drift; } 6814@media (prefers-reduced-motion: reduce) { 6815 .anime-episode-feed__placeholder--busy { animation: auto ease 0s 1 normal none running none; } 6816} 6817@keyframes anime-episode-feed-drift { 6818 0% { background-position: 0% 0%; } 6819 50% { background-position: 100% 100%; } 6820 100% { background-position: 0% 0%; } 6821} 6822.anime-episode-feed__placeholder--stuck { background: linear-gradient(rgb(246, 166, 35), rgb(217, 130, 15)); } 6823.anime-episode-feed__badge { position: absolute; top: var(--spacings-s16); left: var(--spacings-s16); right: var(--spacings-s16); color: var(--absolute-white-colors-base-default); text-shadow: rgba(0, 0, 0, 0.6) 0px 1px 3px; font-size: 14px; font-weight: 600; pointer-events: none; } 6824.anime-episode-feed__placeholder .anime-episode-feed__badge { position: static; text-align: center; } 6825.anime-episode-feed__idea-box { max-width: 80%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--spacings-s12) var(--spacings-s16); border-radius: var(--corner-radius-r12); background: rgb(20, 11, 38); border: 1px solid rgba(219, 39, 119, 0.3); } 6826.anime-episode-feed__idea-label { text-align: center; color: var(--absolute-white-colors-base-default); opacity: 0.7; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } 6827.anime-episode-feed__idea-text { text-align: center; color: var(--absolute-white-colors-base-default); font-size: 13px; font-weight: 400; } 6828.anime-episode-feed__busy-icon { position: relative; width: 48px; height: 48px; } 6829.anime-episode-feed__busy-glow { position: absolute; inset: -20px; border-radius: 50%; background: radial-gradient(circle,var(--primary-colors-alpha-50) 0%,transparent 70%); animation: 2s ease-in-out 0s infinite normal none running anime-episode-feed-pulse; } 6830@media (prefers-reduced-motion: reduce) { 6831 .anime-episode-feed__busy-glow { animation: auto ease 0s 1 normal none running none; } 6832} 6833@keyframes anime-episode-feed-pulse { 6834 0%, 100% { transform: scale(0.85); opacity: 0.5; } 6835 50% { transform: scale(1.15); opacity: 1; } 6836} 6837@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 6838@layer ds-molecules { 6839 .carousel { position: relative; width: 100%; user-select: none; height: var(--car-h, auto); } 6840 .carousel__content-wrapper { overflow: hidden; } 6841 .carousel__content { display: flex; justify-content: flex-start; width: 100%; overscroll-behavior-x: contain; scrollbar-width: none; } 6842 .carousel__content::-webkit-scrollbar { display: none; } 6843 .carousel__content--swipe-transition { transition: transform var(--timings-default) var(--easings-ease-out); } 6844 .carousel__content--multi-slide { overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; } 6845 .carousel__slide { display: flex; justify-content: center; flex-shrink: 0; margin: 0px auto; width: 100%; transform: translateZ(0px); } 6846 .carousel__slide--fade { opacity: 0; transition: opacity var(--timings-default) var(--easings-ease-out); } 6847 .carousel__slide--active.carousel__slide--fade { opacity: 1; } 6848 .carousel__arrow-wrap { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); width: 60px; height: 100%; pointer-events: none; } 6849 .carousel__arrow-wrap.left { inset-inline-start: var(--spacings-s0); } 6850 .carousel__arrow-wrap.right { inset-inline-end: var(--spacings-s0); } 6851 .carousel__arrow-wrap--gradients-left.left { background: var(--car-gradient-left); } 6852 .carousel__arrow-wrap--gradients-right.right { background: var(--car-gradient-right); } 6853 .carousel__arrow-button { box-shadow: var(--shadows-tint-1); pointer-events: auto; } 6854 .carousel__arrow-button.left { margin-inline-start: var(--car-arrow-left-margin, 0); left: var(--car-arrow-left-pos, auto); } 6855 .carousel__arrow-button.right { margin-inline-end: var(--car-arrow-right-margin, 0); right: var(--car-arrow-right-pos, auto); } 6856 .carousel__arrow-button--overhang { position: absolute; } 6857 [dir="rtl"] .carousel__arrow-button--rtl-flip { transform: scaleX(-1); } 6858 .carousel__merged-slide { display: inline-flex; gap: var(--car-gap, 10px); } 6859 .carousel__pagination { display: flex; justify-content: center; list-style: none; } 6860 .carousel__pagination--on-content { position: absolute; transform: translate(-50%); left: 50%; bottom: var(--spacings-s32); } 6861 .carousel__pagination--below-content { margin-top: var(--spacings-s16); margin-bottom: var(--spacings-s16); } 6862 .carousel__scroller { display: flex; transition: transform var(--timings-default) var(--easings-ease-out); will-change: transform; } 6863 .carousel__pagination-item { width: 8px; height: 8px; border-radius: var(--corner-radius-circle); background-color: var(--control-colors-border-default); margin: var(--spacings-s0) var(--spacings-s4); flex-shrink: 0; transition: transform var(--timings-default),opacity var(--timings-default),background-color var(--timings-default); cursor: pointer; opacity: 0; transform: scale(0); } 6864 @media (hover: hover) and (pointer: fine) { 6865 .carousel__pagination-item:hover { background-color: var(--primary-colors-base-action); } 6866} 6867 @media (hover: none) and (pointer: coarse) { 6868 .carousel__pagination-item:hover { background-color: var(--primary-colors-base-action); } 6869} 6870 .carousel__pagination-item--active { background-color: var(--primary-colors-base-default); } 6871 .carousel__pagination-item--visible { opacity: 1; transform: scale(0.6); } 6872 .carousel__pagination-item--mid-visible, .carousel__pagination-item--normal { opacity: 1; transform: scale(1); } 6873 .carousel__pagination-item--edge { transform: scale(0.6); opacity: 1; } 6874} 6875.inspire-me { height: 100%; overflow-y: auto; } 6876@media (pointer: fine) { 6877 .inspire-me::-webkit-scrollbar { width: 4px; height: 4px; } 6878 .inspire-me::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; } 6879 .inspire-me::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r4); background-color: var(--background-colors-border); } 6880 .inspire-me::-webkit-scrollbar-corner { background: transparent; } 6881} 6882@supports (-moz-appearance: none) { 6883 .inspire-me { scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 6884} 6885@media (pointer: coarse) { 6886 .inspire-me::-webkit-scrollbar { display: none; } 6887} 6888.inspire-me { padding: var(--spacings-s24) 0 var(--spacings-s64); box-sizing: border-box; background-color: var(--background-colors-base); display: flex; flex-direction: column; gap: var(--spacings-s24); } 6889.inspire-me--mobile { padding: var(--spacings-s8) var(--spacings-s6) var(--spacings-s32); gap: var(--spacings-s16); } 6890.inspire-me__header { display: flex; flex-direction: column; gap: var(--spacings-s16); } 6891.inspire-me__title-block { display: flex; flex-direction: column; gap: var(--spacings-s8); } 6892.inspire-me__title { font-family: Bangers, cursive; font-weight: 400; font-size: 42px; line-height: 48px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-colors-base); margin: 0px; } 6893.inspire-me--mobile .inspire-me__title { font-size: 36px; line-height: 42px; } 6894.inspire-me__subtitle { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); font-weight: 500; line-height: var(--typography-t4-line-height); color: var(--text-colors-tint-1); margin: 0px; } 6895.inspire-me__chip-row { display: flex; flex-flow: wrap; align-items: center; gap: var(--spacings-s6); } 6896.inspire-me__chip-scroll { display: contents; } 6897.inspire-me--mobile .inspire-me__chip-row { flex-wrap: nowrap; min-width: 0px; } 6898.inspire-me--mobile .inspire-me__chip-row > .filter-menu { flex-shrink: 0; margin-top: var(--spacings-s0); } 6899.inspire-me--mobile .inspire-me__chip-scroll { display: flex; flex-direction: row; align-items: center; gap: var(--spacings-s6); flex: 1 1 0px; min-width: 0px; overflow-x: auto; scrollbar-width: none; } 6900.inspire-me--mobile .inspire-me__chip-scroll::-webkit-scrollbar { display: none; } 6901.inspire-me--mobile .inspire-me__chip-scroll > * { flex-shrink: 0; } 6902.inspire-me__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--spacings-s16); } 6903.inspire-me--mobile .inspire-me__grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacings-s12); } 6904.inspire-me__card { position: relative; width: 100%; aspect-ratio: 200 / 300; background-color: var(--background-colors-tint-3); border-radius: var(--corner-radius-r12); overflow: hidden; } 6905.inspire-me__card--clickable { cursor: pointer; } 6906.inspire-me__card--stacked { aspect-ratio: auto; background-color: transparent; border-radius: 0px; overflow: visible; display: flex; flex-direction: column; gap: var(--spacings-s12); } 6907.inspire-me__card--framed { background-color: rgb(28, 28, 28); border-radius: var(--corner-radius-r16); padding: var(--spacings-s16); } 6908.inspire-me__card--framed .inspire-me__card-media { background-color: rgb(28, 28, 28); } 6909.inspire-me__card-hit { position: absolute; inset: 0px; } 6910.inspire-me__card-media { position: relative; width: 100%; aspect-ratio: 200 / 300; background-color: var(--background-colors-tint-3); border-radius: var(--corner-radius-r12); overflow: hidden; } 6911.inspire-me__card-pill { position: absolute; left: 50%; bottom: var(--spacings-s16); transform: translate(-50%); z-index: 3; pointer-events: none; } 6912.inspire-me__card-pill > * { pointer-events: auto; } 6913.inspire-me__card-carousel { position: absolute; inset: 0px; } 6914.inspire-me__card-carousel .carousel__content-wrapper, .inspire-me__card-carousel .carousel__content, .inspire-me__card-carousel .carousel__slide { height: 100%; } 6915.inspire-me__card-slide-image { width: 100%; height: 100%; object-fit: cover; display: block;
6915 -webkit-user-drag: none; user-select: none; } 6916.inspire-me__card-dots { display: flex; align-items: center; justify-content: center; gap: var(--spacings-s6); padding: var(--spacings-s4) 0; } 6917.inspire-me__card-dot { appearance: none; border: 0px; padding: 0px; width: 6px; height: 6px; border-radius: var(--corner-radius-circle); background-color: rgb(59, 59, 59); cursor: pointer; transition: background-color 0.15s, width 0.15s; } 6918.inspire-me__card-dot--active { background-color: var(--primary-colors-base-default); width: 8px; height: 8px; } 6919.inspire-me__card-cta { display: flex; } 6920.inspire-me__card-cta > * { width: 100%; } 6921.inspire-me__card-image { width: 100%; height: 100%; object-fit: cover; display: block; } 6922.inspire-me__card-overlay { position: absolute; inset: 0px; background-color: var(--background-colors-transparent); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; pointer-events: none; } 6923.inspire-me__card-overlay > * { pointer-events: auto; } 6924.inspire-me__card:hover .inspire-me__card-overlay, .inspire-me__card:focus-within .inspire-me__card-overlay { opacity: 1; } 6925.inspire-me__card-badge { position: absolute; right: var(--spacings-s6); bottom: var(--spacings-s6); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 28px; min-height: 28px; border-radius: var(--corner-radius-circle); background-color: var(--negative-colors-base-default); color: var(--negative-colors-text-default); pointer-events: none; } 6926.inspire-me--mobile .inspire-me__card-badge { display: none; } 6927.inspire-me--preview { margin-inline: calc(-1 * (var(--spacings-s10) + var(--spacings-s16))); padding: 0 var(--spacings-s16) var(--spacings-s32); gap: var(--spacings-s16); } 6928.inspire-me--preview .inspire-me__grid { grid-template-columns: 1fr; gap: var(--spacings-s24); } 6929.inspire-me--preview .inspire-me__header { display: none; } 6930.inspire-me--preview .inspire-me__back { align-self: stretch; justify-content: flex-start; min-height: 52px; padding: 0 var(--spacings-s16); margin: 0 calc(-1 * var(--spacings-s16)); border-radius: 0px; box-shadow: none; background-color: var(--background-colors-base); } 6931.inspire-me__back { position: sticky; top: 0px; z-index: 4; align-self: flex-start; appearance: none; border: 0px; padding: var(--spacings-s8); margin: 0 0 var(--spacings-s8) -var(--spacings-s4); display: inline-flex; align-items: center; justify-content: center; color: var(--text-colors-base); background-color: var(--background-colors-base); border-radius: var(--corner-radius-circle); box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 8px; cursor: pointer; } 6932.inspire-me__back:hover, .inspire-me__back:focus-visible { background-color: var(--background-colors-tint-3); } 6933.inspire-me-rail { flex-shrink: 0; flex-grow: 0; width: 177px; height: 100%; box-sizing: border-box; padding-right: ; padding-bottom: ; padding-left: ; padding-top: var(--spacings-s8); overflow-y: auto; } 6934@media (pointer: fine) { 6935 .inspire-me-rail::-webkit-scrollbar { width: 4px; height: 4px; } 6936 .inspire-me-rail::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; } 6937 .inspire-me-rail::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r4); background-color: var(--background-colors-border); } 6938 .inspire-me-rail::-webkit-scrollbar-corner { background: transparent; } 6939} 6940@supports (-moz-appearance: none) { 6941 .inspire-me-rail { scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 6942} 6943@media (pointer: coarse) { 6944 .inspire-me-rail::-webkit-scrollbar { display: none; } 6945} 6946.inspire-me-rail { background-color: var(--background-colors-base); border-right: 1px solid var(--background-colors-border); } 6947.inspire-me-rail__title { font-family: Bangers, cursive; font-size: 16px; line-height: 24px; color: var(--text-colors-base); letter-spacing: 1px; margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: var(--spacings-s8); white-space: nowrap; } 6948.inspire-me-rail__section-label { position: sticky; top: 0px; z-index: 2; margin: 0px; padding: var(--spacings-s4) 0 var(--spacings-s6); background-color: var(--background-colors-base); font-family: Bangers, cursive; font-size: 14px; line-height: 20px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-colors-tint-1); } 6949.inspire-me-rail__section + .inspire-me-rail__section { margin-top: var(--spacings-s12); } 6950.inspire-me-rail__list { display: flex; flex-direction: column; gap: var(--spacings-s10); } 6951.inspire-me-rail__thumb { position: relative; width: 100%; aspect-ratio: 2 / 3; padding: 0px; background-color: var(--background-colors-tint-1); border: 1px solid var(--background-colors-tint-2); border-radius: var(--corner-radius-r8); overflow: hidden; cursor: pointer; opacity: 1; } 6952.inspire-me-rail__thumb:disabled { cursor: default; } 6953.inspire-me-rail__thumb--active { border-color: var(--primary-colors-base-active); } 6954.inspire-me-rail__thumb-image { width: 100%; height: 100%; object-fit: cover; display: block; } 6955.export-sheet__sheet-header { display: flex; justify-content: space-between; align-items: center; width: 100%; } 6956.export-sheet__sheet-title { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t5-font-size); font-weight: 600; line-height: var(--typography-t5-line-height); color: var(--text-colors-base); margin: 0px; } 6957.export-sheet__content { display: flex; flex-direction: column; align-items: center; padding-top: var(--spacings-s8); width: 100%; } 6958.export-sheet__cover-image { width: 166px; height: 246px; object-fit: cover; border-radius: 16px; margin-bottom: var(--spacings-s8); } 6959.export-sheet__cover-placeholder { width: 166px; height: 246px; border-radius: 16px; margin-bottom: var(--spacings-s8); background-color: rgba(128, 128, 128, 0.15); } 6960.export-sheet__options-list { display: flex; flex-direction: column; gap: var(--spacings-s4); width: 100%; } 6961.export-sheet__option-item { display: flex; align-items: center; gap: var(--spacings-s12); padding: var(--spacings-s12) var(--spacings-s16); background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: var(--corner-radius-r8); cursor: pointer; width: 100%; text-align: left; transition: background-color 0.12s; } 6962.export-sheet__option-item:hover { background-color: var(--backgrounds-tint-1); } 6963.export-sheet__option-item:disabled { opacity: 0.4;
6963 cursor: not-allowed; } 6964.export-sheet__option-text { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t5-font-size); font-weight: 500; } 6965.export-sheet__actions-container { display: flex; flex-direction: column; gap: var(--spacings-s12); width: 100%; padding-bottom: var(--spacings-s8); } 6966.settings__page { display: flex; flex-direction: column; width: 100%; height: 100%; background-color: var(--background-colors-base); } 6967.settings__page-header { display: flex; align-items: center; gap: var(--spacings-s4); border-bottom: 1px solid var(--background-colors-border); flex-shrink: 0; } 6968.settings__page-title { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t5-font-size); font-weight: 600; color: var(--text-colors-base); } 6969.settings__dropdown { display: flex; flex-direction: column; position: absolute; top: calc(100% + 6px); right: 0px; background-color: var(--background-colors-base); border: 1px solid var(--background-colors-border); border-radius: var(--corner-radius-r12); z-index: 500; width: 360px; max-height: 620px; overflow-y: auto; box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 16px; } 6970.settings__dropdown-header { padding: var(--spacings-s12) var(--spacings-s16) var(--spacings-s4); } 6971.settings__content { flex: 1 1 0%; overflow-y: auto; padding-left: var(--spacings-s8); } 6972.settings__section { padding: var(--spacings-s4) 0; } 6973.settings__section-title { color: var(--primary-colors-base-default); padding: var(--spacings-s12) var(--spacings-s12) var(--spacings-s4); display: block; } 6974.settings__menu-item { padding: var(--spacings-s4) var(--spacings-s8); } 6975.settings__version-item { display: flex; flex-direction: column; padding: var(--spacings-s8) var(--spacings-s12); gap: 2px; } 6976.settings__version-label { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t5-font-size); color: var(--text-colors-base); } 6977.settings__version-value { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); color: var(--text-colors-tint-2); } 6978.settings__actions { display: flex; flex-direction: column; gap: var(--spacings-s12); padding: var(--spacings-s16) var(--spacings-s16) var(--spacings-s24); margin-top: auto; flex-shrink: 0; } 6979@keyframes inking-page-ring-fill { 6980 0% { stroke-dashoffset: 540.354; } 6981 100% { stroke-dashoffset: 0; } 6982} 6983@keyframes inking-page-fade-in-up { 6984 0% { opacity: 0; transform: translateY(10px); } 6985 100% { opacity: 1; transform: translateY(0px); } 6986} 6987.inking-page__root { width: 100%; height: 100%; background-color: rgb(0, 0, 0); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } 6988.inking-page__content { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 0px 24px; } 6989.inking-page__image-wrapper { width: 230px; height: 230px; flex-shrink: 0; } 6990.inking-page__ring-svg { width: 100%; height: 100%; display: block; } 6991.inking-page__ring-track { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 4; } 6992.inking-page__ring-progress { fill: none; stroke: rgb(217, 70, 239); stroke-width: 4; stroke-linecap: round; animation: 20s linear 0s 1 normal forwards running inking-page-ring-fill; } 6993.inking-page__caption { font-family: Bangers, cursive; font-size: clamp(14px, 3.5vw, 20px); letter-spacing: 0.1em; color: rgb(255, 255, 255); text-align: center; text-transform: uppercase; line-height: 1.3; max-width: 300px; animation: 0.35s ease-out 0s 1 normal none running inking-page-fade-in-up; user-select: none; pointer-events: none; } 6994@media (max-width: 480px) { 6995 .inking-page__caption { max-width: 300px; font-size: clamp(12px, 3vw, 16px); } 6996} 6997.inking-page__subtitle { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); font-weight: 500; color: rgba(255, 255, 255, 0.6); text-align: center; line-height: 1.5; max-width: 380px; margin: 0px; user-select: none; } 6998.inking-page__cta-button { margin-top: var(--spacings-s8); display: inline-flex; align-items: center; justify-content: center; padding: var(--spacings-s12) var(--spacings-s32); height: 48px; border-radius: 24px; background: rgb(217, 70, 239); color: rgb(0, 0, 0); font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t5-font-size); font-weight: 600; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; transition: background-color 0.12s, transform 0.05s; } 6999.inking-page__cta-button:hover { background: rgb(232, 121, 249); } 7000.inking-page__cta-button:active { transform: scale(0.98); } 7001@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 7002@layer ds-atoms { 7003 .video { display: block; } 7004} 7005.app-promo-card { background-color: var(--background-colors-tint-1); border-radius: var(--corner-radius-r16); border: 1px solid var(--background-colors-tint-2); padding: var(--spacings-s10); display: flex; flex-direction: column; gap: var(--spacings-s6); width: clamp(260px, 26vw, 400px); flex-shrink: 0; position: fixed; z-index: 10; box-sizing: border-box; transition: opacity 1s; } 7006.app-promo-card--mobile { width: calc(-32px + 100vw); z-index: 1000; } 7007.app-promo-card--hiding { opacity: 0; pointer-events: none; } 7008.app-promo-card__close-button { position: absolute; top: var(--spacings-s8); right: var(--spacings-s8); z-index: 1; width: 28px; height: 28px; padding: 0px; display: flex; align-items: center; justify-content: center; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: var(--corner-radius-circle); background-color: rgba(0, 0, 0, 0.5); cursor: pointer; transition: opacity 0.2s; } 7009.app-promo-card__close-button:hover { opacity: 0.8; } 7010.app-promo-card__close-button:active { opacity: 0.6; } 7011.app-promo-card__close-button { color: var(--absolute-white-colors-base-default); min-width: 28px; } 7012.app-promo-card__close-button .button__icon { flex-basis: 16px; width: 16px; height: 16px; } 7013.app-promo-card--mobile .app-promo-card__close-button { width: 44px; height: 44px; } 7014.app-promo-card--story { right: 100px; bottom: 110px; } 7015.app-promo-card--cover { right: 300px; bottom: 110px; } 7016.app-promo-card__video-wrapper { width: 100%; aspect-ratio: 16 / 9; background-color: rgb(0, 0, 0); border-radius: var(--corner-radius-r8); overflow: hidden; flex-shrink: 0; position: relative; } 7017.app-promo-card__video { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; } 7018.app-promo-card__content { display: flex; align-items: center; gap: var(--spacings-s16); } 7019.app-promo-card__icon { width: 32px; height: 32px; border-radius: var(--corner-radius-r8); flex-shrink: 0; object-fit: cover; } 7020.app-promo-card__text-wrapper { padding-top: var(--spacings-s4); flex: 1 1 0%; min-width: 0px; } 7021.app-promo-card__title { margin: 0px; font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t3-font-size); font-weight: 600; color: var(--text-colors-base); line-height: var(--typography-t3-line-height); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 7022.app-promo-card__description { margin: 0px; font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t3-font-size); font-weight: 500; color: var(--text-colors-tint-1); line-height: var(--typography-t3-line-height); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 7023.app-promo-card__try-button { background-color: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 0 var(--spacings-s8); border-radius: var(--corner-radius-r4); font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t3-font-size); font-weight: 600; color: var(--text-colors-base); cursor: pointer; flex-shrink: 0; line-height: var(--typography-t3-line-height); transition: opacity 0.2s; } 7024.app-promo-card__try-button:hover { opacity: 0.8; } 7025.app-promo-card__try-button:active { opacity: 0.6; } 7026.app-promo-card--mobile.app-promo-card--story, .app-promo-card--mobile.app-promo-card--cover { right: 50%; bottom: 20px; transform: translate(50%); } 7027.app-promo-card--mobile .app-promo-card__try-button { min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; } 7028.app-icon-badges__badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: var(--corner-radius-r8); } 7029:root { --page-height: min(clamp(320px, calc(100vh - 134px) , 960px), calc((100vw - 64px)*.75) ); --page-width: calc(var(--page-height) * .666); } 7030@media (min-width: 1400px) { 7031 :root { --page-height: min(clamp(480px, calc(100vh - 134px) , 1080px), calc((100vw - 64px)*.75) ); } 7032} 7033@media (min-width: 769px) and (max-width: 1399px) { 7034 :root { --page-height: min(clamp(360px, calc(100vh - 134px) , 900px), calc((100vw - 64px)*.75) ); } 7035} 7036@media (max-width: 768px) { 7037 :root { --page-height: clamp(300px, min(70vh, 120vw), 600px); --page-width: calc(var(--page-height) * .666); } 7038} 7039.book__panel-error-full-page { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: var(--spacings-s24); } 7040.book__panel-error-content { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 400px; width: 100%; background-color: var(--background-colors-base); border-radius: 16px; padding: var(--spacings-s24); box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 16px; } 7041.book__panel-error-icon-circle { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px;
7041 border-radius: 36px; background-color: var(--primary-colors-alpha-20); margin-bottom: var(--spacings-s24); } 7042.book__panel-error-title { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t5-font-size); font-weight: 600; line-height: var(--typography-t5-line-height); color: var(--text-colors-base); margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: var(--spacings-s12); } 7043.book__panel-error-subtitle { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); font-weight: 500; line-height: var(--typography-t4-line-height); color: var(--text-colors-tint-1); margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: var(--spacings-s24); } 7044.book__panel-error-retry-btn { min-width: 200px; } 7045@media (max-width: 768px) { 7046 .book__panel-error-retry-btn { width: 100%; } 7047} 7048.book__panel-missing-outer { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(to right bottom, rgb(31, 41, 55), rgb(17, 24, 39)); color: rgb(156, 163, 175); padding: var(--spacings-s16); } 7049.book__panel-missing-icon { font-size: 48px; opacity: 0.5; margin-bottom: var(--spacings-s8); } 7050@media (min-width: 640px) { 7051 .book__panel-missing-icon { font-size: 60px; } 7052} 7053@media (min-width: 768px) { 7054 .book__panel-missing-icon { font-size: 72px; } 7055} 7056.book__panel-missing-label { font-family: Bangers, cursive; font-size: var(--typography-t3-font-size); text-transform: uppercase; letter-spacing: 0.05em; text-align: center; margin-bottom: var(--spacings-s4); } 7057@media (min-width: 640px) { 7058 .book__panel-missing-label { font-size: var(--typography-t4-font-size); } 7059} 7060.book__panel-missing-page-label { font-size: 10px; opacity: 0.5; } 7061@media (min-width: 640px) { 7062 .book__panel-missing-page-label { font-size: var(--typography-t3-font-size); } 7063} 7064.book__panel-missing-retry-btn { margin-top: var(--spacings-s8); padding: 6px 12px; background-color: var(--information-colors-base-default); color: rgb(255, 255, 255); font-size: 10px; font-family: Bangers, cursive; border-radius: var(--corner-radius-r4); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; transition: background-color 0.15s; } 7065.book__panel-missing-retry-btn:hover { background-color: var(--information-colors-base-action); } 7066.book__panel-missing-retry-btn:active { transform: scale(0.95); } 7067@media (min-width: 640px) { 7068 .book__panel-missing-retry-btn { margin-top: var(--spacings-s12); padding: 6px 16px; font-size: var(--typography-t3-font-size); } 7069} 7070.book__cover-action-area { position: absolute; bottom: 5rem; left: 0px; right: 0px; display: flex; justify-content: center; z-index: 20; } 7071.book__back-cover-action-area { position: absolute; bottom: 6rem; left: 0px; right: 0px; display: flex; flex-direction: column; align-items: center; gap: var(--spacings-s16); z-index: 20; } 7072.book__back-cover-download-btn { font-family: Bangers, cursive; letter-spacing: 1.5px; border: 3px solid black; box-shadow: rgb(0, 0, 0) 5px 5px; transition: 0.1s; text-transform: uppercase; cursor: pointer; background-color: var(--information-colors-base-default); color: rgb(255, 255, 255); padding: var(--spacings-s12) var(--spacings-s32); font-size: 1.25rem; font-weight: 700; height: auto; border-radius: 0px; line-height: normal; } 7073.book__back-cover-download-btn:hover { transform: scale(1.05); box-shadow: rgb(0, 0, 0) 7px 7px; } 7074.book__back-cover-download-btn:active { transform: scale(0.95); box-shadow: rgb(0, 0, 0) 2px 2px; } 7075.book__back-cover-new-anthology-btn { font-family: Bangers, cursive; letter-spacing: 1.5px; border: 3px solid black; box-shadow: rgb(0, 0, 0) 5px 5px; transition: 0.1s; text-transform: uppercase; cursor: pointer; background-color: var(--success-colors-base-default); color: rgb(255, 255, 255); padding: var(--spacings-s16) var(--spacings-s32); font-size: 1.5rem; font-weight: 700; height: auto; border-radius: 0px; line-height: normal; } 7076.book__back-cover-new-anthology-btn:hover { transform: scale(1.05); box-shadow: rgb(0, 0, 0) 7px 7px; } 7077.book__back-cover-new-anthology-btn:active { transform: scale(0.95); box-shadow: rgb(0, 0, 0) 2px 2px; } 7078.book__panel-empty { width: 100%; height: 100%; background-color: var(--background-colors-tint-3); } 7079.book__desktop-book-container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; } 7080.book__desktop-top-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-shrink: 0; padding: 8px 20px; gap: 20px; width: calc(var(--page-width) * 2); } 7081.book__desktop-top-left { display: flex; align-items: center; flex: 1 1 0%; } 7082.book__desktop-top-right { display: flex; align-items: center; gap: 12px; flex: 1 1 0%; justify-content: flex-end; } 7083.book__book-center { flex: 1 1 0%; display: flex; justify-content: center; align-items: center; perspective: 3500px; min-height: 0px; } 7084.book__book-hidden { transform: translateZ(-600px) translateY(-100px) rotateX(20deg) scale(0.9); filter: blur(6px) brightness(0.7); pointer-events: none; } 7085.book__book { position: relative; width: var(--page-width); height: var(--page-height); transform-style: preserve-3d; transition: transform 0.5s, filter 0.5s; } 7086.book__book-opened { transform: translate(calc(var(--page-width) / 2)); } 7087.book__book-blank-right::after { content: ""; position: absolute; inset: 0px; border: 1px solid var(--background-colors-border); pointer-events: none; } 7088.book__paper { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; transform-origin: left center; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1); cursor: pointer; } 7089.book__paper-flipped { transform: rotateY(-180deg); } 7090.book__front { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; overflow: hidden; background-color: rgb(10, 10, 10); transform-style: preserve-3d; padding-left: 6px; box-shadow: rgba(0, 0, 0, 0.6) 25px 0px 40px -20px inset; border: 1px solid var(--background-colors-border); } 7091.book__back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; overflow: hidden; background-color: rgb(10, 10, 10); transform-style: preserve-3d; transform: rotateY(180deg); padding-right: 6px; box-shadow: rgba(0, 0, 0, 0.6) -25px 0px 40px -20px inset; border: 1px solid var(--background-colors-border); } 7092.book__panel-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--background-colors-base); box-sizing: border-box; position: relative; } 7093.book__panel-image { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; background-color: var(--background-colors-base); } 7094.book__panel-container-full-bleed { padding: 0px !important; background-color: rgb(10, 10, 10) !important; } 7095.book__panel-image-full-bleed { object-fit: cover !important; } 7096.book__paper-first { box-shadow: rgba(0, 0, 0, 0.8) 1px 1px 1px; } 7097.book__paper-first-front { box-sizing: border-box; padding-left: 14px; box-shadow: none; } 7098.book__paper-first-front::before { content: ""; position: absolute; left: 0px; top: 0px; bottom: 0px; width: 14px; background: linear-gradient(to right, rgb(10, 10, 10), rgb(51, 51, 51) 20%, rgb(102, 102, 102) 30%, rgb(51, 51, 51) 50%, rgb(10, 10, 10)); border-right: 1px solid rgb(0, 0, 0); z-index: 25; box-shadow: rgba(0, 0, 0, 0.5) 2px 0px 5px; } 7099.book__paper-first-front::after { content: ""; position: absolute; left: 14px; top: 0px; bottom: 0px; width: 4px; background: linear-gradient(to right, rgba(0, 0, 0, 0.7), transparent); z-index: 25; } 7100.book__paper-first-front-panel-container { padding: 0px !important; background-color: rgb(10, 10, 10) !important; } 7101.book__paper-first-front-panel-image { background-color: rgb(10, 10, 10); object-fit: cover !important; width: 100% !important; height: 100% !important; } 7102.book__more-options-btn { position: absolute; top: 8px; right: 8px; z-index: 20; width: 32px; height: 32px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: var(--corner-radius-r8); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0px; background-color: rgba(0, 0, 0, 0.5); opacity: 0; transition: background-color 0.12s, opacity 0.15s; } 7103.book__panel-container:hover .book__more-options-btn, .group:hover .book__more-options-btn { opacity: 1; } 7104@media (max-width: 768px) { 7105 .book__more-options-btn { opacity: 1; } 7106} 7107.book__more-options-btn:hover { background-color: rgba(0, 0, 0, 0.7); } 7108.book__page-action-overlay { position: absolute; top: 4px; right: 6px; display: flex; flex-direction: row; gap: 4px; z-index: 20; opacity: 0; transition: opacity 0.15s; } 7109.book__panel-container:hover .book__page-action-overlay, .group:hover .book__page-action-overlay { opacity: 1; } 7110.book__page-action-overlay-btn { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: var(--corner-radius-r8); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 6px; background-color: var(--background-colors-base); transition: background-color 0.12s; } 7111.book__page-action-overlay-btn:hover { background-color: var(--background-colors-tint-3); } 7112.book__page-action-overlay-btn { color: var(--negative-colors-base-default); } 7113.book__page-action-overlay-btn-labeled { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: var(--corner-radius-r8); cursor: pointer; display: inline-flex; align-items: center; gap: var(--spacings-s8); padding: var(--spacings-s2) var(--spacings-s8); background-color: var(--background-colors-base); color: var(--text-colors-base); font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); font-weight: 500; white-space: nowrap; transition: background-color 0.12s; } 7114.book__page-action-overlay-btn-labeled:hover { background-color: var(--background-colors-tint-3); } 7115.book__page-menu-root { position: relative; display: inline-flex; } 7116.book__page-menu-dropdown { position: absolute; top: calc(100% + 4px); right: 0px; min-width: 184px; background-color: var(--background-colors-tint-1); border-radius: var(--corner-radius-r12); box-shadow: rgba(0, 0, 0, 0.35) 0px 8px 24px; overflow: hidden; z-index: 200; } 7117.book__page-menu-item { display: flex; align-items: center; gap: var(--spacings-s12); width: 100%; padding: var(--spacings-s12) var(--spacings-s16); font-size: var(--typography-t4-font-size); font-family: Picsart-Fonts, sans-serif; font-weight: 500; color: var(--text-colors-base); background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; text-align: left; white-space: nowrap; transition: background-color 0.12s; } 7118.book__page-menu-item:hover { background-color: var(--background-colors-tint-2); } 7119.book__more-options-btn:disabled, .book__page-action-overlay-btn:disabled, .book__page-action-overlay-btn-labeled:disabled, .book__page-menu-item:disabled { opacity: 0.4;
7119 cursor: not-allowed; } 7120.book__desktop-book-with-actions { display: flex; flex-direction: column; align-items: center; } 7121.book__mobile-book-wrapper { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 100vw; height: 100%; padding-top: 16px; padding-right: 16px; padding-left: 16px; padding-bottom: max(16px,env(safe-area-inset-bottom,0px)); box-sizing: border-box; user-select: none; overflow: hidden; } 7122.book__mobile-page-text { font-family: Picsart-Fonts, sans-serif; color: var(--text-colors-tint-1); font-size: clamp(13px, 3.5vw, 15px); font-weight: 600; letter-spacing: 0.04em; user-select: none; white-space: nowrap; } 7123.book__mobile-page-text-total { color: var(--texts-tint-2); font-size: clamp(11px, 3vw, 13px); font-weight: 400; } 7124.book__mobile-flip-scene { position: relative; margin: auto; width: 100%; max-width: 450px; aspect-ratio: 2 / 3; perspective: 2000px; touch-action: manipulation; } 7125@media (min-width: 480px) and (max-width: 768px) { 7126 .book__mobile-flip-scene { max-width: 400px; } 7127} 7128.book__mobile-page { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: var(--background-colors-base); border-radius: 4px; overflow: hidden; box-shadow: 0 15px 40px #0006,0 0 0 1px var(--background-colors-border); backface-visibility: hidden; } 7129.book__mobile-page .book__panel-container { border-radius: 0px; } 7130.book__mobile-page-front { z-index: 2; transform-style: preserve-3d; cursor: pointer; } 7131.book__mobile-page-front::before { content: ""; position: absolute; inset: 0px; pointer-events: none; z-index: 10; } 7132.book__mobile-page-back { z-index: 1; } 7133.book__flip-forward { animation: 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) 0s 1 normal forwards running book-flip-forward; } 7134.book__flip-backward { animation: 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) 0s 1 normal forwards running book-flip-backward; } 7135.book__flip-forward::after, .book__flip-backward::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent 30%); pointer-events: none; } 7136.book__mobile-bottom-nav { display: flex; flex-direction: column; width: 100%; padding: 0px 0px 4px; align-items: center; gap: var(--spacings-s8); } 7137.book__mobile-nav-center { display: flex; align-items: center; justify-content: center; gap: var(--spacings-s8); } 7138.book__mobile-nav-right { display: flex; width: 100%; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--spacings-s8); } 7139.book__mobile-nav-button { flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background-color: var(--background-colors-tint-1); border-radius: 50%; width: 36px; height: 36px; padding: 0px; color: var(--texts-tint-1); cursor: pointer; transition: 0.15s; user-select: none; -webkit-tap-highlight-color: transparent; } 7140.book__mobile-nav-button:active:not(:disabled) { color: var(--texts-base); transform: scale(0.85); } 7141.book__mobile-nav-button:disabled { opacity: 0.3; cursor: default; pointer-events: none; } 7142.book__mobile-generate-inline { flex-shrink: 0; } 7143.book__play-round-btn, .book__play-round-btn:hover, .book__play-round-btn:active { border-radius: 50% !important; min-width: 36px !important; width: 36px !important; height: 36px !important; padding: 0px !important; } 7144.book__teaser-panel { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacings-s12); padding: var(--spacings-s24); box-sizing: border-box; background-color: var(--background-colors-base); text-align: center; } 7145.book__teaser-title { font-family: Bangers, cursive; font-size: clamp(18px, 3.5vw, 28px); letter-spacing: 0.04em; color: var(--text-colors-base); margin: 0px; line-height: 1.15; } 7146.book__teaser-subtitle { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); color: var(--text-colors-tint-1); margin: 0px; } 7147.book__video-play-badge { position: absolute; bottom: var(--spacings-s8); right: var(--spacings-s8); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary-colors-base-default); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; padding: 0px; z-index: 10; transition: background-color 0.12s; } 7148.book__video-play-badge:hover { background: var(--primary-colors-base-action); } 7149@keyframes book-start-reading-bounce { 7150 0%, 100% { transform: translateY(0px); } 7151 50% { transform: translateY(-6px); } 7152} 7153@keyframes book-flip-forward { 7154 0% { transform: rotateY(0deg); transform-origin: left center; } 7155 100% { transform: rotateY(-180deg); transform-origin: left center; box-shadow: -10px 10px 30px #0000004d,0 0 0 1px var(--primary-colors-base-default); } 7156} 7157@keyframes book-flip-backward { 7158 0% { transform: rotateY(0deg); transform-origin: right center; } 7159 100% { transform: rotateY(180deg); transform-origin: right center; } 7160} 7161.layout__body--detail-preset .book__front, .layout__body--detail-preset .book__back { border-top-width: medium; border-top-style: none; border-top-color: currentcolor; padding-bottom: var(--spacings-s6); } 7162.layout__body--detail-preset .book__book-blank-right::after { border-top-width: medium; border-top-style: none; border-top-color: currentcolor; } 7163.page-options-sheet__sheet-header { display: flex; justify-content: space-between; align-items: center; width: 100%; } 7164.page-options-sheet__sheet-title { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t5-font-size); font-weight: 600; line-height: var(--typography-t5-line-height); color: var(--text-colors-base); margin: 0px; } 7165.page-options-sheet__options-list { display: flex; flex-direction: column; gap: var(--spacings-s4); padding: var(--spacings-s8) 0; } 7166.page-options-sheet__option-item { display: flex; align-items: center; gap: var(--spacings-s12); padding: var(--spacings-s12) var(--spacings-s16); background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: var(--corner-radius-r8); cursor: pointer; width: 100%; text-align: left; transition: background-color 0.12s; } 7167.page-options-sheet__option-item:hover { background-color: var(--backgrounds-tint-1); } 7168.page-options-sheet__option-text { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t5-font-size); font-weight: 500; color: var(--control-colors-text-default); } 7169.page-options-sheet__confirm-content { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 48px; padding-bottom: 16px; width: 100%; } 7170.page-options-sheet__confirm-icon-circle { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 28px; background: var(--primary-colors-alpha-20); margin-bottom: var(--spacings-s12); } 7171.page-options-sheet__confirm-title { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t5-font-size); font-weight: 600; line-height: var(--typography-t5-line-height); color: var(--text-colors-base); margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: var(--spacings-s8); } 7172.page-options-sheet__confirm-subtitle { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); font-weight: 500; line-height: var(--typography-t4-line-height); color: var(--text-colors-tint-1); margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: var(--spacings-s16); } 7173.page-options-sheet__confirm-actions { display: flex; flex-direction: column; gap: var(--spacings-s8); width: 100%; } 7174.design-in-sheet__sheet-header { display: flex; justify-content: space-between; align-items: center; width: 100%; } 7175.design-in-sheet__sheet-title-wrapper { display: flex; align-items: center; gap: var(--spacings-s8); } 7176.design-in-sheet__sheet-title { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t5-font-size); font-weight: 700; font-style: italic; line-height: var(--typography-t5-line-height); color: var(--text-colors-base); text-transform: uppercase; margin: 0px; } 7177.design-in-sheet__content { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: var(--spacings-s24); width: 100%; height: 100%; } 7178.design-in-sheet__promo-image { flex: 1 1 0%; min-height: 0px; width: auto; max-width: 100%; border-radius: var(--corner-radius-r20); overflow: hidden; display: block; margin-bottom: var(--spacings-s24); } 7179.design-in-sheet__title { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t6-font-size); font-weight: 700; line-height: var(--typography-t7-line-height); color: var(--text-colors-base); margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: var(--spacings-s8); } 7180.design-in-sheet__description { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); font-weight: 500; line-height: var(--typography-t4-line-height); color: var(--text-colors-tint-1); margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: var(--spacings-s24); max-width: 320px; } 7181.design-in-sheet__cta { width: 100%; } 7182.mobile-book-view__mobile-book-wrapper { width: 100%; height: 100%; display: flex; flex-direction: column; background-color: var(--background-colors-base); } 7183.mobile-book-view__mobile-book-action-bar { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; flex-shrink: 0; background-color: var(--background-colors-base); box-sizing: border-box; } 7184.mobile-book-view__mobile-book-content { flex: 1 1 0%; overflow: auto; position: relative; } 7185.mobile-book-view__action-bar-left { display: flex; align-items: center; } 7186.mobile-book-view__action-bar-right { display: flex; align-items: center; gap: var(--spacings-s8); } 7187.mobile-book-view__export-round-btn, .mobile-book-view__export-round-btn:hover, .mobile-book-view__export-round-btn:active { border-radius: 50% !important; min-width: 36px !important; width: 36px !important; height: 36px !important; padding: 0px !important; } 7188.mobile-book-view__mobile-video-loading-wrapper { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: var(--spacings-s16); box-sizing: border-box; background-color: var(--background-colors-base); } 7189.mobile-book-view__mobile-video-loading-page { width: 100%; max-width: 450px; aspect-ratio: 2 / 3; background: rgb(0, 0, 0); overflow: hidden; } 7190@media (min-width: 480px) and (max-width: 768px) { 7191 .mobile-book-view__mobile-video-loading-page { max-width: 400px; } 7192} 7193.delete-confirmation__overlay { position: fixed; inset: 0px; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; animation: 0.18s ease-out 0s 1 normal none running delete-confirmation-fade-in; } 7194.delete-confirmation__modal { position: relative; border-radius: var(--corner-radius-r16); padding: var(--spacings-s16); width: 320px; display: flex; flex-direction: column; align-items: center; gap: var(--spacings-s16); background-color: var(--background-colors-base); } 7195.delete-confirmation__icon-wrap { width: 48px; height: 48px; border-radius: 50%; background-color: var(--primary-colors-alpha-20); display: flex; align-items: center; justify-content: center; } 7196.delete-confirmation__title { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t5-font-size); line-height: 1.3; font-weight: 700; color: var(--text-colors-base); margin: 0px; text-align: center; } 7197.delete-confirmation__text { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); color: var(--text-colors-tint-1); margin: 0px; line-height: 1.5; text-align: center; } 7198.delete-confirmation__actions { display: flex; flex-direction: column; gap: var(--spacings-s8); width: 100%; } 7199@keyframes delete-confirmation-fade-in { 7200 0% { opacity: 0; } 7201 100% { opacity: 1; } 7202} 7203@keyframes delete-confirmation-pop-in { 7204 0% { transform: scale(0.92); opacity: 0; } 7205 100% { transform: scale(1); opacity: 1; } 7206} 7207@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 7208@layer ds-molecules { 7209 .popup { padding: var(--spacings-s24); position: relative; } 7210 @media screen and (max-width: 479px) { 7211 .popup { padding: var(--spacings-s16); } 7212} 7213 @media screen and (min-width: 480px) and (max-width: 767px) { 7214 .popup { padding: var(--spacings-s16); } 7215} 7216 .popup__holder { padding: var(--spacings-s24); position: relative; background-color: var(--background-colors-base); box-shadow: var(--shadows-tint-1); border-radius: var(--corner-radius-r16); border: 1px solid var(--background-colors-tint-3); } 7217 .popup__content--with-background-effect { background: var(--effects-vignette); } 7218 .popup__close-button { --dir-position: calc(-1 * var(--spacings-s16)); position: absolute; inset-block-start: var(--dir-position); inset-inline: auto var(--dir-position); } 7219 .popup__overlay-visible { opacity: 1; transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1); } 7220 .popup__overlay-hidden { opacity: 0; transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1); } 7221 .popup__holder--with-glassy-effect { background-color: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; } 7222 .popup__glass { position: relative; overflow: hidden; background-color: var(--effects-glassy-tint); border: 1px solid var(--effects-glassy-highlight-border); box-shadow: var(--effects-glassy-shadow),var(--effects-glassy-inner-shadow); backdrop-filter: var(--effects-glassy-backdrop); border-block-start: 0px; border-inline-start: 0px; } 7223 .popup__glass::before, .popup__glass::after { content: ""; position: absolute; pointer-events: none; } 7224 .popup__glass::before { inset-block-start: 0px; inset-inline: 10%; height: var(--effects-glassy-border-width); background: var(--effects-glassy-edge-top); } 7225 .popup__glass::after { inset-block: 0px; inset-inline-start: 0px; width: var(--effects-glassy-border-width); background: var(--effects-glassy-edge-side); } 7226 .popup__glass { position: absolute; inset: 0px; z-index: -1; border-radius: inherit; pointer-events: none; } 7227} 7228@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 7229@layer ds-atoms { 7230 html.scroll-frozen { height: 100%; overflow: hidden; } 7231 .overlay { position: relative; inset: 0px; width: 100%; height: 100%; overflow: auto; z-index: var(--overlay-z-index); background-color: var(--background-colors-transparent); } 7232 @media (pointer: fine) { 7233 .overlay::-webkit-scrollbar { width: 4px; } 7234 .overlay::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; } 7235 .overlay::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r4); background-color: var(--background-colors-border); } 7236 .overlay::-webkit-scrollbar-corner { background: transparent; } 7237} 7238 @supports (-moz-appearance: none) { 7239 .overlay { scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 7240} 7241 @media (pointer: coarse) { 7242 .overlay::-webkit-scrollbar { display: none; } 7243} 7244 .overlay--hide-scrollbars { scrollbar-width: none; } 7245 .overlay--hide-scrollbars::-webkit-scrollbar { display: none; } 7246 .overlay--global { position: fixed; } 7247 .overlay--local { position: absolute; } 7248 .overlay--blurred { backdrop-filter: var(--effects-blurred); } 7249 .overlay__table { display: table; table-layout: fixed; width: 100%; min-height: 100%; } 7250 .overlay__row { display: table-row; } 7251 .overlay__cell { display: table-cell; } 7252 .overlay__cell--v-top { vertical-align: top; } 7253 .overlay__cell--v-middle { vertical-align: middle; } 7254 .overlay__cell--v-bottom { vertical-align: bottom; } 7255 .overlay__cell--h-left { text-align: left; } 7256 .overlay__cell--h-center { text-align: center; } 7257 .overlay__cell--h-right { text-align: right; } 7258 .overlay__content { display: inline-block; max-width: 100%; text-align: initial; } 7259 .overlay__content--v-top { vertical-align: top; } 7260 .overlay__content--v-middle { vertical-align: middle; } 7261 .overlay__content--v-bottom { vertical-align: bottom; } 7262 .overlay__content--full-width { width: 100%; } 7263 .overlay__content--fit-width { width: fit-content; margin: auto; } 7264} 7265.explore
7265-tab__format-row { padding-right: ; padding-bottom: ; padding-left: ; max-width: 1360px; width: 100%; box-sizing: border-box; margin: 0px auto; padding-top: 41px; display: flex; flex-direction: row; gap: var(--spacings-s12); } 7266.explore-tab__format-card { position: relative; flex: 1 1 0px; min-width: 0px; aspect-ratio: 200 / 290; padding: 0px; margin: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: var(--corner-radius-r24); background-color: var(--background-colors-base); color: var(--text-colors-base); cursor: pointer; overflow: hidden; transition: transform 0.2s, background-color 0.2s, color 0.2s; } 7267.explore-tab__format-card::before { content: ""; position: absolute; inset: 0px; pointer-events: none; opacity: 0; background: radial-gradient(80% 90% at 50% -12%, rgb(73, 73, 73) 0%, transparent 100%); transition: opacity 0.2s; } 7268.explore-tab__format-card::after { content: ""; position: absolute; inset: 0px; pointer-events: none; border-radius: inherit; border: 1px solid color-mix(in srgb,var(--negative-colors-base-default) 20%,transparent); transition: border-color 0.2s; } 7269.explore-tab__format-card--active { background-color: rgb(0, 0, 0); } 7270.explore-tab__format-card--active::before { opacity: 1; } 7271.explore-tab__format-card--active::after { border-color: var(--primary-colors-base-default); } 7272.explore-tab__format-card--inactive:hover { transform: translateY(-6px); } 7273.explore-tab__format-card-title { position: absolute; top: var(--spacings-s24); left: 0px; right: 0px; font-family: Bangers, cursive; font-weight: 400; font-size: 24px; line-height: 1; letter-spacing: 0.5px; text-transform: uppercase; text-align: center; color: var(--text-colors-base); text-shadow: rgba(0, 0, 0, 0.3) 0px 2px 4px; white-space: nowrap; } 7274.explore-tab__format-card-credits { position: absolute; top: 60px; left: 0px; right: 0px; display: flex; align-items: center; justify-content: center; gap: var(--spacings-s4); } 7275.explore-tab__format-card-image-wrap { position: absolute; inset: 96px 8% var(--spacings-s16); display: flex; align-items: flex-end; justify-content: center; pointer-events: none; } 7276.explore-tab__format-card-image { object-fit: contain; max-width: min(100%, 250px); max-height: 100%; display: block; } 7277.explore-tab--mobile .explore-tab__format-row { padding-top: 17px; max-width: none; width: calc(100% + var(--spacings-s16) * 2); margin-inline: calc(var(--spacings-s16) * -1); padding-inline: var(--spacings-s16); overflow-x: auto; scrollbar-width: none; } 7278.explore-tab--mobile .explore-tab__format-row::-webkit-scrollbar { display: none; } 7279.explore-tab--mobile .explore-tab__format-card { flex: 0 0 160px; } 7280.explore-tab--mobile .explore-tab__format-card--inactive:hover { transform: none; } 7281.explore-tab__values { padding-right: ; padding-bottom: ; padding-left: ; max-width: 1360px; width: 100%; box-sizing: border-box; margin: 0px auto; padding-top: var(--spacings-s72); display: flex; flex-direction: column; align-items: center; gap: var(--spacings-s24); } 7282.explore-tab__values-heading { font-family: Bangers, cursive; font-weight: 400; font-size: 42px; line-height: 48px; letter-spacing: 0.5px; text-transform: uppercase; text-align: center; color: var(--text-colors-base); margin: 0px; } 7283.explore-tab__values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacings-s16); width: 100%; } 7284.explore-tab__value-card { position: relative; display: flex; flex-direction: column; height: 100%; background-color: var(--background-colors-base); color: var(--text-colors-base); border-radius: var(--corner-radius-r24); overflow: hidden; transition: transform 0.2s; } 7285.explore-tab__value-card::after { content: ""; position: absolute; inset: 0px; border-radius: inherit; border: 1px solid color-mix(in srgb,var(--negative-colors-base-default) 20%,transparent); pointer-events: none; } 7286.explore-tab__value-card:hover { transform: translateY(-6px); } 7287.explore-tab__value-card-media { position: relative; width: 100%; aspect-ratio: 344 / 235; background-color: var(--background-colors-tint-3); flex-shrink: 0; overflow: hidden; } 7288.explore-tab__value-card-image { width: 100%; height: 100%; object-fit: cover; display: block; } 7289.explore-tab__value-card-content { display: flex; flex-direction: column; flex: 1 1 0%; gap: var(--spacings-s12); padding: 21px var(--spacings-s24) var(--spacings-s24); } 7290.explore-tab__value-card-heading { display: flex; align-items: center; gap: var(--spacings-s12); } 7291.explore-tab__value-card-number { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background-color: var(--text-colors-base); color: var(--background-colors-base); display: flex; align-items: center; justify-content: center; font-family: Bangers, cursive; font-weight: 400; font-size: 20px; line-height: 20px; letter-spacing: 0.5px; } 7292.explore-tab__value-card-title { font-family: Bangers, cursive; font-weight: 400; font-size: 20px; line-height: 24px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-colors-base); margin: 0px; } 7293.explore-tab__value-card-body { margin: 0px; } 7294.explore-tab--mobile .explore-tab__values { padding-top: var(--spacings-s56); gap: var(--spacings-s16); } 7295.explore-tab--mobile .explore-tab__values-heading { font-size: 36px; line-height: 42px; } 7296.explore-tab--mobile .explore-tab__values-grid { grid-template-columns: 1fr; } 7297.explore-tab__story-formats { padding-right: ; padding-bottom: ; padding-left: ; max-width: 1360px; width: 100%; box-sizing: border-box; margin: 0px auto; padding-top: var(--spacings-s72); display: flex; flex-direction: column; gap: var(--spacings-s24); } 7298.explore-tab__story-formats-heading-block { display: flex; flex-direction: column; align-items: center; gap: var(--spacings-s10); text-align: center; } 7299.explore-tab__story-formats-heading { font-family: Bangers, cursive; font-weight: 400; font-size: 42px; line-height: 48px; letter-spacing: 0.5px; text-transform: uppercase; text-align: center; color: var(--text-colors-base); margin: 0px; } 7300.explore-tab__story-formats-subtitle { max-width: 560px; margin: 0px; } 7301.explore-tab__story-formats-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: var(--spacings-s16); width: 100%; } 7302.explore-tab__story-format-card { position: relative; display: flex; flex-direction: column; background-color: var(--background-colors-base); color: var(--text-colors-base); border-radius: var(--corner-radius-r24); overflow: hidden; transition: transform 0.2s; } 7303.explore-tab__story-format-card::after { content: ""; position: absolute; inset: 0px; border-radius: inherit; border: 1px solid color-mix(in srgb,var(--negative-colors-base-default) 20%,transparent); pointer-events: none; } 7304.explore-tab__story-format-card:hover { transform: translateY(-6px); } 7305.explore-tab__story-format-card-image { width: 100%; aspect-ratio: 524 / 294; object-fit: cover; display: block; flex-shrink: 0; } 7306.explore-tab__story-format-card-content { display: flex; flex-direction: column; flex: 1 1 0%; gap: var(--spacings-s12); padding: var(--spacings-s24); } 7307.explore-tab__story-format-card-heading { display: flex; align-items: center; gap: var(--spacings-s10); } 7308.explore-tab__story-format-card-badge { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background-color: var(--text-colors-base); color: var(--background-colors-base); display: flex; align-items: center; justify-content: center; } 7309.explore-tab__story-format-card-title { font-family: Bangers, cursive; font-weight: 400; font-size: 20px; line-height: 24px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-colors-base); margin: 0px; } 7310.explore-tab__story-format-card-body { flex: 1 1 0%; margin: 0px; } 7311.explore-tab__story-format-card-actions { display: flex; flex-wrap: wrap; gap: var(--spacings-s10); } 7312.explore-tab--mobile .explore-tab__story-formats { padding-top: var(--spacings-s56); gap: var(--spacings-s16); } 7313.explore-tab--mobile .explore-tab__story-formats-heading { font-size: 36px; line-height: 42px; } 7314.explore-tab--mobile .explore-tab__story-formats-grid { grid-template-columns: minmax(0px, 1fr); } 7315.explore-tab__templates { padding-right: ; padding-bottom: ; padding-left: ; max-width: 1360px; width: 100%; box-sizing: border-box; margin: 0px auto; padding-top: var(--spacings-s72); display: flex; flex-direction: column; gap: var(--spacings-s32); } 7316.explore-tab__templates-heading-block { display: flex; flex-direction: column; align-items: center; gap: var(--spacings-s10); text-align: center; } 7317.explore-tab__templates-heading { font-family: Bangers, cursive; font-weight: 400; font-size: 42px; line-height: 48px; letter-spacing: 0.5px; text-transform: uppercase; text-align: center; color: var(--text-colors-base); margin: 0px; } 7318.explore-tab__templates-subtitle { max-width: 560px; margin: 0px; } 7319.explore-tab__templates-body { display: flex; flex-direction: column; gap: var(--spacings-s16); } 7320.explore-tab__templates-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--spacings-s6); min-width: 0px; } 7321.explore-tab__templates-filter-cluster { display: flex; align-items: center; gap: var(--spacings-s6); min-width: 0px; } 7322.explore-tab__templates-filter-cluster > .filter-menu { flex-shrink: 0; } 7323.explore-tab__templates-chip-row { display: flex; align-items: center; gap: var(--spacings-s6); min-width: 0px; overflow-x: auto; scrollbar-width: none; } 7324.explore-tab__templates-chip-row::-webkit-scrollbar { display: none; } 7325.explore-tab__templates-chip-row > * { flex-shrink: 0; } 7326.explore-tab__template-grid { display: flex; flex-direction: row; gap: var(--spacings-s16); min-width: 0px; overflow-x: auto; scrollbar-width: none; } 7327.explore-tab__template-grid::-webkit-scrollbar { display: none; } 7328.explore-tab__template-grid > * { flex-shrink: 0; } 7329.explore-tab__template-card { position: relative; width: 200px; height: 300px; flex-shrink: 0; border-radius: var(--corner-radius-r12); background-color: var(--background-colors-tint-3); overflow: hidden; } 7330.explore-tab__template-card--clickable { cursor: pointer; } 7331.explore-tab__template-card-hit { position: absolute; inset: 0px; } 7332.explore-tab__template-card-img { width: 100%; height: 100%; object-fit: cover; display: block; } 7333.explore-tab__template-card-overlay { position: absolute; inset: 0px; background-color: var(--background-colors-transparent); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--timings-default) var(--easings-ease),visibility var(--timings-default) var(--easings-ease); } 7334.explore-tab__template-card-overlay > * { pointer-events: auto; } 7335.explore-tab__template-card:hover .explore-tab__template-card-overlay, .explore-tab__template-card:focus-within .explore-tab__template-card-overlay { opacity: 1; visibility: visible; } 7336.explore-tab--mobile .explore-tab__templates { padding-top: var(--spacings-s56); gap: var(--spacings-s16); } 7337.explore-tab--mobile .explore-tab__templates-heading { font-size: 36px; line-height: 42px; } 7338.explore-tab--mobile .explore-tab__template-grid { gap: var(--spacings-s12); } 7339.explore-tab--mobile .explore-tab__template-card { width: 140px; height: 210px; } 7340@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 7341@layer ds-atoms { 7342 .list { display: grid; list-style-type: none; } 7343 .list-item { min-width: 0px; min-height: 0px; } 7344} 7345.explore-tab__faq { padding-right: ; padding-left: ; max-width: 1360px; width: 100%; box-sizing: border-box; margin: 0px auto; padding-top: var(--spacings-s32); padding-bottom: var(--spacings-s32); display: flex; flex-direction: column; align-items: center; gap: var(--spacings-s16); } 7346.explore-tab__faq-title { font-family: Bangers, cursive; font-weight: 400; font-size: 42px; line-height: 48px; letter-spacing: 0.5px; text-transform: uppercase; text-align: center; color: var(--text-colors-base); margin: 0px; } 7347.explore-tab__faq-list { width: 100%; margin: 0px; padding: 0px; } 7348.explore-tab__faq-item { background-color: var(--background-colors-tint-1); border-radius: var(--corner-radius-r12); padding: var(--spacings-s16); } 7349.explore-tab__faq-question { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--spacings-s16); width: 100%; padding: var(--spacings-s6) 0; margin: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: none; cursor: pointer; text-align: left; color: var(--text-colors-base); } 7350.explore-tab__faq-chevron { display: inline-flex; flex-shrink: 0; transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1); } 7351.explore-tab__faq-chevron--open { transform: rotate(180deg); } 7352.explore-tab__faq-answer-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1); } 7353.explore-tab__faq-answer-wrap--open { grid-template-rows: 1fr; } 7354.explore-tab__faq-answer-inner { overflow: hidden; min-height: 0px; } 7355.explore-tab__faq-answer { margin: 0px; padding-top: var(--spacings-s16); } 7356.explore-tab--mobile .explore-tab__faq { padding-top: var(--spacings-s48); } 7357.explore-tab--mobile .explore-tab__faq-title { font-size: 36px; line-height: 42px; } 7358.explore-tab { width: 100%; height: 100%; overflow: hidden auto; box-sizing: border-box; background-color: var(--background-colors-base); padding-bottom: var(--spacings-s64); } 7359@media (pointer: fine) { 7360 .explore-tab::-webkit-scrollbar { width: 4px; height: 4px; } 7361 .explore-tab::-webkit-scrollbar-track { border-radius: var(--corner-radius-r4); background-color: transparent; } 7362 .explore-tab::-webkit-scrollbar-thumb { border-radius: var(--corner-radius-r4); background-color: var(--background-colors-border); } 7363 .explore-tab::-webkit-scrollbar-corner { background: transparent; } 7364} 7365@supports (-moz-appearance: none) { 7366 .explore-tab { scrollbar-color: var(--background-colors-border) transparent; scrollbar-width: thin; } 7367} 7368@media (pointer: coarse) { 7369 .explore-tab::-webkit-scrollbar { display: none; } 7370} 7371.explore-tab__hero { padding: var(--spacings-s24) 0 0; max-width: 1360px; width: 100%; box-sizing: border-box; margin: 0px auto; text-align: center; } 7372.explore-tab__hero-heading { font-family: Bangers, cursive; font-weight: 400; color: var(--text-colors-base); font-size: 48px; line-height: normal; letter-spacing: 2px; text-transform: uppercase; margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: var(--spacings-s12); } 7373.explore-tab__hero-highlight { color: var(--primary-colors-base-default); font-family: Bangers, cursive; font-size: inherit; line-height: normal; } 7374.explore-tab__hero-description { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t5-font-size); font-weight: 500; line-height: var(--typography-t5-line-height); color: var(--text-colors-tint-1); margin: 0px auto; max-width: 620px; } 7375.explore-tab--mobile { padding-top: var(--spacings-s8); padding-bottom: var(--spacings-s32); } 7376.explore-tab--mobile .explore-tab__hero { padding-top: 0px; } 7377.explore-tab--mobile .explore-tab__hero-heading { font-size: 36px; line-height: 42px; letter-spacing: 0.5px; margin-bottom: var(--spacings-s10); } 7378.explore-tab--mobile .explore-tab__hero-description { font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); } 7379.create-own-tooltip { position: relative; } 7380.create-own-tooltip__card { position: absolute; bottom: calc(100% + 14px); right: 0px; width: 340px; left: calc(50% - 170px); background-color: var(--background-colors-base); border: 1px solid var(--background-colors-border); border-radius: var(--corner-radius-r12); overflow: visible; box-shadow: rgba(0, 0, 0, 0.45) 0px 8px 32px; animation: 0.35s ease-out 0s 1 normal none running create-own-tooltip-fade-in-up; z-index: 1100; } 7381.create-own-tooltip__card::after { content: ""; position: absolute; bottom: -8px; right: calc(50% - 8px); width: 16px; height: 16px; background-color: var(--background-colors-base); border-right: 1px solid var(--background-colors-border); border-bottom: 1px solid var(--background-colors-border); transform: rotate(45deg); border-radius: 2px; } 7382.create-own-tooltip__card-inner { border-radius: var(--corner-radius-r12); overflow: hidden; position: relative; z-index: 1; } 7383.create-own-tooltip__preview-wrapper { position:
7383 relative; margin: var(--spacings-s16); aspect-ratio: 16 / 9; border-radius: var(--corner-radius-r8); overflow: hidden; } 7384.create-own-tooltip__preview-image { width: 100%; height: 100%; object-fit: cover; display: block; } 7385.create-own-tooltip__dismiss-btn { position: absolute; top: 8px; right: 8px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; padding: 0px; line-height: 0; width: 20px; min-width: 20px; height: 20px; color: rgb(255, 45, 85); } 7386.create-own-tooltip__dismiss-btn::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: rgb(255, 255, 255); } 7387.create-own-tooltip__dismiss-btn svg { position: relative; } 7388.create-own-tooltip__body { padding: 0 var(--spacings-s16) var(--spacings-s16); flex-direction: column; gap: var(--spacings-s8); } 7389.create-own-tooltip__title { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); font-weight: 700; color: var(--texts-base); margin-top: 0px; margin-right: 0px; margin-left: 0px; line-height: 1.3; margin-bottom: var(--spacings-s4); } 7390.create-own-tooltip__description { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t3-font-size); font-weight: 500; color: var(--texts-tint-2); margin-top: 0px; margin-right: 0px; margin-left: 0px; line-height: 1.5; margin-bottom: var(--spacings-s8); } 7391.create-own-tooltip__cta-button { width: 100%; margin-top: var(--spacings-s4); } 7392@keyframes create-own-tooltip-fade-in-up { 7393 0% { opacity: 0; transform: translateY(8px); } 7394 100% { opacity: 1; transform: translateY(0px); } 7395} 7396.desktop-book-view__book-wrapper { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; } 7397.desktop-book-view__book-wrapper--has-help-footer { padding-top: 17px; } 7398@media (min-width: 1400px) { 7399 .desktop-book-view__book-wrapper--has-help-footer { --page-height: min(clamp(480px, calc(100vh - 186px) , 1080px), calc((100vw - 64px)*.75) ); --page-width: calc(var(--page-height) * .666); } 7400} 7401@media (min-width: 769px) and (max-width: 1399px) { 7402 .desktop-book-view__book-wrapper--has-help-footer { --page-height: min(clamp(360px, calc(100vh - 186px) , 900px), calc((100vw - 64px)*.75) ); --page-width: calc(var(--page-height) * .666); } 7403} 7404.desktop-book-view__book-area { flex: 1 1 0%; width: 100%; display: flex; align-items: center; justify-content: center; min-height: 0px; position: relative; } 7405.desktop-book-view__video-inking-container { width: var(--page-width); height: var(--page-height); overflow: hidden; background: rgb(0, 0, 0); } 7406.desktop-book-view__bottom-action-bar { display: flex; align-items: center; justify-content: space-between; align-self: center; width: calc(var(--page-width) * 2); box-sizing: border-box; flex-shrink: 0; padding: var(--spacings-s16) 0; margin-top: var(--spacings-s24); } 7407.desktop-book-view__pagination-left { display: flex; align-items: center; gap: var(--spacings-s8); flex: 0 0 auto; } 7408.desktop-book-view__pagination-spacer { flex: 1 1 0%; } 7409.desktop-book-view__nav-arrow-btn { display: flex; align-items: center; justify-content: center; background-color: var(--background-colors-tint-3); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: var(--corner-radius-r24); padding: var(--spacings-s4); cursor: pointer; transition: background 0.15s; width: 28px; min-width: 28px; height: 28px; color: var(--text-colors-base); } 7410.desktop-book-view__nav-arrow-btn:hover:not(:disabled) { background-color: var(--background-colors-tint-2); } 7411.desktop-book-view__nav-arrow-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; } 7412.desktop-book-view__page-label { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); font-weight: 600; color: var(--text-colors-tint-1); user-select: none; white-space: nowrap; letter-spacing: 0.02em; } 7413.desktop-book-view__page-label-total { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t3-font-size); font-weight: 500; color: var(--texts-tint-2); } 7414.desktop-book-view__button-group { display: flex; align-items: center; gap: var(--spacings-s8); flex-shrink: 0; } 7415.desktop-book-view__generate-button { flex-shrink: 0; } 7416.desktop-book-view__play-round-btn, .desktop-book-view__play-round-btn:hover, .desktop-book-view__play-round-btn:active { border-radius: 50% !important; min-width: 40px !important; width: 40px !important; height: 40px !important; padding: 0px !important; } 7417.desktop-book-view__share-tooltip { position: absolute; top: 6px; right: 12px; width: 340px; background-color: var(--background-colors-base); border: 1px solid var(--background-colors-border); border-radius: var(--corner-radius-r12); box-shadow: rgba(0, 0, 0, 0.45) 0px 8px 32px; padding: var(--spacings-s16); z-index: 1100; animation: 0.35s ease-out 0s 1 normal none running desktop-book-view-share-tooltip-fade-in; } 7418.desktop-book-view__share-tooltip-arrow { position: absolute; top: -6px; right: 20px; width: 10px; height: 10px; background-color: var(--background-colors-base); border-left: 1px solid var(--background-colors-border); border-top: 1px solid var(--background-colors-border); transform: rotate(45deg); border-radius: 2px; } 7419.desktop-book-view__share-tooltip-title { margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: var(--spacings-s4); } 7420.desktop-book-view__share-tooltip-description { margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: var(--spacings-s12); } 7421.desktop-book-view__share-tooltip-cta { width: 100%; } 7422@keyframes desktop-book-view-share-tooltip-fade-in { 7423 0% { opacity: 0; transform: translateY(-8px); } 7424 100% { opacity: 1; transform: translateY(0px); } 7425} 7426@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 7427@layer ds-molecules { 7428 .tabs { display: grid; overflow: auto hidden; scroll-behavior: smooth; overscroll-behavior: contain; scrollbar-width: none; } 7429 .tabs::-webkit-scrollbar { display: none; } 7430 .tabs--large { min-height: 40px; max-height: 40px; } 7431 .tabs--large .tabs__list { height: 40px; } 7432 .tabs--small { min-height: 32px; max-height: 32px; } 7433 .tabs--small .tabs__list { height: 32px; } 7434 .tabs--not-fixed { justify-content: start; } 7435 .tabs__list { --tabs-indicator-color: var(--primary-colors-base-active); position: relative; display: flex; } 7436 .tabs__list[active-tab-hovered] { --tabs-indicator-color: var(--primary-colors-base-active-action); } 7437 .tabs__list::after { content: ""; position: absolute; bottom: var(--spacings-s0); left: var(--spacings-s0); width: var(--tabs-active-tab-width); height: 2px; transform: translate(var(--tabs-active-tab-x)); transition: all var(--timings-default) var(--easings-linear); pointer-events: none; background-color: var(--tabs-indicator-color); } 7438 .tab { display: flex; align-items: center; justify-content: center; column-gap: var(--spacings-s4); position: relative; background-color: transparent; color: var(--control-colors-text-default); height: 100%; transition-property: color; transition-timing-function: var(--easings-ease); transition-duration: var(--timings-default); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; white-space: nowrap; } 7439 .tab--large { padding: var(--spacings-s10); font-weight: 600; font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); } 7440 .tab--large .tab__item { padding-block: var(--spacings-s0); padding-inline: var(--spacings-s2); }
7441 .tab--large .tab__icon { width: 20px; height: 20px; } 7442 .tab--small { padding: var(--spacings-s6); font-weight: 600; font-size: var(--typography-t3-font-size); line-height: var(--typography-t3-line-height); } 7443 .tab--small .tab__item { padding-block: var(--spacings-s0); padding-inline: var(--spacings-s2); } 7444 .tab--small .tab__icon { width: 20px; height: 20px; } 7445 .tab::after { content: ""; position: absolute; bottom: var(--spacings-s0); left: var(--spacings-s0); right: var(--spacings-s0); height: 2px; opacity: 0; transition: all var(--timings-default) var(--easings-linear); background-color: transparent; pointer-events: none; } 7446 .tab--not-fixed { flex: 0 0 auto; } 7447 .tab--fixed { width: 100%; } 7448 @media (hover: hover) and (pointer: fine) { 7449 .tab--interactive:hover { color: var(--control-colors-text-action); } 7450 .tab--interactive:hover::after { opacity: 1; background-color: var(--control-colors-border-action); } 7451} 7452 @media (hover: none) and (pointer: coarse) { 7453 .tab--interactive:active { color: var(--control-colors-text-action); } 7454 .tab--interactive:active::after { opacity: 1; background-color: var(--control-colors-border-action); } 7455} 7456 .tab--active { color: var(--primary-colors-base-active); } 7457 @media (hover: hover) and (pointer: fine) { 7458 .tab--active:hover { color: var(--primary-colors-base-active-action); } 7459} 7460 @media (hover: none) and (pointer: coarse) { 7461 .tab--active:active { color: var(--primary-colors-base-active-action); } 7462} 7463 .tab__icon { flex-shrink: 0; } 7464 .tab__icon path { fill: currentcolor; } 7465} 7466@keyframes powEnter { 7467 0% { transform: scale(0) rotate(-45deg); opacity: 0; } 7468 30% { transform: scale(1.5) rotate(10deg); opacity: 1; } 7469 100% { transform: scale(1.8) rotate(0deg); opacity: 0; } 7470} 7471.desktop-content-panel { flex: 1 1 0%; min-width: 0px; overflow: hidden; display: flex; flex-direction: column; position: relative; box-sizing: border-box; background-color: var(--background-colors-base); border: 1px solid var(--background-colors-border); border-radius: var(--corner-radius-r24); padding: var(--spacings-s16) var(--spacings-s24); } 7472.desktop-content-panel--chromeless { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 0px; padding: 0px; } 7473.desktop-content-panel__tab-header { display: flex; flex-direction: column; background-color: var(--background-colors-base); flex-shrink: 0; } 7474.desktop-content-panel__library-tabs { width: fit-content; } 7475.desktop-content-panel__tab-content { flex: 1 1 0%; overflow: hidden; position: relative; display: flex; flex-direction: column; } 7476.desktop-content-panel__save-status { position: absolute; z-index: 400; top: var(--spacings-s16); left: var(--spacings-s16); padding: var(--spacings-s6) var(--spacings-s12); font-size: var(--typography-t3-font-size); font-family: Picsart-Fonts, sans-serif; border-radius: var(--corner-radius-r8); pointer-events: none; } 7477.desktop-content-panel__save-status--saving, .desktop-content-panel__save-status--saved { background-color: var(--background-colors-tint-2); color: var(--text-colors-tint-2); } 7478.desktop-content-panel__save-status--error { background-color: var(--background-colors-tint-2); color: var(--text-colors-base); } 7479.desktop-content-panel__save-status-content { display: flex; align-items: center; gap: var(--spacings-s6); color: currentcolor; } 7480.desktop-content-panel__save-status-content .text { color: currentcolor; } 7481.desktop-content-panel__pdf-progress { position: absolute; z-index: 400; top: var(--spacings-s16); left: var(--spacings-s16); padding: var(--spacings-s6) var(--spacings-s12); font-size: var(--typography-t3-font-size); font-family: Picsart-Fonts, sans-serif; border-radius: var(--corner-radius-r8); pointer-events: none; } 7482.desktop-content-panel__pdf-progress--normal { background-color: var(--background-colors-tint-2); color: var(--text-colors-tint-2); } 7483.desktop-content-panel__pdf-progress--error { background-color: var(--background-colors-tint-2); color: var(--text-colors-base); } 7484.desktop-content-panel__pdf-progress-content { display: flex; align-items: center; gap: var(--spacings-s6); } 7485.desktop-content-panel__transition-overlay { position: absolute; inset: 0px; z-index: 100; pointer-events: none; display: flex; align-items: center; justify-content: center; } 7486.desktop-content-panel__pow-svg { width: 500px; height: 400px; filter: drop-shadow(rgba(0, 0, 0, 0.5) 0px 10px 0px); animation: 1s ease-out 0s 1 normal forwards running powEnter; } 7487.desktop-content-panel__footer { flex-shrink: 0; display: flex; justify-content: flex-end; align-items: center; gap: var(--spacings-s4); padding: var(--spacings-s8) var(--spacings-s16); border-top: 1px solid var(--background-colors-border); } 7488.desktop-content-panel__faq-help-text { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t3-font-size); color: var(--text-colors-tint-3); } 7489.desktop-content-panel__faq-link { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t3-font-size); color: var(--text-colors-tint-2); text-decoration: underline; } 7490.desktop-content-panel__faq-link:hover { color: var(--text-colors-base); } 7491.desktop-content-panel__collection-wrapper { flex: 1 1 0%; overflow: hidden; background-color: var(--background-colors-base); } 7492.header-components__title-red { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t5-font-size); font-weight: 700; color: var(--primary-colors-base-default); letter-spacing: 0.01em; } 7493.header-components__title-yellow { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t5-font-size); font-weight: 700; color: var(--primary-colors-base-default); } 7494.header-components__title-golden { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); font-weight: 600; color: var(--primary-colors-base-default); letter-spacing: 0.01em; } 7495.header-components__close-button { width: 32px; height: 32px; background-color: transparent; color: var(--text-colors-tint-2); font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t5-font-size); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: var(--corner-radius-r8); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.15s, color 0.15s; } 7496.header-components__close-button-mobile { width: 36px; height: 36px; background-color: transparent; color: var(--text-colors-tint-2); font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t5-font-size); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: var(--corner-radius-r8); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.15s, color 0.15s; } 7497.header-components__close-button .button__icon, .header-components__close-button-mobile .button__icon { flex-basis: 16px; width: 16px; height: 16px; } 7498.header-components__close-button:hover, .header-components__close-button-mobile:hover { background-color: var(--background-colors-tint-2); color: var(--text-colors-base); } 7499.header-components__close-button:active, .header-components__close-button-mobile:active { transform: scale(0.95); } 7500.apps-menu__menu { position: fixed; top: 58px; left: var(--spacings-s16); max-width: 500px; max-height: calc(-100px + 100vh); display: flex; flex-direction: column; background-color: var(--background-colors-base); border-radius: var(--corner-radius-r12); z-index: 1000; animation: 0.3s ease-out 0s 1 normal none running apps-menu-slide-in-left; border: 1px solid var(--background-colors-border); overflow-y: auto; } 7501.apps-menu__header { display: flex; align-items: center; justify-content: flex-start; padding: var(--spacings-s12) var(--spacings-s16); flex-shrink: 0; } 7502.apps-menu__section-title { font-size: var(--typography-t5-font-size); font-weight: 600; color: var(--text-colors-base); margin: 0px; } 7503.apps-menu__apps-list { display: flex; flex-direction: column; gap: 0px; } 7504.apps-menu__app-item { display: flex; align-items: center; padding: var(--spacings-s6); border-radius: var(--corner-radius-r8); background-color: transparent; cursor: pointer; transition: 0.15s; text-decoration: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; } 7505.apps-menu__app-item:hover { background-color: var(--background-colors-tint-1); } 7506.apps-menu__app-item:active { background-color: var(--background-colors-tint-2); } 7507.apps-menu__app-icon { width: 46px; height: 46px; border-radius: var(--corner-radius-r8); display: flex; align-items: center; justify-content: center; overflow: hidden; } 7508.apps-menu__app-info { flex: 1 1 0%; min-width: 0px; } 7509.apps-menu__app-title { font-size: var(--typography-t4-font-size); font-weight: 600; color: var(--text-colors-base); margin-bottom: var(--spacings-s2); text-align: left; } 7510.apps-menu__app-description { font-size: var(--typography-t3-font-size); font-weight: 500; color: var(--text-colors-tint-2); text-align: left; } 7511@keyframes apps-menu-slide-in-left { 7512 0% { opacity: 0; transform: translate(-20px); } 7513 100% { opacity: 1; transform: translate(0px); } 7514} 7515.sidebar-header { padding: var(--spacings-s12) var(--spacings-s16); border-bottom: 1px solid var(--background-colors-border); display: flex; align-items: center; justify-content: space-between; background-color: var(--background-colors-base); min-height: 48px; } 7516.sidebar-header__buttons-wrapper { display: flex; align-items: center; gap: var(--spacings-s8); } 7517.mobile-header__container { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; height: max-content; padding: var(--spacings-s8) 0; background-color: var(--background-colors-base); box-sizing: border-box; flex-shrink: 0; gap: var(--spacings-s8); } 7518.mobile-header__left-section { display: flex; align-items: center; gap: var(--spacings-s8); flex-shrink: 0; } 7519.mobile-header__right-section { display: flex; align-items: center; gap: var(--spacings-s6); flex-shrink: 0; } 7520.mobile-header__branding { display: flex; align-items: center; gap: var(--spacings-s6); } 7521.mobile-header__logo-tile { width: 32px; height: 32px; border-radius: var(--corner-radius-r8); flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--primary-colors-alpha-10); color: var(--primary-colors-base-default); } 7522.mobile-header__close-button { color: var(--text-colors-tint-2); font-size: 1rem; line-height: 1; padding: var(--spacings-s6); background: none !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; box-shadow: none !important; } 7523.mobile-header__close-button:hover { color: var(--text-colors-base); background: none !important; } 7524.mobile-header__library-container { display: flex; flex-direction: column; width: 100%; background-color: var(--background-colors-base); flex-shrink: 0; } 7525.mobile-header__library-segments { padding: var(--spacings-s12) var(--spacings-s16) 0; } 7526.mobile-header__library-filter-row { display: flex; flex-direction: row; align-items: center; gap: var(--spacings-s6); padding-right: var(--spacings-s16); } 7527.mobile-header__library-filter-row > .filter-chips__filter-bar { flex: 1 1 0px; min-width: 0px; padding-right: 0px; } 7528.mobile-header__library-filter-row > .filter-chips__filter-bar .filter-chips__chips-row-inner { gap: var(--spacings-s6); } 7529.mobile-header__library-filter-row > .filter-menu { flex-shrink: 0; margin-top: var(--spacings-s4); } 7530@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 7531@layer ds-molecules { 7532 .avatar { display: flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; flex-shrink: 0; width: var(--avatar-size); height: var(--avatar-size); background-color: var(--avatar-bg, var(--control-colors-button-background-default)); box-shadow: var(--avatar-shadow, none); border: var(--avatar-border, var(--avatar-border-width, 0px) solid var(--avatar-border-color, transparent)); cursor: var(--avatar-cursor, default); } 7533 .avatar__placeholder-icon { width: 50%; height: 50%; } 7534 .avatar__image { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; } 7535 .avatar__icon { display: inline-block; } 7536 .avatar__icon > path { fill: var(--control-colors-value-default); } 7537 .avatar__skeleton { position: absolute; inset: calc(-1 * var(--avatar-border-width, 0px)); border-radius: inherit; } 7538 .avatar__control { display: none; } 7539 .avatar__badge { display: flex; position: absolute; bottom: 0px; } 7540 [dir="ltr"] .avatar__badge { right: 0px; }
7541 [dir="rtl"] .avatar__badge { left: 0px; } 7542 .avatar--with-shadow { box-shadow: var(--shadows-tint-1); } 7543 .avatar--no-border { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; } 7544 .avatar--cursor-pointer { cursor: pointer; } 7545 [dir="ltr"] .avatar__badge--rectangle, [dir="rtl"] .avatar__badge--rectangle { left: 50%; right: auto; transform: translate(-50%); } 7546} 7547.user-menu-button { position: relative; } 7548.user-menu-button__avatar-btn { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 0px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: var(--corner-radius-circle); } 7549.user-menu-button__dropdown { position: absolute; top: calc(100% + 8px); right: 0px; width: 260px; background-color: var(--background-colors-base); border: 1px solid var(--background-colors-border); border-radius: var(--corner-radius-r12); z-index: 600; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.24) 0px 8px 24px; } 7550.user-menu-button__dropdown--above { top: auto; bottom: calc(100% + 8px); } 7551.user-menu-button__sheet-content { width: 100%; max-height: 100%; overflow: hidden auto; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--spacings-s12); padding-bottom: var(--spacings-s8); } 7552.user-menu-button__user-card-sheet { border-radius: var(--corner-radius-r12); padding: var(--spacings-s12); gap: var(--spacings-s8); } 7553.user-menu-button__menu-group-sheet { border-radius: var(--corner-radius-r12); background-color: var(--background-colors-tint-1); overflow: hidden; } 7554.user-menu-button__user-card, .user-menu-button__user-card-sheet { display: flex; align-items: center; gap: var(--spacings-s4); padding: var(--spacings-s8); background: var(--gradients-general-primary); } 7555.user-menu-button__user-info { display: flex; flex-direction: column; gap: 2px; min-width: 0px; } 7556.user-menu-button__user-name { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t5-font-size); font-weight: 600; line-height: var(--typography-t5-line-height); color: rgb(255, 255, 255); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 7557.user-menu-button__user-handle { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); line-height: var(--typography-t4-line-height); color: rgba(255, 255, 255, 0.75); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 7558.user-menu-button__menu-item-label { font-size: var(--typography-t5-font-size); line-height: var(--typography-t2-line-height); } 7559.credits-display { padding: var(--spacings-s16); background-color: var(--background-colors-base); border-radius: 12px; border: 1px solid var(--background-colors-border); display: flex; flex-direction: column; gap: var(--spacings-s12); } 7560.credits-display__top-section { display: flex; gap: var(--spacings-s12); align-items: center; } 7561.credits-display__icon-wrapper { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--primary-colors-base-action); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } 7562.credits-display__credits-info { display: flex; flex-direction: column; gap: var(--spacings-s4); flex: 1 1 0%; } 7563.credits-display__credit-line { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); font-weight: 600; line-height: var(--typography-t4-line-height); color: var(--text-colors-base); display: block; white-space: normal; word-break: break-word; } 7564.credits-display__get-more-button { align-self: flex-end; } 7565.credits-display__plan-text { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t3-font-size); line-height: var(--typography-t3-line-height); color: var(--text-colors-base); width: 100%; white-space: normal; word-break: break-word; } 7566.app-header { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 var(--spacings-s16); background-color: var(--background-colors-base); flex-shrink: 0; width: 100%; box-sizing: border-box; } 7567.app-header--compact { height: auto; padding: var(--spacings-s6); } 7568.app-header--divided { height: auto; padding: var(--spacings-s6); border-bottom: 1px solid var(--background-colors-border); } 7569.app-header__back-area { display: flex; align-items: center; gap: var(--spacings-s6); }
7570.app-header__video-back-btn { width: 20px; min-width: 20px; height: 20px; padding: 0px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: var(--text-colors-tint-1); } 7571.app-header__branding { display: flex; align-items: center; gap: var(--spacings-s10); } 7572.app-header__logo-circle { width: 40px; height: 40px; border-radius: var(--corner-radius-circle); flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--primary-colors-alpha-10); } 7573.app-header__comic-me-logo-frame { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--primary-colors-alpha-10); color: var(--primary-colors-base-default); } 7574.app-header__app-name { font-family: Bangers, cursive; font-weight: 400; font-size: 20px; line-height: 24px; letter-spacing: 0.5px; color: var(--text-colors-base); margin: 0px; } 7575.app-header__right-area { display: flex; align-items: center; gap: var(--spacings-s8); } 7576.app-header__dropdown-title { font-family: Bangers, cursive; font-size: var(--typography-t5-font-size); font-weight: 400; line-height: 24px; color: var(--text-colors-base); text-transform: uppercase; margin: 0px; padding: var(--spacings-s8) var(--spacings-s16) var(--spacings-s4); display: block; } 7577.app-header__settings-wrapper, .app-header__export-wrapper { position: relative; } 7578.app-header__dropdown { position: absolute; top: calc(100% + 6px); right: 0px; background-color: var(--background-colors-base); border: 1px solid var(--background-colors-border); border-radius: var(--corner-radius-r8); z-index: 500; width: 300px; min-width: 160px; padding: var(--spacings-s8) 0; } 7579.app-header__dropdown-item { display: flex; align-items: center; gap: var(--spacings-s10); width: 100%; padding: var(--spacings-s10) var(--spacings-s16); background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; text-align: left; font-family: Picsart-Fonts, sans-serif; transition: background-color 0.12s; } 7580.app-header__dropdown-item:hover { background-color: var(--background-colors-tint-1); } 7581.app-header__dropdown-item:disabled { opacity: 0.5; cursor: not-allowed; } 7582.app-header__dropdown-item-text { font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); font-weight: 500; color: var(--text-colors-base); } 7583.app-header__dropdown-actions { display: flex; flex-direction: column; gap: var(--spacings-s8); padding: 0 var(--spacings-s8) var(--spacings-s8); } 7584.app-header__video-compact-export-btn { margin-right: var(--spacings-s8); } 7585.app-header__video-compact-export-btn, .app-header__video-compact-export-btn:hover, .app-header__video-compact-export-btn:active { border-radius: 50% !important; min-width: 36px !important; width: 36px !important; height: 36px !important; padding: 0px !important; } 7586.app-header__close-button { color: var(--text-colors-tint-2); font-size: 1rem; line-height: 1; padding: var(--spacings-s10); background: none !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; box-shadow: none !important; } 7587.app-header__close-button:hover { color: var(--text-colors-base); background: none !important; } 7588.mobile-bottom-nav { position: sticky; bottom: 0px; width: calc(100% + var(--spacings-s16) * 2); margin-inline: calc(var(--spacings-s16) * -1); flex-shrink: 0; box-sizing: border-box; z-index: 20; display: flex; align-items: stretch; padding-top: var(--spacings-s8); padding-bottom: calc(var(--spacings-s6) + env(safe-area-inset-bottom,0px)); background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(26px); } 7589.mobile-bottom-nav__item-button { flex: 1 1 0px; min-width: 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacings-s2); padding: 0px; border: 0px; background: transparent; cursor: pointer; color: var(--text-colors-base); -webkit-tap-highlight-color: transparent; } 7590.mobile-bottom-nav__item-button--active { color: var(--primary-colors-base-default); } 7591.mobile-bottom-nav__item-button:active { opacity: 0.6; } 7592.mobile-bottom-nav__item-label { font-family: Picsart-Fonts, sans-serif; font-size: 10px; font-weight: 600; line-height: 14px; color: inherit; white-space: nowrap; } 7593.mobile-write-footer { flex-shrink: 0; width: calc(100% + var(--spacings-s16) * 2); margin-inline: calc(var(--spacings-s16) * -1); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: var(--spacings-s8); padding: var(--spacings-s4) var(--spacings-s16); background-color: rgba(0, 0, 0, 0.8); } 7594.mobile-apps-view { width: 100%; height: 100%; overflow: hidden auto; display: flex; flex-direction: column; box-sizing: border-box; background-color: var(--background-colors-base); padding: var(--spacings-s12) var(--spacings-s6) var(--spacings-s32); } 7595.mobile-apps-view__section-header { display: flex; flex-direction: column; gap: var(--spacings-s12); margin-bottom: var(--spacings-s16); } 7596.mobile-apps-view__section-title { font-family: Bangers, cursive; font-size: 24px; line-height: normal; letter-spacing: 1px; color: var(--text-colors-base); margin: 0px; }
7597.mobile-apps-view__cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacings-s12); } 7598.mobile-apps-view__card { width: 100%; aspect-ratio: 2 / 3; border-radius: var(--corner-radius-r16); position: relative; overflow: hidden; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 0px; background: none; display: block; cursor: pointer; text-align: left; text-decoration: none; } 7599.mobile-apps-view__card:active { opacity: 0.85; } 7600.mobile-apps-view__card--non-nav { cursor: default; } 7601.mobile-apps-view__card--non-nav:active { opacity: 1; } 7602.mobile-apps-view__card-banner { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; display: block; } 7603.mobile-apps-view__card-info { position: absolute; bottom: 0px; left: 0px; right: 0px; display: flex; flex-direction: row; align-items: center; gap: var(--spacings-s8); padding: var(--spacings-s12); background-color: var(--effects-alpha-50); backdrop-filter: blur(8px); } 7604.mobile-apps-view__card-icon-wrapper { width: var(--spacings-s32); height: var(--spacings-s32); border-radius: var(--corner-radius-r8); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } 7605.mobile-apps-view__card-icon-image { width: 100%; height: 100%; object-fit: cover; display: block; } 7606.mobile-apps-view__card-text-group { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; gap: var(--spacings-s2); overflow: hidden; } 7607.mobile-apps-view__card-title, .mobile-apps-view__card-description { margin: 0px; } 7608.onboarding { position: fixed; inset: 0px; z-index: 200; background-color: rgb(26, 26, 26); overflow: hidden; } 7609.onboarding__slide { position: absolute; inset: 0px; transition: transform 0.4s, opacity 0.4s; } 7610.onboarding__background-image { position: absolute; inset: 0px; background-size: cover; background-position: center center; background-repeat: no-repeat; } 7611.onboarding__skip-button { position: absolute; top: 16px; right: 20px; z-index: 10; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: var(--negative-colors-base-default); font-size: 16px; font-family: Picsart-Fonts, sans-serif; cursor: pointer; padding: 8px 4px; opacity: 0.9; } 7612.onboarding__skip-button:hover { opacity: 1; } 7613.onboarding__footer { position: absolute; bottom: 0px; left: 0px; right: 0px; z-index: 10; display: flex; flex-direction: column; gap: 20px; padding: 0px 20px 40px; } 7614body { min-height: 100vh; font-family: Picsart-Fonts, sans-serif; margin: 0px; } 7615@media (min-width: 769px) { 7616 body { overflow-x: hidden; } 7617} 7618*, ::before, ::after { box-sizing: border-box; font-family: Picsart-Fonts, sans-serif; } 7619.blank__body { overflow-y: hidden; } 7620@keyframes layout-pow-enter { 7621 0% { transform: scale(0) rotate(-45deg); opacity: 0; } 7622 30% { transform: scale(1.5) rotate(10deg); opacity: 1; } 7623 100% { transform: scale(1.8) rotate(0deg); opacity: 0; } 7624} 7625.layout__container { display: flex; flex-direction: column; width: calc(100% + var(--spacings-s16)); margin-inline-start: calc(var(--spacings-s16) * -1); overflow: hidden; background-color: var(--background-colors-base); } 7626.layout__body { display: flex; flex: 1 1 0%; flex-direction: row; overflow: hidden; position: relative; padding: 0 var(--spacings-s16) var(--spacings-s16); gap: 14px; box-sizing: border-box; } 7627.layout__body--detail { padding: 0 0 var(--spacings-s4); gap: 0px; } 7628.layout__body--detail-preset { padding-top: var(--spacings-s12); } 7629.layout__sidebar-panel { flex-shrink: 0; flex-grow: 0; width: 380px; height: 100%; z-index: 10; box-sizing: border-box; background-color: var(--background-colors-base); border: 1px solid var(--background-colors-border); border-radius: var(--corner-radius-r24); overflow: hidden; } 7630.layout__mobile-container { display: flex; flex-direction: column; width: calc(100% + var(--spacings-s16) * 2); margin-inline: calc(var(--spacings-s16) * -1); padding-inline: var(--spacings-s16); box-sizing: border-box; overflow: hidden; background-color: var(--background-colors-base); } 7631.layout__mobile-content { flex: 1 1 0%; overflow: hidden; position: relative; margin-inline: calc(var(--spacings-s16) * -1); padding-inline: var(--spacings-s16); } 7632.layout__mobile-sidebar-wrapper { width: 100%; height: 100%; overflow: auto; background-color: var(--background-colors-base); } 7633.layout__mobile-collection-wrapper { width: calc(100% + var(--spacings-s16) * 2); margin-inline: calc(var(--spacings-s16) * -1); height: 100%; overflow: auto; padding-block: var(--spacings-s2); padding-inline: calc(var(--spacings-s10) + var(--spacings-s16)); box-sizing: border-box; } 7634.layout__video-player-content { display: flex; flex-direction: column; align-items: stretch; justify-content: center; flex: 1 1 0%; overflow: hidden; min-height: 0px; } 7635.layout__video-player-content-desktop { align-items: center; justify-content: center; gap: 12px; } 7636.layout__video-player-wrapper { position: relative; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; } 7637.layout__video-player-wrapper--full { aspect-ratio: unset; height: 100%; } 7638.layout__video-player-wrapper-desktop { flex: 0 0 auto; height: clamp(480px, -134px + 100vh, 1080px); width: auto; border-radius: 12px; } 7639.layout__video-player-wrapper-desktop--full { height: 100%; } 7640.layout__video-player-el { display: block; width: 100%; height: 100%; object-fit: contain; } 7641.layout__video-hover-actions { position: absolute; top: 4px; right: 6px; display: flex; flex-direction: row; gap: 4px; z-index: 20; opacity: 0; transition: opacity 0.15s; } 7642.layout__video-player-wrapper-desktop:hover .layout__video-hover-actions { opacity: 1; } 7643.layout__video-hover-actions-btn { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: var(--corner-radius-r8); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 6px; background-color: var(--background-colors-base); transition: background-color 0.12s; color: var(--negative-colors-base-default); } 7644.layout__video-hover-actions-btn:hover { background-color: var(--background-colors-tint-3); } 7645.layout__video-hover-actions-btn:disabled { opacity: 0.4;
7645 cursor: not-allowed; } 7646.layout__video-hover-actions-btn-labeled { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: var(--corner-radius-r8); cursor: pointer; display: inline-flex; align-items: center; gap: var(--spacings-s8); padding: var(--spacings-s2) var(--spacings-s8); background-color: var(--background-colors-base); color: var(--text-colors-base); font-family: Picsart-Fonts, sans-serif; font-size: var(--typography-t4-font-size); font-weight: 500; white-space: nowrap; transition: background-color 0.12s; } 7647.layout__video-hover-actions-btn-labeled:hover { background-color: var(--background-colors-tint-3); } 7648.layout__video-hover-menu-root { position: relative; display: inline-flex; } 7649.layout__video-hover-menu-dropdown { position: absolute; top: calc(100% + 4px); right: 0px; min-width: 184px; background-color: var(--background-colors-tint-1); border-radius: var(--corner-radius-r12); box-shadow: rgba(0, 0, 0, 0.35) 0px 8px 24px; overflow: hidden; z-index: 200; } 7650.layout__video-hover-menu-item { display: flex; align-items: center; gap: var(--spacings-s12); width: 100%; padding: var(--spacings-s12) var(--spacings-s16); font-size: var(--typography-t4-font-size); font-family: Picsart-Fonts, sans-serif; font-weight: 500; color: var(--text-colors-base); background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; text-align: left; white-space: nowrap; transition: background-color 0.12s; } 7651.layout__video-hover-menu-item:hover { background-color: var(--background-colors-tint-3); } 7652.layout__video-player-overlay { position: absolute; inset: 0px; display: flex; align-items: center; justify-content: center; pointer-events: none; } 7653.layout__video-player-error { position: absolute; inset: 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background-color: rgba(0, 0, 0, 0.7); } 7654.layout__video-player-inline { position: absolute; inset: 0px; z-index: 10; background-color: var(--background-colors-base); display: flex; flex-direction: column; } 7655.layout__video-player-inline--with-rail { left: 177px; } 7656.layout__video-player-inline-mobile { margin-inline: var(--spacings-s16); } 7657.layout__video-player-inline-mobile--full { margin-inline: 0px; } 7658.layout__video-player-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: var(--spacings-s24); flex-shrink: 0; } 7659.layout__video-player-actions-desktop { width: calc(0.666667 * clamp(480px, -134px + 100vh, 1080px)); padding: var(--spacings-s16) 0; } 7660.layout__video-player-submit { display: flex; flex-shrink: 0; padding-top: var(--spacings-s16); } 7661.layout__video-player-submit-desktop { width: calc(0.666667 * clamp(480px, -134px + 100vh, 1080px)); padding-top: 0px; } 7662.faq-section__section { width: 100%; padding: var(--spacings-s32) var(--spacings-s16); box-sizing: border-box; } 7663.faq-section__inner { max-width: 720px; margin: 0px auto; } 7664.faq-section__heading { font-family: Bangers, cursive; font-size: var(--typography-t9-font-size); letter-spacing: var(--spacings-s2); line-height: var(--typography-t9-line-height); margin: var(--spacings-s0) var(--spacings-s0) var(--spacings-s24); } 7665.faq-section__item { background-color: var(--background-colors-base); border: 2px solid var(--background-colors-border); border-radius: var(--corner-radius-r8); box-shadow: var(--shadows-tint-2); padding: var(--spacings-s16) var(--spacings-s16); margin-bottom: var(--spacings-s16); } 7666.faq-section__question { font-family: Bangers, cursive; font-size: var(--typography-t6-font-size); letter-spacing: var(--spacings-s2); line-height: var(--typography-t6-line-height); margin: var(--spacings-s0) var(--spacings-s0) var(--spacings-s12); } 7667.faq-section__answer { margin: 0px; color: var(--text-colors-tint-2); line-height: 1.6; } 7668.faq-page { position: fixed; inset: 0px; z-index: 100; background-color: var(--background-colors-base); display: flex; flex-direction: column; overflow: hidden; } 7669.faq-page__header { display: flex; align-items: center; gap: var(--spacings-s8); padding: var(--spacings-s12) var(--spacings-s16); border-bottom: 2px solid var(--background-colors-border); flex-shrink: 0; } 7670.faq-page__title { font-family: Bangers, cursive; font-size: var(--typography-t8-font-size); letter-spacing: var(--spacings-s2); line-height: var(--typography-t8-line-height); margin: var(--spacings-s0); } 7671.faq-page__body { flex: 1 1 0%; overflow-y: auto; background-image: radial-gradient(circle, rgba(0, 0, 0, 0.05) 1px, transparent 1px); background-size: var(--spacings-s24) var(--spacings-s24); } 7672.seo-headings__sr-only { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; } 7673@layer ds-reset, ds-foundation, ds-subatoms, ds-atoms, ds-molecules, ds-organisms, ds-templates, ds-landing; 7674@font-face { font-family: Gilroy-Fonts; font-style: normal; font-weight: 400; src: local("Gilroy-Regular"), url("https://pastatic.picsart.com/cms-pastatic/d018cb40-40a8-4efa-a202-947285ae8329.woff2") format("woff2"); font-display: swap; unicode-range: U+20-7F; } 7675@font-face { font-family: Gilroy-Fonts; font-style: normal; font-weight: 500; src: local("Gilroy-Medium"), url("https://pastatic.picsart.com/cms-pastatic/3de40576-a960-483a-a3ab-a1743e3c4ba6.woff2") format("woff2"); font-display: swap; unicode-range: U+20-7F; } 7676@font-face { font-family: Gilroy-Fonts; font-style: normal; font-weight: 600; src: local("Gilroy-SemiBold"), url("https://pastatic.picsart.com/cms-pastatic/eae6e1ea-9319-406c-a3de-00431f8f03f4.woff2") format("woff2"); font-display: swap; unicode-range: U+20-7F; } 7677@font-face { font-family: Gilroy-Fonts; font-style: normal; font-weight: 700; src: local("Gilroy-Bold"), url("https://pastatic.picsart.com/cms-pastatic/0ea441d6-d0d4-4236-b649-67a987887865.woff2") format("woff2"); font-display: swap; unicode-range: U+20-7F; } 7678html { --fonts-gilroy: Gilroy-Fonts, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Helvetica, Arial, sans-serif; } 7679@layer ds-reset { 7680 * { margin: 0px; padding: 0px; box-sizing: border-box; } 7681 ::selection { background-color: var(--primary-colors-base-default); color: var(--primary-colors-text-default); } 7682 html { min-height: 100dvh;
7682 overscroll-behavior: none; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; font-feature-settings: normal; } 7683 @supports (-webkit-touch-callout: none) and (padding-top: env(safe-area-inset-top)) { 7684 html { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } 7685} 7686 a { text-decoration: none; } 7687 iframe { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; outline: none; } 7688 button { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: none; cursor: pointer; } 7689 input, textarea, select { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; outline: none; background: none; font-family: inherit; } 7690 input, select { appearance: none; } 7691 a, button, input, textarea, select, div { -webkit-tap-highlight-color: transparent; } 7692 input, button, textarea, select { font-family: var(--fonts-gilroy); } 7693 ul, ol { list-style: none; } 7694} 7695@layer ds-foundation { 7696 html { --easings-ease: cubic-bezier(.25, .1, .25, 1); --easings-ease-in: cubic-bezier(.42, 0, 1, 1); --easings-ease-in-out: cubic-bezier(.42, 0, .58, 1); --easings-ease-out: cubic-bezier(0, 0, .58, 1); --easings-linear: cubic-bezier(0, 0, 1, 1); --easings-practical: cubic-bezier(.4, 0, .2, 1); --easings-expressive: cubic-bezier(.4, 0, 0, 1); --easings-bounce: cubic-bezier(.34, 1.56, .64, 1); --states-disabled: .4; --corner-radius-circle: 50%; --corner-radius-r0: 0px; --corner-radius-r2: 2px; --corner-radius-r4: 4px; --corner-radius-r8: 8px; --corner-radius-r12: 12px; --corner-radius-r16: 16px; --corner-radius-r20: 20px; --corner-radius-r22: 22px; --corner-radius-r24: 24px; --corner-radius-r32: 32px; --spacings-s0: 0px; --spacings-s2: 2px; --spacings-s4: 4px; --spacings-s6: 6px; --spacings-s8: 8px; --spacings-s10: 10px; --spacings-s12: 12px; --spacings-s16: 16px; --spacings-s24: 24px; --spacings-s32: 32px; --spacings-s40: 40px; --spacings-s44: 44px; --spacings-s48: 48px; --spacings-s56: 56px; --spacings-s64: 64px; --spacings-s72: 72px; --stacking-context-lowest: -9999; --stacking-context-initial: 0; --stacking-context-layout: 1000; --stacking-context-popover: 2000; --stacking-context-popup: 3000; --stacking-context-tooltip: 4000; --stacking-context-toast: 5000; --stacking-context-highest: 9999; --timings-fast: .1s; --timings-default: .3s; --timings-medium: .5s; --timings-long: 1s; --timings-heavy: 2s; --typography-t1-font-size: 8px; --typography-t1-line-height: 10px; --typography-t2-font-size: 10px; --typography-t2-line-height: 14px; --typography-t3-font-size: 12px; --typography-t3-line-height: 16px; --typography-t4-font-size: 14px; --typography-t4-line-height: 20px; --typography-t5-font-size: 16px; --typography-t5-line-height: 24px; --typography-t6-font-size: 20px; --typography-t6-line-height: 28px; --typography-t7-font-size: 24px; --typography-t7-line-height: 32px; --typography-t8-font-size: 30px; --typography-t8-line-height: 36px; --typography-t9-font-size: 36px; --typography-t9-line-height: 48px; --typography-t10-font-size: 42px; --typography-t10-line-height: 50px; --typography-t11-font-size: 60px; --typography-t11-line-height: 72px; } 7697 html.light { --brand-colors-default: #F40BF4; --brand-colors-light: #FFFCF8; --brand-colors-dark: #000000; --absolute-black-colors-base-default: #000000; --absolute-black-colors-base-action: #313131; --absolute-black-colors-base-active: #000000; --absolute-black-colors-base-active-action: #313131; --absolute-black-colors-text-default: #ffffff; --absolute-black-colors-text-action: #ffffff; --absolute-black-colors-text-active: #ffffff; --absolute-black-colors-text-active-action: #ffffff; --absolute-white-colors-base-default: #ffffff; --absolute-white-colors-base-action: #ececec; --absolute-white-colors-base-active: #ffffff; --absolute-white-colors-base-active-action: #ececec; --absolute-white-colors-text-default: #000000; --absolute-white-colors-text-action: #000000; --absolute-white-colors-text-active: #000000; --absolute-white-colors-text-active-action: #000000; --background-colors-base: #fcfcfc; --background-colors-tint-1: #f7f7f7; --background-colors-tint-2: #f2f2f2; --background-colors-tint-3: #d9d9d9; --background-colors-border: #e8e8e8; --background-colors-transparent: rgba(0, 0, 0, .5215686275); --background-colors-tooltip: #ffffff; --background-colors-popover: #ffffff; --background-colors-canvas-back-layer: #ededed; --control-colors-border-default: #e0e0e0; --control-colors-border-action: #e0e0e0; --control-colors-border-active: #e0e0e0; --control-colors-border-active-action: #e0e0e0; --control-colors-button-background-default: #ffffff; --control-colors-button-background-action: #f7f7f7; --control-colors-button-background-active: #eeeeee; --control-colors-button-background-active-action: #f7f7f7; --control-colors-caret-default: #5a00ee; --control-colors-caret-action: #5a00ee; --control-colors-caret-active: #5a00ee; --control-colors-caret-active-action: #5a00ee; --control-colors-end-icon-default: #525252; --control-colors-end-icon-action: #3d3d3d; --control-colors-end-icon-active: #000000; --control-colors-end-icon-active-action: #3d3d3d; --control-colors-field-background-default: #ffffff; --control-colors-field-background-action: #f7f7f7; --control-colors-field-background-active: #eeeeee; --control-colors-field-background-active-action: #f7f7f7; --control-colors-placeholder-default: #707070; --control-colors-placeholder-action: #707070; --control-colors-placeholder-active: #707070; --control-colors-placeholder-active-action: #707070; --control-colors-slider-thumb-default: #fefefe; --control-colors-slider-thumb-action: #f1f1f1; --control-colors-slider-thumb-active: #fefefe; --control-colors-slider-thumb-active-action: #f1f1f1; --control-colors-slider-track-default: #C209C1; --control-colors-slider-track-action: #C209C1; --control-colors-slider-track-active: #C209C1; --control-colors-slider-track-active-action: #C209C1; --control-colors-start-icon-default: #525252; --control-colors-start-icon-action: #3d3d3d; --control-colors-start-icon-active: #000000; --control-colors-start-icon-active-action: #3d3d3d; --control-colors-text-default: #525252; --control-colors-text-action: #3d3d3d; --control-colors-text-active: #000000; --control-colors-text-active-action: #3d3d3d; --control-colors-value-default: #525252; --control-colors-value-action: #3d3d3d; --control-colors-value-active: #000000; --control-colors-value-active-action: #3d3d3d; --text-colors-base: #000000; --text-colors-tint-1: #4c4c4c; --text-colors-tint-2: #666666; --text-colors-tint-3: #737373; --error-colors-base-default: #D10037; --error-colors-base-action: #A9002D; --error-colors-base-active: #D10037; --error-colors-base-active-action: #A9002D; --error-colors-text-default: #ffffff; --error-colors-text-action: #ffffff; --error-colors-text-active: #ffffff; --error-colors-text-active-action: #ffffff; --information-colors-base-default: #0066eb; --information-colors-base-action: #0055c3; --information-colors-base-active: #0066eb; --information-colors-base-active-action: #0055c3; --information-colors-text-default: #ffffff; --information-colors-text-action: #ffffff; --information-colors-text-active: #ffffff; --information-colors-text-active-action: #ffffff; --success-colors-base-default: #00804A; --success-colors-base-action: #005A34; --success-colors-base-active: #00804A; --success-colors-base-active-action: #005A34; --success-colors-text-default: #ffffff; --success-colors-text-action: #ffffff; --success-colors-text-active: #ffffff; --success-colors-text-active-action: #ffffff; --warning-colors-base-default: #FFAA00; --warning-colors-base-action: #D99100; --warning-colors-base-active: #FFAA00; --warning-colors-base-active-action: #D99100; --warning-colors-text-default: #000000; --warning-colors-text-action: #000000; --warning-colors-text-active: #000000; --warning-colors-text-active-action: #000000; --negative-colors-base-default: #000000; --negative-colors-base-action: #787878; --negative-colors-base-active: #000000; --negative-colors-base-active-action: #787878; --negative-colors-text-default: #ffffff; --negative-colors-text-action: #ffffff; --negative-colors-text-active: #ffffff; --negative-colors-text-active-action: #ffffff; --neutral-colors-base-default: #f2f2f2; --neutral-colors-base-action: #b4b4b4; --neutral-colors-base-active: #f2f2f2; --neutral-colors-base-active-action: #b4b4b4; --neutral-colors-text-default: #000000; --neutral-colors-text-action: #000000; --neutral-colors-text-active: #000000; --neutral-colors-text-active-action: #000000; --positive-colors-base-default: #ffffff; --positive-colors-base-action: #b4b4b4; --positive-colors-base-active: #ffffff; --positive-colors-base-active-action: #b4b4b4; --positive-colors-text-default: #000000; --positive-colors-text-action: #000000; --positive-colors-text-active: #000000; --positive-colors-text-active-action: #000000; --primary-colors-base-default: #c209c1; --primary-colors-base-action: #920792; --primary-colors-base-active: #c209c1; --primary-colors-base-active-action: #920792; --primary-colors-text-default: #ffffff; --primary-colors-text-action: #ffffff; --primary-colors-text-active: #ffffff; --primary-colors-text-active-action: #ffffff; --primary-colors-alpha-10: rgba(194, 9, 193, .1019607843); --primary-colors-alpha-20: rgba(194, 9, 193, .2); --primary-colors-alpha-50: rgba(194, 9, 193, .5019607843); --primary-colors-alpha-80: rgba(194, 9, 193, .8); --transformer-colors-base-default: #3b8ce2; --transformer-colors-base-action: #3b8ce2; --transformer-colors-base-active: #3b8ce2; --transformer-colors-base-active-action: #3b8ce2; --transformer-colors-text-default: #ffffff; --transformer-colors-text-action: #ffffff; --transformer-colors-text-active: #ffffff; --transformer-colors-text-active-action: #ffffff; --monetization-plus-colors-base-default: #ac06ca; --monetization-plus-colors-base-action: #87059e; --monetization-plus-colors-base-active: #ac06ca; --monetization-plus-colors-base-active-action: #87059e; --monetization-plus-colors-text-default: #ffffff; --monetization-plus-colors-text-action: #ffffff; --monetization-plus-colors-text-active: #ffffff; --monetization-plus-colors-text-active-action: #ffffff; --monetization-plus-colors-alpha-10: rgba(172, 6, 202, .1019607843); --monetization-plus-colors-alpha-20: rgba(172, 6, 202, .2); --monetization-plus-colors-alpha-50: rgba(172, 6, 202, .5019607843); --monetization-plus-colors-alpha-80: rgba(172, 6, 202, .8); --monetization-pro-colors-base-default: #5a00ee; --monetization-pro-colors-base-action: #3d00a2; --monetization-pro-colors-base-active: #5a00ee; --monetization-pro-colors-base-active-action: #3d00a2; --monetization-pro-colors-text-default: #ffffff; --monetization-pro-colors-text-action: #ffffff; --monetization-pro-colors-text-active: #ffffff; --monetization-pro-colors-text-active-action: #ffffff; --monetization-pro-colors-alpha-10: rgba(90, 0, 238, .1019607843); --monetization-pro-colors-alpha-20: rgba(90, 0, 238, .2); --monetization-pro-colors-alpha-50: rgba(90, 0, 238, .5019607843); --monetization-pro-colors-alpha-80: rgba(90, 0, 238, .8); --monetization-ultra-colors-base-default: #158380; --monetization-ultra-colors-base-action: #0e5957; --monetization-ultra-colors-base-active: #158380; --monetization-ultra-colors-base-active-action: #0e5957; --monetization-ultra-colors-text-default: #ffffff; --monetization-ultra-colors-text-action: #ffffff; --monetization-ultra-colors-text-active: #ffffff; --monetization-ultra-colors-text-active-action: #ffffff; --monetization-ultra-colors-alpha-10: rgba(21, 131, 128, .1019607843); --monetization-ultra-colors-alpha-20: rgba(21, 131, 128, .2); --monetization-ultra-colors-alpha-50: rgba(21, 131, 128, .5019607843); --monetization-ultra-colors-alpha-80: rgba(21, 131, 128, .8); --gradients-general-brand: linear-gradient(225deg, #00ffed 0%, #19d7e7 22.96%, #7f4ad9 45.31%, #af1fc6 66.73%, #df02c0 100%); --gradients-general-primary: linear-gradient(270deg, #f749f6 0%, #c209c1 100%); --gradients-status-info: linear-gradient(270deg, #17bbf2 0%, #0066eb 100%); --gradients-status-success: linear-gradient(269.27deg, #1ac490 3.29%, #008c62 99.37%); --gradients-status-warning: linear-gradient(270deg, #ffcc63 0%, #ff921e 100%); --gradients-status-error: linear-gradient(270deg, #ff6170 0%, #d10037 100%); --gradients-monetization-plus: linear-gradient(270deg, #f749f6 0%, #c209c1 100%); --gradients-monetization-pro: linear-gradient(270deg, #8a43ff 0%, #5600e3 100%); --gradients-monetization-ultra: linear-gradient(270deg, #0fbeb9 0%, #00827e 100%); --gradients-background-up: linear-gradient(360deg, #fcfcfc 0%, transparent 100%); --gradients-background-down: linear-gradient(180deg, #fcfcfc 0%, transparent 100%); --gradients-background-left: linear-gradient(90deg, #fcfcfc 0%, transparent 100%); --gradients-background-right: linear-gradient(270deg, #fcfcfc 0%, transparent 100%); --apple-colors-base-default: #ffffff; --apple-colors-base-action: #e6e6e6; --apple-colors-base-active: #ffffff; --apple-colors-base-active-action: #e6e6e6; --apple-colors-text-default: #ffffff; --apple-colors-text-action: #ffffff; --apple-colors-text-active: #ffffff; --apple-colors-text-active-action: #ffffff; --facebook-colors-base-default: #0766ff; --facebook-colors-base-action: #0050d1; --facebook-colors-base-active: #0766ff; --facebook-colors-base-active-action: #0050d1; --facebook-colors-text-default: #ffffff; --facebook-colors-text-action: #ffffff; --facebook-colors-text-active: #ffffff; --facebook-colors-text-active-action: #ffffff; --google-colors-base-default: #f2f2f2; --google-colors-base-action: #c2c2c2; --google-colors-base-active: #f2f2f2; --google-colors-base-active-action: #c2c2c2; --google-colors-text-default: #1f1f1f;
7697 --google-colors-text-action: #1f1f1f; --google-colors-text-active: #1f1f1f; --google-colors-text-active-action: #1f1f1f; --kakao-colors-base-default: #fee500; --kakao-colors-base-action: #ebd402; --kakao-colors-base-active: #fee500; --kakao-colors-base-active-action: #ebd402; --kakao-colors-text-default: #262200; --kakao-colors-text-action: #262200; --kakao-colors-text-active: #262200; --kakao-colors-text-active-action: #262200; --line-colors-base-default: #06c755; --line-colors-base-action: #1fcd66; --line-colors-base-active: #048b3c; --line-colors-base-active-action: #06c755; --line-colors-text-default: #ffffff; --line-colors-text-action: #ffffff; --line-colors-text-active: #ffffff; --line-colors-text-active-action: #ffffff; --snapchat-colors-base-default: #fffc00; --snapchat-colors-base-action: #ece801; --snapchat-colors-base-active: #fffc00; --snapchat-colors-base-active-action: #ece801; --snapchat-colors-text-default: #000000; --snapchat-colors-text-action: #000000; --snapchat-colors-text-active: #000000; --snapchat-colors-text-active-action: #000000; --christmas-green-colors-base-default: #007c02; --christmas-green-colors-base-action: #0e5a18; --christmas-green-colors-base-active: #007c02; --christmas-green-colors-base-active-action: #0e5a18; --christmas-green-colors-text-default: #ffffff; --christmas-green-colors-text-action: #ffffff; --christmas-green-colors-text-active: #ffffff; --christmas-green-colors-text-active-action: #ffffff; --christmas-red-colors-base-default: #c70e17; --christmas-red-colors-base-action: #9e0b12; --christmas-red-colors-base-active: #c70e17; --christmas-red-colors-base-active-action: #9e0b12; --christmas-red-colors-text-default: #ffffff; --christmas-red-colors-text-action: #ffffff; --christmas-red-colors-text-active: #ffffff; --christmas-red-colors-text-active-action: #ffffff; --effects-alpha-20: color-mix(in srgb, #ffffff 20%, transparent); --effects-alpha-50: color-mix(in srgb, #ffffff 50%, transparent); --effects-alpha-80: color-mix(in srgb, #ffffff 80%, transparent); --effects-vignette: radial-gradient(44.71% 44.71% at 50.14% 50.12%, rgba(243, 10, 242, .484) 0%, rgba(243, 10, 242, .33) 32%, rgba(243, 10, 242, .187) 56%, rgba(243, 10, 242, .088) 76%, rgba(243, 10, 242, .022) 91%, rgba(243, 10, 242, 0) 100%); --effects-glassy-tint: rgba(255, 255, 255, .64); --effects-glassy-highlight: rgb(255, 255, 255); --effects-glassy-highlight-top: rgb(255, 255, 255); --effects-glassy-highlight-border: rgb(255, 255, 255); --effects-glassy-inner-shadow: inset 0px 1px 0 rgb(255 255 255 / 18%), inset 0 1px 0 rgb(255 255 255 / 10%), inset 0px 0px 19px 12px rgb(255 255 255 / 29%); --effects-glassy-blur-radius: 8px; --effects-glassy-border-width: 1px; --effects-glassy-backdrop: blur(var(--effects-glassy-blur-radius)); --effects-glassy-edge-top: linear-gradient(90deg, transparent, var(--effects-glassy-highlight-top), transparent); --effects-glassy-edge-side: linear-gradient(180deg, var(--effects-glassy-highlight), transparent, var(--effects-glassy-highlight)); --effects-glassy-shadow: 0px 8px 32px 0px rgba(0, 0, 0, .12); --effects-blurred-radius: 32px; --effects-blurred: blur(var(--effects-blurred-radius)); --shadows-tint-1: 0px 0px 16px 0px rgba(0, 0, 0, .12); --shadows-tint-2: 0px 0px 24px 0px rgba(0, 0, 0, .16); --shadows-tint-3: 0px 0px 32px 0px rgba(0, 0, 0, .16); } 7698 @media (prefers-reduced-transparency: reduce) { 7699 html.light { --effects-glassy-tint: var(--background-colors-base); --effects-glassy-backdrop: none; --effects-glassy-edge-top: none; --effects-glassy-edge-side: none; --effects-blurred: none; } 7700} 7701 html.dark { --brand-colors-default: #FF47FF; --brand-colors-light: #FFFCF8; --brand-colors-dark: #000000; --absolute-black-colors-base-default: #000000; --absolute-black-colors-base-action: #313131; --absolute-black-colors-base-active: #000000; --absolute-black-colors-base-active-action: #313131; --absolute-black-colors-text-default: #ffffff; --absolute-black-colors-text-action: #ffffff; --absolute-black-colors-text-active: #ffffff; --absolute-black-colors-text-active-action: #ffffff; --absolute-white-colors-base-default: #ffffff; --absolute-white-colors-base-action: #ececec; --absolute-white-colors-base-active: #ffffff; --absolute-white-colors-base-active-action: #ececec; --absolute-white-colors-text-default: #000000; --absolute-white-colors-text-action: #000000; --absolute-white-colors-text-active: #000000; --absolute-white-colors-text-active-action: #000000; --background-colors-base: #121212; --background-colors-tint-1: #1c1c1c; --background-colors-tint-2: #262626; --background-colors-tint-3: #454545; --background-colors-border: #303030; --background-colors-transparent: rgba(0, 0, 0, .6); --background-colors-tooltip: #000000; --background-colors-popover: #0f0f0f;
7701 --background-colors-canvas-back-layer: #262626; --control-colors-border-default: #3b3b3b; --control-colors-border-action: #3b3b3b; --control-colors-border-active: #3b3b3b; --control-colors-border-active-action: #3b3b3b; --control-colors-button-background-default: #000000; --control-colors-button-background-action: #212121; --control-colors-button-background-active: #2a2a2a; --control-colors-button-background-active-action: #212121; --control-colors-caret-default: #ff47ff; --control-colors-caret-action: #ff47ff; --control-colors-caret-active: #ff47ff; --control-colors-caret-active-action: #ff47ff; --control-colors-end-icon-default: #b3b3b3; --control-colors-end-icon-action: #cccccc; --control-colors-end-icon-active: #ffffff; --control-colors-end-icon-active-action: #cccccc; --control-colors-field-background-default: #000000; --control-colors-field-background-action: #212121; --control-colors-field-background-active: #2a2a2a; --control-colors-field-background-active-action: #212121; --control-colors-placeholder-default: #7a7a7a; --control-colors-placeholder-action: #7a7a7a; --control-colors-placeholder-active: #7a7a7a; --control-colors-placeholder-active-action: #7a7a7a; --control-colors-slider-thumb-default: #ffffff; --control-colors-slider-thumb-action: #f1f1f1; --control-colors-slider-thumb-active: #ffffff; --control-colors-slider-thumb-active-action: #f1f1f1; --control-colors-slider-track-default: #FF47FF; --control-colors-slider-track-action: #FF47FF; --control-colors-slider-track-active: #FF47FF; --control-colors-slider-track-active-action: #FF47FF; --control-colors-start-icon-default: #b3b3b3; --control-colors-start-icon-action: #cccccc; --control-colors-start-icon-active: #ffffff; --control-colors-start-icon-active-action: #cccccc; --control-colors-text-default: #b3b3b3; --control-colors-text-action: #cccccc; --control-colors-text-active: #ffffff; --control-colors-text-active-action: #cccccc; --control-colors-value-default: #b3b3b3; --control-colors-value-action: #cccccc; --control-colors-value-active: #ffffff; --control-colors-value-active-action: #cccccc; --text-colors-base: #ffffff; --text-colors-tint-1: #b3b3b3; --text-colors-tint-2: #808080; --text-colors-tint-3: #7d7d7d; --error-colors-base-default: #F8495A; --error-colors-base-action: #FC6574; --error-colors-base-active: #F8495A; --error-colors-base-active-action: #FC6574; --error-colors-text-default: #000000; --error-colors-text-action: #000000; --error-colors-text-active: #000000; --error-colors-text-active-action: #000000; --information-colors-base-default: #42c6ff; --information-colors-base-action: #7fd6fc; --information-colors-base-active: #42c6ff; --information-colors-base-active-action: #7fd6fc; --information-colors-text-default: #000000; --information-colors-text-action: #000000; --information-colors-text-active: #000000; --information-colors-text-active-action: #000000; --success-colors-base-default: #00E099; --success-colors-base-action: #4CE1B2; --success-colors-base-active: #00E099; --success-colors-base-active-action: #4CE1B2; --success-colors-text-default: #000000; --success-colors-text-action: #000000; --success-colors-text-active: #000000; --success-colors-text-active-action: #000000; --warning-colors-base-default: #FF9D00; --warning-colors-base-action: #FFBE55; --warning-colors-base-active: #FF9D00; --warning-colors-base-active-action: #FFBE55; --warning-colors-text-default: #000000; --warning-colors-text-action: #000000; --warning-colors-text-active: #000000; --warning-colors-text-active-action: #000000; --negative-colors-base-default: #ffffff; --negative-colors-base-action: #b4b4b4; --negative-colors-base-active: #ffffff; --negative-colors-base-active-action: #b4b4b4; --negative-colors-text-default: #000000; --negative-colors-text-action: #000000; --negative-colors-text-active: #000000; --negative-colors-text-active-action: #000000; --neutral-colors-base-default: #2f2f2f; --neutral-colors-base-action: #080808; --neutral-colors-base-active: #2f2f2f; --neutral-colors-base-active-action: #080808; --neutral-colors-text-default: #ffffff; --neutral-colors-text-action: #ffffff; --neutral-colors-text-active: #ffffff; --neutral-colors-text-active-action: #ffffff; --positive-colors-base-default: #000000; --positive-colors-base-action: #787878; --positive-colors-base-active: #000000; --positive-colors-base-active-action: #787878; --positive-colors-text-default: #ffffff; --positive-colors-text-action: #ffffff; --positive-colors-text-active: #ffffff; --positive-colors-text-active-action: #ffffff; --primary-colors-base-default: #ff47ff; --primary-colors-base-action: #e636e6; --primary-colors-base-active: #ff47ff; --primary-colors-base-active-action: #e636e6; --primary-colors-text-default: #000000; --primary-colors-text-action: #000000; --primary-colors-text-active: #000000; --primary-colors-text-active-action: #000000; --primary-colors-alpha-10: rgba(255, 71, 255, .1019607843); --primary-colors-alpha-20: rgba(255, 71, 255, .2); --primary-colors-alpha-50: rgba(255, 71, 255, .5019607843); --primary-colors-alpha-80: rgba(255, 71, 255, .8); --transformer-colors-base-default: #3b8ce2; --transformer-colors-base-action: #3b8ce2; --transformer-colors-base-active: #3b8ce2; --transformer-colors-base-active-action: #3b8ce2; --transformer-colors-text-default: #ffffff; --transformer-colors-text-action: #ffffff; --transformer-colors-text-active: #ffffff; --transformer-colors-text-active-action: #ffffff; --monetization-plus-colors-base-default: #e982f4; --monetization-plus-colors-base-action: #e156f0; --monetization-plus-colors-base-active: #e982f4; --monetization-plus-colors-base-active-action: #e156f0; --monetization-plus-colors-text-default: #000000; --monetization-plus-colors-text-action: #000000; --monetization-plus-colors-text-active: #000000; --monetization-plus-colors-text-active-action: #000000; --monetization-plus-colors-alpha-10: rgba(233, 130, 244, .1019607843); --monetization-plus-colors-alpha-20: rgba(233, 130, 244, .2); --monetization-plus-colors-alpha-50: rgba(233, 130, 244, .5019607843); --monetization-plus-colors-alpha-80: rgba(233, 130, 244, .8); --monetization-pro-colors-base-default: #bd99f8; --monetization-pro-colors-base-action: #8168a9; --monetization-pro-colors-base-active: #bd99f8; --monetization-pro-colors-base-active-action: #8168a9; --monetization-pro-colors-text-default: #000000; --monetization-pro-colors-text-action: #000000; --monetization-pro-colors-text-active: #000000; --monetization-pro-colors-text-active-action: #000000; --monetization-pro-colors-alpha-10: rgba(189, 153, 248, .1019607843); --monetization-pro-colors-alpha-20: rgba(189, 153, 248, .2); --monetization-pro-colors-alpha-50: rgba(189, 153, 248, .5019607843); --monetization-pro-colors-alpha-80: rgba(189, 153, 248, .8); --monetization-ultra-colors-base-default: #158380; --monetization-ultra-colors-base-action: #0e5957; --monetization-ultra-colors-base-active: #158380; --monetization-ultra-colors-base-active-action: #0e5957; --monetization-ultra-colors-text-default: #ffffff; --monetization-ultra-colors-text-action: #ffffff; --monetization-ultra-colors-text-active: #ffffff; --monetization-ultra-colors-text-active-action: #ffffff; --monetization-ultra-colors-alpha-10: rgba(21, 131, 128, .1019607843); --monetization-ultra-colors-alpha-20: rgba(21, 131, 128, .2); --monetization-ultra-colors-alpha-50: rgba(21, 131, 128, .5019607843); --monetization-ultra-colors-alpha-80: rgba(21, 131, 128, .8); --gradients-general-brand: linear-gradient(225deg, #00ffed 0%, #19d7e7 22.96%, #7f4ad9 45.31%, #af1fc6 66.73%, #df02c0 100%); --gradients-general-primary: linear-gradient(270deg, #f749f6 0%, #c209c1 100%); --gradients-status-info: linear-gradient(270deg, #6fd4ff 0%, #22afec 100%); --gradients-status-success: linear-gradient(270.09deg, #33f3b6 -1.08%, #05d08f 99.92%); --gradients-status-warning: linear-gradient(270deg, #ffcc63 0%, #ff921e 100%); --gradients-status-error: linear-gradient(270deg, #ff6170 0%, #ee3446 100%); --gradients-monetization-plus: linear-gradient(270deg, #ef5eff 0%, #d41ee8 100%); --gradients-monetization-pro: linear-gradient(270deg, #b78aff 0%, #904cff 100%); --gradients-monetization-ultra: linear-gradient(270deg, #24c7c2 0%, #009994 100%); --gradients-background-up: linear-gradient(360deg, #121212 0%, transparent 100%); --gradients-background-down: linear-gradient(180deg, #121212 0%, transparent 100%); --gradients-background-left: linear-gradient(90deg, #121212 0%, transparent 100%); --gradients-background-right: linear-gradient(270deg, #121212 0%, transparent 100%); --apple-colors-base-default: #000000; --apple-colors-base-action: #1a1a1a; --apple-colors-base-active: #000000; --apple-colors-base-active-action: #1a1a1a; --apple-colors-text-default: #ffffff; --apple-colors-text-action: #ffffff; --apple-colors-text-active: #ffffff; --apple-colors-text-active-action: #ffffff; --facebook-colors-base-default: #0766ff; --facebook-colors-base-action: #0050d1; --facebook-colors-base-active: #0766ff; --facebook-colors-base-active-action: #0050d1; --facebook-colors-text-default: #ffffff; --facebook-colors-text-action: #ffffff; --facebook-colors-text-active: #ffffff; --facebook-colors-text-active-action: #ffffff; --google-colors-base-default: #f2f2f2; --google-colors-base-action: #c2c2c2; --google-colors-base-active: #f2f2f2; --google-colors-base-active-action: #c2c2c2; --google-colors-text-default: #1f1f1f;
7701 --google-colors-text-action: #1f1f1f; --google-colors-text-active: #1f1f1f; --google-colors-text-active-action: #1f1f1f; --kakao-colors-base-default: #fee500; --kakao-colors-base-action: #ebd402; --kakao-colors-base-active: #fee500; --kakao-colors-base-active-action: #ebd402; --kakao-colors-text-default: #262200; --kakao-colors-text-action: #262200; --kakao-colors-text-active: #262200; --kakao-colors-text-active-action: #262200; --line-colors-base-default: #06c755; --line-colors-base-action: #1fcd66; --line-colors-base-active: #048b3c; --line-colors-base-active-action: #06c755; --line-colors-text-default: #ffffff; --line-colors-text-action: #ffffff; --line-colors-text-active: #ffffff; --line-colors-text-active-action: #ffffff; --snapchat-colors-base-default: #fffc00; --snapchat-colors-base-action: #ece801; --snapchat-colors-base-active: #fffc00; --snapchat-colors-base-active-action: #ece801; --snapchat-colors-text-default: #000000; --snapchat-colors-text-action: #000000; --snapchat-colors-text-active: #000000; --snapchat-colors-text-active-action: #000000; --christmas-green-colors-base-default: #13a745; --christmas-green-colors-base-action: #12942a; --christmas-green-colors-base-active: #13a745; --christmas-green-colors-base-active-action: #12942a; --christmas-green-colors-text-default: #000000; --christmas-green-colors-text-action: #000000; --christmas-green-colors-text-active: #000000; --christmas-green-colors-text-active-action: #000000; --christmas-red-colors-base-default: #ff3f53; --christmas-red-colors-base-action: #e02639; --christmas-red-colors-base-active: #ff3f53; --christmas-red-colors-base-active-action: #e02639; --christmas-red-colors-text-default: #000000; --christmas-red-colors-text-action: #000000; --christmas-red-colors-text-active: #000000; --christmas-red-colors-text-active-action: #000000; --effects-alpha-20: color-mix(in srgb, #000000 20%, transparent); --effects-alpha-50: color-mix(in srgb, #000000 50%, transparent); --effects-alpha-80: color-mix(in srgb, #000000 80%, transparent); --effects-vignette: radial-gradient(44.71% 44.71% at 50.14% 50.12%, rgba(243, 10, 242, .484) 0%, rgba(243, 10, 242, .33) 32%, rgba(243, 10, 242, .187) 56%, rgba(243, 10, 242, .088) 76%, rgba(243, 10, 242, .022) 91%, rgba(243, 10, 242, 0) 100%); --effects-glassy-tint: rgba(0, 0, 0, .64); --effects-glassy-highlight: rgb(43, 43, 43); --effects-glassy-highlight-top: rgb(102, 96, 96); --effects-glassy-highlight-border: var(--background-colors-tint-3); --effects-glassy-inner-shadow: inset 0px 1px 0 rgb(116 107 107 / 18%), inset 0 -1px 0 rgb(110 63 63 / 10%), inset 0px 0px 19px 12px rgb(0 0 0 / 29%); --effects-glassy-blur-radius: 8px; --effects-glassy-border-width: 1px; --effects-glassy-backdrop: blur(var(--effects-glassy-blur-radius)); --effects-glassy-edge-top: linear-gradient(90deg, transparent, var(--effects-glassy-highlight-top), transparent); --effects-glassy-edge-side: linear-gradient(180deg, var(--effects-glassy-highlight), transparent, var(--effects-glassy-highlight)); --effects-glassy-shadow: 0px 8px 32px 0px rgba(0, 0, 0, .12); --effects-blurred-radius: 32px; --effects-blurred: blur(var(--effects-blurred-radius)); --shadows-tint-1: 0px 2px 12px 0px rgba(0, 0, 0, .5), 0px 1px 4px 0px rgba(0, 0, 0, .35); --shadows-tint-2: 0px 6px 24px 0px rgba(0, 0, 0, .6), 0px 3px 10px 0px rgba(0, 0, 0, .4); --shadows-tint-3: 0px 20px 60px 0px rgba(0, 0, 0, .75), 0px 8px 28px 0px rgba(0, 0, 0, .55); } 7702 @media (prefers-reduced-transparency: reduce) { 7703 html.dark { --effects-glassy-tint: var(--background-colors-base); --effects-glassy-backdrop: none; --effects-glassy-edge-top: none; --effects-glassy-edge-side: none; --effects-blurred: none; } 7704} 7705} 7706</style><style id="app-snackbar-gilroy" data-prerender-captured=""> 7707 .app-snackbar-gilroy, .app-snackbar-gilroy * { font-family: "Picsart-Fonts", sans-serif !important; } 7708 .app-snackbar-gilroy [class*="title"] { white-space: pre-line !important; } 7709 </style> 7710 7711 7712 7713 7714 7715 7716 7717 7718 7719 7720 7721 7722 7723 7724 7725 7726 7727 7728 7729<link id="bangers-font" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bangers&display=swap"><style type="text/css" id="editor-root-styles" data-prerender-captured="">html { 7730 --editor-root-height: 100vh; 7731 height: var(--editor-root-height); 7732 overflow: hidden; 7733 background-color: var(--background-colors-base); 7734 user-select: none; 7735 -webkit-user-select: none; 7736 } 7737 body { 7738 height: 100%; 7739 } 7740 #root { 7741 height: 100%; 7742 }</style> 7743 <!-- SEO: injected from miniapp manifest --> 7744 <meta name="description" content="Create personalized superhero stories with AI-powered comic book generator"/> 7745 <meta name="theme-color" content="#000000" /> 7746 <meta name="robots" content="index, follow, max-image-preview:large, max-video-preview:-1" /> 7747 <meta name="keywords" content="AI comic book generator, AI comic generator from photo, photo to comic generator, AI comic maker, AI comic story generator, personalized comic book generator, turn photo into comic, AI fairy tale generator, comic strip generator, manga comic generator, superhero comic generator, AI story creator from image, create comics online,
7747comic book maker online, Picsart ComicMe" /> 7748 <link rel="canonical" href="https://comicme.ai/" /> 7749 <link rel="alternate" hreflang="en-US" href="https://comicme.ai/" /> 7750 <link rel="alternate" hreflang="x-default" href="https://comicme.ai/" /> 7751 <meta property="og:type" content="website" /> 7752 <meta property="og:site_name" content="ComicMe by Picsart" /> 7753 <meta property="og:title" content="ComicMe - AI Comic Book Generator | Picsart" /> 7754 <meta property="og:description" content="Upload your photo, choose a comic genre and art style, and let ComicMe turn you into the hero of a personalized AI-generated comic book or fairy tale." /> 7755 <meta property="og:url" content="https://comicme.ai/" /> 7756 <meta property="og:image" content="https://cdn-pipeline-output.picsart.com/pipeline-output/0431cfbc-5aff-4a95-8fed-573decd18a51.png" /> 7757 <meta property="og:image:width" content="1024" /> 7758 <meta property="og:image:height" content="576" /> 7759 <meta property="og:image:alt" content="ComicMe â AI Comic Book Generator from Photos by Picsart" /> 7760 <meta name="twitter:card" content="summary_large_image" /> 7761 <meta name="twitter:site" content="@picsart" /> 7762 <meta name="twitter:title" content="ComicMe - AI Comic Book Generator | Picsart" /> 7763 <meta name="twitter:description" content="Create personalized comics and fairy tales from your photos with AI. Choose your hero, genre, art style, tone, and language." /> 7764 <meta name="twitter:image" content="https://cdn-pipeline-output.picsart.com/pipeline-output/0431cfbc-5aff-4a95-8fed-573decd18a51.png" /> 7765 <meta name="twitter:image:alt" content="ComicMe â AI Comic Book Generator from Photos by Picsart" /> 7766
7766<script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"Picsart","url":"https://picsart.com","logo":"https://pastatic.picsart.com/cms-pastatic/picsart-og-default.jpg","sameAs":["https://twitter.com/picsart","https://www.instagram.com/picsart/","https://www.youtube.com/picsart","https://www.linkedin.com/company/picsart/"]}</script>
7766 7767
7767<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebApplication","name":"ComicMe â AI Comic Book Generator from Photos | Picsart","url":"https://comicme.ai/","description":"Turn your photos into personalized comic books and fairy tales with ComicMe. Upload a hero photo, choose a genre, art style, tone, and language, then let AI create your story.","applicationCategory":"MultimediaApplication","operatingSystem":"Web","creator":{"@type":"Organization","name":"Picsart","url":"https://picsart.com"},"featureList":["Turn yourself into a comic book hero","Choose your genre, art style, and story tone","Create comics and fairy tales in multiple languages","No drawing or editing skills required"]}</script>
7767 7768
7768<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What is ComicMe?","acceptedAnswer":{"@type":"Answer","text":"ComicMe is an AI comic book generator that turns your photos into personalized comic-style stories. Upload a hero photo, choose a genre and art style, and create a comic or fairy tale in just a few steps."}},{"@type":"Question","name":"How does ComicMe work?","acceptedAnswer":{"@type":"Answer","text":"Upload a photo of your hero, optionally add a nemesis, then select a genre, art style, tone, premise, and language. ComicMe uses AI to generate a personalized comic-style story based on your choices."}},{"@type":"Question","name":"Can I create a comic from my own photo?","acceptedAnswer":{"@type":"Answer","text":"Yes. ComicMe is designed to turn your own photo into a comic book-style character and story."}},{"@type":"Question","name":"Do I need drawing or editing skills to use ComicMe?","acceptedAnswer":{"@type":"Answer","text":"No. ComicMe does the comic creation for you. You only need to upload a photo and choose the story settings you like."}},{"@type":"Question","name":"What comic styles can I choose from?","acceptedA
7768nswer":{"@type":"Answer","text":"ComicMe supports styles such as Golden Age, Noir, Halftone, Manga, Funny Pages, and Ligne Claire."}},{"@type":"Question","name":"What genres does ComicMe support?","acceptedAnswer":{"@type":"Answer","text":"You can create stories in genres such as Action, High Fantasy, Horror, Sci-Fi, Neon Noir, Wasteland, Comedy, and Teen Drama."}},{"@type":"Question","name":"Can ComicMe create fairy tales too?","acceptedAnswer":{"@type":"Answer","text":"Yes. ComicMe supports both comic creation and fairy tale generation."}},{"@type":"Question","name":"Is ComicMe available in multiple languages?","acceptedAnswer":{"@type":"Answer","text":"Yes. ComicMe supports multiple languages, including English, German, Spanish, French, Italian, Hindi, Indonesian, Japanese, Korean, Portuguese, Russian, Ukrainian, Vietnamese, Chinese, Arabic, and Armenian."}},{"@type":"Question","name":"Who is ComicMe best for?","acceptedAnswer":{"@type":"Answer","text":"ComicMe is great for anyone who wants to create fun, personalized comic stories from photos, including social media creators, families, friends, storytellers, and comic fans."}},{"@type":"Question","name":"Is ComicMe made by Picsart?","acceptedA
7768nswer":{"@type":"Answer","text":"Yes. ComicMe is a Picsart AI experience for creating personalized comic-style stories from photos."}}]}</script>
7768 7769<link rel="modulepreload" href="/assets/index-HF9S6n1b.js">
7770<script id="shell-config" type="application/json">{"packageId":"com.picsart.infinite-heroes","appVersion":"1.102.0","deploymentUrl":"https://6f306cef61ba7a422fdcb7b25b91c10fd31af00d.miniapps-webapps.picsart.com","pulseApp":"com.picsart.apps.comicme","pulseEnvironment":"prod","exposedModule":"Sidebar","prerender":false,"language":"en","theme":"dark","sso":{"authUrl":"https://auth.picsart.com/api","clientId":"auth-service-StandaloneminiappsOAuth2Clinet","redirectUri":"https://comicme.ai","scope":"openid user-global"}}</script>
7770 7771<link rel="preconnect" href="https://6f306cef61ba7a422fdcb7b25b91c10fd31af00d.miniapps-webapps.picsart.com" crossorigin> 7772<link rel="modulepreload" href="https://6f306cef61ba7a422fdcb7b25b91c10fd31af00d.miniapps-webapps.picsart.com/remoteEntry.js" crossorigin> 7773<link rel="icon" sizes="16x16" href="https://cdn-cms-uploads.picsart.com/cms-uploads/e280410d-0f6c-476f-a7d6-3ba14ebe15c8.svg?to=min&r=16" data-favicons="true"/> 7774<link rel="icon" sizes="32x32" href="https://cdn-cms-uploads.picsart.com/cms-uploads/e280410d-0f6c-476f-a7d6-3ba14ebe15c8.svg?to=min&r=32" data-favicons="true"/> 7775<link rel="icon" sizes="48x48" href="https://cdn-cms-uploads.picsart.com/cms-uploads/e280410d-0f6c-476f-a7d6-3ba14ebe15c8.svg?to=min&r=48" data-favicons="true"/> 7776<link rel="icon" sizes="96x96" href="https://cdn-cms-uploads.picsart.com/cms-uploads/e280410d-0f6c-476f-a7d6-3ba14ebe15c8.svg?to=min&r=96" data-favicons="true"/> 7777<link rel="icon" sizes="144x144" href="https://cdn-cms-uploads.picsart.com/cms-uploads/e280410d-0f6c-476f-a7d6-3ba14ebe15c8.svg?to=min&r=144" data-favicons="true"/> 7778<link rel="icon" sizes="192x192" href="https://cdn-cms-uploads.picsart.com/cms-uploads/e280410d-0f6c-476f-a7d6-3ba14ebe15c8.svg?to=min&r=192" data-favicons="true"/> 7779<link rel="icon" sizes="256x256" href="https://cdn-cms-uploads.picsart.com/cms-uploads/e280410d-0f6c-476f-a7d6-3ba14ebe15c8.svg?to=min&r=256" data-favicons="true"/> 7780<link rel="icon" sizes="384x384" href="https://cdn-cms-uploads.picsart.com/cms-uploads/e280410d-0f6c-476f-a7d6-3ba14ebe15c8.svg?to=min&r=384" data-favicons="true"/> 7781<link rel="icon" sizes="512x512" href="https://cdn-cms-uploads.picsart.com/cms-uploads/e280410d-0f6c-476f-a7d6-3ba14ebe15c8.svg?to=min&r=512" data-favicons="true"/> 7782<link rel="shortcut icon" type="image/png" href="https://cdn-cms-uploads.picsart.com/cms-uploads/e280410d-0f6c-476f-a7d6-3ba14ebe15c8.svg?to=min&r=32" data-favicons="true"/> 7783<link rel="apple-touch-icon" sizes="57x57" href="https://cdn-cms-uploads.picsart.com/cms-uploads/e280410d-0f6c-476f-a7d6-3ba14ebe15c8.svg?to=min&r=57" data-favicons="true"/> 7784<link rel="apple-touch-icon" sizes="60x60" href="https://cdn-cms-uploads.picsart.com/cms-uploads/e280410d-0f6c-476f-a7d6-3ba14ebe15c8.svg?to=min&r=60" data-favicons="true"/> 7785<link rel="apple-touch-icon" sizes="72x72" href="https://cdn-cms-uploads.picsart.com/cms-uploads/e280410d-0f6c-476f-a7d6-3ba14ebe15c8.svg?to=min&r=72" data-favicons="true"/> 7786<link rel="apple-touch-icon" sizes="76x76" href="https://cdn-cms-uploads.picsart.com/cms-uploads/e280410d-0f6c-476f-a7d6-3ba14ebe15c8.svg?to=min&r=76" data-favicons="true"/> 7787<link rel="apple-touch-icon" sizes="114x114" href="https://cdn-cms-uploads.picsart.com/cms-uploads/e280410d-0f6c-476f-a7d6-3ba14ebe15c8.svg?to=min&r=114" data-favicons="true"/> 7788<link rel="apple-touch-icon" sizes="120x120" href="https://cdn-cms-uploads.picsart.com/cms-uploads/e280410d-0f6c-476f-a7d6-3ba14ebe15c8.svg?to=min&r=120" data-favicons="true"/> 7789<link rel="apple-touch-icon" sizes="152x152" href="https://cdn-cms-uploads.picsart.com/cms-uploads/e280410d-0f6c-476f-a7d6-3ba14ebe15c8.svg?to=min&r=152" data-favicons="true"/> 7790<link rel="apple-touch-icon" sizes="167x167" href="https://cdn-cms-uploads.picsart.com/cms-uploads/e280410d-0f6c-476f-a7d6-3ba14ebe15c8.svg?to=min&r=167" data-favicons="true"/> 7791<link rel="apple-touch-icon" sizes="180x180" href="https://cdn-cms-uploads.picsart.com/cms-uploads/e280410d-0f6c-476f-a7d6-3ba14ebe15c8.svg?to=min&r=180" data-favicons="true"/> 7792<meta name="msapplication-TileColor" content="#C209C1" data-favicons="true"/> 7793<meta name="msapplication-TileImage" content="https://cdn-cms-uploads.picsart.com/cms-uploads/e280410d-0f6c-476f-a7d6-3ba14ebe15c8.svg?to=min&r=144" data-favicons="true"/> 7794<meta name="application-name" content="ComicMe" data-favicons="true"/> 7795<meta name="msapplication-square70x70logo" content="https://cdn-cms-uploads.picsart.com/cms-uploads/e280410d-0f6c-476f-a7d6-3ba14ebe15c8.svg?to=min&r=70" data-favicons="true"/> 7796<meta name="msapplication-square150x150logo" content="https://cdn-cms-uploads.picsart.com/cms-uploads/e280410d-0f6c-476f-a7d6-3ba14ebe15c8.svg?to=min&r=150" data-favicons="true"/> 7797<meta name="msapplication-wide310x150logo" content="https://cdn-cms-uploads.picsart.com/cms-uploads/e280410d-0f6c-476f-a7d6-3ba14ebe15c8.svg?to=min&r=310" data-favicons="true"/> 7798<meta name="msapplication-square310x310logo" content="https://cdn-cms-uploads.picsart.com/cms-uploads/e280410d-0f6c-476f-a7d6-3ba14ebe15c8.svg?to=min&r=310" data-favicons="true"/> 7799<meta data-favicons="true"/> 7800</head> 7801 <body> 7802 <div id="embedded-host" style=""></div> 7803 <div id="root" style="position: fixed; inset: 0px;"><div id="miniapp-container"><div id="317406bc-b5ea-4add-b533-3b0d53d2a3b7-miniapp-container-com.picsart.infinite~dheroes" data-pulse-miniapp-sid="317406bc-b5ea-4add-b533-3b0d53d2a3b7" data-pulse-miniapp-miniapp_id="com.picsart.infinite-heroes" data-pulse-miniapp-origin="editor" data-pulse-miniapp-p
7803ackage_id="com.picsart.infinite-heroes" data-pulse-miniapp-app_version="1.102.0" data-pulse-miniapp-platform_version="" data-pulse-miniapp-type="undefined" data-bootstrapped="true"><div id="317406bc-b5ea-4add-b533-3b0d53d2a3b7-miniapp-frame-com.picsart.infinite~dheroes" data-testid="com.picsart.infinite-heroes"><section class="blank blank--full-height" data-testid="blank"><div class="blank__common blank__body blank__body--desktop" data-testid="body"><div class="seo-headings__sr-only"><h1 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">Create Personalized AI Comics from Your Photos</h1><h2 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">Turn yourself into a comic book hero</h2><h2 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">Choose your genre, art style, and story tone</h2><h2 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">Create comics and fairy tales in multiple languages</h2><h2 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">No drawing or editing skills required</h2><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">ComicMe is an AI-powered comic book and fairy tale generator by Picsart. Upload a photo of yourself or anyone else, pick a comic genre like Action, Sci-Fi, Horror, or High Fantasy, choose an art style such as Manga, Noir, or Golden Age, set the story tone and premise, select your language, and let AI generate a fully personalized comic-style story. No drawing or editing skills required. ComicMe works in over 16 languages and supports both comic book and fairy tale formats.</p><section><h2 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">Frequently Asked Questions</h2><div><h3 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">What is ComicMe?</h3><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">ComicMe is an AI-powered platform and app created by Picsart that transforms ordinary photos into personalized multi-page comic books, fairy tales, and illustrated story videos. It allows users to turn themselves, friends, or children into graphic novel or storybook characters without needing any drawing or writing skills.</p></div><div><h3 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">How does ComicMe work?</h3><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">Upload a photo of your hero, optionally add a nemesis, then select a genre, art style, tone, premise, and language. ComicMe uses AI to generate a personalized comic-style story based on your choices.</p></div><div><h3 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">Can I create a comic from my own photo?</h3><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">Yes. ComicMe is designed to turn your own photo into a comic book-style character and story.</p></div><div><h3 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">Do I need drawing or editing skills to use ComicMe?</h3><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">No. ComicMe does the comic creation for you. You only need to upload a photo and choose the story settings you like.</p></div><div><h3 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">What comic styles can I choose from?</h3><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">ComicMe supports styles such as Golden Age, Noir, Halftone, Manga, Funny Pages, and Ligne Claire.</p></div><div><h3 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">What genres does ComicMe support?</h3><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">You can create stories in genres such as Action, High Fantasy, Horror, Sci-Fi, Neon Noir, Wasteland, Comedy, and Teen Drama.</p></div><div><h3 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">Can ComicMe create fairy tales too?</h3><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">Yes. ComicMe supports both comic creation and fairy tale generation.</p></div><div><h3 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">Is ComicMe available in multiple languages?</h3><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">Yes. ComicMe supports multiple languages, including English, German, Spanish, French, Ital
7803ian, Hindi, Indonesian, Japanese, Korean, Portuguese, Russian, Ukrainian, Vietnamese, Chinese, Arabic, and Armenian.</p></div><div><h3 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">Who is ComicMe best for?</h3><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">ComicMe is great for anyone who wants to create fun, personalized comic stories from photos, including social media creators, families, friends, storytellers, and comic fans.</p></div><div><h3 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">Is ComicMe made by Picsart?</h3><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">Yes. ComicMe is a Picsart AI experience for creating personalized comic-style stories from photos.</p></div></section></div><div class="layout__container" style="height: 100vh;"><div class="app-header"><div class="app-header__branding"><div><button aria-label="Menu" type="button" class="inline-button inline-button--small inline-button--no-border inline-button--without-border-override inline-button--transparent-bg inline-button--without-bg-override inline-button--center-content inline-button--default inline-button--interactive inline-button--cursor-pointer" data-testid="ihero-app-header-menu"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="inline-button__icon" data-testid="center-icon"><path d="M8.25 12.75a3 3 0 0 1 3 3V19a3 3 0 0 1-3 3H5l-.154-.004A3 3 0 0 1 2 19v-3.25a3 3 0 0 1 2.846-2.996L5 12.75zM5 14.25a1.5 1.5 0 0 0-1.5 1.5V19A1.5 1.5 0 0 0 5 20.5h3.25a1.5 1.5 0 0 0 1.5-1.5v-3.25a1.5 1.5 0 0 0-1.5-1.5zm14-1.5a3 3 0 0 1 3 3V19a3 3 0 0 1-3 3h-3.25l-.154-.004A3 3 0 0 1 12.75 19v-3.25a3 3 0 0 1 2.846-2.996l.154-.004zm-3.25 1.5a1.5 1.5 0 0 0-1.5 1.5V19a1.5 1.5 0 0 0 1.5 1.5H19a1.5 1.5 0 0 0 1.5-1.5v-3.25a1.5 1.5 0 0 0-1.5-1.5zM8.25 2a3 3 0 0 1 3 3v3.25a3 3 0 0 1-3 3H5l-.154-.004A3 3 0 0 1 2 8.25V5a3 3 0 0 1 2.846-2.996L5 2zM5 3.5A1.5 1.5 0 0 0 3.5 5v3.25A1.5 1.5 0 0 0 5 9.75h3.25a1.5 1.5 0 0 0 1.5-1.5V5a1.5 1.5 0 0 0-1.5-1.5zM19 2a3 3 0 0 1 3 3v3.25a3 3 0 0 1-3 3h-3.25l-.154-.004A3 3 0 0 1 12.75 8.25V5a3 3 0 0 1 2.846-2.996L15.75 2zm-3.25 1.5a1.5 1.5 0 0 0-1.5 1.5v3.25a1.5 1.5 0 0 0 1.5 1.5H19a1.5 1.5 0 0 0 1.5-1.5V5A1.5 1.5 0 0 0 19 3.5z"></path></svg></button></div><div class="app-header__logo-circle"><svg width="24" height="24" fill="var(--primary-colors-base-default)" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m6.626 6.754-.28 1.537L4.1 7.164l.248 2.543-1.462.47-.544-5.573zm8.208-.892 5.834-3.04-1.264 5.627h-1.537l.63-2.804-4.286 2.234-1.64-3.072-.824 1.119-1.232-1.3L12.773 2zM8.322 17.308l-.894 1.323 3.483-1.149 1.354 2.173 2.326-2.184.296.008.19.06 2.43.757-.23-.756 1.581.041.917 2.992-4.728-1.473-3.088 2.9-1.698-2.724-6.542 2.159 2.823-4.173zm11.105-3.462a.4.4 0 0 1-.287-.442l.23-1.611.873-3.08a.4.4 0 0 1 .494-.275l.8.227a.4.4 0 0 1 .276.494l-.872 3.079-.65 1.493a.4.4 0 0 1-.475.225zm-.393 2.125a.826.826 0 0 1-.573-1.027.831.831 0 1 1 1.6.454.826.826 0 0 1-1.027.573M5.65 13.936a1.2 1.2 0 0 1 .84.932c.181.863-.272 1.53-1.374 1.763l-1.637.345a.4.4 0 0 1-.473-.31l-.845-4.011a.4.4 0 0 1 .308-.474l1.513-.319c1.083-.228 1.76.137 1.942 1 .09.425-.02.791-.274 1.074m-1.502-.878-.452.095.136.644.526-.118c.153-.054.271-.172.228-.377-.048-.226-.253-.283-.438-.244m.637 2.412c.22-.046.355-.218.312-.423-.04-.192-.189-.282-.38-.27l-.651.13.144.684zm13.871-4.665-.769 4.434a.4.4 0 0 1-.463.326l-.59-.103a.4.4 0 0 1-.326-.462l.34-1.958-1.39 1.62-.124-.021-.763-1.994-.34 1.958a.4.4 0 0 1-.462.326l-.591-.103a.4.4 0 0 1-.326-.462l.769-4.434 1.38.24.797 2.162 1.478-1.768zm-7.666 2.908a.4.4 0 0 1-.383-.286l-.185-.623H8.325l-.185.623a.4.4 0 0 1-.384.286H6.85a.4.4 0 0 1-.382-.517L8.3 7.224a.4.4 0 0 1 .382-.282h1.371a.4.4 0 0 1 .383.282l1.833 5.972a.4.4 0 0 1-.383.517zm-2.25-2.295h1.269l-.64-2.613zM6.256 3.052c.139-.111.516-.282 1.328-.698L8.59 4.27 7.502 5.424z"></path></svg></div><h2 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base app-header__app-name">Comic Me</h2></div><div class="app-header__right-area"><div class="user-menu-button"><button class="base-button base-button--default base-button--enabled user-menu-button__avatar-btn" tabindex="0" aria-label="User menu" aria-disabled="false" data-testid="ihero-user-menu-avatar" type="button"><div class="avatar avatar--with-shadow" data-testid="avatar-container" width="40" height="40" style="--avatar-size: 40px;"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="avatar__placeholder-icon avatar__icon" aria-hidden="true"><path d="M17.053 7.077q0-1.068-.38-1.97a5.2 5.2 0 0 0-1.09-1.611 5.2 5.2 0 0 0-1.614-1.09A4.9 4.9 0 0 0 11.999 2q-1.043 0-1.97.404a5.2 5.2 0 0 0-1.612 1.091 5.2 5.2 0 0 0-1.091 1.614 5 5 0 0 0-.38 1.97q0 1.042.38 1.968a5.2 5.2 0 0 0 1.09 1.613q.69.664 1.614 1.068a4.9 4.9 0 0 0 1.969.403q1.044 0 1.969-.403a5.4 5.4 0 0 0 1.614-1.068 5.2 5.2 0 0 0 1.09-1.613q.38-.926.38-1.97m-1.518 0q0 1.472-1.044 2.514-1.02 1.02-2.491 1.02a3.47 3.47 0 0 1-2.514-1.02 3.47 3.47 0 0 1-1.02-2.514q0-1.471 1.02-2.515A3.42 3.42 0 0 1 12 3.519q1.472 0 2.49 1.043a3.44 3.44 0 0 1 1.045 2.515M4.906 19.224a8 8 0 0 0-.237 2.016.74.74 0 0 1-.238.547.7.7 0 0 1-.52.213.74.74 0 0 1-.548-.213.8.8 0 0 1-.213-.547c.004-.823.1-1.642.284-2.443q.31-1.257 1.33-2.277.995-.996 2.75-1.542 1.756-.57 4.484-.57 2.729 0 4.484.57 1.755.545 2.751 1.542 1.02 1.02 1.305 2.277.31 1.258.31 2.443a.8.8 0 0 1-.215.547.73.73 0 0 1-.544.212.8.8 0 0 1-.547-.213.8.8 0 0 1-.214-.547q0-1.091-.237-2.016a3.47 3.47 0 0 0-.925-1.614q-.688-.712-2.136-1.186-1.447-.498-4.033-.498t-4.033.498q-1.447.474-2.136 1.186a3.46 3.46 0 0 0-.925 1.614z"></path></svg></div></button></div></div></div><div class="layout__body"><div class="layout__sidebar-panel"><div class="sidebar "><div class="sidebar__story-types-bar"><div class="story-types"><div class="story-types__tier"><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-normal text text--t5 text--weight-normal text--font-gilroy text--color-base story-types__title">Story types</p><div class="story-types__carousel-wrap"><button aria-hidden="true" tabindex="-1" type="button" class="button button--small button--skin-neutral button--text button--no-border button--center-icon button--default-state button--interactive button--cursor-pointer story-types__arrow story-types__arrow--end" data-testid="story-types-scroll-next"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="button__icon" data-testid="center-icon"><path d="M7.94 4.243a.75.75 0 0 0-.217.555.72.72 0 0 0 .217.531L14.612 12l-6.67 6.67a.76.76 0 0 0-.218.556.72.72 0 0 0 .217.531.77.77 0 0 0 .557.242.69.69 0 0 0 .532-.243l6.863-6.838q.387-.387.387-.919t-.387-.918L9.03 4.24a.7.7 0 0 0-.239-.18.7.7 0 0 0-.293-.063.76.76 0 0 0-.557.243l.001.001z"></path></svg></button><div class="story-types__carousel story-types__carousel--fade-end" role="tablist" aria-label="Story types"><button role="tab" aria-selected="true" class="base-button base-button--default base-button--enabled story-types__card" tabindex="0" aria-disabled="false" data-testid="new-anime-series" type="button"><div class="image-frame image-frame--bg image-frame--active-border image-frame--interactive story-types__card-frame" tabindex="0" data-testid="image-frame" style="--imageframe-width: 100%; --imageframe-height: auto; --imageframe-border-radius: var(--corner-radius-r8);"><div class="image-frame__content"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/162463cf-d839-4152-861c-e0cf6ee7aab1.png" loading="lazy" alt="" class="image" data-testid="new-anime-series-image" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(2); height: 34px; width: auto; object-fit: contain; display: block;"></div></div><span data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base story-types__label-text">Series</span></button><button role="tab" aria-selected="false" class="base-button base-button--default base-button--enabled story-types__card" tabindex="0" aria-disabled="false" data-testid="story-kind-comic" type="button"><div class="image-frame image-frame--bg image-frame--interactive story-types__card-frame" tabindex="0" data-testid="image-frame" style="--imageframe-width: 100%; --imageframe-height: auto; --imageframe-border-radius: var(--corner-radius-r8);"><div class="image-frame__content"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/d35d5044-098a-4bdb-b722-318f705e2a6b.png" loading="lazy" alt="" class="image" data-testid="story-kind-comic-image" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); height: 34px; width: auto; object-fit: contain; display: block;"></div></div><span data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base story-types__label-text">Comic</span></button><button role="tab" aria-selected="false" class="base-button base-button--default base-button--enabled story-types__card" tabindex="0" aria-disabled="false" data-testid="story-kind-tale" type="button"><div class="image-frame image-frame--bg image-frame--interactive story-types__card-frame" tabindex="0" data-testid="image-frame" style="--imageframe-width: 100%; --imageframe-height: auto; --imageframe-border-radius: var(--corner-radius-r8);"><div class="image-frame__content"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/09ce7dbd-9d84-4d7c-ab6a-7abbbe31ad0c.png" loading="lazy" alt="" class="image" data-testid="story-kind-tale-image" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); height: 34px; width: auto; object-fit: contain; display: block;"></div></div><span data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base story-types__label-text">Fairy Tale</span></button><button role="tab" aria-selected="false" class="base-button base-button--default base-button--enabled story-types__card" tabindex="0" aria-disabled="false" data-testid="new-aphorism" type="button"><div class="image-frame image-frame--bg image-frame--interactive story-types__card-frame" tabindex="0" data-testid="image-frame" style="--imageframe-width: 100%; --imageframe-height: auto; --imageframe-border-radius: var(--corner-radius-r8);"><div class="image-frame__content"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/78647d49-319c-41f9-bef9-e2bf150269bb.png" loading="lazy" alt="" class="image" data-testid="new-aphorism-image" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); height: 34px; width: auto; object-fit: contain; display: block;"></div></div><span data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base story-types__label-text">Aphorism</span></button></div></div></div></div></div><div class="sidebar__content"><div class="sidebar__options-panel"><div class="sidebar__upload-heading-block"><h3 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-normal text text--t5 text--weight-normal text--font-gilroy text--color-base sidebar__upload-heading">Your characters</h3><span data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t4 text--weight-medium text--font-gilroy text--color-tint-1">Protagonist required - add up to 3 more. Give each a name and their role in the story.</span></div><div class="sidebar__upload-card-arrow-wrap"><div class="sidebar__upload-cards sidebar__upload-cards--scrollable"><div class="sidebar__upload-card-col"><button type="button" class="sidebar__upload-card sidebar__upload-card--required sidebar__upload-card--hero" data-testid="upload-card-protagonist" aria-label="Hero name"><span aria-hidden="true" class="sidebar__upload-icon-circle"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.14 3.447H6.581q-.994 0-1.715.722a2.3 2.3 0 0 0-.7 1.693v6.975a.722.722 0 1 1-1.444 0V5.862q0-1.603 1.13-2.731a3.72 3.72 0 0 1 2.73-1.129H18.14q1.605 0 2.731 1.129a3.72 3.72 0 0 1 1.13 2.731v11.557q0 1.603-1.13 2.731a3.72 3.72 0 0 1-2.73 1.129h-6.976a.722.722 0 1 1 0-1.444h6.975q.994 0 1.693-.7.723-.723.722-1.715v-1.377l-.023-.022-.022-.023-3.454-3.453a1.13 1.13 0 0 0-.835-.339q-.495 0-.857.338l-.475.475 1.851 1.986a.67.67 0 0 1 .18.52.64.64 0 0 1-.226.496.7.7 0 0 1-.52.202.7.7 0 0 1-.496-.247l-4.808-5.169a1.2 1.2 0 0 0-.903-.385q-.52 0-.88.406l-1.965 2.257a.73.73 0 0 1-.496.249.8.8 0 0 1-.52-.181.7.7 0 0 1-.247-.496.68.68 0 0 1 .181-.521l1.9
780364-2.257a2.54 2.54 0 0 1 1.94-.904q1.196-.021 1.987.858l1.986 2.122.43-.429a2.52 2.52 0 0 1 1.85-.767q1.107 0 1.897.768l2.46 2.461V5.861q0-.994-.722-1.693a2.27 2.27 0 0 0-1.693-.721"></path><path d="M5.892 14.826a.7.7 0 0 0-.28-.047.75.75 0 0 0-.52.202.7.7 0 0 0-.202.52v2.167H2.723a.75.75 0 0 0-.52.203.7.7 0 0 0-.203.518.75.75 0 0 0 .202.52.75.75 0 0 0 .52.203H4.89v2.167a.67.67 0 0 0 .202.496.71.71 0 0 0 .804.171.7.7 0 0 0 .235-.171.67.67 0 0 0 .202-.497v-2.167H8.5a.7.7 0 0 0 .52-.202.75.75 0 0 0 .202-.519.7.7 0 0 0-.202-.52.7.7 0 0 0-.52-.202H6.332v-2.167a.7.7 0 0 0-.202-.52.7.7 0 0 0-.239-.155z"></path></svg></span></button><div class="text-field text-field--small" data-testid="text-field-root"><input class="text-field__control text-field__control--small text-field--default-skin text-field__control--default-padding text-field__control--centered text-field--interactive" tabindex="0" data-testid="name-input-protagonist" placeholder="Hero name" maxlength="120" value=""></div><div class="text-field text-field--small" data-testid="text-field-root"><input class="text-field__control text-field__control--small text-field--default-skin text-field__control--default-padding text-field__control--centered text-field--interactive" tabindex="0" data-testid="role-input-protagonist" placeholder="Role: curious student" maxlength="400" value=""></div></div><div class="sidebar__upload-card-col"><button type="button" class="sidebar__upload-card sidebar__upload-card--hero" data-testid="upload-card-second-character" aria-label="2nd character"><span aria-hidden="true" class="sidebar__upload-icon-circle"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.14 3.447H6.581q-.994 0-1.715.722a2.3 2.3 0 0 0-.7 1.693v6.975a.722.722 0 1 1-1.444 0V5.862q0-1.603 1.13-2.731a3.72 3.72 0 0 1 2.73-1.129H18.14q1.605 0 2.731 1.129a3.72 3.72 0 0 1 1.13 2.731v11.557q0 1.603-1.13 2.731a3.72 3.72 0 0 1-2.73 1.129h-6.976a.722.722 0 1 1 0-1.444h6.975q.994 0 1.693-.7.723-.723.722-1.715v-1.377l-.023-.022-.022-.023-3.454-3.453a1.13 1.13 0 0 0-.835-.339q-.495 0-.857.338l-.475.475 1.851 1.986a.67.67 0 0 1 .18.52.64.64 0 0 1-.226.496.7.7 0 0 1-.52.202.7.7 0 0 1-.496-.247l-4.808-5.169a1.2 1.2 0 0 0-.903-.385q-.52 0-.88.406l-1.965 2.257a.73.73 0 0 1-.496.249.8.8 0 0 1-.52-.181.7.7 0 0 1-.247-.496.68.68 0 0 1 .181-.521l1.964-2.257a2.54 2.54 0 0 1 1.94-.904q1.196-.021 1.987.858l1.986 2.122.43-.429a2.52 2.52 0 0 1 1.85-.767q1.107 0 1.897.768l2.46 2.461V5.861q0-.994-.722-1.693a2.27 2.27 0 0 0-1.693-.721"></path><path d="M5.892 14.826a.7.7 0 0 0-.28-.047.75.75 0 0 0-.52.202.7.7 0 0 0-.202.52v2.167H2.723a.75.75 0 0 0-.52.203.7.7 0 0 0-.203.518.75.75 0 0 0 .202.52.75.75 0 0 0 .52.203H4.89v2.167a.67.67 0 0 0 .202.496.71.71 0 0 0 .804.171.7.7 0 0 0 .235-.171.67.67 0 0 0 .202-.497v-2.167H8.5a.7.7 0 0 0 .52-.202.75.75 0 0 0 .202-.519.7.7 0 0 0-.202-.52.7.7 0 0 0-.52-.202H6.332v-2.167a.7.7 0 0 0-.202-.52.7.7 0 0 0-.239-.155z"></path></svg></span></button><div class="text-field text-field--small" data-testid="text-field-root"><input class="text-field__control text-field__control--small text-field--default-skin text-field__control--default-padding text-field__control--centered text-field--interactive" tabindex="0" data-testid="name-input-second-character" placeholder="2nd character" maxlength="120" value=""></div><div class="text-field text-field--small" data-testid="text-field-root"><input class="text-field__control text-field__control--small text-field--default-skin text-field__control--default-padding text-field__control--centered text-field--interactive" tabindex="0" data-testid="role-input-second-character" placeholder="Role: loyal friend" maxlength="400" value=""></div></div><div class="sidebar__upload-card-col"><button type="button" class="sidebar__upload-card sidebar__upload-card--hero" data-testid="upload-card-third-character" aria-label="3rd character"><span aria-hidden="true" class="sidebar__upload-icon-circle"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.14 3.447H6.581q-.994 0-1.715.722a2.3 2.3 0 0 0-.7 1.693v6.975a.722.722 0 1 1-1.444 0V5.862q0-1.603 1.13-2.731a3.72 3.72 0 0 1 2.73-1.129H18.14q1.605 0 2.731 1.129a3.72 3.72 0 0 1 1.13 2.731v11.557q0 1.603-1.13 2.731a3.72 3.72 0 0 1-2.73 1.129h-6.976a.722.722 0 1 1 0-1.444h6.975q.994 0 1.693-.7.723-.723.722-1.715v-1.377l-.023-.022-.022-.023-3.454-3.453a1.13 1.13 0 0 0-.835-.339q-.495 0-.857.338l-.475.475 1.851 1.986a.67.67 0 0 1 .18.52.64.64 0 0 1-.226.496.7.7 0 0 1-.52.202.7.7 0 0 1-.496-.247l-4.808-5.169a1.2 1.2 0 0 0-.903-.385q-.52 0-.88.406l-1.965 2.257a.73.73 0 0 1-.496.249.8.8 0 0 1-.52-.181.7.7 0 0 1-.247-.496.68.68 0 0 1 .181-.521l1.9
780364-2.257a2.54 2.54 0 0 1 1.94-.904q1.196-.021 1.987.858l1.986 2.122.43-.429a2.52 2.52 0 0 1 1.85-.767q1.107 0 1.897.768l2.46 2.461V5.861q0-.994-.722-1.693a2.27 2.27 0 0 0-1.693-.721"></path><path d="M5.892 14.826a.7.7 0 0 0-.28-.047.75.75 0 0 0-.52.202.7.7 0 0 0-.202.52v2.167H2.723a.75.75 0 0 0-.52.203.7.7 0 0 0-.203.518.75.75 0 0 0 .202.52.75.75 0 0 0 .52.203H4.89v2.167a.67.67 0 0 0 .202.496.71.71 0 0 0 .804.171.7.7 0 0 0 .235-.171.67.67 0 0 0 .202-.497v-2.167H8.5a.7.7 0 0 0 .52-.202.75.75 0 0 0 .202-.519.7.7 0 0 0-.202-.52.7.7 0 0 0-.52-.202H6.332v-2.167a.7.7 0 0 0-.202-.52.7.7 0 0 0-.239-.155z"></path></svg></span></button><div class="text-field text-field--small" data-testid="text-field-root"><input class="text-field__control text-field__control--small text-field--default-skin text-field__control--default-padding text-field__control--centered text-field--interactive" tabindex="0" data-testid="name-input-third-character" placeholder="3rd character" maxlength="120" value=""></div><div class="text-field text-field--small" data-testid="text-field-root"><input class="text-field__control text-field__control--small text-field--default-skin text-field__control--default-padding text-field__control--centered text-field--interactive" tabindex="0" data-testid="role-input-third-character" placeholder="Role: missing boy" maxlength="400" value=""></div></div><div class="sidebar__upload-card-col"><button type="button" class="sidebar__upload-card sidebar__upload-card--hero" data-testid="upload-card-fourth-character" aria-label="4th character"><span aria-hidden="true" class="sidebar__upload-icon-circle"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.14 3.447H6.581q-.994 0-1.715.722a2.3 2.3 0 0 0-.7 1.693v6.975a.722.722 0 1 1-1.444 0V5.862q0-1.603 1.13-2.731a3.72 3.72 0 0 1 2.73-1.129H18.14q1.605 0 2.731 1.129a3.72 3.72 0 0 1 1.13 2.731v11.557q0 1.603-1.13 2.731a3.72 3.72 0 0 1-2.73 1.129h-6.976a.722.722 0 1 1 0-1.444h6.975q.994 0 1.693-.7.723-.723.722-1.715v-1.377l-.023-.022-.022-.023-3.454-3.453a1.13 1.13 0 0 0-.835-.339q-.495 0-.857.338l-.475.475 1.851 1.986a.67.67 0 0 1 .18.52.64.64 0 0 1-.226.496.7.7 0 0 1-.52.202.7.7 0 0 1-.496-.247l-4.808-5.169a1.2 1.2 0 0 0-.903-.385q-.52 0-.88.406l-1.965 2.257a.73.73 0 0 1-.496.249.8.8 0 0 1-.52-.181.7.7 0 0 1-.247-.496.68.68 0 0 1 .181-.521l1.964-2.257a2.54 2.54 0 0 1 1.94-.904q1.196-.021 1.987.858l1.986 2.122.43-.429a2.52 2.52 0 0 1 1.85-.767q1.107 0 1.897.768l2.46 2.461V5.861q0-.994-.722-1.693a2.27 2.27 0 0 0-1.693-.721"></path><path d="M5.892 14.826a.7.7 0 0 0-.28-.047.75.75 0 0 0-.52.202.7.7 0 0 0-.202.52v2.167H2.723a.75.75 0 0 0-.52.203.7.7 0 0 0-.203.518.75.75 0 0 0 .202.52.75.75 0 0 0 .52.203H4.89v2.167a.67.67 0 0 0 .202.496.71.71 0 0 0 .804.171.7.7 0 0 0 .235-.171.67.67 0 0 0 .202-.497v-2.167H8.5a.7.7 0 0 0 .52-.202.75.75 0 0 0 .202-.519.7.7 0 0 0-.202-.52.7.7 0 0 0-.52-.202H6.332v-2.167a.7.7 0 0 0-.202-.52.7.7 0 0 0-.239-.155z"></path></svg></span></button><div class="text-field text-field--small" data-testid="text-field-root"><input class="text-field__control text-field__control--small text-field--default-skin text-field__control--default-padding text-field__control--centered text-field--interactive" tabindex="0" data-testid="name-input-fourth-character" placeholder="4th character" maxlength="120" value=""></div><div class="text-field text-field--small" data-testid="text-field-root"><input class="text-field__control text-field__control--small text-field--default-skin text-field__control--default-padding text-field__control--centered text-field--interactive" tabindex="0" data-testid="role-input-fourth-character" placeholder="Role: mother of hero" maxlength="400" value=""></div></div></div><button type="button" class="sidebar__upload-card-arrow" aria-label="Show more characters" data-testid="anime-characters-scroll-right"><svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.94 4.243a.75.75 0 0 0-.217.555.72.72 0 0 0 .217.531L14.612 12l-6.67 6.67a.76.76 0 0 0-.218.556.72.72 0 0 0 .217.531.77.77 0 0 0 .557.242.69.69 0 0 0 .532-.243l6.863-6.838q.387-.387.387-.919t-.387-.918L9.03 4.24a.7.7 0 0 0-.239-.18.7.7 0 0 0-.293-.063.76.76 0 0 0-.557.243l.001.001z"></path></svg></button></div><div><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base sidebar__option-label">Number of episodes</p><span data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t4 text--weight-medium text--font-gilroy text--color-tint-1 sidebar__option-hint">
7803Each episode is 15 seconds. 4 episodes = 1m.</span><div class="sidebar__chips-row"><div class="sidebar__chips-row-inner"><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">2 episodes</span></div></div></button><button data-testid="chip" type="button" data-is-active="true" class="chip chip--small chip--skin-negative-active sidebar__chip-btn" aria-pressed="true" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">4 episodes</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">6 episodes</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">8 episodes</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">12 episodes</span></div></div></button></div></div></div><div><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base sidebar__option-label">Story Idea</p><div class="sidebar__custom-premise sidebar__tall-text-box"><div class="text-area text-area--small text-area--default-skin text-area--interactive" data-testid="text-area-wrap"><textarea maxlength="1000" rows="1" data-testid="text-area" class="text-area__input" placeholder="A girl discovers she can see memories stored in objectsâ¦"></textarea></div></div></div><div><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base sidebar__option-label">Facts to preserve</p><span data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t4 text--weight-medium text--font-gilroy text--color-tint-1 sidebar__option-hint">Series canon, one per line. Never contradicted.</span><div class="sidebar__custom-premise sidebar__tall-text-box"><div class="text-area text-area--small text-area--default-skin text-area--interactive" data-testid="text-area-wrap"><textarea maxlength="1200" rows="1" data-testid="text-area" class="text-area__input" placeholder="She can read an object only once 7804Every reading leaves her hands burned 7805The city is never shown in daylight"></textarea></div></div></div><div><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base sidebar__option-label">Genre</p><div class="sidebar__chips-row"><div class="sidebar__chips-row-inner"><button data-testid="chip" type="button" data-is-active="true" class="chip chip--small chip--skin-negative-active sidebar__chip-btn" aria-pressed="true" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Action</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Mystery</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Romance</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Fantasy</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Sci-Fi</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Slice of Life</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Comedy</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Horror</span></div></div></button></div></div></div><div><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base sidebar__option-label">Genre Flavor</p><div class="sidebar__chips-row"><div class="sidebar__chips-row-inner"><button data-testid="chip" type="button" data-is-active="true" class="chip chip--small chip--skin-negative-active sidebar__chip-btn" aria-pressed="true" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Action & Adventure</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Cinematic Drama</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Cyberpunk</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Fantasy</span></div></div></button></div></div></div><div><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base sidebar__option-label">Mood</p><div class="sidebar__chips-row"><div class="sidebar__chips-row-inner"><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Dark</span></div></div></button><button data-testid="chip" type="button" data-is-active="true" class="chip chip--small chip--skin-negative-active sidebar__chip-btn" aria-pressed="true" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Epic</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Emotional</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Suspenseful</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Funny</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Calm</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Inspirational</span></div></div></button></div></div></div><div><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base sidebar__option-label">Visual Feel</p><div class="sidebar__chips-row"><div class="sidebar__chips-row-inner"><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Cartoon</span></div></div></button><button data-testid="chip" type="button" data-is-active="true" class="chip chip--small chip--skin-negative-active sidebar__chip-btn" aria-pressed="true" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Anime</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Realistic</span></div></div></button></div></div></div><div><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base sidebar__option-label">Language</p><div class="sidebar__chips-row"><div class="sidebar__chips-row-inner"><button data-testid="chip" type="button" data-is-active="true" class="chip chip--small chip--skin-negative-active sidebar__chip-btn" aria-pressed="true" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">English</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">
7805Deutsch</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Español</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Français</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Italiano</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">हिनà¥à¤¦à¥</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Bahasa Indonesia</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">æ¥æ¬èª</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">íêµì´</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Português</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Ð ÑÑÑкий</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">УкÑаÑнÑÑка</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Tiếng Viá»t</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">䏿</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Ø§ÙØ¹Ø±Ø¨ÙØ©</span></div></div></button><button data-testid="chip" type="button" data-is-active="false" class="chip chip--small chip--skin-default sidebar__chip-btn" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">ÕÕ¡ÕµÕ¥ÖÕ¥Õ¶</span></div></div></button></div></div></div></div></div><div class="sidebar__footer"><button type="button" class="button button--large button--skin-primary button--outline button--full-width button--default-state button--interactive button--cursor-pointer" data-testid="launch-anime-series-btn"><span class="button__content"><span class="button__text"><span class="button-label button-label--center button-label--fill"><span data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">Generate first episode</span></span></span></span></button><button type="button" class="button button--large button--skin-primary button--no-border button--full-width button--default-state button--interactive button--cursor-pointer" data-testid="launch-anime-full-series-btn"><span class="button__content"><span class="button__text"><span class="button-label button-label--center button-label--fill"><span data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base">Generate full series</span></span></span></span></button><div class="sidebar__terms-wrapper"><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base sidebar__terms-text">By continuing, you agree to <a data-testid="ihero-sidebar-terms-link" class="base-link base-link--font-gilroy base-link--weight-normal link link--font-gilroy link--t3 link--weight-normal link--color-primary sidebar__terms-link" href="https://picsart.com/genaitermsofuse/" target="_blank" rel="noopener noreferrer" tabindex="0">Gen AI ToU</a>.</p></div></div></div></div><div class="desktop-content-panel"><div class="desktop-content-panel__tab-header"><div data-testid="ihero-desktop-content-panel-tabs" class="tabs tabs--large tabs--not-fixed desktop-content-panel__library-tabs" style="--tabs-active-tab-x: 0px; --tabs-active-tab-width: 99px;"><div class="tabs__list"><button index="0" data-testid="ihero-desktop-content-panel-tab-explore" role="tab" type="button" class="tab tab--large tab--not-fixed tab--active"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="tab__icon" data-testid="start-icon"><path d="M22 12a9.6 9.6 0 0 0-.796-3.888 9.9 9.9 0 0 0-2.13-3.185 9.9 9.9 0 0 0-3.185-2.13A9.6 9.6 0 0 0 12.001 2a9.6 9.6 0 0 0-3.887.796A9.9 9.9 0 0 0 4.93 4.927 9.9 9.9 0 0 0 2.8 8.111 9.6 9.6 0 0 0 2.001 12a9.6 9.6 0 0 0 .796 3.887 9.9 9.9 0 0 0 2.131 3.185 9.9 9.9 0 0 0 3.184 2.131 9.6 9.6 0 0 0 3.888.796 9.6 9.6 0 0 0 3.887-.796 9.9 9.9 0 0 0 3.185-2.13 9.9 9.9 0 0 0 2.131-3.185A9.6 9.6 0 0 0 22 12m-1.499 0a8.1 8.1 0 0 1-.679 3.301 8.5 8.5 0 0 1-1.826 2.716 8.4 8.4 0 0 1-2.693 1.804 8.1 8.1 0 0 1-3.302.68 8.1 8.1 0 0 1-3.302-.68 8.7 8.7 0 0 1-2.716-1.804 8.7 8.7 0 0 1-1.804-2.716A8.1 8.1 0 0 1 3.5 12q0-1.755.68-3.302a8.4 8.4
78050 0 1 1.803-2.693A8.5 8.5 0 0 1 8.7 4.178a8.1 8.1 0 0 1 3.302-.679q1.756 0 3.302.68a8.3 8.3 0 0 1 2.693 1.825 8.2 8.2 0 0 1 1.826 2.693 8.1 8.1 0 0 1 .68 3.302"></path><path d="M14.248 13.906a.6.6 0 0 1-.14.21.6.6 0 0 1-.212.142L8.72 15.967a.5.5 0 0 1-.562-.116q-.235-.234-.117-.563l1.71-5.176a.6.6 0 0 1 .14-.21.6.6 0 0 1 .212-.141l5.176-1.71a.5.5 0 0 1 .562.117q.235.234.117.563zm-3.114-2.904a.4.4 0 0 0-.094.07.3.3 0 0 0-.047.07l-.796 2.436a.2.2 0 0 0 .024.21.2.2 0 0 0 .101.042.2.2 0 0 0 .108-.017l2.436-.796a.3.3 0 0 0 .07-.047.4.4 0 0 0 .07-.094l.797-2.435q.046-.116-.047-.188-.07-.093-.188-.047z"></path></svg><div class="tab__item">Explore</div></button><button index="1" data-testid="ihero-desktop-content-panel-tab-presets" role="tab" type="button" class="tab tab--large tab--not-fixed tab--interactive"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="tab__icon" data-testid="start-icon"><path d="M16.256 2.004q.305 0 .516.212.234.21.234.54v1.2a.7.7 0 0 1-.234.54.7.7 0 0 1-.516.21.78.78 0 0 1-.54-.21.73.73 0 0 1-.21-.54v-1.2a.73.73 0 0 1 .21-.541.78.78 0 0 1 .54-.211m-2.531 4.484q.21.235.515.235a.7.7 0 0 0 .54-.235.67.67 0 0 0 .234-.516.7.7 0 0 0-.235-.54l-3-3.001a.73.73 0 0 0-.539-.21.7.7 0 0 0-.515.21.73.73 0 0 0-.21.54q0 .305.21.515zm7.814-4.216a.7.7 0 0 1 .247.16h.001a.73.73 0 0 1 .21.54.7.7 0 0 1-.21.515l-3 3.002a.7.7 0 0 1-.54.235.66.66 0 0 1-.515-.235.66.66 0 0 1-.235-.516.7.7 0 0 1 .235-.54l3-3.001a.7.7 0 0 1 .515-.21.7.7 0 0 1 .291.05M2.214 20.714 15.716 7.427v-.001a.78.78 0 0 1 .54-.21.78.78 0 0 1 .54.21c.136.147.21.34.21.54a.78.78 0 0 1-.21.54L3.292 21.794a.8.8 0 0 1-.54.21.8.8 0 0 1-.54-.21.8.8 0 0 1-.21-.54.78.78 0 0 1 .21-.54m16.574-11.27 3 3.001q.21.21.211.54a.7.7 0 0 1-.21.515.73.73 0 0 1-.54.21.7.7 0 0 1-.515-.21l-3-3a.67.67 0 0 1-.235-.517q0-.33.235-.54a.67.67 0 0 1 .515-.234.69.69 0 0 1 .54.235m-5.999-.939a.8.8 0 0 0 .21-.54.7.7 0 0 0-.21-.516.7.7 0 0 0-.54-.234h-.984a.7.7 0 0 0-.54.234.7.7 0 0 0-.21.516c-.002.2.073.394.21.54a.73.73 0 0 0 .54.21h.984a.73.73 0 0 0 .54-.21m8.46.211h-.984a.73.73 0 0 1-.54-.21.79.79 0 0 1-.158-.82.7.7 0 0 1 .158-.237.7.7 0 0 1 .54-.234h.984a.7.7 0 0 1 .54.234.7.7 0 0 1 .21.516.78.78 0 0 1-.21.54.73.73 0 0 1-.54.21m-4.242 4.245v-.985a.7.7 0 0 0-.234-.54.7.7 0 0 0-.516-.21.78.78 0 0 0-.54.21.73.73 0 0 0-.21.54v.984q0 .33.21.54.236.21.54.21t.516-.21a.7.7 0 0 0 .234-.54"></path></svg><div class="tab__item">Inspire me</div></button><button index="2" data-testid="ihero-desktop-content-panel-tab-my-books" role="tab" type="button" class="tab tab--large tab--not-fixed tab--interactive"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="tab__icon" data-testid="start-icon"><path d="M7.36 2h11.154q1.045 0 1.787.762.762.741.762 1.81v10.674q0 .544-.261 1.002c-.157.302-.39.557-.676.741v2.44q0 1.068-.741 1.83a2.46 2.46 0 0 1-1.808.741H5.965a2.93 2.93 0 0 1-2.156-.893 2.96 2.96 0 0 1-.872-2.135V6.423q0-.915.349-1.72A4.45 4.45 0 0 1 5.639 2.35 4.3 4.3 0 0 1 7.359 2m.915 16.274h10.457v-.937H5.966q-.677 0-1.154.48a1.6 1.6 0 0 0-.479 1.155q0 .675.48 1.154.48.48 1.154.48h11.612q.414 0 .74-.26.329-.285.393-.677H8.276a.73.73 0 0 1-.501-.195.73.73 0 0 1-.195-.502q0-.284.195-.48a.7.7 0 0 1 .5-.218m10.697-2.33a.66.66 0 0 0 .48-.196.65.65 0 0 0 .218-.502V4.571q0-.48-.35-.827a1.07 1.07 0 0 0-.805-.349H7.36q-1.264 0-2.156.893a2.96 2.96 0 0 0-.872 2.135v10q.358-.223.762-.349.414-.13.872-.13z"></path><path d="m14.876 8.928-3.661-2.766q-.48-.37-1.023-.109-.524.26-.523.85v5.556q0 .588.523.85a.96.96 0 0 0 1.023-.11l3.66-2.788a.89.89 0 0 0 .37-.742.88.88 0 0 0-.37-.74"></path></svg><div class="tab__item">My Library</div></button></div></div></div><div class="desktop-content-panel__tab-content"><div class="desktop-content-panel__collection-wrapper"><div class="explore-tab"><div class="explore-tab__hero"><h1 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base explore-tab__hero-heading">From <span data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base explore-tab__hero-highlight">Photo</span> to <span data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base explore-tab__hero-highlight">Hero</span></h1><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base explore-tab__hero-description">Add your photo, shape your story, and create a fully illustrated flip book, video, or aphorism.</p></div><div class="explore-tab__format-row"><button aria-pressed="false" class="base-button base-button--default base-button--enabled explore-tab__format-card explore-tab__format-card--inactive" tabindex="0" aria-disabled="false" data-testid="explore-format-video-comic" type="button"><span data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base explore-tab__format-card-title">Video Comic</span><div class="explore-tab__format-card-image-wrap"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/1633af7b-fe07-4cda-add9-2528fef57c79.webp" loading="lazy" alt="" class="image explore-tab__format-card-image" data-testid="image"></div></button><button aria-pressed="false" class="base-button base-button--default base-button--enabled explore-tab__format-card explore-tab__format-card--inactive" tabindex="0" aria-disabled="false" data-testid="explore-format-comic-book" type="button"><span data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base explore-tab__format-card-title">Comic Book</span><div class="explore-tab__format-card-image-wrap"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/6ff41712-0764-423a-96a5-14f4603145da.webp" loading="lazy" alt="" class="image explore-tab__format-card-image" data-testid="image"></div></button><button aria-pressed="false" class="base-button base-button--default base-button--enabled explore-tab__format-card explore-tab__format-card--inactive" tabindex="0" aria-disabled="false" data-testid="explore-format-video-tale" type="button"><span data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base explore-tab__format-card-title">Video Tale</span><div class="explore-tab__format-card-image-wrap"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/67adcea6-6e6a-4bc8-9cc7-e6adf3230be1.webp" loading="lazy" alt="" class="image explore-tab__format-card-image" data-testid="image"></div></button><button aria-pressed="false" class="base-button base-button--default base-button--enabled explore-tab__format-card explore-tab__format-card--inactive" tabindex="0" aria-disabled="false" data-testid="explore-format-tale-book" type="button"><span data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base explore-tab__format-card-title">Tale Book</span><div class="explore-tab__format-card-image-wrap"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/652cf296-b8ed-49b9-a100-dbd6e864e8c9.webp" loading="lazy" alt="" class="image explore-tab__format-card-image" data-testid="image"></div></button><button aria-pressed="false" class="base-button base-button--default base-button--enabled explore-tab__format-card explore-tab__format-card--inactive" tabindex="0" aria-disabled="false" data-testid="explore-format-aphorism" type="button"><span data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-base explore-tab__format-card-title">Aphorism</span><div class="explore-tab__format-card-image-wrap"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/37882b13-ccb7-4433-a0b3-c203c122e830.webp" loading="lazy" alt="" class="image explore-tab__format-card-image" data-testid="image"></div></button></div><div class="explore-tab__values"><h2 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-normal text text--t5 text--weight-normal text--font-gilroy text--color-base explore-tab__values-heading">Create stories in seconds</h2><div class="explore-tab__values-grid"><div class="explore-tab__value-card"><div class="explore-tab__value-card-media"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/492ef68b-1fb6-41be-920f-ce9f2b2ff8aa.webp" loading="lazy" alt="" class="image explore-tab__value-card-image" data-testid="image"></div><div class="explore-tab__value-card-content"><div class="explore-tab__value-card-heading"><div class="explore-tab__value-card-number">1.</div><h3 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-normal text text--t5 text--weight-normal text--font-gilroy text--color-base explore-tab__value-card-title">Choose your format</h3></div><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t4 text--weight-medium text--font-gilroy text--color-tint-1 explore-tab__value-card-body">Watch your story come to life as a 15-second video reel, a 30-second episode, or a digital flip book.</p></div></div><div class="explore-tab__value-card"><div class="explore-tab__value-card-media"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/c214bc8b-f298-4773-9ac4-62fbe8bdfd40.webp" loading="lazy" alt="" class="image explore-tab__value-card-image" data-testid="image"></div><div class="explore-tab__value-card-content"><div class="explore-tab__value-card-heading"><div class="explore-tab__value-card-number">2.</div><h3 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-normal text text--t5 text--weight-normal text--font-gilroy text--color-base explore-tab__value-card-title">Add your characters</h3></div><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t4 text--weight-medium text--font-gilroy text--color-tint-1 explore-tab__value-card-body">Upload photos of yourself, friends, family, or even pets! Name your characters to make them the stars of your story.</p></div></div><div class="explore-tab__value-card"><div class="explore-tab__value-card-media"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/5610752d-773a-4aa4-8120-d734b3eeea62.webp" loading="lazy" alt="" class="image explore-tab__value-card-image" data-testid="image"></div><div class="explore-tab__value-card-content"><div class="explore-tab__value-card-heading"><div class="explore-tab__value-card-number">3.</div><h3 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-normal text text--t5 text--weight-normal text--font-gilroy text--color-base explore-tab__value-card-title">Shape your story</h3></div><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t4 text--weight-medium text--font-gilroy text--color-tint-1 explore-tab__value-card-body">Pick the setting, genre, and art style, then dream up your own plot for one-of-a-kind adventures to share with friends.</p></div></div></div></div><div class="explore-tab__story-formats"><div class="explore-tab__story-formats-heading-block"><h2 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-normal text text--t5 text--weight-normal text--font-gilroy text--color-base explore-tab__story-formats-heading">Tell the story your way</h2><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-tint-1 explore-tab__story-formats-subtitle">Watch it as a quick reel, unfold it as an episode, or flip through it as a digital book â every story finds its perfect format.</p></div><div class="explore-tab__story-formats-grid"><div class="explore-tab__story-format-card"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/23bde834-f574-4f34-805e-a33d0b0631ed.webp" loading="lazy" alt="" class="image explore-tab__story-format-card-image" data-testid="image"><div class="explore-tab__story-format-card-content"><div class="explore-tab__story-format-card-heading"><span class="explore-tab__story-format-card-badge"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2.706 2c.39 0 .706.318.706.709V21.29a.71.71 0 0 1-.706.709A.71.71 0 0 1 2 21.29V2.71c0-.393.317-.71.706-.71m17.882.709c0-.392.317-.709.706-.709.39 0 .706.318.706.709V21.29a.71.71 0 0 1-.706.709.71.71 0 0 1-.706-.709zM5 3.18c.39 0 .706.318.706.709v16.219a.71.71 0 0 1-.706.708.71.71 0 0 1-.706-.708V3.888c0-.391.317-.708.706-.708m13.294.71c0-.391.317-.708.706-.708.39 0 .706.318.706.708v16.22a.71.71 0 0 1-.706.708.71.71 0 0 1-.706-.708zM8.526 4h6.942c1.04 0 1.884.846 1.884 1.89v12.22c0 1.044-.843 1.89-1.884 1.89H8.526a1.887 1.887 0 0 1-1.884-1.89V5.89c0-1.044.844-1.89 1.884-1.89M9 5.42a.944.944 0 0 0-.942.946V17.64c0 .522.422.945.942.945h6c.52 0 .943-.423.943-.945V6.366A.944.944 0 0 0 15 5.42z"></path><path d="M10.438 10.601c0-.481.533-.767.927-.497l1.937 1.328a.604.604 0 0 1 0 .993l-1.937 1.327a.594.594 0 0 1-.927-.496z"></path></svg></span><h3 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-normal text text--t5 text--weight-normal text--font-gilroy text--color-base explore-tab__story-format-card-title">Reels</h3></div><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t4 text--weight-medium text--font-gilroy text--color-tint-1 explore-tab__story-format-card-body">Short-form 15 second adventures, perfect for sharing on your socials. Try different genres, art styles and plots to find your vibe.</p><div class="explore-tab__story-format-card-actions"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="format-card-create-reels"><span class="button__content"><span class="button__text">Create a Reel</span></span></button><button type="button" class="button button--large button--skin-white button--outline button--default-state button--interactive button--cursor-pointer" data-testid="format-card-inspire-reels"><span class="button__content"><span class="button__text">See inspiration</span></span></button></div></div></div><div class="explore-tab__story-format-card"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/efc34170-4fee-4f87-8b2e-6074573cc0f0.webp" loading="lazy" alt="" class="image explore-tab__story-format-card-image" data-testid="image"><div class="explore-tab__story-format-card-content"><div class="explore-tab__story-format-card-heading"><span class="explore-tab__story-format-card-badge"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.009 2Q4.345 2 3.175 3.171T2.004 6.005v11.99q0 1.663 1.17 2.834Q4.346 21.999 6.01 22H18q1.663 0 2.834-1.171 1.17-1.171 1.17-2.834V6.005q0-1.663-1.17-2.834Q19.662 2.001 17.999 2zm11.99 1.499q1.03 0 1.757.726t.749 1.757H3.503a2.48 2.48 0 0 1 .75-1.756A2.4 2.4 0 0 1 6.01 3.5zM3.503 17.995V7.48h17.002v10.515q0 1.03-.75 1.78a2.4 2.4 0 0 1-1.756.726H6.009a2.46 2.46 0 0 1-1.78-.726 2.46 2.46 0 0 1-.725-1.779z"></path><path d="M9.498 16.216v-5.035q0-.586.492-.866.492-.306 1.007 0l4.426 2.529q.492.281.492.866a.92.92 0 0 1-.515.866l-4.426 2.506a.93.93 0 0 1-.984 0q-.492-.305-.492-.866"></path></svg></span><h3 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-normal text text--t5 text--weight-normal text--font-gilroy text--color-base explore-tab__story-format-card-title">Videos</h3></div><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t4 text--weight-medium text--font-gilroy text--color-tint-1 explore-tab__story-format-card-body">Watch your plot come to life in a 30 second video, perfect for sharing with family and friends.</p><div class="explore-tab__story-format-card-actions"><button type="button" class=
7805"button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="format-card-create-episodes"><span class="button__content"><span class="button__text">Create a Video</span></span></button><button type="button" class="button button--large button--skin-white button--outline button--default-state button--interactive button--cursor-pointer" data-testid="format-card-inspire-episodes"><span class="button__content"><span class="button__text">See inspiration</span></span></button></div></div></div><div class="explore-tab__story-format-card"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/6bccd11e-d628-424e-9982-cee030488455.webp" loading="lazy" alt="" class="image explore-tab__story-format-card-image" data-testid="image"><div class="explore-tab__story-format-card-content"><div class="explore-tab__story-format-card-heading"><span class="explore-tab__story-format-card-badge"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2.001 7.22q0-.916.35-1.722a4.44 4.44 0 0 1 2.352-2.353 4.3 4.3 0 0 1 1.721-.349h1.852q1.176 0 2.156.567c.637.347 1.176.85 1.569 1.46a4.3 4.3 0 0 1 1.569-1.46 4.23 4.23 0 0 1 2.156-.567h1.852q.914 0 1.722.35c.524.222.998.549 1.393.958.41.396.735.87.958 1.394Q22 6.303 22 7.219v7.428q0 .915-.349 1.722a4.44 4.44 0 0 1-2.352 2.352 4.3 4.3 0 0 1-1.722.35h-2.179c-.405 0-.8.08-1.176.24a2.8 2.8 0 0 0-.96.631L12 21.204l-1.264-1.264a2.8 2.8 0 0 0-.98-.632 2.8 2.8 0 0 0-1.154-.239H6.423a4.3 4.3 0 0 1-1.721-.349 4.7 4.7 0 0 1-1.416-.937 4.7 4.7 0 0 1-.937-1.415A4.3 4.3 0 0 1 2 14.648zm9.302 0q0-1.264-.892-2.135a2.87 2.87 0 0 0-2.136-.894H6.423q-1.242 0-2.135.893-.892.873-.892 2.135v7.428q0 1.242.892 2.135.893.892 2.135.892h2.179q.74 0 1.437.241.698.24 1.263.675zm1.394 11.371a4.4 4.4 0 0 1 1.264-.675 4.4 4.4 0 0 1 1.437-.24h2.178q1.241 0 2.135-.893.892-.893.892-2.135V7.22q0-1.263-.892-2.134-.893-.894-2.135-.894h-1.852q-1.264 0-2.156.893-.872.873-.872 2.135z"></path></svg></span><h3 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-normal text text--t5 text--weight-normal text--font-gilroy text--color-base explore-tab__story-format-card-title">Books</h3></div><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t4 text--weight-medium text--font-gilroy text--color-tint-1 explore-tab__story-format-card-body">Become the star of personalized digital flip books. Add pages and narration to build on your story and share with friends.</p><div class="explore-tab__story-format-card-actions"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="format-card-create-books"><span class="button__content"><span class="button__text">Create a Book</span></span></button><button type="button" class="button button--large button--skin-white button--outline button--default-state button--interactive button--cursor-pointer" data-testid="format-card-inspire-books"><span class="button__content"><span class="button__text">See inspiration</span></span></button></div></div></div><div class="explore-tab__story-format-card"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/39588b74-12f3-453c-86f0-293e7db7ff37.webp" loading="lazy" alt="" class="image explore-tab__story-format-card-image" data-testid="image"><div class="explore-tab__story-format-card-content"><div class="explore-tab__story-format-card-heading"><span class="explore-tab__story-format-card-badge"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21.99 2.66a.74.74 0 0 1-.143.576.88.88 0 0 1-.506.313q-2.21.36-3.46 1.08-1.249.698-1.896 1.754a6.7 6.7 0 0 0-.673 1.538q-.26.947-.36 1.923.48-.314 1.008-.482a4 4 0 0 1 1.153-.167h1.034q1.585 0 2.714 1.129 1.129 1.106 1.13 2.715v5.117q0 1.586-1.13 2.714Q19.73 22 18.146 22h-1.033q-1.585 0-2.713-1.13-1.13-1.129-1.13-2.714v-5.117q0-2.308.264-4.18.288-1.876 1.13-3.268a6.46 6.46 0 0 1 2.475-2.306q1.56-.864 3.964-1.273a.7.7 0 0 1 .551.143.84.84 0 0 1 .335.505m-11.304.3a.7.7 0 0 0 .012-.303.74.74 0 0 0-.312-.505.74.74 0 0 0-.577-.143q-2.379.41-3.964 1.273a6.3 6.3 0 0 0-2.451 2.306q-.864 1.393-1.129 3.268Q2 10.731 2 13.036v5.117q0 1.586 1.13 2.714 1.129 1.13 2.714 1.13h1.033q1.586 0 2.714-1.13 1.13-1.129 1.13-2.714v-5.117q0-1.609-1.13-2.715-1.129-1.129-2.714-1.129H5.844q-.6 0-1.153.167a3.7 3.7 0 0 0-1.009.482q.1-.976.36-1.923.24-.864.672-1.538.625-1.056 1.875-1.753 1.249-.722 3.483-1.08a.78.78 0 0 0 .481-.314.8.8 0 0 0 .131-.273z"></path></svg></span><h3 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-normal text text--t5 text--weight-normal text--font-gilroy text--color-base explore-tab__story-format-card-title">Aphorisms</h3></div><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t4 text--weight-medium text--font-gilroy text--color-tint-1 explore-tab__story-format-card-body">Choose an art style and add your favorite quote to share 15 seconds of wisdom with friends.</p><div class="explore-tab__story-format-card-actions"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="format-card-create-aphorisms"><span class="button__content"><span class="button__text">Create an Aphorism</span></span></button><button type="button" class="button button--large button--skin-white button--outline button--default-state button--interactive button--cursor-pointer" data-testid="format-card-inspire-aphorisms"><span class="button__content"><span class="button__text">See inspiration</span></span></button></div></div></div></div></div><div class="explore-tab__templates"><div class="explore-tab__templates-heading-block"><h2 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-normal text text--t5 text--weight-normal text--font-gilroy text--color-base explore-tab__templates-heading">Story Templates</h2><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-tint-1 explore-tab__templates-subtitle">Add your photo and become the star of the adventure.</p></div><div class="explore-tab__templates-body"><div class="explore-tab__templates-controls"><div class="explore-tab__templates-filter-cluster"><div class="explore-tab__templates-chip-row"><button type="button" data-is-active="true" class="chip chip--small chip--skin-negative-active" data-testid="explore-template-chip-all" aria-pressed="true" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">All</span></div></div></button><button type="button" data-is-active="false" class="chip chip--small chip--skin-default" data-testid="explore-template-chip-reels" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Reels</span></div></div></button><button type="button" data-is-active="false" class="chip chip--small chip--skin-default" data-testid="explore-template-chip-aphorisms" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Aphorisms</span></div></div></button><button type="button" data-is-active="false" class="chip chip--small chip--skin-default" data-testid="explore-template-chip-videos" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Videos</span></div></div></button><button type="button" data-is-active="false" class="chip chip--small chip--skin-default" data-testid="explore-template-chip-books" aria-pressed="false" aria-busy="false"><div class="chip__interactive-area" data-testid="container-icon"><div class="chip__text-wrap"><span class="chip__text">Books</span></div></div></button></div></div><button type="button" class="button button--large button--skin-negative button--text button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="explore-templates-see-more"><span class="button__content"><span class="button__text">See more</span></span></button></div><div class="explore-tab__template-grid"><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-rain-check"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open Rain Check" data-testid="story-template-rain-check-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/09323133-ae51-49a6-afef-e35a51073300.jpg?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-rain-check-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-singing-mermaid"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Singing Mermaid" data-testid="story-template-the-singing-mermaid-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/2c1cd402-420f-4238-80e0-dedf1ebcb374.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-singing-mermaid-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-dragon-at-the-gate"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Dragon at the Gate" data-testid="story-template-the-dragon-at-the-gate-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/5ddd416f-c85d-4284-804b-89bbf56d1ca8.jpg?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-dragon-at-the-gate-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-aphorism-success-mindset"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open Success Mindset" data-testid="story-template-aphorism-success-mindset-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/646a0cb9-393d-47b5-bf9f-a4b04d9a2013.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-aphorism-success-mindset-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-aphorism-rise-again"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open Rise Again" data-testid="story-template-aphorism-rise-again-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/6be8dcff-af81-4944-b34c-26f237c5ff8e.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-aphorism-rise-again-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-table-for-two"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open Table for Two" data-testid="story-template-table-for-two-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/9897be83-4157-4088-8727-02556f4743c7.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-table-for-two-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-one-step-then-another"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open One Step, Then Another" data-testid="story-template-one-step-then-another-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/b92b830b-7ca1-4f67-abd1-a25c72aad174.jpg?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-one-step-then-another-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-star-who-overslept"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Star Who Overslept" data-testid="story-template-the-star-who-overslept-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/3ac4f627-5d1b-43f6-8501-f4bc460f8187.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-star-who-overslept-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-robot-wh
7805o-wanted-a-pet"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Robot Who Wanted a Pet" data-testid="story-template-the-robot-who-wanted-a-pet-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/86146b86-602c-49e6-86e8-b9c9189922b5.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-robot-who-wanted-a-pet-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-balloon-postman"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Balloon Postman" data-testid="story-template-the-balloon-postman-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/749058bc-861e-4e65-a010-1c530e273c33.jpg?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-balloon-postman-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-lost-puppy"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Lost Puppy" data-testid="story-template-the-lost-puppy-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/9b8bbeb0-e547-4465-b123-4e40e2c6775f.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-lost-puppy-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-clockwork-tide"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Clockwork Tide" data-testid="story-template-the-clockwork-tide-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/fb73a20d-f10e-4cb4-8111-18ec92068c53.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-clockwork-tide-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-midnight-broadcast"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Midnight Broadcast" data-testid="story-template-the-midnight-broadcast-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/91c7905a-ab24-4262-a100-60fd57eebfbb.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-midnight-broadcast-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-lantern-that-lost-its-light"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Lantern That Lost Its Light" data-testid="story-template-the-lantern-that-lost-its-light-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/391f6461-d94e-4e9a-acac-21eafdaf22f5.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-lantern-that-lost-its-light-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-aphorism-wisdom-of-age"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open Wisdom of Age" data-testid="story-template-aphorism-wisdom-of-age-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/7a9cb63c-11fd-45b0-a571-a601ab536bb3.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-aphorism-wisdom-of-age-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-football-champions"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open Football Champions" data-testid="story-template-football-champions-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/7d72911c-c6fa-46c3-88c7-354c99e28527.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-football-champions-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-last-spellslinger"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Last Spellslinger" data-testid="story-template-the-last-spellslinger-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/4f89f2dc-bab5-4b26-9a1c-1614a0542db5.jpg?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-last-spellslinger-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-aphorism-bravery"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open Bravery" data-testid="story-template-aphorism-bravery-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/a0a429ee-19c5-4d36-b6b0-fb7cdcc5100f.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-aphorism-bravery-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-book-that-asked"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Book That Asked" data-testid="story-template-the-book-that-asked-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/e715d5b0-78cf-4e1c-b066-fb2363b75999.jpg?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-book-that-asked-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-thank-you-cactus"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Thank-You Cactus" data-testid="story-template-the-thank-you-cactus-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/d6dc0c51-7a29-46a1-8893-8311eb59ecf8.jpg?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-thank-you-cactus-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-snow-day-mystery"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Snow Day Mystery" data-testid="story-template-the-snow-day-mystery-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/9625125c-3c19-43a7-9383-ed8c617fdc40.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-snow-day-mystery-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-cavern-of-quiet-songs"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Cavern of Quiet Songs" data-testid="story-template-the-cavern-of-quiet-songs-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/3a5c07d7-cace-44f0-b9d9-530f0903c37c.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-cavern-of-quiet-songs-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-ghost-in-my-homework"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Ghost in My Homework" data-testid="story-template-the-ghost-in-my-homework-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/d5713239-a787-46e8-bb33-9e04e7
78057ff9f3.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-ghost-in-my-homework-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-mitten-swap"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Mitten Swap" data-testid="story-template-the-mitten-swap-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/94ecf6a7-921a-4781-92b8-39e5d65e9a96.jpg?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-mitten-swap-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-aphorism-on-failure"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open On Failure" data-testid="story-template-aphorism-on-failure-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/b9a13742-7f75-4d32-bf39-2dcc3d63b6ac.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-aphorism-on-failure-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-dust-runner"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open Dust Runner" data-testid="story-template-dust-runner-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/ead73a64-b7d3-4d28-827c-25d97f94fd1e.jpg?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-dust-runner-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-hollow-crown"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open Hollow Crown" data-testid="story-template-hollow-crown-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/1b989b00-a447-456e-a39c-a338b2c58a50.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-hollow-crown-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-capes-don-t-do-mondays"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open Capes Don't Do Mondays" data-testid="story-template-capes-don-t-do-mondays-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/b0477522-102a-4c9b-a725-a79f6b85b1af.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-capes-don-t-do-mondays-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-my-human-must-never-know"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open My Human Must Never Know" data-testid="story-template-my-human-must-never-know-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/ee771349-4b37-452c-9fee-1f921497b3fa.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-my-human-must-never-know-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-borrowed-bakery"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Borrowed Bakery" data-testid="story-template-the-borrowed-bakery-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/665b0ab1-605a-499c-8e10-0636184e621f.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-borrowed-bakery-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-wishing-tree-at-the-end-of-the-world"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Wishing Tree at the End of the World" data-testid="story-template-the-wishing-tree-at-the-end-of-the-world-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/d06fc494-23b9-4462-bdd6-a3b3ad6667bc.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-wishing-tree-at-the-end-of-the-world-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-starfall-requiem"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open Starfall Requiem" data-testid="story-template-starfall-requiem-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/cb340f17-286b-4994-bd36-501f2a5acdf5.jpg?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-starfall-requiem-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-ice-cream-volcano"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Ice Cream Volcano" data-testid="story-template-the-ice-cream-volcano-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/337c319b-1902-4a60-8479-b135f335ce6d.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-ice-cream-volcano-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-signal"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Signal" data-testid="story-template-the-signal-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/bfa32369-dc57-4f0b-b35b-f5ff0ea0eab0.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-signal-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-note-in-locker-118"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Note in Locker 118" data-testid="story-template-the-note-in-locker-118-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/62baec7b-b298-47f9-8c47-38
78050e0ffbd28a.jpg?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-note-in-locker-118-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-great-cafeteria-heist"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Great Cafeteria Heist" data-testid="story-template-the-great-cafeteria-heist-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/f610e55b-9a27-488a-8bb7-c0cc9e8dda9f.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-great-cafeteria-heist-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-sixty-floors-down"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open Sixty Floors Down" data-testid="story-template-sixty-floors-down-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/5ea6ce5c-67ac-4764-91d7-810be32727a3.jpg?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-sixty-floors-down-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-bravest-bubble"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Bravest Bubble" data-testid="story-template-the-bravest-bubble-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/665cf839-543c-40b3-96b2-88838f326fba.jpg?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-bravest-bubble-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-great-snack-heist"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Great Snack Heist" data-testid="story-template-the-great-snack-heist-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/914f110e-9eaf-4281-aed4-93f34d58831f.jpg?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-great-snack-heist-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-knock-at-3-33"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Knock at 3:33" data-testid="story-template-the-knock-at-3-33-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/713943ae-
7805a0cc-4d7f-a53b-fa3574e785db.jpg?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-knock-at-3-33-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-birthday-wish-on-a-star"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open Birthday Wish on a Star" data-testid="story-template-birthday-wish-on-a-star-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/877abe8f-90eb-4bc4-b580-e1850891e287.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-birthday-wish-on-a-star-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-last-track"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Last Track" data-testid="story-template-the-last-track-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/993c7095-cdab-4113-956d-ca9fe3e5c6a3.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-last-track-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-space-camp-rescue"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open Space Camp Rescue" data-testid="story-template-space-camp-rescue-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/916712e9-3c8f-43ce-8875-be329596d178.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-space-camp-rescue-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-umbrella-that-knew-too-much"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Umbrella That Knew Too Much" data-testid="story-template-the-umbrella-that-knew-too-much-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/0ede7ee7-0fe7-4d7d-a227-ec57430444db.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-umbrella-that-knew-too-much-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-dragon-who-was-scared-of-fire"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Dragon Who Was Scared of Fire" data-testid="story-template-the-dragon-who-was-scared-of-fire-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/9028240a-53ea-4127-a358-c1502ce96a2e.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-dragon-who-was-scared-of-fire-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-door-in-the-old-oak"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Door in the Old Oak" data-testid="story-template-the-door-in-the-old-oak-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/0b705366-e5a6-44a2-8d9d-cad40006cc95.jpg?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-door-in-the-old-oak-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div><div class="explore-tab__template-card explore-tab__template-card--clickable" data-testid="story-template-the-night-watch-puppy"><div class="explore-tab__template-card-hit" role="button" tabindex="0" aria-label="Open The Night Watch Puppy" data-testid="story-template-the-night-watch-puppy-hit"><img src="https://cdn-cms-uploads.picsart.com/cms-uploads/9a39b660-416a-4c4a-9552-9710131e9712.png?to=max&r=400&format=webp" loading="lazy" alt="" class="image explore-tab__template-card-img" data-testid="image"></div><div class="explore-tab__template-card-overlay"><button type="button" class="button button--large button--skin-white button--no-border button--default-state button--interactive button--cursor-pointer" data-testid="story-template-the-night-watch-puppy-try"><span class="button__content"><span class="button__text">Try your own</span></span></button></div></div></div></div></div><div class="explore-tab__faq"><h2 data-testid="text" class="base-text base-text--font-gilroy base-text--weight-normal text text--t5 text--weight-normal text--font-gilroy text--color-base explore-tab__faq-title">Frequently Asked Questions</h2><ul class="list explore-tab__faq-list" data-testid="list" style="gap: 8px;"><li class="list-item explore-tab__faq-item" data-testid="list-item"><button aria-expanded="false" class="base-button base-button--default base-button--enabled explore-tab__faq-question" tabindex="0" aria-disabled="false" data-testid="explore-faq-item-0" type="button"><span data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t6 text--weight-medium text--font-gilroy text--color-base">What is ComicMe?</span><svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="explore-tab__faq-chevron"><path d="M4.242 7.938a.75.75 0 0 1 .556-.217.72.72 0 0 1 .53.217L12 14.61l6.672-6.672a.75.75 0 0 1 .556-.217.72.72 0 0 1 .53.217.75.75 0 0 1 .179.861.8.8 0 0 1-.178.253l-6.84 6.84a1.26 1.26 0 0 1-.917.386q-.532 0-.918-.387l-6.84-6.84A.77.77 0 0 1 4 8.495q0-.314.242-.557"></path></svg></button><div class="explore-tab__faq-answer-wrap"><div class="explore-tab__faq-answer-inner"><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-tint-1 explore-tab__faq-answer">ComicMe is an AI-powered platform and app created by Picsart that transforms ordinary photos into personalized multi-page comic books, fairy tales, and illustrated story videos. It allows users to turn themselves, friends, or children into graphic novel or storybook characters without needing any drawing or writing skills.</p></div></div></li><li class="list-item explore-tab__faq-item" data-testid="list-item"><button aria-expanded="false" class="base-button base-button--default base-button--enabled explore-tab__faq-question" tabindex="0" aria-disabled="false" data-testid="explore-faq-item-1" type="button"><span data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t6 text--weight-medium text--font-gilroy text--color-base">
7805How do I get started with ComicMe?</span><svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="explore-tab__faq-chevron"><path d="M4.242 7.938a.75.75 0 0 1 .556-.217.72.72 0 0 1 .53.217L12 14.61l6.672-6.672a.75.75 0 0 1 .556-.217.72.72 0 0 1 .53.217.75.75 0 0 1 .179.861.8.8 0 0 1-.178.253l-6.84 6.84a1.26 1.26 0 0 1-.917.386q-.532 0-.918-.387l-6.84-6.84A.77.77 0 0 1 4 8.495q0-.314.242-.557"></path></svg></button><div class="explore-tab__faq-answer-wrap"><div class="explore-tab__faq-answer-inner"><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-tint-1 explore-tab__faq-answer">Upload a photo of your hero, optionally add a nemesis, then select a genre, art style, tone, premise, and language. ComicMe uses AI to generate a personalized comic-style story based on your choices.</p></div></div></li><li class="list-item explore-tab__faq-item" data-testid="list-item"><button aria-expanded="false" class="base-button base-button--default base-button--enabled explore-tab__faq-question" tabindex="0" aria-disabled="false" data-testid="explore-faq-item-2" type="button"><span data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t6 text--weight-medium text--font-gilroy text--color-base">Can I use my own photos?</span><svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="explore-tab__faq-chevron"><path d="M4.242 7.938a.75.75 0 0 1 .556-.217.72.72 0 0 1 .53.217L12 14.61l6.672-6.672a.75.75 0 0 1 .556-.217.72.72 0 0 1 .53.217.75.75 0 0 1 .179.861.8.8 0 0 1-.178.253l-6.84 6.84a1.26 1.26 0 0 1-.917.386q-.532 0-.918-.387l-6.84-6.84A.77.77 0 0 1 4 8.495q0-.314.242-.557"></path></svg></button><div class="explore-tab__faq-answer-wrap"><div class="explore-tab__faq-answer-inner"><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-tint-1 explore-tab__faq-answer">Yes. ComicMe is designed to turn your own photo into a comic book-style character and story.</p></div></div></li><li class="list-item explore-tab__faq-item" data-testid="list-item"><button aria-expanded="false" class="base-button base-button--default base-button--enabled explore-tab__faq-question" tabindex="0" aria-disabled="false" data-testid="explore-faq-item-3" type="button"><span data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t6 text--weight-medium text--font-gilroy text--color-base">What formats can I export to?</span><svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="explore-tab__faq-chevron"><path d="M4.242 7.938a.75.75 0 0 1 .556-.217.72.72 0 0 1 .53.217L12 14.61l6.672-6.672a.75.75 0 0 1 .556-.217.72.72 0 0 1 .53.217.75.75 0 0 1 .179.861.8.8 0 0 1-.178.253l-6.84 6.84a1.26 1.26 0 0 1-.917.386q-.532 0-.918-.387l-6.84-6.84A.77.77 0 0 1 4 8.495q0-.314.242-.557"></path></svg></button><div class="explore-tab__faq-answer-wrap"><div class="explore-tab__faq-answer-inner"><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-tint-1 explore-tab__faq-answer">You can read your story as a flip book, download it as a PDF or a set of images for printing, or turn it into a narrated video and a social-ready reel.</p></div></div></li><li class="list-item explore-tab__faq-item" data-testid="list-item"><button aria-expanded="false" class="base-button base-button--default base-button--enabled explore-tab__faq-question" tabindex="0" aria-disabled="false" data-testid="explore-faq-item-4" type="button"><span data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t6 text--weight-medium text--font-gilroy text--color-base">Can I use my Credits with all Picsart apps?</span><svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="explore-tab__faq-chevron"><path d="M4.242 7.938a.75.75 0 0 1 .556-.217.72.72 0 0 1 .53.217L12 14.61l6.672-6.672a.75.75 0 0 1 .556-.217.72.72 0 0 1 .53.217.75.75 0 0 1 .179.861.8.8 0 0 1-.178.253l-6.84 6.84a1.26 1.26 0 0 1-.917.386q-.532 0-.918-.387l-6.84-6.84A.77.77 0 0 1 4 8.495q0-.314.242-.557"></path></svg></button><div class="explore-tab__faq-answer-wrap"><div class="explore-tab__faq-answer-inner"><p data-testid="text" class="base-text base-text--font-gilroy base-text--weight-medium text text--t5 text--weight-medium text--font-gilroy text--color-tint-1 explore-tab__faq-answer">Yes. Credits belong to your Picsart account, so you can spend them in ComicMe and across Picsartâs other AI-powered a
7805pps and tools.</p></div></div></li></ul></div></div></div></div><div class="desktop-content-panel__footer"><span data-testid="text" class="base-text base-text--font-gilroy base-text--weight-normal text text--t3 text--weight-normal text--font-gilroy text--color-base desktop-content-panel__faq-help-text">Need help?</span><a data-testid="ihero-desktop-content-panel-faq-link" class="base-link base-link--font-gilroy base-link--weight-normal link link--font-gilroy link--t3 link--weight-normal link--color-primary link--underline desktop-content-panel__faq-link" href="#" tabindex="0">Frequently Asked Questions</a></div></div></div></div></div></section></div></div></div></div> 7806 7807
7808<script type="module" src="/assets/index-HF9S6n1b.js"></script>
vendor: 1 bytes, line 7808
7808
7809<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a4551e142d111e95',t:'MTc5MTEyNjY2OQ=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
7809<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"0d0271b5debd4078be89b0628bbe2623","r":1,"spa":2}' crossorigin="anonymous"></script>
7809 7810</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.