@charset "UTF-8"; @import "./support/fontawesome5/dist/fontawesome.min.6.5.1.css"; @import "./support/prism/css/prism_twilight.css"; /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ @import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Indie+Flower&family=Inter:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } @font-face { font-family: "Roobert"; src: url(../fonts/Roobert) format("truetype"); } .bebas-thin { font-family: "Bebas Neue", sans-serif; font-weight: 100; font-style: normal; } .bebas-light { font-family: "Bebas Neue", sans-serif; font-weight: 300; font-style: normal; } .bebas-regular { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-style: normal; } .bebas-medium, .demo-content > h2, .demo-content-inner > h2 { font-family: "Bebas Neue", sans-serif; font-weight: 500; font-style: normal; } .bebas-bold { font-family: "Bebas Neue", sans-serif; font-weight: 700; font-style: normal; } .bebas-black { font-family: "Bebas Neue", sans-serif; font-weight: 900; font-style: normal; } .bebas-thin-italic { font-family: "Bebas Neue", sans-serif; font-weight: 100; font-style: italic; } .bebas-light-italic { font-family: "Bebas Neue", sans-serif; font-weight: 300; font-style: italic; } .bebas-regular-italic { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-style: italic; } .bebas-medium-italic { font-family: "Bebas Neue", sans-serif; font-weight: 500; font-style: italic; } .bebas-bold-italic, .demo-browser-header { font-family: "Bebas Neue", sans-serif; font-weight: 700; font-style: italic; } .bebas-black-italic { font-family: "Bebas Neue", sans-serif; font-weight: 900; font-style: italic; } .dm-sans-thin { font-family: "DM Sans", sans-serif; font-weight: 100; font-style: normal; } .dm-sans-light { font-family: "DM Sans", sans-serif; font-weight: 300; font-style: normal; } .dm-sans-regular { font-family: "DM Sans", sans-serif; font-weight: 400; font-style: normal; } .dm-sans-medium { font-family: "DM Sans", sans-serif; font-weight: 500; font-style: normal; } .dm-sans-bold { font-family: "DM Sans", sans-serif; font-weight: 700; font-style: normal; } .dm-sans-black { font-family: "DM Sans", sans-serif; font-weight: 900; font-style: normal; } .dm-sans-thin-italic { font-family: "DM Sans", sans-serif; font-weight: 100; font-style: italic; } .dm-sans-light-italic { font-family: "DM Sans", sans-serif; font-weight: 300; font-style: italic; } .dm-sans-regular-italic { font-family: "DM Sans", sans-serif; font-weight: 400; font-style: italic; } .dm-sans-medium-italic { font-family: "DM Sans", sans-serif; font-weight: 500; font-style: italic; } .dm-sans-bold-italic { font-family: "DM Sans", sans-serif; font-weight: 700; font-style: italic; } .dm-sans-black-italic { font-family: "DM Sans", sans-serif; font-weight: 900; font-style: italic; } .indie-flower-regular, .app-io-signature-signed, .app-io-signature-marker { font-family: "Indie Flower", cursive; font-weight: 400; font-style: normal; } .inter-thin { font-family: "Inter", sans-serif; font-weight: 100; font-style: normal; } .inter-light { font-family: "Inter", sans-serif; font-weight: 300; font-style: normal; } .inter-regular, .is-small.app-chat-cta-twitch .app-chat-cta-inner, .app-chat-message, .app-chat-cta-twitch .app-chat-cta-inner { font-family: "Inter", sans-serif; font-weight: 400; font-style: normal; } .inter-medium, .app-chat-header-title { font-family: "Inter", sans-serif; font-weight: 500; font-style: normal; } .inter-bold { font-family: "Inter", sans-serif; font-weight: 700; font-style: normal; } .inter-black { font-family: "Inter", sans-serif; font-weight: 900; font-style: normal; } .inter-thin-italic { font-family: "Inter", sans-serif; font-weight: 100; font-style: italic; } .inter-light-italic { font-family: "Inter", sans-serif; font-weight: 300; font-style: italic; } .inter-regular-italic { font-family: "Inter", sans-serif; font-weight: 400; font-style: italic; } .inter-medium-italic { font-family: "Inter", sans-serif; font-weight: 500; font-style: italic; } .inter-bold-italic { font-family: "Inter", sans-serif; font-weight: 700; font-style: italic; } .inter-black-italic { font-family: "Inter", sans-serif; font-weight: 900; font-style: italic; } .roboto-thin { font-family: "Roboto", sans-serif; font-weight: 100; font-style: normal; } .roboto-light { font-family: "Roboto", sans-serif; font-weight: 300; font-style: normal; } .roboto-regular, .app-timeline-event div:nth-child(1) h3, .app-targeting-game-meta-viewers, .app-io-signature-div > div:nth-child(2), .app-io .app-table .app-table-list li, body { font-family: "Roboto", sans-serif; font-weight: 400; font-style: normal; } .roboto-medium, .app-timeline-event div:nth-child(1) h2, .app-targeting-game-meta-title, .app-targeting h2, .app-targeting-selected h2, .app-table-group td, .app-table thead tr:first-child th, .app-market-section, .app-io .app-table .app-table-subtotal-last td, .app-io .app-table tr td ul:not(.app-table-list) li:nth-child(1), .app-io .app-table tr td ul:not(.app-table-list) li:nth-child(3), .app-io .app-table tr td ul:not(.app-table-list) li:nth-child(5), .app-game-table-hover-subtitle, .app-game-table-hover-title, .app-data-section, .app-contact-tile div:nth-child(2) h2, .app-checkout .app-form-section, .app-chat-cta-header, .app-button, .app-button-inline, .app-table td .app-button, .app-table td .app-button-inline, .app-box-value span:nth-child(2), .app-box-value span:nth-child(1), .app-box-value span:nth-child(3), .app-box-title, .demo-nav-sections, .demo-explain-box-audio-inner h1, .demo-explain-box h1 { font-family: "Roboto", sans-serif; font-weight: 500; font-style: normal; } .roboto-bold { font-family: "Roboto", sans-serif; font-weight: 700; font-style: normal; } .roboto-black, .app-chat-user-name { font-family: "Roboto", sans-serif; font-weight: 900; font-style: normal; } .roboto-thin-italic { font-family: "Roboto", sans-serif; font-weight: 100; font-style: italic; } .roboto-light-italic { font-family: "Roboto", sans-serif; font-weight: 300; font-style: italic; } .roboto-regular-italic, .demo-logo-aas span { font-family: "Roboto", sans-serif; font-weight: 400; font-style: italic; } .roboto-medium-italic { font-family: "Roboto", sans-serif; font-weight: 500; font-style: italic; } .roboto-bold-italic { font-family: "Roboto", sans-serif; font-weight: 700; font-style: italic; } .roboto-black-italic { font-family: "Roboto", sans-serif; font-weight: 900; font-style: italic; } .roobert-thin { font-family: "Roobert", sans-serif; font-weight: 100; font-style: normal; } .roobert-light { font-family: "Roobert", sans-serif; font-weight: 300; font-style: normal; } .roobert-regular { font-family: "Roobert", sans-serif; font-weight: 400; font-style: normal; } .roobert-medium { font-family: "Roobert", sans-serif; font-weight: 500; font-style: normal; } .roobert-bold, .app-stream-header-nav { font-family: "Roobert", sans-serif; font-weight: 700; font-style: normal; } .roobert-black { font-family: "Roobert", sans-serif; font-weight: 900; font-style: normal; } .roobert-thin-italic { font-family: "Roobert", sans-serif; font-weight: 100; font-style: italic; } .roobert-light-italic { font-family: "Roobert", sans-serif; font-weight: 300; font-style: italic; } .roobert-regular-italic { font-family: "Roobert", sans-serif; font-weight: 400; font-style: italic; } .roobert-medium-italic { font-family: "Roobert", sans-serif; font-weight: 500; font-style: italic; } .roobert-bold-italic { font-family: "Roobert", sans-serif; font-weight: 700; font-style: italic; } .roobert-black-italic { font-family: "Roobert", sans-serif; font-weight: 900; font-style: italic; } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .is-loading i, i.is-loading { animation: spin 1s infinite linear; } .is-hidden, .is-h { display: none; } .is-transparent, .is-t { opacity: 0; } .is-text-mini, .app-game-table-meta-tag { font-size: 7px; line-height: 8.75px; } .is-text-smallest, .breakpoints > div { font-size: 9px; line-height: 11.25px; } .is-text-smaller, .app-targeting-game-meta-viewers, .app-table thead tr:nth-child(2) th, .app-io .app-table .app-table-list li, .app-io .app-table tr td ul:not(.app-table-list) li:nth-child(2), .app-io .app-table tr td ul:not(.app-table-list) li:nth-child(4), .app-io .app-table tr td ul:not(.app-table-list) li:nth-child(6), .app-game-table-hover-subtitle, .app-game-table-meta > div i, .app-game-table-meta > div span:not(.app-game-table-meta-tag), .demo-logo-aas span { font-size: 11px; line-height: 13.75px; } .is-text-small, .app-timeline-event div:nth-child(1) p, .app-timeline-event div:nth-child(1) h3, .app-timeline-x-labels > div, .app-targeting-game-meta-title, .app-targeting h2, .app-targeting-selected h2, .app-table-group td, .app-table, .app-market-loading > div:nth-child(2), .app-market-section, .app-io-signature-div > div:nth-child(2), .app-game-table-hover-title, .app-data-section, .app-box-title, .app-form-section p, label em { font-size: 13px; line-height: 16.25px; } .is-text-normal, .app-game-table-meta-name, .app-contact-tile div:nth-child(2) p, .app-checkout .app-form-section, body { font-size: 15px; line-height: 18.75px; } .is-text-medium, .app-welcome .demo-tagline, .app-welcome .demo-tagline-mobile, .app-timeline-event div:nth-child(1) h2, .app-market-loading > div:nth-child(1), .app-contact-tile div:nth-child(2) h2, .is-small.app-chat-cta-twicth .app-chat-cta-header, .app-chat-cta, .app-chat-cta-twitch, .app-button, .app-button-inline, .app-table td .app-button, .app-table td .app-button-inline, .demo-nav-sections { font-size: 18px; line-height: 22.5px; } .is-text-large, .app-unit-countdown-tagline, .app-chat-cta-header, .demo-explain-box-audio-inner h1, .demo-browser-header, .app-form-section { font-size: 21px; line-height: 26.25px; } .is-text-larger, .app-welcome .demo-logo-aas span { font-size: 24px; line-height: 30px; } .is-text-largest, .app-targeting-game-empty { font-size: 27px; line-height: 33.75px; } .is-text-mega, .app-io-signature-marker, .demo-explain-box h1 { font-size: 32px; line-height: 40px; } .is-text-ultra, .app-io-signature-signed, .app-box-value span:nth-child(1), .app-box-value span:nth-child(3) { font-size: 40px; line-height: 50px; } .is-l, .is-text-left { text-align: left; } .is-c, .is-text-center { text-align: center; } .is-r, .is-text-right { text-align: right; } .mr-0 { margin-right: 0; } .mr-05 { margin-right: 2px; } .mr-1 { margin-right: 4px; } .mr-2 { margin-right: 8px; } .mr-3 { margin-right: 12px; } .mr-4 { margin-right: 16px; } .mr-5 { margin-right: 20px; } .mr-6 { margin-right: 24px; } .mr-7 { margin-right: 28px; } .mr-8 { margin-right: 32px; } .mr-9 { margin-right: 36px; } .mr-10 { margin-right: 40px; } .mr-11 { margin-right: 44px; } .mr-12 { margin-right: 48px; } .mr-13 { margin-right: 52px; } .mr-14 { margin-right: 56px; } .mr-15 { margin-right: 60px; } .mr-16 { margin-right: 64px; } .mr-17 { margin-right: 68px; } .mr-18 { margin-right: 72px; } .mr-19 { margin-right: 76px; } .mr-20 { margin-right: 80px; } .ml-0 { margin-left: 0; } .ml-05 { margin-left: 2px; } .ml-1 { margin-left: 4px; } .ml-2 { margin-left: 8px; } .ml-3 { margin-left: 12px; } .ml-4 { margin-left: 16px; } .ml-5 { margin-left: 20px; } .ml-6 { margin-left: 24px; } .ml-7 { margin-left: 28px; } .ml-8 { margin-left: 32px; } .ml-9 { margin-left: 36px; } .ml-10 { margin-left: 40px; } .ml-11 { margin-left: 44px; } .ml-12 { margin-left: 48px; } .ml-13 { margin-left: 52px; } .ml-14 { margin-left: 56px; } .ml-15 { margin-left: 60px; } .ml-16 { margin-left: 64px; } .ml-17 { margin-left: 68px; } .ml-18 { margin-left: 72px; } .ml-19 { margin-left: 76px; } .ml-20 { margin-left: 80px; } .mt-0 { margin-top: 0; } .mt-05 { margin-top: 2px; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; } .mt-7 { margin-top: 28px; } .mt-8 { margin-top: 32px; } .mt-9 { margin-top: 36px; } .mt-10 { margin-top: 40px; } .mt-11 { margin-top: 44px; } .mt-12 { margin-top: 48px; } .mt-13 { margin-top: 52px; } .mt-14 { margin-top: 56px; } .mt-15 { margin-top: 60px; } .mt-16 { margin-top: 64px; } .mt-17 { margin-top: 68px; } .mt-18 { margin-top: 72px; } .mt-19 { margin-top: 76px; } .mt-20 { margin-top: 80px; } .mb-0 { margin-bottom: 0; } .mb-05 { margin-bottom: 2px; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 20px; } .mb-6 { margin-bottom: 24px; } .mb-7 { margin-bottom: 28px; } .mb-8 { margin-bottom: 32px; } .mb-9 { margin-bottom: 36px; } .mb-10 { margin-bottom: 40px; } .mb-11 { margin-bottom: 44px; } .mb-12 { margin-bottom: 48px; } .mb-13 { margin-bottom: 52px; } .mb-14 { margin-bottom: 56px; } .mb-15 { margin-bottom: 60px; } .mb-16 { margin-bottom: 64px; } .mb-17 { margin-bottom: 68px; } .mb-18 { margin-bottom: 72px; } .mb-19 { margin-bottom: 76px; } .mb-20 { margin-bottom: 80px; } .pt-0 { padding-top: 0; } .pt-05 { padding-top: 2px; } .pt-1 { padding-top: 4px; } .pt-2 { padding-top: 8px; } .pt-3 { padding-top: 12px; } .pt-4 { padding-top: 16px; } .pt-5 { padding-top: 20px; } .pt-6 { padding-top: 24px; } .pt-7 { padding-top: 28px; } .pt-8 { padding-top: 32px; } .pt-9 { padding-top: 36px; } .pt-10 { padding-top: 40px; } .pt-11 { padding-top: 44px; } .pt-12 { padding-top: 48px; } .pt-13 { padding-top: 52px; } .pt-14 { padding-top: 56px; } .pt-15 { padding-top: 60px; } .pt-16 { padding-top: 64px; } .pt-17 { padding-top: 68px; } .pt-18 { padding-top: 72px; } .pt-19 { padding-top: 76px; } .pt-20 { padding-top: 80px; } .pr-0 { padding-right: 0; } .pr-05 { padding-right: 2px; } .pr-1 { padding-right: 4px; } .pr-2 { padding-right: 8px; } .pr-3 { padding-right: 12px; } .pr-4 { padding-right: 16px; } .pr-5 { padding-right: 20px; } .pr-6 { padding-right: 24px; } .pr-7 { padding-right: 28px; } .pr-8 { padding-right: 32px; } .pr-9 { padding-right: 36px; } .pr-10 { padding-right: 40px; } .pr-11 { padding-right: 44px; } .pr-12 { padding-right: 48px; } .pr-13 { padding-right: 52px; } .pr-14 { padding-right: 56px; } .pr-15 { padding-right: 60px; } .pr-16 { padding-right: 64px; } .pr-17 { padding-right: 68px; } .pr-18 { padding-right: 72px; } .pr-19 { padding-right: 76px; } .pr-20 { padding-right: 80px; } .pb-0 { padding-bottom: 0; } .pb-05 { padding-bottom: 2px; } .pb-1 { padding-bottom: 4px; } .pb-2 { padding-bottom: 8px; } .pb-3 { padding-bottom: 12px; } .pb-4 { padding-bottom: 16px; } .pb-5 { padding-bottom: 20px; } .pb-6 { padding-bottom: 24px; } .pb-7 { padding-bottom: 28px; } .pb-8 { padding-bottom: 32px; } .pb-9 { padding-bottom: 36px; } .pb-10 { padding-bottom: 40px; } .pb-11 { padding-bottom: 44px; } .pb-12 { padding-bottom: 48px; } .pb-13 { padding-bottom: 52px; } .pb-14 { padding-bottom: 56px; } .pb-15 { padding-bottom: 60px; } .pb-16 { padding-bottom: 64px; } .pb-17 { padding-bottom: 68px; } .pb-18 { padding-bottom: 72px; } .pb-19 { padding-bottom: 76px; } .pb-20 { padding-bottom: 80px; } .pl-0 { padding-left: 0; } .pl-05 { padding-left: 2px; } .pl-1 { padding-left: 4px; } .pl-2 { padding-left: 8px; } .pl-3 { padding-left: 12px; } .pl-4 { padding-left: 16px; } .pl-5 { padding-left: 20px; } .pl-6 { padding-left: 24px; } .pl-7 { padding-left: 28px; } .pl-8 { padding-left: 32px; } .pl-9 { padding-left: 36px; } .pl-10 { padding-left: 40px; } .pl-11 { padding-left: 44px; } .pl-12 { padding-left: 48px; } .pl-13 { padding-left: 52px; } .pl-14 { padding-left: 56px; } .pl-15 { padding-left: 60px; } .pl-16 { padding-left: 64px; } .pl-17 { padding-left: 68px; } .pl-18 { padding-left: 72px; } .pl-19 { padding-left: 76px; } .pl-20 { padding-left: 80px; } .w-5 { width: 5% !important; } .w-10 { width: 10% !important; } .w-15 { width: 15% !important; } .w-20 { width: 20% !important; } .w-25 { width: 25% !important; } .w-30 { width: 30% !important; } .w-35 { width: 35% !important; } .w-40 { width: 40% !important; } .w-45 { width: 45% !important; } .w-50 { width: 50% !important; } .w-55 { width: 55% !important; } .w-60 { width: 60% !important; } .w-65 { width: 65% !important; } .w-70 { width: 70% !important; } .w-75 { width: 75% !important; } .w-80 { width: 80% !important; } .w-85 { width: 85% !important; } .w-90 { width: 90% !important; } .w-95 { width: 95% !important; } .w-100 { width: 100% !important; } ::placeholder { color: rgb(97, 97, 97); opacity: 1; } :-ms-input-placeholder { color: rgb(97, 97, 97); } ::-ms-input-placeholder { color: rgb(97, 97, 97); } input[type=password], input[type=text], input[type=file] { background-color: rgb(245, 245, 245); border: solid 1px rgb(215, 215, 215); border-radius: 5px; display: block; font-size: 16px; height: 64px; line-height: 64px; opacity: 1; padding: 0 16px; width: 100%; } input:read-only { background-color: grey; } input[type=checkbox] { all: revert; appearance: none; background-color: rgb(245, 245, 245); border: 1px solid rgb(215, 215, 215); border-radius: 5px; color: currentColor; display: grid; font: inherit; height: 1.15em !important; margin: 0; place-content: center; transform: translateY(-0.075em); width: 1.15em !important; -webkit-appearance: none; } input[type=checkbox]::before { box-shadow: inset 1em 1em blue; content: ""; font-size: 40px; height: 0.65em; transform: scale(0); transition: 120ms transform ease-in-out; width: 0.65em; transform-origin: bottom left; clip-path: polygon(28% 38%, 41% 53%, 75% 24%, 86% 38%, 40% 78%, 15% 50%); } input[type=checkbox]:checked::before { box-shadow: inset 1em 1em blue; transform: scale(1); } select { background: transparent; background-color: rgb(245, 245, 245); background-image: url('data:image/svg+xml,'); background-repeat: no-repeat; background-position-x: 97%; background-position-y: 20px; border: solid 1px rgb(215, 215, 215); border-radius: 5px; display: block; font-size: 16px; height: 64px; line-height: 64px; opacity: 1; padding: 0 16px; width: 100%; } textarea { background-color: rgb(245, 245, 245); border: solid 1px rgb(215, 215, 215); border-radius: 5px; display: block; font-size: 16px; line-height: 1.5rem; min-height: 32px; opacity: 1; padding: 16px; width: 100%; } label { color: rgb(23, 23, 23); display: block; font-weight: 500; margin-bottom: 12px; } label em { color: rgb(97, 97, 97); font-weight: 400; display: block; } fieldset { margin-bottom: 0; } .app-form-field-transitions, input[type=password], input[type=text], input[type=file], select, .app-form-field-file-custom { -webkit-transition: opacity 0.1s ease-in-out; -webkit-transition: border 0.1s ease-in-out; -webkit-transition: box-shadow 0.1s ease-in-out; -moz-transition: opacity 0.1s ease-in-out; -moz-transition: border 0.1s ease-in-out; -moz-transition: box-shadow 0.1s ease-in-out; -ms-transition: opacity 0.1s ease-in-out; -ms-transition: border 0.1s ease-in-out; -ms-transition: box-shadow 0.1s ease-in-out; -o-transition: opacity 0.1s ease-in-out; -o-transition: border 0.1s ease-in-out; -o-transition: box-shadow 0.1s ease-in-out; } .app-form-field-focus, input[type=password]:focus, input[type=text]:focus, input[type=file]:focus, .is-focussed, select:focus, textarea:focus, .app-form-field-file-custom:focus { border: 1px solid #fcb900; box-shadow: 0 0 5px #fcb900; } .app-form-section { border-bottom: solid 1px rgb(235, 235, 235); column-gap: 4px; display: flex; flex-direction: column; padding-bottom: 8px; overflow: hidden; margin-bottom: 36px; width: 100%; } .app-form-fields { align-items: flex-start; column-gap: 32px; display: flex; flex-direction: row; justify-content: flex-start; } .app-form-field { margin-bottom: 44px; } .app-form-field-file-custom-outer { cursor: pointer; display: inline-block; margin-bottom: 24px; position: relative; } .app-form-field-file-custom-outer input { all: revert; filter: alpha(opacity=0); min-width: 240px; margin: 0; opacity: 0; } .app-form-field-file-custom { background-color: #fff; border-radius: 5px; border: 1px solid rgb(215, 215, 215); height: 56px; left: 0; line-height: 1.5; padding: 0 16px; position: absolute; right: 0; top: 0; z-index: 5; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .app-form-field-file-custom-outer:after { content: "Choose file..."; color: rgb(97, 97, 97); font-weight: 400; height: 55px; left: 16px; line-height: 55px; position: absolute; width: 100%; z-index: 7; } .app-form-field-file-custom-outer:before { background-color: rgb(245, 245, 245); border-left: 1px solid rgb(215, 215, 215); border-radius: 0 5px 5px 0; color: rgb(97, 97, 97); content: "Browse"; display: block; height: 54px; line-height: 54px; top: 1px; padding: 0 16px; position: absolute; right: 1px; z-index: 6; } .demo-aside, .demo-aside-right, .demo-aside-left { height: 100%; left: 0; position: fixed; top: 0; width: 84px; z-index: 999999; display: flex; } .demo-aside ul, .demo-aside-right ul, .demo-aside-left ul { background-color: green; display: block; flex-grow: 0; flex-shrink: 0; width: 100%; align-items: center; justify-items: center; display: flex; flex-direction: column; row-gap: 0; } .demo-aside ul li, .demo-aside-right ul li, .demo-aside-left ul li { background-color: orange; flex-grow: 0; flex-shrink: 0; height: 56px; margin-top: 16px; width: 72px; align-items: center; flex-direction: row; justify-content: center; display: flex; } .demo-aside ul li:first-child, .demo-aside-right ul li:first-child, .demo-aside-left ul li:first-child { box-shadow: 0px 1px 0px rgb(255, 255, 255); height: 72px; margin-top: 0; } .demo-aside ul li:nth-child(2), .demo-aside-right ul li:nth-child(2), .demo-aside-left ul li:nth-child(2) { margin-top: 23px; padding-top: 40px; height: 96px; } .demo-aside ul li a, .demo-aside-right ul li a, .demo-aside-left ul li a { background-color: rgb(255, 255, 255); border-radius: 50%; color: rgb(200, 200, 200); display: inline-block; flex-grow: 0; flex-shrink: 0; font-size: 20px; height: 56px; text-align: center; line-height: 56px; width: 56px; } .demo-aside ul li.is-active a, .demo-aside-right ul li.is-active a, .demo-aside-left ul li.is-active a { background-color: #fcb900; color: rgb(255, 255, 255); } .demo-aside-right { left: unset; right: 0; } .app-body { height: 100vh; overflow: hidden; } .demo-browser { aspect-ratio: 16/10; background-color: rgba(234, 234, 234, 0.75); border-radius: 10px; margin: 0 auto; max-width: 1080px; padding: 0 16px 20px 16px; position: relative; } .demo-browser-dots { display: flex; column-gap: 4px; flex-direction: row; align-items: center; justify-content: flex-start; padding: 20px 0 16px 1px; } .demo-browser-dots > div { background-color: rgb(215, 215, 215); border-radius: 50%; height: 10px; width: 10px; } .demo-browser-header { align-items: center; background-color: rgb(255, 255, 255); border-bottom: solid 1px rgb(245, 245, 245); color: rgb(49, 49, 49); display: flex; flex-direction: row; height: 56px; justify-content: center; left: 0; padding-top: 6px; position: absolute; top: 0; width: 100%; } .demo-browser-header .demo-logo-loots { height: 16px; } .demo-content { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; margin: 0 auto; min-height: 100vh; max-width: 80%; padding: 144px 0 0px 0; } .demo-content-inner { flex-grow: 1; flex-shrink: 0; position: relative; width: 100%; align-items: center; justify-content: flex-start; display: flex; flex-direction: column; } .demo-content > h2, .demo-content-inner > h2 { font-size: 72px; height: 51px; line-height: 59px; margin-bottom: 108px; } .demo-content-chat { align-items: flex-start; justify-content: center; display: flex; flex-direction: column; row-gap: 24px; } .demo-content-chat > div { flex-grow: 0; flex-shrink: 0; width: 100%; } .demo-content-chat .app-chat-cta, .demo-content-chat .app-chat-cta-twitch { margin: 0 0 0 auto; } .demo-content-chat .app-chat-outer { margin: 0 auto 0 0; } .demo-content-checkout .app-targeting { overflow-y: unset; aspect-ratio: unset; } .demo-content-checkout .app-targeting h2 { padding-left: 52px; } .demo-content-checkout .app-targeting-games { padding-bottom: 0; padding-left: 52px; } .demo-content-checkout .app-targeting-games ul { justify-content: flex-start; zoom: 0.25; } .demo-content-checkout form { margin: 0 auto; width: 80%; zoom: 0.85; } .demo-content-stream { width: 100%; } .demo-content-stream .app-unit { position: absolute; z-index: 1000; } .demo-content-stream.is-scene-0 .app-unit { top: 32px; right: 32px; } .demo-content-stream.is-scene-0 .app-stream-content-bg-1 { display: block; } .demo-content-stream.is-scene-0 .app-stream-content-creater.is-bottom-left-female { opacity: 1; } .demo-content-stream.is-scene-1 .app-unit { top: 32px; left: 32px; } .demo-content-stream.is-scene-1 .app-stream-content-bg-2 { display: block; } .demo-content-stream.is-scene-1 .app-stream-content-creater.is-bottom-right-male { opacity: 1; } .demo-content-stream.is-scene-2 .app-unit { top: 32px; left: 32px; } .demo-content-stream.is-scene-2 .app-stream-content-bg-5 { display: block; } .demo-content-stream.is-scene-2 .app-stream-content-creater.is-bottom-right-female { opacity: 1; } .demo-content-stream.is-scene-3 .app-unit { top: 32px; right: 32px; } .demo-content-stream.is-scene-3 .app-stream-content-bg-3 { display: block; } .demo-content-stream.is-scene-3 .app-stream-content-creater.is-bottom-left-male { opacity: 1; } .demo-content-stream.is-scene-4 .app-unit { top: 32px; left: 32px; } .demo-content-stream.is-scene-4 .app-stream-content-bg-4 { display: block; } .demo-content-stream.is-scene-4 .app-stream-content-creater.is-bottom-right-vtuber { opacity: 1; bottom: 5px; } .demo-content-stream .app-stream { overflow: hidden; } .demo-content-unit-assets { flex-grow: 1; flex-shrink: 1; align-items: center; display: flex; flex-direction: column; justify-content: flex-end; } .demo-content-unit-assets-logo-steam { background-color: rgb(255, 255, 255); border: dashed 4px rgb(23, 23, 23); border-radius: 10px; display: inline-block; flex-shrink: 0; flex-grow: 0; margin-bottom: 148px; padding: 24px 36px 16px 36px; position: relative; width: 200px; } .demo-content-unit-assets div:not(.demo-content-unit-assets-logo-steam) { border-radius: 5px; overflow: hidden; position: absolute; z-index: 1000; } .demo-content-unit-assets div:not(.demo-content-unit-assets-logo-steam) img, .demo-content-unit-assets div:not(.demo-content-unit-assets-logo-steam) video { border-radius: 5px; display: inline-block; width: 100%; } .demo-content-unit-assets-branding-landscape { left: -520px; top: -360px; width: 400px; } .demo-content-unit-assets-branding-portrait { right: -320px; top: -420px; width: 200px; } .demo-content-unit-assets-video-landscape { top: -180px; left: -600px; width: 400px; } .demo-content-unit-assets-video-landscape .demo-content-unit-assets-logo-inline { bottom: 0; left: 16px; position: absolute; width: 100%; z-index: 1001; } .demo-content-unit-assets-video-landscape .demo-content-unit-assets-logo-inline img { display: inline-block; width: 30% !important; } .demo-content-unit-assets-video-portrait { background-repeat: no-repeat; background-size: auto 100%; background-position: 68% center; top: -280px; right: -501.8181818182px; height: 400px; aspect-ratio: 9/16; } .demo-content-unit-assets-video-portrait .demo-content-unit-assets-logo-inline { bottom: 0; left: 16px; position: absolute; width: 100%; z-index: 1001; } .demo-content-unit-assets-video-portrait .demo-content-unit-assets-logo-inline img { display: inline-block; width: 60% !important; } .demo-content-unit-assets-logo { left: calc(50% - 100px) !important; top: -480px; width: 200px; } .demo-content-unit-assets-logo img { filter: invert(1); } .demo-explain { margin: 0 auto; max-width: 1080px; width: 65%; } .demo-explain code { display: inline-block; height: 12px; vertical-align: 6px; } .demo-explain-box { background-color: rgb(255, 255, 255); border: solid 4px rgb(15, 15, 15); border-radius: 10px; padding: 20px 20px 20px 20px; margin: 0 auto 20px auto; } .demo-explain-box h1 { text-align: left; } .demo-explain-box-audio { background-color: rgba(0, 0, 0, 0.75); position: absolute; bottom: 0; height: fit-content; padding: 24px 0; left: 0; width: 100%; z-index: 1000; } .demo-explain-box-audio-inner { background-color: rgb(245, 245, 245); border: solid 4px rgb(15, 15, 15); border-radius: 10px; margin: 0 auto 0 auto; max-width: 960px; padding: 20px 20px 20px 20px; width: 50%; } .demo-explain-box-audio-inner h1 { align-items: flex-end; display: flex; justify-content: flex-start; flex-direction: row; } .leader-line, .leader-line-areaAnchor { z-index: 1000000; } .demo-header { align-items: center; justify-items: flex-end; box-shadow: 0px 1px 0px 0px rgb(235, 235, 235), 0px 2px 0px 0px rgba(255, 255, 255, 0.5); display: flex; flex-direction: row; height: 72px; left: 0; position: fixed; top: 0; width: 100%; z-index: 1000000; } .demo-header > div { flex-grow: 1; flex-shrink: 1; } /* .demo-header > div:last-child { flex-grow: 1; flex-shrink: 0; max-width: 84px; min-width: 84px; text-align: center; width: 84px; } */ .demo-header > div:first-child { flex-grow: 0; flex-shrink: 0; padding-left: 32px; } .demo-header > div:last-child { flex-grow: 1; flex-shrink: 1; padding-right: 32px; } .demo-line-0 { align-items: center; background-color: rgb(15, 15, 15); border-radius: 5px; color: rgb(255, 255, 255); display: flex; flex-direction: row; height: auto; justify-content: flex-start; left: -200px; padding: 12px; position: absolute; top: 48px; width: 240px; z-index: 10; } .demo-line-1 { align-items: center; background-color: rgb(15, 15, 15); border-radius: 5px; color: rgb(255, 255, 255); display: flex; flex-direction: row; height: auto; justify-content: flex-start; left: -200px; padding: 12px; position: absolute; top: 480px; width: 240px; z-index: 10; } .demo-logo { align-items: flex-start; justify-content: flex-start; row-gap: 0; height: fit-content; display: flex; flex-direction: column; } .demo-logo-loots { height: 14px; } .demo-logo-loots img { height: 14px; } .demo-logo-aas { align-items: center; column-gap: 4px; display: flex; flex-direction: row; } .demo-logo-aas img { height: 18px; } .demo-logo-aas img { display: inline; margin-top: 3px; } .demo-nav, .demo-nav-next, .demo-nav-prev { margin-top: 48px; display: flex; flex-direction: row; align-items: center; justify-content: center; } .demo-nav li, .demo-nav-next li, .demo-nav-prev li { height: 72px; text-align: center; width: 72px; } .demo-nav li a, .demo-nav-next li a, .demo-nav-prev li a { background-color: rgb(255, 255, 255); border-radius: 50%; color: rgb(200, 200, 200); display: inline-block; font-size: 24px; font-weight: 600; height: 72px; text-align: center; line-height: 72px; width: 72px; } .demo-nav li.is-active, .demo-nav-next li.is-active, .demo-nav-prev li.is-active { display: inline-block; } .demo-nav li.is-active a, .demo-nav-next li.is-active a, .demo-nav-prev li.is-active a { background-color: #fcb900; color: rgb(255, 255, 255); } .demo-nav-sections { opacity: 1; text-align: center; align-items: center; column-gap: 8px; display: flex; flex-direction: row; justify-content: flex-end; width: 100%; } .demo-nav-sections > div { flex-grow: 0; flex-shrink: 0; width: 32px; } .demo-nav-sections > div a { background-color: rgb(255, 255, 255); border-radius: 50%; color: rgb(215, 215, 215); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } .demo-nav-sections > div a:hover { background-color: #fcb900; color: rgb(255, 255, 255); } .demo-nav-sections > div.is-active a { background-color: #fcb900; color: rgb(255, 255, 255); } .demo-nav-sections > div a i { flex-grow: 0; flex-shrink: 0; font-size: 13px; } .demo-nav-sections-div { background-color: rgb(215, 215, 215); height: 1px; width: 56px; } body { background-color: rgb(245, 245, 245); color: rgb(15, 15, 15); opacity: 0; } .app-box { display: block; padding: 8px; } .app-box-inner { align-items: center; background-color: rgb(245, 245, 245); border-radius: 5px; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; min-height: 120px; padding: 6px 10px; } .app-box-title { height: 28px; line-height: 24px; width: 100%; display: flex; align-items: flex-start; flex-direction: row; justify-content: center; } .app-box-title > span { flex-grow: 1; } .app-box-title > i { flex-grow: 0; font-size: 20px; line-height: 28px; } .app-box-trend { height: 38px; width: 100%; display: flex; align-self: flex-start; } .app-box-trend i { font-size: 20px; } .app-box-value { align-self: flex-end; flex-grow: 1; text-align: right; width: 100%; align-items: flex-end; justify-content: flex-end; display: flex; flex-direction: row; width: 100%; } .app-box-value span:nth-child(1), .app-box-value span:nth-child(3) { font-size: 40px; line-height: 40px; } .app-box-value span:nth-child(2) { padding-bottom: 30px; } .is-desktop .no-desktop { display: none; } .is-widescreen .no-widescreen { display: none; } .is-fullhd .no-fullhd { display: none; } .breakpoints { display: flex; flex-direction: column; align-items: center; justify-content: center; } .breakpoints > div { display: none; height: 0px; overflow: hidden; } .breakpoints.is-visible { height: unset; padding: 8px 0; } .breakpoints.is-visible > div { height: unset; } @media screen and (max-width: 768px) { .breakpoints .mobile { display: block; } .breakpoints.is-visible .mobile { background-color: green; } } @media screen and (min-width: 769px), print { .breakpoints .tablet { display: block; } .breakpoints.is-visible .tablet { background-color: yellowgreen; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .breakpoints .tablet-only { display: block; } .breakpoints.is-visible .tablet-only { background-color: pink; } } @media screen and (max-width: 1023px) { .breakpoints .touch { display: block; } .breakpoints.is-visible .touch { background-color: red; } } @media screen and (min-width: 1024px) { .breakpoints .desktop { display: block; } .breakpoints.is-visible .desktop { background-color: blueviolet; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .breakpoints .desktop-only { display: block; } .breakpoints.is-visible .desktop-only { background-color: burlywood; } } @media screen and (min-width: 1216px) { .breakpoints .widescreen { display: block; } .breakpoints.is-visible .widescreen { background-color: royalblue; } } @media screen and (min-width: 1216px) and (max-width: 1407px) { .breakpoints .widescreen-only { display: block; } .breakpoints.is-visible .widescreen-only { background-color: mediumseagreen; } } @media screen and (min-width: 1408px) { .breakpoints .fullhd { display: block; } .breakpoints.is-visible .fullhd { background-color: cadetblue; } } .app-button, .app-button-inline, .app-table td .app-button, .app-table td .app-button-inline { background-color: rgb(23, 23, 23); border-radius: 10px; color: rgb(255, 255, 255) !important; cursor: pointer; padding: 16px 20px; pointer-events: auto; position: relative; width: 100%; z-index: 1; align-items: center; display: flex; flex-direction: row; justify-content: center; } .app-button span, .app-button-inline span { cursor: pointer; align-items: center; column-gap: 8px; color: rgb(255, 255, 255); display: flex; flex-direction: row; justify-content: flex-start; } .app-button span:not(.is-idle), .app-button-inline span:not(.is-idle) { display: none; } .app-button img, .app-button-inline img { display: inline-block; height: 18px; margin-left: 8px; } .app-button.is-idle, .is-idle.app-button-inline { background-color: #fcb900 !important; color: rgb(255, 255, 255) !important; } .app-button-inline { display: inline-flex; width: max-content; } .app-chart { display: block; padding: 8px; position: relative; } .app-chart-inner { align-items: center; background-color: rgb(245, 245, 245); border-radius: 5px; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; height: 320px; min-height: 160px; padding: 12px 12px; } .app-chart-inner > div { border-radius: 5px; overflow: hidden; } .app-chart-nologo { height: 9px; position: absolute; bottom: 23px; left: 0; padding: 0 24px; width: 100%; z-index: 1; } .app-chart-nologo-inner { background-color: rgb(255, 255, 255); height: 100%; } .app-chat { background-color: rgb(255, 255, 255); justify-self: flex-start; margin: 0 auto; overflow-wrap: anywhere; height: 640px; overflow-y: auto; width: 340px; } .app-chat-outer { background-color: rgb(255, 255, 255); border-radius: 10px; margin: 0 auto; padding: 10px 20px 20px 20px; width: max-content; } .app-chat-messages { padding: 0 10px 0 10px; } .app-chat-messages div { display: inline; } .app-chat-messages a { color: #892be3; } .app-chat-messages .app-chat-user-mentioned { font-weight: 600; } .app-chat-messages ul:nth-child(2) .app-chat-user-name { color: #892be3 !important; } .app-chat-header { align-items: center; background-color: rgb(255, 255, 255); border-bottom: solid 1px rgb(215, 215, 215); justify-content: center; display: flex; flex-direction: row; height: 50px; margin: 0 auto 4px auto; padding-top: 4px; width: 340px; } .app-chat-header > div { flex-grow: 1; text-align: center; text-transform: uppercase; } .app-chat-header > div:first-child, .app-chat-header > div:last-child { flex-grow: 0; flex-shrink: 0; width: 30px; } .app-chat-header > div:first-child { padding: 0 0 0 8px; } .app-chat-header > div:last-child { padding: 0 8px 0 0; } .app-chat-header > div svg { fill: rgb(14, 14, 16); width: 20px; } .app-chat-header-title { font-size: 13px; font-weight: 600; } .app-chat-message, .app-chat-cta-twitch .app-chat-cta-inner { font-size: 12px; color: rgb(14, 14, 16); line-height: 18px; overflow-wrap: anywhere; padding: 7px 0; width: 100%; } .app-chat-user-badges, .app-chat-user-badges > div { display: inline; } .app-chat-user-badges img { vertical-align: -5px; width: 18px; } .app-chat-cta, .app-chat-cta-twitch { background-color: rgb(255, 255, 255); border-radius: 10px; margin: 0 auto; max-width: 1080px; padding: 24px; } .app-chat-cta a, .app-chat-cta-twitch a { color: #fcb900; } .app-chat-cta-header { margin-left: 0; margin-bottom: 12px; } .app-chat-cta-inner .app-chat-user-badges { display: none; } .app-chat-cta-twitch { display: none; } .app-chat-cta-twitch .app-chat-cta-inner { font-size: 18px; line-height: 22.5px; } .app-chat-cta-twitch .app-chat-cta-inner .app-chat-user-badges { display: inline-block; } .app-chat-cta-twitch .app-chat-cta-inner .app-chat-user-badges div img { width: 22.5px; } .app-chat-cta-twitch .app-chat-cta-inner .app-chat-user-mentioned { display: inline-block; font-weight: 600; } .app-chat-cta-twitch .app-chat-user-name, .app-chat-cta-twitch a { color: #892be3; } .is-small.app-chat-cta-twitch { background-color: rgb(255, 255, 255); border-radius: 10px; overflow-wrap: anywhere; padding: 16px !important; width: 380px !important; } .is-small.app-chat-cta-twitch .app-chat-cta-inner { border-left: none; color: rgb(14, 14, 16); font-size: 12px !important; line-height: 18px !important; } .is-small.app-chat-cta-twitch .app-chat-cta-inner br { display: none; } .is-small.app-chat-cta-twitch .app-chat-cta-inner .app-chat-user-badges { display: inline; } .is-small.app-chat-cta-twitch .app-chat-cta-inner .app-chat-user-badges img { width: 18px !important; } .is-small.app-chat-cta-twicth .app-chat-cta-header { margin-bottom: 12px; } .app-checkout-outer { background-color: rgb(255, 255, 255); aspect-ratio: 16/12; border-radius: 10px; margin: 0 auto; padding: 84px 0 40px 0; position: relative; overflow: hidden; } .app-checkout { overflow-y: auto; aspect-ratio: 16/10; } .app-checkout { margin: 0 auto; min-width: 1080px; max-width: 1080px; padding: 4px 40px 52px 40px; width: 100%; } .app-checkout .app-form-section { color: rgb(97, 97, 97); padding-bottom: 8px; text-transform: uppercase; } .app-contact-tile { background-color: rgb(255, 255, 255); border-radius: 10px; height: 240px; margin: 0 auto 0 auto; padding: 24px 24px; width: 320px; align-items: center; justify-content: center; display: flex; flex-direction: column; row-gap: 0; } .app-contact-tile div:nth-child(2) { align-self: center; height: 70%; flex-shrink: 1; flex-grow: 1; text-align: center; } .app-contact-tile div:nth-child(2) h2 { margin-top: 12px; } .app-contact-tile div:nth-child(2) p:nth-child(2) { padding-top: 2px; } .app-contact-tile div:nth-child(2) p:nth-child(3) { line-height: 22px; padding-top: 16px; } .app-contact-tile div:nth-child(2) a { color: #fcb900 !important; } .app-contact-tile div:nth-child(1) { align-self: center; height: 30%; flex-grow: 0; flex-shrink: 0; } .app-contact-tile div:nth-child(1) img { border-radius: 50%; display: inline-block; height: 100%; } .app-data-outer { background-color: rgb(255, 255, 255); aspect-ratio: 16/20; border-radius: 10px; margin: 0 auto; padding: 84px 0 40px 0; position: relative; overflow: hidden; } .app-data { aspect-ratio: 16/20; margin: 0 auto; min-width: 1080px; max-width: 1080px; overflow-y: auto; padding: 4px 40px 52px 40px; width: 100%; } .app-data-section { color: rgb(97, 97, 97); padding: 0 10px 0 10px; text-transform: uppercase; } .app-data-boxes { width: 100%; align-items: flex-start; column-gap: 0; row-gap: 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } .app-data-boxes .app-box { flex-grow: 0; flex-shrink: 0; min-width: 25%; max-width: 25%; overflow: hidden; } .app-data-charts { width: 100%; align-items: flex-start; column-gap: 0; row-gap: 16px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } .app-data-charts .app-chart { flex-grow: 0; flex-shrink: 0; min-width: 50%; max-width: 50%; width: 50%; overflow: hidden; } .app-data-progress { padding: 0 8px 8px 8px; } .app-data-progress-inner { box-shadow: 0 1px 0 0 rgb(245, 245, 245); height: 32px; column-gap: 2px; display: flex; flex-direction: row; align-items: flex-end; justify-content: center; } .app-data-progress-inner > div { background-color: rgb(235, 235, 235); height: 70%; width: 4px; } .app-data-progress-inner > div:nth-child(1) { height: 87%; } .app-data-progress-inner > div:nth-child(2) { height: 56%; } .app-data-progress-inner > div:nth-child(3) { height: 98%; } .app-data-progress-inner > div:nth-child(4) { height: 16%; } .app-data-progress-inner > div:nth-child(5) { height: 41%; } .app-game-table { column-gap: 8px; display: flex; flex-direction: row; position: relative; } .app-game-table-avatar { align-items: center; display: flex; flex-grow: 0; flex-shrink: 0; overflow: hidden; } .app-game-table-avatar a { display: inline-block; flex-grow: 1; } .app-game-table-avatar img { border-radius: 5px; display: inline-block; max-height: 54px; max-width: 120px; vertical-align: middle; height: 100%; } .app-game-table-meta-tag { background-color: rgb(235, 235, 235); border-radius: 5px; display: inline-block; margin-right: 4px; padding: 4px 6px; } .app-game-table-hover { background-color: rgb(255, 255, 255); box-shadow: 1px 1px 5px 5px rgba(234, 234, 234, 0.75); border-radius: 5px; height: auto; left: 128px; padding: 8px 8px; position: absolute; top: -29px; width: 264px; z-index: 10000; } .app-game-table-hover video { border-radius: 5px; height: auto; padding: 0; width: 100%; } .app-game-table-hover-screenshots { align-items: center; justify-items: center; column-gap: 8px; display: flex; flex-direction: row; row-gap: 4px; flex-wrap: wrap; width: 100%; } .app-game-table-hover-screenshots * { height: auto; } .app-game-table-hover-screenshots li { flex-grow: 0; flex-shrink: 1; display: inline-block; padding: 0; width: 120px; } .app-game-table-hover-screenshots li img { border-radius: 5px; height: auto; width: 100%; } .app-game-table-hover-title { margin-bottom: 4px; } .app-game-table-hover-subtitle { margin-bottom: 4px; margin-top: 8px; text-transform: uppercase; } .app-game-table-company > i { margin-right: 4px; } pre, code { border: none !important; display: block; padding: 4px !important; font-size: 11px !important; } .app-integrate-outer { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 100%; } .app-integrate { flex-grow: 1; margin: 0 auto; min-width: 1080px; max-width: 1080px; width: 100%; align-items: center; column-gap: 32px; display: flex; flex-direction: row; justify-content: flex-start; } .app-integrate-spacer { flex-grow: 1; height: 320px; position: relative; } .app-integrate-code-object-order { display: flex; height: 1px; flex-direction: row; justify-content: flex-end; align-items: flex-end; position: absolute; top: 15%; left: 0; width: 100%; z-index: 1001; } .app-integrate-code-object-order-confirm { display: flex; height: 1px; flex-direction: row; justify-content: flex-end; align-items: flex-end; position: absolute; top: 236px; left: 0; width: 100%; z-index: 1001; } .app-integrate-code-script { display: flex; height: 1px; flex-direction: row; justify-content: flex-start; align-items: flex-start; position: absolute; bottom: 8px; left: 0; width: 100%; z-index: 1001; } .app-integrate-code-iframe { display: flex; height: 1px; flex-direction: row; justify-content: flex-start; align-items: flex-start; position: absolute; bottom: 8px; left: 0; width: 100%; z-index: 1001; } .app-integrate-code-object-request { display: flex; height: 1px; flex-direction: row; justify-content: flex-start; align-items: flex-start; position: absolute; bottom: 8px; left: 0; width: 100%; z-index: 1001; } .app-integrate-code-iframe .app-integrate-code-inner, .app-integrate-code-script .app-integrate-code-inner { margin: 0 auto; width: 100%; } .app-integrate-code-object-order .app-integrate-code-inner, .app-integrate-code-object-request .app-integrate-code-inner { margin: 0 auto; width: 50%; } .app-integrate-code-object-order-confirm .app-integrate-code-inner { margin: 0 auto; width: 50%; } .app-integrate-loots { background-color: rgb(255, 255, 255); border-radius: 10px; height: 320px; padding: 8px 16px 8px 16px; width: 200px; align-items: center; display: flex; flex-direction: column; justify-content: center; } .app-integrate-loots div { flex-grow: 1; flex-shrink: 0; height: 120px; width: 100%; } .app-integrate-loots div span { display: inline-block; height: 32px; line-height: 32px; } .app-integrate-loots div:nth-child(1) { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-end; } .app-integrate-loots div:nth-child(2) { flex-grow: 0; height: 32px; text-align: center; } .app-integrate-loots div:nth-child(2) img { height: 32px; } .app-integrate-loots div:nth-child(3) { display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-end; } .app-integrate-amazon { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 320px; row-gap: 24px; width: 320px; } .app-integrate-amazon > div { background-color: white; border-radius: 10px; flex-grow: 1; padding: 8px 16px 16px 16px; align-items: flex-start; display: flex; flex-direction: column; justify-content: center; width: 100%; } .app-integrate-amazon > div span { display: inline-block; height: 20px; line-height: 20px; } .app-integrate-amazon > div :nth-child(1) { flex-grow: 1; } .app-integrate-amazon > div :nth-child(2) { height: 32px; flex-grow: 0; flex-shrink: 0; } .app-integrate-amazon > div :nth-child(2) img { height: 32px; } .app-io-outer { background-color: rgb(255, 255, 255); aspect-ratio: 16/12; border-radius: 10px; margin: 0 auto; padding: 84px 0 40px 0; position: relative; } .app-io { margin: 0 auto; min-width: 1080px; max-width: 1080px; padding: 4px 40px 52px 40px; width: 100%; } .app-io .app-table tr th:first-child:not(table tr td table th), .app-io .app-table tr td:first-child:not(table tr td table td) { padding-left: 12px; } .app-io .app-table tr th:last-child:not(td[colspan]), .app-io .app-table tr td:last-child:not(td[colspan]) { padding-right: 12px; } .app-io .app-table .app-table-subtotal-first td:not(:first-child) { border-top: solid 2px rgb(23, 23, 23); padding-top: 16px; } .app-io .app-table tr.app-table-subtotal td:not(:first-child) { border-top: solid 1px rgb(235, 235, 235); padding-bottom: 8px; padding-top: 8px; } .app-io .app-table .app-table-list li { padding-top: 4px; padding-bottom: 4px; } .app-io-signature { background-color: rgb(255, 255, 255); border: solid 1px rgb(235, 235, 235); border-radius: 10px; padding: 0 12px 8px 12px; height: 72px; } .app-io-signature-inner { height: 100%; position: relative; } .app-io-signature-marker, .app-io-signature-signed { position: absolute; } .app-io-signature-marker { font-weight: 600; bottom: 6px; left: 0; } .app-io-signature-signed { font-style: italic; font-weight: 900; bottom: -2px; left: 32px; } .app-io-signature-div { align-items: center; display: flex; flex-direction: row; justify-content: center; } .app-io-signature-div > div:nth-child(1), .app-io-signature-div > div:nth-child(3) { background-color: rgb(245, 245, 245); flex-grow: 1; flex-shrink: 1; height: 1px; } .app-io-signature-div > div:nth-child(2) { color: rgb(235, 235, 235); flex-grow: 0; flex-shrink: 0; margin: 20px 0; padding: 0 16px; text-align: center; text-transform: uppercase; width: max-content; } .app-market-outer { aspect-ratio: 16/20; background-color: rgb(255, 255, 255); border-radius: 10px; margin: 0 auto; padding: 64px 0 0 0; position: relative; overflow: hidden; overflow-y: auto; } .app-market { aspect-ratio: 16/15; margin: 0 auto; max-width: 1080px; min-width: 1080px; overflow-y: auto; padding: 24px 52px 0 52px; width: 100%; } .app-market-section { color: rgb(97, 97, 97); padding: 0 10px 32px 2px; text-transform: uppercase; } .app-market-loading { height: 360px; text-align: center; align-items: center; display: flex; flex-direction: column; justify-content: center; } .app-market-loading > div:nth-child(2) { margin-bottom: 8px; margin-top: 2px; } .app-market-loading > div:nth-child(3) { display: inline-block; } .app-market-loading i { font-size: unset; color: rgb(15, 15, 15); height: 15px; width: 15px; } .app-market-loading i.is-loading { display: inline-block; } .fa-spin { -webkit-animation: fa-spin 1.25s infinite linear; animation: fa-spin 1.25s infinite linear; } .app-stream-outer { background-color: rgb(255, 255, 255); border-radius: 10px; margin: 0 auto; overflow: hidden; padding: 0 0 0 0; width: 100%; } .app-stream { align-items: stretch; display: flex; flex-direction: column; height: 100%; } .app-stream-header { align-items: center; border-bottom: solid 1px rgb(215, 215, 215); justify-content: flex-start; display: flex; flex-grow: 0; flex-direction: row; height: 60px; width: 100%; } .app-stream-header-logo { align-items: center; display: flex; flex-grow: 0; flex-shrink: 0; justify-content: center; height: 50px; width: 50px; } .app-stream-header-logo svg { display: inline-block; height: 40px; width: 40px; vertical-align: middle; } .app-stream-header-logo .dosCbL { fill: rgb(92, 22, 197); } .app-stream-header-logo .fDFkyX { fill: rgb(255, 255, 255); } .app-stream-header-nav { align-items: center; display: flex; flex-grow: 0; flex-shrink: 0; font-size: 18px; font-weight: 600; justify-content: flex-start; padding-left: 16px; height: 50px; width: 140px; } .app-stream-header-nav ul { align-items: center; display: flex; flex-grow: 0; flex-shrink: 0; flex-direction: row; vertical-align: middle; width: 124px; } .app-stream-header-nav ul li:first-child { padding-right: 36px; } .app-stream-header-nav ul li svg { vertical-align: -4px; } .app-stream-header-search { align-items: center; display: flex; flex-grow: 1; flex-shrink: 0; justify-content: center; height: 36px; } .app-stream-header-search-box { align-items: center; background-color: rgba(173, 173, 184, 0.22); border-radius: 5px; display: flex; flex-direction: row; flex-grow: 0; flex-shrink: 0; height: 100%; } .app-stream-header-search-box svg { margin-left: 4px; margin-right: 4px; height: 24px; width: 24px; } .app-stream-header-search-box input { background-color: rgb(255, 255, 255); box-shadow: rgba(50, 50, 57, 0.62) 0px 0px 0px 1px inset; border-top-left-radius: 5px; border-bottom-left-radius: 5px; height: 100%; padding-left: 8px; width: 356px; } ::placeholder { color: rgb(14, 14, 16); opacity: 0.65; /* Firefox */ } .app-stream-header-account { flex-grow: 0; flex-shrink: 0; padding-right: 10px; text-align: right; width: 50px; } .app-stream-content { align-items: flex-start; justify-content: flex-start; display: flex; flex-grow: 1; flex-direction: row; height: 100%; column-gap: 0; } .app-stream-content-aside { background-color: #efeff1; display: none; height: 100%; flex-grow: 0; flex-shrink: 0; margin-top: -1px; width: 50px; } .app-stream-content-bg, .app-stream-content-bg-0, .app-stream-content-bg-1, .app-stream-content-bg-2, .app-stream-content-bg-3, .app-stream-content-bg-4, .app-stream-content-bg-5 { display: none; } .app-stream-content-chat { flex-grow: 0; flex-shrink: 0; height: 90%; width: 340px; } .app-stream-content-chat .app-chat { height: calc(100% - 50px); } .app-stream-content-video { flex-grow: 1; flex-shrink: 1; margin-top: -1px; position: relative; } .app-stream-content-creater { opacity: 0; position: absolute; z-index: 1001; } .app-stream-content-creater img { display: block; width: 100%; } .app-stream-content-creater.is-bottom-left-female { bottom: 10%; left: 0; width: 20%; } .app-stream-content-creater.is-bottom-right-female { bottom: 4px; right: 0; width: 22%; } .app-stream-content-creater.is-bottom-left-male { bottom: 4px; left: 0; width: 30%; } .app-stream-content-creater.is-bottom-right-male { bottom: 4px; right: 5%; width: 22%; } .app-stream-content-creater.is-bottom-right-vtuber { bottom: 4px; right: 5%; width: 22%; } .app-table { width: 100%; } .app-table a { color: #fcb900; } .app-table thead tr th { background-color: rgb(245, 245, 245); padding-left: 8px; padding-right: 8px; } .app-table thead tr:first-child th { padding-top: 12px; } .app-table thead tr:first-child th:first-child { border-top-left-radius: 10px; } .app-table thead tr:first-child th:last-child { border-top-right-radius: 10px; } .app-table thead tr:nth-child(2) th { padding-bottom: 12px; } .app-table thead tr:nth-child(2) th:first-child { border-bottom-left-radius: 10px; } .app-table thead tr:nth-child(2) th:last-child { border-bottom-right-radius: 10px; } .app-table thead tr:nth-child(3) th { background-color: rgb(255, 255, 255); height: 24px; } .app-table tbody tr td { padding-bottom: 12px; padding-left: 8px; padding-right: 8px; padding-top: 12px; vertical-align: middle; } .app-table tbody tr.even td { background-color: rgb(245, 245, 245); } .app-table tbody tr.even td:first-child { border-bottom-left-radius: 10px; border-top-left-radius: 10px; } .app-table tbody tr.even td:last-child { border-bottom-right-radius: 10px; border-top-right-radius: 10px; } .app-table td a { color: rgb(15, 15, 15) !important; } .app-targeting-outer { background-color: rgb(255, 255, 255); aspect-ratio: 16/12; border-radius: 10px; margin: 0 auto; padding: 84px 0 40px 0; position: relative; overflow: hidden; } .app-targeting { overflow-y: auto; aspect-ratio: 16/10; } .app-targeting, .app-targeting-selected { margin: 0 auto; min-width: 1080px; max-width: 1080px; width: 100%; } .app-targeting-selected { margin-bottom: 40px; } .app-targeting h2, .app-targeting-selected h2 { color: rgb(97, 97, 97); padding: 0 10px 8px 68px; text-transform: uppercase; padding-bottom: 8px; text-transform: uppercase; } .app-targeting-games { padding-bottom: 272px; } .app-targeting-games ul, .app-targeting-games-selected ul { width: 100%; align-items: flex-start; column-gap: 16px; row-gap: 16px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } .app-targeting-game { background-color: rgb(245, 245, 245); border-radius: 8px; padding: 8px; flex-grow: 0; flex-shrink: 0; min-height: 224px; min-width: 144px; max-width: 144px; overflow: hidden; align-items: center; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; } .app-targeting-game-empty { color: rgb(215, 215, 215); padding-top: 64px; } .app-targeting-game-avatar { color: rgb(15, 15, 15); text-align: center; width: 100%; } .app-targeting-game-avatar img { display: block; border-radius: 4px; } .app-targeting-game-meta { padding-top: 8px; text-align: left; width: 100%; } .app-targeting-game-meta-title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 128px; } .app-timeline-outer { flex-grow: 1; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; height: 100%; width: 100%; } .app-timeline { flex-grow: 0; margin: 0 auto; min-width: 1080px; max-width: 1080px; width: 100%; align-items: flex-end; column-gap: 32px; display: flex; flex-direction: column; justify-content: center; } .app-timeline-x { align-items: flex-end; display: flex; flex-direction: row; justify-content: center; width: 100%; } .app-timeline-x > div { background-color: black; flex-grow: 1; flex-shrink: 1; height: 4px; } .app-timeline-x > div.app-timeline-x-month { flex-grow: 0; flex-shrink: 0; height: 20px; width: 4px; } .app-timeline-x-labels { align-items: flex-start; display: flex; flex-direction: row; padding-top: 4px; width: 100%; } .app-timeline-x-labels > div { text-align: center; width: 16.6666666667%; text-transform: uppercase; } .app-timeline-event { background-color: rgb(255, 255, 255); border-radius: 10px; height: 240px; padding: 12px; position: absolute; width: 320px; align-items: center; justify-content: center; display: flex; flex-direction: column; row-gap: 0; } .app-timeline-event div:nth-child(1) { align-self: flex-start; height: 70%; flex-shrink: 1; flex-grow: 1; } .app-timeline-event div:nth-child(1) h2 { margin-bottom: 4px; } .app-timeline-event div:nth-child(1) h3 { color: rgb(23, 23, 23); margin-bottom: 4px; } .app-timeline-event div:nth-child(2) { align-self: flex-end; height: 30%; flex-grow: 0; flex-shrink: 0; } .app-timeline-event div:nth-child(2) img { display: inline-block; height: 100%; } .app-timeline-event-omr { top: 50px; left: 22%; } .app-timeline-event-gamescom { top: 200px; left: unset; right: 155px; } iframe { width: 100%; height: 600px; } .app-unit { position: relative; } .app-unit-frame { height: 100vh; } .app-unit-video video { aspect-ratio: 16/9; } .app-unit-branding { left: 0; position: absolute; top: 0; z-index: 1000; } .app-unit-branding img { aspect-ratio: 3/4; } .app-unit-branding img, .app-unit-media img, .app-unit-media video { display: block; object-fit: unset; } .app-unit-controls { align-items: flex-start; color: rgb(255, 255, 255); display: flex; flex-direction: row; height: auto; left: 0; padding: 16px; position: absolute; top: 0; width: 100%; z-index: 1000; } .app-unit-controls > div { flex-shrink: 1; flex-grow: 1; padding-left: 16px; } .app-unit-controls > div:first-child { flex-grow: 0; padding-left: 0; width: max-content; } .app-unit-controls > div:last-child { flex-grow: 0; text-align: right; } .app-unit-controls-duration > div div { display: inline; } .app-unit-stack { align-items: flex-start; color: rgb(255, 255, 255); display: flex; flex-direction: row; height: auto; left: 0; padding: 16px; position: absolute; top: 0; width: 100%; z-index: 1000; } .app-unit-countdown { align-items: center; background-color: rgb(15, 15, 15); display: flex; flex-direction: row; height: auto; left: 0; padding: 16px; position: absolute; top: 0; width: 100%; z-index: 1000; } .app-unit-countdown > div { width: 50%; } .app-unit-countdown > div:last-child { text-align: right; } .app-unit-countdown-meta { color: rgb(255, 255, 255); width: 50%; } .app-unit-countdown-logo img { max-height: 48px; } .app-unit-countdown-time > div { align-items: center; display: flex; flex-direction: row; justify-content: flex-end; height: 100%; } .app-unit-countdown-time > div > div { color: rgb(255, 255, 255); text-align: center; width: fit-content; } .app-unit-countdown-time > div > div:nth-child(2), .app-unit-countdown-time > div > div:nth-child(4), .app-unit-countdown-time > div > div:nth-child(6) { align-self: flex-start; line-height: 26px; font-size: 26px; padding-top: 15px; width: 12px; } .app-unit-countdown-time > div > div > div:first-child { line-height: 48px; font-size: 48px; } .app-unit-countdown-time > div > div > div:last-child { line-height: 13px; font-size: 13px; text-transform: uppercase; } .demo-content-stream .app-unit-countdown-tagline { font-size: 12px; line-height: 18px; } .demo-content-stream .app-unit-countdown-tagline.mb-2 { margin-bottom: 6px; } .demo-content-stream .app-unit-countdown-logo img { max-height: 20px; } .demo-content-stream .app-unit-countdown-time > div > div > div:first-child { font-size: 24px; line-height: 32px; } .demo-content-stream .app-unit-countdown-time > div > div:nth-child(2), .demo-content-stream .app-unit-countdown-time > div > div:nth-child(4), .demo-content-stream .app-unit-countdown-time > div > div:nth-child(6) { font-size: 16px; line-height: 16px; padding-top: 7px; } .demo-content-stream .app-unit-countdown-time > div > div > div:last-child { font-size: 10px; line-height: 10px; } .demo-content-stream .app-unit-countdown { padding: 8px; } .app-welcome .demo-logo { align-items: center; margin-top: 128px; justify-content: center; } .app-welcome .demo-logo-loots, .app-welcome .demo-logo-loots img { height: 40px; } .app-welcome .demo-logo-aas, .app-welcome .demo-logo-aas img { height: 72px; } .app-welcome .demo-logo-aas { flex-direction: column; margin-bottom: 48px; } .app-welcome .demo-logo-aas span { display: block; padding-top: 16px; } .app-welcome .demo-tagline, .app-welcome .demo-tagline-mobile { line-height: 24px; padding: 28px 0 0 0; text-align: center; } body.is-desktop:not(.is-phone) .app-welcome .demo-nav-next .demo-start, body.is-tablet:not(.is-phone) .app-welcome .demo-nav-next .demo-start { display: inline-block !important; } body.is-desktop:not(.is-phone) .app-welcome .demo-nav-next .demo-pdf, body.is-tablet:not(.is-phone) .app-welcome .demo-nav-next .demo-pdf { display: none !important; } body.is-desktop:not(.is-phone) .app-welcome .demo-tagline, body.is-tablet:not(.is-phone) .app-welcome .demo-tagline { display: block !important; } body.is-desktop:not(.is-phone) .app-welcome .demo-tagline-mobile, body.is-tablet:not(.is-phone) .app-welcome .demo-tagline-mobile { display: none !important; } body.is-phone .app-welcome .demo-nav-next .demo-start, body.is-mobile .app-welcome .demo-nav-next .demo-start { display: none !important; } body.is-phone .app-welcome .demo-nav-next .demo-pdf, body.is-mobile .app-welcome .demo-nav-next .demo-pdf { display: inline-block !important; } body.is-phone .app-welcome .demo-tagline, body.is-mobile .app-welcome .demo-tagline { display: none !important; } body.is-phone .app-welcome .demo-tagline-mobile, body.is-mobile .app-welcome .demo-tagline-mobile { display: block !important; } body.is-phone.is-tablet .demo-content { padding-top: 0; } body.is-phone.is-tablet .app-welcome .demo-logo { margin-top: 44px; } input:read-only { background-color: #fcb900; color: rgb(255, 255, 255); } /*# sourceMappingURL=aws.css.map */