.star4 .divide-x-0 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(0px * var(--tw-divide-x-reverse)); border-left-width: calc(0px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .divide-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(2px * var(--tw-divide-x-reverse)); border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .divide-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(4px * var(--tw-divide-x-reverse)); border-left-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .divide-x-8 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(8px * var(--tw-divide-x-reverse)); border-left-width: calc(8px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .divide-x > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(1px * var(--tw-divide-x-reverse)); border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .divide-x-reverse > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 1; } .star4 .list-circle { list-style-type: circle; } .star4 .list-square { list-style-type: square; } .star4 .list-lower-alpha { list-style-type: lower-alpha; } .star4 .list-upper-alpha { list-style-type: upper-alpha; } .star4 .list-lower-roman { list-style-type: lower-roman; } .star4 .list-upper-roman { list-style-type: upper-roman; } .star4 .list-inside { list-style-position: inside !important; } .star4 .list-outside { list-style-position: outside !important; } .star4 .table-zebra-fill tbody tr:nth-child(odd) { background-color: #f1f1f1; } .star4 .underline { text-decoration: underline; } .star4 .line-through { text-decoration: line-through; } .star4 .no-underline { text-decoration: none; } .star4 .scrollbar-hide { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .star4 .scrollbar-hide::-webkit-scrollbar { display: none; /* Chrome, Safari and Opera */ } .star4 .w-1\/5 { width: 20%; } .star4 .w-48 { width: 12rem; } /* ADD - Virtual Games Widget - 20240606 START */ #virtual-custom-link .prepend-new-badge li .s-list-item__title:before { content: "NEW"; background-color: #E24F4F; font-size: 10px; font-weight: 600; padding: 2px 4px; margin-right: 8px; align-self: flex-start; } .prepend-new-badge:hover li .s-list-item__title:before { color: #FFFFFF; } html:lang(zh-cn) #virtual-custom-link .prepend-new-badge li .s-list-item__title:before { content: "NEW"; } html:lang(vi-vn) #virtual-custom-link .prepend-new-badge li .s-list-item__title:before { content: "MỚI"; } html:lang(km-kh) #virtual-custom-link .prepend-new-badge li .s-list-item__title:before { content: "ថ្មី"; } html:lang(id-id) #virtual-custom-link .prepend-new-badge li .s-list-item__title:before { content: "BARU"; } html:lang(ko-kr) #virtual-custom-link .prepend-new-badge li .s-list-item__title:before { content: "NEW"; } html:lang(ja-jp) #virtual-custom-link .prepend-new-badge li .s-list-item__title:before { content: "NEW"; } html:lang(th-th) #virtual-custom-link .prepend-new-badge li .s-list-item__title:before { content: "NEW"; } /* ADD - Virtual Games Widget - 20240606 END */ /* ADD - Virtual Games Widget - HOT LABEL - 20240828 START */ #virtual-custom-link .prepend-hot-badge li .s-list-item__title:before { content: "HOT"; background-color: #E24F4F; font-size: 10px; font-weight: 600; padding: 2px 4px; margin-right: 8px; align-self: flex-start; } /* /////////////////////////////////////////////////// */ .prepend-hot-badge:hover li .s-list-item__title:before { color: #FFFFFF; } /* /////////////////////////////////////////////////// */ html:lang(zh-cn) #virtual-custom-link .prepend-hot-badge li .s-list-item__title:before { content: "热门"; } html:lang(vi-vn) #virtual-custom-link .prepend-hot-badge li .s-list-item__title:before { content: "HOT"; } html:lang(km-kh) #virtual-custom-link .prepend-hot-badge li .s-list-item__title:before { content: "ថ្មី"; } html:lang(id-id) #virtual-custom-link .prepend-hot-badge li .s-list-item__title:before { content: "HOT"; } html:lang(ko-kr) #virtual-custom-link .prepend-hot-badge li .s-list-item__title:before { content: "인기"; } html:lang(ja-jp) #virtual-custom-link .prepend-hot-badge li .s-list-item__title:before { content: "HOT"; } html:lang(th-th) #virtual-custom-link .prepend-hot-badge li .s-list-item__title:before { content: "HOT"; } /* ADD - Virtual Games Widget - HOT LABEL - 20240828 END */ /* ADD - Marque animation - 20241025 Start */ .star4 .apd-marquee-main { overflow: hidden; position: relative; } .star4 .apd-marquee-main .apd-marquee .s-card { animation: marquee 45s linear infinite alternate; } .star4 .apd-marquee-main .apd-marquee-reverse .s-card { animation: marquee-reverse 45s linear infinite alternate; transform: translateX(-800px); } @keyframes marquee { 0% { left: 0; } 100% { left: -800px; } } @keyframes marquee-reverse { 0% { right: 0; } 100% { right: -800px; } } /* ADD - Marque animation - 20241025 End */ /* SNOW FLAKES */ /* Ian Snowflake Test */ .star4-snow-container { position: relative; height: 100vh; overflow: hidden; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; /* Let Snowflake doesn't affect the mouse event */ z-index: 9999; /* Make sure the container is at the top level */ } .star4-snowflake { position: absolute; color: #fff; font-size: 1.5em; width: 24px; height: 24px; pointer-events: none; /* Let Snowflake doesn't affect the mouse event */ z-index: 9999; /* Make sure that snowflakes are at the top */ } .star4-snowflake::before { content: '❆'; position: absolute; color: rgba(255, 255, 255, 0.9); text-shadow: 0 0 5px rgba(255, 255, 255, 0.8); font-size: 28px; } @keyframes fall { 0% { transform: translateY(-10vh) translateX(0) rotate(0deg); } 25% { transform: translateY(25vh) translateX(15px) rotate(90deg); } 50% { transform: translateY(50vh) translateX(-15px) rotate(180deg); } 75% { transform: translateY(75vh) translateX(15px) rotate(270deg); } 100% { transform: translateY(100vh) translateX(0) rotate(360deg); } } .star4-snowflake:nth-child(1) { left: 10%; animation: fall 8s linear infinite; animation-delay: -2s; } .star4-snowflake:nth-child(2) { left: 20%; animation: fall 6s linear infinite; animation-delay: -4s; } .star4-snowflake:nth-child(3) { left: 30%; animation: fall 7s linear infinite; animation-delay: -7s; } .star4-snowflake:nth-child(4) { left: 40%; animation: fall 9s linear infinite; animation-delay: -1s; } .star4-snowflake:nth-child(5) { left: 50%; animation: fall 8s linear infinite; animation-delay: -3s; } .star4-snowflake:nth-child(6) { left: 60%; animation: fall 10s linear infinite; animation-delay: -5s; } .star4-snowflake:nth-child(7) { left: 70%; animation: fall 7s linear infinite; animation-delay: -6s; } .star4-snowflake:nth-child(8) { left: 80%; animation: fall 9s linear infinite; animation-delay: -8s; } .star4-snowflake:nth-child(9) { left: 90%; animation: fall 6s linear infinite; animation-delay: -9s; } .star4-snowflake:nth-child(10) { left: 95%; animation: fall 8s linear infinite; animation-delay: -4s; } .star4-snowflake:nth-child(2n)::before { content: '❅'; color: rgba(255, 255, 255, 0.85); } .star4-snowflake:nth-child(3n)::before { content: '❄'; color: rgba(255, 255, 255, 0.95); } .star4-snowflake:nth-child(4n)::before { content: '✻'; color: rgba(255, 255, 255, 0.8); } /* ======== SONGKRAN 2025 Theme CSS overrides START ======== */ .custom-dark { background-repeat: repeat-y; background-size: 100vw; } /* Exempt Virtual */ .custom-dark:has(.virtual-page) { --bg-image: url(https://doc.188contents.com/star4-content/images/themes/default-dark/bg-default-dark.webp?v=) !important; --bg-container-image: url(https://doc.188contents.com/star4-content/images/themes/default-dark/bg-container-default-dark.webp?v=) !important; } /* Exempt Virtual */ .custom-dark:has(.China) { --bg-image: url(https://doc.188contents.com/star4-content/images/themes/custom-dark/bg-solid-dark.webp?v=) !important; --bg-container-image: url(https://doc.188contents.com/star4-content/images/themes/custom-dark/bg-solid-dark.webp?v=) !important; } /* Theme - Widget control Start*/ /* Widgets BG replacements */ .custom-dark:has(.Thailand) { &.bg-surface-dark--darken-2 { .bg-\[\#111111\], .home .winners-annc-list .dark\:bg-\[\#111111\], .home .cw-feature-products, .home .s-odds-feed-widget .dark\:bg-\[\#111111\], .home .news-list, .esports-page .news-list, .casino-page .news-list, .live-casino-page .news-list, .chess-page .news-list, .lotto-page .news-list, .virtual-page .news-list, .product-widget-page .news-list, .esports-page .winners-annc-list .dark\:bg-\[\#111111\], .esports-page .s-odds-feed-widget .dark\:bg-\[\#111111\], .casino-page .winners-annc-list .dark\:bg-\[\#111111\], .casino-page .s-odds-feed-widget .dark\:bg-\[\#111111\], .live-casino-page .winners-annc-list .dark\:bg-\[\#111111\], .live-casino-page .s-odds-feed-widget .dark\:bg-\[\#111111\], .chess-page .winners-annc-list .dark\:bg-\[\#111111\], .chess-page .s-odds-feed-widget .dark\:bg-\[\#111111\], .lotto-page .winners-annc-list .dark\:bg-\[\#111111\], .lotto-page .s-odds-feed-widget .dark\:bg-\[\#111111\], .virtual-page .winners-annc-list .dark\:bg-\[\#111111\], .virtual-page .s-odds-feed-widget .dark\:bg-\[\#111111\], .product-widget-page .winners-annc-list .dark\:bg-\[\#111111\], .product-widget-page .s-odds-feed-widget .dark\:bg-\[\#111111\], .home .widget-game-list.bg-\[\#111111\], .esports-page .widget-game-list.bg-\[\#111111\], .casino-page .widget-game-list.bg-\[\#111111\], .live-casino-page .widget-game-list.bg-\[\#111111\], .chess-page .widget-game-list.bg-\[\#111111\], .lotto-page .widget-game-list.bg-\[\#111111\], .virtual-page .widget-game-list.bg-\[\#111111\], .product-widget-page .widget-game-list.bg-\[\#111111\], .home .widget-game-list .dark\:bg-\[\#111111\], .esports-page .widget-game-list .dark\:bg-\[\#111111\], .casino-page .widget-game-list .dark\:bg-\[\#111111\], .live-casino-page .widget-game-list .dark\:bg-\[\#111111\], .chess-page .widget-game-list .dark\:bg-\[\#111111\], .lotto-page .widget-game-list .dark\:bg-\[\#111111\], .virtual-page .widget-game-list .dark\:bg-\[\#111111\], .product-widget-page .widget-game-list .dark\:bg-\[\#111111\] { --tw-bg-opacity: 1; background-image: none; /*change if you want it to use the bg-container image*/ background-color: rgba(0, 0, 0, 0.32); } } } /* only for regions who use logo only*/ .custom-dark:has(.China) { &.bg-surface-dark--darken-2 { .bg-\[\#111111\], .home .winners-annc-list .dark\:bg-\[\#111111\], .home .cw-feature-products, .home .s-odds-feed-widget .dark\:bg-\[\#111111\], .home .news-list, .esports-page .news-list, .casino-page .news-list, .live-casino-page .news-list, .chess-page .news-list, .lotto-page .news-list, .virtual-page .news-list, .product-widget-page .news-list, .esports-page .winners-annc-list .dark\:bg-\[\#111111\], .esports-page .s-odds-feed-widget .dark\:bg-\[\#111111\], .casino-page .winners-annc-list .dark\:bg-\[\#111111\], .casino-page .s-odds-feed-widget .dark\:bg-\[\#111111\], .live-casino-page .winners-annc-list .dark\:bg-\[\#111111\], .live-casino-page .s-odds-feed-widget .dark\:bg-\[\#111111\], .chess-page .winners-annc-list .dark\:bg-\[\#111111\], .chess-page .s-odds-feed-widget .dark\:bg-\[\#111111\], .lotto-page .winners-annc-list .dark\:bg-\[\#111111\], .lotto-page .s-odds-feed-widget .dark\:bg-\[\#111111\], .virtual-page .winners-annc-list .dark\:bg-\[\#111111\], .virtual-page .s-odds-feed-widget .dark\:bg-\[\#111111\], .product-widget-page .winners-annc-list .dark\:bg-\[\#111111\], .product-widget-page .s-odds-feed-widget .dark\:bg-\[\#111111\], .home .widget-game-list.bg-\[\#111111\], .esports-page .widget-game-list.bg-\[\#111111\], .casino-page .widget-game-list.bg-\[\#111111\], .live-casino-page .widget-game-list.bg-\[\#111111\], .chess-page .widget-game-list.bg-\[\#111111\], .lotto-page .widget-game-list.bg-\[\#111111\], .virtual-page .widget-game-list.bg-\[\#111111\], .product-widget-page .widget-game-list.bg-\[\#111111\], .home .widget-game-list .dark\:bg-\[\#111111\], .esports-page .widget-game-list .dark\:bg-\[\#111111\], .casino-page .widget-game-list .dark\:bg-\[\#111111\], .live-casino-page .widget-game-list .dark\:bg-\[\#111111\], .chess-page .widget-game-list .dark\:bg-\[\#111111\], .lotto-page .widget-game-list .dark\:bg-\[\#111111\], .virtual-page .widget-game-list .dark\:bg-\[\#111111\], .product-widget-page .widget-game-list .dark\:bg-\[\#111111\] { --tw-bg-opacity: 1; background-image: none; /*change if you want it to use the bg-container image*/ background-color: rgb(17 17 17 / var(--tw-bg-opacity)); } } } /* News list items */ .custom-dark:has(.Thailand) { &.bg-surface-dark--darken-2 { .home .news-list-widget, .home .news-list-widget .dark\:bg-\[\#111111\], .home .news-list .s-widget-title { background-image: none; /*change if you want it to use the bg-container image*/ background-color: transparent; /* if has opacity with the main bg widget, they will add up and appear thicker */ } } } /* Widget Button Colors */ .custom-dark { &.bg-surface-dark--darken-2 { .home .s-odds-feed-widget .text-button, .home .popular-jackpot .text-button, .home .trending-games .text-button, .home .news-list .text-button { background-color: rgba(0, 0, 0, .2); } } } /* Theme - Widget control End*/ /* ===== Maintain orange Button ===== */ .custom-dark { &.bg-surface-dark--darken-2 { .home .bg-primary--darken-5:is(button), .home .bg-primary--darken-5:-webkit-any(button), .esports-page .bg-primary--darken-5:is(button), .esports-page .bg-primary--darken-5:-webkit-any(button), .casino-page .bg-primary--darken-5:is(button), .casino-page .bg-primary--darken-5:-webkit-any(button), .live-casino-page .bg-primary--darken-5:is(button), .live-casino-page .bg-primary--darken-5:-webkit-any(button), .chess-page .bg-primary--darken-5:is(button), .chess-page .bg-primary--darken-5:-webkit-any(button), .lotto-page .bg-primary--darken-5:is(button), .lotto-page .bg-primary--darken-5:-webkit-any(button), .virtual-page .bg-primary--darken-5:is(button), .virtual-page .bg-primary--darken-5:-webkit-any(button), .cock-fighting-page .bg-primary--darken-5:is(button), .cock-fighting-page .bg-primary--darken-5:-webkit-any(button), .product-widget-page .bg-primary--darken-5:is(button), .product-widget-page .bg-primary--darken-5:-webkit-any(button) { --tw-bg-opacity: 1; background-color: rgb(255 114 0 / var(--tw-bg-opacity)); } } } /* BG Darken change color - affects search bars and tabs in the product tabs */ .custom-dark { &.bg-surface-dark--darken-2 { .home .s-tabs.bg-surface-dark--darken-2, .esports-page .s-tabs.bg-surface-dark--darken-2, .casino-page .s-tabs.bg-surface-dark--darken-2, .live-casino-page .s-tabs.bg-surface-dark--darken-2, .chess-page .s-tabs.bg-surface-dark--darken-2, .lotto-page .s-tabs.bg-surface-dark--darken-2, .virtual-page .s-tabs.bg-surface-dark--darken-2, .product-widget-page .s-tabs.bg-surface-dark--darken-2, .home .s-media-list.bg-surface-dark--darken-2, .esports-page .s-media-list.bg-surface-dark--darken-2, .casino-page .s-media-list.bg-surface-dark--darken-2, .live-casino-page .s-media-list.bg-surface-dark--darken-2, .chess-page .s-media-list.bg-surface-dark--darken-2, .lotto-page .s-media-list.bg-surface-dark--darken-2, .virtual-page .s-media-list.bg-surface-dark--darken-2, .product-widget-page .s-media-list.bg-surface-dark--darken-2 { /* This is the default setting */ /* background-image: var(--bg-container-image); */ background-image: none; background-color: rgba(0,0,0,.25); } } } /* Darken every text except Hero banner*/ .custom-dark:has(.Thailand) { .casino-page, .live-casino-page, .chess-page, .lotto-page { .text-light--high:not(button):not(.jackpot-amount-shadow):not(.s-game-icon-img--content):not(.carousel-widget) { color: rgba(0, 0, 0, 1); } .apd-lotto-icon-bg .text-light--high:not(button):not(.jackpot-amount-shadow):not(.s-game-icon-img--content):not(.carousel-widget) { color: rgba(255, 255, 255, 1); } .trending-games .text-light--high:not(button):not(.jackpot-amount-shadow):not(.s-game-icon-img--content):not(.carousel-widget) { color: rgba(255, 255, 255, 1); } .new-games .text-light--high:not(button):not(.jackpot-amount-shadow):not(.s-game-icon-img--content):not(.carousel-widget) { color: rgba(255, 255, 255, 1); } .custom-games .text-light--high:not(button):not(.jackpot-amount-shadow):not(.s-game-icon-img--content):not(.carousel-widget) { color: rgba(255, 255, 255, 1); } .popular-jackpot .text-light--high:not(button):not(.jackpot-amount-shadow):not(.s-game-icon-img--content):not(.carousel-widget) { color: rgba(255, 255, 255, 1); } .text-light--medium:not(button) { color: rgba(0, 0, 0, 0.6); } .s-widget-title .\!text-light--high { color: rgba(0, 0, 0, 1); } .trending-games .text-light--medium:not(button) { color: rgba(255, 255, 255, 1); } .new-games .text-light--medium:not(button) { color: rgba(255, 255, 255, 1); } .custom-games .text-light--medium:not(button) { color: rgba(255, 255, 255, 1); } .apd-lotto-icon-bg .text-light--medium:not(button) { color: rgba(255, 255, 255, 1); } .text-light--disabled:not(button) { color: rgba(0, 0, 0, 0.16); } .carousel-widget { .text-light--high:not(button) { color: rgba(255, 255, 255, 1) !important; } .text-h5:not(button) { color: rgba(255, 255, 255, 1) !important; } .text-light--medium:not(button) { color: rgba(255, 255, 255, 0.6); } .text-light--disabled:not(button) { color: rgba(255, 255, 255, 0.16); } } } } /* Catalog title change color */ .custom-dark:has(.Thailand) { &.bg-surface-dark--darken-2 { .home .PopularJackpot .popular-jackpot .widget-slide-list--title .dark\:text-light--medium, .home .news-list .dark\:text-light--disabled, .home .popular-jackpot .s-catalog-item .text-light--medium, .casino-page .casino-tabs .text-light--medium, .casino-page .s-slide-catalog-item .text-light--medium, .casino-page .custom-games .s-widget-title .dark\:text-light--medium, .casino-page .new-games .s-widget-title .dark\:text-light--medium, .casino-page .trending-games .s-widget-title .dark\:text-light--medium, .casino-page .popular-table-games .s-widget-title .dark\:text-light--medium, .casino-page .popular-jackpot .s-widget-title .dark\:text-light--medium, .live-casino-page .trending-games .s-widget-title .dark\:text-light--medium, .live-casino-page .popular-table-games .s-widget-title .dark\:text-light--medium, .live-casino-page .popular-jackpot .s-widget-title .dark\:text-light--medium, .live-casino-page .live-casino-tabs .text-light--medium, .live-casino-page .s-slide-catalog-item .text-light--medium, .lotto-page .trending-games .s-widget-title .dark\:text-light--medium, .lotto-page .popular-table-games .s-widget-title .dark\:text-light--medium, .lotto-page .popular-jackpot .s-widget-title .dark\:text-light--medium, .lotto-page .live-casino-tabs .text-light--medium, .lotto-page .s-slide-catalog-item .text-light--medium, .chess-page .trending-games .s-widget-title .dark\:text-light--medium, .chess-page .popular-table-games .s-widget-title .dark\:text-light--medium, .chess-page .popular-jackpot .s-widget-title .dark\:text-light--medium, .chess-page .live-casino-tabs .text-light--medium, .chess-page .s-slide-catalog-item .text-light--medium, .chess-page .chess-tabs .text-light--medium, .chess-page .s-slide-catalog-item .text-light--medium, .lotto-page .s-catalog-item .text-light--medium, { /* color: rgba(0,0,0,.6); */ color: white; } } } /* Catalog Item add background */ .custom-dark:has(.Thailand) { &.bg-surface-dark--darken-2 { .casino-page .trending-games, .casino-page .new-games, .casino-page .custom-games, .live-casino-page .trending-games, .live-casino-page .new-games, .live-casino-page .custom-games, .chess-page .trending-games, .chess-page .new-games, .chess-page .custom-games, .casino-page .popular-jackpot { background-color: rgba(0, 0, 0, .35); padding: 1.2rem; overflow: hidden; border-radius: .35rem; margin-bottom: 1rem; } } } /* Lotto S-Cards */ .custom-dark:has(.Thailand) { &.bg-surface-dark--darken-2 { .lotto-page .apd-lotto-icon-bg { background-color: rgba(0, 0, 0, .35); padding: 1.2rem; overflow: hidden; border-radius: .35rem; margin-bottom: 1rem; } } } /* Maintenance Icon */ .custom-dark:has(.Thailand) { &.bg-surface-dark--darken-2 { .chess-page .text-light--disabled.icon-wrench-filled, .casino-page .text-light--disabled.icon-wrench-filled, .live-casino-page .text-light--disabled.icon-wrench-filled, .lotto-page .text-light--disabled.icon-wrench-filled { color: rgba(0,0,0,.3); } } } /* Carousel Swiper Button*/ .custom-dark:has(.Thailand) { &.bg-surface-dark--darken-2 { .s-hero-carousel .swiper-button-prev, .s-hero-carousel .swiper-button-next { color: rgba(0, 0, 0, 0.6); } } } /* Change Border Color */ .custom-dark:has(.Thailand) { &.bg-surface-dark--darken-2 { .casino-page .slide-providers .border-white\/\[\.08\], .live-casino-page .slide-providers .border-white\/\[\.08\], .chess-page .slide-providers .border-white\/\[\.08\], .lotto-page .border-white\/\[\.08\], .lotto-page .s-media-list-item .border-white\/\[\.08\] { border-color: rgba(0, 0, 0, .08); } } } /* Game Provider Widget */ .custom-dark:has(.Thailand) { &.bg-surface-dark--darken-2 { .casino-page .slide-providers .provider-list .bg-surface-dark--darken-2, .live-casino-page .slide-providers .provider-list .bg-surface-dark--darken-2, .chess-page .slide-providers .provider-list .bg-surface-dark--darken-2 { background-image: none !important; border-color: rgba(0, 0, 0, .08); background-color: rgba(0,0,0,.35); backdrop-filter: blur(2px); } } } /* GAME PROVIDER Title */ .custom-dark:has(.Thailand) { &.bg-surface-dark--darken-2 { .casino-page .slide-providers .provider-list .bg-surface-dark--darken-2 .\!text-light--high, .casino-page .slide-providers .provider-list .bg-surface-dark--darken-2 .text-light--medium, .live-casino-page .slide-providers .provider-list .bg-surface-dark--darken-2 .\!text-light--high, .live-casino-page .slide-providers .provider-list .bg-surface-dark--darken-2 .text-light--medium, .chess-page .slide-providers .provider-list .bg-surface-dark--darken-2 .\!text-light--high, .chess-page .slide-providers .provider-list .bg-surface-dark--darken-2 .text-light--medium { color: white; } } } /* Widget Dividers */ .custom-dark:has(.Thailand) { &.bg-surface-dark--darken-2 { .home .border-white\/\[\.08\]:is(hr), .casino-page .border-white\/\[\.08\]:is(hr), .live-casino-page .border-white\/\[\.08\]:is(hr), .chess-page .border-white\/\[\.08\]:is(hr) { border-color: white; } } } /* Change Overflow Menu Border Color - secondary - overflow menu */ .custom-dark:has(.Thailand) { &.bg-surface-dark--darken-2 { .casino-page .filter-dropdown .border-secondary--darken-4, .casino-page .filter-dropdown .border-secondary--darken-3, .live-casino-page .filter-dropdown .border-secondary--darken-4, .live-casino-page .filter-dropdown .border-secondary--darken-3 .chess-page .filter-dropdown .border-secondary--darken-4, .chess-page .filter-dropdown .border-secondary--darken-3 { border-color: rgba(0,0,0,.08); } } } /* Filter overflow menu */ .custom-dark:has(.Thailand) { &.bg-surface-dark--darken-2 { .casino-page .filter-dropdown .bg-neutral-800, .live-casino-page .filter-dropdown .bg-neutral-800, .chess-page .filter-dropdown .bg-neutral-800 { background-color: rgba(255, 255, 255, .9); backdrop-filter: blur(4px); background-image: none; color: black; box-shadow: 0px 8px 10px 1px rgba(0, 0, 0, 0.07), 0px 3px 14px 2px rgba(0, 0, 0, 0.06), 0px 5px 5px -3px rgba(0, 0, 0, 0.10); } } } .custom-dark:has(.China) { &.bg-surface-dark--darken-2 { .casino-page .product-content .game-collection-banner, .live-casino-page .product-content .game-collection-banner, .lotto-page .product-content .game-collection-banner { background-image: none; background-color: rgba(17, 17, 17, 1); } } } /* Banderitas*/ .custom-dark .banderitas { display:none; } /* ======== SONGKRAN 2025 Theme CSS overrides END ======== */ /* 20241217 - Android Hero Banner Placeholder Temp FiX Start*/ .star4 .s-media-banner--text:not([class*='bg-gradient']) { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGNgYGA4AwAA0QDNKwqDSQAAAABJRU5ErkJggg==); background-color: rgba(0, 0, 0, 0.8); / Modern browsers / } @supports (background-color: rgba(0,0,0,.8)){ .star4 .s-media-banner--text:not([class*='bg-gradient']) { background-image:none } } /* 20241217 - Android Hero Banner Placeholder Temp FiX End*/ /* Temporarily fix QT-63899 issue start */ .star4 .s-dropdown-menu .star4icons { vertical-align: middle; letter-spacing: 0; speak: never; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; justify-content: center; align-items: center; font-family: star4icons; font-size: 1.5rem; font-style: normal; font-weight: normal; line-height: 1; position: relative; } .star4 .s-dropdown-menu .star4icons:not(.hidden) { display: inline-flex; } .star4 .s-dropdown-menu .star4icons :before { font-size: inherit; line-height: inherit; display: inline-block; } /* Temporarily fix QT-63899 issue end */ /* XS */ @media (min-width: 0px) { .star4 .xs\:divide-x-0 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(0px * var(--tw-divide-x-reverse)); border-left-width: calc(0px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .xs\:divide-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(2px * var(--tw-divide-x-reverse)); border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .xs\:divide-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(4px * var(--tw-divide-x-reverse)); border-left-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .xs\:divide-x-8 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(8px * var(--tw-divide-x-reverse)); border-left-width: calc(8px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .xs\:divide-x > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(1px * var(--tw-divide-x-reverse)); border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .xs\:divide-x-reverse > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 1; } .star4 .xs\:list-inside { list-style-position: inside !important; } .star4 .xs\:list-outside { list-style-position: outside !important; } .star4 .xs\:mt-13 { margin-top: 3.25rem; } .star4 .xs\:w-48 { width: 12rem; } .star4 .xs\:w-1\/5 { width: 20%; } } /* sm */ @media (min-width: 600px) { .star4 .sm\:divide-x-0 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(0px * var(--tw-divide-x-reverse)); border-left-width: calc(0px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .sm\:divide-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(2px * var(--tw-divide-x-reverse)); border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .sm\:divide-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(4px * var(--tw-divide-x-reverse)); border-left-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .sm\:divide-x-8 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(8px * var(--tw-divide-x-reverse)); border-left-width: calc(8px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .sm\:divide-x > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(1px * var(--tw-divide-x-reverse)); border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .sm\:divide-x-reverse > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 1; } .star4 .sm\:list-inside { list-style-position: inside !important; } .star4 .sm\:list-outside { list-style-position: outside !important; } .star4 .sm\:mt-13 { margin-top: 3.25rem; } .star4 .sm\:w-48 { width: 12rem; } .star4 .sm\:w-1\/5 { width: 20%; } /* [Additional Attributes - 202401081225 START] */ .star4 .apd-sm\:justify-end { justify-content: end; } .star4 .apd-sm\:pt-8 { padding-top: 2rem; } /* [Additional Attributes - 202401081225 END] */ /* [ADD] 20240115 */ .star4 .sm\:apd-col-start-6 { grid-column-start: 6 !important; } /* [ADD] hide and show on SM */ .star4 .sm\:apd-hidden { display: none; } .star4 .sm\:apd-block { display: block !important; } /* [ADD] mobile height */ .sm\:apd-h-\[240px\] { height: 240px !important; } } /* md */ @media (min-width: 960px) { .star4 .md\:divide-x-0 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(0px * var(--tw-divide-x-reverse)); border-left-width: calc(0px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .md\:divide-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(2px * var(--tw-divide-x-reverse)); border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .md\:divide-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(4px * var(--tw-divide-x-reverse)); border-left-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .md\:divide-x-8 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(8px * var(--tw-divide-x-reverse)); border-left-width: calc(8px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .md\:divide-x > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(1px * var(--tw-divide-x-reverse)); border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .md\:divide-x-reverse > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 1; } .star4 .md\:list-inside { list-style-position: inside !important; } .star4 .md\:list-outside { list-style-position: outside !important; } .star4 .md\:mt-13 { margin-top: 3.25rem; } .star4 .md\:text-body-1 { font-size: 1rem; font-weight: 400; line-height: 1.5em; letter-spacing: 0em; } .star4 .md\:w-48 { width: 12rem; } .star4 .md\:w-1\/5 { width: 20%; } .star4 .md\:apd-h-\[5rem\] { height: 5rem; } .star4 .md\:apd-w-\[5rem\] { width: 5rem; } .star4 .md\:apd-w-\[4rem\] { width: 4rem; } .star4 .apd-md\:top-\[72px\] { top: 72px; } .star4 .md\:apd-text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .star4 .md\:apd-text-lg { font-size: 1.125rem; line-height: 1.75rem; } /* [ADD] 20240115 */ .star4 .md\:apd-w-\[372px\] { width: 372px; } .star4 .md\:apd-col-start-6 { grid-column-start: 6 !important; } /* [ADD] 20240117 */ .star4 .md\:apd-h-\[10rem\] { height: 10rem !important; } .star4 .md\:apd-h-\[262px\] { height: 262px; } .star4 .md\:apd-h-\[220px\] { height: 262px !important; } /* Virtual Page Side tab edits*/ /* .custom-dark { &.bg-surface-dark--darken-2 { .virtual-page .scrollbar-light .md\:hover\:dark\:bg-secondary--darken-5:hover, .virtual-page .scrollbar-light .md\:hover\:bg-primary--lighten-5:hover { background-color: rgba(143, 203, 240, .6) !important; [class*=" text-"] ,[class^='star4icons']:before{ color: black; } } } } */ /* SONGKRAN Theme */ /* Banderitas*/ .custom-dark .banderitas { background-image: url(https://doc-cdn.188bet.blue/star4-content/images/themes/custom-dark/banderitas.webp); background-size: 100vw; width: 100vw; position: absolute; top: 0; left: 0; background-repeat: no-repeat; min-height: 220px; z-index: 2; display: block; } } /* SONGKRAN Theme */ /* lg */ @media (min-width: 1264px) { .star4 .lg\:divide-x-0 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(0px * var(--tw-divide-x-reverse)); border-left-width: calc(0px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .lg\:divide-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(2px * var(--tw-divide-x-reverse)); border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .lg\:divide-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(4px * var(--tw-divide-x-reverse)); border-left-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .lg\:divide-x-8 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(8px * var(--tw-divide-x-reverse)); border-left-width: calc(8px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .lg\:divide-x > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(1px * var(--tw-divide-x-reverse)); border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .lg\:divide-x-reverse > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 1; } .star4 .lg\:list-inside { list-style-position: inside !important; } .star4 .lg\:list-outside { list-style-position: outside !important; } .star4 .lg\:mt-13 { margin-top: 3.25rem; } .star4 .lg\:w-48 { width: 12rem; } .star4 .lg\:w-1\/5 { width: 20%; } } /* xl */ @media (min-width: 1536px) { .star4 .xl\:divide-x-0 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(0px * var(--tw-divide-x-reverse)); border-left-width: calc(0px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .xl\:divide-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(2px * var(--tw-divide-x-reverse)); border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .xl\:divide-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(4px * var(--tw-divide-x-reverse)); border-left-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .xl\:divide-x-8 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(8px * var(--tw-divide-x-reverse)); border-left-width: calc(8px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .xl\:divide-x > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(1px * var(--tw-divide-x-reverse)); border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } .star4 .xl\:divide-x-reverse > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 1; } .star4 .xl\:list-inside { list-style-position: inside !important; } .star4 .xl\:list-outside { list-style-position: outside !important; } .star4 .xl\:mt-13 { margin-top: 3.25rem; } .star4 .xl\:w-48 { width: 12rem; } .star4 .xl\:w-1\/5 { width: 20%; } } /* [FIX] - TnC Promotitle scrollbar - 2022.09.15.1303 */ div.container > section.grid > div > h1 { min-height: 48px; } /* [ADD] - Overlay Banner #FFF gradient - 2023.01.17.1501 (updated - 2023.11.08.1132) */ .star4.text-content-gradient-light .apd-splash-gradient-light .s-media-banner-content--bg { --tw-gradient-from: rgb(255 255 255 / 0.95); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.8), var(--tw-gradient-to); --tw-gradient-to: rgb(255 255 255 / 0); } .star4.text-content-gradient-light [class$="apd-splash-btn-dark"] .icon-arrow-left, .star4.text-content-gradient-light [class$="apd-splash-btn-dark"] .icon-arrow-right { color: rgba(0, 0, 0, 0.6); } .star4.text-content-gradient-light [class$="apd-splash-btn-dark"] .on-media .chart-label { fill: rgba(0, 0, 0, 0.6); } .star4.text-content-gradient-light [class$="apd-splash-btn-dark"] .prev-slide, .star4.text-content-gradient-light [class$="apd-splash-btn-dark"] .next-slide { background-color: rgba(0, 0, 0, 0.04); } .star4.text-content-gradient-light [class$="apd-splash-btn-dark"] .prev-slide:hover, .star4.text-content-gradient-light [class$="apd-splash-btn-dark"] .next-slide:hover { background-color: rgba(0, 0, 0, 0.18); } /* [ADD] - Overlay Banner #000 gradient - 2023.10.26.1214 (updated - 2023.11.08.1132) */ .star4.text-content-gradient-light .apd-splash-gradient-dark .s-media-banner-content--bg { --tw-gradient-from: rgb(0 0 0 / 0.95); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.8), var(--tw-gradient-to); --tw-gradient-to: rgb(0 0 0 / 0); } .star4.text-content-gradient-light [class$="apd-splash-btn-light"] .icon-arrow-left, .star4.text-content-gradient-light [class$="apd-splash-btn-light"] .icon-arrow-right { color: rgba(255, 255, 255, 0.6); } .star4.text-content-gradient-light [class$="apd-splash-btn-light"] .on-media .chart-label { fill: rgba(255, 255, 255, 0.6); } .star4.text-content-gradient-light [class$="apd-splash-btn-light"] .prev-slide, .star4.text-content-gradient-light [class$="apd-splash-btn-light"] .next-slide { background-color: rgba(255, 255, 255, 0.04); } .star4.text-content-gradient-light [class$="apd-splash-btn-light"] .prev-slide:hover, .star4.text-content-gradient-light [class$="apd-splash-btn-light"] .next-slide:hover { background-color: rgba(255, 255, 255, 0.18); } /* [ADD] - TnC Format - 2023.02.02.1117 */ .star4 .tnc-content-format ol li { padding: 0.5rem; } .star4 .tnc-content-format table tr:first-child td, .star4 .tnc-content-format table tr:first-child th { font-weight: 600; font-size: 0.875rem; line-height: 1.25rem; } .star4 .tnc-content-format table tr td, .star4 .tnc-content-format table tr th { padding: 0.75rem; } /* [ADD] - PS Timeline Style - 2023.02.08.1746 */ .timeline { display: flex; flex-direction: row; justify-content: space-between; max-width: 80%; margin: 0 auto; text-align: center; border-top: 2px solid #ff9200; } .timeline .content p { margin: 0; padding: 0; } .timeline .timeline-container { display: flex; flex-direction: column; } .timeline .timeline-container .timeline-indicator { width: 10px; height: 10px; border-radius: 50%; background: #ff9200; margin: 0 auto; transform: translateY(-6px); } @media (max-width: 720px) { .timeline { flex-direction: column; border-top: none; border-left: 2px solid #ff9200; text-align: left; } .timeline .timeline-container { flex-direction: row; align-items: center; margin: 1rem 0; } .timeline .timeline-container .timeline-indicator { margin: 0 0; transform: translateX(-6px); margin-right: 1rem; } } /* [ADD] - Japanese TnC Table Mobile Responsive - 2023.05.02.1421 */ @media (max-width: 1024px) { .star4 .ja-jp .tnc-content-wrap .jp-tnc-table-responsive { min-width: 800px !important; } } /* [ADD] - padding to tnc mobile - 2024.06.24.1548 (PJ) */ @media (max-width: 1024px) { .star4 .tnc-content-wrap { padding-left: 1.5rem!important; padding-right: 1.5rem!important; } } /* [ADD] - height: 25rem 202310261131 */ .star4 .apd-h-\[25rem\] { height: 25rem; } /* [ADD] - 20240109 max-width 440px and width 440px */ .star4 .apd-max-w-\[27\.5rem\] { max-width: 440px; } .star4 .apd-w-\[27\.5rem\] { width: 440px; } /* [ADD] - 20240109 additional width, gradient from gray, breakpoint txt large */ .star4 .apd-h-\[12rem\] { height: 12rem; } .star4 .apd-from-dark-gray { --tw-gradient-from: rgb(8 8 8 / 0.95); } /* [ADD] - 20240110 additional padding option; 13rem height*/ .star4 .apd-pt-\[2\.25rem\] { padding-top: 2.25rem; } .star4 .apd-h-\[13rem\] { height: 13rem; } .star4 .apd-h-\[20rem\] { height: 20rem; } /* [ADD] - 20240112 Softer Via gradient */ .star4 .via-apd-black\/40  { --tw-gradient-stops: var(--tw-gradient-from),  rgb(0 0 0 / 0.4),  var(--tw-gradient-to) !important; } /* [ADD] - 20240115 */ .star4 .apd-col-start-4 { grid-column-start: 4; } /* [ADD] 20240117 */ .star4 .apd-h-\[16rem\] { height: 16rem; } .star4 .apd-h-\[300px\] { height: 300px; } .star4 .apd-h-\[278px\] { height: 278px; } /* [ADD] 20240126 Temporary Fix for height */ /* .custom-games .s-container { height: 100%; } */ /* [ADD] - TITLE BADGE 20240917 */ .star4 .title-badge { margin-right: .4rem; vertical-align: top; background-color: rgb(255, 0, 0); border-radius: 2px; font-size: 1rem; padding: 0.25rem 0.4rem; text-transform: uppercase; } /* MD */ @media (max-width: 960px) { .star4 .title-badge { margin-right: .4rem; vertical-align: top; background-color: rgb(255, 0, 0); border-radius: 2px; font-size: .75rem; padding: 0.125rem 0.25rem; text-transform: uppercase; } } /* [ADD] - TNC MULTIPLE GAMGES 20240925 */ .star4 .tnc-multiple-games .s-widget-title-text { color: black; text-align: center; } .star4 .tnc-multiple-games .s-widget-title button { display: none; } /* [ADD] - TNC MULTIPLE GAMGES 20240925 */ .star4 .tnc-multiple-games-big .s-widget-title-text { color: black; text-align: center; } .star4 .tnc-multiple-games-big .s-widget-title button { display: none; } .star4 .tnc-multiple-games-big .flex-\[0_0_5\.75rem\] { flex: 0 0 8.5rem; } @media (max-width: 960px) { .star4 .tnc-multiple-games-big .flex-\[0_0_5\.75rem\] { flex: 0 0 5.75rem; } .star4 .tnc-multiple-games-big .\!line-clamp-2 { line-clamp: 4 !important; -webkit-line-clamp: 4 !important; } }