@charset "UTF-8"; /** * Based on * * - reset.css 2.0 by Eric Meyer (public domain) * http://meyerweb.com/eric/tools/css/reset/ * * - normalize.css 8.0.1 by Nicolas Gallagher and Jonathan Neal * (licensed under MIT) * https://github.com/necolas/normalize.css * * - Based on Reboot from Bootstrap 4.2.1 * (licensed under MIT) * https://github.com/twbs/bootstrap */ /** * IE10+ doesn't honor `` in some cases */ /** * general reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, main { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; font-weight: normal; } /** * HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main, summary { display: block; } /** * inherit box model for all elements */ *, *::before, *::after { box-sizing: inherit; } /** * html root rules * 1. set border-box for inheritance * 2. avoid 300ms click delay on touch devices that support the `touch-action` * CSS property * 3. Prevent adjustments of font size after orientation changes in IE, on * Windows Phone and iOS. * 4. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, * so we force a non-overlapping, non-auto-hiding scrollbar to counteract. * 5. Change the default tap highlight to be completely transparent in iOS. */ html { /* 1 */ /* 2 */ touch-action: manipulation; /* 3 */ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; /* 4 */ -ms-overflow-style: scrollbar; /* 5 */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-overflow-scrolling: touch; } /** * body rules * 1. reset line-height to 1 * 2. set base font-family to sans-serif * 3. Set an explicit initial text-align value so that we can later use the * `inherit` value on things like `` elements. */ body { /* 1 */ line-height: 1; /* 2 */ font-family: sans-serif; /* 3 */ } body.ReactModal__Body--open { overflow: hidden; } .ReactModal__Overlay--after-open { z-index: 99999999 !important; } /** * Lists */ ol, ul { list-style: none; } /** * Quotes */ blockquote, q { quotes: none; } blockquote::before, blockquote::after, q::before, q::after { content: ""; content: none; } /** * Tables */ table { border-collapse: collapse; border-spacing: 0; } caption { caption-side: bottom; } /** * Table Headers * 1. Matches default `` alignment by inheriting from the ``, or the * closest parent with a set `text-align`. */ th { /* 1 */ text-align: inherit; } /** * Horizontal Lines * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { /* 1 */ box-sizing: content-box; height: 0; /* 2 */ overflow: visible; } /** * Preformatted Text * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Don't allow content to break outside * 3. We have @viewport set which causes scrollbars to overlap content in IE11 * and Edge, so we force a non-overlapping, non-auto-hiding scrollbar to * counteract. */ pre, code, kbd, samp { /* 1 */ font-family: monospace, monospace; } pre { /* 2 */ overflow: auto; /* 3 */ -ms-overflow-style: scrollbar; } /** * Links * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { /* 1 */ background-color: transparent; /* 2 */ -webkit-text-decoration-skip: objects; } /** * 1. Remove the bottom border in Chrome 57- and Firefox 39- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. * 3. Add explicit cursor to indicate changed behavior. * 4. Prevent the text-decoration to be skipped. */ abbr[title] { /* 1 */ border-bottom: none; /* 2 */ text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 3 */ cursor: help; /* 4 */ -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { position: relative; font-size: 75%; line-height: 0; } sub { bottom: -0.25em; } sup { top: -0.5em; } /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /** * Hide SVG overflow in IE */ svg:not(:root) { overflow: hidden; } /** * Remove the default `border-radius` that macOS Chrome adds. * Details at https://github.com/twbs/bootstrap/issues/24093 */ button { border-radius: 0; } /** * Work around a Firefox/IE bug where the transparent `button` background * results in a loss of the default `button` focus styles. * Credit: https://github.com/suitcss/base/ */ button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; } /** * form element resets * 1. Remove the margin in Firefox and Safari * 2. inherit font rules */ input, button, select, optgroup, textarea { /* 1 */ margin: 0; /* 2 */ font-family: inherit; font-size: inherit; line-height: inherit; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, [type=reset], [type=submit], [type=button] { /* 2 */ -webkit-appearance: button; } /** * Remove the default appearance of temporal inputs to avoid a Mobile Safari * bug where setting a custom line-height prevents text from being vertically * centered within the input. * See https://bugs.webkit.org/show_bug.cgi?id=139848 * and https://github.com/twbs/bootstrap/issues/11266 */ input[type=date], input[type=time], input[type=datetime-local], input[type=month] { -webkit-appearance: listbox; } /** * 1. Remove the default vertical scrollbar in IE. * 2. Textareas should really only resize vertically so they don't break their * (horizontal) containers. */ textarea { overflow: auto; resize: vertical; } /** * Show the overflow in IE. */ button, input { overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. */ button, select { text-transform: none; } /** * Remove the inheritance of word-wrap in Safari. * See https://github.com/twbs/bootstrap/issues/24990 */ select { word-wrap: normal; } /** * Remove inner border and padding from Firefox, but don't restore the outline * like Normalize. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * 1. Add the correct box sizing in IE 10- * 2. Remove the padding in IE 10- */ input[type=radio], input[type=checkbox] { /* 1 */ box-sizing: border-box; /* 2 */ padding: 0; } /** * Suppress the focus outline on elements that cannot be accessed via keyboard. * This prevents an unwanted focus outline from appearing around elements that * might still respond to pointer events. * Credit: https://github.com/suitcss/base */ [tabindex="-1"]:focus { outline: 0 !important; } /** * Browsers set a default `min-width: min-content` on fieldsets, * unlike e.g. `
`s, which have `min-width: 0` by default. * So we reset that to ensure fieldsets behave more like a standard block element. * See https://github.com/twbs/bootstrap/issues/12359 * and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements */ fieldset { min-width: 0; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Set display to block for all browsers */ legend { /* 1 */ max-width: 100%; white-space: normal; /* 2 */ color: inherit; /* 3 */ display: block; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type=checkbox], [type=radio] { /* 1 */ box-sizing: border-box; /* 2 */ padding: 0; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { /* 1 */ -webkit-appearance: textfield; /* 2 */ outline-offset: -2px; } /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { /* 1 */ -webkit-appearance: button; /* 2 */ font: inherit; } /** * Correct element display for output */ output { display: inline-block; } /** * Add the correct display in IE 10+. */ template { display: none; } [hidden] { display: none; } .select-css-wrapper { position: relative; } .select-css-wrapper svg { position: absolute; right: 10px; top: calc(50% - 3px); } /* class applies to select element itself, not a wrapper element */ .select-css { display: block; width: 100%; max-width: 100%; /* useful when width is set to anything other than 100% */ box-sizing: border-box; margin: 0; -moz-appearance: none; -webkit-appearance: none; appearance: none; } /* Hide arrow icon in IE browsers */ .select-css::-ms-expand { display: none; } /* Focus style */ .select-css:focus { border-color: #aaa; /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */ box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7); box-shadow: 0 0 0 3px -moz-mac-focusring; color: #222; outline: none; } /* Set options to normal weight */ .select-css option { font-weight: normal; } @font-face { font-family: "VT323"; src: local("☺"), url("../fonts/VT323-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "Speedee Condensed Regular"; src: local("☺"), url("../fonts/SpeedeeCd_W_Rg.woff2") format("woff2"), url("../fonts/SpeedeeCd_W_Rg.woff") format("woff"), url("../fonts/SpeedeeCd_Rg.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "Speedee Condensed Bold"; src: local("☺"), url("../fonts/SpeedeeCd_W_Bd.woff2") format("woff2"), url("../fonts/SpeedeeCd_W_Bd.woff") format("woff"), url("../fonts/SpeedeeCd_Bd.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "Speedee Condensed Light"; src: local("☺"), url("../fonts/SpeedeeCd_W_Lt.woff2") format("woff2"), url("../fonts/SpeedeeCd_W_Lt.woff") format("woff"), url("../fonts/SpeedeeCd_Lt.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "SpeedeeArabic-Regular"; src: local("☺"), url("../fonts/SpeedeeArabic-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "SpeedeeArabic-Bold"; src: local("☺"), url("../fonts/SpeedeeArabic-Bold.ttf") format("truetype"); font-weight: normal; font-style: normal; } html[dir=rtl] { direction: rtl; font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } body { margin: 0; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 22px; letter-spacing: 0; line-height: 28px; background-color: #ffbc0d; } [dir=rtl] body { direction: rtl; font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } body, html { overflow: hidden; } #app, .section, body, html { height: 100vh; margin: 0px; width: 100%; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); overflow: hidden; } .flow-section { display: none; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; align-items: flex-start; justify-content: flex-start; height: 100%; } .flow-section.current { display: flex; background-position-y: top; } .flow-section2 { display: none; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; align-items: center; justify-content: flex-start; flex-direction: column; height: 100%; padding-top: 20px; align-items: center; gap: 5px; } @media only screen and (max-width: 375px) and (max-height: 812px) and (-webkit-device-pixel-ratio: 3) { .flow-section2 { padding-top: 8px; } } @media only screen and (max-width: 375px) and (max-height: 812px) { .flow-section2 { padding-top: 8px; } } .flow-section2.current { display: flex; background-position-y: top; } a.p-contents { text-decoration: none; } .p-contents { padding-top: 0; } .p-contents p:first-child { padding-top: 0; } .p-contents p { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; padding: 8px 0; } [dir=rtl] .p-contents p { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .p-contents p strong { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .p-contents p strong { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .cms-preview-ar .p-contents p strong { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .p-contents strong { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .p-contents strong { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .cms-preview-ar .p-contents strong { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .p-contents.small p { font-size: 18px; line-height: 24px; } [dir=rtl] .p-contents.small p { line-height: 20px; } .p-contents.small-secondary p { font-size: 18px; line-height: 20px; } .p-contents.medium p { font-size: 18px; line-height: 20px; } @media only screen and (min-device-height: 630px) and (max-device-height: 750px) and (-webkit-min-device-pixel-ratio: 2) { .p-contents.medium p { font-size: 18px; line-height: 20px; } } @media only screen and (min-device-height: 751px) and (max-device-height: 899px) and (-webkit-min-device-pixel-ratio: 2) { .p-contents.medium p { font-size: 20px; line-height: 22px; } } .p-contents.color-white p { color: #fff; } .p-contents .l-block p { display: block; } .p-contents.l-width { width: 90%; margin: 0 auto; } .p-contents.l-bold p { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .p-contents.l-bold p { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif !important; } .cms-preview-ar .p-contents.l-bold p { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .flex-wrapper { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; flex-direction: column; height: 100%; width: 100%; z-index: 99; background-color: #febb14; background-size: cover; background-repeat: no-repeat; } .flex-wrapper .container { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; } .mcd-section { background-color: #fff; background-size: cover; height: 100vh; } .mcd-section ::-webkit-scrollbar { width: 8px; } .mcd-section ::-webkit-scrollbar-track { box-shadow: inset 0 0 8px transparent; border-radius: 10px; } .mcd-section ::-webkit-scrollbar-thumb { background: #CDCDCD; border-radius: 10px; } .mcd-section ::-webkit-scrollbar-thumb:hover { background: #CDCDCD; } [dir=rtl] .mcd-section { direction: rtl; } .mcd-section .graphic-top, .mcd-section .graphic-bottom { height: auto; position: absolute; width: 100%; left: 0px; -o-object-fit: contain; object-fit: contain; } .mcd-section .graphic-top { top: 0px; } .mcd-section .graphic-bottom { bottom: 0px; } .mcd-main-wrapper { padding: 15px; height: calc(100% - 30px); width: calc(100% - 30px); position: relative; z-index: 2; } @media only screen and (min-device-height: 390px) and (min-device-height: 750px) { .mcd-main-wrapper { padding: 20px; height: calc(100% - 40px); width: calc(100% - 40px); } } .mcd-wrapper { overflow: hidden; position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; height: 100%; } .mcd-wrapper.l-disabled { background-color: transparent; } .mcd-main-wrapper-tnc { padding: 15px; height: 100%; } @media only screen and (min-device-height: 390px) and (min-device-height: 750px) { .mcd-main-wrapper-tnc { padding: 20px; height: 100%; } } .mcd-top-graphics { width: 100%; height: 138px; position: absolute; top: 0; left: 0; z-index: 3; background-position: bottom; } .mcd-bottom-graphics { width: 100%; height: 138px; position: absolute; bottom: 0; left: 0; z-index: 5; background-position: top; pointer-events: none; } .raffle-count { display: flex; gap: 26px; width: 100%; margin-bottom: 20px; } .raffle-count .raffle-count-block { display: flex; position: relative; width: 130px; height: 64px; } .raffle-count .raffle-count-ticket { width: 100%; height: 100%; position: absolute; background: url(../images/raffle-count.png) no-repeat center; background-size: contain; display: flex; flex-direction: row-reverse; } .raffle-count .raffle-count-ticket .raffle-setter { width: 76%; height: 100%; } .raffle-count .raffle-count-ticket .raffle-number { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; color: #ffbc0d; color: #000000; height: 100%; font-size: 7px; display: flex; position: absolute; right: 1px; top: 14px; align-items: center; justify-content: center; line-height: 9px; width: 100%; } [dir=rtl] .raffle-count .raffle-count-ticket .raffle-number { right: -2px; top: 2px; } .raffle-count-v2 { display: flex; gap: 26px; width: 100%; margin-bottom: 20px; } .raffle-count-v2 .raffle-count-block { display: flex; position: relative; width: 130px; height: 64px; } .raffle-count-v2 .raffle-count-ticket { width: 100%; height: 100%; position: absolute; background: url(../images/raffle-count.png) no-repeat center; background-size: contain; display: flex; flex-direction: row-reverse; } .raffle-count-v2 .raffle-count-ticket .raffle-setter { width: 76%; height: 100%; } .raffle-count-v2 .raffle-count-ticket .raffle-number { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; color: #ffbc0d; color: #000000; height: 100%; font-size: 7px; display: flex; position: absolute; right: 1px; top: 14px; align-items: center; justify-content: center; line-height: 9px; width: 100%; } [dir=rtl] .raffle-count-v2 .raffle-count-ticket .raffle-number { right: -2px; top: 2px; } .pagination { display: flex; gap: 10px; width: 100%; justify-content: center; align-items: center; padding-top: 0px; padding-bottom: 14px; } .pagination .bullet { width: 16px; height: 16px; background: #DB001C; border-radius: 0; /* Square shape */ cursor: pointer; transition: background 0.3s ease; } .pagination .bullet.active { background: #fff; border: 1px solid #DB001C; } .template-one .mcd-main-wrapper-box { width: 100%; } .template-one .l-top-panel { height: 14px; padding: 20px 20px 0 20px; } .template-one .template-one__main-panel { overflow-y: auto; padding: 20px; } .template-two .template-two__wrapper { display: grid; grid-template-rows: 70px 1fr 90px; height: 100vh; width: 100%; } .template-two .template-two__top-block { padding: 0px; width: 100%; height: 100%; position: relative; } .template-two .template-two__top-block .l-logo { position: absolute; top: 20px; left: 20px; } .template-two .template-two__top-block .l-hamburger { position: absolute; top: 20px; right: 20px; } .template-two .template-two__main-panel { overflow-y: auto; padding: 0 20px; justify-content: flex-start; gap: 25px; } .template-two .template-two__btm-panel.two-btn { display: flex; justify-content: space-between; padding: 0 20px; } .disable-cta { background-color: #888989 !important; } .disable-cta::after { box-shadow: inset -5px -5px 0px #888989 !important; } .absolute63 { position: absolute; bottom: 63px; left: 0; right: 0; } .greyscale img { filter: grayscale(100%); } .justify-center { justify-content: center !important; } .fd-column { flex-direction: column; } .product-summary { border: 2px solid #000; width: calc(100% - 4px); background: #fff; font-size: 18px; line-height: 20px; } .product-summary .product-header, .product-summary .product-row { display: flex; align-items: center; padding: 3px 16px; border-bottom: 1px solid #ccc; } @media only screen and (min-width: 360px) and (min-height: 740px) { .product-summary .product-header, .product-summary .product-row { padding: 8px 16px; } } .product-summary .product-header { font-weight: bold; border-bottom: 2px solid #000; font-size: 18px; line-height: 20px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .product-summary .product-header { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .product-summary .product-header .product-right { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .product-summary .product-header .product-right { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .product-summary .product-row:last-child { border-bottom: none; } .product-summary .product-left { display: flex; align-items: center; flex: 1; gap: 12px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .product-summary .product-left { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .product-summary .product-left .product-icon { width: 20px; height: 20px; border-radius: 50%; border: 2px solid orange; padding: 4px; background: #fff; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 360px) and (min-height: 740px) { .product-summary .product-left .product-icon { width: 35px; height: 35px; } } .product-summary .product-left .product-name { font-size: 18px; line-height: 20px; font-weight: 500; text-transform: uppercase; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .product-summary .product-left .product-name { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .product-summary .product-right { width: 88px; text-align: center; font-size: 18px; line-height: 20px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .product-summary .product-right { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .height-adjust-offers { height: calc(100% - 39px) !important; } .overflow-y { overflow-y: auto; } .fg-initial { flex-grow: initial !important; } button { text-transform: uppercase; } .slide-text { text-transform: uppercase; } .select-game { border: 5px solid #FFB71B; width: 140px; margin: 0 auto; text-align: center; justify-content: center; align-items: center; display: flex; flex-direction: column; background-color: #FFB71B; flex: none !important; /* Largest height first */ /* 1) Largest height FIRST (general) */ /* 2) Next smaller height */ /* 3) 428px devices – must come BEFORE smaller 360px rules */ /* 4) Smaller 360px heights (put LAST so they override everything above) */ /* 5) 375px device */ } .select-game .l-box__title { width: 80% !important; } .select-game .l-box__title .l-sub-title { font-size: 22px; line-height: 1; } @media only screen and (max-width: 360px) and (max-height: 820px) { .select-game .l-box__title .l-sub-title { font-size: 18px; line-height: 1; } } @media only screen and (max-width: 360px) and (max-height: 800px) { .select-game .l-box__title .l-sub-title { font-size: 18px; line-height: 1; } } @media only screen and (max-width: 375px) and (max-height: 812px) { .select-game .l-box__title .l-sub-title { font-size: 18px; line-height: 1; } } [dir=rtl] .select-game .l-box__title .l-sub-title { font-size: 15px; line-height: 1; } @media only screen and (max-width: 360px) and (max-height: 820px) { [dir=rtl] .select-game .l-box__title .l-sub-title { font-size: 15px; line-height: 1; } } @media only screen and (max-width: 360px) and (max-height: 800px) { [dir=rtl] .select-game .l-box__title .l-sub-title { font-size: 14px; line-height: 1; } } @media only screen and (max-width: 360px) and (max-height: 780px) { [dir=rtl] .select-game .l-box__title .l-sub-title { font-size: 12px; line-height: 1; } } @media only screen and (max-width: 360px) and (max-height: 820px) { .select-game { width: 120px; } } @media only screen and (max-width: 360px) and (max-height: 800px) { .select-game { width: 135px; } } @media only screen and (min-width: 361px) and (max-width: 428px) and (max-height: 758px) { .select-game { width: 150px; } } @media only screen and (max-width: 390px) and (max-height: 676px) { .select-game { width: 140px; /* or your required size */ } } @media only screen and (max-width: 360px) and (max-height: 644px) { .select-game { width: 135px; } } @media only screen and (max-width: 360px) and (max-height: 612px) { .select-game { width: 135px; } } @media only screen and (max-width: 375px) and (max-height: 644px) { .select-game { width: 135px; } } .select-game .l-sub-title { color: #DB0007 !important; } .select-game-disable { border: 5px solid transparent; width: 140px; margin: 0 auto; text-align: center; justify-content: center; align-items: center; display: flex; flex-direction: column; background-color: transparent; opacity: 0.6; flex: none !important; /* Largest height first */ /* 1) Largest height FIRST (general) */ /* 2) Next smaller height */ /* 3) 428px devices – must come BEFORE smaller 360px rules */ /* 4) Smaller 360px heights (put LAST so they override everything above) */ /* 5) 375px device */ } .select-game-disable .l-box__title { width: 80% !important; } .select-game-disable .l-box__title .l-sub-title { font-size: 22px; line-height: 1; } @media only screen and (max-width: 360px) and (max-height: 820px) { .select-game-disable .l-box__title .l-sub-title { font-size: 18px; } } @media only screen and (max-width: 360px) and (max-height: 800px) { .select-game-disable .l-box__title .l-sub-title { font-size: 18px; } } @media only screen and (max-width: 375px) and (max-height: 812px) { .select-game-disable .l-box__title .l-sub-title { font-size: 18px; } } [dir=rtl] .select-game-disable .l-box__title .l-sub-title { font-size: 15px; line-height: 1; } @media only screen and (max-width: 360px) and (max-height: 820px) { [dir=rtl] .select-game-disable .l-box__title .l-sub-title { font-size: 15px; } } @media only screen and (max-width: 360px) and (max-height: 800px) { [dir=rtl] .select-game-disable .l-box__title .l-sub-title { font-size: 14px; } } @media only screen and (max-width: 360px) and (max-height: 612px) { [dir=rtl] .select-game-disable .l-box__title .l-sub-title { font-size: 12px; } } @media only screen and (max-width: 360px) and (max-height: 820px) { .select-game-disable { width: 120px; } } @media only screen and (max-width: 360px) and (max-height: 800px) { .select-game-disable { width: 135px; } } @media only screen and (min-width: 361px) and (max-width: 428px) and (max-height: 758px) { .select-game-disable { width: 150px; } } @media only screen and (max-width: 390px) and (max-height: 676px) { .select-game-disable { width: 140px; /* or your required size */ } } @media only screen and (max-width: 360px) and (max-height: 644px) { .select-game-disable { width: 135px; } } @media only screen and (max-width: 360px) and (max-height: 612px) { .select-game-disable { width: 135px; } } @media only screen and (max-width: 375px) and (max-height: 644px) { .select-game-disable { width: 135px; } } .wauto { width: auto !important; } .nopadd { padding: 0px !important; text-align: left !important; } .absolute80 { position: absolute; bottom: 80px; left: 0; right: 0; } .text-left { text-align: left; } .pd12 { padding: 0px 12px; } .mauto { margin: 0 auto; } @font-face { font-family: "VT323"; src: local("☺"), url("../fonts/VT323-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "Speedee Condensed Regular"; src: local("☺"), url("../fonts/SpeedeeCd_W_Rg.woff2") format("woff2"), url("../fonts/SpeedeeCd_W_Rg.woff") format("woff"), url("../fonts/SpeedeeCd_Rg.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "Speedee Condensed Bold"; src: local("☺"), url("../fonts/SpeedeeCd_W_Bd.woff2") format("woff2"), url("../fonts/SpeedeeCd_W_Bd.woff") format("woff"), url("../fonts/SpeedeeCd_Bd.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "Speedee Condensed Light"; src: local("☺"), url("../fonts/SpeedeeCd_W_Lt.woff2") format("woff2"), url("../fonts/SpeedeeCd_W_Lt.woff") format("woff"), url("../fonts/SpeedeeCd_Lt.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "SpeedeeArabic-Regular"; src: local("☺"), url("../fonts/SpeedeeArabic-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "SpeedeeArabic-Bold"; src: local("☺"), url("../fonts/SpeedeeArabic-Bold.ttf") format("truetype"); font-weight: normal; font-style: normal; } .l-radius { border-radius: 15px; } .l-body { overflow: hidden; margin: 0 auto; padding: 0; } .l-body-content { width: calc(100% - 45px); margin: 0 auto; } .l-center { display: flex; align-items: center; justify-content: center; text-align: center; } .l-center-vertical.l-center-vertical { display: flex; align-items: center; } .l-cross.l-cross { display: flex; flex-direction: row; gap: 10px; height: 50px !important; } .l-cross.l-cross img { width: 42px; height: auto; } .l-absolute-center { position: absolute; left: 50%; transform: translateX(-50%); } .l-absolute { position: absolute; left: 0; top: 0; } .l-absolute-center-horz { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } [dir=rtl] .l-absolute-center-horz { left: auto; right: 50%; } .l-center-horz.l-center-horz { display: flex; justify-content: center; } .l-center-v { display: flex; align-items: center; } .l-full-box { width: 100%; height: 100%; } .l-hide { height: 0; width: 0; opacity: 0; pointer-events: none; } .l-none { height: 0; width: 0; opacity: 0; pointer-events: none; display: none; } .l-relative { position: relative; } .l-space-between { justify-content: space-between; } .l-space-around { justify-content: space-around; } .l-column { flex-direction: column; } .l-img-responsive { width: 100%; height: auto; } .l-img-responsive-max { max-width: 100%; } .l-img-full { width: 100%; height: 100%; } .l-obj-cover { -o-object-fit: cover; object-fit: cover; } .l-obj-contain { -o-object-fit: contain; object-fit: contain; } .l-overflow-hidden { overflow: hidden; } .l-img-full-gif { width: 100%; height: 100%; } .l-img-full-gif2 { width: 100%; height: auto; } .l-space-even { justify-content: space-evenly !important; } .l-body-scroll { overflow-y: auto; width: calc(100% - 55px); margin: 0 auto; padding: 0 10px; } .l-grid { display: grid; } .l-start { justify-content: start; } .l-display-flex { display: flex; } .hide { display: none; } .show { display: block; } .l-w-50 { width: 50%; } .l-w-40 { width: 40%; } .l-w-35 { width: 35%; } .l-text-decoration { text-decoration: underline; } .l-relative { position: relative; } button { outline: none; } button:focus { outline: none; } .nopadding { padding: 0px !important; } .height29 { height: 15vh; } @media only screen and (min-device-width: 360px) and (min-device-height: 780px) { .height29 { height: 15vh; } } @media only screen and (min-width: 358px) and (max-width: 359px) { .height29 { height: 15vh; } } .tryagain-link { font-size: 24px; line-height: 22px; margin-bottom: 45px; font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .title-error-heading { font-size: 28px; letter-spacing: 0; line-height: 28px; text-align: center; font-family: "SpeedeeBold"; margin-bottom: 23px; } [dir=rtl] .title-error-heading { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .title-error-content { font-size: 21px; line-height: 26px; margin-bottom: 40px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .title-error-content { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .l-tooltip { display: none; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background-color: #333; color: #fff; padding: 5px; border-radius: 3px; font-size: 12px; z-index: 10; min-width: 35px; line-height: 13px; text-align: center; } [dir=rtl] .l-tooltip { min-width: 38px; } .l-tooltip:before { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: #333 transparent transparent transparent; } .l-tooltip.show-tooltip { display: block; } .copycore .l-tooltip { transform: translateX(-66%); top: -40px; } .copycore .l-tooltip:before { top: 99%; margin-left: 9px; } .l-seperator, .l-border-star { height: 30px; width: calc(100% + 20px); position: relative; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; overflow: hidden; } [dir=rtl] .l-seperator, [dir=rtl] .l-border-star { left: auto; right: 50%; transform: translateX(50%); } @media only screen and (min-width: 360px) and (min-height: 740px) { .l-seperator, .l-border-star { height: 40px; } } .l-seperator::before, .l-border-star::before { content: "************************************************************************************************"; font-family: "VT323"; font-size: 14px; width: 100%; height: 6px; display: block; line-height: 0.5; } [dir=rtl] .l-seperator::before, [dir=rtl] .l-border-star::before { text-align: right; } .l-seperator.l-seperator--fixed, .l-border-star.l-seperator--fixed { height: 40px; } @media only screen and (min-width: 360px) and (min-height: 640px) { .l-seperator.l-seperator--fixed, .l-border-star.l-seperator--fixed { height: 60px; } } .l-seperator-center, .l-border-star-center { height: 30px; } @media only screen and (min-width: 360px) and (min-height: 640px) { .l-seperator-center, .l-border-star-center { height: 50px; } } @media only screen and (min-width: 360px) and (min-height: 720px) { .l-seperator-center, .l-border-star-center { height: 60px; } } .l-border-star { height: 20px; } .l-side { padding: 0 5px; } .l-no-padding.l-no-padding { padding: 0 !important; } .l-padding-15 { padding: 12px 15px 15px 15px; } .l-no-padding-btm { padding-bottom: 0px; } .l-txt-align-lft { text-align: left; } .l-border-star-main { height: 30px; width: calc(100% + 20px); display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; left: 50%; transform: translateX(-50%); } [dir=rtl] .l-border-star-main { left: auto; right: 50%; transform: translateX(50%); } .l-border-star-main::before { content: "*************************************************************************************"; font-family: "VT323"; font-size: 14px; width: 100%; height: 7px; display: block; line-height: 0.6; } [dir=rtl] .l-border-star-main::before { text-align: right; } .l-border-star-main.double { height: 50px; } .l-border-star-main2 { height: 30px; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; left: 50%; transform: translateX(-50%); margin-bottom: 10px; } [dir=rtl] .l-border-star-main2 { left: auto; right: 50%; transform: translateX(50%); } .l-border-star-main2::before { content: "************************************************************************"; font-family: "VT323"; font-size: 14px; width: 100%; height: 7px; display: block; line-height: 0.6; } [dir=rtl] .l-border-star-main2::before { text-align: right; } .l-border-star-main2.double { height: 50px; } .l-border-star-main3 { height: 30px; width: 95%; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; left: 50%; transform: translateX(-50%); } [dir=rtl] .l-border-star-main3 { left: auto; right: 50%; transform: translateX(50%); } .l-border-star-main3::before { content: "************************************************************************"; font-family: "VT323"; font-size: 14px; width: 100%; height: 7px; display: block; line-height: 0.6; } [dir=rtl] .l-border-star-main3::before { text-align: right; } .l-border-star-main3.double { height: 50px; } .l-scroll { overflow-y: auto; overflow-x: hidden; } .l-spacer-height { height: 20px; } .l-btn { font-size: 15px; cursor: pointer; transition: all 0.3s ease; position: relative; background: #F5F7F8; color: #000000; border: 3px solid #000; cursor: pointer; box-shadow: -8px 8px 0px rgba(0, 0, 0, 0.3); outline: none; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; min-width: 90px !important; padding: 0px 12px; height: 40px; display: flex; align-items: center; justify-content: center; line-height: 13px; } [dir=rtl] .l-btn { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } @media only screen and (min-width: 360px) and (min-height: 670px) { .l-btn { height: 45px; } } .l-btn span { padding: 0 12px; } .l-btn::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 13px); height: calc(100% - 13px); border: 2px dotted #000; pointer-events: none; } .l-btn::after { content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); box-shadow: inset -3px -3px 4px rgba(0, 0, 0, 0.7); pointer-events: none; } .l-btn.l-btn-200 { min-width: 200px; } .l-btn.l-btn-170 { min-width: 170px !important; } .l-btn.l-btn-disabled { pointer-events: none; opacity: 0.6; } .w200 { width: 200px; } .l-btn-width { font-size: 15px; cursor: pointer; transition: all 0.3s ease; position: relative; background: #F5F7F8; color: #000000; border: 3px solid #000; cursor: pointer; box-shadow: -8px 8px 0px rgba(0, 0, 0, 0.3); outline: none; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; min-width: 100px; height: 35px; display: flex; align-items: center; justify-content: center; width: 144px; line-height: 16px; height: 45px; } [dir=rtl] .l-btn-width { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } @media only screen and (min-width: 360px) and (min-height: 670px) { .l-btn-width { height: 45px; } } .l-btn-width span { padding: 0 5px; } .l-btn-width::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 13px); height: calc(100% - 13px); border: 2px dotted #000; pointer-events: none; } .l-btn-width::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; box-shadow: inset -3px -3px 4px rgba(0, 0, 0, 0.7); pointer-events: none; } .l-btn-width.l-btn-200 { min-width: 200px; } .l-btn-width.l-btn-disabled { pointer-events: none; opacity: 0.6; } .l-window { display: flex; flex-direction: column; position: relative; } .l-window:after { content: ""; width: 100%; height: 100%; background-color: #000; position: absolute; left: -8px; top: 8px; z-index: 1; } .l-window .l-window__bar { background-color: #FFB71B; height: 20px; position: relative; z-index: 2; display: flex; align-items: center; } @media only screen and (min-width: 360px) and (min-height: 670px) { .l-window .l-window__bar { height: 23px; } } @media only screen and (min-width: 360px) and (min-height: 740px) { .l-window .l-window__bar { height: 26px; } } .l-window .l-window__bar:before { content: ""; width: 6px; height: 6px; border: 2px solid #fff; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); } [dir=rtl] .l-window .l-window__bar:before { right: auto; left: 10px; } @media only screen and (min-width: 360px) and (min-height: 750px) { .l-window .l-window__bar:before { width: 8px; height: 8px; } } .l-window .l-window__bar .l-window__close { width: 15px; height: 15px; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); z-index: 5; background-color: transparent; } [dir=rtl] .l-window .l-window__bar .l-window__close { right: auto; left: 10px; } @media only screen and (min-width: 360px) and (min-height: 750px) { .l-window .l-window__bar .l-window__close { width: 18px; height: 18px; } } .l-window .l-window__content { background-color: #fffbf3; border: 1px solid #FF6E00; padding: 10px; position: relative; z-index: 2; } .l-window.l-window--orange .l-window__bar { background-color: #FF6E00; } .l-window.l-window--orange .l-window__content { background-color: #FFFBF3; border: 1px solid #FF6E00; } .l-window.l-window--red .l-window__bar { background-color: #ff0c2e; } .l-window.l-window--red .l-window__content { background-color: #FFB71B; border: 1px solid #000; } .l-window.l-window--green .l-window__bar { background-color: #007A33; } .l-window.l-window--green .l-window__content { background-color: #FFFBF3; border: 1px solid #007A33; } .l-window.l-window--green .l-form .form-field { border: 1px solid green; } .l-window.l-window--yellow .l-window__bar { background-color: #FFB71B; } .l-window.l-window--yellow .l-window__content { background-color: #FFFBF3; } .l-window.l-window--yellow-red .l-window__bar { background-color: #FFB71B; } .l-window.l-window--yellow-red .l-window__content { background-color: #db001c; border: 1px solid #FFB71B; } .l-window.l-window--yellow-red .l-form .form-field { border: 1px solid #FFB71B; } .l-window.l-window--full-height { height: 100%; } .l-window.l-window--full-height .l-window__content { height: 100%; } .l-window .l-window__inner-panel { height: calc(100% - 60px); text-align: left; } @media only screen and (min-width: 360px) and (min-height: 670px) { .l-window .l-window__inner-panel { height: calc(100% - 90px); } } @media only screen and (min-width: 360px) and (min-height: 670px) { .l-window .l-window__inner-panel { height: calc(100% - 90px); } } .l-window .l-window__inner-panel-btm { height: 50px; display: flex; gap: 10px; } @media only screen and (min-width: 360px) and (min-height: 670px) { .l-window .l-window__inner-panel-btm { height: 80px; } } .l-window.l-window--menu { border: 1px solid #000; } .l-window.l-window--menu .l-window__top-bar { width: 100%; background-repeat: no-repeat; background-size: contain; background-color: #fff; background-position-x: 15px; background-position: left; z-index: 2; } [dir=rtl] .l-window.l-window--menu .l-window__top-bar { background-position: right; } .l-window.l-window--menu .l-window__content { border: none; background-color: #ebebeb; } .l-spacer { height: 1px; } .l-padding-btm-no.l-padding-btm-no.l-padding-btm-no { padding-bottom: 0; } .l-gap-30 { display: flex; flex-direction: column; gap: 20px; } @media only screen and (min-width: 360px) and (min-height: 740px) { .l-gap-30 { gap: 30px; } } .l-flex-one { flex: 1; } .l-reward-img { width: 100%; position: relative; } .l-reward-img .l-img-responsive { width: 86%; } @media only screen and (min-width: 360px) and (min-height: 670px) { .l-reward-img .l-img-responsive { width: 96%; } } @media only screen and (min-width: 360px) and (min-height: 780px) { .l-reward-img .l-img-responsive { width: 100%; } } .l-reward-img .l-reward-img-popupimage { position: absolute; top: 0; left: 0; } [dir=rtl] .l-reward-img .l-reward-img-popupimage { left: auto; right: 0; justify-content: flex-start; } .l-greyscale-img { filter: grayscale(100%) blur(1px); opacity: 0.3; } .l-gap-20 { gap: 10px; } @media only screen and (min-width: 360px) and (min-height: 740px) { .l-gap-20 { gap: 15px; } } @media only screen and (min-width: 360px) and (min-height: 780px) { .l-gap-20 { gap: 20px; } } .l-sub-title { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 26px; color: #000; text-transform: uppercase; } [dir=rtl] .l-sub-title { text-align: right; font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } @media only screen and (min-width: 360px) and (min-height: 740px) { .l-sub-title { font-size: 28px; } } .l-sub-title-big { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 26px; color: #000; text-transform: uppercase; padding-top: 10px; } @media only screen and (min-width: 360px) and (min-height: 740px) { .l-sub-title-big { padding-top: 20px; } } @media only screen and (min-width: 360px) and (min-height: 780px) { .l-sub-title-big { padding-top: 30px; } } [dir=rtl] .l-sub-title-big { text-align: right; } @media only screen and (min-width: 360px) and (min-height: 740px) { .l-sub-title-big { font-size: 28px; } } .l-mini-title { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 22px; color: #000; text-transform: uppercase; } [dir=rtl] .l-mini-title { text-align: right; font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } @media only screen and (min-width: 360px) and (min-height: 740px) { .l-mini-title { font-size: 26px; } } .l-txt { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 18px; line-height: 1.2; text-transform: uppercase; } [dir=rtl] .l-txt { text-align: right; font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .l-txt strong { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .l-txt strong { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .l-txt-bold { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 18px; line-height: 1.2; text-transform: uppercase; } [dir=rtl] .l-txt-bold { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .l-txt-big { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 30px; line-height: 1; text-transform: uppercase; width: 100%; text-align: left; overflow-wrap: break-word; } [dir=rtl] .l-txt-big { text-align: right; font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .l-ticket__card { width: 100px; height: 50px; background-repeat: no-repeat; background-size: contain; position: relative; } [dir=rtl] .l-ticket__card { background-position-x: right; } @media only screen and (min-width: 400px) and (min-height: 740px) { .l-ticket__card { width: 90px; height: 58px; } } .l-ticket__card span { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 8px; color: #000; position: absolute; top: 21px; left: 25px; display: none; } [dir=rtl] .l-ticket__card span { text-align: right; font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .l-ticket__block { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 18px; width: 115px; line-height: 1.2; padding-right: 15px; } [dir=rtl] .l-ticket__block { text-align: right; } .l-ticket__block.l-hide { width: 0; height: 0; overflow: hidden; } .l-ticket { display: flex; align-items: center; } .l-main-wrapper { height: calc(100% - 40px); width: 100%; position: relative; z-index: 2; padding: 20px 0; flex-direction: column; } .l-wrapper { width: calc(100% - 40px); padding-left: 10px; position: relative; left: -5px; height: 100%; } .l-wrapper-with-btn { width: calc(100% - 40px); height: calc(100% - 65px); padding-left: 10px; position: relative; left: -5px; } .l-wrapper-btm { height: 65px; width: 100%; } .l-wrapper-btm2 { height: auto; width: 100%; } .l-wrapper-btm3 { height: 80px; width: 100%; } .l-wrapper-btm4 { height: 55px; width: 100%; } .l-wrapper-btm-game { width: 100%; position: absolute; bottom: -8px; left: 0; right: 0; padding: 10px 0; } .l-wrapper-btm-width { width: calc(100% - 40px); } .l-wrapper-btm-width .l-center { justify-content: space-between; } .l-window--full-height { width: 100%; height: 100%; } .l-window--full-height .l-window__content { height: calc(100% - 26px); } .l-window.l-window--full-height { width: 100%; height: 100%; } .l-window.l-window--full-height .l-window__content { height: calc(100% - 26px); } .l-window__top-panel { min-height: 35px; display: flex; position: relative; align-items: flex-start; display: flex; flex-direction: column; } .l-window__top-panel.title-image { min-height: 60px; } @media only screen and (min-width: 360px) and (min-height: 740px) { .l-window__top-panel.title-image { min-height: 80px; } } @media only screen and (min-width: 360px) and (min-height: 780px) { .l-window__top-panel.title-image { min-height: 90px; } } .l-window__top-panel.title-image img { width: 36px; } .l-window__title { display: flex; align-items: start; gap: 10px; width: 100%; height: 100%; position: relative; word-break: break-word; } .l-window__title-txt { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 35px; color: #000; line-height: 1; position: relative; text-transform: uppercase; word-break: break-word; } [dir=rtl] .l-window__title-txt { text-align: right; font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .l-main-title { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 36px; } [dir=rtl] .l-main-title { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .l-main-big-title { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 65px; } [dir=rtl] .l-main-big-title { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .l-reward-slider { width: 100%; } .l-reward-slider .swiper-slide { height: 274px; width: 230px; display: flex; flex-direction: column; justify-content: end; align-items: self-start; opacity: 0; padding-bottom: 20px; } @media only screen and (min-width: 360px) and (min-height: 640px) { .l-reward-slider .swiper-slide { height: 300px; } } @media only screen and (min-width: 360px) and (min-height: 670px) { .l-reward-slider .swiper-slide { height: 300px; width: 230px; } } @media only screen and (min-width: 360px) and (min-height: 700px) { .l-reward-slider .swiper-slide { height: 370px; width: 240px; } } .l-reward-slider .swiper-slide.swiper-slide-active { opacity: 1; } .l-reward-slider .swiper-slide.swiper-slide-next, .l-reward-slider .swiper-slide.swiper-slide-prev { opacity: 0.6; } .l-reward-slider .l-window .l-window__bar { height: 20px; flex-shrink: 0; } .l-reward-slider .l-window .l-window__content { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 10px; } @media only screen and (min-width: 400px) and (min-height: 740px) { .l-reward-slider .l-window .l-window__content { padding: 15px; } } .l-reward-slider .l-window .l-window__content .l-txt { flex: 0 0 auto; margin: 5px 0; } .l-reward-slider .l-window .l-window__content .l-txt:first-child { margin-top: 0; } .l-reward-slider .l-window .l-window__content .l-txt:last-child { margin-bottom: 0; } .l-reward-slider .l-window .l-window__content .l-main-title { flex: 0 0 auto; margin: 0 0 4px; font-size: 29px; line-height: 1; } [dir=rtl] .l-reward-slider .l-window .l-window__content .l-main-title { line-height: 1.3; font-size: 20px; } @media only screen and (max-width: 390px) and (max-height: 676px) { [dir=rtl] .l-reward-slider .l-window .l-window__content .l-main-title { font-size: 20px; } } @media only screen and (max-width: 375px) and (max-height: 644px) { [dir=rtl] .l-reward-slider .l-window .l-window__content .l-main-title { font-size: 20px; } } @media only screen and (max-width: 360px) and (max-height: 612px) { [dir=rtl] .l-reward-slider .l-window .l-window__content .l-main-title { font-size: 17px; } } @media only screen and (max-width: 320px) and (max-height: 658px) { [dir=rtl] .l-reward-slider .l-window .l-window__content .l-main-title { font-size: 20px; } } @media only screen and (max-width: 390px) and (max-height: 676px) { .l-reward-slider .l-window .l-window__content .l-main-title { font-size: 24px; } } @media only screen and (max-width: 375px) and (max-height: 644px) { .l-reward-slider .l-window .l-window__content .l-main-title { font-size: 24px; } } @media only screen and (max-width: 360px) and (max-height: 612px) { .l-reward-slider .l-window .l-window__content .l-main-title { font-size: 17px; } } @media only screen and (max-width: 320px) and (max-height: 658px) { .l-reward-slider .l-window .l-window__content .l-main-title { font-size: 20px; } } [dir=rtl] .l-reward-slider .l-window .l-window__content .l-main-big-title { font-size: 50px; } @media only screen and (max-width: 360px) and (max-height: 612px) { .l-reward-slider .l-window .l-window__content .l-main-big-title { font-size: 50px; } } .l-reward-slider .l-window .l-window__content .l-reward-slider__image { flex: 2; display: flex; align-items: center; justify-content: center; } @media only screen and (min-width: 360px) and (min-height: 750px) { .l-reward-slider .l-window .l-window__content .l-reward-slider__image { margin: 0; } } .l-reward-slider .l-window .l-window__content .l-reward-slider__image-block img { -o-object-fit: contain; object-fit: contain; max-width: 40%; height: auto; } @media only screen and (min-width: 400px) and (min-height: 750px) { .l-reward-slider .l-window .l-window__content .l-reward-slider__image-block img { max-width: 60%; height: auto; } } @media only screen and (min-width: 420px) and (min-height: 787px) { .l-reward-slider .l-window .l-window__content .l-reward-slider__image-block img { max-width: 70%; height: auto; } } .l-reward-slider .l-window .l-window__content .l-main-big-title { flex: 0 0 auto; margin: 8px 0; } .l-reward-slider--sml .swiper-slide { height: 230px; width: 200px; } @media only screen and (min-width: 360px) and (min-height: 640px) { .l-reward-slider--sml .swiper-slide { height: 242px; width: 200px; } } @media only screen and (min-width: 360px) and (min-height: 670px) { .l-reward-slider--sml .swiper-slide { height: 245px; width: 200px; } } @media only screen and (min-width: 360px) and (min-height: 700px) { .l-reward-slider--sml .swiper-slide { height: 330px; width: 200px; } } .l-reward-slider--sml .l-window .l-window__content .l-reward-slider__image img { max-width: 40%; max-height: 70%; } .l-reward-slider--sml .l-main-big-title { font-size: 50px; } .l-light-title { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 32px; margin-bottom: 5px; } [dir=rtl] .l-light-title { text-align: right; font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .l-light-title-bold { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 32px; text-align: left; width: 100%; } [dir=rtl] .l-light-title-bold { text-align: right; font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .l-wrap-two-btn { display: flex; flex-direction: row; gap: 25px; justify-content: space-between; padding: 18px; } .l-wrap-two-btn .l-btn { min-width: 140px; } .l-wrap-two-btn2 { display: flex; flex-direction: row; gap: 25px; height: 20px; justify-content: space-between; padding: 4px; } .l-wrap-two-btn2 .l-btn { min-width: 140px; } .l-wrap-two-btn3 { display: flex; flex-direction: row; gap: 25px; height: 20px; justify-content: space-between; padding: 10px; } .l-wrap-two-btn3 .l-btn { min-width: 140px; } .l-wrap-two-btn4 { display: flex; flex-direction: row; gap: 25px; justify-content: space-between; padding: 10px; } .l-wrap-two-btn4 .l-btn { min-width: 140px; } .l-wrap-two-btn5 { display: flex; flex-direction: row; gap: 25px; justify-content: space-between; padding: 0px; } .l-wrap-two-btn5 .l-btn { min-width: 140px; } .l-back { min-width: 65px !important; } .l-txt-left { text-align: left; } .l-top-panel { position: relative; height: 50px; } .l-top-panel .l-top-panel__block { position: relative; } .l-form { width: 100%; } .l-form .form-field { margin-bottom: 5px; border: 1px solid #FF6E00; width: calc(100% - 10px); height: 30px; padding: 5px; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center; } @media only screen and (min-width: 360px) and (min-height: 670px) { .l-form .form-field { height: 35px; } } @media only screen and (min-width: 360px) and (min-height: 720px) { .l-form .form-field { height: 40px; margin-bottom: 10px; } } .l-form .form-field input { font-size: 16px; text-transform: uppercase; background-color: #f5f5f5; padding: 0; width: calc(100% - 10px); height: calc(100% - 5px); border: none; outline: none; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 18px; } [dir=rtl] .l-form .form-field input { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .l-form .form-field textarea { font-size: 16px; text-transform: uppercase; background-color: #f5f5f5; padding: 0; width: calc(100% - 10px); height: calc(100% - 5px); border: none; outline: none; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 18px; } [dir=rtl] .l-form .form-field textarea { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .l-form .additional { font-size: 14px; line-height: 1; text-align: left; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .l-form .additional { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .l-form .form-field input::-moz-placeholder { color: #333; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .l-form .form-field input::placeholder { color: #333; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .l-form .form-field textarea::-moz-placeholder { color: #333; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .l-form .form-field textarea::placeholder { color: #333; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .l-form .checkbox-container { padding-top: 10px; } .l-form .checkbox-container .checkbox-label { display: flex; align-items: center; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; transition: all 0.2s ease; } .l-form .checkbox-container .checkbox-label .custom-checkbox-wrapper { position: relative; display: inline-block; margin-right: 10px; height: 24px; } [dir=rtl] .l-form .checkbox-container .checkbox-label .custom-checkbox-wrapper { margin-left: 10px; margin-right: 0; } .l-form .checkbox-container .checkbox-label .custom-checkbox-wrapper input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; cursor: pointer; } .l-form .checkbox-container .checkbox-label .custom-checkbox-wrapper .custom-checkbox { display: inline-block; width: 22px; height: 22px; border: 2px solid #ccc; background-color: #f5f5f5; border-radius: 4px; position: relative; cursor: pointer; transition: all 0.3s ease; } .l-form .checkbox-container .checkbox-label .custom-checkbox-wrapper .custom-checkbox .tick-image { width: 16px; height: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; transition: all 0.2s ease; } .l-form .checkbox-container .checkbox-label .custom-checkbox-wrapper input[type=checkbox]:checked + .custom-checkbox { border: 2px solid #007A33; background-color: #fff; } .l-form .checkbox-container .checkbox-label .custom-checkbox-wrapper input[type=checkbox]:checked + .custom-checkbox .tick-image { transform: translate(-50%, -50%) scale(1); opacity: 1; } .l-form .checkbox-container .checkbox-label .label-text { color: #333; font-size: 18px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .l-form .checkbox-container .checkbox-label .label-text { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .l-logo { width: 35px; height: 30px; position: absolute; left: 0px; top: 10px; z-index: 4; pointer-events: none; } .l-logo img { width: 100%; height: auto; } .l-hamburger { width: 35px; height: 30px; position: absolute; right: 0px; top: 10px; z-index: 4; display: flex; align-items: center; justify-content: center; } .l-hamburger img { width: 24px; height: auto; } .l-fan-bg { background-color: #f1efe8; } .device-info { position: fixed; top: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.2); color: white; padding: 3px 16px; font-family: "Courier New", monospace; font-size: 12px; z-index: 9999; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 15px; } .device-info span { white-space: nowrap; } .l-mb20 { margin-bottom: 10px; } @media only screen and (min-width: 360px) and (min-height: 740px) { .l-mb20 { margin-bottom: 20px; } } .l-mb20-fixed { margin-bottom: 20px; } .l-scooter { margin-bottom: 30px; } .l-scooter .l-scooter__img { display: flex; justify-content: end; } .l-scooter .l-scooter__img img { width: 50%; height: auto; margin-right: 30px; } [dir=rtl] .l-scooter .l-scooter__img img { margin-left: 30px; margin-right: 0px; } .l-scooter .l-scooter__img.l-scooter__img-full { justify-content: center; } .l-scooter .l-scooter__img.l-scooter__img-full img { width: 109%; height: auto; margin-right: 0px; } [dir=rtl] .l-scooter .l-scooter__img.l-scooter__img-full img { margin-left: 0px; margin-right: 0px; } .l-scooter .l-scooter__number { font-size: 48px; line-height: 1; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .l-scooter .l-scooter__number { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .l-scooter .l-scooter__box-block { display: flex; flex-direction: row; } .l-bagit { margin-bottom: 30px; } .l-bagit .l-bagit__img { display: flex; justify-content: end; } .l-bagit .l-bagit__img img { width: 20%; height: auto; margin-right: 40px; } [dir=rtl] .l-bagit .l-bagit__img img { margin-left: 40px; margin-right: 0px; } .l-bagit .l-bagit__img.l-bagit__img-full { justify-content: center; } .l-bagit .l-bagit__img.l-bagit__img-full img { width: 109%; height: auto; margin-left: 0px; margin-right: 0px; } [dir=rtl] .l-bagit .l-bagit__img.l-bagit__img-full img { margin-left: 0px; margin-right: 0px; } .l-bagit .l-bagit__number { font-size: 48px; line-height: 1; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .l-bagit .l-bagit__number { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .l-bagit .l-bagit__box-block { display: flex; flex-direction: row; } .l-window-inner .l-window-inner__bar { height: 9px; } .l-window-inner .l-window-inner__block { padding: 15px; border: 1px solid #000; } .mb20 { margin-bottom: 20px; } .l-box-panel .l-box { flex: 1; } .l-box-panel .l-seperator { flex-shrink: 0; } .l-box-panel .l-box__img { width: 50%; } .l-box-panel .l-box__title { padding: 0 20px; width: 100%; } .l-box-panel .l-box__title img { width: 28px; height: auto; } .justify-fs { justify-content: flex-start !important; } .l-no-border { border: 0px !important; } .text-center { text-align: center !important; } .selected { border: 2px solid #007A33; } .notselected { border: 2px solid transparent; } h1, h2, h3, p { text-transform: uppercase; } .l74 { min-width: 70px !important; height: 44px !important; box-sizing: unset; } .l15 { min-width: 100px !important; height: 50px !important; box-sizing: unset; } .l182 { min-width: 150px !important; } .loader { color: transparent !important; /* Hide text */ pointer-events: none; position: relative; } .loader::after { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; border: 3px solid transparent; border-top-color: #000; border-right-color: #000; border-radius: 50%; transform: translate(-50%, -50%); animation: spinner 0.8s linear infinite; box-shadow: none; } @keyframes spinner { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } .l-icon-adjust { display: flex; flex: 0 0 115px; } .l-icon-adjust2 { display: flex; flex: 0 0 245px; text-align: left; gap: 10px; align-items: flex-start; } .l-icon-adjust2 .lft-arrow { width: 25px; display: flex; align-items: flex-start; position: relative; top: 7px; } [dir=rtl] .l-icon-adjust2 .lft-arrow { transform: scale(-1); } [dir=rtl] .l-icon-adjust2 { text-align: right; } .l-icon-adjust2 .l-window__title-txt { font-size: 30px; } [dir=rtl] .l-icon-adjust2 .l-window__title-txt { font-size: 30px; } .l-capital { text-transform: uppercase; } [dir=rtl] .l-capital { text-transform: none; } .case-lower { text-transform: none !important; } .case-lower span { text-transform: none !important; } .screen-deals .mcd-wrapper { position: relative; display: flex; flex-direction: column; } .screen-deals .mcd-head { display: flex; width: 100%; justify-content: space-between; } .screen-deals .mcd-head img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .screen-deals .mcd-body { height: 100%; display: flex; flex-direction: column; } .screen-deals .mcd-body .fanbox { display: flex; flex-direction: column; box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); width: 96%; background-color: #fff; margin: 0 auto; } [dir=rtl] .screen-deals .mcd-body .fanbox { box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); } .screen-deals .mcd-body .fanbox .submenu { width: auto; height: 26px; display: flex; flex-direction: row-reverse; align-items: center; padding-right: 10px; } [dir=rtl] .screen-deals .mcd-body .fanbox .submenu { padding-right: 0px; padding-left: 10px; } .screen-deals .mcd-body .fanbox .submenu div { width: 10px; height: 10px; border: 2px solid #fff; } .screen-deals .mcd-body .fanbox .fan-cart { display: flex; flex-direction: row; gap: 10px; justify-content: space-evenly; width: 91%; padding: 0px 10px; margin-top: 10px; } .screen-deals .mcd-body .fanbox .fan-cart .left { display: flex; flex-direction: row; gap: 10px; width: 88%; } .screen-deals .mcd-body .fanbox .fan-cart .left h1 { font-size: 24px; line-height: 26px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .screen-deals .mcd-body .fanbox .fan-cart .left h1 { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-deals .mcd-body .fanbox .fan-cart .left img { width: 34px; } .screen-deals .mcd-body .fanbox .fan-cart .right { width: 50%; text-align: right; padding-right: 11px; position: relative; } .screen-deals .mcd-body .fanbox .fan-cart .right .quantity { position: absolute; width: 22px; height: 22px; background-color: #ff0000; top: -5px; right: -4px; font-size: 10px; text-align: center; display: flex; align-items: center; justify-content: center; } .screen-deals .mcd-body .fanbox .fan-cart .right img { width: 40px; } .screen-deals .mcd-body .fanbox .fan-border { margin: -6px 0px 30px 11px; height: 1px; width: 96%; } .screen-deals .mcd-body .fanbox .fan-border img { width: 100%; } .screen-deals .mcd-body .fanbox .fan-text { padding: 0px 10px; padding-bottom: 9px; } .screen-deals .mcd-body .fanbox .fan-text p { font-size: 18px; line-height: 20px; color: #000000; } .screen-deals .mcd-body .fanbox .points { width: 100%; padding: 8px 0; color: #ccc; display: flex; align-items: center; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; margin: 0 auto; background-color: #ededed; } .screen-deals .mcd-body .fanbox .points .left { width: 50%; } .screen-deals .mcd-body .fanbox .points .left div p { color: #000000; font-size: 14px; line-height: 16px; } .screen-deals .mcd-body .fanbox .points .right { width: 115px; border-radius: 6px; display: flex; align-items: center; justify-content: space-evenly; padding: 0 10px; gap: 20px; } .screen-deals .mcd-body .fanbox .points .right p { color: #fff; font-size: 14px; line-height: 16px; } .screen-deals .mcd-body .fanbox .points .right div { color: #fff; width: 52px; text-align: center; } .screen-deals .mcd-body .fanbox .points .right div h4 { color: #fff; font-size: 30px; line-height: 32px; } .screen-deals .mcd-body .fanbox .points .right div p { color: #fff; font-size: 14px; line-height: 16px; } .screen-deals .mcd-body__panel { position: relative; height: calc(100% - 250px); } .screen-deals .screen-deals__img { width: 250px; height: 250px; border-radius: 10px; background-color: #fff; padding: 10px; position: relative; z-index: 2; } .screen-deals .screen-deals__img span { display: block; } .screen-deals .screen-deals__img img { width: 100%; height: auto; } .screen-deals .screen-deals__bg { position: absolute; top: 0px; left: 0px; -o-object-fit: fill; object-fit: fill; } .screen-deals .p-contents { width: 80%; } .screen-deals .deals-swiper-container { width: 89vw; max-width: 400px; height: 220px; position: relative; top: 40px; } .screen-deals .swiper-wrapper { align-items: center; } .screen-deals .swiper-slide { display: flex; align-items: center; justify-content: center; transition: transform 0.3s; width: 240px !important; height: 240px !important; box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); } [dir=rtl] .screen-deals .swiper-slide { box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); } @media only screen and (max-width: 360px) and (max-height: 800px) { .screen-deals .swiper-slide { height: 230px !important; } } .screen-deals .swiper-slide:not(.swiper-slide-active) { opacity: 0.7; transform: scale(0.85); width: 240px !important; height: 240px !important; } @media only screen and (max-width: 360px) and (max-height: 800px) { .screen-deals .swiper-slide:not(.swiper-slide-active) { height: 218px !important; } } .screen-deals .swiper-slide:not(.swiper-slide-active) .reward-title, .screen-deals .swiper-slide:not(.swiper-slide-active) .reward-points, .screen-deals .swiper-slide:not(.swiper-slide-active) .reward-subtitle { display: none; } .screen-deals .swiper-slide:not(.swiper-slide-active) .reward-img { width: 60px; height: 60px; margin-bottom: 0; display: none; } .screen-deals .swiper-slide:not(.swiper-slide-active) .reward-card { background: #fff; box-shadow: none; padding: 0; border-radius: 10px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); } .screen-deals .swiper-slide.swiper-slide-active { width: 240px !important; height: 260px !important; } @media only screen and (max-width: 360px) and (max-height: 800px) { .screen-deals .swiper-slide.swiper-slide-active { height: 230px !important; } } .screen-deals .swiper-slide.swiper-slide-active .reward-img { width: 100px; } .screen-deals .swiper-slide.swiper-slide-active .reward-card { background: #fff; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); border-radius: 0px; } .screen-deals .swiper-slide.swiper-slide-next .reward-card, .screen-deals .swiper-slide.swiper-slide-prev .reward-card { background: #fff; border-radius: 0px; } .screen-deals .submenu { width: 96%; height: 20px; display: flex; flex-direction: row-reverse; align-items: center; padding-right: 10px; } [dir=rtl] .screen-deals .submenu { padding-right: 0px; padding-left: 10px; } .screen-deals .submenu div { width: 10px; height: 10px; border: 2px solid #fff; } .screen-deals .reward-card { background: #fff; border-radius: 10px; text-align: center; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); height: 100%; max-width: 500px; width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; transition: transform 0.3s, box-shadow 0.3s, background 0.3s; } .screen-deals .reward-subtitle { font-size: 18px; line-height: 20px; } @media only screen and (max-width: 360px) and (max-height: 800px) { .screen-deals .reward-subtitle { font-size: 16px; line-height: 18px; } } .screen-deals .reward-title { font-size: 30px; line-height: 32px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .screen-deals .reward-title { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } @media only screen and (max-width: 360px) and (max-height: 800px) { .screen-deals .reward-title { font-size: 24px; line-height: 26px; } } .screen-deals .reward-img { width: 100px; -o-object-fit: cover; object-fit: cover; border-radius: 8px; transition: width 0.3s, height 0.3s; } .screen-deals .reward-points { color: #222; margin-bottom: 10px; font-size: 18px; line-height: 20px; } @media only screen and (max-width: 360px) and (max-height: 800px) { .screen-deals .reward-points { font-size: 16px; line-height: 18px; } } .screen-deals .reward-points span { font-size: 40px; line-height: 42px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .screen-deals .reward-points span { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } @media only screen and (max-width: 360px) and (max-height: 800px) { .screen-deals .reward-points span { font-size: 32px; line-height: 34px; } } .screen-deals .addtocart { background-color: rgb(197, 197, 197); color: #000000; border: 3px solid #000; cursor: pointer; outline: none; position: relative; padding: 6px 57px; font-size: 16px; box-shadow: -10px 10px 0px #c48b1f; background-clip: padding-box; } .screen-deals .addtocart::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 13px); height: calc(100% - 12px); border: 2px dotted #000; pointer-events: none; z-index: 1; } .screen-deals .addtocart::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; box-shadow: inset -5px -5px 0px #ccc; pointer-events: none; z-index: 0; } .screen-deals .exhausted { margin-top: 27px; text-align: center; } .screen-deals .exhausted p { color: #fff; line-height: 17px; font-size: 15px; text-align: center; } .screen-deals .mcd-footer { flex-direction: column; gap: 20px; height: 100px; } .menu { position: relative; width: 100%; height: 100%; } .menu .header { display: flex; padding: 9px 11px; justify-content: space-between; width: calc(100% - 21px); align-items: center; } .menu .header img { width: 30px; } .menu .header .hamburger { width: 30px; height: 13px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; z-index: 1001; } .menu .header .hamburger .hamburger-line { width: 100%; height: 3px; background-color: #ffb71b; } .screen-about.screen-about-full-screen .mcd-body { height: 81%; } .screen-about .mcd-head { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 34px; line-height: 35px; letter-spacing: -0.91px; height: 13%; width: calc(100% - 55px); margin: 0 auto; flex-direction: column; text-align: left; margin-top: 15px; padding: 0 10px; justify-content: center; position: relative; } [dir=rtl] .screen-about .mcd-head { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } @media only screen and (max-width: 360px) { .screen-about .mcd-head { font-size: 30px; line-height: 34px; } } @media only screen and (min-width: 320px) and (max-width: 400px) { [dir=rtl] .screen-about .mcd-head { width: calc(100% - 55px); } } @media only screen and (min-device-width: 390px) and (min-device-height: 750px) { .screen-about .mcd-head { height: 14%; } } @media only screen and (min-width: 358px) and (max-width: 359px) { .screen-about .mcd-head { height: 20%; } } [dir=rtl] .screen-about .mcd-head { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; margin-top: 10px; } .cms-preview-ar .screen-about .mcd-head { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-about .mcd-head .p-contents { padding: 0; } .screen-about .mcd-head img { width: 12px; } .screen-about .mcd-body { height: 64%; } @media only screen and (min-device-width: 390px) and (min-device-height: 750px) { .screen-about .mcd-body { height: 64%; } } @media only screen and (min-width: 358px) and (max-width: 359px) { .screen-about .mcd-body { height: 58% !important; } } .screen-about .mcd-footer { height: 15%; width: 100%; z-index: 2; } .screen-about .mcd-head__block { display: flex; align-items: center; height: 38px; position: relative; width: 100%; } .screen-about .mcd-head__block .back-button + h3 { padding-left: 18px; } [dir=rtl] .screen-about .mcd-head__block .back-button + h3 { padding-left: 0; padding-right: 18px; } .screen-about .mcd-head__block img { width: 12px; } .screen-about .back-button { background: transparent; outline: none; border: 0; padding: 0; margin: 0; padding-right: 5px; position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: flex-start; height: 100%; width: 25px; z-index: 2; } [dir=rtl] .screen-about .back-button { padding-right: 0px; padding-left: 5px; right: 0px; left: auto; } .screen-about .back-button img { width: 12px; position: relative; top: 3px; } [dir=rtl] .screen-about .back-button img { top: 0; transform: rotate(177deg); } .screen-dashboard .mcd-main-wrapper { padding-top: 0; padding-bottom: 0; } .screen-dashboard .mcd-top-graphics { height: 53px; } .screen-dashboard .mcd-bottom-graphics { height: 17px; } .screen-dashboard .l-tooltip.l-tooltip.l-tooltip { display: none; } .screen-dashboard .mcd-head { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 28px; line-height: 28px; letter-spacing: -0.91px; height: 72px; width: 100%; margin: 0 auto; } [dir=rtl] .screen-dashboard .mcd-head { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .cms-preview-ar .screen-dashboard .mcd-head { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-dashboard .mcd-head .p-contents { padding: 0; } .screen-dashboard .mcd-head .mcd-head__wrapper { padding-top: 30px; width: 100%; } @media only screen and (min-device-width: 360px) and (min-device-height: 760px) { .screen-dashboard .mcd-head .mcd-head__wrapper { padding-top: 30px; } } .screen-dashboard .mcd-head .mcd-head__wrapper .l-relative { display: flex; align-items: center; justify-content: center; height: 38px; position: relative; width: 100%; } .screen-dashboard .mcd-head .mcd-head__wrapper .back-button { background: transparent; outline: none; border: 0; padding: 0; margin: 0; padding-right: 5px; position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: flex-start; height: 100%; width: 25px; z-index: 2; } [dir=rtl] .screen-dashboard .mcd-head .mcd-head__wrapper .back-button { left: auto; right: 0; } .screen-dashboard .mcd-head .mcd-head__wrapper .back-button img { width: 12px; height: 19px; } [dir=rtl] .screen-dashboard .mcd-head .mcd-head__wrapper .back-button img { transform: scale(-1); } .screen-dashboard .mcd-wrap-main { height: calc(100% - 150px); } .screen-dashboard .l-body-scroll { width: 100%; padding: 0; } .screen-dashboard .mcd-entries { height: 174px; display: flex; justify-content: center; align-items: center; flex-direction: column; } @media only screen and (min-device-width: 360px) and (min-device-height: 700px) { .screen-dashboard .mcd-entries { height: 192px; } } .screen-dashboard .mcd-body { height: calc(100% - 174px); flex-direction: column; overflow: hidden; justify-content: flex-start; } @media only screen and (min-device-width: 360px) and (min-device-height: 700px) { .screen-dashboard .mcd-body { height: calc(100% - 192px); } } .screen-dashboard .mcd-body__title { height: 40px; } .screen-dashboard .mcd-body__title h3 { font-size: 16px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; padding-bottom: 20px; } @media only screen and (min-device-width: 360px) and (min-device-height: 700px) { .screen-dashboard .mcd-body__title h3 { font-size: 17px; } } [dir=rtl] .screen-dashboard .mcd-body__title h3 { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-dashboard .mcd-entries__sep { height: 40px; width: 100%; position: relative; flex-shrink: 0; } .screen-dashboard .mcd-entries__sep:before { content: ""; width: 100%; height: 1px; border-top: 1px solid #2d0a0a; } .screen-dashboard .mcd-entries__title { width: 100%; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 16px; height: 40px; flex-shrink: 0; } [dir=rtl] .screen-dashboard .mcd-entries__title { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } @media only screen and (min-device-width: 360px) and (min-device-height: 700px) { .screen-dashboard .mcd-entries__title { font-size: 17px; } } .screen-dashboard .dash-raffle-panel { display: flex; gap: 15px; position: relative; width: 93%; } .screen-dashboard .dash-raffle-panel .dash-raffle-panel__block { width: 45%; height: 90px; border: 4px solid #FFD465; border-radius: 10px; overflow: hidden; } @media only screen and (min-device-width: 360px) and (min-device-height: 700px) { .screen-dashboard .dash-raffle-panel .dash-raffle-panel__block { height: 120px; } } .screen-dashboard .dash-raffle-panel .dash-raffle-panel__block span { color: #FFF59C; text-align: center; } .screen-dashboard .dash-raffle-panel .dash-raffle-panel__title { background-color: #FFD465; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 11px; color: #DF512B; line-height: 11px; text-align: center; height: 27px; padding: 2px; } [dir=rtl] .screen-dashboard .dash-raffle-panel .dash-raffle-panel__title { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-dashboard .dash-raffle-panel .dash-raffle-panel__title span { color: #DF512B; position: relative; top: 0px; } [dir=rtl] .screen-dashboard .dash-raffle-panel .dash-raffle-panel__title span { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-dashboard .dash-raffle-panel .dash-raffle-panel__entry { height: calc(100% - 29px); background-color: #DF512B; position: relative; } [dir=rtl] .screen-dashboard .dash-raffle-panel .dash-raffle-panel__entry { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; line-height: 0; } @media only screen and (max-width: 358px) and (max-height: 598px) { .screen-dashboard .dash-raffle-panel .dash-raffle-panel__entry { height: calc(100% - 31px); } } .screen-dashboard .dash-raffle-panel .dash-raffle-panel__entry span { font-size: 57px; line-height: 0; position: relative; top: -2px; display: flex; height: 40px; align-items: center; } [dir=rtl] .screen-dashboard .dash-raffle-panel .dash-raffle-panel__entry span { position: absolute; top: 50%; transform: translateY(-50%); margin-top: -3px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; line-height: 0; } @media only screen and (min-device-width: 360px) and (min-device-height: 700px) { .screen-dashboard .dash-raffle-panel .dash-raffle-panel__entry span { font-size: 77px; height: 55px; } } .screen-dashboard .dash-raffle-panel .dash-raffle-panel__day { height: calc(100% - 27px); text-transform: uppercase; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; background-color: #DF512B; } [dir=rtl] .screen-dashboard .dash-raffle-panel .dash-raffle-panel__day { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-dashboard .dash-raffle-panel .dash-raffle-panel__day div { width: 100%; } .screen-dashboard .dash-raffle-panel .dash-raffle-panel__day div:nth-child(1) { height: calc(100% - 21px); position: relative; } [dir=rtl] .screen-dashboard .dash-raffle-panel .dash-raffle-panel__day div:nth-child(1) { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; line-height: 0; } @media only screen and (min-device-width: 360px) and (min-device-height: 700px) { .screen-dashboard .dash-raffle-panel .dash-raffle-panel__day div:nth-child(1) { height: calc(100% - 27px); } } .screen-dashboard .dash-raffle-panel .dash-raffle-panel__day div:nth-child(1) span { font-size: 45px; position: relative; top: -1px; } [dir=rtl] .screen-dashboard .dash-raffle-panel .dash-raffle-panel__day div:nth-child(1) span { position: absolute; top: 50%; transform: translateY(-50%); margin-top: -1px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; line-height: 0; } @media only screen and (min-device-width: 360px) and (min-device-height: 700px) { [dir=rtl] .screen-dashboard .dash-raffle-panel .dash-raffle-panel__day div:nth-child(1) span { margin-top: -3px; } } @media only screen and (min-device-width: 360px) and (min-device-height: 700px) { .screen-dashboard .dash-raffle-panel .dash-raffle-panel__day div:nth-child(1) span { font-size: 60px; display: flex; height: 45px; align-items: center; position: relative; top: -1px; } } .screen-dashboard .dash-raffle-panel .dash-raffle-panel__day div:nth-child(2) { height: 19px; border-top: 3px solid #FFD465; padding-top: 2px; } @media only screen and (min-device-width: 360px) and (min-device-height: 700px) { .screen-dashboard .dash-raffle-panel .dash-raffle-panel__day div:nth-child(2) { height: 25px; } } [dir=rtl] .screen-dashboard .dash-raffle-panel .dash-raffle-panel__day div:nth-child(2) { padding-top: 7px; } .screen-dashboard .dash-raffle-panel .dash-raffle-panel__day div:nth-child(2) span { font-size: 10px; line-height: 17px; position: relative; top: -2px; } @media only screen and (min-device-width: 360px) and (min-device-height: 700px) { .screen-dashboard .dash-raffle-panel .dash-raffle-panel__day div:nth-child(2) span { font-size: 12px; } } .screen-dashboard .history-terms { width: 100%; height: 50px; display: flex; justify-content: center; align-items: flex-end; } .screen-dashboard .history-terms span { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 13px; color: #000; display: flex; justify-content: center; align-items: center; text-decoration: underline; } .screen-dashboard .history-terms img { width: 15px; height: 15px; margin-left: 10px; } [dir=rtl] .screen-dashboard .history-terms img { margin-left: 0px; margin-right: 10px; } .screen-dashboard .history-terms i { width: 15px; height: 15px; background: #000; border-radius: 100%; margin-left: 5px; color: #fff; font-family: "SpeedeeRegular"; font-size: 12px; line-height: 20px; font-style: normal; display: flex; justify-content: center; align-items: center; } .screen-dashboard .mcd-body__history { height: 100%; overflow: hidden; /* Grid Item Styling */ /* Dropdown styling */ } .screen-dashboard .mcd-body__history .grid-container { overflow: hidden; height: calc(100% - 2px); } .screen-dashboard .mcd-body__history .grid-row { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: auto; border-bottom: 1px solid rgba(45, 10, 10, 0.3); } .screen-dashboard .mcd-body__history .grid-row .grid-item { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .screen-dashboard .mcd-body__history .grid-row .grid-item { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-dashboard .mcd-body__history .grid-row .grid-item:nth-child(1) { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .screen-dashboard .mcd-body__history .grid-row .grid-item:nth-child(1) { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-dashboard .mcd-body__history .grid-row.dropdown-content-row { background-color: #DF512B; color: #fff; display: flex; justify-content: center; } .screen-dashboard .mcd-body__history .grid-head { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 equal columns */ width: calc(100% - 2px); text-align: left; border-radius: 10px 10px 0 0; border-top: 1px solid #2D0A0A; border-left: 1px solid #2D0A0A; border-right: 1px solid #2D0A0A; overflow: hidden; } .screen-dashboard .mcd-body__history .grid-header { background-color: #6b1b1b; color: #FFF59C; padding: 0 10px; height: 40px; display: flex; align-items: center; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 12px; text-transform: uppercase; } [dir=rtl] .screen-dashboard .mcd-body__history .grid-header { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-dashboard .mcd-body__history .grid-body { grid-template-rows: repeat(3, 1fr); max-height: calc(100% - 40px); width: calc(100% - 2px); text-align: left; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 11px; background-color: #FFFCE3; border-radius: 0px 0 10px 10px; border-bottom: 1px solid #2D0A0A; border-left: 1px solid #2D0A0A; border-right: 1px solid #2D0A0A; position: relative; top: -2px; } .screen-dashboard .mcd-body__history .grid-item { padding: 0 10px; text-align: left; height: 40px; display: flex; align-items: center; font-size: 12px; line-height: 12px; } .screen-dashboard .mcd-body__history .grid-item.dropdown { cursor: pointer; justify-content: space-between; } .screen-dashboard .mcd-body__history .grid-item.dropdown span { color: #5b0e06; } .screen-dashboard .mcd-body__history .grid-item.dropdown.active span { transform: scale(-1); } .screen-dashboard .mcd-body__history .grid-content { display: flex; width: 80%; flex-direction: row; gap: 10px; justify-content: center; } .screen-dashboard .mcd-body__history .grid-content div, .screen-dashboard .mcd-body__history .grid-content a { display: flex; align-items: center; cursor: pointer; } .screen-dashboard .mcd-body__history .grid-content .copy-btn { position: relative; } .screen-dashboard .mcd-body__history .grid-content .copy-btn img { width: 15px; } .screen-dashboard .mcd-body__history .grid-content .copy-btn.active .l-tooltip { display: block; } .screen-dashboard .mcd-body__history .grid-content .link img { width: 18px; } .screen-dashboard .mcd-body__history .voucher-code { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 18px; } [dir=rtl] .screen-dashboard .mcd-body__history .voucher-code { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; direction: ltr; } .screen-dashboard .mcd-body__history .dropdown-content { display: none; background-color: #c64040; color: white; padding: 15px; text-align: center; margin-top: 10px; border-radius: 5px; } .screen-dashboard .mcd-body__history .dropdown-content img { margin-left: 10px; vertical-align: middle; } .screen-dashboard .mcd-body__history .show-dropdown .dropdown-content { display: block; } .screen-dashboard.screen-dashboard-no-raffle .mcd-entries { display: none; } .screen-dashboard.screen-dashboard-no-raffle .mcd-wrap-main { height: calc(100% - 60px); } .screen-dashboard.screen-dashboard-no-raffle .mcd-body { height: 100%; } .screen-dashboard.screen-dashboard-no-history .mcd-body { height: 100%; width: 100%; } .screen-dashboard.screen-dashboard-no-history .back-button { display: none; } .screen-dashboard.screen-dashboard-no-history .no-history-content p { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 16px; line-height: 20px; } [dir=rtl] .screen-dashboard.screen-dashboard-no-history .no-history-content p { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } /* Intro Slides Container */ /* Intro Slides Container */ .intro-screen .logo { width: 45px; } .intro-screen .intro-slider-overflow { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 100%; padding-bottom: 30px; overflow-y: auto; align-items: center; } .intro-screen .intro-swiper-container { width: 93%; position: relative; overflow: hidden; display: flex; flex-direction: column; box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); background-color: #fff; height: 100%; } [dir=rtl] .intro-screen .intro-swiper-container { box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); } .intro-screen .intro-swiper-container .swiper-wrapper { flex: 1; /* Takes remaining space */ } .intro-screen .intro-swiper-container .swiper-slide { height: calc(100% - 0px); display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: center; box-sizing: border-box; position: relative; } .intro-screen .intro-swiper-container .swiper-slide .slide-scroll { height: calc(100% - 168px); overflow-y: scroll; } .intro-screen .intro-swiper-container .swiper-slide .slide-content { max-width: 800px; margin: 0 auto; text-align: left; padding: 12px; height: 100%; display: flex; flex-direction: column; /* Keep your existing slide content styles */ } [dir=rtl] .intro-screen .intro-swiper-container .swiper-slide .slide-content { text-align: right; padding-right: 18px; } .intro-screen .intro-swiper-container .swiper-slide .slide-content .folder { width: 28px; } .intro-screen .intro-swiper-container .swiper-slide .slide-content.text-center { text-align: center; align-items: center; } .intro-screen .intro-swiper-container .swiper-slide .slide-content h1 { font-size: 65px; line-height: 67px; margin-bottom: 20px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .intro-screen .intro-swiper-container .swiper-slide .slide-content h1 { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } @media only screen and (max-width: 390px) and (max-height: 850px) { .intro-screen .intro-swiper-container .swiper-slide .slide-content h1 { font-size: 40px; line-height: 42px; } } .intro-screen .intro-swiper-container .swiper-slide .slide-content .readyreap { text-align: left; } [dir=rtl] .intro-screen .intro-swiper-container .swiper-slide .slide-content .readyreap { text-align: right; } .intro-screen .intro-swiper-container .swiper-slide .slide-content .readyreap img { width: 100%; margin-bottom: 10px; } @media only screen and (max-width: 390px) and (max-height: 850px) { .intro-screen .intro-swiper-container .swiper-slide .slide-content .readyreap img { width: 100%; } } .intro-screen .intro-swiper-container .swiper-slide .slide-content .slide-text { font-size: 24px; line-height: 26px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .intro-screen .intro-swiper-container .swiper-slide .slide-content .slide-text { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } @media only screen and (max-width: 390px) and (max-height: 850px) { .intro-screen .intro-swiper-container .swiper-slide .slide-content .slide-text { font-size: 20px; line-height: 22px; } } .intro-screen .intro-swiper-container .swiper-slide .slide-content p { font-size: 24px; line-height: 26px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .intro-screen .intro-swiper-container .swiper-slide .slide-content p { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } @media only screen and (max-width: 390px) and (max-height: 850px) { .intro-screen .intro-swiper-container .swiper-slide .slide-content p { font-size: 20px; line-height: 22px; } } .intro-screen .intro-swiper-container .swiper-slide .slide-content .icons { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 17px; margin-bottom: 20px; } .intro-screen .intro-swiper-container .swiper-slide .slide-content .icons img { width: 29%; } .intro-screen .intro-swiper-container .swiper-slide .slide-content .cta-container { display: flex; justify-content: space-between; width: 100%; max-width: 800px; margin-top: 2rem; } .intro-screen .intro-swiper-container .swiper-slide .slide-content .cta { padding: 6px 25px; border: none; line-height: 18px; font-size: 16px; cursor: pointer; transition: all 0.3s ease; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .intro-screen .intro-swiper-container .swiper-slide .slide-content .cta { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .intro-screen .intro-swiper-container .swiper-slide .slide-content .skip { background: rgba(197, 197, 197, 0.168627451); color: #000000; border: 1px solid #000; } .intro-screen .intro-swiper-container .swiper-slide .slide-content .next { background: rgba(197, 197, 197, 0.168627451); color: #000000; border: 1px solid #000; } .intro-screen .intro-swiper-container .swiper-slide .slide-content .next:hover { background: rgba(197, 197, 197, 0.168627451); } .intro-screen .intro-swiper-container .swiper-slide .slide-content .skip:hover { background: rgba(197, 197, 197, 0.168627451); } .intro-screen .intro-swiper-container .swiper-slide .slide-content .text-center { text-align: center; } .intro-screen .intro-swiper-container .swiper-pagination { position: relative; margin: 0; z-index: 10; } .intro-screen .intro-swiper-container .swiper-pagination-bullet { width: 12px; height: 12px; border-radius: 0px; cursor: pointer; transition: all 0.3s; opacity: 1; background-color: red; border: 1px solid red; } .intro-screen .intro-swiper-container .swiper-pagination-bullet-active { background: white; border: 1px solid red; transform: scale(1.2); } .intro-screen .intro-swiper-container .global-cta-container { display: flex; justify-content: space-between; width: 90%; max-width: 800px; margin: 0 auto; padding: 0 0px 20px; z-index: 10; position: absolute; bottom: 0px; left: 0; right: 0; } .intro-screen .intro-swiper-container .global-cta-container .cta { border: none; line-height: 18px; font-size: 16px; cursor: pointer; transition: all 0.3s ease; position: relative; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .intro-screen .intro-swiper-container .global-cta-container .cta { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .intro-screen .intro-swiper-container .global-cta-container .cta.skip { background: rgba(197, 197, 197, 0.168627451); color: #000000; border: 3px solid #000; cursor: pointer; box-shadow: -8px 8px 0px #ccc; outline: none; width: 82px; height: 42px; } .intro-screen .intro-swiper-container .global-cta-container .cta.skip::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 13px); height: calc(100% - 13px); border: 2px dotted #000; pointer-events: none; } .intro-screen .intro-swiper-container .global-cta-container .cta.skip::after { content: ""; position: absolute; top: 1px; left: 0px; width: calc(100% - 0px); height: calc(100% - 1px); box-shadow: inset -5px -5px 0px #ccc; pointer-events: none; } .intro-screen .intro-swiper-container .global-cta-container .cta.next { background: rgba(197, 197, 197, 0.168627451); color: #000000; border: 3px solid #000; cursor: pointer; box-shadow: -8px 8px 0px #ccc; outline: none; width: 82px; height: 42px; } .intro-screen .intro-swiper-container .global-cta-container .cta.next::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 13px); height: calc(100% - 13px); border: 2px dotted #000; pointer-events: none; } .intro-screen .intro-swiper-container .global-cta-container .cta.next::after { content: ""; position: absolute; top: 1px; left: 0px; width: calc(100% - 0px); height: calc(100% - 1px); box-shadow: inset -5px -5px 0px #ccc; pointer-events: none; } .intro-screen .intro-swiper-container .global-cta-container .cta.go-to-planet { background: rgba(197, 197, 197, 0.168627451); color: #000000; border: 3px solid #000; cursor: pointer; box-shadow: -8px 8px 0px #ccc; outline: none; width: 182px; height: 42px; } .intro-screen .intro-swiper-container .global-cta-container .cta.go-to-planet::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 13px); height: calc(100% - 13px); border: 2px dotted #000; pointer-events: none; } .intro-screen .intro-swiper-container .global-cta-container .cta.go-to-planet::after { content: ""; position: absolute; top: 1px; left: 0px; width: calc(100% - 0px); height: calc(100% - 1px); box-shadow: inset -5px -5px 0px #ccc; pointer-events: none; } .intro-screen .intro-swiper-container .global-cta-container .cta.next:hover { background: rgba(197, 197, 197, 0.168627451); } .intro-screen .intro-swiper-container .global-cta-container .cta.skip:hover { background: rgba(197, 197, 197, 0.168627451); } .intro-screen .intro-swiper-container .mauto { margin: 0 auto; } .intro-screen .intro-swiper-container .top-bar { width: 100%; display: flex; flex-direction: row; font-size: 13px; gap: 12px; height: 24px; align-items: center; margin-top: 1px; margin-left: -6px; } .intro-screen .intro-swiper-container .top-bar div { font-size: 12px; line-height: 14px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .intro-screen .intro-swiper-container .submenu { width: calc(100% + 1px); height: 30px; display: flex; flex-direction: row-reverse; align-items: center; padding-right: 10px; } [dir=rtl] .intro-screen .intro-swiper-container .submenu { padding-left: 10px; padding-right: 0px; } .intro-screen .intro-swiper-container .submenu div { width: 12px; height: 12px; border: 2px solid #fff; } .tokyo-screen .tokyo-wrapper { height: 100%; } .tokyo-screen .logo { width: 45px; } .tokyo-screen .pagination { padding-bottom: 0; } .tokyo-screen .tokyo-block { width: 81%; height: 65%; flex-shrink: 0; } .tokyo-screen .tokyo-panel { text-align: left; overflow: hidden; } [dir=rtl] .tokyo-screen .tokyo-panel { text-align: right; } .tokyo-screen .tokyo-bottom-image { width: 100%; height: 100px; flex: 1 1 auto; } .tokyo-screen .slide-content__block { flex: 1 1 auto; } .tokyo-screen .l-window__bar { flex-shrink: 0; } .tokyo-screen .l-window.l-window--full-height .l-window__content { height: calc(100% - 48px); } .rewarddetail-screen .tokyo-wrapper { height: 100%; } .rewarddetail-screen .logo { width: 45px; } .rewarddetail-screen .pagination { padding-bottom: 0; } .rewarddetail-screen .tokyo-block { width: 81%; height: 61%; flex-shrink: 0; } .rewarddetail-screen .tokyo-panel { text-align: left; overflow: hidden; } [dir=rtl] .rewarddetail-screen .tokyo-panel { text-align: right; } .rewarddetail-screen .tokyo-bottom-image { width: 100%; height: 18%; flex: 1 1 auto; } .rewarddetail-screen .tokyo-top-image { width: 100%; height: 18%; flex: 1 1 auto; } .rewarddetail-screen .slide-content__block { flex: 1 1 auto; } .rewarddetail-screen .l-window__bar { flex-shrink: 0; } .rewarddetail-screen .l-window.l-window--full-height .l-window__content { height: calc(100% - 48px); } .rewarddetail-screen .l-wrapper-btm { width: 90%; } .rewarddetail-screen h1 { font-size: 65px; line-height: 67px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .rewarddetail-screen h1 { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } @media only screen and (max-width: 390px) and (max-height: 850px) { .rewarddetail-screen h1 { font-size: 40px; line-height: 42px; } } /* TNC */ .screen-tnc .tnc-overflow { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 100%; margin-bottom: 11px; overflow-y: auto; padding-bottom: 30px; align-items: center; } .screen-tnc .tnc-container { width: 93%; position: relative; overflow: hidden; box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); background-color: #fff; height: 100%; } [dir=rtl] .screen-tnc .tnc-container { box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); } .screen-tnc .tnc-container .swiper-slide { height: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: center; box-sizing: border-box; position: relative; height: 100%; } .screen-tnc .tnc-container .swiper-slide .slide-content { max-width: 800px; margin: 0 auto; text-align: left; padding: 12px; height: calc(100% - 124px); display: flex; flex-direction: column; } [dir=rtl] .screen-tnc .tnc-container .swiper-slide .slide-content { text-align: right; } .screen-tnc .tnc-container .swiper-slide .slide-content h1 { font-size: 65px; line-height: 67px; margin-bottom: 20px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .screen-tnc .tnc-container .swiper-slide .slide-content h1 { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .screen-tnc .tnc-container .swiper-slide .slide-content .content { height: calc(100% - 141px); overflow-y: auto; } .screen-tnc .tnc-container .swiper-slide .slide-content.text-center { text-align: center; align-items: center; } .screen-tnc .tnc-container .swiper-slide .slide-content .slide-text { font-size: 18px; line-height: 20px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; } [dir=rtl] .screen-tnc .tnc-container .swiper-slide .slide-content .slide-text { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .screen-tnc .tnc-container .swiper-slide .slide-content p { font-size: 18px; line-height: 20px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; } [dir=rtl] .screen-tnc .tnc-container .swiper-slide .slide-content p { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .screen-tnc .tnc-container .global-cta-container { display: flex; justify-content: space-between; width: 90%; max-width: 800px; margin: 0 auto; padding: 0 0px 20px; z-index: 10; position: relative; } .screen-tnc .tnc-container .global-cta-container .cta { border: none; line-height: 18px; font-size: 16px; cursor: pointer; transition: all 0.3s ease; position: relative; width: 100px; height: 50px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; } [dir=rtl] .screen-tnc .tnc-container .global-cta-container .cta { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-tnc .tnc-container .global-cta-container .cta.skip { background-color: #f5f7f8; font-size: 16px; color: #000000; border: 3px solid #000; cursor: pointer; box-shadow: -8px 8px 0px #ccc; outline: none; } .screen-tnc .tnc-container .global-cta-container .cta.skip::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 6px); height: calc(100% - 10px); border: 2px dotted #000; pointer-events: none; } .screen-tnc .tnc-container .global-cta-container .cta.skip::after { content: ""; position: absolute; top: 1px; left: 0px; width: calc(100% - 0px); height: calc(100% - 1px); box-shadow: inset -5px -5px 0px #ccc; pointer-events: none; } .screen-tnc .tnc-container .global-cta-container .cta.next { background-color: #f5f7f8; font-size: 16px; color: #000000; border: 3px solid #000; cursor: pointer; box-shadow: -8px 8px 0px #ccc; outline: none; } .screen-tnc .tnc-container .global-cta-container .cta.next::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 11px); height: calc(100% - 10px); border: 2px dotted #000; pointer-events: none; } .screen-tnc .tnc-container .global-cta-container .cta.next::after { content: ""; position: absolute; top: 1px; left: 0px; width: calc(100% - 0px); height: calc(100% - 1px); box-shadow: inset -5px -5px 0px #ccc; pointer-events: none; } .screen-tnc .tnc-container .global-cta-container .cta.next:hover { background: rgba(197, 197, 197, 0.168627451); } .screen-tnc .tnc-container .global-cta-container .cta.skip:hover { background: rgba(197, 197, 197, 0.168627451); } .screen-tnc .tnc-container .mauto { margin: 0 auto; } .screen-tnc .tnc-container .top-bar { width: 100%; display: flex; flex-direction: row; font-size: 13px; gap: 12px; height: 25px; } .screen-tnc .tnc-container .top-bar div { font-size: 12px; line-height: 14px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-tnc .tnc-container .submenu { height: 30px; display: flex; flex-direction: row-reverse; align-items: center; padding-right: 10px; } [dir=rtl] .screen-tnc .tnc-container .submenu { padding-left: 10px; padding-right: 0px; } .screen-tnc .tnc-container .submenu div { width: 8px; height: 8px; border: 2px solid #fff; } /* how it works */ .screen-howitworks .howitworks-overflow { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 100%; margin-bottom: 11px; overflow-y: auto; padding-bottom: 30px; align-items: center; } .screen-howitworks .howitworks-container { width: 93%; position: relative; overflow: hidden; box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); background-color: #ebebeb; height: 100%; } [dir=rtl] .screen-howitworks .howitworks-container { box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); } .screen-howitworks .howitworks-container .swiper-slide { height: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: center; box-sizing: border-box; position: relative; height: 100%; } .screen-howitworks .howitworks-container .swiper-slide .slide-content { max-width: 800px; margin: 0 auto; text-align: left; padding: 12px; height: calc(100% - 124px); display: flex; flex-direction: column; } .screen-howitworks .howitworks-container .swiper-slide .slide-content .border { width: 100%; margin-bottom: 20px; margin-top: -10px; } .screen-howitworks .howitworks-container .swiper-slide .slide-content .border img { width: 100%; } .screen-howitworks .howitworks-container .swiper-slide .slide-content h1 { font-size: 65px; line-height: 67px; margin-bottom: 20px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .screen-howitworks .howitworks-container .swiper-slide .slide-content h1 { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .screen-howitworks .howitworks-container .swiper-slide .slide-content .content { height: calc(100% - 141px); overflow-y: auto; } .screen-howitworks .howitworks-container .swiper-slide .slide-content .content h4 { font-size: 26px; line-height: 28px; margin-bottom: 10px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; } [dir=rtl] .screen-howitworks .howitworks-container .swiper-slide .slide-content .content h4 { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .screen-howitworks .howitworks-container .swiper-slide .slide-content.text-center { text-align: center; align-items: center; } .screen-howitworks .howitworks-container .swiper-slide .slide-content .slide-text { font-size: 18px; line-height: 20px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; } [dir=rtl] .screen-howitworks .howitworks-container .swiper-slide .slide-content .slide-text { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .screen-howitworks .howitworks-container .swiper-slide .slide-content p { font-size: 18px; line-height: 20px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; } [dir=rtl] .screen-howitworks .howitworks-container .swiper-slide .slide-content p { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .screen-howitworks .howitworks-container .global-cta-container { display: flex; justify-content: center; width: 90%; max-width: 800px; margin: 0 auto; padding: 0 0px 20px; z-index: 10; position: relative; } .screen-howitworks .howitworks-container .global-cta-container .cta { width: 100px; height: 50px; border: none; line-height: 18px; font-size: 16px; cursor: pointer; transition: all 0.3s ease; position: relative; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; } .screen-howitworks .howitworks-container .global-cta-container .cta.skip { color: #000000; border: 3px solid #000; cursor: pointer; box-shadow: -8px 8px 0px #ccc; outline: none; background-color: #f5f7f8; font-size: 16px; } .screen-howitworks .howitworks-container .global-cta-container .cta.skip::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 6px); height: calc(100% - 10px); border: 2px dotted #000; pointer-events: none; } .screen-howitworks .howitworks-container .global-cta-container .cta.skip::after { content: ""; position: absolute; top: 1px; left: 0px; width: calc(100% - 0px); height: calc(100% - 1px); box-shadow: inset -5px -5px 0px #ccc; pointer-events: none; } .screen-howitworks .howitworks-container .global-cta-container .cta.next { background: rgba(197, 197, 197, 0.168627451); color: #000000; border: 3px solid #000; cursor: pointer; box-shadow: -8px 8px 0px #ccc; outline: none; } .screen-howitworks .howitworks-container .global-cta-container .cta.next::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 11px); height: calc(100% - 10px); border: 2px dotted #000; pointer-events: none; } .screen-howitworks .howitworks-container .global-cta-container .cta.next::after { content: ""; position: absolute; top: 1px; left: 0px; width: calc(100% - 0px); height: calc(100% - 1px); box-shadow: inset -5px -5px 0px #ccc; pointer-events: none; } .screen-howitworks .howitworks-container .global-cta-container .cta.next:hover { background: rgba(197, 197, 197, 0.168627451); } .screen-howitworks .howitworks-container .global-cta-container .cta.skip:hover { background: rgba(197, 197, 197, 0.168627451); } .screen-howitworks .howitworks-container .mauto { margin: 0 auto; } .screen-howitworks .howitworks-container .top-bar { width: 100%; display: flex; flex-direction: row; font-size: 13px; gap: 12px; height: 25px; align-items: center; } .screen-howitworks .howitworks-container .top-bar div { font-size: 12px; line-height: 14px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-howitworks .howitworks-container .submenu { height: 30px; display: flex; flex-direction: row-reverse; align-items: center; padding-right: 10px; } [dir=rtl] .screen-howitworks .howitworks-container .submenu { padding-right: 0px; padding-left: 10px; } .screen-howitworks .howitworks-container .submenu div { width: 8px; height: 8px; border: 2px solid #fff; } /*--About screen--*/ .screen-about .about-overflow { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 100%; margin-bottom: 11px; overflow-y: auto; padding-bottom: 30px; align-items: center; } .screen-about .about-container { width: 93%; position: relative; overflow: hidden; box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); background-color: #ebebeb; height: 100%; } [dir=rtl] .screen-about .about-container { box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); } .screen-about .about-container .swiper-slide { height: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: center; box-sizing: border-box; position: relative; height: 100%; } .screen-about .about-container .swiper-slide .slide-content { max-width: 800px; margin: 0 auto; text-align: left; padding: 12px; height: calc(100% - 124px); display: flex; flex-direction: column; } .screen-about .about-container .swiper-slide .slide-content .border { width: 100%; margin-bottom: 20px; margin-top: -10px; } .screen-about .about-container .swiper-slide .slide-content .border img { width: 100%; } .screen-about .about-container .swiper-slide .slide-content h1 { font-size: 65px; line-height: 67px; margin-bottom: 20px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .screen-about .about-container .swiper-slide .slide-content h1 { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .screen-about .about-container .swiper-slide .slide-content .content { height: calc(100% - 141px); overflow-y: auto; } .screen-about .about-container .swiper-slide .slide-content.text-center { text-align: center; align-items: center; } .screen-about .about-container .swiper-slide .slide-content .slide-text { font-size: 18px; line-height: 20px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; } [dir=rtl] .screen-about .about-container .swiper-slide .slide-content .slide-text { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .screen-about .about-container .swiper-slide .slide-content p { font-size: 18px; line-height: 20px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; } [dir=rtl] .screen-about .about-container .swiper-slide .slide-content p { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .screen-about .about-container .global-cta-container { display: flex; justify-content: center; width: 90%; max-width: 800px; margin: 0 auto; padding: 0 0px 20px; z-index: 10; position: relative; } .screen-about .about-container .global-cta-container .cta { border: none; line-height: 18px; font-size: 16px; cursor: pointer; transition: all 0.3s ease; position: relative; width: 100px; height: 50px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; } .screen-about .about-container .global-cta-container .cta.skip { color: #000000; border: 3px solid #000; cursor: pointer; box-shadow: -8px 8px 0px #ccc; outline: none; background-color: #f5f7f8; } .screen-about .about-container .global-cta-container .cta.skip::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 6px); height: calc(100% - 10px); border: 2px dotted #000; pointer-events: none; } .screen-about .about-container .global-cta-container .cta.skip::after { content: ""; position: absolute; top: 1px; left: 0px; width: calc(100% - 0px); height: calc(100% - 1px); box-shadow: inset -5px -5px 0px #ccc; pointer-events: none; } .screen-about .about-container .global-cta-container .cta.next { background: rgba(197, 197, 197, 0.168627451); color: #000000; border: 3px solid #000; cursor: pointer; box-shadow: -8px 8px 0px #ccc; outline: none; } .screen-about .about-container .global-cta-container .cta.next::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 11px); height: calc(100% - 10px); border: 2px dotted #000; pointer-events: none; } .screen-about .about-container .global-cta-container .cta.next::after { content: ""; position: absolute; top: 1px; left: 0px; width: calc(100% - 0px); height: calc(100% - 1px); box-shadow: inset -5px -5px 0px #ccc; pointer-events: none; } .screen-about .about-container .global-cta-container .cta.next:hover { background: rgba(197, 197, 197, 0.168627451); } .screen-about .about-container .global-cta-container .cta.skip:hover { background: rgba(197, 197, 197, 0.168627451); } .screen-about .about-container .mauto { margin: 0 auto; } .screen-about .about-container .top-bar { width: 100%; display: flex; flex-direction: row; font-size: 13px; gap: 12px; height: 25px; align-items: center; } .screen-about .about-container .top-bar div { font-size: 12px; line-height: 14px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-about .about-container .submenu { height: 30px; display: flex; flex-direction: row-reverse; align-items: center; padding-right: 10px; } [dir=rtl] .screen-about .about-container .submenu { padding-right: 0px; padding-left: 10px; } .screen-about .about-container .submenu div { width: 8px; height: 8px; border: 2px solid #fff; } /*--Claim history--*/ .screen-claimhistory .claimhistory-overflow { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 100%; margin-bottom: 11px; overflow-y: auto; padding-bottom: 30px; align-items: center; } .screen-claimhistory .claimhistory-container { width: 93%; position: relative; overflow: hidden; box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); background-color: #ebebeb; height: 100%; } [dir=rtl] .screen-claimhistory .claimhistory-container { box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); } .screen-claimhistory .claimhistory-container .swiper-slide { height: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: center; box-sizing: border-box; position: relative; height: 100%; } .screen-claimhistory .claimhistory-container .swiper-slide .slide-content { max-width: 800px; margin: 0 auto; text-align: left; padding: 12px; height: 100%; overflow-y: auto; } .screen-claimhistory .claimhistory-container .swiper-slide .slide-content .description { margin-bottom: 15px; } .screen-claimhistory .claimhistory-container .swiper-slide .slide-content .description p { font-size: 28px; line-height: 30px; color: #000; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .screen-claimhistory .claimhistory-container .swiper-slide .slide-content .description p { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .screen-claimhistory .claimhistory-container .swiper-slide .slide-content .border { width: 100%; margin-bottom: 20px; margin-top: -10px; } .screen-claimhistory .claimhistory-container .swiper-slide .slide-content .border img { width: 100%; } .screen-claimhistory .claimhistory-container .swiper-slide .slide-content h1 { font-size: 65px; line-height: 67px; margin-bottom: 20px; color: #000; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .screen-claimhistory .claimhistory-container .swiper-slide .slide-content h1 { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .screen-claimhistory .claimhistory-container .swiper-slide .slide-content .content { height: calc(100% - 141px); overflow-y: auto; } .screen-claimhistory .claimhistory-container .swiper-slide .slide-content.text-center { text-align: center; align-items: center; } .screen-claimhistory .claimhistory-container .swiper-slide .slide-content .slide-text { font-size: 18px; line-height: 20px; color: #000; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .screen-claimhistory .claimhistory-container .swiper-slide .slide-content .slide-text { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .screen-claimhistory .claimhistory-container .raffle h2 { font-size: 28px; line-height: 30px; color: #000; text-transform: uppercase; } [dir=rtl] .screen-claimhistory .claimhistory-container .raffle h2 { text-align: right; } .screen-claimhistory .claimhistory-container .raffle .raffle-block { display: flex; width: 95%; flex-direction: row; gap: 30px; margin-bottom: 30px; margin-top: 10px; margin-left: 5px; } .screen-claimhistory .claimhistory-container .raffle .raffle-block h2 { font-size: 28px; line-height: 30px; color: #000; } [dir=rtl] .screen-claimhistory .claimhistory-container .raffle .raffle-block h2 { text-align: right; } .screen-claimhistory .claimhistory-container .raffle .raffle-block .left { width: 50%; background-color: #fff; border: 1px solid #000; padding: 10px; display: flex; align-items: center; padding-left: 10px; box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); gap: 25px; } [dir=rtl] .screen-claimhistory .claimhistory-container .raffle .raffle-block .left { box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); } .screen-claimhistory .claimhistory-container .raffle .raffle-block .left .left-content p { font-size: 14px; line-height: 16px; color: #000; } [dir=rtl] .screen-claimhistory .claimhistory-container .raffle .raffle-block .left .left-content p { text-align: right; } .screen-claimhistory .claimhistory-container .raffle .raffle-block .left .left-count p { font-size: 26px; line-height: 28px; color: #000; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .screen-claimhistory .claimhistory-container .raffle .raffle-block .left .left-count p { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .screen-claimhistory .claimhistory-container .raffle .raffle-block .right { width: 50%; background-color: #fff; border: 1px solid #000; padding: 10px; display: flex; align-items: center; padding-left: 10px; box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); } [dir=rtl] .screen-claimhistory .claimhistory-container .raffle .raffle-block .right { box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); } .screen-claimhistory .claimhistory-container .raffle .raffle-block .right .right-content p { font-size: 14px; line-height: 16px; color: #000; margin-bottom: 2px; } [dir=rtl] .screen-claimhistory .claimhistory-container .raffle .raffle-block .right .right-content p { text-align: right; } .screen-claimhistory .claimhistory-container .raffle .raffle-block .right .right-date p { font-size: 18px; line-height: 20px; color: #000; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .screen-claimhistory .claimhistory-container .raffle .raffle-block .right .right-date p { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .screen-claimhistory .claimhistory-container .global-cta-container { display: flex; justify-content: center; width: 90%; max-width: 800px; margin: 0 auto; padding: 0 0px 20px; z-index: 10; position: relative; margin-bottom: 15px; } .screen-claimhistory .claimhistory-container .global-cta-container .cta { width: 100px; height: 50px; border: none; line-height: 18px; font-size: 16px; cursor: pointer; transition: all 0.3s ease; position: relative; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; } .screen-claimhistory .claimhistory-container .global-cta-container .cta.skip { color: #000000; border: 3px solid #000; cursor: pointer; box-shadow: -8px 8px 0px #ccc; outline: none; background-color: #f5f7f8; font-size: 16px; } .screen-claimhistory .claimhistory-container .global-cta-container .cta.skip::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 6px); height: calc(100% - 10px); border: 2px dotted #000; pointer-events: none; } .screen-claimhistory .claimhistory-container .global-cta-container .cta.skip::after { content: ""; position: absolute; top: 1px; left: 0px; width: calc(100% - 0px); height: calc(100% - 1px); box-shadow: inset -5px -5px 0px #ccc; pointer-events: none; } .screen-claimhistory .claimhistory-container .global-cta-container .cta.next { background: rgba(197, 197, 197, 0.168627451); color: #000000; border: 3px solid #000; cursor: pointer; box-shadow: -8px 8px 0px #ccc; outline: none; } .screen-claimhistory .claimhistory-container .global-cta-container .cta.next::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 11px); height: calc(100% - 10px); border: 2px dotted #000; pointer-events: none; } .screen-claimhistory .claimhistory-container .global-cta-container .cta.next::after { content: ""; position: absolute; top: 1px; left: 0px; width: calc(100% - 0px); height: calc(100% - 1px); box-shadow: inset -5px -5px 0px #ccc; pointer-events: none; } .screen-claimhistory .claimhistory-container .global-cta-container .cta.next:hover { background: rgba(197, 197, 197, 0.168627451); } .screen-claimhistory .claimhistory-container .global-cta-container .cta.skip:hover { background: rgba(197, 197, 197, 0.168627451); } .screen-claimhistory .claimhistory-container .mcd-body__title { width: 94%; margin: 0 auto; margin-bottom: 10px; } .screen-claimhistory .claimhistory-container .mcd-body__title img { margin-bottom: 20px; width: 100%; } .screen-claimhistory .claimhistory-container .mcd-body__title h3 { font-size: 28px; line-height: 30px; color: #000; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; } [dir=rtl] .screen-claimhistory .claimhistory-container .mcd-body__title h3 { text-align: right; } .screen-claimhistory .claimhistory-container .mcd-body__title p { font-size: 18px; line-height: 20px; color: #000; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; margin-top: 1px; } [dir=rtl] .screen-claimhistory .claimhistory-container .mcd-body__title p { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .screen-claimhistory .claimhistory-container .mcd-body__history { background-color: #fff; margin-bottom: 25px; /* Grid Item Styling */ /* Dropdown styling */ } .screen-claimhistory .claimhistory-container .mcd-body__history .grid-container { border: 2px solid #000; } .screen-claimhistory .claimhistory-container .mcd-body__history .grid-container .separator { width: 94%; margin: 0 auto; } .screen-claimhistory .claimhistory-container .mcd-body__history .grid-container .separator img { width: 100%; display: block; } .screen-claimhistory .claimhistory-container .mcd-body__history .grid-row { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: auto; } .screen-claimhistory .claimhistory-container .mcd-body__history .grid-row .align-right { justify-content: flex-end; text-align: right; } [dir=rtl] .screen-claimhistory .claimhistory-container .mcd-body__history .grid-row .align-right { text-align: left; } .screen-claimhistory .claimhistory-container .mcd-body__history .grid-row .grid-item { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .screen-claimhistory .claimhistory-container .mcd-body__history .grid-row .grid-item { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-claimhistory .claimhistory-container .mcd-body__history .grid-row .grid-item:nth-child(1) { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .screen-claimhistory .claimhistory-container .mcd-body__history .grid-row .grid-item:nth-child(1) { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-claimhistory .claimhistory-container .mcd-body__history .grid-row.dropdown-content-row { background-color: #DF512B; color: #fff; display: flex; justify-content: center; } .screen-claimhistory .claimhistory-container .mcd-body__history .grid-head { display: grid; grid-template-columns: repeat(3, 1fr); width: calc(100% - 2px); text-align: left; background-color: #fff; } .screen-claimhistory .claimhistory-container .mcd-body__history .grid-head .align-right { justify-content: flex-end; text-align: right; } [dir=rtl] .screen-claimhistory .claimhistory-container .mcd-body__history .grid-head .align-right { text-align: left; } .screen-claimhistory .claimhistory-container .mcd-body__history .grid-header { background-color: #fff; color: #000; padding: 0 10px; height: 40px; display: flex; align-items: center; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 18px; line-height: 20px; text-transform: uppercase; } [dir=rtl] .screen-claimhistory .claimhistory-container .mcd-body__history .grid-header { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-claimhistory .claimhistory-container .mcd-body__history .grid-body { grid-template-rows: repeat(3, 1fr); width: calc(100% - 2px); text-align: left; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 11px; color: #000; position: relative; top: -2px; background-color: #fff; margin-bottom: 10px; } .screen-claimhistory .claimhistory-container .mcd-body__history .grid-body .separator { width: 94%; margin: 0 auto; } .screen-claimhistory .claimhistory-container .mcd-body__history .grid-body .separator img { width: 100%; display: block; opacity: 0.6; } .screen-claimhistory .claimhistory-container .mcd-body__history .grid-item { padding: 0 10px; text-align: left; display: flex; align-items: center; font-size: 18px; line-height: 20px; text-transform: uppercase; overflow-wrap: break-word; word-wrap: break-word; } .screen-claimhistory .claimhistory-container .mcd-body__history .grid-item.dropdown { cursor: pointer; justify-content: space-between; } .screen-claimhistory .claimhistory-container .mcd-body__history .grid-item.dropdown span { color: #5b0e06; } .screen-claimhistory .claimhistory-container .mcd-body__history .grid-item.dropdown.active span { transform: scale(-1); } .screen-claimhistory .claimhistory-container .mcd-body__history .grid-content { display: flex; width: 80%; flex-direction: row; gap: 10px; justify-content: center; } .screen-claimhistory .claimhistory-container .mcd-body__history .grid-content div, .screen-claimhistory .claimhistory-container .mcd-body__history .grid-content a { display: flex; align-items: center; cursor: pointer; } .screen-claimhistory .claimhistory-container .mcd-body__history .grid-content .copy-btn { position: relative; } .screen-claimhistory .claimhistory-container .mcd-body__history .grid-content .copy-btn img { width: 15px; } .screen-claimhistory .claimhistory-container .mcd-body__history .grid-content .copy-btn.active .l-tooltip { display: block; } .screen-claimhistory .claimhistory-container .mcd-body__history .grid-content .link img { width: 18px; } .screen-claimhistory .claimhistory-container .mcd-body__history .voucher-code { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 18px; } [dir=rtl] .screen-claimhistory .claimhistory-container .mcd-body__history .voucher-code { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; direction: ltr; } .screen-claimhistory .claimhistory-container .mcd-body__history .dropdown-content { display: none; background-color: #c64040; color: white; padding: 15px; text-align: center; margin-top: 10px; border-radius: 5px; } .screen-claimhistory .claimhistory-container .mcd-body__history .dropdown-content img { margin-left: 10px; vertical-align: middle; } .screen-claimhistory .claimhistory-container .mcd-body__history .show-dropdown .dropdown-content { display: block; } .screen-claimhistory .claimhistory-container .mauto { margin: 0 auto; } .screen-claimhistory .claimhistory-container .top-bar { width: 100%; display: flex; flex-direction: row; font-size: 13px; gap: 12px; height: 25px; align-items: center; } .screen-claimhistory .claimhistory-container .top-bar div { font-size: 12px; line-height: 14px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; color: #000; } .screen-claimhistory .claimhistory-container .submenu { height: 30px; display: flex; flex-direction: row-reverse; align-items: center; padding-right: 10px; } [dir=rtl] .screen-claimhistory .claimhistory-container .submenu { padding-right: 0px; padding-left: 10px; } .screen-claimhistory .claimhistory-container .submenu div { width: 8px; height: 8px; border: 2px solid #fff; } /* Loading screen*/ .loading .mcd-main-wrapper { padding: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 auto; width: 100%; } .screen-playscreen.screen-playscreen-full-screen .mcd-body { height: 70%; } .screen-playscreen .mcd-main-wrapper-tnc { width: 100% !important; } .screen-playscreen .mcd-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 25px 0px; } .screen-playscreen .mcd-head { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 34px; line-height: 35px; letter-spacing: -0.91px; height: 13%; width: calc(100% - 55px); margin: 0 auto; margin-top: 20px; padding: 0 10px; justify-content: center; position: relative; margin-top: 10px; } @media only screen and (max-width: 360px) { .screen-playscreen .mcd-head { font-size: 30px; line-height: 34px; } } @media only screen and (min-width: 320px) and (max-width: 400px) { [dir=rtl] .screen-playscreen .mcd-head { width: calc(100% - 55px); } } @media only screen and (min-device-width: 390px) and (min-device-height: 750px) { .screen-playscreen .mcd-head { height: 10%; } } @media only screen and (min-width: 358px) and (max-width: 359px) { .screen-playscreen .mcd-head { height: 10%; } } [dir=rtl] .screen-playscreen .mcd-head { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; margin-top: 10px; } .cms-preview-ar .screen-playscreen .mcd-head { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-playscreen .mcd-head .p-contents { padding: 0; } .screen-playscreen .submenu { width: calc(100% - 35px); margin: 0 auto; background-color: red; height: 26px; display: flex; flex-direction: row-reverse; align-items: center; padding-right: 10px; } [dir=rtl] .screen-playscreen .submenu { padding-left: 10px; padding-right: 0px; } .screen-playscreen .submenu div { width: 10px; height: 10px; border: 2px solid #fff; } .screen-playscreen .full-screen { height: 100%; overflow-y: auto; display: flex; align-items: flex-start; overflow-x: hidden; } .screen-playscreen .full-screen .mobile-game { background-color: #1a1a1a; text-align: center; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; border: 2px solid green; width: calc(100% - 30px); margin: 0 auto; padding: 0; border-top: 0px; height: calc(100% - 54px); } .screen-playscreen .full-screen .game-title { display: flex; flex-direction: row; gap: 0px; align-items: center; justify-content: center; margin: 12px 0px; padding: 0px 27px; margin-bottom: 0px; width: calc(100% - 52px); } .screen-playscreen .full-screen .game-title div { display: flex; flex-direction: row; width: 100%; justify-content: flex-start; align-items: center; gap: 15px; } .screen-playscreen .full-screen .game-title h1 { font-size: 30px; line-height: 32px; color: #ffb71b; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: left; } [dir=rtl] .screen-playscreen .full-screen .game-title h1 { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .screen-playscreen .full-screen .game-title img { width: 50px; } .screen-playscreen .full-screen .game-border { margin-bottom: 10px; width: 93%; margin-top: -10px; } .screen-playscreen .full-screen .game-border img { width: 100%; } .screen-playscreen .full-screen .how-to-play { padding: 15px; margin-bottom: 20px; text-align: left; width: calc(100% - 55px); border: 2px solid #007a33; border-top: 0px; } .screen-playscreen .full-screen .section-title { font-size: 30px; line-height: 32px; color: #ffb71b; margin-bottom: 18px; text-align: left; width: calc(100% - 55px); font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .screen-playscreen .full-screen .section-title { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .screen-playscreen .full-screen .section-border { width: calc(100% - 23px); background-color: #ffb71b; height: 10px; } .screen-playscreen .full-screen .instructions { font-size: 16px; line-height: 1.4; color: #ffb71b; display: flex; flex-direction: column; gap: 10px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .screen-playscreen .full-screen .instructions { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .screen-playscreen .full-screen .instructions p { font-size: 18px; line-height: 20px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .screen-playscreen .full-screen .instructions p { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .screen-playscreen .full-screen .instruction-steps { margin-top: 15px; font-size: 14px; display: flex; flex-direction: column; gap: 10px; color: #ffb71b; } .screen-playscreen .full-screen .instruction-steps ul { list-style: decimal; padding-left: 13px; } .screen-playscreen .full-screen .instruction-steps ul li { margin-bottom: 10px; font-size: 16px; line-height: 18px; color: #ffb71b; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-playscreen .full-screen .play-button { color: #000000; border: 3px solid #000; cursor: pointer; outline: none; width: 182px; position: absolute; bottom: 92px; height: 42px; background-color: #f5f7f8; font-size: 16px; line-height: 18px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .screen-playscreen .full-screen .play-button { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-playscreen .full-screen .play-button::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 2px); height: calc(100% - 10px); border: 2px dotted #000; pointer-events: none; } .screen-playscreen .full-screen .play-button::after { content: ""; position: absolute; top: 1px; left: 1px; width: calc(100% - 0px); height: calc(100% - 0px); box-shadow: inset -5px -5px 0px #ccc; pointer-events: none; } .screen-anotherchance.screen-anotherchance-full-screen .mcd-body { height: 70%; } .screen-anotherchance .mcd-main-wrapper-tnc { width: 100% !important; } .screen-anotherchance .mcd-wrapper { display: flex; flex-direction: column; justify-content: center; padding: 25px 0px; } .screen-anotherchance .mcd-head { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 34px; line-height: 35px; letter-spacing: -0.91px; height: 13%; width: calc(100% - 55px); margin: 0 auto; margin-top: 20px; padding: 0 10px; justify-content: center; position: relative; margin-top: 10px; } @media only screen and (max-width: 360px) { .screen-anotherchance .mcd-head { font-size: 30px; line-height: 34px; } } @media only screen and (min-width: 320px) and (max-width: 400px) { [dir=rtl] .screen-anotherchance .mcd-head { width: calc(100% - 55px); } } @media only screen and (min-device-width: 390px) and (min-device-height: 750px) { .screen-anotherchance .mcd-head { height: 10%; } } @media only screen and (min-width: 358px) and (max-width: 359px) { .screen-anotherchance .mcd-head { height: 10%; } } [dir=rtl] .screen-anotherchance .mcd-head { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; margin-top: 10px; } .cms-preview-ar .screen-anotherchance .mcd-head { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-anotherchance .mcd-head .p-contents { padding: 0; } .screen-anotherchance .submenu { width: calc(100% - 9px); margin: 0 auto; background-color: red; height: 26px; display: flex; flex-direction: row-reverse; align-items: center; padding-right: 10px; } [dir=rtl] .screen-anotherchance .submenu { padding-right: 0px; padding-left: 10px; } .screen-anotherchance .submenu div { width: 10px; height: 10px; border: 2px solid #fff; } .screen-anotherchance .full-screen { height: 100%; overflow-y: auto; display: flex; align-items: flex-start; overflow-x: hidden; } .screen-anotherchance .full-screen .mobile-game { background-color: #1a1a1a; text-align: center; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; border: 2px solid green; width: calc(100% - 30px); margin: 0 auto; padding: 0; border-top: 0px; height: calc(100% - 54px); box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); } [dir=rtl] .screen-anotherchance .full-screen .mobile-game { box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); } .screen-anotherchance .full-screen .game-title { display: flex; flex-direction: row; gap: 0px; align-items: center; justify-content: center; margin: 12px 0px; padding: 0px 27px; margin-bottom: 0px; width: calc(100% - 52px); } .screen-anotherchance .full-screen .game-title div { display: flex; flex-direction: row; width: 100%; justify-content: flex-start; align-items: center; gap: 15px; margin-top: 8px; margin-bottom: 10px; } .screen-anotherchance .full-screen .game-title h1 { font-size: 30px; line-height: 32px; color: #ffb71b; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: left; } .screen-anotherchance .full-screen .game-title img { width: 40px; } .screen-anotherchance .full-screen .game-border { margin-bottom: 10px; width: 93%; margin-top: -10px; } .screen-anotherchance .full-screen .game-border img { width: 100%; } .screen-anotherchance .full-screen .how-to-play { padding: 15px; text-align: left; width: calc(100% - 55px); border: 2px solid #007a33; border-top: 0px; } .screen-anotherchance .full-screen .how-to-play2 { padding: 15px; text-align: left; width: calc(100% - 55px); border-top: 0px; } .screen-anotherchance .full-screen .section-title { font-size: 30px; line-height: 32px; color: #ffb71b; margin-bottom: 18px; text-align: left; width: calc(100% - 55px); font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; } [dir=rtl] .screen-anotherchance .full-screen .section-title { text-align: right; } .screen-anotherchance .full-screen .section-subtitle { font-size: 18px; line-height: 20px; color: #ffb71b; margin-bottom: 18px; text-align: left; width: calc(100% - 55px); font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; } [dir=rtl] .screen-anotherchance .full-screen .section-subtitle { text-align: right; } .screen-anotherchance .full-screen .section-subtitle span { color: #fff; } .screen-anotherchance .full-screen .anotherchance-fix { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: calc(100% - 352px); width: 100%; } .screen-anotherchance .full-screen .section-gameicon { margin-bottom: 0px; text-align: right; width: calc(100% - 55px); } .screen-anotherchance .full-screen .section-gameicon img { width: 182px; } .screen-anotherchance .full-screen .section-gameicon3 { margin-bottom: -7px; text-align: right; width: calc(100% - 55px); } .screen-anotherchance .full-screen .section-gameicon3 img { width: 50px; } .screen-anotherchance .full-screen .section-gameicon2 { margin-bottom: -14px; text-align: CENTER; width: 100%; position: relative; z-index: 1; } .screen-anotherchance .full-screen .section-gameicon2 img { width: 100%; } .screen-anotherchance .full-screen .section-gameicon4 { margin-bottom: -8px; text-align: CENTER; width: 100%; position: relative; z-index: 1; } .screen-anotherchance .full-screen .section-gameicon4 img { width: 70px; } .screen-anotherchance .full-screen .section-border { width: calc(100% - 21px); background-color: #ffb71b; height: 10px; } .screen-anotherchance .full-screen .instructions { font-size: 16px; line-height: 1.4; color: #ffb71b; display: flex; flex-direction: row; gap: 20px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; align-items: center; } .screen-anotherchance .full-screen .instructions .left { width: 70%; } [dir=rtl] .screen-anotherchance .full-screen .instructions .left { text-align: right; } .screen-anotherchance .full-screen .instructions .left p { font-size: 18px; line-height: 20px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-anotherchance .full-screen .instructions .right { width: 30%; text-align: right; } [dir=rtl] .screen-anotherchance .full-screen .instructions .right { text-align: left; } .screen-anotherchance .full-screen .instructions .right p { font-size: 40px; line-height: 42px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-anotherchance .full-screen .play-button { color: #000000; border: 3px solid #000; cursor: pointer; outline: none; width: 50%; position: relative; margin-bottom: 16px; padding: 7px 0px; font-size: 14px; background-color: #f5f7f8; font-size: 16px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-anotherchance .full-screen .play-button::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 2px); height: calc(100% - 10px); border: 2px dotted #000; pointer-events: none; } .screen-anotherchance .full-screen .play-button::after { content: ""; position: absolute; top: 1px; left: 1px; width: calc(100% - 0px); height: calc(100% - 0px); box-shadow: inset -5px -5px 0px #ccc; pointer-events: none; } .screen-anotherchance .full-screen .global-cta-container { display: flex; justify-content: space-between; max-width: 800px; margin: 0 auto; padding: 0 0px 20px; z-index: 10; position: absolute; padding-top: 15px; left: 0; right: 0; width: calc(100% - 49px); bottom: 85px; } .screen-anotherchance .full-screen .global-cta-container .cta { height: 47px; border: none; font-size: 16px; line-height: 18px; cursor: pointer; transition: all 0.3s ease; position: relative; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; width: 112px; } .screen-anotherchance .full-screen .global-cta-container .cta.skip { background: #fff; color: #000000; border: 3px solid #000; cursor: pointer; outline: none; width: 132px; height: 47px; } .screen-anotherchance .full-screen .global-cta-container .cta.skip::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 12px); height: calc(100% - 10px); border: 2px dotted #000; pointer-events: none; } .screen-anotherchance .full-screen .global-cta-container .cta.skip::after { content: ""; position: absolute; top: 1px; left: 1px; width: calc(100% - 2px); height: calc(100% - 0px); box-shadow: inset -5px -5px 0px #ccc; pointer-events: none; } .screen-anotherchance .full-screen .global-cta-container .cta.go-to-planet { background: #fff; color: #000000; border: 3px solid #000; cursor: pointer; outline: none; width: 182px; margin: 0 auto; height: 42px; } .screen-anotherchance .full-screen .global-cta-container .cta.go-to-planet::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 12px); height: calc(100% - 10px); border: 2px dotted #000; pointer-events: none; } .screen-anotherchance .full-screen .global-cta-container .cta.go-to-planet::after { content: ""; position: absolute; top: 1px; left: 1px; width: calc(100% - 2px); height: calc(100% - 0px); box-shadow: inset -5px -5px 0px #ccc; pointer-events: none; } .screen-anotherchance .full-screen .global-cta-container .cta.next { background: #fff; color: #000000; border: 3px solid #000; cursor: pointer; outline: none; } .screen-anotherchance .full-screen .global-cta-container .cta.next::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 12px); height: calc(100% - 10px); border: 2px dotted #000; pointer-events: none; } .screen-anotherchance .full-screen .global-cta-container .cta.next::after { content: ""; position: absolute; top: 1px; left: 1px; width: calc(100% - 2px); height: calc(100% - 0px); box-shadow: inset -5px -5px 0px #ccc; pointer-events: none; } .screen-rewardreveal-raffle.screen-rewardreveal-raffle-full-screen .mcd-body { height: 70%; } .screen-rewardreveal-raffle .mcd-main-wrapper-tnc { width: 100% !important; } .screen-rewardreveal-raffle .mcd-wrapper { display: flex; flex-direction: column; justify-content: center; } .screen-rewardreveal-raffle .mcd-head { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 34px; line-height: 35px; letter-spacing: -0.91px; height: 13%; width: calc(100% - 55px); margin: 0 auto; margin-top: 20px; padding: 0 10px; justify-content: center; position: relative; margin-top: 10px; } @media only screen and (max-width: 360px) { .screen-rewardreveal-raffle .mcd-head { font-size: 30px; line-height: 34px; } } @media only screen and (min-width: 320px) and (max-width: 400px) { [dir=rtl] .screen-rewardreveal-raffle .mcd-head { width: calc(100% - 55px); } } @media only screen and (min-device-width: 390px) and (min-device-height: 750px) { .screen-rewardreveal-raffle .mcd-head { height: 10%; } } @media only screen and (min-width: 358px) and (max-width: 359px) { .screen-rewardreveal-raffle .mcd-head { height: 10%; } } [dir=rtl] .screen-rewardreveal-raffle .mcd-head { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; margin-top: 10px; } .cms-preview-ar .screen-rewardreveal-raffle .mcd-head { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-rewardreveal-raffle .mcd-head .p-contents { padding: 0; } .screen-rewardreveal-raffle .submenu { height: 28px; display: flex; flex-direction: row-reverse; padding-right: 10px; width: calc(100% - 10px); align-items: center; margin: 0 auto; } [dir=rtl] .screen-rewardreveal-raffle .submenu { padding-right: 0px; padding-left: 10px; } .screen-rewardreveal-raffle .submenu div { width: 10px; height: 10px; border: 2px solid #fff; } .screen-rewardreveal-raffle .mobile-game { background-color: #1a1a1a; text-align: center; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; border: 2px solid green; width: calc(100% - 30px); margin: 0 auto; padding: 0; border-top: 0px; height: calc(100% - 57px); box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); } [dir=rtl] .screen-rewardreveal-raffle .mobile-game { box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); } .screen-rewardreveal-raffle .mobile-game .full-screen { width: calc(100% - 30px); display: flex; flex-direction: column; align-items: center; height: calc(100% - 78px); overflow-y: auto; overflow-x: hidden; } .screen-rewardreveal-raffle .mobile-game .full-screen .game-title { display: flex; flex-direction: row; gap: 11px; align-items: flex-start; justify-content: flex-start; margin: 12px 0px; padding: 0px 27px; width: 97%; } .screen-rewardreveal-raffle .mobile-game .full-screen .game-title h1 { font-size: 30px; line-height: 32px; color: #ffb71b; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: left; text-transform: uppercase; } .screen-rewardreveal-raffle .mobile-game .full-screen .game-title img { width: 60px; } .screen-rewardreveal-raffle .mobile-game .full-screen .game-border { margin-bottom: 10px; width: 100%; margin-top: -10px; } .screen-rewardreveal-raffle .mobile-game .full-screen .game-border img { width: 100%; } .screen-rewardreveal-raffle .mobile-game .full-screen .section-title { font-size: 26px; line-height: 28px; color: #ffb71b; margin-bottom: 18px; text-align: left; width: 97%; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; } [dir=rtl] .screen-rewardreveal-raffle .mobile-game .full-screen .section-title { text-align: right; } @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .screen-rewardreveal-raffle .mobile-game .full-screen .section-title { font-size: 20px; line-height: 22px; } } @media only screen and (max-width: 375px) and (max-height: 812px) { .screen-rewardreveal-raffle .mobile-game .full-screen .section-title { font-size: 20px; line-height: 22px; } } @media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) { .screen-rewardreveal-raffle .mobile-game .full-screen .section-title { font-size: 20px; line-height: 22px; } } @media only screen and (max-width: 390px) and (max-height: 844px) { .screen-rewardreveal-raffle .mobile-game .full-screen .section-title { font-size: 20px; line-height: 22px; } } .screen-rewardreveal-raffle .mobile-game .full-screen .section-reward { min-height: 200px; justify-content: center; align-items: center; display: flex; } @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .screen-rewardreveal-raffle .mobile-game .full-screen .section-reward { min-height: 85px; } } @media only screen and (max-width: 375px) and (max-height: 812px) { .screen-rewardreveal-raffle .mobile-game .full-screen .section-reward { min-height: 85px; } } @media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) { .screen-rewardreveal-raffle .mobile-game .full-screen .section-reward { min-height: 85px; } } @media only screen and (max-width: 390px) and (max-height: 844px) { .screen-rewardreveal-raffle .mobile-game .full-screen .section-reward { min-height: 85px; } } .screen-rewardreveal-raffle .mobile-game .full-screen .section-reward img { width: 275px; } @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .screen-rewardreveal-raffle .mobile-game .full-screen .section-reward img { width: 185px; } } @media only screen and (max-width: 375px) and (max-height: 812px) { .screen-rewardreveal-raffle .mobile-game .full-screen .section-reward img { width: 185px; } } @media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) { .screen-rewardreveal-raffle .mobile-game .full-screen .section-reward img { width: 185px; } } @media only screen and (max-width: 390px) and (max-height: 844px) { .screen-rewardreveal-raffle .mobile-game .full-screen .section-reward img { width: 185px; } } .screen-rewardreveal-raffle .mobile-game .full-screen .section-border { width: 100%; background-color: #ffb71b; height: 10px; } .screen-rewardreveal-raffle .mobile-game .full-screen .raffle-block { width: 97%; display: flex; flex-direction: column; text-align: left; } .screen-rewardreveal-raffle .mobile-game .full-screen .raffle-block p { font-size: 18px; line-height: 20px; color: #ffb71b; margin-bottom: 20px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; } [dir=rtl] .screen-rewardreveal-raffle .mobile-game .full-screen .raffle-block p { text-align: right; } .screen-rewardreveal-raffle .mobile-game .full-screen .raffle-block h3 { font-size: 26px; line-height: 28px; color: #ffb71b; margin-bottom: 20px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; } [dir=rtl] .screen-rewardreveal-raffle .mobile-game .full-screen .raffle-block h3 { text-align: right; } @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .screen-rewardreveal-raffle .mobile-game .full-screen .raffle-block h3 { font-size: 20px; line-height: 22px; } } @media only screen and (max-width: 375px) and (max-height: 812px) { .screen-rewardreveal-raffle .mobile-game .full-screen .raffle-block h3 { font-size: 20px; line-height: 22px; } } @media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) { .screen-rewardreveal-raffle .mobile-game .full-screen .raffle-block h3 { font-size: 20px; line-height: 22px; } } @media only screen and (max-width: 390px) and (max-height: 844px) { .screen-rewardreveal-raffle .mobile-game .full-screen .raffle-block h3 { font-size: 20px; line-height: 22px; } } .screen-rewardreveal-raffle .mobile-game .global-cta-container { display: flex; justify-content: space-between; width: 100%; max-width: 800px; margin: 0 auto; padding: 0 0px 20px; z-index: 10; position: relative; width: calc(100% - 30px); padding-top: 15px; } .screen-rewardreveal-raffle .mobile-game .global-cta-container .cta { height: 42px; border: none; line-height: 18px; font-size: 16px; cursor: pointer; transition: all 0.3s ease; position: relative; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; width: 82px; } .screen-rewardreveal-raffle .mobile-game .global-cta-container .cta.skip { background: #fff; color: #000000; border: 3px solid #000; cursor: pointer; outline: none; } .screen-rewardreveal-raffle .mobile-game .global-cta-container .cta.skip::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 12px); height: calc(100% - 10px); border: 2px dotted #000; pointer-events: none; } .screen-rewardreveal-raffle .mobile-game .global-cta-container .cta.skip::after { content: ""; position: absolute; top: 1px; left: 1px; width: calc(100% - 2px); height: calc(100% - 0px); box-shadow: inset -5px -5px 0px #ccc; pointer-events: none; } .screen-rewardreveal-raffle .mobile-game .global-cta-container .cta.next { background: #fff; color: #000000; border: 3px solid #000; cursor: pointer; outline: none; } .screen-rewardreveal-raffle .mobile-game .global-cta-container .cta.next::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 12px); height: calc(100% - 10px); border: 2px dotted #000; pointer-events: none; } .screen-rewardreveal-raffle .mobile-game .global-cta-container .cta.next::after { content: ""; position: absolute; top: 1px; left: 1px; width: calc(100% - 2px); height: calc(100% - 0px); box-shadow: inset -5px -5px 0px #ccc; pointer-events: none; } .screen-rewardreveal-raffle-one.screen-rewardreveal-raffle-one-full-screen .mcd-body { height: 70%; } .screen-rewardreveal-raffle-one .mcd-main-wrapper-tnc { width: 100% !important; } .screen-rewardreveal-raffle-one .mcd-wrapper { display: flex; flex-direction: column; justify-content: center; } .screen-rewardreveal-raffle-one .mcd-head { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 34px; line-height: 35px; letter-spacing: -0.91px; height: 13%; width: calc(100% - 55px); margin: 0 auto; margin-top: 20px; padding: 0 10px; justify-content: center; position: relative; margin-top: 10px; } @media only screen and (max-width: 360px) { .screen-rewardreveal-raffle-one .mcd-head { font-size: 30px; line-height: 34px; } } @media only screen and (min-width: 320px) and (max-width: 400px) { [dir=rtl] .screen-rewardreveal-raffle-one .mcd-head { width: calc(100% - 55px); } } @media only screen and (min-device-width: 390px) and (min-device-height: 750px) { .screen-rewardreveal-raffle-one .mcd-head { height: 10%; } } @media only screen and (min-width: 358px) and (max-width: 359px) { .screen-rewardreveal-raffle-one .mcd-head { height: 10%; } } [dir=rtl] .screen-rewardreveal-raffle-one .mcd-head { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; margin-top: 10px; } .cms-preview-ar .screen-rewardreveal-raffle-one .mcd-head { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-rewardreveal-raffle-one .mcd-head .p-contents { padding: 0; } .screen-rewardreveal-raffle-one .submenu { height: 33px; display: flex; flex-direction: row-reverse; padding-right: 10px; width: calc(100% - 10px); align-items: center; margin: 0 auto; } [dir=rtl] .screen-rewardreveal-raffle-one .submenu { padding-right: 0px; padding-left: 10px; } .screen-rewardreveal-raffle-one .submenu div { width: 10px; height: 10px; border: 2px solid #fff; } .screen-rewardreveal-raffle-one .mobile-game { background-color: #1a1a1a; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 2px solid green; width: calc(100% - 30px); margin: 0 auto; padding: 0; border-top: 0px; height: calc(100% - 57px); box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); } [dir=rtl] .screen-rewardreveal-raffle-one .mobile-game { box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); } .screen-rewardreveal-raffle-one .mobile-game .full-screen { width: calc(100% - 30px); display: flex; flex-direction: column; align-items: center; height: 100%; overflow-y: auto; overflow-x: hidden; } .screen-rewardreveal-raffle-one .mobile-game .full-screen .game-title { display: flex; flex-direction: row; gap: 11px; align-items: flex-start; justify-content: flex-start; margin: 12px 0px; padding: 0px 27px; width: 97%; } .screen-rewardreveal-raffle-one .mobile-game .full-screen .game-title h1 { font-size: 30px; line-height: 32px; color: #ffb71b; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: left; text-transform: uppercase; } .screen-rewardreveal-raffle-one .mobile-game .full-screen .game-title img { width: 60px; } .screen-rewardreveal-raffle-one .mobile-game .full-screen .game-border { margin-bottom: 10px; width: 100%; margin-top: -10px; } .screen-rewardreveal-raffle-one .mobile-game .full-screen .game-border img { width: 100%; } .screen-rewardreveal-raffle-one .mobile-game .full-screen .section-title { font-size: 26px; line-height: 28px; color: #ffb71b; margin-bottom: 18px; text-align: left; width: 97%; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; } [dir=rtl] .screen-rewardreveal-raffle-one .mobile-game .full-screen .section-title { text-align: right; } @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .screen-rewardreveal-raffle-one .mobile-game .full-screen .section-title { font-size: 20px; line-height: 22px; } } @media only screen and (max-width: 375px) and (max-height: 812px) { .screen-rewardreveal-raffle-one .mobile-game .full-screen .section-title { font-size: 20px; line-height: 22px; } } @media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) { .screen-rewardreveal-raffle-one .mobile-game .full-screen .section-title { font-size: 20px; line-height: 22px; } } @media only screen and (max-width: 390px) and (max-height: 844px) { .screen-rewardreveal-raffle-one .mobile-game .full-screen .section-title { font-size: 20px; line-height: 22px; } } .screen-rewardreveal-raffle-one .mobile-game .full-screen .section-reward { min-height: calc(100% - 260px); justify-content: center; align-items: center; display: flex; } .screen-rewardreveal-raffle-one .mobile-game .full-screen .section-reward img { width: 275px; } .screen-rewardreveal-raffle-one .mobile-game .full-screen .section-border { width: 100%; background-color: #ffb71b; height: 10px; } .screen-rewardreveal-raffle-one .mobile-game .full-screen .seperator { margin: 0 auto; text-align: center; color: #ffae06; font-size: 35px; line-height: 37px; margin-top: 20px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; margin-bottom: 10px; } .screen-rewardreveal-raffle-one .mobile-game .full-screen .raffle-block { width: 84%; display: flex; justify-content: flex-start; margin-left: 0; margin-right: auto; align-items: center; gap: 15px; } .screen-rewardreveal-raffle-one .mobile-game .full-screen .raffle-block p { font-size: 18px; line-height: 20px; color: #ffb71b; margin-bottom: 20px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; } .screen-rewardreveal-raffle-one .mobile-game .full-screen .raffle-block h3 { font-size: 26px; line-height: 28px; color: #ffb71b; margin-bottom: 20px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; } .screen-rewardreveal-raffle-one .mobile-game .global-cta-container { display: flex; justify-content: space-between; width: 100%; max-width: 800px; margin: 0 auto; padding: 0 0px 20px; z-index: 10; position: relative; width: calc(100% - 30px); padding-top: 15px; } .screen-rewardreveal-raffle-one .mobile-game .global-cta-container .cta { height: 42px; border: none; cursor: pointer; transition: all 0.3s ease; position: relative; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; line-height: 18px; font-size: 16px; } .screen-rewardreveal-raffle-one .mobile-game .global-cta-container .cta.skip { background: #fff; color: #000000; border: 3px solid #000; cursor: pointer; outline: none; width: 112px; } .screen-rewardreveal-raffle-one .mobile-game .global-cta-container .cta.skip::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 12px); height: calc(100% - 10px); border: 2px dotted #000; pointer-events: none; } .screen-rewardreveal-raffle-one .mobile-game .global-cta-container .cta.skip::after { content: ""; position: absolute; top: 1px; left: 1px; width: calc(100% - 2px); height: calc(100% - 0px); box-shadow: inset -5px -5px 0px #ccc; pointer-events: none; } .screen-rewardreveal-raffle-one .mobile-game .global-cta-container .cta.next { background: #fff; color: #000000; border: 3px solid #000; cursor: pointer; outline: none; width: 132px; } .screen-rewardreveal-raffle-one .mobile-game .global-cta-container .cta.next::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 12px); height: calc(100% - 10px); border: 2px dotted #000; pointer-events: none; } .screen-rewardreveal-raffle-one .mobile-game .global-cta-container .cta.next::after { content: ""; position: absolute; top: 1px; left: 1px; width: calc(100% - 2px); height: calc(100% - 0px); box-shadow: inset -5px -5px 0px #ccc; pointer-events: none; } .screen-form.screen-form-full-screen .mcd-body { height: 70%; } .screen-form .mcd-main-wrapper-tnc { width: 100% !important; } .screen-form .mcd-head { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 34px; line-height: 35px; letter-spacing: -0.91px; height: 13%; width: calc(100% - 55px); margin: 0 auto; margin-top: 20px; padding: 0 10px; justify-content: center; position: relative; margin-top: 10px; } @media only screen and (max-width: 360px) { .screen-form .mcd-head { font-size: 30px; line-height: 34px; } } @media only screen and (min-width: 320px) and (max-width: 400px) { [dir=rtl] .screen-form .mcd-head { width: calc(100% - 55px); } } @media only screen and (min-device-width: 390px) and (min-device-height: 750px) { .screen-form .mcd-head { height: 10%; } } @media only screen and (min-width: 358px) and (max-width: 359px) { .screen-form .mcd-head { height: 10%; } } [dir=rtl] .screen-form .mcd-head { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; margin-top: 10px; } .cms-preview-ar .screen-form .mcd-head { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-form .mcd-head .p-contents { padding: 0; } .screen-form .form-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; height: calc(100% - 49px); } .screen-form .form-wrapper .form-description { display: flex; justify-content: center; flex-direction: column; align-items: flex-start; width: calc(100% - 30px); margin: 0 auto; text-align: left; } .screen-form .form-wrapper .form-description h1 { color: #ffb71b; font-size: 30px; line-height: 32px; margin-bottom: 4px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .screen-form .form-wrapper .form-description h1 { text-align: right; } .screen-form .form-wrapper .form-description p { color: #ffb71b; font-size: 18px; line-height: 20px; margin-bottom: 8px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .screen-form .form-wrapper .form-description p { text-align: right; } .screen-form .form-wrapper .form-description .game-border { margin-bottom: 10px; width: 100%; margin-top: -10px; } .screen-form .form-wrapper .form-description .game-border img { width: 100%; } .screen-form .form-wrapper .mobile-game { background-color: #1a1a1a; text-align: center; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; border: 2px solid green; width: calc(100% - 30px); margin: 0 auto; padding: 0; border-top: 0px; position: relative; z-index: 11; overflow: hidden; box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: -6px 10px 0px 0px rgb(0, 0, 0); margin-bottom: 10px; } [dir=rtl] .screen-form .form-wrapper .mobile-game { box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -webkit-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); -moz-box-shadow: 6px 10px 0px 0px rgb(0, 0, 0); } .screen-form .form-wrapper .mobile-game .submenu { width: calc(100% - 6px); background-color: red; height: 26px; display: flex; flex-direction: row; align-items: center; padding-right: 10px; justify-content: space-between; } [dir=rtl] .screen-form .form-wrapper .mobile-game .submenu { padding-right: 0px; padding-left: 10px; } .screen-form .form-wrapper .mobile-game .submenu .icon-l { width: 50%; text-align: left; padding-left: 10px; } [dir=rtl] .screen-form .form-wrapper .mobile-game .submenu .icon-l { text-align: right; padding-left: 0px; padding-right: 10px; } .screen-form .form-wrapper .mobile-game .submenu .icon-l img { width: 14px; } .screen-form .form-wrapper .mobile-game .submenu .icon-r { width: 10px; text-align: right; height: 10px; border: 2px solid #fff; } .screen-form .form-wrapper .mobile-game .full-screen { width: calc(100% - 30px); display: flex; flex-direction: column; align-items: center; height: 100%; overflow: hidden; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form { height: auto; min-height: 100px; padding: 20px; width: 100%; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form span.mandatory-txt { font-size: 11px; color: red; line-height: 12px; position: absolute; left: 0; bottom: -12px; width: 100%; } @media only screen and (min-height: 680px) { .screen-form .form-wrapper .mobile-game .full-screen .mcd-form span.mandatory-txt { bottom: -14px; } } @media only screen and (min-height: 750px) { .screen-form .form-wrapper .mobile-game .full-screen .mcd-form span.mandatory-txt { bottom: -14px; } } [dir=rtl] .screen-form .form-wrapper .mobile-game .full-screen .mcd-form span.mandatory-txt { left: auto; right: 0; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form .buttonfold { display: flex; flex-direction: column; gap: 8px; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form .buttonfold .l-btn—red { width: 100% !important; margin: 0; padding: 0; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form .buttonfold .l-btn—claim { width: 100% !important; margin: 0; padding: 0; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group { position: relative; margin-bottom: 19px; } @media only screen and (max-width: 358px) and (max-height: 598px) { .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group { margin-bottom: 10px !important; } } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=text], .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=email], .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=tel] { width: 100%; padding: 10px 8px; border: 1px solid #007a33; color: #000000; background-color: #fff; box-sizing: border-box; font-size: 15px; outline: none; font-size: 18px; line-height: 20px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; } @media only screen and (max-width: 375px) and (max-height: 820px) { .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=text], .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=email], .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=tel] { padding: 6px 8px; } } [dir=rtl] .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=text], [dir=rtl] .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=email], [dir=rtl] .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=tel] { direction: rtl; } @media only screen and (min-height: 680px) { .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=text], .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=email], .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=tel] { padding: 7px 8px 7px 8px; } } @media only screen and (min-height: 750px) { .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=text], .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=email], .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=tel] { padding: 10px 8px 10px 8px; } } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=text]:disabled, .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=email]:disabled, .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=tel]:disabled { border: 1px solid #918f8f; color: #918f8f; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=text]:disabled + label, .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=email]:disabled + label, .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=tel]:disabled + label { display: none; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=text]::-moz-placeholder, .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=email]::-moz-placeholder, .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=tel]::-moz-placeholder { color: #000; font-size: 16px; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=text]::placeholder, .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=email]::placeholder, .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=tel]::placeholder { color: #000; font-size: 16px; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group label { position: absolute; left: 10px; top: 5px; color: #000; font-size: 16px; transition: 0.2s ease all; pointer-events: none; z-index: 1111; } @media only screen and (min-height: 680px) { .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group label { top: 8px; } } @media only screen and (min-height: 750px) { .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group label { top: 10px; } } [dir=rtl] .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group label { left: auto; right: 10px; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group label.focused { top: -10px; left: 5px; font-size: 12px; color: #007bff; opacity: 0; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group input[type=checkbox] { margin-right: 5px; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group a { color: #007bff; text-decoration: none; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group a:hover { text-decoration: underline; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group.mandatory:before { content: "*"; color: red; font-size: 16px; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); line-height: 8px; } [dir=rtl] .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group.mandatory:before { left: -9px; right: auto; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group.mcd-form__group-phone { display: flex; gap: 10px; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group.mcd-form__group-phone div { position: relative; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group.mcd-form__group-phone .form-country-code { width: 90px; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group.mcd-form__group-phone .form-country-code input { text-align: center; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__group.mcd-form__group-phone .form-phone { width: 100%; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__checkbox { position: relative; margin: 20px 0; display: flex; margin-bottom: 10px; align-items: center; } @media only screen and (min-height: 680px) { .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__checkbox { margin: 30px 0; margin-bottom: 10px; } } @media only screen and (min-height: 750px) { .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__checkbox { margin: 33px 0; margin-bottom: 10px; } } @media only screen and (min-height: 850px) { .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__checkbox { margin: 35px 0; margin-bottom: 10px; } } @media only screen and (max-width: 358px) and (max-height: 598px) { .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__checkbox { margin: 7px 0; } } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__checkbox input[type=checkbox] { display: none; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__checkbox.mandatory:before { content: "*"; color: red; font-size: 16px; position: absolute; right: -9px; top: 0; line-height: 8px; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__checkbox label { display: flex; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__checkbox label .checkbox-icon { width: 20px; height: 20px; border: 1px solid #fff; background-color: #fff; background-size: contain; margin-right: 10px; display: inline-flex; transition: background 0.3s ease; align-items: center; justify-content: center; } [dir=rtl] .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__checkbox label .checkbox-icon { margin-right: 0px; margin-left: 10px; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__checkbox label .checkbox-icon img { width: 13px; height: 13px; -o-object-fit: contain; object-fit: contain; display: none; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__checkbox .checkbox-txt { display: flex; align-items: center; font-size: 18px; cursor: pointer; color: #ffb71b; line-height: 20px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; } @media only screen and (min-height: 680px) { .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__checkbox .checkbox-txt { font-size: 14px; } } @media only screen and (min-height: 750px) { .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__checkbox .checkbox-txt { font-size: 15px; } } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__checkbox .checkbox-txt a { color: #ffb71b; text-decoration: none; position: relative; font-size: 18px; line-height: 20px; } @media only screen and (min-height: 680px) { .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__checkbox .checkbox-txt a { font-size: 14px; line-height: 14px; } } @media only screen and (min-height: 750px) { .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__checkbox .checkbox-txt a { font-size: 15px; line-height: 14px; } } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__checkbox input[type=checkbox]:checked + label .checkbox-icon { border: 1px solid #000; background-size: contain; } .screen-form .form-wrapper .mobile-game .full-screen .mcd-form__checkbox input[type=checkbox]:checked + label .checkbox-icon img { display: block; } .screen-form .form-wrapper .mobile-game .full-screen .game-border { margin-bottom: 10px; width: 100%; margin-top: -10px; } .screen-form .form-wrapper .mobile-game .full-screen .game-border img { width: 100%; } .screen-form .global-cta-container { display: flex; justify-content: space-between; width: 100%; max-width: 800px; margin: 0 auto; padding: 0 0px 20px; z-index: 10; position: relative; width: calc(100% - 30px); position: absolute; left: 0; right: 0; bottom: 0; } .screen-form .global-cta-container .cta { border: none; line-height: 18px; font-size: 16px; cursor: pointer; transition: all 0.3s ease; position: relative; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; width: 132px; height: 42px; } .screen-form .global-cta-container .cta.skip { background: #fff; color: #000000; border: 3px solid #000; cursor: pointer; outline: none; } .screen-form .global-cta-container .cta.skip::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 12px); height: calc(100% - 10px); border: 2px dotted #000; pointer-events: none; } .screen-form .global-cta-container .cta.skip::after { content: ""; position: absolute; top: 1px; left: 1px; width: calc(100% - 2px); height: calc(100% - 0px); box-shadow: inset -5px -5px 0px #ccc; pointer-events: none; } .screen-form .global-cta-container .cta.next { background: #fff; color: #000000; border: 3px solid #000; cursor: pointer; outline: none; } .screen-form .global-cta-container .cta.next::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 12px); height: calc(100% - 10px); border: 2px dotted #000; pointer-events: none; } .screen-form .global-cta-container .cta.next::after { content: ""; position: absolute; top: 1px; left: 1px; width: calc(100% - 2px); height: calc(100% - 0px); box-shadow: inset -5px -5px 0px #ccc; pointer-events: none; } .countdown-loosing .mcd-main-wrapper { padding: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 auto; width: 100%; } .screen-congratulations .congratsWrapper { display: flex; flex-wrap: wrap; align-items: center; flex-direction: column; width: 100%; height: calc(100% + 67px); } .screen-congratulations h4 { width: 100%; } .screen-congratulations .content { flex-wrap: nowrap; height: 100%; display: flex; flex-direction: column; text-align: center; width: 100%; position: relative; } .screen-congratulations .screen-congratulations__top { height: 120px; width: 100%; position: relative; z-index: 3; top: 0; padding: 0; display: flex; align-items: center; justify-content: flex-end; flex-direction: column; } .screen-congratulations .screen-congratulations__top .congratulations-logo__block { padding: 0 30px 0px 30px; height: 70px; } .screen-congratulations .screen-congratulations__top img { -o-object-fit: contain; object-fit: contain; width: 100%; height: auto; } @media only screen and (min-width: 400px) { .screen-congratulations .screen-congratulations__top img { width: 90%; } } .screen-congratulations .screen-congratulations__top h4 { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 18px; line-height: 21px; } [dir=rtl] .screen-congratulations .screen-congratulations__top h4 { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-congratulations .congratsWrap_Content { height: calc(100% - 360px); display: flex; flex-direction: column; } @media only screen and (max-width: 358px) and (max-height: 598px) { .screen-congratulations .congratsWrap_Content { height: calc(100% - 382px); } } .screen-congratulations .button-position-bottom { height: 180px; position: static; } .screen-congratulations .congratsWrap_Content__panel { height: 100%; padding: 0 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .screen-congratulations .congratsWrap_Content__panel > .l-center { height: 100%; } .screen-congratulations .congratsWrap_Content__panel img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } @media only screen and (max-width: 358px) and (max-height: 598px) { .screen-congratulations .congratsWrap_Content__panel img { width: 85%; } } .screen-congratulations .screen-claimofferReward__top .claimofferReward-logo__block_one { flex: 0 0 120px; width: 120px; } .screen-congratulations .button-position-bottom__block { padding: 0px 30px 0 30px; height: 100%; position: relative; gap: 15px; display: flex; flex-direction: column; } .screen-congratulations .btn.btn-claim { border: none; font-size: 14px; position: relative; } .screen-congratulations .btn.btn-claim span { position: relative; display: inline-block; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 18px; } [dir=rtl] .screen-congratulations .btn.btn-claim span { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-congratulations .btn.btn-claim span:after { content: ""; height: 1px; width: auto; border-bottom: 1px solid #333; display: inline-block; width: 100%; position: absolute; bottom: 1px; left: 0; } .screen-congratulations .mcd-footer { height: 18px; width: 100%; position: absolute; bottom: 0px; left: 0px; } .screen-congratulations .main-wrapper { width: 100%; height: 100%; position: relative; } .screen-congratulations .congratulations-title { width: 90%; display: flex; flex-direction: column; } .screen-congratulations .congratulations-title p { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 15px; line-height: 18px; } .screen-congratulations.third-party .screen-congratulations__top { height: 140px; } .screen-congratulations.third-party .congratsWrap_Content { height: calc(100% - 331px); } @media only screen and (max-width: 358px) and (max-height: 598px) { .screen-congratulations.third-party .congratsWrap_Content { height: calc(100% - 358px); } } .screen-congratulations.third-party .button-position-bottom { height: 70px; } .screen-congratulations.third-party .congratulations-logo__block { height: 50px; padding-bottom: 0px; } .screen-congratulations.third-party .screen-claimofferRewardRaffle__top { height: 34%; width: 100%; position: relative; z-index: 3; top: 0; padding: 0; display: flex; align-items: center; justify-content: center; } .screen-congratulations.third-party .claimofferRewardRaffle-logo__block_one { width: 31%; position: relative; display: flex; align-items: center; justify-content: center; } .screen-congratulations.third-party .claimofferRewardRaffle-logo__block_one img { width: 100px; } .screen-congratulations.third-party .claimofferRewardRaffle-logo__block_two { width: 50%; position: relative; display: flex; align-items: center; justify-content: center; } .screen-congratulations.third-party .claimofferRewardRaffle-logo__block_two p { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; color: #000; font-size: 20px; line-height: 24px; text-align: left; } [dir=rtl] .screen-congratulations.third-party .claimofferRewardRaffle-logo__block_two p { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .screen-congratulations.third-party .third-party__content-top { font-size: 16px; font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; color: #000; line-height: 18px; } .screen-congratulations.third-party .third-party__content-top__block { width: 80%; } .screen-congratulations.third-party .screen-congratulations__top__panel { display: flex; flex-direction: column; gap: 15px; } @media only screen and (max-width: 358px) and (max-height: 598px) { .screen-congratulations.third-party .screen-congratulations__top__panel { gap: 13px; } } .screen-congratulations.third-party .raffle-count .raffle-txt { font-size: 18px; line-height: 20px; } .screen-congratulations.third-party.third-party--with-raffle .button-position-bottom { height: 138px; } .screen-congratulations.third-party.third-party--with-raffle .congratsWrap_Content { height: calc(100% - 388px); } .screen-congratulations.third-party.third-party--no-yes .button-position-bottom { height: 130px; display: flex; flex-direction: column; gap: 20px; } .screen-congratulations.third-party.third-party--no-yes .congratsWrap_Content { height: calc(100% - 380px); } @media only screen and (max-width: 358px) and (max-height: 598px) { .screen-congratulations.third-party.third-party--no-yes .congratsWrap_Content { height: calc(100% - 405px); } } .screen-congratulations.third-party.third-party--no-yes .button-position-bottom__block { flex-direction: row; } .screen-congratulations.third-party.third-party--no-yes .button-position-bottom__block { height: auto; } .screen-congratulations.third-party.third-party--no-yes .congrats__content-txt { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 16px; line-height: 21px; width: 85%; } .screen-congratulations.third-party.third-party--no-yes .congrats__content-txt span { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .screen-congratulations.third-party.third-party--no-yes .congrats__content-txt span { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .screen-congratulations.third-party.third-party--no-yes .congrats__content-txt { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-congratulations-raffle .congratsWrapper { display: flex; flex-wrap: wrap; align-items: center; flex-direction: column; width: 100%; height: calc(100vh - 40px); } .screen-congratulations-raffle h4 { width: 100%; } .screen-congratulations-raffle .content { flex-wrap: nowrap; height: 100%; display: flex; flex-direction: column; text-align: center; width: 100%; position: relative; } .screen-congratulations-raffle .screen-congratulations__top { height: 180px; width: 100%; position: relative; z-index: 3; top: 0; padding: 0; display: flex; align-items: center; justify-content: flex-end; flex-direction: column; } .screen-congratulations-raffle .screen-congratulations__top .congratulations-logo__block { padding: 0 30px 0px 30px; height: 70px; } .screen-congratulations-raffle .screen-congratulations__top img { -o-object-fit: contain; object-fit: contain; width: 100%; height: auto; } @media only screen and (min-width: 400px) { .screen-congratulations-raffle .screen-congratulations__top img { width: 90%; } } .screen-congratulations-raffle .screen-congratulations__top h4 { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 18px; line-height: 21px; } [dir=rtl] .screen-congratulations-raffle .screen-congratulations__top h4 { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-congratulations-raffle .congratsWrap_Content { height: calc(100% - 360px); display: flex; flex-direction: column; } @media only screen and (max-width: 358px) and (max-height: 598px) { .screen-congratulations-raffle .congratsWrap_Content { height: calc(100% - 382px); } } .screen-congratulations-raffle .button-position-bottom { height: 180px; position: static; } .screen-congratulations-raffle .congratsWrap_Content__panel { height: 100%; padding: 0 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .screen-congratulations-raffle .congratsWrap_Content__panel > .l-center { height: 100%; } .screen-congratulations-raffle .congratsWrap_Content__panel img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } @media only screen and (max-width: 358px) and (max-height: 598px) { .screen-congratulations-raffle .congratsWrap_Content__panel img { width: 85%; } } .screen-congratulations-raffle .screen-claimofferReward__top .claimofferReward-logo__block_one { flex: 0 0 120px; width: 120px; } .screen-congratulations-raffle .button-position-bottom__block { padding: 0px 30px 0 30px; height: 100%; position: relative; gap: 15px; display: flex; flex-direction: column; } .screen-congratulations-raffle .claimofferRewardRaffle-logo__block_two { width: 50%; position: relative; display: flex; align-items: center; justify-content: center; } .screen-congratulations-raffle .claimofferRewardRaffle-logo__block_two p { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; color: #000; font-size: 20px; line-height: 24px; text-align: left; } [dir=rtl] .screen-congratulations-raffle .claimofferRewardRaffle-logo__block_two p { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .screen-congratulations-raffle .third-party__content-top { font-size: 16px; font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; color: #000; line-height: 18px; } .screen-congratulations-raffle .third-party__content-top__block { width: 80%; } .screen-congratulations-raffle .btn.btn-claim { border: none; font-size: 14px; position: relative; } .screen-congratulations-raffle .btn.btn-claim span { position: relative; display: inline-block; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 18px; } [dir=rtl] .screen-congratulations-raffle .btn.btn-claim span { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-congratulations-raffle .btn.btn-claim span:after { content: ""; height: 1px; width: auto; border-bottom: 1px solid #333; display: inline-block; width: 100%; position: absolute; bottom: 1px; left: 0; } .screen-congratulations-raffle .mcd-footer { height: 18px; width: 100%; position: absolute; bottom: 0px; left: 0px; } .screen-congratulations-raffle .main-wrapper { width: 100%; height: 100%; position: relative; } .screen-congratulations-raffle .congratulations-title { width: 90%; display: flex; flex-direction: column; } .screen-congratulations-raffle .congratulations-title p { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 15px; line-height: 18px; } .screen-choosegame.screen-choosegame-full-screen .mcd-body { height: 70%; } .screen-choosegame .mcd-main-wrapper-tnc { width: 100% !important; } .screen-choosegame .mcd-wrapper { display: flex; flex-direction: column; justify-content: center; } .screen-choosegame .mcd-head { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 34px; line-height: 35px; letter-spacing: -0.91px; height: 13%; width: calc(100% - 55px); margin: 0 auto; margin-top: 20px; padding: 0 10px; justify-content: center; position: relative; margin-top: 10px; } @media only screen and (max-width: 360px) { .screen-choosegame .mcd-head { font-size: 30px; line-height: 34px; } } @media only screen and (min-width: 320px) and (max-width: 400px) { [dir=rtl] .screen-choosegame .mcd-head { width: calc(100% - 55px); } } @media only screen and (min-device-width: 390px) and (min-device-height: 750px) { .screen-choosegame .mcd-head { height: 10%; } } @media only screen and (min-width: 358px) and (max-width: 359px) { .screen-choosegame .mcd-head { height: 10%; } } [dir=rtl] .screen-choosegame .mcd-head { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; margin-top: 10px; } .cms-preview-ar .screen-choosegame .mcd-head { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-choosegame .mcd-head .p-contents { padding: 0; } .screen-choosegame .submenu { height: 26px; display: flex; flex-direction: row-reverse; padding-right: 10px; width: calc(100% - 35px); align-items: center; margin: 0 auto; } [dir=rtl] .screen-choosegame .submenu { padding-right: 0px; padding-left: 10px; } .screen-choosegame .submenu div { width: 10px; height: 10px; border: 2px solid #fff; } .screen-choosegame .mobile-game { background-color: #1a1a1a; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 2px solid green; width: calc(100% - 30px); margin: 0 auto; padding: 0; border-top: 0px; height: calc(100% - 78px); } .screen-choosegame .mobile-game .full-screen { width: calc(100% - 30px); display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: center; } .screen-choosegame .mobile-game .full-screen .game-title { display: flex; flex-direction: row; align-items: center; justify-content: center; margin: 12px 0px; padding: 0px 27px; width: 97%; flex-direction: column; } .screen-choosegame .mobile-game .full-screen .game-title .game-image img { width: 180px; } @media only screen and (max-width: 390px) and (max-height: 850px) { .screen-choosegame .mobile-game .full-screen .game-title .game-image img { width: 148px; } } @media only screen and (max-width: 360px) and (max-height: 780px) { .screen-choosegame .mobile-game .full-screen .game-title .game-image img { width: 125px; } } .screen-choosegame .mobile-game .full-screen .game-title .game-name { display: flex; gap: 15px; flex-direction: row; align-items: center; } .screen-choosegame .mobile-game .full-screen .game-title .game-name p { font-size: 28px; line-height: 30px; color: #ffb71b; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: center; text-transform: uppercase; } .screen-choosegame .mobile-game .full-screen .game-title .game-name img { width: 28px; } .screen-choosegame .mobile-game .full-screen .game-border { margin-bottom: 10px; width: 100%; margin-top: -10px; } .screen-choosegame .mobile-game .full-screen .game-border img { width: 100%; } .screen-choosegame .mobile-game .full-screen .section-title { font-size: 26px; line-height: 28px; color: #ffb71b; margin-bottom: 18px; text-align: left; width: 97%; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; } [dir=rtl] .screen-choosegame .mobile-game .full-screen .section-title { text-align: right; } .screen-choosegame .mobile-game .full-screen .section-reward { min-height: 400px; justify-content: center; align-items: center; display: flex; } .screen-choosegame .mobile-game .full-screen .section-reward img { width: 200px; } .screen-choosegame .mobile-game .full-screen .section-border { width: 100%; background-color: #ffb71b; height: 10px; } .screen-choosegame .mobile-game .full-screen .seperator { margin: 0 auto; text-align: center; color: #ffae06; font-size: 35px; line-height: 37px; margin-top: 20px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; margin-bottom: 10px; } .screen-choosegame .mobile-game .global-cta-container { display: flex; justify-content: center; width: 100%; max-width: 800px; margin: 0 auto; padding: 0 0px 20px; z-index: 10; position: relative; width: calc(100% - 30px); padding-top: 15px; } .screen-choosegame .mobile-game .global-cta-container .cta { height: 42px; border: none; cursor: pointer; transition: all 0.3s ease; position: relative; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; line-height: 18px; font-size: 16px; } .screen-choosegame .mobile-game .global-cta-container .cta.next { background: #fff; color: #000000; border: 3px solid #000; cursor: pointer; outline: none; width: 172px; } .screen-choosegame .mobile-game .global-cta-container .cta.next::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(100% - 12px); height: calc(100% - 10px); border: 2px dotted #000; pointer-events: none; } .screen-choosegame .mobile-game .global-cta-container .cta.next::after { content: ""; position: absolute; top: 1px; left: 1px; width: calc(100% - 2px); height: calc(100% - 0px); box-shadow: inset -5px -5px 0px #ccc; pointer-events: none; } .w100 { width: 100% !important; } .h94 { height: 84px !important; } .screen-oops .oops-wrap { flex-direction: column; align-items: center !important; } .screen-oops .oops-wrap .logo-oops { width: 45px; margin-top: -14px; margin-bottom: 30px; } .screen-oops .oops-content { display: flex; width: calc(100% - 30px); flex-direction: column; margin: 0 auto; height: calc(100% - 418px); } .screen-oops .oops-content .oops-img { width: 55%; margin-left: 0; margin-bottom: 20px; } [dir=rtl] .screen-oops .oops-content .oops-img { margin-right: 0; } .screen-oops .oops-content h1 { font-size: 65px; line-height: 67px; margin-bottom: 20px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-oops .oops-content p { font-size: 22px; line-height: 24px; margin-bottom: 30px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .screen-oops .oops-content .error { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 24px; line-height: 26px; margin-bottom: 30px; } .screen-oops .oops-content img { width: 100%; margin: 0 auto; height: 100%; -o-object-fit: contain; object-fit: contain; } .screen-oops .l-btn { font-size: 16px; cursor: pointer; transition: all 0.3s ease; position: relative; background: #F5F7F8; color: #000000; border: 3px solid #000; cursor: pointer; box-shadow: -8px 8px 0px rgba(0, 0, 0, 0.3); outline: none; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; min-width: 100px; height: 40px; display: flex; align-items: center; justify-content: center; } @media only screen and (min-width: 360px) and (min-height: 670px) { .screen-oops .l-btn { height: 45px; } } .screen-oops .l-btn span { padding: 0 12px; } .screen-oops .l-btn::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 6px) !important; height: calc(100% - 13px); border: 2px dotted #000; pointer-events: none; } .screen-oops .l-btn::after { content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); box-shadow: inset -3px -3px 4px rgba(0, 0, 0, 0.7); pointer-events: none; } .screen-oops .l-btn.l-btn-200 { min-width: 200px; } .screen-oops .l-btn.l-btn-disabled { pointer-events: none; opacity: 0.6; } .snowflake { position: absolute; position: relative; left: 12px; width: 11px; transform: translate(-3px, 1px); } [dir=rtl] .snowflake { left: auto; right: 12px; } .howtoplay-height-adjust { height: calc(100% - 84px); } .h100 { height: 100%; } .logo-planet90 { width: 278px; } #section-gameSelectionScreen .l-box-panel, #section-choosegame .l-box-panel { justify-content: center; } #section-gameSelectionScreen .l-sub-title { font-size: 22px; line-height: 1; } @media only screen and (max-width: 390px) and (max-height: 676px) { #section-gameSelectionScreen .l-sub-title { font-size: 20px; } } @media only screen and (max-width: 360px) and (max-height: 820px) { #section-gameSelectionScreen .l-sub-title { font-size: 18px; } } @media only screen and (max-width: 360px) and (max-height: 800px) { #section-gameSelectionScreen .l-sub-title { font-size: 18px; } } @media only screen and (max-width: 375px) and (max-height: 812px) { #section-gameSelectionScreen .l-sub-title { font-size: 18px; } } [dir=rtl] #section-gameSelectionScreen .l-sub-title { font-size: 15px; line-height: 1; } @media only screen and (max-width: 390px) and (max-height: 676px) { [dir=rtl] #section-gameSelectionScreen .l-sub-title { font-size: 13px; } } @media only screen and (max-width: 360px) and (max-height: 820px) { [dir=rtl] #section-gameSelectionScreen .l-sub-title { font-size: 15px; } } @media only screen and (max-width: 360px) and (max-height: 800px) { [dir=rtl] #section-gameSelectionScreen .l-sub-title { font-size: 14px; } } @media only screen and (max-width: 360px) and (max-height: 612px) { [dir=rtl] #section-gameSelectionScreen .l-sub-title { font-size: 12px; } } #section-shopRaffleDataCollectionForm .l-light-title, #section-dealsRaffleDataCollectionForm .l-light-title, #section-gameRaffleDataCollectionForm .l-light-title, #section-shopMerchandiseDataCollectionForm .l-light-title { margin-bottom: 12px !important; } .is-preview .tokyo-screen .intro-slider-overflow .bottomimage { width: 28%; } .is-preview .rewarddetail-screen .intro-slider-overflow .topimage { width: 150px; } .is-preview .rewarddetail-screen .intro-slider-overflow .bottomimage { width: 175px; } .is-preview .section-offers-deal .panel { height: 175px; } .is-preview .intro-screen .intro-swiper-container .swiper-slide .slide-scroll { height: calc(100% - 206px); overflow-y: scroll; } .is-preview #section-mcdeliveryHowToPlay .l-txt, .is-preview #section-howToPlayBI .l-txt { font-size: 17px; } .is-preview #section-gameSelectionScreen .l-sub-title { font-size: 18px; line-height: 1; } .is-preview #section-shopRaffleDataCollectionForm .l-main-wrapper { height: calc(100% - 23px) !important; } .is-preview #section-shopRaffleDataCollectionForm .l-txt { font-size: 16px !important; } .is-preview #section-shopRaffleDataCollectionForm .l-wrapper-with-btn { padding-bottom: 0px !important; } .is-preview #section-dealsRaffleDataCollectionForm .l-main-wrapper { height: calc(100% - 23px) !important; } .is-preview #section-dealsRaffleDataCollectionForm .l-txt { font-size: 16px !important; } .is-preview #section-dealsRaffleDataCollectionForm .l-wrapper-with-btn { padding-bottom: 0px !important; } .is-preview #section-shopMerchandiseDataCollectionForm .l-main-wrapper { height: calc(100% - 23px) !important; } .is-preview #section-shopMerchandiseDataCollectionForm .l-txt { font-size: 16px !important; } .is-preview #section-shopMerchandiseDataCollectionForm .l-wrapper-with-btn { padding-bottom: 0px !important; } .is-preview #section-gameRaffleDataCollectionForm .l-main-wrapper { height: calc(100% - 23px) !important; } .is-preview #section-gameRaffleDataCollectionForm .l-txt { font-size: 16px !important; } .is-preview #section-gameRaffleDataCollectionForm .l-wrapper-with-btn { padding-bottom: 9px !important; } .is-preview .absolute80 { bottom: 75px; } .is-preview .universe__video-panel { transform: translate(-55.906px, -18.8249px); width: 817px; height: 696px; } .is-preview .gap5 { gap: 5px; } .is-preview .label-text { font-size: 15px !important; } .is-preview .form-field { width: calc(100% - 18px) !important; } .is-preview .section-deal-claim .deals-window__img .totebag { width: 44px; } .is-preview .l-reward-slider .swiper-slide { width: 200px; } .is-preview .intro-screen .intro-swiper-container .swiper-slide .slide-content .slide-text p { font-size: 17px; line-height: 19px; } .is-preview .intro-screen .intro-swiper-container .swiper-slide .slide-content .slide-text { font-size: 17px; line-height: 19px; } .is-preview .rewarddetail-screen .intro-swiper-container .swiper-slide .slide-content .slide-text p { font-size: 17px; line-height: 19px; } .is-preview .rewarddetail-screen .intro-swiper-container .swiper-slide .slide-content .slide-text { font-size: 17px; line-height: 19px; } .is-preview .tokyo-screen .intro-swiper-container .swiper-slide .slide-content .slide-text p { font-size: 17px; line-height: 19px; } .is-preview .tokyo-screen .intro-swiper-container .swiper-slide .slide-content .slide-text { font-size: 17px; line-height: 19px; } .is-preview .menu__nav li span { font-size: 20px; line-height: 22px; } .is-preview .rewarddetail-screen .intro-swiper-container .swiper-slide .slide-content h1 { font-size: 34px; line-height: 38px; } .is-preview .intro-screen .intro-swiper-container .swiper-slide .slide-content h1 { font-size: 34px; line-height: 38px; } .is-preview .tokyo-screen .intro-slider-overflow .innerimage { width: 80%; margin-bottom: 5px; } .is-preview .fan__rewards-label { font-size: 12px; } .is-preview .fan__rewards-text { font-size: 12px; } .is-preview .l-reward-slider .l-window .l-window__content .l-txt:last-child { font-size: 12px; line-height: 1; } .is-preview .l-reward-slider .l-window .l-window__content .l-main-title { font-size: 27px; line-height: 1; } .is-preview .select-game { width: 110px; } .is-preview .l-wrapper-btm3 { height: 60px; width: 100%; } .is-preview #section-shopInsufficientRewardsPoints .l-reward-slider .l-window .l-window__content .l-reward-slider__image-block img { -o-object-fit: contain; object-fit: contain; max-width: 35%; height: auto; } .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(43, 43, 43, 0.51); z-index: 50; visibility: hidden; pointer-events: initial !important; } .tnc-popup { background: transparent !important; backdrop-filter: blur(3px); top: 10% !important; transition: 0s !important; transform: none !important; opacity: 1 !important; -webkit-backdrop-filter: blur(3px); transition: ease-out !important; } @media only screen and (max-device-width: 414px) and (max-device-height: 736px) and (-webkit-min-device-pixel-ratio: 2) { .tnc-popup { top: 9% !important; } } @media only screen and (max-device-width: 375px) and (max-device-height: 667px) and (-webkit-min-device-pixel-ratio: 2) { .tnc-popup { top: 10% !important; } } .modal { position: fixed; top: 50%; left: 50%; width: 75%; height: 280px; background: #fff; z-index: 100; visibility: hidden; opacity: 0; transition: 0.5s ease-out; transform: translateY(-100%) translateX(-50%); border-radius: 10px; padding: 50px 20px 20px 20px; } .modal.tnc-modal { top: 2% !important; height: 83% !important; width: 82%; border-radius: 8px; padding: 25px 20px 20px 20px; } @media only screen and (max-device-width: 375px) and (max-device-height: 667px) and (-webkit-min-device-pixel-ratio: 2) { .modal.tnc-modal { top: 10% !important; } } .modal.tnc-modal ::-webkit-scrollbar { width: 8px; } .modal.tnc-modal ::-webkit-scrollbar-track { box-shadow: inset 0 0 8px transparent; border-radius: 10px; } .modal.tnc-modal ::-webkit-scrollbar-thumb { background: #CDCDCD; border-radius: 10px; } .modal.tnc-modal ::-webkit-scrollbar-thumb:hover { background: #CDCDCD; } .modal.tnc-modal .l-btn-close { top: 5%; } .modal.tnc-modal .l-btn-close img { width: 25px; height: 25px; } .modal.tnc-modal h3 { font-size: 31px; line-height: 31px; padding-bottom: 15px; } [dir=rtl] .modal.tnc-modal { width: 82%; padding: 25px 20px 20px 20px; height: 74% !important; top: 10% !important; } .modal.double-raffle-modal { top: 50%; left: 50%; transform: translate(-50%, -50%) !important; width: 80%; height: auto; border-radius: 20px; padding: 25px 20px 20px 20px; display: flex; align-items: center; justify-content: center; text-align: center; max-height: 50px; box-shadow: 10px 15px 20px rgba(0, 0, 0, 0.3); transition: all 1s ease-in-out; opacity: 0; } .modal.double-raffle-modal .modal__content { justify-content: space-between; height: 100%; align-items: center; text-align: center; width: 85%; margin: 0 auto; } @media only screen and (max-device-width: 320px) and (max-device-height: 600px) and (-webkit-min-device-pixel-ratio: 2) { .modal.double-raffle-modal .modal__content { width: 100%; } } @media only screen and (max-width: 358px) and (max-height: 598px) { .modal.double-raffle-modal .modal__content { width: 88%; } } @media only screen and (max-device-width: 360px) and (max-device-height: 650px) and (-webkit-min-device-pixel-ratio: 2) { .modal.double-raffle-modal .modal__content { width: 100%; } } .modal.double-raffle-modal p { font-size: 22px; line-height: 26px; margin-bottom: 30px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; opacity: 0; transition: opacity 0.5s ease-in; transition-delay: 0.5s; } [dir=rtl] .modal.double-raffle-modal p { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .modal.double-raffle-modal .double-raffle-content { display: inline-flex; flex-direction: row; justify-content: space-evenly; width: 100%; opacity: 0; transition: opacity 0.5s ease-in; transition-delay: 0.8s; gap: 15px; } .modal.double-raffle-modal .double-raffle-content .yes { border: 1px solid #DB0007; border-radius: 40px; width: 100px; height: 45px; font-size: 24px; line-height: normal; background-color: #DB0007; color: #fff; font-family: "SpeedeeBold"; } [dir=rtl] .modal.double-raffle-modal .double-raffle-content .yes { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .modal.double-raffle-modal .double-raffle-content button { box-shadow: 5px 2px 18px rgba(0, 0, 0, 0.5); animation: shadowPulse 1s ease-in-out infinite; } .modal.voucher-code-modal { top: 50%; left: 50%; transform: translate(-50%, -50%) !important; width: 85%; height: auto; border-radius: 8px; padding: 35px 20px 30px 20px; display: flex; align-items: center; justify-content: center; text-align: center; } @media only screen and (max-device-width: 320px) and (max-device-height: 600px) and (-webkit-min-device-pixel-ratio: 2) { .modal.voucher-code-modal { height: 40%; } } @media only screen and (max-device-width: 360px) and (max-device-height: 650px) and (-webkit-min-device-pixel-ratio: 2) { .modal.voucher-code-modal { height: 40%; } } .modal.voucher-code-modal .modal__content { justify-content: space-between; height: 100%; align-items: center; text-align: center; width: 85%; margin: 0 auto; } @media only screen and (max-device-width: 320px) and (max-device-height: 600px) and (-webkit-min-device-pixel-ratio: 2) { .modal.voucher-code-modal .modal__content { width: 100%; } } @media only screen and (max-width: 358px) and (max-height: 598px) { .modal.voucher-code-modal .modal__content { width: 88%; } } @media only screen and (max-device-width: 360px) and (max-device-height: 650px) and (-webkit-min-device-pixel-ratio: 2) { .modal.voucher-code-modal .modal__content { width: 100%; } } .modal.voucher-code-modal .modal__content .l-btn-close { top: -4%; } .modal.voucher-code-modal p.voucher-static-content { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .modal.voucher-code-modal p.voucher-static-content { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .modal.voucher-code-modal p.title-error-content { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .modal.voucher-code-modal p.title-error-content { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .modal.voucher-code-modal .popup-terms { margin: 20px 0 10px; } .modal.voucher-code-modal .popup-terms .l-center { gap: 10px; } .modal.voucher-code-modal .popup-terms span { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 15px; line-height: 19px; color: #2C2F32; display: inline-block; position: relative; } .modal.voucher-code-modal .popup-terms span:before { content: ""; width: 100%; height: 1px; border-bottom: 1px solid #2C2F32; position: absolute; bottom: 0; left: 0; } .modal.voucher-code-modal .popup-terms img { width: 20px; height: auto; } .modal.voucher-code-modal .swiper-feature { width: 100px; height: 35px; margin: 10px 0; display: flex; gap: 5px; justify-content: center; } .modal.voucher-code-modal .swiper-feature .swiper-feature__icon { width: 35px; height: 35px; position: relative; display: flex; align-items: center; justify-content: center; } .modal.voucher-code-modal .swiper-feature .swiper-feature__icon .l-tooltip { top: -47px; } .modal.voucher-code-modal .swiper-feature .swiper-feature__icon .icon-img-block { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 100%; } .modal.voucher-code-modal .swiper-feature .swiper-feature__icon .icon-img-block img { width: 100%; height: auto; } .modal.voucher-code-modal .head { font-size: 18px; color: #2C2F32; line-height: 22px; margin-bottom: 30px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .modal.voucher-code-modal .head { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .modal.voucher-code-modal p { font-size: 18px; line-height: 22px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; color: #2C2F32; } [dir=rtl] .modal.voucher-code-modal p { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .modal.voucher-code-modal .voucher-code-content { display: block; flex-direction: row; justify-content: space-evenly; width: 100%; margin-bottom: 60px; } .modal.voucher-code-modal .voucher-code-content .code { color: #E90003; font-size: 22px; line-height: 36px; margin-bottom: 0 !important; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .modal.voucher-code-modal .voucher-code-content .code { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .modal.voucher-code-modal .voucher-code-content .instructionsWrap { position: relative; padding-right: 40px; height: 31px; display: inline-flex; align-items: center; } .modal.voucher-code-modal .voucher-code-content .instructionsWrap .swiper-feature__icon { position: absolute; top: 0px; right: 0; width: 30px; height: 30px; } .modal.voucher-code-modal .voucher-code-content .instructionsWrap .swiper-feature__icon img { width: 100%; height: auto; } .modal.voucher-code-modal .voucher-code-content .instructionsWrap .l-tooltip { top: -40px; } .modal.voucher-code-modal .voucher-code-content .instructionsWrap p.voucher-code { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif !important; min-width: 100px; } [dir=rtl] .modal.voucher-code-modal .voucher-code-content .instructionsWrap p.voucher-code { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif !important; direction: ltr; } .modal.voucher-code-modal .voucher-code-content .voucher-redeem { cursor: pointer; position: relative; margin: 30px 0; font-size: 16px; line-height: 22px; display: inline-block; text-decoration: none; color: #2C2F32; } .modal.voucher-code-modal .voucher-code-content .voucher-redeem::before { content: ""; width: 100%; height: 2px; border-bottom: 1px solid #000; position: absolute; bottom: 0; left: 0; } .modal.voucher-code-modal .voucher-code-content .copycore { border-radius: 60px; border: 1px solid #D9D9D9; width: 34px; height: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: white; position: absolute; right: 0px; z-index: 13; bottom: 0px; } [dir=rtl] .modal.voucher-code-modal .voucher-code-content .copycore { bottom: 0px; } @media only screen and (max-width: 358px) and (max-height: 598px) { .modal.voucher-code-modal .voucher-code-content .copycore { right: 0px; z-index: 8; bottom: auto; } } .modal.voucher-code-modal .voucher-code-content .copycore img { width: 18px; } .modal.voucher-code-modal .tnc button { font-size: 14px !important; line-height: 18px !important; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; color: #2C2F32; margin-top: 35px; } [dir=rtl] .modal.voucher-code-modal .tnc button { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .modal.voucher-code-modal .tnc img { width: 18px; height: 18px; position: relative; top: 5px; margin-left: 6px; } [dir=rtl] .modal.voucher-code-modal .tnc img { margin-right: 6px; margin-left: 0px; } .modal.intro-modal { top: 30%; width: 280px; height: auto; height: 230px; border-radius: 0px; } .modal.intro-modal.with-text { height: 30%; } .modal.intro-modal .l-btn-close { top: 5%; } .modal.intro-modal .l-btn-close img { width: 25px; height: 25px; } .modal.double-raffle-modal-form { top: 50%; left: 50%; transform: translate(-50%, -50%) !important; width: 80%; height: auto; border-radius: 20px; padding: 25px 20px 20px 20px; display: flex; align-items: center; justify-content: center; text-align: center; max-height: 50px; box-shadow: 10px 15px 20px rgba(0, 0, 0, 0.3); transition: all 1s ease-in-out; opacity: 0; } .modal.double-raffle-modal-form .modal__content { justify-content: space-between; height: 100%; align-items: center; text-align: center; width: 85%; margin: 0 auto; } @media only screen and (max-device-width: 320px) and (max-device-height: 600px) and (-webkit-min-device-pixel-ratio: 2) { .modal.double-raffle-modal-form .modal__content { width: 100%; } } @media only screen and (max-width: 358px) and (max-height: 598px) { .modal.double-raffle-modal-form .modal__content { width: 88%; } } @media only screen and (max-device-width: 360px) and (max-device-height: 650px) and (-webkit-min-device-pixel-ratio: 2) { .modal.double-raffle-modal-form .modal__content { width: 100%; } } .modal.double-raffle-modal-form p { font-size: 22px; line-height: 26px; margin-bottom: 30px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; opacity: 0; transition: opacity 0.5s ease-in; transition-delay: 0.5s; } [dir=rtl] .modal.double-raffle-modal-form p { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .modal.double-raffle-modal-form img { transition: opacity 0.5s ease-in; transition-delay: 0.5s; } .modal.double-raffle-modal-form .double-raffle-content-form { display: inline-flex; flex-direction: row; justify-content: space-evenly; width: 100%; opacity: 0; transition: opacity 0.5s ease-in; transition-delay: 0.8s; gap: 15px; } .modal.double-raffle-modal-form .double-raffle-content-form .yes { border: 1px solid #DB0007; border-radius: 40px; width: 100px; height: 45px; font-size: 24px; line-height: normal; background-color: #DB0007; color: #fff; font-family: "SpeedeeBold"; } [dir=rtl] .modal.double-raffle-modal-form .double-raffle-content-form .yes { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .modal.double-raffle-modal-form .double-raffle-content-form button { box-shadow: 5px 2px 18px rgba(0, 0, 0, 0.5); animation: shadowPulse 1s ease-in-out infinite; } .modal.no-close-btn { padding: 20px; } .modal h3 { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 25px; line-height: 29px; margin-bottom: 15px; } [dir=rtl] .modal h3 { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .cms-preview-ar .modal h3 { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .voucher-code-modal .swiper .swiper-pagination { display: flex; align-items: center; justify-content: center; height: 18px !important; position: static !important; } .modal__panel.show { display: block; } .modal__panel.hide { display: none; } .modal__panel .p-contents { text-align: center; } .modal__panel .p-contents.tnc-contents { width: calc(100% - 15px); overflow: auto; padding-right: 15px; margin-bottom: 32px; } [dir=rtl] .modal__panel .p-contents.tnc-contents { padding-right: 0px; padding-left: 15px; } .modal__panel .p-contents.tnc-contents p { text-align: left !important; } .modal__panel .p-contents p { text-align: center; } .modal__content { justify-content: space-between; height: 100%; align-items: center; text-align: center; } .mask.active { visibility: visible; opacity: 1; } .mask.active + .modal { visibility: visible; opacity: 1; transform: translateY(0) translateX(-50%); } .mask.active + .modal.double-raffle-modal { max-height: 300px; opacity: 1; } .mask.active + .modal.double-raffle-modal p { opacity: 1; } .mask.active + .modal.double-raffle-modal .double-raffle-content { opacity: 1; } .mask.active + .modal.double-raffle-modal-form { max-height: 300px; opacity: 1; } .mask.active + .modal.double-raffle-modal-form p { opacity: 1; } .mask.active + .modal.double-raffle-modal-form img { opacity: 1; } .mask.active + .modal.double-raffle-modal-form .double-raffle-content-form { opacity: 1; } @keyframes shadowPulse { 0% { box-shadow: 5px 2px 18px rgba(0, 0, 0, 0.3); } 50% { box-shadow: 5px 2px 25px rgba(0, 0, 0, 0.5); } 100% { box-shadow: 5px 2px 18px rgba(0, 0, 0, 0.3); } } .corner-ribbon { width: 200px; background: #e43; position: absolute; top: 25px; text-align: center; line-height: 50px; letter-spacing: 1px; color: #f0f0f0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); z-index: 9999; } .corner-ribbon.sticky { position: fixed; } .corner-ribbon.shadow { box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); } .corner-ribbon.top-left { top: 25px; left: -50px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .corner-ribbon.top-right { top: 25px; right: -50px; transform: rotate(45deg); -webkit-transform: rotate(45deg); left: initial; } .ar .corner-ribbon.top-right { top: 25px; left: -50px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); right: initial; } .corner-ribbon.white { background: #f0f0f0; color: #555; } .corner-ribbon.black { background: #333; } .corner-ribbon.grey { background: #999; } .corner-ribbon.blue { background: #39d; } .corner-ribbon.green { background: #2c7; } .corner-ribbon.turquoise { background: #1b9; } .corner-ribbon.purple { background: #95b; } .corner-ribbon.red { background: #e43; } .corner-ribbon.orange { background: #e82; } .corner-ribbon.yellow { background: #ec0; } .universe__wrapper { width: 100vw; height: 100vh; overflow: hidden; position: relative; touch-action: none; background: #FFB71B; padding: 0; } .universe__window { width: 70%; position: absolute; left: 20px; top: 18%; pointer-events: none; z-index: 4; pointer-events: none; } [dir=rtl] .universe__window { right: 20px; left: auto; } .universe__name { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 25px; } .universe__video-panel { position: absolute; width: 975px; height: 875px; top: 0; left: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: grab; will-change: transform; backface-visibility: hidden; transform-style: preserve-3d; transition: opacity 500ms ease-in-out; pointer-events: auto; } .universe__video-panel.dragging { cursor: grabbing; } /* Video block styles */ .universe__video-block { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; display: none; transition: opacity 500ms ease-in-out; } .universe__video-block video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } video { width: 100%; height: 100%; display: block; image-rendering: optimizeQuality; } .universe-cta { position: absolute; padding: 8px 12px; background: rgba(255, 255, 255, 0.9); border-radius: 4px; font-weight: bold; -webkit-user-select: none; -moz-user-select: none; user-select: none; touch-action: manipulation; min-width: 110px; min-height: 120px; text-align: center; z-index: 15; /* Higher z-index */ border: 2px solid #333; cursor: pointer; transition: all 0.3s ease; pointer-events: auto; opacity: 0; } /* CTA positions */ .fanShop-cta { left: 400px; top: 300px; } .arcade-cta { left: 1000px; top: 1200px; } .deals-cta { left: 1600px; top: 200px; } .universe__nav { width: 300px; height: 50px; position: absolute; background: grey; z-index: 7; bottom: 0; left: 0; } /* Flow sections styling */ /* Section-specific styles */ #section-universe { background: #FFB71B; } /* Back button styles */ .back-button { position: absolute; top: 120px; left: 20px; padding: 10px 20px; background: rgba(255, 255, 255, 0.8); border: none; border-radius: 5px; cursor: pointer; font-weight: bold; transition: background 0.3s ease; } .back-button:hover { background: rgb(255, 255, 255); } .universe__logo { width: 35px; height: 30px; position: absolute; left: 20px; top: 5%; z-index: 4; pointer-events: none; } [dir=rtl] .universe__logo { right: 20px; left: auto; } .universe__logo img { width: 100%; height: auto; } .universe__hamburger { width: 35px; height: 30px; position: absolute; right: 20px; top: 5%; z-index: 4; display: flex; align-items: center; justify-content: center; } [dir=rtl] .universe__hamburger { left: 20px; right: auto; } .universe__hamburger img { width: 24px; height: auto; } .universe__gradient { pointer-events: none; width: 100%; height: 337px; -o-object-fit: cover; object-fit: cover; position: absolute; bottom: -5px; left: 0; z-index: 4; opacity: 0.9; } .universe__bottom { width: 100%; height: 110px; bottom: 40px; z-index: 5; width: 270px; flex-direction: column; pointer-events: none; } .universe__bottom img { width: 40px; } .universe__bottom .universe__txt { text-align: center; font-size: 22px; color: #fff; margin-top: 20px; } .universe__window, .universe__bottom { transition: opacity 0.4s ease, visibility 0.4s ease; opacity: 1; visibility: visible; } .universe__window.hide-content, .universe__bottom.hide-content { opacity: 0; visibility: hidden; pointer-events: none; } .hide-content .universe__window, .hide-content .universe__bottom { opacity: 0; visibility: hidden; pointer-events: none; } .universe__window.hide-universe-ui, .universe__bottom.hide-universe-ui { opacity: 0; visibility: hidden; pointer-events: none; } [dir=rtl] .universe .l-window::after { right: -8px; left: auto; } .menu .mcd-main-wrapper { display: flex; align-items: flex-end; width: 100%; } .menu__container { height: calc(100% - 70px); width: 100%; position: relative; } .menu__panel { height: 100%; display: flex; flex-direction: column; position: relative; z-index: 5; background-color: #ffffff; border: 1px solid #000; clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); } .menu__top-panel { height: 210px; flex-shrink: 0; position: relative; padding: 0 10px; } .menu__top-panel .l-border-star { width: calc(100% - 15px); position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); } [dir=rtl] .menu__top-panel .l-border-star { left: auto; right: 50%; transform: translateX(50%); } .menu__content-panel { flex: 1; } .menu__btm-panel { height: 70px; flex-shrink: 0; } .menu__btm-panel .menu__btm-inner { display: flex; justify-content: space-between; padding: 0 15px; } .menu__layer-one, .menu__layer-two, .menu__layer-three { position: absolute; } .menu__layer-one { top: 7px; left: -7px; background-color: #000; z-index: 3; clip-path: polygon(0 0, calc(100% - 31px) 0, 100% 31px, 100% 100%, 0 100%); } .menu__layer-two { background-color: #ffffff; border: 1px solid #000; z-index: 2; top: -9px; left: 8px; clip-path: polygon(0 0, calc(100% - 31px) 0, 100% 31px, 100% 100%, 0 100%); } .menu__layer-three { top: -4px; left: 3px; background-color: #000; z-index: 1; clip-path: polygon(0 0, calc(100% - 31px) 0, 100% 31px, 100% 100%, 0 100%); } .menu__logo { width: 137px; height: 127px; } .menu__file { width: 28px; height: 40px; position: absolute; left: 20px; top: 20px; } .menu__fold { width: 30px; height: 36px; position: absolute; } .menu__fold svg { width: 100%; height: auto; } .menu__fold.menu__fold--one { right: -1.4px; top: -4px; } .menu__fold.menu__fold--one svg { transform: rotate(-3deg) translate(-0.7px, 0.6px); } .menu__fold.menu__fold--two { right: -1px; top: -3px; } .menu__fold.menu__fold--two svg { transform: rotate(-3deg) translate(-0.7px, 0px); } .menu__nav { margin-left: 20px; position: relative; top: 13%; width: 100%; } @media only screen and (min-width: 360px) and (min-height: 740px) { .menu__nav { width: 86%; } } [dir=rtl] .menu__nav { margin-right: 20px; margin-left: 0px; } .menu__nav li { padding-left: 30px; position: relative; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 30px; margin-bottom: 20px; } @media only screen and (min-width: 360px) and (min-height: 740px) { .menu__nav li { font-size: 36px; line-height: 1; } } [dir=rtl] .menu__nav li { padding-right: 30px; padding-left: 0px; } .menu__nav li img { width: 19px; height: 18px; position: absolute; left: 0; top: 7px; } [dir=rtl] .menu__nav li img { right: 0; } @media only screen and (min-width: 360px) and (min-height: 740px) { .menu__nav li img { top: 10px; } } .fan__window { width: 100%; } .fan__window .l-window__content { padding: 0; } .fan__top-panel { height: 50px; display: flex; position: relative; padding: 10px 20px 0; align-items: flex-start; } @media only screen and (min-width: 360px) and (min-height: 670px) { .fan__top-panel { padding: 15px 20px 0; } } .fan__top-panel .l-border-star { width: calc(100% - 40px); position: absolute; bottom: 0; left: 20px; right: 20px; overflow: hidden; } .fan__title { display: flex; align-items: center; gap: 10px; position: relative; top: -3px; } @media only screen and (min-width: 360px) and (min-height: 670px) { .fan__title { top: -4px; } } .fan__title-txt { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 35px; color: #000; line-height: 1; } [dir=rtl] .fan__title-txt { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .fan__title-icon { width: 40px; height: 36px; display: block; position: relative; top: 2px; } @media only screen and (min-width: 360px) and (min-height: 670px) { .fan__title-icon { top: 3px; } } .fan__cart { width: 27px; height: 30px; position: absolute; top: 8px; right: 10px; } @media only screen and (min-width: 360px) and (min-height: 670px) { .fan__cart { width: 30px; } } [dir=rtl] .fan__cart { left: 20px; right: unset; } .fan__cart-badge { position: absolute; top: -8px; right: -8px; background-color: #dc143c; color: white; font-size: 12px; width: 20px; height: 16px; min-width: 18px; text-align: center; line-height: 1; } .fan__exchange-text { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 18px; color: #000; text-align: left; line-height: 1.2; height: 60px; display: flex; align-items: center; padding: 0 20px; } [dir=rtl] .fan__exchange-text { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } @media only screen and (min-width: 360px) and (min-height: 670px) { .fan__exchange-text { height: 65px; } } .fan__rewards-section { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 15px; height: 50px; background-color: #EDEDED; } @media only screen and (min-width: 360px) and (min-height: 670px) { .fan__rewards-section { height: 60px; gap: 20px; } } .fan__rewards-left { flex: 1; } .fan__rewards-label { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 14px; color: #000; line-height: 1.2; text-transform: uppercase; text-align: left; } [dir=rtl] .fan__rewards-label { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .fan__rewards-right { display: flex; align-items: center; gap: 8px; } .fan__rewards-points { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 42px; color: #000; line-height: 1; } [dir=rtl] .fan__rewards-points { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .fan__rewards-text { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 15px; color: #000; text-transform: uppercase; line-height: 1.1; text-align: left; } [dir=rtl] .fan__rewards-text { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .fan__merch-info { padding: 20px; } .fan__merch-info .fan__merch-header { display: flex; align-items: center; margin-bottom: 15px; gap: 8px; } .fan__merch-info .fan__merch-arrow { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 28px; color: #000; } .fan__merch-info .fan__merch-title { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 28px; color: #000; text-transform: uppercase; } [dir=rtl] .fan__merch-info .fan__merch-title { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .fan__merch-info .fan__merch-description p { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 18px; color: #000; line-height: 1.3; margin-bottom: 20px; text-transform: uppercase; } [dir=rtl] .fan__merch-info .fan__merch-description p { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .fan__merch-info .fan__merch-description p:last-child { margin-bottom: 0; } .section-fan-reward .l-wrapper-with-btn { display: flex; flex-direction: column; gap: 20px; } @media only screen and (min-width: 360px) and (min-height: 660px) { .section-fan-reward .l-wrapper-with-btn { gap: 30px; } } @media only screen and (min-width: 400px) and (min-height: 740px) { .section-fan-reward .l-wrapper-with-btn { gap: 30px; } } .fan-reward-list { display: flex; flex-direction: column; gap: 20px; } .fan-reward-list .l-window__content { background-color: #f1efe7 !important; } .fan-reward-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 10px 10px; } @media only screen and (min-width: 360px) and (min-height: 740px) { .fan-reward-card { padding: 15px 15px 10px 15px; gap: 12px; } } .fan-reward-card .trash-btn-disabled { pointer-events: none; opacity: 0.6; } .fan-reward-card .trash-btn { width: 35px; height: 35px; position: absolute; top: 10px; right: 5px; } .fan-reward-card .trash-btn div { width: 16px; height: 20px; } .fan-reward-card .trash-btn img { -o-object-fit: contain; object-fit: contain; } .fan-reward-card .reward-title { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 28px; width: calc(100% - 62px); } [dir=rtl] .fan-reward-card .reward-title { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; line-height: 1.3; } .fan-reward-card .reward-image { width: 90px; } .fan-reward-card .reward-image img { -o-object-fit: contain; object-fit: contain; } .fan-reward-card .tshirt-image { width: 100%; height: auto; } .fan-reward-card .points-number { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 18px; } [dir=rtl] .fan-reward-card .points-number { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .fan-reward-card .points-text { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 18px; } [dir=rtl] .fan-reward-card .points-text { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .fan-add-item .l-btn { font-size: 60px; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; min-width: 55px !important; padding: 0px !important; margin-bottom: 20px; height: 53px !important; } .fan-add-item .l-btn span { margin-top: -3px; padding: 0px; } .fan-add-item .fan-add-item__txt { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 18px; } [dir=rtl] .fan-add-item .fan-add-item__txt { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .fan-add-item .fan-add-item__content { font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 18px; line-height: 22px; } [dir=rtl] .fan-add-item .fan-add-item__content { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .fan-checkout { justify-content: flex-end; } .fan-checkout .l-btn { min-width: 200px; } .fan-template-one .l-window__inner-panel { display: flex; flex-direction: column; } .fan-template-one .l-window__top-panel { flex-shrink: 0; display: flex; } .fan-template-one .l-ticket { flex-shrink: 0; display: flex; margin-bottom: 15px; } .fan-template-one .l-sub-title { flex-grow: 1; min-height: 40px; display: flex; padding-top: 15px; padding-bottom: 30px; } [dir=rtl] .fan-template-one .l-sub-title { text-align: right; } .fan-template-one .fan-reward { flex-grow: 2; min-height: 120px; display: flex; } .fan-template-one .fan-reward img { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } .fan-template-one .l-txt { flex-grow: 1; display: flex; } [dir=rtl] .fan-template-one .l-txt { text-align: right; } .fan-template-one .l-mini-title { flex-grow: 1; display: flex; } [dir=rtl] .fan-template-one .l-mini-title { text-align: right; } .fan-intro .content-panel { height: calc(100% - 95px); } .fan-user-consent h2 { font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .fan-user-consent h2 { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .fan-user-consent .l-wrap-two-btn .l-btn { min-width: 115px; } .fan-template-carousel .l-wrapper-with-btn { display: flex; gap: 15px; } @media only screen and (min-width: 360px) and (min-height: 670px) { .fan-template-carousel .l-wrapper-with-btn { gap: 20px; } } .section-form-template .l-wrapper-with-btn { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 30px; } @media only screen and (min-width: 360px) and (min-height: 670px) { .section-form-template .l-wrapper-with-btn { padding-bottom: 25px; } } @media only screen and (min-width: 400px) and (min-height: 740px) { .section-form-template .l-wrapper-with-btn { padding-bottom: 20px; } } .section-form-template .section-form__head { height: 165px; display: flex; flex-direction: column; justify-content: flex-end; } .section-form-template .section-form__body { flex: 1; overflow: hidden; padding-left: 8px; padding-bottom: 8px; } .section-form-template .section-form__body .l-window__content { height: calc(100% - 55px); } .section-form-template .section-form__body .l-form-wrapper { height: 100%; overflow-y: auto; overflow-x: hidden; } .section-form-template .section-form__body .l-form-wrapper .l-textarea { height: 100px; align-items: flex-start; } .section-form-template.input-focused { overflow: auto; } .section-form-template.input-focused .l-main-wrapper { height: 650px; } .l-reward-slider .l-txt { text-align: center !important; font-size: 16px; } .l-reward-slider .l-main-title { font-size: 29px; } @media only screen and (max-width: 390px) and (max-height: 676px) { .l-reward-slider .l-main-title { font-size: 29px; } } @media only screen and (max-width: 375px) and (max-height: 644px) { .l-reward-slider .l-main-title { font-size: 28px; } } @media only screen and (max-width: 360px) and (max-height: 612px) { .l-reward-slider .l-main-title { font-size: 20px; } } @media only screen and (max-width: 320px) and (max-height: 658px) { .l-reward-slider .l-main-title { font-size: 20px; } } [dir=rtl] .l-reward-slider .l-main-title { font-size: 28px; line-height: 1.3; } @media only screen and (max-width: 390px) and (max-height: 676px) { [dir=rtl] .l-reward-slider .l-main-title { font-size: 29px; } } @media only screen and (max-width: 375px) and (max-height: 644px) { [dir=rtl] .l-reward-slider .l-main-title { font-size: 28px; } } @media only screen and (max-width: 360px) and (max-height: 612px) { [dir=rtl] .l-reward-slider .l-main-title { font-size: 20px; } } @media only screen and (max-width: 320px) and (max-height: 658px) { [dir=rtl] .l-reward-slider .l-main-title { font-size: 20px; } } .l-reward-slider .l-window__content { background-color: #f0efe8 !important; } .tcarousel .l-reward-slider { height: calc(100% - 20px); } .tcarousel .l-reward-slider .swiper-slide { height: calc(100% - 8px); width: 230px; display: flex; flex-direction: column; justify-content: end; align-items: self-start; padding-bottom: 10px; } .tcarousel .disable-txt { font-size: 14px; line-height: 13px; } .disable-txt { font-size: 14px; line-height: 13px; } #section-shopCommonRewardRevealWithoutRaffle .l-txt p { margin-bottom: 8px; } #section-shopCommonRewardRevealWithRaffle .l-txt p { margin-bottom: 8px; } .section-offers-deal .wrap-panel { position: relative; display: flex; flex-direction: column; align-items: center; } .section-offers-deal .deals-title { height: 130px; display: flex; align-items: flex-end; justify-content: center; text-shadow: -3px 4px 0px rgb(0, 0, 0); } .section-offers-deal .deals-title span { padding-bottom: 30px; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .section-offers-deal .deals-title span { font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .section-offers-deal .sub-title { display: flex; padding: 10px 0 20px 0; } .section-offers-deal .sub-title__txt { display: flex; font-family: "Speedee Condensed Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } [dir=rtl] .section-offers-deal .sub-title__txt { text-align: right; font-family: "SpeedeeArabic-Bold", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .section-offers-deal .sub-title__icons { display: flex; gap: 5px; width: 30%; } .section-offers-deal .sub-title__icons span { width: 100%; } .section-offers-deal .sub-title__icons span img { width: 100%; height: auto; } .section-offers-deal .deals-window { width: calc(100% - 10px); } .section-offers-deal .panel { background-color: #fff; border: 2px solid #000; overflow: auto; height: 220px; } @media only screen and (max-width: 360px) and (max-height: 612px) { .section-offers-deal .panel { height: 150px; } } .section-offers-deal .panel .panel__inner { padding: 20px 10px; font-size: 18px; line-height: 1.1; } .section-offers-deal .l-window__btm { padding: 10px 0 5px; } .section-offers-deal .l-window__btm .l-btn { width: 200px; } .section-deal-list .deals-window__top-block { display: flex; -moz-column-gap: 14px; column-gap: 14px; align-items: center; } [dir=rtl] .section-deal-list .deals-window__top-block span { line-height: 1; } .section-deal-list .deals-window__icon { width: 260px; } .section-deal-list .l-main-title { display: flex; gap: 6px; } .section-deal-list .section-deal-list__dual { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding-top: 20px; padding-bottom: 70px; flex-wrap: wrap; } .section-deal-list .section-deal-list__dual .l-window .l-window__bar { flex-shrink: 0; } .section-deal-list .section-deal-list__dual .justify-fs { justify-content: flex-start !important; align-items: flex-start; height: 100%; } .section-deal-list .deals-window__img { width: 100%; height: 120px; } .section-deal-list .deals-window__img img.l-img-responsive { width: calc(100% + 20px); position: relative; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } [dir=rtl] .section-deal-list .deals-window__img img.l-img-responsive { left: auto; right: 50%; transform: translateX(50%) translateY(-50%); } .section-deal-list .l-txt-bold, .section-deal-list .l-txt { text-align: left; width: 100%; overflow-wrap: anywhere; word-break: break-word; } [dir=rtl] .section-deal-list .l-txt-bold, [dir=rtl] .section-deal-list .l-txt { text-align: right; } .section-deal-list .section-deal-list__dual-window { gap: 5px; flex-grow: 1; display: flex; } .section-deal-list .section-deal-list__box { height: calc(100vh - 50px); overflow-y: auto; overflow-x: hidden; } .section-deal-claim .section-deal-claim__title { display: flex; position: relative; height: 105px; width: 100%; display: flex; align-items: center; } [dir=rtl] .section-deal-claim .section-deal-claim__title { margin-bottom: 10px; } .section-deal-claim .section-deal-claim__title .section-deal-claim__title-inner { display: flex; height: 30px; gap: 10px; } .section-deal-claim .section-deal-claim__title .lft-arrow { width: 43px; display: flex; } [dir=rtl] .section-deal-claim .section-deal-claim__title .lft-arrow { transform: scale(-1); } .section-deal-claim .section-deal-claim__title .lft-arrow img { -o-object-fit: contain; object-fit: contain; } .section-deal-claim .section-deal-claim__title .character { width: 115px; height: 92px; position: absolute; right: 45px; bottom: -27px; } [dir=rtl] .section-deal-claim .section-deal-claim__title .character { right: auto; left: 45px; } .section-deal-claim .deals-window { width: calc(100% - 50px); height: 100%; text-align: left; } .section-deal-claim .deals-window .l-window__content { height: 100%; justify-content: space-between; } .section-deal-claim .deals-window__img { width: 100%; text-align: left; } [dir=rtl] .section-deal-claim .deals-window__img { text-align: right; } .section-deal-claim .deals-window__img .totebag { width: 60px; } [dir=rtl] .section-deal-claim .l-txt-big { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-align: right; } .section-deal-claim .section-deal-claim__content { height: 150px; width: 80%; display: flex; align-items: center; justify-content: center; } .section-deal-claim .section-deal-claim__content span { position: relative; top: 10px; } .section-deal-claim .template-two__btm-panel .l-btn { min-width: 200px; } .section-deal-congrats .section-deal-congrats__box { padding: 0 20px 20px 20px; } .section-deal-congrats .reward-image { width: 100%; } .l-reward-img-popupimage { text-align: left; justify-content: flex-start; display: flex; width: calc(100% - 113px); margin-top: 10px; position: relative; } [dir=rtl] .l-reward-img-popupimage { justify-content: flex-end; } .l-reward-img-popupimage img { width: 55px; } .flex-dir-col { flex-direction: column; } .tote-bag-text { font-size: 12px; line-height: 14px; text-align: center; font-family: "Speedee Condensed Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; text-transform: uppercase; } [dir=rtl] .tote-bag-text { font-family: "SpeedeeArabic-Regular", Helvetica, Arial, Verdana, Tahoma, sans-serif; } .back-arrow-icon { display: flex; position: relative; height: 50px; width: 100%; display: flex; align-items: center; } [dir=rtl] .back-arrow-icon { margin-bottom: 10px; } .back-arrow-icon .section-deal-claim__title-inner { display: flex; height: 30px; gap: 10px; } .back-arrow-icon .lft-arrow { width: 43px; display: flex; } [dir=rtl] .back-arrow-icon .lft-arrow { transform: scale(-1); } .back-arrow-icon .lft-arrow img { -o-object-fit: contain; object-fit: contain; }/*# sourceMappingURL=style.css.map */