.banner-section{ margin-top: 30px; overflow: hidden; border-radius: 15px; } .banner-section-img{ border-radius: 15px; width: 100%; } @media (max-width: 768px){ .banner-section{ padding-top: 15px; margin-bottom: 1rem; } } .w-90{ width: 90%; } .info-rule__wrapper{ width: 1176px; } .info-rule__container{ margin-bottom: 10px; } .info-rule__header{ display: flex; justify-content: space-between; font-weight: 500; font-size: 20px; color: white; align-items: center; padding: 10px 40px; background: #252727; border-radius: 50px; cursor: pointer; } .info-rule__content{ background-color: #1E2020; border-radius: 15px; font-size: 14px; color: #B2B2B2; padding: 20px 44px; margin-top: 10px; display: none } .info-rule__btn-toggle{ width: 41px; height:41px; background: #3A3B3C; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; transition: all .3s; transform: rotate(180deg); } .info-rule__btn-toggle.open{ transform: rotate(0); } .info-content{ list-style-type: decimal; } .info-content li{ margin-bottom: 2px; } .info-content ol{ list-style: auto; } .modal-body__center .info-rule__wrapper{ width: 100% } @media (max-width: 768px){ .info-rule__wrapper{ width: 100%; } .info-rule__header{ font-size: 14px; padding: 10px 23px; } .info-rule__btn-toggle{ width: auto; height: auto; background: transparent; } .info-rule__content{ background-color: #1E2020; border-radius: 15px; font-size: 12px; color: #B2B2B2; padding: 20px; } } /*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html):not(iframe):not(canvas):not(img):not(svg):not(video):not(audio):not(svg *):not(symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; max-height: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: inherit; } ::placeholder { color: inherit; } /* remove default dot (•) sign */ ::marker { content: normal; content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; word-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /* noto-sans-100 - cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans"; font-style: normal; font-weight: 100; src: url("/static/fonts/noto-sans-v27-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-100.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-100italic - cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans"; font-style: italic; font-weight: 100; src: url("/static/fonts/noto-sans-v27-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-100italic.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-200 - cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans"; font-style: normal; font-weight: 200; src: url("/static/fonts/noto-sans-v27-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-200.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-200italic - cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans"; font-style: italic; font-weight: 200; src: url("/static/fonts/noto-sans-v27-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-200italic.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-300 - cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans"; font-style: normal; font-weight: 300; src: url("/static/fonts/noto-sans-v27-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-300.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-300italic - cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans"; font-style: italic; font-weight: 300; src: url("/static/fonts/noto-sans-v27-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-300italic.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-regular - cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans"; font-style: normal; font-weight: 400; src: url("/static/fonts/noto-sans-v27-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-regular.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-italic - cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans"; font-style: italic; font-weight: 400; src: url("/static/fonts/noto-sans-v27-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-italic.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-500 - cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans"; font-style: normal; font-weight: 500; src: url("/static/fonts/noto-sans-v27-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-500.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-500italic - cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans"; font-style: italic; font-weight: 500; src: url("/static/fonts/noto-sans-v27-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-500italic.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-600 - cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans"; font-style: normal; font-weight: 600; src: url("/static/fonts/noto-sans-v27-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-600.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-600italic - cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans"; font-style: italic; font-weight: 600; src: url("/static/fonts/noto-sans-v27-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-600italic.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-700 - cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans"; font-style: normal; font-weight: 700; src: url("/static/fonts/noto-sans-v27-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-700.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-700italic - cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans"; font-style: italic; font-weight: 700; src: url("/static/fonts/noto-sans-v27-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-700italic.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-800 - cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans"; font-style: normal; font-weight: 800; src: url("/static/fonts/noto-sans-v27-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-800.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-800italic - cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans"; font-style: italic; font-weight: 800; src: url("/static/fonts/noto-sans-v27-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-800italic.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-900 - cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans"; font-style: normal; font-weight: 900; src: url("/static/fonts/noto-sans-v27-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-900.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-900italic - cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans"; font-style: italic; font-weight: 900; src: url("/static/fonts/noto-sans-v27-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-900italic.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-thai-100 - latin_latin-ext_thai */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Thai"; font-style: normal; font-weight: 100; src: url("/static/fonts/noto-sans-thai-v20-latin_latin-ext_thai-100.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-thai-200 - latin_latin-ext_thai */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Thai"; font-style: normal; font-weight: 200; src: url("/static/fonts/noto-sans-thai-v20-latin_latin-ext_thai-200.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-thai-300 - latin_latin-ext_thai */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Thai"; font-style: normal; font-weight: 300; src: url("/static/fonts/noto-sans-thai-v20-latin_latin-ext_thai-300.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-thai-regular - latin_latin-ext_thai */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Thai"; font-style: normal; font-weight: 400; src: url("/static/fonts/noto-sans-thai-v20-latin_latin-ext_thai-regular.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-thai-500 - latin_latin-ext_thai */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Thai"; font-style: normal; font-weight: 500; src: url("/static/fonts/noto-sans-thai-v20-latin_latin-ext_thai-500.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-thai-600 - latin_latin-ext_thai */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Thai"; font-style: normal; font-weight: 600; src: url("/static/fonts/noto-sans-thai-v20-latin_latin-ext_thai-600.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-thai-700 - latin_latin-ext_thai */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Thai"; font-style: normal; font-weight: 700; src: url("/static/fonts/noto-sans-thai-v20-latin_latin-ext_thai-700.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-thai-800 - latin_latin-ext_thai */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Thai"; font-style: normal; font-weight: 800; src: url("/static/fonts/noto-sans-thai-v20-latin_latin-ext_thai-800.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-thai-900 - latin_latin-ext_thai */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Thai"; font-style: normal; font-weight: 900; src: url("/static/fonts/noto-sans-thai-v20-latin_latin-ext_thai-900.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-thai-looped-100 - thai */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Thai Looped"; font-style: normal; font-weight: 100; src: url("/static/fonts/noto-sans-thai-looped-v12-thai-100.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-thai-looped-200 - thai */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Thai Looped"; font-style: normal; font-weight: 200; src: url("/static/fonts/noto-sans-thai-looped-v12-thai-200.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-thai-looped-300 - thai */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Thai Looped"; font-style: normal; font-weight: 300; src: url("/static/fonts/noto-sans-thai-looped-v12-thai-300.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-thai-looped-regular - thai */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Thai Looped"; font-style: normal; font-weight: 400; src: url("/static/fonts/noto-sans-thai-looped-v12-thai-regular.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-thai-looped-500 - thai */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Thai Looped"; font-style: normal; font-weight: 500; src: url("/static/fonts/noto-sans-thai-looped-v12-thai-500.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-thai-looped-600 - thai */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Thai Looped"; font-style: normal; font-weight: 600; src: url("/static/fonts/noto-sans-thai-looped-v12-thai-600.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-thai-looped-700 - thai */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Thai Looped"; font-style: normal; font-weight: 700; src: url("/static/fonts/noto-sans-thai-looped-v12-thai-700.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-thai-looped-800 - thai */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Thai Looped"; font-style: normal; font-weight: 800; src: url("/static/fonts/noto-sans-thai-looped-v12-thai-800.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-thai-looped-900 - thai */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Thai Looped"; font-style: normal; font-weight: 900; src: url("/static/fonts/noto-sans-thai-looped-v12-thai-900.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-lao-100 - lao_latin_latin-ext */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Lao"; font-style: normal; font-weight: 100; src: url("/static/fonts/noto-sans-lao-v24-lao_latin_latin-ext-100.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-lao-200 - lao_latin_latin-ext */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Lao"; font-style: normal; font-weight: 200; src: url("/static/fonts/noto-sans-lao-v24-lao_latin_latin-ext-200.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-lao-300 - lao_latin_latin-ext */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Lao"; font-style: normal; font-weight: 300; src: url("/static/fonts/noto-sans-lao-v24-lao_latin_latin-ext-300.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-lao-regular - lao_latin_latin-ext */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Lao"; font-style: normal; font-weight: 400; src: url("/static/fonts/noto-sans-lao-v24-lao_latin_latin-ext-regular.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-lao-500 - lao_latin_latin-ext */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Lao"; font-style: normal; font-weight: 500; src: url("/static/fonts/noto-sans-lao-v24-lao_latin_latin-ext-500.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-lao-600 - lao_latin_latin-ext */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Lao"; font-style: normal; font-weight: 600; src: url("/static/fonts/noto-sans-lao-v24-lao_latin_latin-ext-600.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-lao-700 - lao_latin_latin-ext */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Lao"; font-style: normal; font-weight: 700; src: url("/static/fonts/noto-sans-lao-v24-lao_latin_latin-ext-700.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-lao-800 - lao_latin_latin-ext */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Lao"; font-style: normal; font-weight: 800; src: url("/static/fonts/noto-sans-lao-v24-lao_latin_latin-ext-800.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-lao-900 - lao_latin_latin-ext */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Lao"; font-style: normal; font-weight: 900; src: url("/static/fonts/noto-sans-lao-v24-lao_latin_latin-ext-900.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-lao-looped-100 - lao_latin_latin-ext */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Lao Looped"; font-style: normal; font-weight: 100; src: url("/static/fonts/noto-sans-lao-looped-v2-lao_latin_latin-ext-100.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-lao-looped-200 - lao_latin_latin-ext */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Lao Looped"; font-style: normal; font-weight: 200; src: url("/static/fonts/noto-sans-lao-looped-v2-lao_latin_latin-ext-200.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-lao-looped-300 - lao_latin_latin-ext */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Lao Looped"; font-style: normal; font-weight: 300; src: url("/static/fonts/noto-sans-lao-looped-v2-lao_latin_latin-ext-300.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-lao-looped-regular - lao_latin_latin-ext */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Lao Looped"; font-style: normal; font-weight: 400; src: url("/static/fonts/noto-sans-lao-looped-v2-lao_latin_latin-ext-regular.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-lao-looped-500 - lao_latin_latin-ext */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Lao Looped"; font-style: normal; font-weight: 500; src: url("/static/fonts/noto-sans-lao-looped-v2-lao_latin_latin-ext-500.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-lao-looped-600 - lao_latin_latin-ext */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Lao Looped"; font-style: normal; font-weight: 600; src: url("/static/fonts/noto-sans-lao-looped-v2-lao_latin_latin-ext-600.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-lao-looped-700 - lao_latin_latin-ext */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Lao Looped"; font-style: normal; font-weight: 700; src: url("/static/fonts/noto-sans-lao-looped-v2-lao_latin_latin-ext-700.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-lao-looped-800 - lao_latin_latin-ext */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Lao Looped"; font-style: normal; font-weight: 800; src: url("/static/fonts/noto-sans-lao-looped-v2-lao_latin_latin-ext-800.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-lao-looped-900 - lao_latin_latin-ext */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Lao Looped"; font-style: normal; font-weight: 900; src: url("/static/fonts/noto-sans-lao-looped-v2-lao_latin_latin-ext-900.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-symbols-100 - latin_latin-ext_symbols */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Symbols"; font-style: normal; font-weight: 100; src: url("/static/fonts/noto-sans-symbols-v36-latin_latin-ext_symbols-100.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-symbols-200 - latin_latin-ext_symbols */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Symbols"; font-style: normal; font-weight: 200; src: url("/static/fonts/noto-sans-symbols-v36-latin_latin-ext_symbols-200.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-symbols-300 - latin_latin-ext_symbols */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Symbols"; font-style: normal; font-weight: 300; src: url("/static/fonts/noto-sans-symbols-v36-latin_latin-ext_symbols-300.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-symbols-regular - latin_latin-ext_symbols */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Symbols"; font-style: normal; font-weight: 400; src: url("/static/fonts/noto-sans-symbols-v36-latin_latin-ext_symbols-regular.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-symbols-500 - latin_latin-ext_symbols */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Symbols"; font-style: normal; font-weight: 500; src: url("/static/fonts/noto-sans-symbols-v36-latin_latin-ext_symbols-500.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-symbols-600 - latin_latin-ext_symbols */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Symbols"; font-style: normal; font-weight: 600; src: url("/static/fonts/noto-sans-symbols-v36-latin_latin-ext_symbols-600.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-symbols-700 - latin_latin-ext_symbols */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Symbols"; font-style: normal; font-weight: 700; src: url("/static/fonts/noto-sans-symbols-v36-latin_latin-ext_symbols-700.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-symbols-800 - latin_latin-ext_symbols */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Symbols"; font-style: normal; font-weight: 800; src: url("/static/fonts/noto-sans-symbols-v36-latin_latin-ext_symbols-800.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-symbols-900 - latin_latin-ext_symbols */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Symbols"; font-style: normal; font-weight: 900; src: url("/static/fonts/noto-sans-symbols-v36-latin_latin-ext_symbols-900.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-symbols-2-regular - latin_latin-ext_symbols */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Symbols 2"; font-style: normal; font-weight: 400; src: url("/static/fonts/noto-sans-symbols-2-v17-latin_latin-ext_symbols-regular.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-mono-100 - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Mono"; font-style: normal; font-weight: 100; src: url("/static/fonts/noto-sans-mono-v21-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-100.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-mono-200 - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Mono"; font-style: normal; font-weight: 200; src: url("/static/fonts/noto-sans-mono-v21-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-200.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-mono-300 - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Mono"; font-style: normal; font-weight: 300; src: url("/static/fonts/noto-sans-mono-v21-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-300.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-mono-regular - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Mono"; font-style: normal; font-weight: 400; src: url("/static/fonts/noto-sans-mono-v21-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-regular.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-mono-500 - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Mono"; font-style: normal; font-weight: 500; src: url("/static/fonts/noto-sans-mono-v21-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-500.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-mono-600 - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Mono"; font-style: normal; font-weight: 600; src: url("/static/fonts/noto-sans-mono-v21-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-600.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-mono-700 - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Mono"; font-style: normal; font-weight: 700; src: url("/static/fonts/noto-sans-mono-v21-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-700.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-mono-800 - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Mono"; font-style: normal; font-weight: 800; src: url("/static/fonts/noto-sans-mono-v21-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-800.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-mono-900 - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans Mono"; font-style: normal; font-weight: 900; src: url("/static/fonts/noto-sans-mono-v21-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-900.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-sc-100 - chinese-simplified_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans SC"; font-style: normal; font-weight: 100; src: url("/static/fonts/noto-sans-sc-v26-chinese-simplified_latin-100.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-sc-300 - chinese-simplified_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans SC"; font-style: normal; font-weight: 300; src: url("/static/fonts/noto-sans-sc-v26-chinese-simplified_latin-300.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-sc-regular - chinese-simplified_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans SC"; font-style: normal; font-weight: 400; src: url("/static/fonts/noto-sans-sc-v26-chinese-simplified_latin-regular.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-sc-500 - chinese-simplified_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans SC"; font-style: normal; font-weight: 500; src: url("/static/fonts/noto-sans-sc-v26-chinese-simplified_latin-500.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-sc-700 - chinese-simplified_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans SC"; font-style: normal; font-weight: 700; src: url("/static/fonts/noto-sans-sc-v26-chinese-simplified_latin-700.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-sc-900 - chinese-simplified_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans SC"; font-style: normal; font-weight: 900; src: url("/static/fonts/noto-sans-sc-v26-chinese-simplified_latin-900.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-tc-100 - chinese-traditional_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans TC"; font-style: normal; font-weight: 100; src: url("/static/fonts/noto-sans-tc-v26-chinese-traditional_latin-100.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-tc-300 - chinese-traditional_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans TC"; font-style: normal; font-weight: 300; src: url("/static/fonts/noto-sans-tc-v26-chinese-traditional_latin-300.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-tc-regular - chinese-traditional_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans TC"; font-style: normal; font-weight: 400; src: url("/static/fonts/noto-sans-tc-v26-chinese-traditional_latin-regular.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-tc-500 - chinese-traditional_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans TC"; font-style: normal; font-weight: 500; src: url("/static/fonts/noto-sans-tc-v26-chinese-traditional_latin-500.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-tc-700 - chinese-traditional_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans TC"; font-style: normal; font-weight: 700; src: url("/static/fonts/noto-sans-tc-v26-chinese-traditional_latin-700.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-tc-900 - chinese-traditional_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans TC"; font-style: normal; font-weight: 900; src: url("/static/fonts/noto-sans-tc-v26-chinese-traditional_latin-900.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-hk-100 - chinese-hongkong_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans HK"; font-style: normal; font-weight: 100; src: url("/static/fonts/noto-sans-hk-v21-chinese-hongkong_latin-100.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-hk-300 - chinese-hongkong_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans HK"; font-style: normal; font-weight: 300; src: url("/static/fonts/noto-sans-hk-v21-chinese-hongkong_latin-300.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-hk-regular - chinese-hongkong_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans HK"; font-style: normal; font-weight: 400; src: url("/static/fonts/noto-sans-hk-v21-chinese-hongkong_latin-regular.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-hk-500 - chinese-hongkong_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans HK"; font-style: normal; font-weight: 500; src: url("/static/fonts/noto-sans-hk-v21-chinese-hongkong_latin-500.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-hk-700 - chinese-hongkong_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans HK"; font-style: normal; font-weight: 700; src: url("/static/fonts/noto-sans-hk-v21-chinese-hongkong_latin-700.woff2") format("woff2"); /* Super Modern Browsers */ } /* noto-sans-hk-900 - chinese-hongkong_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans HK"; font-style: normal; font-weight: 900; src: url("/static/fonts/noto-sans-hk-v21-chinese-hongkong_latin-900.woff2") format("woff2"); /* Super Modern Browsers */ } html { font-family: "Noto Sans", sans-serif; } html[lang="en"], *[lang="en"] { font-family: "Noto Sans", sans-serif; } html[lang="lo"], *[lang="lo"] { font-family: "Noto Sans", "Noto Sans Lao", "Noto Sans Lao Looped", sans-serif; } html[lang="th"], *[lang="th"] { font-family: "Noto Sans", "Noto Sans Thai", "Noto Sans Thai Looped", sans-serif; } html[lang="vi"], *[lang="vi"] { font-family: "Noto Sans", sans-serif; } html[lang="zh"], *[lang="zh"] { font-family: "Noto Sans", "Noto Sans SC", sans-serif; } html[lang="zh-Hans"], *[lang="zh-Hans"] { font-family: "Noto Sans", "Noto Sans SC", sans-serif; } html[lang="zh-Hant"], *[lang="zh-Hant"] { font-family: "Noto Sans", "Noto Sans TC", "Noto Sans HK", sans-serif; } code, pre { font-family: "Noto Sans Mono", monospace; } /* [Main Color] The primary color palette is used across all the interactive elements such as CTA’s, links, inputs, active states, etc. */ /* [Gradient] These colors depict an emotion of negativity. Generally used across error states. */ /* [Primary] The primary color palette is used across all the interactive elements such as CTA’s, links, inputs, active states, etc. */ /* [Primary > Blue] */ /* #4597FD; */ /* [Secondary] These colors are used as supporting secondary colors in backgrounds, text colors, seperators, models, etc. */ /* [Secondary > Gold] */ /* [Secondary > Grey] */ /* [Secondary > Black] */ /* [Success] These colors depict an emotion of positivity. Generally used across success, complete states. */ /* [Warning] These colors depict an emotion of negativity. Generally used across error states. */ /* [Shadow] These colors depict an emotion of negativity. Generally used across error states. */ /* [Common] */ /*flex*/ .display-flex, .display-flex-center, .display-flex-align-center, .display-flex-align-baseline, .display-flex-align-start, .display-flex-align-end, .display-flex-justify-center, .display-flex-sa, .display-flex-se, .display-flex-sb, .display-flex-sb-t, .display-flex-fe, .display-flex-fs { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */ display: flex; } .display-flex-center { align-items: center; justify-content: center; } .display-inline-block { display: inline-block; } .flex-col { flex-direction: column; } /* button */ .btn { padding: 12px 33px; border-radius: 15px; font-style: normal; font-weight: 700; cursor: pointer; background: #2D2D2F; color: white; text-align: center; font-size: 14px; } .btn-diable__prediction { pointer-events: none !important; } .btn-diable__prediction { background: #B2B2B2; color: black; } .btn-primary { pointer-events: fill !important; } .btn-primary { background: var(--background-primary); color: black; } .btn-secondary { background: var(--color-primary-green); color: white; } .btn-disable { pointer-events: none !important; } .btn-disable { background-color: #585858; color: #939393; } .btn-width-medium { width: 116px; } .icon-dropdown { width: 41px; height: 41px; background: #3A3B3C; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; transition: all 0.3s; transform: rotate(180deg); } .icon-dropdown.open { transform: rotate(0); } .dropdown-select__wrapper { position: absolute; background: #202020; border-radius: 15px; width: 100%; overflow: hidden; top: 70px; transition: all 0.3s; transform: scale(0); transform-origin: 50% 0; } .dropdown-select__wrapper.selected { transform: scale(1); } .dropdown-select { padding: 15px 20px; font-size: 14px; color: var(--color-grey); cursor: pointer; } .dropdown-select:hover { background: #353537; } .dropdown-select.selected { background: #353537; } .divider-small { width: 2px; height: 17px; background-color: #B2B2B2; margin: 0 9px; } /* hover effect */ .hover-grow { transition: all 0.3s; } .hover-grow:hover { transform: scale(1.2); } .checkbox-wrapper { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; user-select: none; width: 19px; height: 19px; } .checkbox-wrapper input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkbox-mark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } .checkbox-wrapper .checkbox-mark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg); } .checkbox-wrapper input:checked ~ .checkbox-mark:after { display: block; } .checkbox-wrapper input:checked ~ .checkbox-mark { background-color: var(--color-primary-green); } .mobile-select__wrapper { background: #2D2D2F; border-radius: 15px; padding: 11px 10px; display: flex; margin-top: 29px; margin-bottom: 19px; } .mobile-select { padding: 7px 10px; background: #353537; border-radius: 15px; font-weight: 500; font-size: 12px; display: flex; justify-content: space-between; align-items: center; position: relative; color: #FFFFFF; } .mobile-select__card { position: relative; } .mobile-select__options-wrapper { position: absolute; background: #1E2020; transform: scale(0); transition: all 0.3s; transform-origin: 50% 0; color: white; font-weight: 500; font-size: 12px; border-radius: 15px; z-index: 1; width: 100%; padding: 10px 0; } .mobile-select__options { padding: 10px 17px ; } .mobile-select__options-wrapper.selected { transform: scale(1); } /* nav pill */ .nav-pill__outsider { padding: 17px 37px; box-sizing: border-box; background-color: #2B2B2B; display: flex; justify-content: space-between; border-radius: 15px; } .nav-pill__wrapper { display: flex; overflow-x: auto; } .nav-pill { background: #5D5D61; border-radius: 15px; padding: 12px 16px; margin-right: 18px; color: white; font-weight: 700; font-size: 13.5px; position: relative; cursor: pointer; text-align: center; transition: all 0.3s; white-space: nowrap; display: flex; gap: 12px; display: block; } .nav-pill.inactive { background: #454545; color: grey; pointer-events: none; } .nav-pill2 { background: #5D5D61; font-size: 14px; font-weight: 700; color: #FFFFFF; padding: 10px 35px; border-radius: 15px; margin-right: 1rem; white-space: nowrap; cursor: pointer; } .pe-none { pointer-events: none; } .nav-pill2.selected { background: var(--color-primary); color: black; pointer-events: fill; } .nav-pill__outline { border-radius: 15px; padding: 12px 26px; margin-right: 18px; color: var(--color-grey); font-weight: 500; font-size: 14px; position: relative; cursor: pointer; text-align: center; transition: all 0.3s; border: 1px solid #B2B2B2; white-space: nowrap; } .nav-pill__fix-width { width: 192px; } .nav-pill__fix-width-161 { width: 161px; } .nav-pill__slots { min-width: 112px; white-space: nowrap; } .nav-pill:last-child { margin-right: 0; } .nav-pill:hover { background-color: var(--color-primary); color: black; } .nav-pill__outline:hover { border-color: var(--color-primary); } .nav-pill__outline.selected { border-color: var(--color-primary); } .nav-pill.selected { background-color: var(--color-primary) !important; color: black !important; } .nav-pill.active { background-color: var(--color-primary); color: black; } /* badge */ .badge-primary { background-color: var(--color-primary-green); border-radius: 15px; padding: 2px 10px; color: white; font-size: 12px; } .flatpickr-calendar { background: #363537; box-shadow: 1px 0 0 #363537, -1px 0 0 #363537, 0 1px 0 #363537, 0 -1px 0 #363537, 0 3px 13px rgba(0, 0, 0, 0.08); } .flatpickr-day.selected { background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: black !important; } .flatpickr-day:hover { background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: black !important; } .flatpickr-months .flatpickr-month { color: white !important; } .flatpickr-day { color: white; } .flatpickr-day.inRange { color: #fff; box-shadow: -5px 0 0 #856b33, 5px 0 0 #856b33; background: #856b33; border-color: #856b33; } span.flatpickr-weekday { color: #b2b2b2; } .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { fill: white !important; } .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay { color: rgba(57, 57, 57, 0.3) !important; } .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay { color: rgba(57, 57, 57, 0.3) !important; } .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { box-shadow: -10px 0 0 #b5b8bd; } .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: white !important; } .flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: white !important; } .flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: white !important; } .flatpickr-calendar.arrowBottom:after { border-top-color: #363537 !important; } .flatpickr-calendar.arrowBottom:before { border-top-color: #363537 !important; } .flatpickr-calendar.arrowTop:after { border-bottom-color: #363537 !important; } .flatpickr-calendar.arrowTop:before { border-bottom-color: #363537 !important; } .flatpickr-current-month input.cur-year[disabled], .flatpickr-current-month input.cur-year[disabled]:hover { color: grey; } .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background-color: #363537 !important; } table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled { cursor: pointer; *cursor: hand; background-repeat: no-repeat; background-position: center right; } table.dataTable thead .sorting { background-image: url("https://cdn.datatables.net/1.10.25/images/sort_both.png"); } table.dataTable thead .sorting_asc { background-image: url("https://cdn.datatables.net/1.10.25/images/sort_asc.png") !important; } table.dataTable thead .sorting_desc { background-image: url("https://cdn.datatables.net/1.10.25/images/sort_desc.png") !important; } table.dataTable thead .sorting_asc_disabled { background-image: url("https://cdn.datatables.net/1.10.25/images/sort_asc_disabled.png"); } table.dataTable thead .sorting_desc_disabled { background-image: url("https://cdn.datatables.net/1.10.25/images/sort_desc_disabled.png"); } /* table */ .table-theme { border-collapse: separate; text-align: center; border-radius: 15px; overflow: hidden; table-layout: fixed; border: 1px solid #333435; border-spacing: 0; } .table-theme thead { color: #fff; font-family: Noto Sans; font-size: 16px; font-style: normal; font-weight: 600; line-height: 20px; background-color: #333435; } .table-theme thead tr th { padding: 12px 16px; text-align: left; } .table-theme tbody td { color: white; padding: 12px 16px; vertical-align: middle; font-size: 14px; text-align: left; } .table-theme tbody tr { background-color: #2D2E30; } .table-theme tbody tr:nth-child(odd) { background-color: #19191a; } table { border-collapse: separate; text-align: center; border-radius: 15px; overflow: hidden; table-layout: fixed; border: 1px solid #333435; border-spacing: 0; } table thead { color: #fff; font-family: Noto Sans; font-size: 16px; font-style: normal; font-weight: 600; line-height: 20px; background-color: #333435; } table thead tr th { padding: 12px 16px; text-align: left; } table tbody td { color: white; padding: 12px 16px; vertical-align: middle; font-size: 14px; text-align: left; overflow: hidden; text-overflow: ellipsis; } table tbody tr { background-color: #2D2E30; } table tbody tr:nth-child(odd) { background-color: #19191a; } .table-pagination-arrow { color: var(--color-grey); text-align: center; width: 16px; cursor: pointer; } .paginate_button { color: var(--color-grey); width: 21px; cursor: pointer; text-align: center; display: block; } .paginate_button:hover { color: var(--color-primary); } .paginate_button.disabled { display: none; } .paginate_button.current { color: var(--color-primary); } .dataTables_info { display: none; } .dataTables_paginate span { display: flex; } .dataTables_paginate { display: flex; justify-content: flex-end; margin-top: 20px; } .dataTables_paginate .ellipsis { color: var(--color-grey); } .dataTables_empty { text-align: center !important; } .section-card { background-color: #272727; border-radius: 15px; } .table-theme-light tbody tr:nth-child(odd) { background-color: #272727; } .radioContainer { display: block; position: relative; padding-left: 25px; margin-bottom: 12px; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; user-select: none; font-weight: 400; color: white; } .radioContainer input { position: absolute; opacity: 0; cursor: pointer; } .radioContainer input:checked ~ .checkmark { border-color: #fabb2e; } .radioContainer input:checked ~ .checkmark:after { display: block; } .radioContainer .checkmark { position: absolute; top: 0; left: 0; height: 15px; width: 15px; border: 1.5px solid #b2b2b2; border-radius: 50%; } .radioContainer .checkmark:after { content: ""; position: absolute; display: none; top: 3px; left: 2px; width: 7.5px; height: 7.5px; border-radius: 50%; background-color: #fabb2e; } .modal-wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: none; z-index: 13; } .modal-wrapper-disable { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: none; z-index: 13; } .modal-label { margin-top: 22px; margin-bottom: 26px; font-weight: 500; font-size: 16px; color: white; } .modal-label__sucuess { color: var(--color-primary-green); } .modal-container { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; transform: scale(0); transition: all 0.3s; } .modal-container.open { transform: scale(1); } .modal { background: #171717; border-radius: 15px; padding-bottom: 50px; min-width: 450px; max-width: 550px; overflow-y: auto; max-height: 650px; } .modal-auto { max-width: none; } .modal-text { text-align: center; font-size: 14px; font-weight: 400; } .modal-body { color: var(--color-grey); padding: 0 50px; font-size: 14px; } .modal-header { padding: 25px 25px 5px; display: flex; justify-content: flex-end; } .modal-body__center { display: flex; align-items: center; justify-content: center; flex-direction: column; } .modal-body__left { margin-top: 20px; padding: 0 25px; align-items: initial; } .modal-icon { width: 100px; height: 100px; } .modal-footer { display: flex; justify-content: center; gap: 64px; margin-top: 21px; } .modal-footer-1 { margin-top: 21px; padding: 0 76px; } .modal-cancel { color: #B2B2B2; text-align: center; cursor: pointer; padding-top: 23px; font-weight: 500; } .modal-btn { min-width: 116px; font-size: 14px; padding: 12px 25px; } .modal-footer__small { padding-bottom: 2rem; } .modal-header__line { padding-bottom: 1rem; border-bottom: 1px solid #2D2E30; } .modal-close__wrapper { margin-top: 1rem; } .modal-close__wrapper .nav-pill2 { margin-right: 1rem; } /* Track */ .custom-scroll::-webkit-scrollbar-track { border-radius: 10px; } /* Handle */ .custom-scroll::-webkit-scrollbar-thumb { border-radius: 5px; background: var(--color-primary); } /* Handle on hover */ .custom-scroll::-webkit-scrollbar-thumb:hover { background: #555; } .custom-scroll::-webkit-scrollbar { width: 4px; height: 4px; } .switch { position: relative; display: inline-block; width: 45px; height: 22px; margin-bottom: 0; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.4s; } .slider:before { position: absolute; content: ""; height: 17px; width: 17px; left: 3px; bottom: 3.5px; background-color: white; transition: 0.4s; } input:checked + .slider { background-color: var(--color-primary-green); } input:focus + .slider { box-shadow: 0 0 1px var(--color-primary-green); } input:checked + .slider:before { transform: translateX(20px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } @keyframes animatedgradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (max-width: 768px) { .nav-pill { padding: 7px 18px; font-weight: 500; font-size: 12px; margin-right: 6px; justify-content: center; } .btn { font-size: 14px; font-weight: 500; height: 41px; } .icon-dropdown { width: 30px; height: 30px; top: 6px; } .modal { min-width: calc(100vw - 32px) !important; } .modal { max-width: calc(100vw - 32px); } .modal-icon { width: 80px; height: 80px; } .inbox-modal__status { margin-top: 15px; margin-bottom: 15px; } .inbox-modal__text { font-size: 14px; } .modal-body { max-height: 450px; overflow-y: auto; } /* width */ ::-webkit-scrollbar { width: 5px; height: 3px; border-radius: 5px; } } body { font-family: 'Rubik'; background-color: #18191a; left: 0; right: 0; } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } .display-block { display: block; } .display-flex { display: flex; } .display-inline { display: inline-block; } .flex-end { display: flex; justify-content: flex-end; } .flex-1 { flex: 1; } .flex-2 { flex: 2; } .flex-between { display: flex; justify-content: space-between; } .flex-align, .flex-center { align-items: center; display: flex; } .text-capitalize { text-transform: capitalize; } .pointer { cursor: pointer; } .container { width: 1300px; margin: 0 auto; } .relative { position: relative; } .font-italic { font-style: italic; } .w-100 { width: 100% !important; } .tc { text-align: center; } .hide { display: none; } .width-medium { width: 371px; } .color-primary-green { color: var(--color-primary-green) !important; } .color-primary { color: var(--color-primary-green) !important; } .color-danger { color: var(--color-danger); } .bold { font-weight: 500; } .mb-20 { margin-bottom: 20px; } .mb-40 { margin-bottom: 40px; } .mb-5 { margin-bottom: 5px; } .mr-7 { margin-right: 7px; } .plr-m { padding-left: 1rem; padding-right: 1rem; } .relative { position: relative; } .form-group { margin-bottom: 20px; } .form-label__flex-between { display: flex; justify-content: space-between; align-items: center; } .pe-none { pointer-events: none; } .cursor-initial { cursor: auto !important; cursor: initial !important; } .form-control__icon-wrapper { position: absolute; top: 19px; right: 16px; font-size: 14px; color: var(--color-primary-green); cursor: pointer; display: flex; align-items: center; } .form-error label { color: var(--color-danger); } label { display: inline-block; max-width: 100%; margin-bottom: 10px; font-weight: 700; color: var(--color-grey); font-size: 12px; } .form-control { display: block; width: 100%; height: 57px; padding: 20px; font-size: 14px; line-height: 1.42857143; color: var(--color-grey); background-color: #47494B; background-image: none; border-radius: 15px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08); transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; } .form-control:-moz-read-only { background: #202020; } .form-control:read-only { background: #202020; } .form-control-select { background: #47494B; } .form-control-dropdown { position: absolute; top: 8px; right: 11px; pointer-events: none; } .form-control__input-option-tw { background: #202020; width: 321px; margin-top: 5px; } .form-group__side-input-wrapper { display: flex; } .section-title { font-style: normal; font-weight: 500; font-size: 20px; line-height: 24px; color: white; margin-bottom: 16px; } .section-title__spacing { padding: 1rem; padding-bottom: 0; } .banner-top { margin-top: 30px; } .section-bottom { margin-bottom: 30px; } .currency { margin-right: 3px; } .card { background: #252527; border-radius: 15px; padding: 16px 19px; } .mobile { display: none; } .account-info { margin-top: 60px; } .account-info .info-rule__wrapper { width: 1014px; } .login-animation__wrapper { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 13; background-color: #333333; display: none; } .login-animation__container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .login-animation__wrapper.active { opacity: 1; } .login-animation__img { width: 500px; -o-object-fit: contain; object-fit: contain; } .accordionItem { padding: 20px 0; border-bottom: 1px solid #333333; cursor: pointer; } .accordionItem:last-child { border-bottom: none; } .accordionItemContent { display: none; padding: 24px 0 0 32px; } .accordionItemContent.selected { display: block; } .accordionItemHeading { display: flex; font-size: 16px; font-weight: 500; line-height: 19px; color: #ffffff; cursor: pointer; transition: all 0.3s; } .accordion-icon { margin-right: 24px; transition: all 0.3s; } .accordion-icon.selected { transform: rotate(180deg); } .modalWrapper { position: fixed; width: 100%; height: 100%; top: 0; left: 0; display: table; z-index: 13; display: none; } .modalWrapper .modalContainer { display: table-cell; vertical-align: middle; } .modalWrapper .overlay { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); top: 0; z-index: 0; } .modalWrapper .modalContainer .modal .modalCloseBtn { position: absolute; right: 30px; top: 30px; -webkit-text-stroke: 2px #171717; height: 12px; cursor: pointer; } .modalWrapper .modalContainer .modal .title { color: #fff; padding-bottom: 32px; font-size: 16px; font-weight: 500; line-height: 19px; } #transferingModal .modal { width: 296px; height: 190px; position: relative; padding: 0; } #transferingModal p { font-size: 16px; font-weight: 500; line-height: 19px; color: #fff; position: absolute; bottom: 56px; text-align: center; width: 100%; } #transferingModal .loadingGif { padding-top: 24px; display: block; margin: auto; height: 95px; } #transferStatusModal .modalContainer .modal { overflow-x: visible; overflow-x: initial; overflow-y: visible; overflow-y: initial; margin: 0 auto; position: relative; padding: 20px; } #transferStatusModal .wallet { width: -moz-max-content; width: max-content; position: relative; } #transferStatusModal .wallet .walletName { font-size: 14px; font-weight: 500; line-height: 17px; color: #fff; display: inline-block; padding-bottom: 24px; } #transferStatusModal .wallet .walletName:empty { padding-bottom: 0; } #transferStatusModal .tooltip { position: absolute; right: -24px; top: 0; } #transferStatusModal .tooltip .tooltipIcon { cursor: pointer; } #transferStatusModal .tooltip .tooltipContent { background: linear-gradient(91.23deg, #2cbd9c 0%, #289d82 100%); position: absolute; padding: 12px 16px; border-radius: 8px; width: 156px; box-sizing: border-box; z-index: 1; top: 32px; left: 8px; display: none; } #transferStatusModal .tooltip .tooltipContent::before { content: ""; position: absolute; top: -16px; left: 0; border-width: 0 26px 34px 0; border-style: solid; border-color: transparent transparent #2cbd9c transparent; z-index: -1; } #transferStatusModal .tooltip .tooltipContent.active { display: block; } #transferStatusModal .tooltip .tooltipContent .walletList ul li { color: #fff !important; } #transferStatusModal .tooltip .tooltipContent .walletList ul li { font-size: 14px; font-weight: 400; line-height: 19px; padding-bottom: 4px; text-align: left; } #transferStatusModal .table { border-radius: 8px; overflow: hidden; margin: 0 0 24px; } #transferStatusModal .table .tableHeader { background-color: rgba(51, 51, 51, 0.5); text-align: center; } #transferStatusModal .table .tableHeader .tableRow { font-size: 0; } #transferStatusModal .table .tableHeader .tableRow p { font-size: 12px; font-weight: 400; line-height: 14px; color: #b2b2b2; padding-bottom: 0; } #transferStatusModal .table .tableBody { border: 1px solid #333; border-radius: 0 0 8px 8px; } #transferStatusModal .table .tableBody .tableRow .status { font-size: 12px; font-weight: 400; line-height: 14px; color: #fff; padding-bottom: 0; text-align: center; } #transferStatusModal .table .tableBody .tableRow .status.success { color: #fabb2e; } #transferStatusModal .table .tableRow { padding: 12px 8px; } #transferStatusModal .btnWrapper { text-align: right; } #transferStatusModal .btnWrapper .okBtn { font-family: rubik, sans-serif; margin: 0; font-size: 14px; font-weight: 700; line-height: 17px; background: linear-gradient(91.23deg, #fabb2e 0%, #e5b35c 100%); display: inline-block; padding: 12px; text-align: center; color: #000; width: 100px; border-radius: 3px; border: none; cursor: pointer; box-sizing: border-box; } .launch-wrapper { display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; background: black; } .launch-loading { width: 200px; } .launch-meaning { color: white; text-align: center; } .color-white { color: white; } .launch-meaning__url { margin-bottom: 1rem; } .display-hide { display: none; } .justify-center { justify-content: center; } .underline { -webkit-text-decoration: underline; text-decoration: underline; } .popup-layer { width: 100% !important; bottom: 0 !important; top: 0 !important; } .numbergame-tnc__content-title { font-size: 16px; position: relative; left: -1rem; margin-bottom: 1rem; } .numbergame-tnc__content-li-1 { padding-left: 1rem; } #receipt-label { background: #202020; border-radius: 15px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; font-size: 14px; padding: 20px; color: #b2b2b2; width: 100%; cursor: pointer; display: block; position: absolute; top: 0; } .pd-east-west { width: 24px; height: 24px; font-size: 8px; display: flex; align-items: center; text-align: center; justify-content: center; overflow: hidden; margin: 0 10px; } .pd-eastern { background: #ce6a6c; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .pd-western { background: #49919d; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .pd-score__wrapper { display: flex; align-items: center; } .pd-score-th { width: 180px; } .pd-no-th { width: 40px; } .pd-score-date { width: 180px; } .ul-decimal { list-style-type: decimal; } .ul-child { list-style: disc; padding-left: 1rem; } .btn-inactive-click { background: #B2B2B2 !important; pointer-events: none !important; } .btn-inactive-can-click { background: #B2B2B2 !important; } .liveChatIframe { position: fixed; bottom: 0; right: 0; border: none; width: 500px; height: 100px; } .livechat-wrapper { position: fixed; bottom: 0; right: 0; } .livechat-container { width: 255px; height: 50px; color: #000000; background-color: #FABB2E; box-shadow: rgba(0, 0, 0, 0.125) 0px 0.362176px 0.941657px -1px, rgba(0, 0, 0, 0.18) 0px 3px 7.8px -2px; border-radius: 8px 8px 0px 0px; display: flex; align-items: center; justify-content: space-between; padding: 10px; cursor: pointer; } .livechat-icon { display: inline-block; flex-shrink: 0; width: 1em; height: 1em; font-size: 1.5rem; -webkit-user-select: none; -moz-user-select: none; user-select: none; fill: currentColor; } .livechat-iframe__wrapper { transition: none 0s ease 0s !important; } .livechat-iframe__wrapper { opacity: 1; visibility: visible; z-index: 2147483639; bottom: 0px; width: 392px; height: 714px; max-width: 100%; max-height: calc(100% + 0px); min-height: 0px; min-width: 0px; background-color: transparent; border: 0px; overflow: hidden; right: 0px; } .livechat-iframe { width: 100%; height: 100%; border: none; } .margin-center { margin: 0 auto; } .pagination-right { display: flex; justify-content: flex-end; margin-top: 1rem; } .member-platinum { animation: glow 2s ease-in-out infinite alternate; } .member-gold { color: #fabb2e; } .list-nickname .member-gold { color: #fabb2e; overflow: hidden; text-overflow: ellipsis; width: inherit; display: block; } .mb-1rem { margin-bottom: 1rem; } .rules-number-reference { margin-top: 1rem; } .lable-tips { font-style: italic; color: var(--color-primary-green); font-size: 12px; } @keyframes glow { 0% { text-shadow: 0 0 5px #fff, 0 0 5px #673AB7, 0 0 5px #673AB7; } 20% { text-shadow: 0 0 5px #fff, 0 0 5px #FFEB3B, 0 0 5px #FFEB3B; } 40% { text-shadow: 0 0 5px #fff, 0 0 5px #8BC34A, 0 0 5px #8BC34A; } 60% { text-shadow: 0 0 5px #fff, 0 0 5px #03A9F4, 0 0 5px #03A9F4; } 80% { text-shadow: 0 0 5px #fff, 0 0 5px #FF9800, 0 0 5px #FF9800; } to { text-shadow: 0 0 5px #fff, 0 0 5px #ff4da6, 0 0 5px #ff4da6; } } @keyframes loading { to { background-position-x: -20%; } } @keyframes el-skeleton-loading { 0% { background-position: 100% 50%; } to { background-position: 0 50%; } } @media (max-width: 1350px) { .container { padding-left: 100px; } } @media (max-width: 768px) { .desktop { display: none; } .mobile { display: block; } .container { width: auto; } .has-space { margin-left: 16px; margin-right: 16px; } .has-footer { margin-bottom: 80px; margin-top: 56px; } .has-app .has-footer { margin-top: 137px; } .has-header { margin-top: 25px; } .section-title { font-size: 16px; } .form-control { height: 42px; font-size: 12px; padding: 10px 20px; line-height: 1.9; } .form-control__icon-wrapper { top: 11px; } .form-group { margin-bottom: 14px; } .width-medium { width: 100%; } .account-info .info-rule__wrapper { width: 100%; } .form-control-select { background: #353537 !important; } .form-control__input-option-tw { width: 292px; } .numbergame-tnc__content-title { left: 0; } .numbergame-tnc__content-li-1 { padding-left: 1rem; } #receipt-label { padding: 10px 20px; } .form-control-dropdown { top: 6px; } .pd-score-date { width: 160px; } .login-animation__img { width: 100%; } .livechat-wrapper { display: none; } } .app-header__wrapper { display: flex; justify-content: space-between; align-items: center; width: 100%; background: #242526; z-index: 1; } .app-header__download { display: none; align-items: center; background: #18191A; width: 100%; padding: 10px 10px 10px 0; } .app-header__download-close-wrapper { display: flex; align-items: center; justify-content: center; height: 56px; width: 25px; padding-left: 10px; margin-right: 10px; } .app-header__download.open { display: flex; } .app-header__download-desc-1 { color: white; } .app-header__download-desc { color: #B2B2B2; flex: 1; font-size: 12px; } .app-header__download-logo { width: 50px; margin-right: 10px; } .app-header__download-close { width: 12px; } .app-header__download-download { width: 26px; } .app-header__download-star { display: flex; gap: 4px; align-items: center; margin-top: 4px; } .app-header__download-star img { width: 14px; } .app-header__download--wrapper { display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; background: #242526; left: 0; right: 0; z-index: 12; flex-direction: column; } .app-header__title { font-style: normal; font-weight: 700; font-size: 18px; color: #000000; -webkit-text-decoration: none; text-decoration: none; } .app-header__logo-wrapper { align-items: center; position: absolute; width: 100%; display: flex; justify-content: center; z-index: -1; } .app-header__logo { width: 145px; margin-top: 12px; } .app-header__menu-wrapper { height: calc(100vh - 56px); transition: all 0.3s; pointer-events: none; position: fixed; width: 100%; background: #242526; width: 270px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; transform: translateX(-100%); top: 56px; overflow-y: auto; z-index: 14; padding-bottom: 8rem; overflow-x: hidden; } .app-header__menu-wrapper.open { pointer-events: fill; transform: translateX(0); } .app-header__overlay { background: black; height: calc(100vh - 56px); position: fixed; left: 0; right: 0; top: 4rem; transition: all 0.3s; opacity: 0; z-index: 13; pointer-events: none; } .app-header__overlay.open { opacity: 0.5; pointer-events: fill; } .app-header__account { width: 50px; display: flex; align-items: center; justify-content: center; height: 56px; } .app-header__info { display: flex; align-items: center; } .app-header__info-icon { margin-right: 20px; position: relative; } .app-header__info-red-dot { width: 8px; height: 8px; border-radius: 50%; position: absolute; right: -4px; background: var(--color-danger); top: -3px; } .sidemenu { display: flex; align-items: center; padding: 15px 35px; color: var(--color-grey); font-weight: 400; font-size: 12px; } .sidemenu-icon { margin-right: 48px; width: 20px; -o-object-fit: contain; object-fit: contain; height: 20px; } .sidemenu-divider { background: #4A4A4E; height: 1px; width: 90%; margin: 0 auto; margin-top: 25px; margin-bottom: 25px; } .sidemenu-region { color: var(--color-grey); } .sidemenu-title { font-weight: 400; font-size: 12px; margin-bottom: 16px; padding-left: 13px; } .sidemenu-region .sidebar-child__language { font-weight: 400; font-size: 12px; } .sidemenu-social__wrapper { display: flex; align-items: center; padding-left: 31px; } .sidemenu-social { margin-right: 22px; } .mobile-menu__burger-icon__wrapper { display: flex; height: 100%; justify-content: center; align-items: center; width: 64px; height: 56px; } .mobile-menu__list-wrapper { display: block; } .mobile-menu__burger-icon { width: 2rem; height: 1rem; position: relative; transform: rotate(0deg); transition: 0.5s ease-in-out; cursor: pointer; } .mobile-menu__burger-icon span { display: block; position: absolute; height: 0.2rem; width: 100%; background: white; opacity: 1; left: 0; transform: rotate(0deg); transition: 0.25s ease-in-out; } .mobile-menu__burger-icon span:first-child { top: 0; } .mobile-menu__burger-icon span:nth-child(2), .mobile-menu__burger-icon span:nth-child(3) { top: 0.5rem; } .mobile-menu__burger-icon span:nth-child(4) { top: 1rem; } .open .mobile-menu__burger-icon { background: #3A3B3C; border-radius: 50%; padding: 1rem; } .open .mobile-menu__burger-icon span:first-child { top: 0.5rem; width: 0; left: 50%; } .open .mobile-menu__burger-icon span:nth-child(2) { transform: rotate(45deg); top: 14px; width: 16px; left: 8px; } .open .mobile-menu__burger-icon span:nth-child(3) { transform: rotate(-45deg); top: 14px; width: 16px; left: 8px; } .open .mobile-menu__burger-icon span:nth-child(4) { top: 0.5rem; width: 0; left: 50%; } .app-footer { background-color: #FFFDF8; padding: 80px 112px; } .app-footer .copyright { font-style: normal; font-weight: 700; font-size: 14px; line-height: 21px; } .footer-icon__name { text-align: center; } .footer-wrapper__mobile { display: flex; justify-content: space-between; position: fixed; bottom: 0; right: 0; left: 0; z-index: 12; background: #242526; } .footer-container__mobile { display: flex; width: 100%; padding: 10px 0; border-top: 2px solid var(--color-primary); } .footer-icon__wrapper { flex: 1; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; color: gray; font-size: 0.7rem; display: flex; flex-direction: column; align-items: center; position: relative; } .footer-icon__container { display: block; margin: 0 auto ; width: 1.3rem; height: 1.3rem; transition: all 0.5s; margin-bottom: 0.2rem; } .footer-icon__wrapper.selected { color: var(--color-primary); } .footer-icon__1 { background: url(/static/images/footer/icon-footer-home-unselect.svg) center / contain no-repeat; } .selected .footer-icon__1 { animation: nimateBall 0.5s ease forwards; -webkit-animation: nimateBall 0.5s ease forwards; background: url(/static/images/footer/icon-footer-home-selected.svg) center / contain no-repeat; } .footer-icon__2 { background: url(/static/images/footer/icon-footer-wallet-unselect.svg) center / contain no-repeat; } .selected .footer-icon__2 { animation: nimateBall 0.5s ease forwards; -webkit-animation: nimateBall 0.5s ease forwards; background: url(/static/images/footer/icon-footer-wallet-selected.svg) center / contain no-repeat; } .footer-icon__3 { background: url(/static/images/footer/icon-footer-live-chat-unselect.svg) center / contain no-repeat; } .selected .footer-icon__3 { animation: nimateBall 0.5s ease forwards; -webkit-animation: nimateBall 0.5s ease forwards; background: url(/static/images/footer/icon-footer-live-chat-selected.svg) center / contain no-repeat; } .footer-icon__4 { background: url(/static/images/footer/icon-footer-quest-unselect.svg) center / contain no-repeat; } .selected .footer-icon__4 { animation: nimateBall 0.5s ease forwards; -webkit-animation: nimateBall 0.5s ease forwards; background: url(/static/images/footer/icon-footer-quest-selected.svg) center / contain no-repeat; } .footer-icon__5 { background: url(/static/images/footer/icon-footer-profile-unselect.svg) center / contain no-repeat; } .selected .footer-icon__5 { animation: nimateBall 0.5s ease forwards; -webkit-animation: nimateBall 0.5s ease forwards; background: url(/static/images/footer/icon-footer-profile-selected.svg) center / contain no-repeat; } .selected .footer-icon__name { color: var(--color-primary); } .mobile-quest__cover { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.83137); z-index: 13; transform: translateY(-115vh); } .mobile-quest__cover.active { transform: translateY(0); } .mobile-quest-wrapper { border-radius: 15px; background: #171717; padding: 15px; position: fixed; top: 5.5rem; left: 1.5rem; right: 1.5rem; bottom: 5.5rem; z-index: 13; color: white; transition: all 0.3s; transform: translateY(-115vh); padding-top: 0; overflow: hidden; } .mobile-quest-wrapper.active { transform: translateY(0); } .mobile-quest__header { padding-top: 20px; display: flex; justify-content: space-between; } .mobile-quest__title { font-family: Rubik; font-size: 16px; font-style: normal; font-weight: 500; color: white; } .mobile-quest__card { border-radius: 10.925px; background: #2D2E30; position: relative; color: #B2B2B2; padding: 10px 20px; margin-bottom: 18px; display: block; } .mobile-quest__card.disable { pointer-events: none; } .mobile-quest__body { overflow-y: auto; height: 97%; padding-top: 21px; } .mobile-quest__card-title { margin-bottom: 4px; font-size: 14px; font-style: normal; font-weight: 500; } .mobile-quest__card-left { display: flex; align-items: center; } .mobile-quest-card__img { width: 20px; -o-object-fit: contain; object-fit: contain; height: 20px; margin-right: 20px; } .mobile-quest__card-container { display: flex; justify-content: space-between; margin-right: 10px; align-items: flex-start; } .mobile-quest-card__claim-number { font-size: 16px; font-weight: 700; } .mobile-quest-card__complete { font-size: 12px; } .mobile-quest-card__go { width: 10px; } .mobile-quest__card-badge { position: absolute; top: -5px; right: 1rem; font-size: 10px; color: white; padding: 2px 10px; border-radius: 15px; background: #CC3633; text-transform: uppercase; z-index: 2; } .mobile-quest-card__body-status-img { position: absolute; right: 43px; top: 8px; width: 59px; z-index: 1; } .mobile-quest__close { width: 30px; text-align: right; } .site-layout-background { position: absolute; top: 0; width: 100%; height: 100%; } .site-layout-body { margin-top: 7rem; } .home-container { display: flex; } .home { display: none; } .home-wrapper { background-color: #18191a; } .sidebar2 { width: 16rem; z-index: 13; position: fixed; } .sidebar-mini { width: 62px; } .sidebar-wrapper { width: 16rem; background-color: var(--color-primary-grey); color: #B2B2B2; min-height: 100vh; transition: all 0.3s; position: absolute; top: 0; bottom: 0; z-index: 1; overflow-y: auto; } .sidebar-wrapper__hide { transform: translateX(-16rem); } .sidebar-child__wrapper { font-size: 14px; } .sidebar-child__list { display: flex; padding: 10.5px 15px 18.5px 0; box-sizing: border-box; } .sidebar-child__list-container { display: flex; align-items: center; padding: 11px 18px; border-radius: 15px; margin-left: 15px; width: 100%; transition: all 0.3s; } .sidebar-child__list-divider { width: 1px; background-color: #FABB2E; height: 40px; opacity: 0; transition: all 0.3s; } .sidebar-child__list:hover .sidebar-child__list-divider { opacity: 1; } .sidebar-child__list:hover .sidebar-child__list-container { background-color: #202023; } .sidebar-no-hover:hover .sidebar-child__list-divider { opacity: 0; } .sidebar-no-hover:hover .sidebar-child__list-container { background-color: transparent; } .sidebar-child__list:hover { cursor: pointer; } .sidebar-child__list-icon { margin-right: 19.53px; width: 20px; -o-object-fit: contain; object-fit: contain; } .sidebar-parent__wrapper { padding: 23px 10px 0; font-size: 12px; } .sidebar-logo__wrapper { display: flex; justify-content: center; align-items: center; padding: 19px; background-color: #333435; } .sidebar-logo { margin-right: 35px; width: 145px; } .sidebar-burger-menu { transition: all 0.55s; } .sidebar-burger-menu__hide { transform: rotate(180deg); } .sidebar-contact-html { padding-bottom: 0; pointer-events: none; } .sidebar-email-html { padding-top: 2px; } .sidebar-child__language.selected { color: var(--color-primary); } .sidebar-child__language:hover { color: var(--color-primary); } .sidebar-child__language-container { display: flex; } .sidebar-child__language-divider { margin: 0 15px; } /* side bar mini */ .sidebar-mini__wrapper { width: 62px; min-height: 100vh; background-color: var(--color-primary-grey); transition: all 0.3s; transform: translateX(-62px); position: absolute; top: 0; bottom: 0; } .sidebar-mini__wrapper-show { transform: translateX(0); } .sidebar-mini-logo__wrapper { display: flex; align-items: center; justify-content: center; height: 78px; cursor: pointer; background-color: #333435; } .sidebar-mini-child__list-container { display: flex; align-items: center; justify-content: center; padding: 16px 0; cursor: pointer; transition: all 0.3s; border-left: 1px solid transparent; } .sidebar-mini-child__list-container:hover { background-color: #333435; border-left-color: var(--color-primary); } .sidebar-mini-child__icon { transition: all 0.3s; } .sidebar-mini-child__list-container:hover .sidebar-mini-child__icon { transform: scale(1.2); } .header-nav__logo { width: 145px; visibility: hidden; margin-right: 59px; } .header-nav__logo.active { visibility: visible; } .header-wrapper { background-color: var(--color-primary-grey); height: 78px; position: fixed; width: 100%; z-index: 12; } .header-nav__wrapper { height: inherit; display: flex; /* padding: 19px 0; */ } .header-nav__container { display: flex; align-items: center; color: #FFFFFF; height: 100%; } .header-nav__container .router-link-active .header-nav__pill { border-bottom-color: var(--color-primary); } .header-nav__container .router-link-active .header-nav__pill-icon path { background-color: #000; } .header-nav__pill { margin-right: 42px; height: 78px; display: flex; align-items: center; cursor: pointer; border-bottom: 2px solid transparent; } .header-nav__pill-icon { margin-right: 10px; } .header-nav__pill:hover { border-bottom-color: var(--color-primary); } .header-nav__card-wrapper { display: flex; align-items: center; justify-content: space-between; } .header-nav__login { color: white; font-size: 14px; font-weight: 700; margin-right: 54px; } .header-menu__card-wrapper { position: relative; height: inherit; display: flex; align-items: center; border-bottom: 1px solid var(--color-primary-grey); cursor: pointer; margin-right: 58px; } .header-menu__card-wrapper:hover { border-bottom-color: var(--color-primary); } .header-menu__card { display: block; } .header-menu__card-name { color: var(--color-grey); margin-right: 10px; } .header-menu__card-icon { transition: all 0.3s; transform: rotate(180deg); } .header-menu__card-wrapper:hover .header-menu__card-icon { transform: rotate(0); } .header-menu__card-wrapper:hover .header-menu__child-wrapper { transform: scale(1); } .header-menu__child-wrapper { transform: scale(0); transition: all 0.3s; transform-origin: 1.5rem 0; position: absolute; top: 79px; z-index: 11; } .header-menu__child-container { position: relative; background-color: #1E1E1E; padding: 20px 30px 30px; margin-top: 10px; } .header-menu__child-title { font-weight: 500; font-size: 20px; color: white; margin-bottom: 20px; } .header-menu__child-list__wrapper { display: flex; overflow: hidden; border-radius: 15px; } .header-menu__child-card { cursor: pointer; display: flex; align-items: center; flex-direction: column; background-color: #444447; border-right: 2px solid #3A3B3C; width: 140px; height: 104px; justify-content: center; overflow: hidden; } .header-menu__child-card:last-child { border-right: none; } .header-menu__child-icon { margin-bottom: 5px; transition: all 0.3s; width: 30px; } .header-menu__child-name { font-weight: 400; font-size: 14px; color: var(--color-grey); transition: all 0.3s; text-align: center; } .header-menu__child-card:hover .header-menu__child-icon { transform: scale(1.15); } .header-menu__child-card:hover .header-menu__child-name { transform: scale(1.15); } .header-menu__child-card:hover { filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5)); } .header-nav__profile-wrapper { display: flex; align-items: center; } .header-nav__profile { display: flex; align-items: center; background: #3A3B3C; border-radius: 21px; padding: 10px; width: 177px; cursor: pointer; margin-right: 10px; } .header-nav__profile-avatar { width: 31px; height: 31px; border: 2px solid var(--color-primary); border-radius: 50%; overflow: hidden; cursor: pointer; transition: all 0.5s; margin-right: 11px; } .header-nav__profile-text { color: #EBEBEB; font-style: italic; font-size: 12px; font-weight: 500; text-transform: capitalize; } .header-profile__modal-container { background: #1e1e1e; padding: 20px; margin-top: 24px; } .header-profile__modal { position: absolute; z-index: 11; right: 0; transform: scale(0); transition: all 0.3s; transform-origin: 100% 0; } .header-profile__modal.open { transform: scale(1); } .header-profile__modal-2 { display: flex; background: #444447; border-radius: 15px; height: 120px; } .header-profile__modal-2-container { display: flex; flex-direction: column; align-items: center; width: 138px; border-right: 2px solid #3A3B3C; justify-content: center; } .header-profile__modal-2-container:last-child { border-right: none; } .header-profile_modal-2__text { display: flex; flex-direction: column; align-items: center; color: var(--color-grey); margin-top: 12px; font-size: 14px; } .header-profile__modal-title { color: white; margin-bottom: 20px; } .header-profile__modal-title__wrapper { display: flex; justify-content: space-between; } .header-profile__modal-3 { display: flex; align-items: center; color: var(--color-grey); font-size: 14px; font-weight: 500; cursor: pointer; } .header-profile__modal-3__wrapper { display: grid; grid-template-columns: repeat(2, 1fr); padding: 20px 15px 15px; grid-row-gap: 20px; row-gap: 20px; } .header-profile__modal-3__icon { margin-right: 8px; width: 20px; -o-object-fit: contain; object-fit: contain; } .header-nav__right-wrapper { display: flex; align-items: center; } .header-nav__chat-wrapper { position: relative; margin-right: 2rem; } .header-nav__chat-icon { width: 25px; height: 25px; } .header-nav__chat-dot { width: 8px; height: 8px; background: var(--color-danger); border-radius: 50%; position: absolute; top: -8px; right: -8px; } .quest-badge { background: linear-gradient(93.89deg, #289D82 -2.79%, #2779D9 137.65%); border-radius: 15px; min-width: 156px; min-height: 41px; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; } .quest-text { color: white; font-weight: 700; margin-right: 15px; } .quest-live { position: absolute; top: -0.6rem; background: #289D82; color: white; padding: 0.25rem 0.8rem; border-radius: 8px; font-size: 10px; right: -1rem; z-index: 1; } .quest-icon { position: absolute; right: 1rem; } .quest-badge__wrapper { position: relative; margin-right: 54px; } .quest-body { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; gap: 20px; } .quest-content { padding: 20px 37px; border-radius: 25px; position: absolute; background: #1E1E1E; z-index: 11; transition: all 0.3s; transform: scale(0); transform-origin: 100% 0; margin-top: 2rem; right: 0; max-height: 87vh; overflow-y: auto; } .quest-content.active { transform: scale(1); } .quest-header { display: flex; justify-content: space-between; margin-bottom: 20px; align-items: center; } .quest-header__text { font-size: 20px; font-weight: 500; color: white; } .quest-header__close { border-radius: 50%; background: #3A3B3C; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .quest-card { width: 411px; border-radius: 15px; background: var(--color-primary-grey); padding: 25px; } .quest-card__header { display: flex; justify-content: space-between; margin-bottom: 20px; } .quest-card__header-title { font-size: 14px; color: white; } .quest-card__header-badge { background: #CC3633; font-size: 12px; border-radius: 15px; color: white; padding: 5px 15px; display: flex; align-items: center; text-transform: uppercase; } .quest-card__body { display: flex; justify-content: space-between; position: relative; align-items: center; } .quest-card__img { margin-right: 15px; width: 44px; } .quest-card__button { background: var(--color-primary); border-radius: 15px; font-size: 14px; font-weight: 700; min-width: 82px; min-height: 41px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .quest-card__button.disable { pointer-events: none; background: #585858; color: #B2B2B2; } .quest-card__status { color: var(--color-grey); font-size: 14px; } .quest-card__status-score { font-size: 19px; font-weight: 700; } .quest-card__body-left { display: flex; align-items: center; z-index: 1; } .quest-card__body-status-img { position: absolute; right: 94px; width: 67px; min-height: 94px; top: -61px; -o-object-fit: contain; object-fit: contain; } ft-my-rewards-toggle:not(:defined) { display: none; } .chat-wrapper { background: #171717; width: 360px; position: absolute; top: 3rem; z-index: 12; left: -6rem; color: #B2B2B2; display: none; } .chat-wrapper.active { display: block; } .chat-header { display: flex; justify-content: space-between; padding: 1rem; align-items: center; } .header-nav__right { position: relative; } .chat-header__right-wrapper { display: flex; align-items: center; justify-content: center; gap: 1rem; } .chat-header__rules { background: #5D5D61; border-radius: 15px; padding: 0.5rem 1.5rem; color: white; } .chat-header__close-wrapper { background: #3A3B3C; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .chat-body { padding: 0 1rem 1rem; max-height: 50vh; overflow-y: auto; scroll-behavior: smooth; } .chat-card__vip { width: 16px; height: 16px; } .chat-card__vip.admin { position: relative; } .chat-card__user { color: white; display: inline-flex; gap: 4px; } .chat-card { padding: 8px 12px; background-color: rgba(51,54,59,0.76078); margin-bottom: 8px; border-radius: 8px; display: block; word-wrap: break-word; } .chat-footer { padding: 1rem; background: black; border-top: 1px solid #606060; } .chat-text-area { width: 100%; border-radius: 8px; border: 1px solid #606060; background: black; color: white; overflow: hidden; resize: none; padding: 13px 49px 13px 16px; } .chat-text-area__wrapper { position: relative; margin-bottom: 8px; } .chat-text-area__right { position: absolute; top: 0; right: 16px; bottom: 0; display: flex; align-items: center; gap: 16px; cursor: pointer; } .chat-text-area__right img { width: 25px; } .chat-footer__word-wrapper { display: flex; justify-content: space-between; } .emoji-wrapper { z-index: 13; position: absolute; bottom: 128px; background: black; width: 100%; max-height: 392px; overflow-y: auto; left: 2px; display: none; } .emoji-wrapper.active { display: block; } .emoji-list__wrapper { padding: 16px; } .emoji-list__container { overflow-y: auto; /* display: inline-grid; grid-template-columns: repeat(7, 1fr); height: 221px; row-gap: 20px; column-gap: 10px; */ display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); height: 191px; } .emoji-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 4px; padding: 12px 16px; border-bottom: 1px solid grey; } .emoji-list__inside { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 8px; cursor: pointer; font-size: 24px; padding: 8px; } .emoji-list__inside:hover { background: #121a27; } .chat-angpao__content { border: 1px solid var(--color-primary); border-radius: 5px; display: flex; align-items: center; justify-content: center; padding: 3px; cursor: pointer; } .chat-angpao__mini-img { width: 25px; margin-right: 12px; } .chat-angpao__tick-icon { width: 16px; margin-right: 5px; } .chat-angpao__share-header { display: flex; align-items: center; margin-bottom: 5px; } .chat-angpao__share-header-ecl { color: var(--color-primary); margin-right: 4px; } .chat-angpao__share-text { color: #4466EE; margin-left: 5px; } .chat-angpao__grab-now { color: var(--color-primary); } .modal-angpao-open { width: 255px; } .modal-angpao-cancel { color: white; margin-top: 10px; cursor: pointer; text-align: center; } .modal-angapo { background: transparent; display: flex; flex-direction: column; align-items: center; } .chat-rule__modal { padding: 1rem; background: #1E2020; border-radius: 10px; padding-left: 2rem; } @media (max-width: 768px) { .emoji-list__wrapper { /* height: 146px; */ } .emoji-list__container { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); /* row-gap: 20px; column-gap: 10px; */ max-height: 169px; } .chat-wrapper { top: 0; left: 0; right: 0; width: 100%; bottom: 0; position: fixed; } .chat-body { height: calc(100% - 198px); max-height: none; } } .footer-wrapper { display: flex; justify-content: space-between; } .footer-divider { width: 1662.5px; margin: 0 auto; height: 2px; background-color: #2D2E30; margin-top: 30px; margin-bottom: 60px; } .footer-divider-2 { width: 1662.5px; margin: 0 auto; height: 2px; background-color: #2D2E30; margin-top: 60px; margin-bottom: 63px; } .footer-parent__text { font-size: 12px; color: #F5F5F5; margin-bottom: 24px; } .footer-child__text { font-size: 14px; color: #B2B2B2; margin-bottom: 16px; display: block; cursor: pointer; } .footer-section__1 { display: flex; justify-content: space-between; color: #B2B2B2; font-size: 14px; margin-bottom: 25px; } .footer-section__logo { width: 145px; -o-object-fit: contain; object-fit: contain; } .footer-section__1-follow { width: 235px; } .footer-section__1-icon { display: flex; margin-top: 14px; align-items: center; } .footer-section__1-icon a { margin-right: 22px; } .footer-section__1-icon a:last-child { margin-right: 0; } .footer-section__2 { color: white; font-size: 14px; font-weight: 400; margin-bottom: 15px; } .footer-section__3 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .footer-section__4 { display: flex; justify-content: flex-end; color: #B2B2B2; font-weight: 400; font-size: 12px; margin-bottom: 30px; } .footer-social-media { width: 33px; } .anj-logo__wrapper { width: 50px; height: 50px; margin-left: 10px; display: inline-block; } @media (max-width: 768px) { .footer-container { padding: 24px 0; } } .betting-transaction__tab { display: flex; justify-content: space-between; margin-bottom: 27px; align-items: center; } .betting-transaction__view-more { font-weight: 700; font-size: 14px; color: white; } .betting-transaction__table { width: 100%; } .betting-transaction__table-wrapper { width: 100%; } .betting-transaction__table-container { overflow-x: auto; } .betting-transaction__tooltip { position: inherit !important; right: auto !important; right: initial !important; top: auto !important; top: initial !important; } .betting-transaction__tooltip { margin-left: 10px; } .top-daily-winner__table { width: 100%; } .betting-transaction__table tr th:nth-child(1) { width: 250px; padding-left: 5rem; } .top-daily-winner__table tr th:nth-child(1), .top-daily-winner__table tr td:nth-child(1) { width: 150px; padding-left: 3rem; } .top-daily-winner__table tr th:nth-child(2) { width: 300px; } .top-daily-winner__table tr th:nth-child(3) { width: 150px; } .betting-table__2 { width: 280px; } .betting-table__3 { width: 200px; } .betting-table__tips { font-weight: 400; } .betting-table__tips-usd { margin-bottom: 0.5rem; } .betting-table__tips-rate { font-weight: 500; color: #fff; list-style: none; } .betting-table__tips-wrapper { margin-bottom: 0; } .betting-transaction__icon { margin-right: 1rem; width: 20px; } .betting-table__td-1 { padding-left: 3rem !important; } .betting-table__td-1 { display: flex; } @media (max-width: 768px) { .betting-transaction__table { width: 1000px; } .betting-transaction__tab { width: 100%; } .betting-transaction__view-more { display: none; } .betting-transaction__table th { font-size: 14px; } .top-daily-winner__table tr th:nth-child(2) { width: 200px; } .top-daily-winner__table tr th:nth-child(3) { width: 150px; } .top-daily-winner__table { width: 800px; } .betting-table__2 { width: 240px; } .betting-table__3 { width: 130px; } } .vip-service__wrapper { border-top: 1px solid #D8B870; padding: 20px; display: inline-block; position: relative; } .vip-service__title { font-size: 20px; color: white; font-weight: bold; margin-bottom: 20px; } .vip-service__link-wrapper { margin-bottom: 20px; display: flex; align-items: center; gap: 15px; color: #289D82; cursor: pointer; } .vip-service__link { -webkit-text-decoration: underline; text-decoration: underline; font-style: italic; } .vip-service__desc { color: #B2B2B2; font-size: 16px; margin-bottom: 7px; } .vip-service__exclusive { color: #FABB2E; font-style: italic; font-size: 16px; } .vip-service__crown { position: absolute; top: -4rem; right: -4rem; width: 121px; } @media (max-width: 768px) { .vip-service__crown { top: -2.5rem; right: -3rem; width: 107px; } .vip-service__wrapper { width: 90%; } .vip-service__desc { font-size: 14px; } .vip-service__exclusive { font-size: 14px; } } .no-info-box { background-color: #2B2B2B; height: 100px; color: #b2b2b2; display: flex; align-items: center; justify-content: center; border-radius: 15px; font-size: 16px; width: 100%; margin: 10px 0; } @media (max-width: 768px) { .mobile-profile__nav { display: flex; justify-content: center; padding-top: 10px; } } .account-header{ display: flex; } .account-summary__card{ background: #272727; border-radius: 15.5722px; padding: 19.36px 26.06px 16.33px; width: 186px; color: var(--color-grey); justify-content: center; display: flex; flex-direction: column; position: relative; } .account-summary__tooltip{ position: absolute; right: 20px; top: 20px; cursor: pointer; } .account-summary__tooltip-icon{ } .account-summary__tooltip:hover .account-summary__tooltip-desc{ transform: scale(1); } .account-summary__tooltip-desc__header{ font-size: 14px; margin-bottom: 13px; text-align: justify; } .account-summary__tooltip-desc__label{ font-size: 14px; font-weight: 400; text-transform: uppercase; } .account-summary__tooltip-desc__value{ font-size: 13px; font-weight: 700; } .account-summary__tooltip-desc{ padding: 20px; background: #343435; border-radius: 15px; transform: scale(0); transition: all .3s; transform-origin: 0 0; z-index: 1; position: absolute; width: 228px; } .account-summary__tooltip-desc.selected{ transform: scale(1); } .account-summary__wrapper{ display: flex; gap: 21px; margin-bottom: 37px; } .account-summary__card-center{ display: flex; flex-direction: column; align-items: center; font-size: 11.821px; color: white; font-weight: 500; font-size: 11.821px; } .account-summary__currency{ font-size: 11.821px; color: var(--color-grey) } .account-summary__amount{ color: #FFFFFF; font-weight: 500; font-size: 16.8872px; } .account-summary__desc{ font-size: 11.821px; color: var(--color-grey) } .account-summary__level-icon{ width: 42px; height: 42px; -o-object-fit: contain; object-fit: contain; margin-bottom: 6.13px } .account-summary__badge{ font-weight: 500; font-size: 12px; text-transform: capitalize; } .account-menu__verify-wrapper { cursor: pointer; } @media (max-width: 768px){ .account-summary__wrapper{ /* display: none; */ margin-bottom: 0; margin-top: 20px; gap: 10px; } .account-header{ display: none } } .account-menu__container{ margin-bottom: 49px; } .account-menu__sidebar{ margin-right: 49.5px; width: 229px; } .account-menu__parent-title{ font-size: 12px; color: #B2B2B2; margin-bottom: 6px; } .account-menu__child-wrapper{ display: block; } .account-menu__child-wrapper::after{ content: ""; display: block; height: 1px; background-color: #B2B2B2; margin: 0 auto; } .account-menu__child-container{ display: flex; align-items: center; padding: 19px 0 21px 13px; font-size: 14px; color: #B2B2B2; font-weight: 500; position: relative; } .account-menu__child-container:hover{ background-color: #373737; border-radius: 15px; } .account-menu__child-container.selected{ background-color: #373737; border-radius: 15px; } .account-menu__child-icon{ width: 20px; height: 20px; -o-object-fit: contain; object-fit: contain; margin-right: 13px; } .account-menu__profile-avatar{ width: 70px; height: 70px; margin-right: 14px; } .account-menu__profile{ display: flex; flex-direction: column; margin-bottom: 26px; width: inherit; margin-right: 49.5px; width: 229px; } .account-menu__profile-footer{ display: flex; justify-content: space-between; color: var(--color-grey); font-size: 14px; padding: 0 13px; } .account-menu__profile-body{ display: flex; font-size: 14px; margin-bottom: 20px; } .account-menu__profile-content{ color: white; font-size: 14px; } .account-menu__profile-balance{ display: flex; align-items: baseline; margin-right: 11px; } .account-menu__profile-wallet{ color: #289D82; font-weight: 400; font-size: 12px; } .account-menu__profile-balance__wrapper{ display: flex; margin-top: 10px; margin-bottom: 7px; cursor: pointer; } .account-menu__profile-balance-currency{ font-size: 12px; } .account-menu__profile-balance-amount{ font-weight: 700; font-size: 20px; } .account-red-dot{ width: 12px; height: 12px; border-radius: 50%; position: absolute; right: 20px; background: var(--color-danger); } .account-menu__verify-wrapper{ display: flex; } .account-menu__verify{ margin-right: 15px; } .account-menu__verify-2{ width: 16px; margin-right: 15px; } .account-menu__verfiy-icon-tick{ position: absolute; right: -12px; top: -10px; width: 16px; height: 16px; } .account-menu__verfiy-icon-tick-2{ position: absolute; right: -7px; top: -8px; width: 16px; height: 16px; } @media (max-width: 768px){ .account-menu__sidebar{ display: none; } } .mobile-banking-header { margin-bottom: 13px; padding-top: 21px; } .mobile-banking-header__title { font-size: 16px; color: white; font-weight: 500; margin-bottom: 14px; } .mobile-banking-header__balance { font-weight: 700; font-size: 16px; color: white; margin-right: 13px; } .mobile-nav__link-container { background-color: #353537; border-radius: 20.0441px; padding: 5px 6.5px; white-space: nowrap; display: flex; align-items: center; margin-left: 11.45px; margin-right: 20px; width: 458px; } .mobile-nav__link-wrapper { background-color: #353537; border-radius: 20.0441px; overflow-x: auto; padding-top: 13.01px; } .mobile-nav__link { padding: 12px 24px; border-radius: 17.0375px; margin-right: 10px; color: white; font-size: 12px; -webkit-text-decoration: none; text-decoration: none; } .mobile-nav__link.selected { background-color: #47494B; color: white; } @media (max-width: 768px) { .mobile-nav__link-container { display: block; width: 100%; background-color: #353537; } .mobile-nav__link-wrapper { padding-top: 0; margin: 13.01px 10px; } .mobile-nav__link { display: inline-block; } } .turnover-wrapper { opacity: 0; transition: all 0.3s; } .turnover-wrapper.active { opacity: 1; } .turnover-title { font-size: 14px; color: white; margin-bottom: 20px; } .turnover-table { width: 675px; } .turnover-table td { color: var(--color-grey) !important; } .turnover-header-footer td { font-size: 14px !important; color: white !important; } .turnover-header-footer td { font-weight: 500; } .turnover-table-td-2 { text-align: right !important; padding-right: 114px !important; } .turnover-table-td-2 { font-size: 14px; } .turnover-table-td-1 { text-align: left !important; padding-left: 45px !important; } .turnover-table-td-1 { font-size: 14px; } @media (max-width: 768px) { .turnover-table { width: 100%; } .turnover-table-td-1 { font-size: 10px !important; } .turnover-header-footer td { font-size: 10px !important; } .turnover-table-td-2 { padding-right: 25px !important; font-size: 10px !important; } } .number-game__banner-wrapper { position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.5); flex-direction: column; z-index: 14; } .number-game__banner-ok-btn { display: flex; width: 141px; padding: 12px 33px; justify-content: center; align-items: center; gap: 12px; border-radius: 15px; background: #FABB2E; cursor: pointer; margin-top: 16px; } .number-game__banner-btn { display: flex; width: 141px; padding: 12px 33px; justify-content: center; align-items: center; gap: 12px; border-radius: 15px; background: #B2B2B2; margin-top: 16px; } .number-game__banner-btn-countdown { border-radius: 50%; width: 26px; height: 26px; border: 2px solid black; font-size: 14px; color: black; display: flex; align-items: center; justify-content: center; } .number-game__banner-img { width: 600px; } @media (max-width: 768px) { .number-game__banner-img { width: 90%; } .number-game__banner-btn { width: 90%; } .number-game__banner-ok-btn { width: 90%; } } .auto-transfer__wrapper { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; } .auto-transfer__title { font-size: 14px; color: var(--color-grey); margin-right: 11px; } .wallet-ticket__wrapper { display: flex; justify-content: space-between; margin: 0 34px 10px; } .wallet-ticket--left__wrapper { display: flex; align-items: center; color: #B2B2B2; font-size: 14px; } .wallet-ticket--left__ticket { width: 150px; margin-right: 10px; } .wallet-ticket--left__icon { width: 18px; margin-right: 10px; } .wallet-ticket--go { background: #CC3633; color: white; font-size: 10px; border-radius: 11px; min-width: 35px; text-align: center; padding: 5px 10px; } .wallet-ticket--go__wrapper { border-radius: 11px; background: #202020; padding: 10px; } .event-wrapper{ display: inline-grid; grid-template-columns: repeat(4, 1fr); gap: 15px; } @media (max-width: 768px) { .event-wrapper { display: flex; flex-direction: column; align-items: center; padding: 0 1rem; } } .event-card { width: 270px; border-radius: 15px; overflow: hidden; border: 1px solid black; box-sizing: border-box; padding-bottom: 20px; background: white; } .event-card.event-in-progress { border-color: #289D82; } .event-card.event-upcoming { border-color: #FABB2E; } .event-card.event-ended { border-color: #CC3633; } .event-card__header { position: relative; height: 51px; } .event-in-progress .event-card__header { background: #289D82; } .event-upcoming .event-card__header { background: #FFD372; } .event-ended .event-card__header { background: #E76A68; } .event-card__body { display: flex; flex-direction: column; align-items: center; } .event-card__avatar { width: 76px; height: 76px; border-radius: 50%; border: 1px solid white; box-sizing: border-box; background: white; display: flex; align-items: center; justify-content: center; } .event-card__avatar-wrapper { display: flex; align-items: center; justify-content: center; padding-top: 10px; } .event-in-progress .event-card__avatar { border-color: #289D82; } .event-upcoming .event-card__avatar { border-color: #FFD372; } .event-ended .event-card__avatar { border-color: #E76A68; } .event-card__title { text-align: center; font-weight: 700; font-size: 16px; padding-top: 44px; } .event-card__desc { color: #B2B2B2; font-size: 15px; margin-bottom: 10px; } .event-card__pill { border-radius: 50px; color: white; padding: 7px 20px; margin-bottom: 18px; } .event-in-progress .event-card__pill { background: #289D82; } .event-upcoming .event-card__pill { background: #FABB2E; } .event-ended .event-card__pill { background: #CC3633; } .event-card__prize { font-weight: 500; font-size: 16px; margin-bottom: 3px; } .event-card__time { font-size: 14px; color: #B2B2B2; margin-bottom: 4px; } .event-card__prize-pool { margin-bottom: 28px; } .event-card__countdown { background: #EBEBEB; color: #B2B2B2; width: 210px; margin-bottom: 20px; border-radius: 15px; padding: 10px; display: flex; justify-content: center; align-items: center; height: 45px; } .event-card__rules { background: #353537; color: white; font-weight: 700; border-radius: 15px; padding: 11px 20px; width: 179px; text-align: center; box-sizing: border-box; margin-bottom: 10px; cursor: pointer; } .event-card__rules.disabled { background: #B2B2B2; color: black; pointer-events: none; } .event-card__participate-word { position: relative; color: black; } .event-card__participate { background: #B2B2B2; color: black; font-weight: 700; border-radius: 15px; padding: 11px 20px; width: 179px; text-align: center; box-sizing: border-box; pointer-events: none; position: relative; overflow: hidden; transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); } .event-card__participate::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; transform-origin: center center; transform: translateX(-100%); transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1); background: linear-gradient(90deg, #efbe52, #e7cc8f); } .event-card__participate:hover::before { transform: translateX(0) scaleX(1.1); transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); } .event-card__participate.in-progress { cursor: pointer; pointer-events: fill; background-image: linear-gradient(to right, #ffd373, #ffbf2f); } .event-card__countdown-box { display: flex; flex-direction: column; align-items: center; color: black; font-size: 16px; } .event-card__countdown-seperator { color: black; margin-left: 5px; margin-right: 5px; } .event-card__countdown-date { font-size: 10px; color: #B2B2B2; } @media (max-width: 768px) { .event-card { width: 100%; } } .promotion-list__wrapper{ display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; grid-row-gap: 30px; row-gap: 30px; margin-top: 60px; } .promotion-card{ border-radius: 15px; overflow: hidden; display: block; } .promotion-card__header{ padding: 0 10px; height: auto; overflow: hidden; } .promotion-card__header img{ height: auto; width: 100%; -o-object-fit: cover; object-fit: cover; } .promotion-card__footer{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; background-color: #2D2D2F; box-sizing: border-box; padding: 30px; color: white; font-weight: 500; font-size: 20px; min-height: 108px; } @media (max-width: 768px){ .promotion-list__wrapper{ grid-template-columns: repeat(1, 1fr); row-gap: 10px; } .promotion-list__wrapper{ margin-top: 15px; } } .euro-swiper__wrapper{ width: 400px; } .euro-pop-img__wrapper{ width:500px; height:500px; } .euro-pop-img{ width:100%; height:100%; } .hot-games { padding: 10px 0 30px 0; } .px10 { padding: 0 10px !important; } .py10 { padding: 10px 0 !important; } .home-banner{ min-height: 308px; margin-top: 29px; margin-bottom: 20px; } .home-popular__wrapper{ display: flex; gap: 14px; margin-bottom: 65px; } .home-popular__card{ background: linear-gradient(91.55deg, #289D82 14.12%, #2779D9 138.72%); border-radius: 15px; color: white; display: flex; align-items: center; flex: 1; justify-content: space-between; background-size: 300% 300%; animation: animatedgradient 3s ease alternate infinite; padding: 0 12px; } .home-popular__card.ranking-board{ background: linear-gradient(91.86deg, #FFA469 14.04%, #F8D82E 106.97%); background-size: 300% 300%; } .home-popular__card.prediction{ background: linear-gradient(90.21deg, #FF6489 0.04%, #CC3633 97.87%); background-size: 300% 300%; } .home-popular__card.personal-achievement{ background: linear-gradient(90.21deg, #8c5ffa 0.04%, #4139d2 97.87%); background-size: 300% 300%; } .home-popular__icon{ width: 70px; height: 70px; } .home-popular__icon-wrapper{ display: flex; align-items: center; justify-content: center; } .home-popular__text{ font-weight: 500; font-size: 18px; text-align: center; } .home-popular__btn{ background: #353537; border-radius: 15px; padding: 12px 14.5px; cursor: pointer; font-size: 14px; white-space: nowrap; } .home-section{ margin-bottom: 60px; } /* movie */ .home-watch__banner-wrapper{ position: relative; display: block; overflow: hidden; border-radius: 15px; } .home-watch-now { font-weight: 700; font-size: 14px; color: white; background: #353537; border-radius: 15px; padding: 12px 26px; position: absolute; bottom: 20px; right: 60px; } /* sponsor */ .home-sponsor__container{ display: flex; gap: 70px; } .home-sponsor__iframe{ width: 626px; height: 266px; } .home-sponsor__iframe-wrapper{ border: 1px solid #FABB2E; border-radius: 15px; overflow: hidden; height: 302px; display: flex; align-items: center; } .home-sponsor__intro{ flex: 1; display: flex; } .home-sponsor__desc-wrapper{ color: white; font-size: 14px; width: 279px; margin-right: 47px; display: flex; flex-direction: column; justify-content: center; } .home-sponsor__desc-name{ font-size: 14px; color: #FABB2E; margin-bottom: 30px; } .home-sponsor__desc-follower{ margin-top: 20px; margin-bottom: 15px; color: #FABB2E; } .home-sponsor__ambassador-smoke{ position: absolute; bottom: 0; left: 0; } /* influencer */ .home-influencer__list{ display: flex; gap: 70px; margin-bottom: 29px; } .home-influencer__card{ position: relative; } .home-influencer__outline{ overflow: hidden; border: 1px solid #FABB2E; border-radius: 50%; } .home-influencer__name{ color: white; text-align: center; font-weight: 500; font-size: 11.2134px; margin-top: 9.39px; } .home-influencer__desc{ font-size: 14px; color: white; text-align: justify; } /* download app */ .home-download{ border-radius: 15px; overflow: hidden; display: flex; height: 340px; } .home-download__left{ background: #2D2D2F; width: 537px; display: flex; flex-direction: column; color: white; justify-content: center; padding: 0 0 0 66px; } .home-download__left-title-1{ font-size: 12px; margin-bottom: 8px; } .home-download__left-title-2{ font-weight: 700; font-size: 32px; margin-bottom: 12px; } .home-download__left-title-3{ font-size: 14px; margin-bottom: 48px; } .home-download__left-img-wrapper{ display: flex; gap: 24px; } .home-download__right{ position: relative; background: linear-gradient(91.86deg, #FFA469 14.04%, #F8D82E 106.97%); background-size: 300% 300%; animation: animatedgradient 5s ease alternate infinite; flex: 1; } .home-download__right-bg{ position: absolute; } .home-download__right-phone-1{ position: absolute; bottom: 0; left: 24%; z-index: 1; } .home-download__right-phone-2{ position: absolute; bottom: 0; left: 46%; } /* mobile */ .home-game__category-card{ display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--color-grey); font-size: 11px; } .home-game__category-card__title{ text-align: center; } .home-game__category-container{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 30px; gap: 30px; padding: 0 16px; } .home-game__category-wrapper{ border-top-left-radius: 20px 12px; border-top-right-radius: 20px 12px; border-top: 1px solid var(--color-primary); padding: 22px 0; margin-top: 16px; } .home-game__category-img{ margin-bottom: 6px; width: 20px; height: 20px; -o-object-fit: contain; object-fit: contain; } .home-jackpot{ margin-bottom: 20px } .home-mini-jackpot{ margin-bottom: 40px } .home-download__wrapper{ display: flex; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; padding-left: 16px; } .home-download__card{ background: #252527; border-radius: 15px; padding: 15px; margin-right: 10px; padding-bottom: 25px; min-width: 56%; } .home-download__img-wrapper{ border-radius: 15px; padding: 10px; margin-bottom: 10px; display: block; background: #1F1C1D; } .home-download__text-1{ color: white; font-size: 14px; margin-bottom: 4px; font-weight: 500; } .home-download__text-2{ color: white; font-size: 12px; font-weight: 400; } @media (max-width: 768px){ .home-popular__wrapper{ flex-direction: column } .home-popular__text{ font-size: 15px; } .home-popular__card{ padding: 0 16px; } .home-popular__btn{ font-size: 11px; padding: 9px 15px; } .home-mobile-jackpot-wrapper{ display: block; } .home-mobile-jackpot-gif{ position: absolute; top: 0; right: -10px; } .home-mobile-jackpot-grand-gif{ position: absolute; width: 4rem; top: 1.2rem; right: 0.5rem; } .home-mobile-jackpot__title{ position: absolute; font-family: "Rubik"; font-size: 14px; font-weight: bold; color: white; top: 1rem; left: 1rem; } .home-mobile-jackpot__prize{ position: absolute; font-family: "Rubik"; font-size: 36px; font-weight: bold; color: #FABB2E; top: 2.5rem; left: 1rem; } } .swiper-button-prev::after, .swiper-button-next::after { display: none; } .home-banner-container { position: relative; height: 320px; } .home-banner__skeleton { height: 318px; width: 1345px; background: linear-gradient(100deg, rgba(79, 79, 79, 0) 40%, rgba(73, 66, 66, 0.5) 50%, rgba(26, 8, 8, 0) 60%) #17191a; background-size: 200% 100%; background-position-x: 180%; animation: 1s loading ease-in-out infinite; position: absolute; top: 0px; z-index: 11; left: -24px; border-radius: 15px; } .home-banner-container .swiper-button-next { right: -20px; width: 40px; height: 40px; } .home-banner-container .swiper-button-prev { left: -20px; width: 40px; height: 40px; } .home-banner-container .swiper { border-radius: 15px; } .home-banner__img { border-radius: 15px; } @media (max-width: 768px) { .home-banner-container { padding-top: 10px; height: calc(105vw / 1.5); } .home-banner__skeleton { height: 75vw; width: 100%; background: linear-gradient(291deg, #3e4142 25%, #17191a 37%, #252526 63%); border-radius: 0.2rem; background-size: 400% 100%; animation: el-skeleton-loading 1.4s ease infinite; position: absolute; top: 0; z-index: 11; left: 0; right: 0; } .home-banner { min-height: auto; margin-bottom: 30px; } .home-banner-container .swiper-button-next { right: 36px; z-index: 1; } .home-banner-container .swiper-button-prev { left: 36px; z-index: 1; } .home-banner-container .swiper-slide .home-banner__img { height: calc(100vw / 1.5 - 3px); -o-object-fit: cover; object-fit: cover; } .home-banner-container .swiper-slide-active .home-banner__img { border: 2px solid var(--color-primary); } .home-banner-container .swiper-slide { opacity: 0.5; transition: all 0.3s; } .home-banner-container .swiper-slide-active { opacity: 1; } .home-banner-container .swiper-pagination { bottom: -20px; } .home-banner-container .swiper-pagination-clickable .swiper-pagination-bullet { background: #215b4e; } .home-banner-container .swiper-pagination-bullet-active { background: #319f87 !important; } .home-banner-container .swiper-pagination-bullet { opacity: 1; } } .sample-slider .swiper-wrapper { transition-timing-function: linear; } .gamelist-card__wrapper { overflow: hidden; } .gamelist-home__wrapper { display: flex; white-space: nowrap; padding: 1rem 0; } .gamelist-home-card { display: inline-block; min-width: 10rem; height: 3rem; } .game-wrapper{ display: grid; grid-template-columns: repeat(6,1fr); grid-column-gap: 20px; grid-row-gap: 20px; margin-bottom: 60px; } .game-card{ position: relative; cursor: pointer; } .game-card__2{ position: relative; cursor: pointer; } .game-card__fake-cover{ width: 100%; height: 85%; position: absolute; bottom: 0; z-index: 1; } .game-card__fake-cover:hover .game-card__video-wrapper{ transform: scale(1); } .game-card__label{ background: #289D82; padding: .3rem .3rem; border-radius: .5rem; color: white; display: inline; top: 10px; position: absolute; right: 10px; font-size: 11px; } .game-card__label-2{ background: #FABB2E; padding: .3rem .5rem; border-radius: .5rem; color: black; display: inline; top: 10px; position: absolute; font-size: 10px; left: 10px; display: flex; align-items: center; } .game-card__label-2.slots{ top: 2px; left: 5px; } .game-card__label-2-text{ margin-left: 4px; } .game-card__label.new{ background: #CC3633; } .game-card__label.slots{ top: 2px; right: 5px; font-size: 10px; } .game-card__title{ text-align: center; color: white; margin-top: 10px; font-size: 15px; } .game-card__video-wrapper{ overflow: hidden; border-radius: 15px; border: 1px solid var(--color-primary); overflow: hidden; position: absolute; bottom: 0; width: 361px; top: 0; transition: all .3s; transform-origin: 0 277px; transform: scale(0); z-index: 1; display: flex; flex-direction: column; justify-content: center; } .game-card__content{ position: relative; } .game-card__content-img{ border-radius: 15px } .game-card__video-footer{ padding: 11px 30px; background: #000000; color: white; display: flex; align-items: center; justify-content: space-between; } .game-card__video{ width: 100%; height: 100%; } .game-card:hover .game-card__video-wrapper{ transform: scale(1); } .vpn-download__header{ margin-bottom: 1rem; color:#B2B2B2; width: 100%; } .vpn-download__id{ color:#FABB2E; font-weight: bold; width: 100% } .vpn-download__link{ color: #289D82; margin-top: 1rem; width: 100%; } @media (max-width: 768px) { .game-wrapper{ grid-template-columns: repeat(2,1fr); grid-column-gap: 10px; grid-row-gap: 10px; } .game-card:hover .game-card__video-wrapper{ transform: scale(0); } .game-card__title{ display: none } } .lottery-wrapper{ margin-top: 30px; padding: 0 30px; box-sizing: border-box; } .lottery-header{ display: flex; justify-content: space-between; margin-bottom: 30px; } .lottery-info{ display: flex; gap: 63px; margin-bottom: 60px } .lottery-info__title{ color: #FFFFFF; font-weight: 400; font-size: 14px; margin-bottom: 20px; } .lottery-info__desc{ color: #B2B2B2; font-weight: 400; font-size: 14px; margin-bottom: 20px; } .lottery-info__desc.desc-1{ width: 397px; } .lottery-info__table-1{ width: 348px; } .lottery-info__desc.desc-2{ width: 348px; margin-bottom: 35px; } .lottery-info__table-2{ width: 348px; } .lottery-result__header{ display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #FFFFFF; background: linear-gradient(91.86deg, #FFA469 14.04%, #F8D82E 106.97%); padding: 5px 19px; } .result-header-toto{ background: linear-gradient(90.21deg, #590016 0.04%, #C90400 97.87%); } .result-header-damacai{ background: linear-gradient(92.24deg, #001A75 13.95%, #2A27D9 102.41%); } .result-header-singapore{ background: linear-gradient(91.55deg, #344D8E 14.12%, #3994FF 138.72%); } .result-header-sabah{ background: linear-gradient(90.21deg, #FF6489 0.04%, #CC3633 97.87%); } .result-header-sandakan{ background: linear-gradient(91.86deg, #FF8536 14.04%, #F8D82E 106.97%); } .result-header-cashsweep{ background: linear-gradient(267.54deg, #346D28 -4.9%, #7EDE69 104.57%); } .lottery-result__card{ width: 280px; border: 1px solid #FFFFFF; border-radius: 10px; padding-top: 23px; box-sizing: border-box; color: white; } .lottery-result__title-wrapper{ text-align: right; font-family: 'Roboto'; font-weight: 400; font-size: 12px; } .lottery-result__grand-prize{ display: flex; justify-content: space-between; font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; padding: 8px 20px; } .lottery-result__section-title{ background: #353535; text-align: center; color: #FFFFFF; font-size: 12px; font-family: 'Roboto'; padding: 13px 0; } .lottery-result__number-wrapper{ padding: 5px 0; } .lottery-result__number-container{ display: flex; flex-wrap: wrap; justify-content: center; font-size: 14px; font-family: 'Roboto'; font-style: normal; font-weight: 400; } .lottery-result__number-container span{ padding: 5px; width: 25%; text-align: center; } .lottery-result__wrapper{ display: grid; grid-template-columns: repeat(4,1fr); grid-column-gap: 20px; grid-row-gap: 20px; } .lottery-result__bet-now__wrapper{ display: flex; align-items: center; justify-content: center; margin-top: 30px; margin-bottom: 60px; } .lottery-rule__title{ margin-bottom: 3px; } .lottery-rule__list-wrapper{ list-style: disc; padding-left: 30px; } /* mobile */ .lottery-rule-payout{ display: flex; justify-content: space-between; margin-bottom: 19px; } @media (max-width: 768px){ .lottery-result__card{ display: none; width: 100%; } .lottery-result__card.selected{ display: block; } .lottery-result__wrapper{ display: flex; justify-content: center; margin-top: 27px; margin-bottom: 28px; } .lottery-rule-payout__wrapper{ margin-bottom: 58px; } .lottery-result__header{ padding: 5px 50px } .lottery-result__grand-prize{ padding: 8px 50px; } .lottery-result__number-wrapper{ padding: 5px 28px; } .lottery-info{ flex-direction: column; gap: 0; } .lottery-info__desc.desc-1{ width: 100%; } .lottery-info__card{ margin-bottom: 48px; } .lottery-rule__mobile{ margin-bottom: 53px; } } .contact-desc{ font-size: 12px; color: var(--color-grey); margin-bottom: 21px; } .contact-icon{ width: 25px; height: 25px; margin-right: 18px; } .contact-list{ display: flex; align-items: center; color: white; margin-bottom: 30px; } .contact-list__website{ align-items: flex-start; } .contact-card-1{ margin-bottom: 39px; } .contact-card-2{ margin-bottom: 22px; padding-bottom: 32px; } .contact-card__title{ font-size: 10px; color: var(--color-grey); margin-bottom: 24px; } .contact-card__icon-wrapper{ margin-right: 21px; display: block; } .contact-card__icon-wrapper.contact{ width:40px; height:40px; } .contact-card__icon-wrapper.contact img{ width: 100%; height: 100%; } .contact-card__contat-wrapper{ display: flex; align-items: center; } .contact-website-link{ display: block; margin-bottom: 10px; } .about-follow-us__icon{ width: 20px; } .generalPage { padding-top: 64px; padding-bottom: 120px; } .generalPage h3 { color: #ffffff; padding-bottom: 24px; font-size: 20px; font-weight: 700; line-height: 24px; } .generalPage .desc { padding-bottom: 52px; } .generalPage .desc p { font-size: 16px; font-weight: 400; line-height: 21px; color: #b2b2b2; padding-bottom: 21px; } .generalPage .desc p:last-child { padding-bottom: 0; } .generalPage ul { list-style-type: none; padding-left: 24px; margin: 0; } .generalPage ul.listStyle { list-style-type: inherit; } .generalPage ul.listStyle li { list-style-type: inherit; } .generalPage ul.trmslong { counter-reset: item; } .generalPage ul.trmslong .accordionItemHeading { counter-increment: item; } .generalPage ul.trmslong li:before { content: counters(item, ".") ". "; counter-increment: item; } .generalPage ul li { font-size: 14px; font-weight: 400; line-height: 19px; color: #b2b2b2; padding-bottom: 19px; list-style-type: none; } .generalPage ul li:last-child { padding-bottom: 0; } .generalPage .accordionContent { padding-left: 0; } .generalPage .accordionContent .accordionItemContent p, .generalPage .accordionContent .accordionItemContent span { font-size: 14px; font-weight: 400; line-height: 19px; color: #b2b2b2; padding-bottom: 19px; } .generalPage .accordionContent .accordionItemContent p:last-child, .generalPage .accordionContent .accordionItemContent span:last-child { padding-bottom: 0; } .generalPage .accordionContent .accordionItemContent ul { list-style-type: none; padding-left: 24px; margin: 0; } .generalPage .accordionContent .accordionItemContent ul.trmslong { padding-top: 24px; } .generalPage .accordionContent .accordionItemContent li { font-size: 14px; font-weight: 400; line-height: 19px; color: #b2b2b2; padding-bottom: 19px; list-style-type: none; } .generalPage .accordionContent .accordionItemContent li:last-child { padding-bottom: 0; } .generalPage .contactUsContent { padding-top: 28px; font-size: 0; } .generalPage .contactUsContent > div { display: inline-block; vertical-align: top; width: calc(100% / 4); } .generalPage .contactUsContent > div .linkTitle { font-size: 14px; font-weight: 500; line-height: 17px; color: #b2b2b2; padding-bottom: 26px; } .generalPage .contactUsContent > div .content.inline p, .generalPage .contactUsContent > div .content.inline a { display: inline-block; vertical-align: middle; padding-right: 20px; } .generalPage .contactUsContent > div .content p, .generalPage .contactUsContent > div .content a { font-size: 14px; font-weight: 400; line-height: 19px; color: #ffffff; display: block; padding-bottom: 16px; cursor: pointer; } .generalPage .contactUsContent > div .content p > *, .generalPage .contactUsContent > div .content a > * { display: inline-block; vertical-align: middle; } .generalPage .contactUsContent > div .content p span, .generalPage .contactUsContent > div .content a span { padding-left: 18px; } .sidebarPage { font-size: 0; } .sidebarPage > * { vertical-align: top; } .sidebarPage .sidebar { display: inline-block; width: 280px; padding-right: 100px; } .sidebarPage .sidebar .sidebarItem { font-size: 16px; font-weight: 500; line-height: 19px; color: #b2b2b2; padding: 24px 0; border-bottom: 1px solid #333333; display: block; cursor: pointer; } .sidebarPage .sidebar .sidebarItem:first-child { padding-top: 0; } .sidebarPage .sidebar .sidebarItem.active { color: #FABB2E; } .sidebarPage .contentWrapper { display: none; width: calc(100% - 280px); } .sidebarPage .contentWrapper.active { display: inline-block; } .sidebarPage .contentWrapper h3 { padding-bottom: 48px; } .group-p p{ padding-bottom: 0 !important; } .ng-badge-live { position: absolute; top: -8px; right: -13px; font-size: 10px; } .ng-body { display: flex; gap: 33px; margin-bottom: 60px; } .ng-contest-wrapper { width: 867px; padding: 30px 20px; } .ng-contest__countdown-wrapper { display: flex; align-items: center; justify-content: center; margin-bottom: 30px; } .ng-contest__countdown-icon { margin-right: 20px; height: 28px; } .ng-contest__countdown-icon.timer { transform: scale(1.5); } .ng-contest__countdown-timer { font-weight: 500; font-size: 20px; color: white; } .ended { color: #b2b2b2 !important; } .ng-contest__countdown-text { font-size: 14px; color: var(--color-grey); } .ng-contest__card { background: linear-gradient(to right, #F9D235, #FFA469); padding: 8px; animation: animatedgradient 1s ease alternate infinite; position: relative; background-size: 300% 300%; border-radius: 15px; margin-bottom: 30px; } .ng-contest__card.card-2 { background: linear-gradient(to right, #15A6B2, #289D82, #F9D235, #FFA469, #FE6368, #CC3633); background-size: 300% 300%; animation: animatedgradient 3s ease alternate infinite; margin-left: 100px; margin-right: 100px; padding: 3px; } .ng-contest__card-inner { background: #272727; color: white; padding: 2rem; border-radius: 15px; display: flex; align-items: center; justify-content: center; position: relative; } .ng-contest__label { color: var(--color-grey); font-weight: 500; font-size: 24px; margin-right: 8px; } .ng-contest__label.label-2 { font-size: 20px; } .ng-contest__label-2 { font-size: 20px; } .ng-contest__usd { color: var(--color-primary); font-weight: 700; font-size: 57.6384px; } .ng-contest__usd.usd-2 { font-size: 40px; } .ng-contest__myr-1 { color: var(--color-grey); font-weight: 400; font-size: 17.0336px; } .ng-contest__info { position: absolute; top: 8px; right: -23px; } .ng-contest__info-icon { cursor: pointer; width: 12px; height: 19px; } .ng-contest__info:hover .ng-contest-info-msg { transform: scale(1); } .pd-contest__info:hover .ng-contest-info-msg { transform: scale(1); } .ng-contest-info-msg { width: 220px; padding: 18px; font-size: 14px; color: var(--color-grey); transition: all 0.3s; transform-origin: 10px 10px; transform: scale(0); top: 0; left: 18px; position: relative; text-align: justify; background-color: #353537; z-index: 1; position: absolute; } .ng-contest__section-prize-pool { display: flex; gap: 20px; margin-bottom: 31px; } .ng-contest__card-1 { background: linear-gradient(to right, #289D82, #15A6B2); padding: 3px; animation: animatedgradient 1s ease alternate infinite; position: relative; background-size: 300% 300%; border-radius: 15px; flex: 1; } .ng-contest__card-1.ETH_JACKPOT { background: linear-gradient(to right, #B2B2B2, #848080); background-size: 300% 300%; } .ng-contest__card-1.BEP20_JACKPOT { background: linear-gradient(to right, #FFA469, #F9D235); background-size: 300% 300%; } .ng-contest__card-1.yellow { background: linear-gradient(to right, #FFA469, #F9D235); background-size: 300% 300%; } .ng-contest__card-1.red { background: linear-gradient(to right, #FD6267, #CC3633); background-size: 300% 300%; } .ng-contest__card-1.white { background: linear-gradient(to right, #ffffff, #939393); background-size: 300% 300%; } .ng-contest__info-prize-pool { top: 0px; } .ng-contest__prize-pool-inner { flex-direction: column; align-items: flex-start; padding: 20px 12px; height: 151px; } .ng-contest__prize-pool-prize { font-weight: 500; font-size: 24px; } .ng-contest__prize-pool-prize.BEP20_JACKPOT { color: #FABB2E; } .ng-contest__prize-pool-prize.ETH_JACKPOT { color: #B2B2B2; } .ng-contest__prize-pool-prize.TRC20_JACKPOT { color: #289D82; } .ng-contest__prize-pool-separator { font-weight: 600; font-size: 48px; line-height: 23px; color: white; margin-bottom: 30px; letter-spacing: 2px; } .BEP20_JACKPOT .ng-contest__prize-pool-separator { color: var(--color-primary); } .TRC20_JACKPOT .ng-contest__prize-pool-separator { color: var(--color-primary-green); } .ETH_JACKPOT .ng-contest__prize-pool-separator { color: #B2B2B2; } .green .ng-contest__prize-pool-prize { color: var(--color-primary-green); } .yellow .ng-contest__prize-pool-prize { color: var(--color-primary); } .red .ng-contest__prize-pool-prize { color: var(--color-primary-red); } .ng-contest__prize-pool-prize__wrapper { margin-bottom: 8px; } .ng-contest__prize-pool { margin-bottom: 30px; display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: var(--color-grey); display: none; } .ng-contest__line { width: 25px; height: 2px; } .green .ng-contest__line { background-color: var(--color-primary-green); } .yellow .ng-contest__line { background-color: var(--color-primary); } .red .ng-contest__line { background-color: var(--color-primary-red); } .white .ng-contest__line { background-color: white; } .ng-contest__prize-pool-desc { color: var(--color-grey); font-size: 12px; } .ng-contest__prize-number { font-size: 48px; } .ng-contest__prize-pool-date { font-size: 12px; } .ng-contest__prize-pool-date { color: var(--color-primary-green); } .latest-prediction-title-box { display: flex; align-items: center; justify-content: space-between; } .latest-prediction-wrapper { width: 398px; padding: 20px; } .latest-prediction-title { color: #B2B2B2; display: flex; align-items: center; } .latest-prediction-title .badge-primary { font-size: 10px; font-weight: normal; margin-left: 10px; } .number-game__latest-prediction__table { font-size: 14px !important; } .number-game__latest-prediction__table { font-size: 14px; color: #b2b2b2; margin-top: 20px; width: 100%; border: 1px solid #333435; } .number-game__latest-prediction__table .vip-level { margin-right: 23px; } .number-game__latest-prediction__table th { font-size: 14px !important; } .number-game__latest-prediction__table th { font-weight: normal; color: #B2B2B2; background: #333435; } .number-game__latest-prediction__table td { color: #B2B2B2 !important; font-size: 14px !important; } .number-game__latest-prediction__table tr { background: transparent !important; } .list-nickname { overflow: hidden; text-overflow: ellipsis; width: 80px; } .list-nickname img { width: 22px; } .number-game__wrapper { height: 50vh; } .total-predicted-number__wrapper { text-align: center; margin-bottom: 0.5rem; } .total-predicted-number { font-weight: bold; } .total-predicted-number__text { font-size: 14px; } @media (max-width: 768px) { .ng-body { display: block; } .nav-pill__outsider { padding: 5px; } .nav-pill__wrapper { overflow-x: scroll; } .ng-contest-wrapper { padding: 30px 7px !important; } .ng-contest-wrapper { width: 100%; } .ng-badge-live { top: 0; right: 0; position: relative; } .nav-pill { display: flex; align-items: center; background: transparent; } .nav-pill__outsider { width: 100vw; padding: 5px; overflow-x: scroll; } .banner-top .nav-pill.selected { background: #47494B; color: #FFF; } .ng-contest__countdown-icon { width: 24px; height: auto; margin-right: 5px; } .ng-contest__countdown-timer { font-size: 15px; } .ng-contest__card { text-align: center; padding: 3px; } .ng-contest__card-inner { display: block; padding: 6px 2rem 13px; } .ng-contest__usd { font-size: 40px; } .ng-contest__card.card-2 { margin-left: auto; margin-right: auto; margin-bottom: 10px; } .ng-contest__label { display: flex; align-items: center; justify-content: center; position: relative; font-size: 20px; width: 100%; } .ng-contest__prize-pool { display: none; } .ng-contest__info { display: none; } .ng-contest__label .ng-contest__info { position: absolute; right: -33px; top: 0; display: block; } .ng-contest__myr-1 { font-size: 12px; text-align: center; } .ng-contest__label .ng-contest__info .ng-contest__info-icon { width: 24px; height: 24px; } .ng-contest__section-prize-pool { gap: 4px; } .ng-contest__prize-pool-prize { font-size: 14px !important; } .ng-contest__prize-pool-inner { padding: 15px 6px; text-align: center; height: auto; } .latest-prediction-wrapper { display: none; } .ng-contest__prize-pool-separator { font-size: 25px; letter-spacing: 0; margin-top: 20px; } .ng-contest__countdown-text { font-size: 13px; } .ng-spin__wrapper .nav-pill { padding: 12px 26px; } .ng-spin__wrapper .nav-pill.selected { background: #FABB2E !important; } .ng-spin__wrapper .nav-pill.selected { color: #000; } .ng-contest__prize-pool-desc { font-size: 10px; } } .pity-bar__title { color: white; font-size: 20px; margin-bottom: 0.7rem; } .pity-bar__wrapper { padding: 1rem 0; color: #B2B2B2; } .pity-bar__attempt__container { display: flex; align-items: center; margin-bottom: 10px; } .pity-bar__attempt { color: white; font-size: 20px; font-weight: bold; margin-right: 3px; } .pity-bar__box { padding: 1rem; font-size: 14px; } .pity-bar__progress-wrapper { display: flex; gap: 2rem; } .pity-bar__progress-outer { height: 37px; width: 100%; border-radius: 15px; overflow: hidden; background-color: #2D2E30; margin-bottom: 2rem; } .pity-bar__progress-inner { background-color: #FABB2E; width: 33%; height: 100%; transition: all 0.3s; } .pity-bar__progres { width: 100%; } .pity-bar__progress-attempt-card { display: flex; } .pity-bar__attempt-card { flex: 1; min-width: 6rem; } .pity-bar__attempt-card__last { position: absolute; right: -6rem; top: 0; } .pity-bar__reward-desc { font-size: 14px; color: #FABB2E; } @media (max-width: 768px) { .pity-bar__progress-wrapper { flex-direction: column; overflow-x: auto; } .pity-bar__top { display: flex; gap: 1rem; } .pity-bar__progres { width: 500px; } .pity-bar__box { min-width: 14rem; } .pity-bar__reward-desc { margin-top: 10px; } } .ng-contest__desc{ display: flex; font-size: 12px; color: #B2B2B2; align-items: center } .ng-contest__desc-type{ margin: 0 3px; } .ng-contest__desc-address{ margin-right: 3px; } .ng-event__end-top__wrapper{ background: #272727; border-radius: 1rem; margin-bottom: 2rem; color: #B2B2B2; display: flex; flex-direction: column; align-items: center; padding: 1rem 0 } .ng-event__end-top-countdown{ display:flex; color: white; font-size: 36px; } .ng-no-winner{ margin: 1rem 0; } .ng-grand-no-winner{ margin-bottom: 1rem; } .ng-contest__desc-container{ display:flex; align-items: center; } .ng-contest__icon{ width: 25px; height: 25px; -o-object-fit: contain; object-fit: contain; } .ng-contest-drawing{ display: flex; flex-direction: column; align-items: center; } .ng-contest__drawing-gif{ width: 16rem; } .ng-contest__drawing-text{ color: white; text-align: center; font-size: 20px; width: 400px; } @media(max-width: 768px) { .ng-contest__desc-container{ font-size:10px; } .ng-contest__countdown-wrapper { justify-content: space-between; } .ng-contest__card { margin-bottom: 10px; } .number-game-grand-prize-tips{ left: -200px; top: 24px; transform-origin: 200px 10px } .ng-contest__desc{ align-items: center; flex-direction: column; } .ng-contest__drawing-text{ color: white; text-align: center; font-size: 15px; width: 300px; } } .mini-jackpot-pastrecord-card .account-summary__wrapper { justify-content: center; } .mini-jackpot-pastrecord-card .account-summary__card { padding: 22px 20px; font-size: 14px; } .green { color: var(--color-primary-green); font-size: 24px; } .yellow { color: var(--color-primary); font-size: 24px; } .red { color: var(--color-primary-red); font-size: 24px; } .white { color: white; font-size: 24px; } @media (max-width: 768px) { .account-summary__card { width: 170px; } } .ng-spin__tutorial-wrapper { display: flex; align-items: center; cursor: pointer; } .ng-spin__wrapper { background-color: #313131; border-radius: 15px; padding: 20px 30px; } .ng-spin__header { display: flex; justify-content: space-between; margin-bottom: 29px; } .ng-spin__tutorial-icon { width: 18px; height: 22px; margin-right: 6px; margin-bottom: 4px; } .ng-spin__tutorial { color: var(--color-primary-green); font-weight: 700; font-size: 14px; border-bottom: 1px solid var(--color-primary-green); padding-bottom: 2px; } .ng-spin__setting { color: var(--color-primary-green); font-size: 14px; cursor: pointer; } .ng-spin__available-ticket { color: var(--color-grey); font-size: 14px; margin-top: 7px; text-align: center; } .ng-spin__auto-wrapper { display: flex; gap: 10px; margin-top: 30px; flex-wrap: wrap; row-gap: 20px; } .ng-spin__auto-pill { background-color: #202020; border-radius: 15px; padding: 20px; font-size: 14px; color: var(--color-grey); width: 136px; display: flex; } .ng-spin__auto-index { margin-right: 26px; width: 11px; display: block; } .ng-spin__auto-footer { display: flex; align-items: baseline; justify-content: center; gap: 41px; margin-top: 30px; } .ng-spin__manual-pill { background-color: #47494B; border-radius: 15px; padding: 20px; font-size: 14px; color: var(--color-grey); width: 136px; display: flex; align-items: center; } .ng-spin__manual-add { background-color: #272727; border-radius: 15px; padding: 20px; cursor: pointer; width: 136px; display: flex; align-items: center; justify-content: center; } .align-items-center { align-items: center; } .nav-pill__setting--wrapper { display: block; } .nav-pill__setting--wrapper .nav-pill { display: inline-block; margin-bottom: 18px; } .nav-pill__setting--input { background: #202020; border: 1px solid rgba(71, 73, 75, 0); margin-right: 18px; width: 103px; padding: 12px 26px; box-sizing: border-box; border-radius: 15px; } #spinSettingMax { margin-right: 0; } .pill__setting--hints { font-size: 12px; width: 80px; vertical-align: top; display: inline-block; margin-left: 10px; margin-top: 20px; } #ngSpinAutoPopModal .btn-primary { width: 90%; margin: auto; display: block; } .range-icon { margin-right: 10px; display: inline-block; } .modal-numbergame { min-width: 640px; } .ng-spin__rules_text { color: #B2B2B2; cursor: pointer; font-weight: bold; -webkit-text-decoration: underline; text-decoration: underline; } .ng-tutorial-rules__wrapper { display: flex; align-items: center; justify-content: space-evenly; margin-bottom: 1rem; } .btn-ng-rules-mobile { color: white; background: #47494B; } @media (max-width: 768px) { .ng-spin__header { justify-content: center; } .ng-spin__wrapper { padding: 24px 16px 35px; } .ng-spin__body .nav-pill__wrapper { display: grid; grid-template-columns: repeat(3, calc(33% - 2.5px)); grid-gap: 5px; gap: 5px; } .ng-spin__body .nav-pill__outline { margin-right: 0; padding: 12px 0; } .ng-spin__setting { text-align: center; padding: 10px 10px; font-weight: bold; margin: 15px 0 0; } .ng-spin__auto-footer { display: block; } .ng-spin__auto-footer .btn-secondary { margin-bottom: 10px; } #ngSpinAutoPopModal .modal-body { padding: 12px 23px; } .pill__setting--hints { display: block; width: 100%; margin-top: 5px; } .nav-pill__setting--wrapper .nav-pill { width: 100%; background-color: #353537; padding: 12px 26px; } .nav-pill__setting--wrapper .nav-pill.selected { background-color: #FABB2E; } .nav-pill__setting--wrapper .nav-pill:nth-child(2) { margin-right: 5px; width: calc(50% - 10.5px); } .nav-pill__setting--wrapper .nav-pill:nth-child(3) { margin-left: 10px; width: calc(50% - 10.5px); } .range-icon { display: inline-block !important; background: transparent !important; width: auto !important; } .range-icon { margin: 0 10px; } #spinSettingMax { margin-left: 5px; width: calc(50% - 20px); text-align: center; } #spinSettingMin { margin-right: 5px; width: calc(50% - 20px); text-align: center; } .nav-pill__setting--input { width: calc(50% - 20px); } .ng-spin__available-ticket { margin-top: 20px; } .btn-video-tutorial { margin: 15px auto 30px; max-width: 200px; } } .past-record { display: grid; grid-template-columns: repeat(4, calc(25% - 15px)); grid-gap: 20px; gap: 20px; width: 1154px; } .past-record__item { border-radius: 16px; width: 271px; } .past-record__header { background-color: #E76A68; color: #fff; border-top-left-radius: 16px; border-top-right-radius: 16px; font-size: 16px; font-weight: bold; padding: 10px 14px; min-height: 52.5px; } .past-record__header--hints { font-size: 12px; font-weight: normal; } .past-record__body { position: relative; background-color: #fff; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; } .past-record__avatar { border: 1px solid #CC3633; border-radius: 50%; margin: auto; display: block; transform: translate3d(-50%, 0, 0); width: 76px; top: -36px; left: 50%; position: absolute; height: 76px; margin-bottom: 0; background-color: #ffffff; } .past-record__avatar--img { width: 40px; height: 40px; margin: 18px auto; display: block; } .past-record__avatar--title { font-weight: bold; font-size: 16px; padding: 46px 10px 0; text-align: center; } .past-record__avatar--date { color: #B2B2B2; font-size: 14px; text-align: center; } .past-record__prize { display: grid; grid-template-columns: repeat(2, 50%); } .past-record__prize--item { padding: 10px; box-sizing: border-box; text-align: center; margin: 10px 0; } .past-record__prize--item:nth-child(1) { border-right: 1px solid #B2B2B2; } .past-record__prize--item:nth-child(2) { border-left: 1px solid #B2B2B2; } .past-record__prize--item--prize { font-size: 16px; font-weight: bold; } .past-record__prize--item--hints { font-size: 12px; padding-top: 5px; } .past-record__prize--predicted { text-align: center; padding: 0 0 20px; } .date-ended { text-align: center; } .date-ended__title { font-size: 14px; color: #B2B2B2; margin-bottom: 5px; } .date-ended__value { padding: 14px 14px 12px; border-radius: 15px; background: #EBEBEB; width: 80%; margin: auto; display: inline-block; height: 45px; } .date-ended__suffix { vertical-align: top; font-size: 10px; } .btn_list { padding: 20px 0; } .btn-rules { width: 179px; height: 41px; background: #353537; color: #FFF; width: 70%; margin: 0 auto 10px; } .btn-check { border-radius: 15px; background: #FABB2E; width: 179px; height: 41px; color: #18191A; width: 70%; margin: auto; display: block; } .ended-btn { background-color: #CC3633; border-radius: 50px; padding: 0; width: 100px; height: 25px; line-height: 25px; margin: 10px auto 5px; display: block; } .rules_modal { width: 1125px !important; } .rules_modal { max-width: 1125px; min-height: 472px; } .rules_modal--wrapper { width: 100%; box-sizing: border-box; margin-bottom: 30px; } .ranking-rules_ul { list-style: disc !important; } .ranking-rules_ul .child-ranking-rules_ul { list-style: none !important; } .ranking-rules_ul .child-ranking-rules_ul li { list-style-position: inside; } .table-rules { margin: 30px 0 !important; } .num-ref-list { padding: 30px 0; display: grid; grid-template-columns: repeat(2, calc(50% - 15px)); grid-gap: 30px; } .num-ref-list img { width: 100%; } .how-to-win-title { font-weight: bold; font-size: 16px; padding: 30px 0; } .text-red { color: #CC3633; } .text-yellow { color: #FABB2E; } .text-white { color: #fff; } .text-green { color: #289D82; } .table-faq { border: 0 !important; } .table-faq tr { background-color: transparent !important; } .table-faq tbody td { color: #B2B2B2 !important; } .table-faq tbody td { vertical-align: baseline; } .past-record-detail { width: 100%; } @media (max-width: 768px) { .ranking-rules_ul { padding-left: 1rem; } .past-record { display: block; margin: 0 10px; width: auto; } .past-record__item { width: 100%; margin: 0 0 1rem 0; } .rules_modal { width: 100%; } .rules_modal .deposit-first__modal-body { padding: 20px !important; } .num-ref-list { display: block; } .num-ref-item { margin-bottom: 35px; } .table-rules thead tr th { padding: 12px; font-size: 11px; } .table-rules tbody tr td { font-size: 11px; } } .white-center-text { color: #ffffff; text-align: center; } .winner-list { display: flex; justify-content: center; gap: 20px; } .winner-list__box { padding: 1px; margin-top: 10px; margin-bottom: 10px; max-width: calc(50% - 10px); border-radius: 15px; border: 1px solid #fd9f9f; } .winner-list__box.BEP20_JACKPOT { border-color: #FABB2E; } .winner-list__box.TRC20_JACKPOT { border-color: #289D82; } .winner-list__box.ETH_JACKPOT { border-color: #B2B2B2; } .winner-list__box.red { border-color: #CC3633; } .winner-list__box.yellow { border-color: #FABB2E; } .winner-list__box.green { border-color: #289D82; } .winner-list__box.white { border-color: #ffffff; } .winner-list .table-theme thead th, .winner-list .table-theme tbody td { font-size: 12px; font-weight: normal; padding: 12px 12px; } .table_nickname { width: 260px; } .table_no { width: 40px; } .winner-list__box .table-theme { width: 100%; } .winner_list--pagination { font-size: 12px; } .winner_list--pagination .pagination__number { margin-bottom: 36px; } .mini-jackpot-pastrecord-wrapper { padding: 30px 21px; } .mini-jackpot-pastrecord-card { background: #2C2C2C; width: 100%; padding: 30px 21px; } .past-record-card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: 30px 43px 0; } .past-record-detail .mini-jackpot-pastrecord-wrapper { border-radius: 15px; border-top-left-radius: 0; border-top-right-radius: 0; } .page-title { display: flex; align-items: center; color: #fff; font-size: 20px; padding: 30px 0 0; } .page-title img { margin-right: 20px; cursor: pointer; } .ng-contest__wrapper { margin-top: 37px; margin-bottom: 0; } .contest__countdown-text { display: flex; align-items: center; } .pass-record-detail__icon { margin-right: 3px; } .past-record--detail__line { height: 1px; background: #B2B2B2; width: 80%; margin: 0 auto; margin-top: 10px; } .past-record-detaill__check { font-size: 14px; color: #289D82; } .past-record-detail__congrate-mini { text-align: center; color: #FFFFFF; } @media (max-width: 768px) { .past-record-card { padding: 30px 13px 0; } .winner-list__box { max-width: none; max-width: initial; } .table_nickname { width: 80px; } .winner-list { flex-direction: column; } .past-record-detail__congrate-mini { font-size: 12px; } } .flex { display: flex; } .mr30 { margin-right: 30px; } .ranking__table-container { width: 388px; } .ranking__table-container th, .ranking__table-container tbody { color: #B2B2B2; font-size: 14px; } .table_myrecord { width: 388px; } .table_myrecord tbody tr:nth-child(odd) { background: transparent; } .table_myrecord tbody tr:nth-child(even) { background: #2D2E30; } .table_date { width: 35%; } .height-40px { height: 40px; } .bottom_wrapper { padding: 30px 0; min-width: 806px; max-width: 806px; } .pagination__wrapper { display: flex; align-items: center; } .flex-between { display: flex; justify-content: space-between; } .flex-align { display: flex; align-items: center; } .flex-center { display: flex; align-items: center; justify-content: center; } .pagination__number { padding: 10px; box-sizing: border-box; color: #fff; cursor: pointer; } .current-page { color: #FABB2E; } .disabled-text { color: #4d4d4d; cursor: no-drop; } @media(max-width: 768px) { .ranking__table-container { width: calc(100% - 20px) !important; } .ranking__table-container { margin: 10px; } .myRecord .mr30 { margin-right: 0; } .bottom_wrapper { min-width: 0; min-width: initial; } .table_myrecord { width: 100% !important; } .slots-search__wrapper { min-width: 222px; max-width: 222px; margin: auto; margin-bottom: 40px; } } .flex { display: flex; } .mr30 { margin-right: 30px; } .ranking__table-container { width: 388px; } .ranking__table-container th, .ranking__table-container tbody { color: #B2B2B2; font-size: 14px; } .table_myrecord { width: 388px; } .table_myrecord tbody tr:nth-child(odd) { background: transparent; } .table_myrecord tbody tr:nth-child(even) { background: #2D2E30; } .table_date { width: 35%; } .height-40px { height: 40px; } .bottom_wrapper_allpredictions { min-width: 1224px; max-width: 1224px; padding: 30px 0; } .pagination__wrapper { display: flex; align-items: center; } .flex-between { display: flex; justify-content: space-between; } .pagination__number { padding: 10px; box-sizing: border-box; color: #fff; cursor: pointer; } .pagination__number:hover { color: #FABB2E; } .current-page { color: #FABB2E; } .disabled-text { color: #4d4d4d; cursor: no-drop; } .grid_3 { display: grid; grid-template-columns: repeat(3, 33%); } .hot-number-icon{ width: 20px; margin-right: 5px; position: relative; margin-left: 0; height: 17px; } .hot-number-td{ padding-left: 61px !important; } .hot-number-th{ padding: 12px 10px !important; } @media(max-width: 768px) { .bottom_wrapper_allpredictions { min-width: 0; min-width: initial; max-width: none; max-width: initial; padding: 10px 0; } .grid_3 { display: block; } } .show { display: block; } .hide { display: none; } .gamelist-wrapper{ display: flex; gap: 10px; padding: 1px 0; padding-top: 30px; flex-wrap: wrap; } .gamelist-card{ width: 176px; border-radius: 15px; border: 1px solid #2D2D2F; height: 55px; background-color: #2D2D2F; cursor: pointer; transition: all .3s; display: flex; justify-content: center; position:relative; } .gamelist-card.selected{ border-color: var(--color-primary); } .gamelist-card:hover{ border-color: var(--color-primary); } .gamelist-card__img{ -o-object-fit: contain; object-fit: contain; padding: 10px; background-color: #2D2D2F; box-sizing: border-box; height: auto; border-radius: 15px; } .gamelist-card-home{ min-width: 180px; border-radius: 15px; /* border: 1px solid #2D2D2F; height: 55px; background-color: #2D2D2F; */ cursor: pointer; transition: all .3s; display: flex; justify-content: center; } .gamelist-card-home.selected{ border-color: var(--color-primary); } .gamelist-card-home:hover{ border-color: var(--color-primary); } .gamelist-card-home__img{ /* object-fit: contain; padding: 10px; background-color: #2D2D2F; */ box-sizing: border-box; height: auto; border-radius: 15px; margin-right: 15px; } .slots-option__wrapper{ margin-top: 30px; margin-bottom: 30px; padding: 20px 10px; box-sizing: border-box; background-color: #2B2B2B; display: flex; justify-content: space-between; border-radius: 15px; } .slots-options{ width: calc(100% - 222px); padding-right: 18px; } .slots-options .nav-pill__wrapper{ width: 100%; } .slots-search__wrapper{ min-width: 222px; max-width: 222px; background-color: #47494B; border-radius: 15px; display: flex; align-items: center; justify-content: center; padding: 0 17px; margin-left: 10px; } .slots-search__icon{ width: 18.71px; height: 18.71px; } .slots-search__input{ border: none; width: 100%; padding-left: 13px; font-size: 14px; color: var(--color-grey); } .gameslist-display__wrapper{ display: grid; grid-template-columns: repeat(8,1fr); grid-row-gap: 30px; row-gap: 30px; grid-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } .gamelist-display__card{ height: 230px; border-radius: 15px; position: relative; overflow: hidden; cursor: pointer; } .gamelist-display__card-img{ width: 100%; height: 230px; transition: all .3s; } .gamelist-display__card-cover{ position: absolute; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.8); transform: translateY(100%); transition: all .3s; top: 0; width: 100%; height: 100%; flex-direction: column; } .gamelist-display__card:hover .gamelist-display__card-cover{ transform: translateY(0); } .gamelist-display__card:hover .gamelist-display__card-img{ transform: scale(1.2); } .gamelist-display__card-cover__btn{ background-color: var(--background-primary); color: black; padding: 12px 33px; border-radius: 15px; font-size: 14px; font-weight: 700; } .gamelist-display__card-cover__btn-vpn{ min-width: 97px; padding: 12px; text-align: center; box-sizing: border-box; background: #289D82; color: white; margin-top: 1rem; border-radius: 15px; font-size: 14px; display: flex; align-items: center; justify-content: center; } .gamelist-display__title { color: #fff; text-align:center; padding: 5px 0 0; cursor: pointer; } .gameMenu-list { display: grid; grid-template-columns: repeat(2, 50%); grid-gap: 10px; gap: 10px; padding: 10px; width: calc(100% - 10px); } .gameMenu-img { width: 100%; border-radius: 8px; border: 1px solid #fff; } @media (max-width: 768px){ .gameslist-display__wrapper{ grid-template-columns: repeat(2,1fr); row-gap: 16px; -moz-column-gap: 16px; column-gap: 16px; } .slots-search__wrapper{ height: 3rem; max-width: none; margin-bottom: 27px; } } .prediction-coming-soon{ max-height: calc(100vh - 131px); -o-object-fit: cover; object-fit: cover; } .betting-transaction__bg { display: inline-block; padding: 9px 16px; margin: 27px 0; border-radius: 15px; background: #202020; font-size: 10px; font-weight: normal; } .betting-transaction__bg .betting-transaction__tab { margin-bottom: 0 !important; } .ranking-board-tabs { margin: 27px 0 0 !important; } .prediction-banner { position: relative; } .prediction-banner-text { position: absolute; top: 50%; left: 80px; transform: translate3d(0, -50%, 0); color: #fff; z-index: 2; } .prediction-banner-title { font-size: 65px; font-weight: bold; } .prediction-benner-content { font-size: 30px; } @media(max-width: 768px) { .ranking-board-tabs { margin: 27px 10px 7px !important; } .ranking-board-tabs { width: calc(100% - 20px); } .ranking-title { font-size: 16px; color: #fff; margin-bottom: 10px; padding: 20px 20px 0; } .banner-top .nav-pill.selected { background: #47494B !important; color: #FFF !important; } .prediction-banner-text { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); color: #fff; z-index: 2; text-align: center; } .prediction-banner-title { font-size: 36px; } .prediction-benner-content { font-size: 16px; } } .betting-transaction__bg { display: inline-block; padding: 9px 16px; margin: 27px 0; border-radius: 15px; background: #202020; font-size: 10px; font-weight: normal; } .betting-transaction__bg .betting-transaction__tab { margin-bottom: 0 !important; } .ranking-board-tabs { margin: 27px 0 0 !important; } @media(max-width: 768px) { .ranking-board-tabs { margin: 27px 10px 7px !important; } .ranking-board-tabs { width: calc(100% - 20px); } .ranking-title { font-size: 16px; color: #fff; margin-bottom: 10px; padding: 20px 20px 0; } .banner-top .nav-pill.selected { background: #47494B !important; color: #FFF !important; } } .betting-transaction__ranking-board__tab { position: relative; } .betting-transaction__ranking-board__tab .nav-pill__wrapper { padding: 20px 0 0; } .nav-pill__tag { text-transform: uppercase; color: #fff; position: absolute; right: -20px; z-index: 5; font-weight: normal; top: -10px; font-size: 10px; padding: 2px 10px; border-radius: 15px; background: #289D82; max-height: 15px; } .nav-pill__plain { background-color: transparent; color: #B2B2B2; font-size: 14px; border: 1px solid #B2B2B2; } .plain__selected { border: 1px solid #FABB2E; } .ranking-container { display: flex; } .ranking-container__box { width: 185px; height: 100px; border-radius: 16px; background: #272727; flex-shrink: 0; color: #B2B2B2; padding: 15px; box-sizing: border-box; margin-right: 20px; } .ranking-container__box:last-child { margin-right: 0; } .ranking-container__box--title { font-size: 14px; } .ranking-container__box--value { color: #ffffff; font-weight: bold; padding: 6px 0; } .ranking-container__box--hints { font-style: italic; font-size: 12px; } .table-ranking { max-width: 912px; padding: 30px 0; } .table-ranking thead th:nth-child(1) { width: 130px; text-align: center; padding-left: 1rem; } .table-ranking tbody td:nth-child(1) { text-align: center; } .vip-level { width: 21px; } .table-ranking-hints .small-text { font-size: 14px; } .table-ranking-hints { padding: 30px 0; } .ranking-board-modal--wrapper { max-width: 912px; } .table_ranking { color: #fff !important; } .table_ranking { font-size: 14px; margin-top: 20px; width: 100%; border: 1px solid #333435; } .table_ranking thead th{ font-size: 15px; font-weight: bold; } .table_ranking thead th:nth-child(3) { width: 110px; } @media(max-width: 768px) { .nav-pill__mobile { background: #47494B !important; color: #fff !important; } .betting-transaction__ranking-board__tab2 { margin-bottom: 27px; } .ranking-container { padding: 0 10px; } .ranking-container__box { width: calc(50% - 20px) !important; } .ranking-container__box { padding: 15px 20px; } .table-ranking { padding: 30px 10px; width: 100%; overflow-x: auto; } .table-ranking .betting-transaction__table-container { width: 912px; } } .pb60 { padding-bottom: 60px; } .max-width-1004 { max-width:calc((184px * 5) + 100px); } .progress-percentage-wrapper { min-width: calc((184px * 5) + 100px);; display: flex; align-items: center; } .progress { max-width: calc((184px * 5) + 100px); width: calc((184px * 5) + 100px); height: 37px; background: #2D2E30; border-radius: 15px; } .progress-hints { font-size: 14px; color: #b2b2b2; margin-left: 15px; } .percentage { border-radius: 15px; background: #FABB2E; width: 80%; /*height: 20%;*/ height: 37px; } .progress-box { padding: 17px 0; max-width: calc((184px * 5) + 100px); width: calc((184px * 5) + 100px); } .avatar { margin-left: calc(80% - 35px); width: 70px; } .stroke-box { padding-top: 8px; } .stroke { height: 39.5px; width: 3px; background: #2D2E30; margin-left: calc(184px / 2); } .stroke-selected { background: #FABB2E; } .target-list { display: flex; } .target-box { } .target-box:last-child .target-item { margin-right: 0 } .target-item { color: #fff !important; } .target-item { border-radius: 15px; flex-shrink: 0; background: #2D2E30; width: 184px; min-height: 307px; padding: 10px 13px; box-sizing: border-box; margin-right: 25px; font-size: 15px; color: #fff; } .target-title { } .target-grey-text { color: #B2B2B2; } .coin-box { height: 124px; display: flex; flex-direction: column; justify-content: center; margin: 8px 0 1px; } .coin { max-width: 100px; display: block; margin: auto; } .targe-price { font-size: 19px; font-weight: bold; color: #fff; padding-bottom: 10px; } .btn-claim { background: #585858; color: #B2B2B2; border-radius: 15px; padding: 12px 23px; margin: auto; display: flex; justify-content: center; align-items: center; font-weight: bold; } .btn-claim-selected { cursor: pointer; background-color: #FABB2E; color: black; } .unset-overflow { overflow: visible; overflow: initial; } .small-current { font-size: 12px; color: #B2B2B2; } .red-point { width: 12px; height: 12px; border-radius: 50%; position: absolute; right: 10px; background: #CC3633; top: 15px; } .pill-fixed { width: 122px; text-align: center; } .betting-overflow-unset{ overflow-x: visible; overflow-x: initial; } @media(max-width:768px) { .progress-hints { display: none; } .mobile-scroll { padding: 10px 10px 60px; box-sizing:border-box; overflow-x: auto; } .nav-pill__mobile { background: #47494B !important; color: #fff !important; } .betting-transaction__ranking-board__tab2 { margin-bottom: 27px; } .ranking-container { padding: 0 10px; } .ranking-container__box { width: calc(50% - 20px) !important; } .table-ranking { padding: 30px 10px; } .red-point{ top: 8px; width: 8px; height: 8px; } .betting-overflow-unset{ overflow-x: auto; } } .grey-percentage { background: #b2b2b2 !important; } .betting-transaction__ranking-board__tab { position: relative; } .betting-transaction__ranking-board__tab .nav-pill__wrapper { padding: 20px 0 0; } .nav-pill__tag { text-transform: uppercase; color: #fff; position: absolute; right: -20px; z-index: 5; font-weight: normal; top: -10px; font-size: 10px; padding: 2px 10px; border-radius: 15px; background: #289D82; } .nav-pill__plain { background-color: transparent; color: #B2B2B2; font-size: 14px; border: 1px solid #B2B2B2; } .plain__selected { border: 1px solid #FABB2E; } .ranking-container { display: flex; } .ranking-container__box { width: 185px; height: 100px; border-radius: 16px; background: #272727; flex-shrink: 0; color: #B2B2B2; padding: 15px; box-sizing: border-box; margin-right: 20px; } .ranking-container__box:last-child { margin-right: 0; } .ranking-container__box--title { font-size: 14px; } .ranking-container__box--value { color: #ffffff; font-weight: bold; padding: 6px 0; } .ranking-container__box--hints { font-style: italic; font-size: 12px; } .table-top-winners { padding: 0 10px 30px !important; } .table-top-winners { max-width: 912px; } .table-top-winners .number-game__latest-prediction__table { margin-top: 0 !important; color: #fff !important; } .table-ranking thead th:nth-child(1) { width: 130px; text-align: center; } .table-ranking tbody td:nth-child(1) { text-align: center; } .vip-level { width: 21px; } .table-ranking-hints .small-text { font-size: 14px; } .table-ranking-hints { padding: 30px 0; } .ranking-board-modal--wrapper { max-width: 912px; } .unset-overflow { overflow: visible; overflow: initial; } @media(max-width: 768px) { .betting-transaction__ranking-board__tab .nav-pill__wrapper { padding: 20px 20px 20px; } .nav-pill__mobile { background: #47494B !important; color: #fff !important; } .betting-transaction__ranking-board__tab2 { margin-bottom: 27px; } .ranking-container { padding: 0 10px; } .table-ranking { width: calc(100% - 10px); padding: 30px 10px; } .ranking-container__box--title { font-size: 12px !important; } .no-info-table-container { width: 100%; } } .tournament__important-pillold { background: var(--color-primary-green); border-radius: 15px; padding: 12px 16px; margin-right: 18px; color: white; font-weight: 700; font-size: 13.5px; position: relative; cursor: pointer; text-align: center; transition: all .3s; white-space: nowrap; display: flex; gap: 12px; display: block; } .tournament__important-pill { background: var(--color-primary-green)!important; } .tournament-main__img { margin-bottom: 25px; width: 100%; } .tournament-mini__wrapper { border: 1px solid #B2B2B2; border-radius: 12px; position: relative; display: flex; justify-content: space-between; color: #B2B2B2; padding: 20px; box-sizing: border-box; margin-bottom: 25px; } .tounrnament-mini__badge-live { background: linear-gradient(90deg, #FA612E 0%, #CC3633 100%); font-size: 60px; font-weight: bold; justify-content: center; position: absolute; border-radius: 15px; padding: 0.5rem 3rem; right: -3rem; transform: rotate(354deg); display: flex; align-items: center; color: white; gap: 1rem; } .tounrnament-mini__badge-live-dot { width: 20px; height: 20px; background: white; border-radius: 50%; } .tournament-mini__first { color: var(--color-primary-green); font-size: 55px; font-weight: bold; margin-right: 10px; } .tournament-mini__mini { color: var(--color-primary-red); font-size: 55px; font-weight: bold; margin-right: 10px; } .tournament-mini__first-desc { font-size: 22px; } .tournament-mini__main { font-size: 55px; color: var(--color-primary-green); font-weight: bold; } .tournament-mini__prize { margin-bottom: 15px; } .tournament-priz-pool__amount { color: var(--color-primary); font-size: 82px; font-weight: bold; } .tournament-mini__ticket-container { background-color: rgba(153,153,153,0.2); border-radius: 12px; padding: 20px; position: relative; } .tournament-mini__ticket-title { color: var(--color-primary); font-size: 24px; font-weight: bold; } .tournament-mini__ticket-title2 { font-size: 14px; color: white; margin-bottom: 20px; } .tournament-mini__ticket-footer { display: flex; gap: 20px; } .tounrnament-mini__ticket-btn-rule { border: 1px solid #B2B2B2; border-radius: 12px; display: flex; align-items: center; justify-content: center; width: 37%; border-radius: 15px; cursor: pointer; } .tournament-leaderboard__title { margin-bottom: 25px; display: flex; align-items: flex-start; } .tournament-leaderboard__title .badge-primary { margin-left: 0.5rem; } .tournament-result__live { font-size: 55px; font-weight: bold; color: var(--color-primary); margin-right: 10px; } .tournament-result__leaderbaord { font-size: 55px; font-weight: bold; color: white; } .tournament-result__wrapper { width: 50%; } .tournament-player__chart-wrapper { width: 600px; height: 440px; background: #2c3030; border-radius: 15px; padding-top: 2rem; } .tournament-player__chart { width: 100%; height: 300px; } .tournament-live__wrapper { display: flex; justify-content: space-around; margin-bottom: 3rem; } .tournament-player__dot { width: 25px; height: 25px; background-color: #289D82; border-radius: 50%; } .tournament-player-dot__wrapper { display: flex; gap: 1rem; align-items: center; } .tournament-player__header { color: #B2B2B2; display: flex; justify-content: space-between; padding: 0 2rem; margin-bottom: 0.5rem; } .tournament-player__hourly { border: 1px solid #B2B2B2; background: #282828; padding: 5px 10px; border-radius: 8px; text-align: center; } .tournament-player__current-amount { font-size: 22px; color: white; margin-top: 0.5rem; } .tournament-player__hilo__wrapper { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; } .tournament-player__high { width: 18px; height: 18px; border-radius: 50%; background-color: #289D82; } .tournament-player__lowest { width: 18px; height: 18px; border-radius: 50%; background-color: #CC3633; } .tournament-player__hilo { display: flex; align-items: center; gap: 2rem; } .tournament-player__1 { color: var(--color-primary); font-size: 35px; font-weight: bold; text-align: center; } .tournament-player__2 { color: white; font-size: 35px; font-weight: bold; text-align: center; margin-bottom: 1.2rem; } .tournament-player__3 { font-size: 17px; color: #B2B2B2; text-align: center; } .tournament-title-mobile { font-size: 16px; color: white; width: 50%; } .tournament-title-mobile__wrapper { display: flex; align-items: center; margin-bottom: 1rem; justify-content: space-between; } @media (max-width: 768px) { .tournament-live__wrapper { flex-direction: column; gap: 1.5rem; } .tournament-player__chart-wrapper { width: 100%; } .tournament-result__wrapper { width: 100%; } .tournament-leaderboard__title { margin-bottom: 10px; } .tournament-mini__img { display: none; } .tournament-result__live { font-size: 25px; } .tournament-result__leaderbaord { font-size: 25px; } .tournament-leaderboard__title .badge-primary { top: 5px; position: relative; } .tournament__important-pill { width: 40%; padding: 9px; font-size: 16px; } .tournament-mini__first { font-size: 23px; } .tournament-mini__main { font-size: 23px; } .tournament-priz-pool__amount { font-size: 30px; } .tounrnament-mini__badge-live { top: -17px; padding: 0.3rem 0.5rem; font-size: 16px; border-radius: 6px; left: -9px; right: auto; } .tounrnament-mini__badge-live-dot { width: 15px; height: 15px; gap: 0.5rem; } .tournament-player__1 { font-size: 25px; } .tournament-player__2 { font-size: 19px; } .tournament-player__3 { font-size: 12px; } .tournament-mini__wrapper { padding: 10px; } } .past-record { display: grid; grid-template-columns: repeat(4, calc(25% - 15px)); grid-gap: 20px; gap: 20px; width: 1154px; } .past-record__item { border-radius: 16px; width: 271px; } .past-record__header { background-color: #E76A68; color: #fff; border-top-left-radius: 16px; border-top-right-radius: 16px; font-size: 16px; font-weight: bold; padding: 10px 14px; min-height: 52.5px; } .past-record__header--hints { font-size: 12px; font-weight: normal; } .past-record__body { position: relative; background-color: #fff; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; } .past-record__avatar { border: 1px solid #CC3633; border-radius: 50%; margin: auto; display: block; transform: translate3d(-50%, 0, 0); width: 76px; top: -36px; left: 50%; position: absolute; height: 76px; margin-bottom: 0; background-color: #ffffff; } .past-record__avatar--img { width: 40px; height: 40px; margin: 18px auto; display: block; } .past-record__avatar--title { font-weight: bold; font-size: 16px; padding: 46px 10px 0; text-align: center; } .past-record__avatar--date { color: #B2B2B2; font-size: 14px; text-align: center; } .past-record__prize { display: grid; grid-template-columns: repeat(2, 50%); } .past-record__prize--item { padding: 10px; box-sizing: border-box; text-align: center; margin: 10px 0; } .past-record__prize--item:nth-child(1) { border-right: 1px solid #B2B2B2; } .past-record__prize--item:nth-child(2) { border-left: 1px solid #B2B2B2; } .past-record__prize--item--prize { font-size: 16px; font-weight: bold; } .past-record__prize--item--hints { font-size: 12px; padding-top: 5px; } .past-record__prize--predicted { text-align: center; padding: 0 0 20px; } .date-ended { text-align: center; } .date-ended__title { font-size: 14px; color: #B2B2B2; margin-bottom: 5px; } .date-ended__value { padding: 14px 14px 12px; border-radius: 15px; background: #EBEBEB; width: 80%; margin: auto; display: inline-block; height: 45px; } .date-ended__suffix { vertical-align: top; font-size: 10px; } .btn_list { padding: 20px 0; } .btn-rules { width: 179px; height: 41px; background: #353537; color: #FFF; width: 70%; margin: 0 auto 10px; } .btn-check { border-radius: 15px; background: #FABB2E; width: 179px; height: 41px; color: #18191A; width: 70%; margin: auto; display: block; } .ended-btn { background-color: #CC3633; border-radius: 50px; padding: 0; width: 100px; height: 25px; line-height: 25px; margin: 10px auto 5px; display: block; } .rules_modal { width: 1125px !important; } .rules_modal { max-width: 1125px; min-height: 472px; } .rules_modal--wrapper { width: 100%; box-sizing: border-box; margin-bottom: 30px; } .ranking-rules_ul { list-style: disc !important; } .ranking-rules_ul .child-ranking-rules_ul { list-style: none !important; } .ranking-rules_ul .child-ranking-rules_ul li { list-style-position: inside; } .table-rules { margin: 30px 0 !important; } .num-ref-list { padding: 30px 0; display: grid; grid-template-columns: repeat(2, calc(50% - 15px)); grid-gap: 30px; } .num-ref-list img { width: 100%; } .how-to-win-title { font-weight: bold; font-size: 16px; padding: 30px 0; } .text-red { color: #CC3633; } .text-yellow { color: #FABB2E; } .text-white { color: #fff; } .text-green { color: #289D82; } .table-faq { border: 0 !important; } .table-faq tr { background-color: transparent !important; } .table-faq tbody td { color: #B2B2B2 !important; } .table-faq tbody td { vertical-align: baseline; } .past-record-detail { width: 100%; } @media (max-width: 768px) { .ranking-rules_ul { padding-left: 1rem; } .past-record { display: block; margin: 0 10px; width: auto; } .past-record__item { width: 100%; margin: 0 0 1rem 0; } .rules_modal { width: 100%; } .rules_modal .deposit-first__modal-body { padding: 20px !important; } .num-ref-list { display: block; } .num-ref-item { margin-bottom: 35px; } .table-rules thead tr th { padding: 12px; font-size: 11px; } .table-rules tbody tr td { font-size: 11px; } } .white-center-text { color: #ffffff; text-align: center; } .winner-list { display: flex; justify-content: center; gap: 20px; } .winner-list__box { padding: 1px; margin-top: 10px; margin-bottom: 10px; max-width: calc(50% - 10px); border-radius: 15px; border: 1px solid #fd9f9f; } .winner-list__box.BEP20_JACKPOT { border-color: #FABB2E; } .winner-list__box.TRC20_JACKPOT { border-color: #289D82; } .winner-list__box.ETH_JACKPOT { border-color: #B2B2B2; } .winner-list__box.red { border-color: #CC3633; } .winner-list__box.yellow { border-color: #FABB2E; } .winner-list__box.green { border-color: #289D82; } .winner-list__box.white { border-color: #ffffff; } .winner-list .table-theme thead th, .winner-list .table-theme tbody td { font-size: 12px; font-weight: normal; padding: 12px 12px; } .table_nickname { width: 260px; } .table_no { width: 40px; } .winner-list__box .table-theme { width: 100%; } .winner_list--pagination { font-size: 12px; } .winner_list--pagination .pagination__number { margin-bottom: 36px; } .mini-jackpot-pastrecord-wrapper { padding: 30px 21px; } .mini-jackpot-pastrecord-card { background: #2C2C2C; width: 100%; padding: 30px 21px; } .past-record-card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: 30px 43px 0; } .past-record-detail .mini-jackpot-pastrecord-wrapper { border-radius: 15px; border-top-left-radius: 0; border-top-right-radius: 0; } .page-title { display: flex; align-items: center; color: #fff; font-size: 20px; padding: 30px 0 0; } .page-title img { margin-right: 20px; cursor: pointer; } .ng-contest__wrapper { margin-top: 37px; margin-bottom: 0; } .contest__countdown-text { display: flex; align-items: center; } .pass-record-detail__icon { margin-right: 3px; } .past-record--detail__line { height: 1px; background: #B2B2B2; width: 80%; margin: 0 auto; margin-top: 10px; } .past-record-detaill__check { font-size: 14px; color: #289D82; } .past-record-detail__congrate-mini { text-align: center; color: #FFFFFF; } @media (max-width: 768px) { .past-record-card { padding: 30px 13px 0; } .winner-list__box { max-width: none; max-width: initial; } .table_nickname { width: 80px; } .winner-list { flex-direction: column; } .past-record-detail__congrate-mini { font-size: 12px; } } .vip-status__wrapper{ margin-top: 30px; } .vip-status__body{ margin-top: 30px; display: flex; } .vip-status__card{ margin-right: 20px; display: flex; background: #272727; width: 186px; height: 100px; flex-direction: column; justify-content: center; border-radius: 16px; padding: 15px 30px; justify-content: space-between; } .vip-status__label{ color: #B2B2B2; font-size: 11.82px; } .vip-status__value{ color: white; font-weight: 500; font-size: 16.89px; margin-left: 3px; text-transform: uppercase; } .vip-status__value-wrapper{ display: flex; flex-direction: column } .vip-status__value-title{ font-size: 11.82px; color: var(--color-grey); } .vip-progress__wrapper{ margin-bottom: 30px; margin-top: 151px; position: relative; scroll-behavior: smooth; } .vip-progress__1{ margin-top: 0 } .vip-progress__desc-wrapper{ display: flex; width: calc(1130px / 4 * 5); } .vip-progress__desc{ width: 25%; color: #B2B2B2; font-size: 14px; } .vip-progress__desc-highlighted{ color: white } .vip-progress__desc-level{ margin-bottom: 7px; color: white; } .vip-progress__avatar-wrapper{ width: 1130px; position: absolute; } .vip-progress__avatar{ position: absolute; top: -87px; width: 70px; height: 70px; transition: all .3s; left: -35px; } .vip-progress__bar{ width: 1130px; height: 40px; border-radius: 15px; margin-bottom: 20px; background: #2D2E30; margin-top: 57px; position: relative; overflow: hidden; } .vip-progress__bar-inner{ transition: all .3s; position: absolute; height: inherit; background-color: var(--background-primary); width: 0; } .quest .vip-progress__bar{ width: 669px; } .quest .vip-progress__avatar-wrapper{ width: 669px; } .quest .vip-progress__desc-wrapper{ width: calc(669px / 4 * 5); } .quest .vip-progress__avatar{ /* padding: 30px */ } /* table */ .vip-table__wrapper{ margin-top: 30px; margin-bottom: 60px; } .section-title__vip{ margin-bottom: 30px; } .vip-row{ border-bottom: 1px solid #B2B2B2; display: flex; flex-direction: column; } .vip-row__borderless{ border-bottom: none; } .vip-row:last-child{ border-bottom: none; } .vip-row-1{ flex-direction: row; } .vip-col{ text-align: center; color: #B2B2B2; padding: 30px 16px 0 24px; width: 195px; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 14px; } .vip-col-1{ color: var(--color-primary); display: flex; align-items: center; width: 186px; justify-content: flex-start; flex-direction: row; padding-left: 33px; } .vip-col-2{ color: white; align-items: flex-start; width: 165px; text-align: left; } .vip-col__wrapper{ display: flex; } .vip-col-1__icon{ width: 24px; height: 24px; margin-right: 16px; -o-object-fit: contain; object-fit: contain; } .vip-level-icon{ width: 40px; height: 40px; -o-object-fit: contain; object-fit: contain; } .vip-col__highlighted{ background-color: #1E2020; } .vip-row__container{ display: flex; } .vip-row:last-child .vip-col__wrapper:last-child .vip-col__highlighted{ border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; } .vip-row .vip-col__wrapper:last-child .vip-col{ padding-bottom: 30px; } .vip-col__wrapper-1 .vip-col{ padding-bottom: 0 !important; } .vip-col__wrapper-1 .vip-col{ color: white; } .vip-table .vip-row:nth-child(2) .vip-col{ padding-bottom: 0 !important; } .vip-col__highlighted-top{ padding-bottom: 0 !important; } .vip-col__highlighted-top{ border-top-left-radius: 15px; border-top-right-radius: 15px; } .vip-green{ color: var(--color-primary-green) } /* mobile */ .section-title__vip{ margin-top: 21px; margin-bottom: 42px; } .vip-card{ background: #272727; border-radius: 15px; padding: 24px; margin-bottom: 64px; } .vip-card__badge{ margin-bottom: 11px; } .vip-card__header{ display: flex; align-items: center; justify-content: center; flex-direction: column; margin-bottom: 32px; } .vip-card__button{ background: #444447; border-radius: 10px; font-weight: 700; font-size: 14px; color: white; text-align: center; padding: 11px 40px; } .vip-card__title{ color: var(--color-primary); } .vip-card__group-card{ display: flex; align-items: baseline; padding-left: 40px; margin-bottom: 30px; } .vip-card__group-card-title{ display: flex; align-items: center; margin-bottom: 9px; } .vip-card__label{ font-size: 14px; color: #FFFFFF; min-width: 124px; } .vip-card__value{ color: var(--color-grey); font-size: 14px; } /* status */ .vip-status__card-mobile{ background: #272727; border-radius: 15px; padding: 14px 24px; } .vip-status__label-mobile{ color: var(--color-grey); font-size: 12px; } .vip-status__value-mobile{ font-size: 18px; font-weight: 700; color: white; } .vip-status__value-badge{ text-transform: capitalize; } .vip-status__card-group__mobile{ margin-bottom: 10px; } @media (max-width: 768px){ .vip-progress__wrapper{ margin-top: 50px; padding-left: 43px; height: 212px; overflow-x: auto; overflow-y: hidden; } .vip-progress__1{ height: auto; } .vip-progress__1 .vip-progress__bar{ margin-top: 0; } .vip-progress__avatar{ z-index: 1; left: 0; top: 0px; } .vip-progress__bar{ margin-top: 86px; } .vip-progress__arrow-right{ position: absolute; top: 86px; right: 16px; } .vip-progress__arrow-left{ position: absolute; top: 86px; left: 16px; z-index: 1; } .vip-progress__arrow-left-icon{ transform: rotate(180deg); } } .service-container{ color: white; } .service-input{ background: white; color: black; width: 60%; } .service-wrapper{ display: flex; gap: 1rem; } .service-container p{ margin-bottom: 1rem; } .promotion-detail__banner{ margin-bottom: 41px; margin-top: 19px; display: flex; align-items: center; gap: 30px; left: -70px; position: relative; } .promotion-detail__banner-img{ width: 832px; } .promotion-detail__body{ color: var(--color-grey); } .promotion-detail__body span{ font-size: 20px !important; } .promotion-detail__title{ color: white; font-style: normal; font-weight: 500; font-size: 20px; margin-bottom: 30px; } @media (max-width: 768px){ .promotion-detail__title{ font-weight: 700; font-size: 18px; margin-bottom: 18px; } .promotion-detail__banner{ left: 0; } .promotion-detail__back{ padding-top: 13px; margin-bottom: 13px; } .promotion-detail__arrow{ display: none; } .promotion-detail__body table { max-width: 100% !important; } .promotion-detail__body span{ font-size: medium !important; font-size: initial !important; } } .pd-contest__wrapper { background-color: #272727; border-radius: 15px; position: relative; width: 867px; padding: 30px 43px; } .pd-countdown__wrapper { display: flex; justify-content: space-between; } .pd-contest__card { background: linear-gradient(to right, #0038FF, #FF0000); padding: 8px; animation: animatedgradient 5s ease alternate infinite; position: relative; background-size: 300% 300%; border-radius: 15px; margin-bottom: 30px; } .pd-contest__card-inner { background: #272727; color: white; padding: 1rem; border-radius: 15px; display: flex; align-items: center; justify-content: center; position: relative; } .pd-select__container { text-align: center; display: flex; align-items: center; justify-content: center; color: white; flex-direction: column; } .pd-select__info-icon_wrapper { margin-left: 5px; cursor: pointer; } .pd-select-info-msg { width: 220px; padding: 18px; font-size: 14px; color: var(--color-grey); transition: all 0.3s; transform-origin: 10px 10px; transform: scale(0); top: 0; position: relative; text-align: justify; background-color: #353537; position: absolute; z-index: 2; left: 282px; } .pd-select__info-icon_wrapper:hover .pd-select-info-msg { transform: scale(1); } .pd-drag-select { font-size: 14px; font-style: italic; color: #B2B2B2; } .pd-select-team { font-size: 14px; } .pd-swiper { padding-top: 10px; padding-bottom: 10px; display: flex; align-items: center; } .pd-swiper__wrapper { width: 400px; } .pd-wheel { color: white; width: 100px; background-color: transparent; height: 150px; } .pd-wheel__wrapper { position: relative; } .pd-swiper__header { position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; padding-left: 32px; } .pd-swiper__footer { margin-top: 10px; } .pd-swiper__img { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; color: #b2b2b2; flex-direction: column; opacity: 0.5; } .swiper-slide-active .pd-swiper__img { opacity: 1; } .eastern .fake-img { background: #ce6a6c; } .western .fake-img { background: #49919d; } .pd-swiper__wrapper .swiper-3d .swiper-slide-shadow-left { background-image: none; } .pd-swiper__wrapper .swiper-3d .swiper-slide-shadow-right { background-image: none; } .pd-vs { padding-right: 100px; padding-top: 15px; padding-bottom: 15px; color: #B2B2B2; font-size: 24px; } .pd-bo { font-size: 14px; font-style: italic; } .pd-wheel__box-wrapper { position: absolute; top: 52px; left: 24px; display: flex; align-items: center; pointer-events: none; } .pd-wheel__box { width: 49px; height: 49px; border-radius: 5px; border: 1px solid #737373; color: #B2B2B2; margin-right: 3px; } .simple-wheel { border: none; } .simple-wheel li { opacity: 0.4; } .simple-wheel li.selected { opacity: 1; color: white; } .pd-swiper__wrapper .swiper-slide { background-position: center; background-size: cover; width: 100px; height: 100px; } .pd-swiper__wrapper .swiper-slide img { display: block; width: 100%; } .pd-modal__warning { color: #CC3633; font-size: 14px; font-style: italic; margin-bottom: 10px; } .pd-modal__result-wrapper { display: flex; margin: 20px 0; align-items: center; } .pd-modal__result-container { display: flex; align-items: center; } .pd-modal__result-vs { margin: 0 10px; } .pd-modal__score { margin: 0 10px; font-size: 22px; } .pd-modal__img { width: 40px; height: 40px; } .pd-modal__team { width: 80px; } .pd-modal__team-left { text-align: left; } .pd-modal__team-right { text-align: right; } .prediction-loading { position: absolute; top: 0; z-index: 3; background: #272727; width: 100%; height: 100%; border-radius: 15px; display: flex; align-items: center; justify-content: center; } .pd-nba__gif { position: absolute; bottom: 0; left: 24px; } .pd-mobile__countdown-wrapper { display: flex; justify-content: space-between; margin-bottom: 10px; } .pd-mobile__countdown-left { display: flex; align-items: center; } .pd-mobile__countdown-right { font-size: 14px; } .pd-mobile__tutorial-rule__wrapper { display: flex; margin-bottom: 10px; } .pd-mobile__video { background: #289D82; color: white; border-radius: 15px; font-size: 14px; font-weight: 700; flex: 1.5; padding: 10px; text-align: center; margin-right: 5px; } .pd-mobile__rule { flex: 1; background: #47494B; color: white; border-radius: 15px; font-size: 14px; font-weight: 700; text-align: center; padding: 10px; margin-left: 5px; } .pd-search__wrapper { display: flex; align-items: center; } .pd-search__btn { background: #B2B2B2; border-radius: 15px; font-size: 14px; font-weight: 700; color: black; padding: 10px 25px; } .pd-search__btn.active { cursor: pointer; background: #FABB2E; } .pd-search__container { border-radius: 25px; padding: 10px 14px; margin-right: 10px; display: flex; background: #202020; align-items: center; } .pd-search__pill-wrapper { position: relative; margin-right: 10px; width: 100px; } .pd-search__pill-wrapper.team { width: 180px; } .euro-search__pill-wrapper { position: relative; margin-right: 10px; width: 150px; } .pd-search__icon { width: 19px; height: 19px; margin-right: 10px; } .pd-search__pill { background: #353537; border-radius: 15px; color: #B2B2B2; padding: 10px 20px; min-width: 100px; cursor: pointer; width: 100%; } .pd-search__dropdown { position: absolute; top: 60px; width: 100%; background: #353537; border-radius: 15px; color: #B2B2B2; padding: 5px 0; transition: all 0.3s; transform: scale(0); transform-origin: 50% 0; z-index: 1; } .pd-search__dropdown.selected { transform: scale(1); } .pd-search__dropdown-li { cursor: pointer; padding: 7px 10px 5px 20px; color: #B2B2B2; transition: all 0.3s; } .pd-search__dropdown-li:hover { background: #202020; } .pd-search__dropdown-li.selected { background: #202020; } .pd-search__vs { color: #B2B2B2; margin-right: 10px; } .pd-rules_modal { width: 1125px !important; } .pd-rules_modal { max-width: 1125px; } .pd-nba__end-score__wrapper { display: flex; align-items: center; justify-content: center; } .pd-nba__end-score__card { display: flex; align-items: center; } .pd-nba__end-team-img { width: 50px; height: 50px; } .pd-nba__end-team { font-size: 28px; color: #B2B2B2; } .pd-nba__end-vs { margin: 0 1rem; font-size: 29px; color: #B2B2B2; } .pd-nba__end-score { width: 100px; text-align: center; font-size: 28px; color: #B2B2B2; } .pd-nba__end-congra { font-size: 14px; color: white; text-align: center; margin: 2rem 0 1rem; } .pd-euro__end-team-img { width: 50px; } .pd-winner__container { border-radius: 1rem; border: 1px solid #B2B2B2; color: white; display: inline-block; overflow: hidden; font-size: 12px; } .pd-winner__wrapper { display: flex; justify-content: space-between; gap: 1rem; } .pd-winner__header { display: flex; background: #333435; padding: 0.5rem 0; } .pd-winner__header-no { width: 50px; text-align: center; } .pd-winner__header-nickname { width: 180px; overflow: hidden; text-overflow: ellipsis; padding-right: 0.5rem; } .pd-winner__header-region { width: 100px; } .pd-winner__header-group { width: 50px; } .pd-winner__body { display: flex; padding: 0.5rem 0; background: #333435; } .pd-winner__body:nth-child(even) { background: #272727; } .pd-nba__end-team-img__wrapper { display: flex; flex-direction: column; align-items: center; } .pd-nba__end-team-img__text { display: none; } .ng-contest__countdown-icon-big { width: 30px; height: 30px; margin-right: 1rem; } .pd-end__event-end { display: flex; align-items: center; justify-content: center; font-size: 20px; color: #B2B2B2; margin-bottom: 1rem; } @media (max-width: 768px) { .pd-contest__wrapper { width: 100%; background-color: transparent; background-color: initial; padding: 0; margin: 0 10px; } .pd-contest__card-inner { flex-direction: column; padding: 0.5rem 1rem; } .pd-nba__gif { display: none; } .pd-contest__card { padding: 4px; margin-bottom: 20px; } .pd-swiper { flex-direction: column; } .pd-swiper__wrapper { width: 350px; } .pd-vs { padding-right: 0; } .pd-mobile__bg { border-radius: 15px; background-color: #272727; padding-bottom: 2rem; } .pd-wheel__wrapper { display: none; } .pd-mobile__swiper { width: 250px; margin: 1.5rem 0; } .pd-mobile__wheel-wrapper { position: absolute; top: 9px; display: flex; flex-direction: column; left: calc(50% - 25px); color: #B2B2B2; font-size: 14px; } .pd-mobile__wheel-box { width: 49px; height: 49px; border-radius: 5px; border: 1px solid #737373; color: #B2B2B2; margin-right: 3px; margin-bottom: 6px; } .pd-mobile__swiper .swiper-slide { width: 50px; opacity: 0.5; transition: all 0.3s; } .pd-mobile__swiper .swiper-slide-active { opacity: 1; transform: scale(1.5); } .pd-drag-select { margin-bottom: 16px; font-size: 12px; } .pd-mobile__btn-submit { width: 50%; margin: 0 auto; } .pd-back { display: flex; color: white; } .pd-back__icon { margin-right: 10px; } .pd-select-info-msg { left: 18px; top: 0; transform-origin: 210px 8px; } .pd-contest__info { position: absolute; right: -12px; top: -5px; display: block; } .pd-score-my { width: 140px; } .pd-table-my-record tbody td { font-size: 13px; padding: 12px 14px; } .pd-table-my-record thead tr th { padding: 12px 14px; } .pd-search__wrapper { flex-direction: column; margin-top: 10px; } .pd-search__container { flex-direction: column; padding: 0; margin-right: 0; background: transparent; margin-bottom: 25px; } .pd-search__vs { width: 100%; text-align: center; padding: 16px 0; margin-right: 0; } .pd-search__btn { width: 80%; text-align: center; } .pd-modal { overflow-y: visible; overflow-y: initial; top: -60px; position: relative; } .pd-search__mobile-wrapper { width: 222px; margin: 0 auto; } .pd-rules_modal { min-height: auto; width: 100%; } .euro-search__pill-wrapper { width: 100%; margin-bottom: 1rem; margin-right: 0; font-size: 13px; } .euro-search__pill-50 { width: 50%; } .pd-winner__wrapper { flex-direction: column; align-items: center; } .pd-nba__end-team-img__text { color: #B2B2B2; font-size: 14px; display: block; } .pd-nba__end-team { display: none; } .pd-winner__container { margin-bottom: 1rem; } .pd-nba__end-score { width: 80px; } .pd-winner__header-region { width: 80px; } } .account-wrapper{ display: flex; margin-top: 45px; } .account-content__wrapper{ width: 100%; } .account-content__container{ background: #272727; border-radius: 15px; padding: 30px 40px; min-height: 635px; width: 1014px; } .form-title{ font-weight: 500; font-size: 14px; color: white; } .profile-avatar__wrapper{ position: relative; width: 70px; cursor: pointer; margin-bottom: 17px; cursor: pointer; } .profile-avatar{ position: absolute; bottom: 0; right: 0; } .profile-section__wrapper{ margin-bottom: 30px; } .profile-verify__close{ position: absolute; top: -7px; left: 13px; } .profile-verify__wrapper{ display: flex; color: var(--color-grey); } .profile-verify__text{ font-weight: 500; font-size: 14px; color: var(--color-grey); margin-left: 15px; } .profile-forget-password{ color: var(--color-primary-green); font-size: 14px; margin-top: 10px; display: block; cursor: pointer; } .profile-avatar__loading{ width: 70px; height: 70px; background: var(--color-primary-grey); border-radius: 50%; } .icon-verfied{ margin-left: 8px; } @media (max-width: 768px){ .account-content__container{ width: auto; background: none; padding: 0; min-height: auto; } .mobile-profile-balance{ background: #353537; border-radius: 15px; padding: 0 16px; display: flex; width: 100%; font-weight: 700; font-size: 16px; color: white; justify-content: space-between; margin-top: 6px; align-items: center; } .mobile-profile-add{ display:inherit; } .account-menu__profile-balance__wrapper{ font-size: 16px; } .mobile-profile-section{ display: flex; margin-bottom: 15.38px; padding-left: 10px; } .mobile-profile__level{ width: 23.5px; height: 28px; } .mobile-profile-form-title{ margin-top: 37px; margin-bottom: 17.37px; } .mobile-profile__level-wrapper{ display: flex; align-items: center; } .mobile-profile__level-name{ font-weight: 500; font-size: 14px; color: white; margin-right: 8px; margin-left: 4.5px; text-transform: capitalize; } .mobile-profile__level-icon{ width: 23px; -o-object-fit: contain; object-fit: contain; margin-bottom: 6.13px; } .mobile-profile-left{ margin-left: 6px; } .profile-avatar__wrapper{ margin-bottom: 0; } .mobile-profile-verify{ background: #353537; border-radius: 15px; padding: 20px 50px 11px; display: flex; justify-content: space-between; margin-bottom: 26px; font-size: 14px } .mobile-profile-detail-tab{ background: #353537; border-radius: 15px; padding: 7px 23px; font-weight: 500; font-size: 12px; display: flex; justify-content: space-between; color: #FFFFFF; } .mobile-profile__detail-tab-icon{ transition: all .3s; } .open .mobile-profile__detail-tab-icon{ transform: rotate(-180deg); } .mobile-profile-detail{ padding-top: 12px; padding-bottom: 15px; border-bottom: 1px solid #353537; } .mobile-profile-detail__label{ font-weight: 700; font-size: 12px; color: #FFFFFF; margin-bottom: 3px; } .mobile-profile-detail__verify-icon{ position: relative; top: 3px; } .mobile-profile-detail__value{ font-weight: 400; font-size: 12px; color: #FFFFFF; } .mobile-profile-detail__wrapper{ padding: 7px 12px 0 12px; display: none } .mobile-profile-detail__wrapper-2{ padding-top: 20px } .mobile-profile-detail__verify{ display: flex; justify-content: space-between; color: var(--color-grey); font-weight: 400; font-size: 12px; } .mobile-profile__card{ margin-bottom: 10px } .mobile-profile__container{ font-size: 16px; } .mobile-profile__birthday{ display: flex; justify-content: center; align-items: center; } .form-title{ font-size: 12px; } .account-wrapper{ margin-top: 0; } .profile-forget-password{ font-size: 12px; margin-top: 0; padding: 20px } /* banking */ .my-bank-action__mobile{ font-size: 12px; font-weight: 400; } .mybank-verify-now__mobile{ color: var(--color-primary-green); font-size: 12px; font-weight: 400; } } .profile-modal__bg { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; right: 0; bottom: 0; transition: all 0.3s; transform: scale(0); z-index: 11; } .profile-modal__bg.selected { transform: scale(1); } .profile-modal { background: #1E2020; border-radius: 15px; } .profile-modal__header { display: flex; justify-content: space-between; padding: 30px 22px 0 39px; } .profile-modal__title { font-weight: 500; font-size: 16px; color: white; } .profile-modal__close { cursor: pointer; } .profile-modal__body { padding: 30px 39px; display: grid; grid-template-columns: repeat(1, 1fr); grid-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px; grid-row-gap: 20px; row-gap: 20px; overflow-y: auto; max-height: 430px; overflow-x: hidden; } .profile-modal__body-more { grid-template-columns: repeat(2, 1fr); } .profile-modal-avatar__card-wrapper { display: none; } .profile-modal-avatar__card-wrapper.selected { display: block; } .profile-modal-avatar__card { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 8px; gap: 8px; } .profile-modal-avatar { width: 70px; height: 70px; border: 2px solid #171717; border-radius: 50%; overflow: hidden; cursor: pointer; transition: all 0.5s; } .profile-modal-avatar:hover { border-color: var(--color-primary); } .profile-modal-avatar__img { filter: grayscale(1); transition: all 0.3s; } .profile-modal-avatar.selected { border-color: var(--color-primary); } .profile-modal-avatar.selected .profile-modal-avatar__img { filter: none; } .profile-modal-avatar:hover .profile-modal-avatar__img { filter: none; } .profile-view-more { font-weight: 500; font-size: 14px; color: white; cursor: pointer; } .profile-modal__footer { display: flex; justify-content: center; align-items: center; padding: 20px; gap: 87px; } .profile-modal-avatar__card-title { color: white; font-size: 14px; margin-bottom: 20px; } @media (max-width: 768px) { .profile-modal { width: 90vw; } .profile-modal__body-more { grid-template-columns: repeat(1, 1fr); } .profile-modal-avatar__card { grid-template-columns: repeat(3, 1fr); } .profile-modal__bg { background-color: rgba(0,0,0,0.63137); } } .promotion-detail__banner{ margin-bottom: 41px; margin-top: 19px; display: flex; align-items: center; gap: 30px; left: -70px; position: relative; } .promotion-detail__banner-img{ width: 832px; } .promotion-detail__body{ color: var(--color-grey); } .promotion-detail__body span{ font-size: 20px !important; } .promotion-detail__title{ color: white; font-style: normal; font-weight: 500; font-size: 20px; margin-bottom: 30px; } @media (max-width: 768px){ .promotion-detail__title{ font-weight: 700; font-size: 18px; margin-bottom: 18px; } .promotion-detail__banner{ left: 0; } .promotion-detail__back{ padding-top: 13px; margin-bottom: 13px; } .promotion-detail__arrow{ display: none; } .promotion-detail__body table { max-width: 100% !important; } .promotion-detail__body span{ font-size: medium !important; font-size: initial !important; } } .ng-tutorial__wrapper { margin-bottom: 12px; } .euro-card { border-radius: 15px; background: #2d2e30; display: flex; align-items: center; font-size: 14px; color: #B2B2B2; flex-direction: column; padding: 1rem; } .euro-card__title { margin-bottom: 20px; } .euro-card__desc { margin-bottom: 20px; font-size: 13px; } .euro-card__img { margin-bottom: 10px; } .euro-card__country-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 1rem; gap: 1rem; } .euro-modal__wrapper { height: 500px; overflow-y: auto; } .euro-card__container { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 4rem; -moz-column-gap: 4rem; column-gap: 4rem; grid-row-gap: 1.5rem; row-gap: 1.5rem; } .euro-card__country-container { cursor: pointer; position: relative; display: flex; align-items: center; flex-direction: column; font-size: 12px; } .euro-card__rank { width: 24px; height: 24px; border-radius: 50%; border: 1px dashed #B2B2B2; display: flex; justify-content: center; align-items: center; font-weight: 700; color: #B2B2B2; position: absolute; top: -12px; left: -10px; background: #272727; transition: all 0.3s; transform: scale(0); transform-origin: 20px 20px; } .euro-card__rank.selected { transform: scale(1); } .euro-modal__country__wrapper { background: #303030; border-radius: 15px; padding: 8px; display: inline-grid; grid-template-columns: repeat(4, 1fr); -moz-column-gap: 7px; column-gap: 7px; } .euro-modal__group { margin-bottom: 8px; } .euro-modal__country-name__wrapper { margin-bottom: 5px; } .euro-modal { max-height: 900px; padding-bottom: 2rem; } .euro-modal__container { margin-bottom: 15px; font-size: 12px; } .euro-modal__body { display: flex; flex-direction: column; align-items: center; } .euro-modal__adv-search { display: flex; align-items: center; justify-content: center; font-size: 14px; color: #289D82; padding-bottom: 20px; padding-top: 10px; } .euro-display__country { width: 25px; height: 18px; margin-right: 3px; -o-object-fit: contain; object-fit: contain; } .euro-table tbody td { vertical-align: baseline; } .euro-table__country-container { margin-bottom: 5px; display: inline-flex; } .euro-adv-search { -webkit-text-decoration: underline; text-decoration: underline; margin-left: 20px; color: #B2B2B2; font-weight: 700; cursor: pointer; text-underline-offset: 8px; } .euro-advsearch__wrapper { border-radius: 15px; background: #202020; display: inline-flex; flex-direction: column; padding: 1rem 1rem 0 2.8rem; transition: all 0.3s; transform: scale(0); transform-origin: 50% 0; height: 0; } .euro-advsearch__wrapper.selected { transform: scale(1); height: auto; } .euro-advsearch__row { display: flex; margin-bottom: 15px; align-items: center; } .euro-advsearch__country-wrapper { display: flex; align-items: center; } .euro-advsearch__group { font-size: 14px; color: #B2B2B2; width: 158px; } .euro-advsearch__footer { display: flex; align-items: center; justify-content: center; padding: 1rem; } .euro-advsearch__cancel { color: #B2B2B2; font-weight: 700; font-size: 14px; cursor: pointer; margin-left: 60px; } .euro-search__icon-dropdown { position: absolute; right: 13px; top: 17px; } .euro-modal__adv-search-title { text-align: center; color: #B2B2B2; font-weight: 700; } .euro-modal__adv { position: absolute !important; } .euro-modal__adv { padding: 20px; transition: all 0.3s; transform: translateX(100%); } .euro-modal__adv.active { transform: translateX(0); } .euro-modal__advsearch-pill__wrapper { display: flex; overflow: auto; margin-bottom: 1rem; } .euro-modal__advsearch-pill { border-radius: 15px; padding: 10px 15px; color: white; font-size: 12px; white-space: nowrap; } .euro-modal__advsearch-pill.active { background: #363637; } .euro-card__result { display: flex; flex-direction: column; color: #B2B2B2; font-size: 12px; } .euro-card__result-country-wrapper { display: flex; } .euro-card__cover { display: flex; align-items: center; justify-content: center; } .euro-card__r { margin-right: 5px; } .euro-card__result-winner__wrapper { display: flex; flex-direction: column; align-items: center; } .euro-card__result-prize { color: #FABB2E; } .paginataion-cover { width: 100%; display: flex; justify-content: flex-end; } @media (max-width: 768px) { .euro-card__wrapper { display: flex; flex-direction: column; padding: 1rem; } .euro-card__container { grid-template-columns: repeat(1, 1fr); } .euro-modal__body { height: 450px; display: flex; flex-direction: column; align-items: center; } .euro-advsearch__wrapper { display: none; } .euro-modal-search__container { margin-bottom: 0 !important; align-items: flex-start !important; } .euro-modal-search__container { width: 90%; } .euro-advsearch__row { display: none; } .euro-advsearch__row.active { display: block; } .euro-advsearch__country-wrapper { flex-direction: column; } .euro-advsearch__group { display: none; } .euro-modal__adv-search-title { padding: 20px 0; } } .inbox-option__wrapper{ display: flex; justify-content:flex-end; align-items: center; margin-bottom: 13px; } .tdH{ display: none; } .pretty { position: relative; display: inline-block; margin-right: 1em; white-space: nowrap; line-height: 1; left: 29px; width: 15px; height: 15px; } .pretty input { position: absolute; left: 0; top: 0; min-width: 1em; width: 100%; height: 100%; z-index: 2; opacity: 0; margin: 0; padding: 0; cursor: pointer; } .pretty * { box-sizing: border-box; } .pretty.p-icon .state .icon { position: absolute; left: 0; z-index: 1; text-align: center; line-height: normal; height: 14px; width: 14px; font-size: 8px; top: -1px; color: #289d82; opacity: 0; } .pretty.p-icon .state .icon:before { margin: 0; width: 100%; height: 100%; text-align: center; display: flex; flex: 1; justify-content: center; align-items: center; line-height: 1; } .fa-check:before { content: "\f00c"; } .pretty .state label { position: static; position: initial; display: inline-block; margin: 0; text-indent: 1.5em; min-width: calc(1em + 2px); font-weight: 500; font-size: 14px; line-height: 17px; color: #fff; padding-bottom: 8px; } .pretty .state label:before { content: ''; display: block; box-sizing: border-box; z-index: 0; position: absolute; left: 0; top: calc((0% - (100% - 1em)) - 8%); background-color: transparent; height: 14px; width: 14px; border: 1.8px solid; border-radius: 5px; } .pretty .state label:after, .pretty .state label:before { content: ''; display: block; box-sizing: border-box; z-index: 0; position: absolute; left: 0; top: calc((0% - (100% - 1em)) - 8%); background-color: transparent; height: 14px; width: 14px; border: 1.8px solid; border-radius: 5px; } .inbox-checkbox-tick{ opacity: 0; width: 14px; height: 14px; top: -2px; position: absolute; } .pretty.p-icon input:checked~.state .inbox-checkbox-tick { opacity: 1; } .pretty input:checked~.state label:after,table.dataTable .pretty input:checked~.state label:before { border-color: #289d82 } .pretty .state label:after,table.dataTable .pretty .state label:before { height: 14px; width: 14px; border: 1.8px solid; border-radius: 2px } .inbox-table__checkbox-th{ width: 95px; } .modal-mailbox{ width: 700px; } #mailModal .modal .date{ font-size: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--color-primary); margin-bottom: 28px; display: inline-block; } #mailModal .modal .subject{ font-weight: 500; font-size: 16px; color: white; margin-bottom: 30px; } #mailModal .modal .remark{ font-size: 14px; } .inbox-modal__status{ font-weight: 500; font-size: 16px; color: white; margin-top: 21px; margin-bottom: 28px; } .inbox-modal__text{ color: var(--color-grey); margin-bottom: 37px; } .dataTable tbody td{ color: var(--color-grey) } .dataTable tbody .pm_bold td{ color: white } .inbox-mark-read{ color: var(--color-primary-green); font-size: 14px; cursor: pointer; } .inbox-table-datetime{ width: 232px; } .inbox-table{ width: 100%;; } @media (max-width: 768px){ .inbox-mark-read{ font-size: 10px; } .inboxTabWrapper{ justify-content: center; margin-bottom: 27px; width: 100vw; } .deleteMail{ width: 12px; } .inbox-table__wrapper{ overflow-x: auto; margin-left: 16px; width: 96vw; border-top-left-radius: 15px; border-bottom-left-radius: 23px; } .inbox-table{ width: 450px; } .inboxTab{ width: 136px; } .inbox-form-title{ font-size: 16px !important; } .inbox-form-title{ margin-top: 11px; margin-bottom: 25px; } .inbox-table-datetime{ width: 143px; } .dataTables_paginate{ width: calc(100% - 32px); position: absolute; justify-content: center; padding-bottom: 2rem; } .dataTable tbody td{ padding: 12px 0 12px 25px; font-size: 11px; } .dataTable thead th{ padding: 12px 0 !important; padding-left: 25px !important; } .dataTable thead th{ font-size: 12px; } .modal-mailbox{ width: calc(100% - 20px); min-width: auto; } .modal-body{ padding: 10px 27px 0; } #mailModal .modal .date{ margin-bottom: 14px; } #mailModal .modal .subject{ margin-bottom: 14px; } } .account-promotion__header{ margin-bottom: 13px; display: flex; align-items: center; justify-content: space-between; color: var(--color-grey); position:relative; } .account-promotion__body{ padding-left: 46px; opacity: 0; font-size: 14px; transition: all .3s; height: 0; } .account-promotion__body.open{ height: auto; opacity: 1; } .account-promotion__triangle{ width: 11px; height: 11px; margin-right: 30px; transition: all .3s; } .account-promotion__triangle.open{ transform: rotate(180deg); } .account-promotion__paragraph{ margin-bottom: 17px; color: white; display: flex; } .account-promotion__paragraph.disable{ color: var(--color-grey); } .account-promotion__paragraph.disable .account-promotion__tick-icon{ opacity: 0; } .account-promotion__tick-wrapper{ margin-right: 13px; } .account-promotion__tick-icon{ width: 16px; height: 16px; -o-object-fit: contain; object-fit: contain; } .account-promotion__tips{ color: var(--color-primary-green); margin-bottom: 17px; padding-left: 29px; } .btn-claim-promote{ background: var(--background-primary) !important; color: black !important; pointer-events: fill !important; } .account-promotion__btn-wrapper{ position:absolute; top: 0; right: 0; text-align: right; } .account-promotion__btn-container{ text-align: right; } .account-promotion__container-desktop{ margin-bottom: 1rem; } .account-voucher__header{ margin-top: 2rem; padding-left: 3rem; } .account-voucher__modal-btn{ display: flex; align-items: center; justify-content: center; padding-top: 20px; } .account-voucher__modal{ padding-bottom: 2rem; } @media (max-width: 768px){ .mobile-account-promotion__wrapper{ margin-top: 40px; } .account-promotion__wrapper{ /* padding-left: 15px; */ } .account-promotion__triangle{ margin-right: 18px; } .account-promotion__body{ padding-left: 0; font-size: 10px; } .account-promotion__header{ font-size: 12px; color: white; } .account-promotion__header .btn{ padding: .5rem 1rem; height: auto; } .account-promotion__btn-container{ text-align: center; } .account-promotion__btn-wrapper{ position: relative; color: white; text-align: center; } .account-promotion__btn-container{ font-size: 12px; } .account-promotion__btn-wrapper .btn{ height: auto; padding: 6px 20px; margin-bottom: 5px; } .account-promotion__container{ background: black; padding: .5rem; border-radius: 1rem; margin-bottom: 1rem; } } .history-title{ margin-bottom: 20px; } .history-table{ margin-top: 30px; } .depositTable_processing{ display: none !important; } .form-login-detail { font-family: rubik, sans-serif; color: #fff; } @media (max-width: 768px){ .history-title{ display: none; } .history-table__wrapper{ overflow-x: auto; margin-left: 16px; padding-right: 16px; width: 91vw; } .history-table{ width: 747px } .selectDateRangeWrapper{ background: #353537; border-radius: 20px; padding: 5px; } .dateRangeBtn{ padding: 11px; background: transparent; flex: 1; } .dateRangeBtn.active{ background: #47494B; color: white; } } .promotion-detail__banner{ margin-bottom: 41px; margin-top: 19px; display: flex; align-items: center; gap: 30px; left: -70px; position: relative; } .promotion-detail__banner-img{ width: 832px; } .promotion-detail__body{ color: var(--color-grey); } .promotion-detail__body span{ font-size: 20px !important; } .promotion-detail__title{ color: white; font-style: normal; font-weight: 500; font-size: 20px; margin-bottom: 30px; } @media (max-width: 768px){ .promotion-detail__title{ font-weight: 700; font-size: 18px; margin-bottom: 18px; } .promotion-detail__banner{ left: 0; } .promotion-detail__back{ padding-top: 13px; margin-bottom: 13px; } .promotion-detail__arrow{ display: none; } .promotion-detail__body table { max-width: 100% !important; } .promotion-detail__body span{ font-size: medium !important; font-size: initial !important; } } .pd-contest__wrapper { background-color: #272727; border-radius: 15px; position: relative; width: 867px; padding: 30px 43px; } .pd-countdown__wrapper { display: flex; justify-content: space-between; } .pd-contest__card { background: linear-gradient(to right, #0038FF, #FF0000); padding: 8px; animation: animatedgradient 5s ease alternate infinite; position: relative; background-size: 300% 300%; border-radius: 15px; margin-bottom: 30px; } .pd-contest__card-inner { background: #272727; color: white; padding: 1rem; border-radius: 15px; display: flex; align-items: center; justify-content: center; position: relative; } .pd-select__container { text-align: center; display: flex; align-items: center; justify-content: center; color: white; flex-direction: column; } .pd-select__info-icon_wrapper { margin-left: 5px; cursor: pointer; } .pd-select-info-msg { width: 220px; padding: 18px; font-size: 14px; color: var(--color-grey); transition: all 0.3s; transform-origin: 10px 10px; transform: scale(0); top: 0; position: relative; text-align: justify; background-color: #353537; position: absolute; z-index: 2; left: 282px; } .pd-select__info-icon_wrapper:hover .pd-select-info-msg { transform: scale(1); } .pd-drag-select { font-size: 14px; font-style: italic; color: #B2B2B2; } .pd-select-team { font-size: 14px; } .pd-swiper { padding-top: 10px; padding-bottom: 10px; display: flex; align-items: center; } .pd-swiper__wrapper { width: 400px; } .pd-wheel { color: white; width: 100px; background-color: transparent; height: 150px; } .pd-wheel__wrapper { position: relative; } .pd-swiper__header { position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; padding-left: 32px; } .pd-swiper__footer { margin-top: 10px; } .pd-swiper__img { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; color: #b2b2b2; flex-direction: column; opacity: 0.5; } .swiper-slide-active .pd-swiper__img { opacity: 1; } .eastern .fake-img { background: #ce6a6c; } .western .fake-img { background: #49919d; } .pd-swiper__wrapper .swiper-3d .swiper-slide-shadow-left { background-image: none; } .pd-swiper__wrapper .swiper-3d .swiper-slide-shadow-right { background-image: none; } .pd-vs { padding-right: 100px; padding-top: 15px; padding-bottom: 15px; color: #B2B2B2; font-size: 24px; } .pd-bo { font-size: 14px; font-style: italic; } .pd-wheel__box-wrapper { position: absolute; top: 52px; left: 24px; display: flex; align-items: center; pointer-events: none; } .pd-wheel__box { width: 49px; height: 49px; border-radius: 5px; border: 1px solid #737373; color: #B2B2B2; margin-right: 3px; } .simple-wheel { border: none; } .simple-wheel li { opacity: 0.4; } .simple-wheel li.selected { opacity: 1; color: white; } .pd-swiper__wrapper .swiper-slide { background-position: center; background-size: cover; width: 100px; height: 100px; } .pd-swiper__wrapper .swiper-slide img { display: block; width: 100%; } .pd-modal__warning { color: #CC3633; font-size: 14px; font-style: italic; margin-bottom: 10px; } .pd-modal__result-wrapper { display: flex; margin: 20px 0; align-items: center; } .pd-modal__result-container { display: flex; align-items: center; } .pd-modal__result-vs { margin: 0 10px; } .pd-modal__score { margin: 0 10px; font-size: 22px; } .pd-modal__img { width: 40px; height: 40px; } .pd-modal__team { width: 80px; } .pd-modal__team-left { text-align: left; } .pd-modal__team-right { text-align: right; } .prediction-loading { position: absolute; top: 0; z-index: 3; background: #272727; width: 100%; height: 100%; border-radius: 15px; display: flex; align-items: center; justify-content: center; } .pd-nba__gif { position: absolute; bottom: 0; left: 24px; } .pd-mobile__countdown-wrapper { display: flex; justify-content: space-between; margin-bottom: 10px; } .pd-mobile__countdown-left { display: flex; align-items: center; } .pd-mobile__countdown-right { font-size: 14px; } .pd-mobile__tutorial-rule__wrapper { display: flex; margin-bottom: 10px; } .pd-mobile__video { background: #289D82; color: white; border-radius: 15px; font-size: 14px; font-weight: 700; flex: 1.5; padding: 10px; text-align: center; margin-right: 5px; } .pd-mobile__rule { flex: 1; background: #47494B; color: white; border-radius: 15px; font-size: 14px; font-weight: 700; text-align: center; padding: 10px; margin-left: 5px; } .pd-search__wrapper { display: flex; align-items: center; } .pd-search__btn { background: #B2B2B2; border-radius: 15px; font-size: 14px; font-weight: 700; color: black; padding: 10px 25px; } .pd-search__btn.active { cursor: pointer; background: #FABB2E; } .pd-search__container { border-radius: 25px; padding: 10px 14px; margin-right: 10px; display: flex; background: #202020; align-items: center; } .pd-search__pill-wrapper { position: relative; margin-right: 10px; width: 100px; } .pd-search__pill-wrapper.team { width: 180px; } .euro-search__pill-wrapper { position: relative; margin-right: 10px; width: 150px; } .pd-search__icon { width: 19px; height: 19px; margin-right: 10px; } .pd-search__pill { background: #353537; border-radius: 15px; color: #B2B2B2; padding: 10px 20px; min-width: 100px; cursor: pointer; width: 100%; } .pd-search__dropdown { position: absolute; top: 60px; width: 100%; background: #353537; border-radius: 15px; color: #B2B2B2; padding: 5px 0; transition: all 0.3s; transform: scale(0); transform-origin: 50% 0; z-index: 1; } .pd-search__dropdown.selected { transform: scale(1); } .pd-search__dropdown-li { cursor: pointer; padding: 7px 10px 5px 20px; color: #B2B2B2; transition: all 0.3s; } .pd-search__dropdown-li:hover { background: #202020; } .pd-search__dropdown-li.selected { background: #202020; } .pd-search__vs { color: #B2B2B2; margin-right: 10px; } .pd-rules_modal { width: 1125px !important; } .pd-rules_modal { max-width: 1125px; } .pd-score { min-width: 10px; } @media (max-width: 768px) { .pd-contest__wrapper { width: 100%; background-color: transparent; background-color: initial; padding: 0; margin: 0 10px; } .pd-contest__card-inner { flex-direction: column; padding: 0.5rem 1rem; } .pd-nba__gif { display: none; } .pd-contest__card { padding: 4px; margin-bottom: 20px; } .pd-swiper { flex-direction: column; } .pd-swiper__wrapper { width: 350px; } .pd-vs { padding-right: 0; } .pd-mobile__bg { border-radius: 15px; background-color: #272727; padding-bottom: 2rem; } .pd-wheel__wrapper { display: none; } .pd-mobile__swiper { width: 250px; margin: 1.5rem 0; } .pd-mobile__wheel-wrapper { position: absolute; top: 9px; display: flex; flex-direction: column; left: calc(50% - 25px); color: #B2B2B2; font-size: 14px; } .pd-mobile__wheel-box { width: 49px; height: 49px; border-radius: 5px; border: 1px solid #737373; color: #B2B2B2; margin-right: 3px; margin-bottom: 6px; } .pd-mobile__swiper .swiper-slide { width: 50px; opacity: 0.5; transition: all 0.3s; } .pd-mobile__swiper .swiper-slide-active { opacity: 1; transform: scale(1.5); } .pd-drag-select { margin-bottom: 16px; font-size: 12px; } .pd-mobile__btn-submit { width: 50%; margin: 0 auto; } .pd-back { display: flex; color: white; } .pd-back__icon { margin-right: 10px; } .pd-select-info-msg { left: 18px; top: 0; transform-origin: 210px 8px; } .pd-contest__info { position: absolute; right: -12px; top: -5px; display: block; } .pd-score-my { width: 140px; } .pd-table-my-record tbody td { font-size: 13px; padding: 12px 14px; } .pd-table-my-record thead tr th { padding: 12px 14px; } .pd-search__wrapper { flex-direction: column; margin-top: 10px; } .pd-search__container { flex-direction: column; padding: 0; margin-right: 0; background: transparent; margin-bottom: 25px; } .pd-search__vs { width: 100%; text-align: center; padding: 16px 0; margin-right: 0; } .pd-search__btn { width: 80%; text-align: center; } .pd-modal { overflow-y: visible; overflow-y: initial; top: -60px; position: relative; } .pd-search__mobile-wrapper { width: 222px; margin: 0 auto; } .pd-rules_modal { min-height: auto; width: 100%; } .euro-search__pill-wrapper { width: 100%; margin-bottom: 1rem; margin-right: 0; font-size: 13px; } .euro-search__pill-50 { width: 50%; } } .pending-header{ margin-bottom: 48px; } .pending-footer{ display: flex; margin-top: 30px; } .pending-footer__follow-us{ margin-right: 122px; } .pending-footer__title{ font-weight: 500; font-size: 14px; color: white; margin-bottom: 26px; } .pending-footer__tick{ margin-right: 19px; } .pending-footer__social-wrapper{ display: flex; align-items: center; } .pending-footer__social-icon{ margin-right: 22px; display: block; } .pending-footer__website{ display: flex; align-items: center; color: white; } .pending-footer__website-wrapper{ display: flex; gap: 27.4px; } .pending-card-title{ font-size: 12px; color: var(--color-grey); margin-bottom: 21px; } .pending-card-icon{ margin-right: 10px; } .pending-card-website{ display: flex; font-size: 12px; color: white; margin-bottom: 16px; } .pending-card{ margin-bottom: 36px; } .pending-no-transaction { font-style: italic; margin-bottom: 20px; color: #c5c5c5; } .pending-card { width: 816px; display: flex; justify-content: space-between; } .pending-card__wrapper { border-bottom: 1px solid #333333; padding: 30px 0 32px 0; } .pending-card-1 { display: flex; flex-direction: column; } .pending-card-2 { width: 340px; color: var(--color-primary-green); } .pending-card-2.bank { color: var(--color-primary); } .pending-card-2.wth { color: var(--color-primary-red); } .pending-processing { font-size: 14px; color: var(--color-grey); margin-bottom: 12px; } .pending-timer { font-weight: 700; font-size: 32px; color: white; width: 140px; } .pending-card__type { font-size: 14px; margin-bottom: 4px; } .pending-card__tips { font-size: 12px; color: var(--color-grey); } .pending-card__tips-deposit { color: var(--color-primary-red); font-size: 12px; margin-top: 5px; } .pending-card__amount-wrapper { display: flex; align-items: baseline; margin-bottom: 8px; } .pending-card__currency { font-size: 12px; margin-right: 7px; } .pending-card__amount { font-size: 12px; font-weight: 700; font-size: 20px; } .pending-card__divider { background: #808080; width: 1px; height: 32px; margin: 0 32px; top: 15px; position: relative; } .pending-card-left { display: flex; justify-content: center; position: relative; } .pending-more-info { color: white; } .pending-cancel-transaction { font-weight: 700; font-size: 14px; color: var(--color-primary-red); cursor: pointer; margin-top: 16px; text-align: center; } .pending-table__wrapper { display: none; color: white; margin-top: 20px; } .pending-table__wrapper .table-theme-light { width: 100%; } .pending-table__wrapper.selected { display: block; } .pending-table-td { padding-left: 45px !important; } .pending-table-td { width: 260px; } .pending-more-info-mobile { display: none; } @media (max-width: 768px) { .pending-processing { margin-bottom: 9px; font-size: 12px; } .pending-card-1 { width: 100px; } .pending-card-2 { width: auto; } .pending-cancel-transaction { margin-top: 11px; font-size: 12px; } .pending-card__type { font-size: 12px; } .pending-card { flex-direction: column; width: 100%; margin-bottom: 0; } .pending-card-mobile { margin-bottom: 36px; margin-top: 1rem; } .pending-card-left { background: #252527; border-radius: 15px; padding: 11px 14px 11px 20px; margin-bottom: 40px; } .pending-timer { font-size: 18px; } .pending-card-3 { display: none; } .pending-card__divider { height: auto; top: 0; } .pending-card__tips { margin-bottom: 18px; } .pending-card__wrapper { padding-bottom: 0; } .pending-card__tips-deposit { margin-bottom: 0; } .pending-more-info-mobile { position: absolute; right: 10px; top: 10px; display: block; } .pending-table-td { font-size: 12px !important; padding-left: 16px !important; } .pending-table-td { width: 145px; } .pending-table__wrapper td { font-size: 12px; } } #tutorialIframe { width: 100%; } .flatpickr-time { background: #fff; } .deposit-rule{ width: 1014px; } .deposit-rule .info-rule__wrapper{ width: auto; } .deposit-container{ margin-bottom: 30px; } .deposit-form-group .form-group{ width: 405px; } .deposit-watch-tutorial{ margin-bottom: 22.99px; display: flex; cursor: pointer; } .deposit-watch-tutorial__icon{ margin-right: 14px; } .deposit-watch-tutorial__text{ color: var(--color-primary-green); font-size: 14px; -webkit-text-decoration: underline; text-decoration: underline; } .deposit-atm-tips{ font-size: 12px; color: var(--color-primary); } .deposit-tnc{ font-size: 14px; color: var(--color-primary-red); } .deposit-promotion-tnc{ font-weight: 700; font-size: 14px; -webkit-text-decoration: underline; text-decoration: underline; color: var(--color-primary-green); margin-left: 20px; } .deposit-preammount__group{ display: flex; align-items: center; gap: 10px; } .deposit-crypto-qrcode{ width: 166px; margin-bottom: 20px; } .deposit-first__modal{ width: 700px; padding-bottom: 0; } .deposit-first__modal-header{ justify-content: space-between; } .deposit-first__modal-header__title{ font-size: 16px; font-weight: 500; color: white; } .deposit-first__modal-body{ padding: 20px 26px 0; } .deposit-first__modal-footer{ padding-bottom: 26px; } .deposit-first__title{ font-weight: 700; font-size: 14px; color: white; } .deposit-first__body{ color: var(--color-grey); font-size: 14px; margin-bottom: 14px } .deposit-transfering__img{ width: 192px; } .deposit-transfering__desc{ color: var(--color-grey); font-size: 14px; font-weight: 400; margin-bottom: 20px; } .deposit-pg-title{ font-size: 14px; font-weight: 500; line-height: 17px; color: #fff; padding-bottom: 24px; } .sg-deposit-desc__wrapper p{ margin-bottom: 1rem; } @media (max-width: 768px){ .deposit-rule{ width: auto; } .deposit-preammount__group{ flex-direction: column; align-items: normal; margin-bottom: 17px; } .form-group-deposit-amount{ margin-bottom: 0; } .deposit-btn-submit{ font-size: 14px; font-weight: 700; padding: 12px 33px; } } .deposit-tab__wrapper { border-radius: 15px; padding: 20px; background: var(--color-primary-green); display: flex; gap: 20px; margin-bottom: 10px; overflow-x: auto; } .deposit-tab { border-radius: 15px; background: var(--color-grey-scondary); color: var(--color-grey); cursor: pointer; min-width: 136px; max-width: 140px; padding: 13px 0; font-weight: 500; font-size: 12px; transition: all 0.3s; display: flex; align-items: center; justify-content: center; position: relative; } .deposit-tab:hover { background-color: var(--color-primary); color: var(--color-grey-scondary); } .deposit-tab.selected { background-color: var(--color-primary); color: var(--color-grey-scondary); } .deposit-tab__container { display: flex; align-items: center; justify-content: center; } .deposit-tab__icon { filter: invert(78%) sepia(0%) saturate(3497%) hue-rotate(187deg) brightness(87%) contrast(108%); } .deposit-tab__name { width: 82px; text-align: center; } .deposit-banklist__wrapper { background: #18191A; padding: 18px 20px 18px; display: flex; gap: 20px; flex-wrap: wrap; border-radius: 15px; margin-bottom: 20px; } .deposit-banklist__tab { border-radius: 15px; background: #353537; font-weight: 500; font-size: 14px; color: var(--color-grey); text-align: center; min-width: 122px; padding: 11px 20px 10px 20px; cursor: pointer; white-space: nowrap; } .deposit-banklist__tab:hover { background-color: var(--color-primary); color: var(--color-grey-scondary); } .deposit-banklist__tab.selected { background-color: var(--color-primary); color: #2B2B2B; } .deposit-banklist__icon.on { display: none; } .deposit-banklist__icon.off { display: block; } .selected .deposit-banklist__icon.on { display: block; } .selected .deposit-banklist__icon.off { display: none; } .deposit-banklist-3__wrapper { padding: 0 20px; display: flex; -moz-column-gap: 20px; column-gap: 20px; row-gap: 10px; flex-wrap: wrap; margin-bottom: 27px; } .deposit-banklist-3__tab { border: 1px solid var(--color-grey-scondary); border-radius: 15px; background: var(--color-grey-scondary); text-align: center; font-weight: 500; font-size: 14px; color: var(--color-grey); cursor: pointer; min-width: 122px; min-height: 40px; display: flex; align-items: center; justify-content: center; padding: 0 12px; } .deposit-banklist-3__tab.selected { border-color: var(--color-primary); } .deposit-banklist-3__tab:hover { border-color: var(--color-primary); } .deposit-banklist__tab-tips { position: absolute; border-radius: 15px; padding: 15px; color: var(--color-grey); background: #343435; white-space: nowrap; top: 23px; left: 93px; z-index: 1; } .deposit-banklist__tab-tips__close { margin: 0 15px; cursor: pointer; } .deposit-tab__tips-wrapper { position: absolute; top: -25px; right: -32px; } .deposit-tab__tips { font-size: 12px; border-radius: 10px; background: #CC3633; padding: 3px 7px; color: white; display: inline; } .deposit-tab__tips-icon { width: 32px; position: relative; top: 5px; left: -10px; } @media (max-width: 768px) { .deposit-banklist__wrapper { flex-wrap: nowrap; padding-top: 16px; margin-bottom: 10px; overflow-x: auto; width: 100vw; padding: 18px 15px 18px; } .deposit-form-group .form-group { width: 100%; } .deposit-tab__wrapper { padding: 11px 16px; border-radius: 0; margin-bottom: 0; width: 100vw; } .deposit-banklist__tab-tips { padding: 10px; font-size: 14px; } .deposit-banklist__tab { padding: 8px 15px 10px 15px; font-size: 12px; } .deposit-banklist-3__tab { min-width: 100px; font-size: 12px; } .deposit-banklist-3__wrapper { padding: 0 15px; -moz-column-gap: 15px; column-gap: 15px; } } .deposit-source-tips-content { list-style: decimal; padding-left: 1rem; } .deposit-source-tips__wrapper { width: 400px; } @media (max-width: 768px) { .deposit-source-tips__wrapper { width: 100%; top: 2rem; transform: scale(1); } } .deposit-source-tips-content { list-style: decimal; padding-left: 1rem; } .deposit-source-tips__wrapper { width: 400px; } @media (max-width: 768px) { .deposit-source-tips__wrapper { width: 100%; top: 2rem; transform: scale(1); } } .deposit-source-tips-content { list-style: decimal; padding-left: 1rem; } .deposit-source-tips__wrapper { width: 400px; } @media (max-width: 768px) { .deposit-source-tips__wrapper { width: 100%; top: 2rem; transform: scale(1); } } .deposit-amount__selection-wrapper { display: flex; gap: 10px; position: relative; top: 4px; } .deposit-amount__selection-pill { border: 1px solid #289D82; border-radius: 15px; width: 82px; height: 40px; font-weight: 500; font-size: 14px; color: var(--color-grey); background: #272727; text-align: center; cursor: pointer; display: flex; align-items: center; justify-content: center; } .deposit-amount__selection-pill:hover { background: #289D82; color: #272727; } @media (max-width: 768px) { .deposit-amount__selection-pill { width: 18%; font-size: 12px; } .deposit-amount__selection-wrapper { gap: 7px; justify-content: space-between; gap: initial; flex-wrap: wrap; } } .deposit-amount__selection-wrapper { display: flex; gap: 10px; position: relative; top: 4px; } .deposit-amount__selection-pill { border: 1px solid #289D82; border-radius: 15px; width: 82px; height: 40px; font-weight: 500; font-size: 14px; color: var(--color-grey); background: #272727; text-align: center; cursor: pointer; display: flex; align-items: center; justify-content: center; } .deposit-amount__selection-pill:hover { background: #289D82; color: #272727; } @media (max-width: 768px) { .deposit-amount__selection-pill { width: 18%; font-size: 12px; } .deposit-amount__selection-wrapper { gap: 7px; justify-content: space-between; gap: initial; flex-wrap: wrap; } } .deposit-crypto-network__wrapper { display: flex; gap: 10px; margin-bottom: 30px; } .deposit-crypto-network__tab { border-radius: 15px; border: 1px solid var(--color-grey); display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 500; font-size: 14px; color: var(--color-grey); min-width: 82px; min-height: 40px; padding: 0 18px; } .deposit-crypto-network__tab.selected { border-color: var(--color-primary); } .deposit-crypto-network__tab:hover { border-color: var(--color-primary); } .withdraw-header{ display: flex; align-items: center; color: white; font-weight: 500; font-size: 20px; } .withdraw-alert{ width: 71px; height: 71px; -o-object-fit: contain; object-fit: contain; margin-right: 10px; } .withdraw-unlock-img{ width: 192px; height: 192px; -o-object-fit: contain; object-fit: contain; } .withdraw-verify__list-wrapper{ border-radius: 15px; overflow: hidden; display: inline-block; border: 1px solid #333435; } .withdraw-verify__list-header{ background: #333435; color: white; font-weight: 500; font-size: 14px; padding-top: 11px; padding-bottom: 12px; align-items: center; display: flex; } .withdraw-verify__list-body{ background: #272727; font-size: 14px; color: #B2B2B2; display: flex; padding: 9px 0 12px; } .withdraw-verify__list-status__wrapper{ display: flex; padding-right: 45px; } .withdraw-verify__list-body:nth-child(even){ background: #2D2E30; } .withdraw-verify__list-what{ padding-left: 45px; text-align: left; padding-right: 45px; min-width: 190px; } .withdraw-verify__list-status{ text-align: right; margin-right: 10px; min-width: 100px; } .withdraw-verify__list-icon{ width: 16px; height: 16px; } .widthdraw-table-right{ padding-right: 71px; text-align: right; } .widthdraw-table { border-collapse: separate; border-spacing: 0; min-width: 350px; } .widthdraw-table tr th, .widthdraw-table tr td { border-bottom: 1px solid #333435; padding: 5px; } .widthdraw-table tr td:last-child{ border-right: 1px solid #333435; } .widthdraw-table tr th:first-child, .widthdraw-table tr td:first-child { border-left: 1px solid #333435; } .widthdraw-table tr th { background: #333435; border-top: 1px solid #333435; color: white; font-size: 14px; padding: 11px 0 12px; } .widthdraw-table tr td { background: #272727; border-top: 1px solid #333435; font-size: 14px; padding: 9px 0 12px; color: #B2B2B2; } /* top-left border-radius */ .widthdraw-table tr:first-child th:first-child { border-top-left-radius: 15px; } /* top-right border-radius */ .widthdraw-table tr:first-child th:last-child { border-top-right-radius: 15px; } /* bottom-left border-radius */ .widthdraw-table tr:last-child td:first-child { border-bottom-left-radius: 15px; } /* bottom-right border-radius */ .widthdraw-table tr:last-child td:last-child { border-bottom-right-radius: 15px; } .withdraow-verify-fake__wrapper{ } .withdraow-verify-fake{ height: 40px; display: flex; align-items: center; padding: 0 20px; } .withdraw-verify-now{ color: var(--color-primary-green); font-weight: 500; font-size: 14px; cursor: pointer; } .withdraw-verify__list-fake__wrapper{ display: flex; } .withdraw-verify__unverified{ color: var(--color-danger); } .withdraw-verify__verified{ color: var(--color-primary-green); } .widthdraw-dropdown-select{ display: flex; justify-content: space-between; } .widthdraw-dropdown-select__span{ text-align: left; flex: 1; } .widthdraw-dropdown-select__span.span-2{ flex: 1.5; } .widthdraw-dropdown-select__span.span-3{ display: flex; align-items: center; font-weight: 500; flex: 0.8; } .withdraw-verified{ margin-right: 10px; } .withdraw-submit__wrapper{ padding-top: 10px; margin-bottom: 30px; } .withdraw-btn__option-wrapper{ display: flex; gap: 20px; margin-bottom: 20px; } .withdraw-btn__option{ background: var(--color-grey-scondary); width: 122px; font-size: 14px; font-weight: 500; padding: 10px; text-align: center; border: 1px solid var(--color-grey-scondary); border-radius: 15px; cursor: pointer; color: var(--color-grey) } .withdraw-btn__option.disabled{ background: #413f3f; color: #756c6c; cursor: not-allowed; } .withdraw-btn__option:hover{ background: var(--color-primary); color: var(--color-grey-scondary); } .withdraw-btn__option.disabled:hover{ background: #413f3f; color: #756c6c; } .withdraw-btn__option.active{ border-color: var(--color-primary); } .cryptoType{ font-size: 14px; font-weight: 500; line-height: 17px; color: #fff; width: 120px; display: inline-block; vertical-align: bottom; text-align: center; padding-bottom: 17px; cursor: pointer; padding-bottom: 15px; } .cryptoType.active{ border-bottom: 2px solid #fabb2e; } .cryptoTypeContainer{ padding-bottom: 32px; } .gasFee{ color: var(--color-primary); margin-top: 8px; font-size: 14px; } .currencyExchange{ padding-bottom: 10px; border-bottom: 1px solid #b2b2b2; margin-bottom: 20px; } .currencyExchange{ font-weight: 400; font-size: 14px; line-height: 17px; padding-bottom: 15px; } .currencyExchange .rate { margin-bottom: 5px; } .currencyExchange .title { color: var(--color-grey); margin-right: 15px; } .currencyExchange .value { color: var(--color-primary) } .refreshCurrencyBtn{ margin-left: 10px; } .withdraw-plus__wrapper{ display: flex; align-items: center; justify-content: space-between; } .withdraw-plus{ cursor: pointer; height: 50px; width: 50px; display: flex; justify-content: center; align-items: center; } .crypto-attention__container{ font-size: 14px; color: #B2B2B2; padding-left: 1rem; } .crypto-attention__wrapper{ margin-bottom: 40px; } .withdraw-table{ width: 500px; } .withdraw-info{ margin-top: 10px; } @media (max-width: 768px){ .withdraw-verify__list-wrapper{ width: 100%; } .withdraw-header{ flex-direction: column; } .withdraw-header__wrapper{ background: #272727; border-radius: 15px; padding: 15px; margin-bottom: 37px; } .withdraw-verify-tips{ text-align: center; font-weight: 500; font-size: 16px; } .withdraw-unlock-img__wrapper{ display: flex; justify-content: center; } .withdraow-verify-fake__wrapper{ flex-shrink: 0; display: none; } .withdraw-verify__list-status__wrapper { padding-right: 0; } .withdraw-verify__list-what { padding-left: 11px; display: flex; align-items: center; } .withdraow-verify-fake { height: 55px; } .withdraw-verify-now { width: 100px; text-align: right; } .withdraw-table{ width: 100%; } } .transfer-container{ display: flex; gap: 19px; } .transfer-left{ width: 596px !important; } .transfer-right{ width: 397px !important; padding: 10px !important; } .transfer-right{ flex: 1; } .form-group__side-input__text{ display: flex; flex-direction: column; justify-content: end; color: grey; font-size: 12px; margin-left: 10px; } .myTransferContainer{ font-size: 0; } .myTransferContainer>div { display: inline-block; vertical-align: top; width: calc(50% - 16px); } .myTransferContainer>div:nth-child(2n) { margin-right: 0 } .myTransferContainer .walletBalance { border-radius: 8px; padding: 24px 16px; box-sizing: border-box; padding-top: 10px; } .myTransferContainer .walletBalance .header { text-align: center; background-color: #353537; border-radius: 15px; display: flex; flex-direction: column; padding: 15px; } .myTransferContainer .walletBalance .header .walletTitle { font-size: 12px; font-weight: 400; line-height: 14px; color: #fff; padding-bottom: 16px } .myTransferContainer .walletBalance .header .mainWalletBalance { color: #fff; } .myTransferContainer .walletBalance .header .mainWalletBalance>* { vertical-align: middle } .myTransferContainer .walletBalance .header .mainWalletBalance .currency { font-size: 20px; font-weight: 400; line-height: 14px; padding-right: 4px } .myTransferContainer .walletBalance .header .mainWalletBalance .amount { font-size: 20px; font-weight: 700; line-height: 24px } .myTransferContainer .walletBalance .content { padding: 16px 15px; } .myTransferContainer .walletBalance .content .wallet>.walletName,.myTransferContainer .walletBalance .content .wallet>.details { display: inline-block; vertical-align: middle } .myTransferContainer .walletBalance .content .wallet .walletName { font-size: 14px; line-height: 16px; width: 120px; color: var(--color-grey); } .myTransferContainer .walletBalance .content .wallet{ margin-bottom: 1rem } .myTransferContainer .walletBalance .content .wallet .walletName span { width: 18px; display: inline-block; line-height: 18px; text-align: center; cursor: pointer } .myTransferContainer .transfer-wrapper { background: #202020; border-radius: 15px; padding: 0 15px; } .myTransferContainer .walletBalance .content .wallet .details { width: calc(100% - 120px - 8px); margin-left: 8px; text-align: right; font-size: 0 } .myTransferContainer .walletBalance .content .wallet .details>* { display: inline-block; vertical-align: middle } .myTransferContainer .walletBalance .content .wallet .details .balance { font-size: 14px; line-height: 36px; color: var(--color-grey); padding-right: 24px } .myTransferContainer .walletBalance .content .wallet .details .out { font-size: 12px; line-height: 36px; color: #fabb2e; padding-right: 13px; cursor: pointer; display: inline-block } .myTransferContainer .walletBalance .content .wallet .details .in { font-size: 12px; line-height: 20px; color: #fff; background-color: #289d82; border-radius: 15px; cursor: pointer; padding: 0 12px; display: inline-block; } .myTransferContainer .walletBalance .content .wallet .mainWalletInternal { height: auto; padding-left: 24px; overflow: hidden; max-height: 0; transition: all 1s } .myTransferContainer .walletBalance .content .wallet .mainWalletInternal.open { max-height: 1250px } .myTransferContainer .walletBalance .content .wallet .mainWalletInternal p { font-size: 14px; line-height: 36px; width: 120px; color: #fff } .myTransferContainer .walletBalance .totalBanlance { font-size: 0; padding: 25px 15px; background-color: #353537; border-radius: 15px; margin-bottom: 20px; } .myTransferContainer .walletBalance .totalBanlance>* { display: inline-block; width: 50% } .myTransferContainer .walletBalance .totalBanlance .total { font-size: 14px; font-weight: 400; line-height: 19px; color: #fff } .myTransferContainer .walletBalance .totalBanlance .balance { font-size: 14px; font-weight: 500; line-height: 17px; color: #fff; text-align: right } .myTransferContainer .walletBalance .transferAllBalanceToMain { margin: 0; font-size: 14px; font-weight: 700; line-height: 20px; padding: 12px 16px; border-radius: 3px; cursor: pointer; margin: auto; background-color: var(--color-primary-green); color: white; width: 100%; text-align: center; border-radius: 15px; } @media (max-width: 768px){ .myTransferContainer { width:100%; } .transfer-left{ width: 100% !important; } .transfer-right{ display:none !important; } .form-group__side-input-wrapper{ flex-direction: column; } .form-group__side-input__text{ flex-direction: row; justify-content: space-between; color: white; padding: 10px 15px; margin-left:0; } .maxbutton{ color: var(--color-primary) } .transfer-submit__btn{ width: 100%; } .form-control-select { padding: 10px; line-height: 25px; } } .mybank-verify-now{ color: var(--color-primary-green); font-weight: 500; font-size: 14px; cursor: pointer; } .my-bank-action{ font-weight: 500; font-size: 14px; color: white; } .my-bank__verfied{ color: var(--color-primary-green); margin-right: 13px; } .mybank-wrapper{ margin-bottom: 50px } .withdrawNetwork{ border: 1px solid var(--color-grey); display: inline-block; padding: 8px; border-radius: 10px; font-size: 14px; cursor: pointer; } .withdrawNetwork.selected{ border-color: var(--color-primary-green) } .crypto-next{ width: 70%; margin: 0 auto; } .cryto-add-modal{ width: 550px; } .cryto-add-table{ margin-bottom: 30px } .cryto-add-title{ font-size: 16px; font-weight: 500; color: white; margin-bottom: 10px } .cryto-add__footer{ display: flex; align-items: center; } .cryto-add__back{ width: 50%; text-align: center; padding: 10px; cursor: pointer; } .cryto-add__submit{ width: 50%; } .verifyTypeContainer{ display: flex; margin-bottom: 20px; align-items: center; } .sendVerifyOTP{ position: absolute; top: 18px; right: 20px; color: var(--color-primary-green); cursor: pointer } .address_error_msg{ color: var(--color-primary-red); margin-top: 13px; font-size: 12px; } .verifyType{ display: flex; align-items: center; padding: 5px 10px; color: white; border-radius: 8px; gap: 10px; margin-right: 10px; cursor: pointer; } .verifyTypes{ display: flex; align-items: center; background: none; } .verifyTypes.active{ background-color: #333333 !important; color: white !important; } .verifyTypes:hover{ background: #333333 !important; color: white !important; } .verifyTypeContent{ position: relative; margin-bottom: 40px; } .bulletWrapper{ padding-top: 46px; text-align: center; } .bulletWrapper .bullet { display: inline-block; vertical-align: middle; width: 16px; height: 16px; background: #289d82; opacity: .5; border-radius: 50%; margin: 0 8px; } .bulletWrapper .bullet.active { opacity: 1; } .tableBody{ border-radius: 8px; overflow: hidden; border: 1px solid #333; } .tableRow-1{ width: 50%; } .tableRow{ display: flex; padding: 10px; } .tableRow:nth-child(odd){ background: #333333; } .bank-table__acc{ width: 320px } .bank-table__acc{ width: 320px } @media (max-width: 768px){ } /*# sourceMappingURL=5R3RSimCca92BrJGjSor2tBMphcz9J9aEcAXJChAmvgVmmDfFiMGUuzM9BRMapgSLx.css.map */