@font-face {
                font-family: Open24DisplaySt;
                src: url(/css/Open24DisplaySt.woff2);
            }

            @font-face {
                font-family: Teko-SemiBold;
                src: url(/css/Teko-SemiBold.ttf);
            }

            @font-face {
                font-family: Poppins-Regular;
                src: url(/css/Poppins-Regular.ttf);
            }

            a {
                color: #fdf19b;
                text-decoration: none;
            }

            .announcement-container {
            gap: 10px !important;
            padding: 8px 15px !important;
            align-items: center !important;
            border-radius: 8px !important;
            }

            .announcement-container > [data-section="date"] {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
            color: #FFC107 !important;
            padding: 6px 16px !important;
            border-radius: 20px !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            letter-spacing: 0.5px !important;
            white-space: nowrap !important;
            border: 1px solid rgba(255, 193, 7, 0.4) !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
            display: flex !important;
            align-items: center !important;
            gap: 6px !important;
            min-width: auto !important;
            width: auto !important;
            position: relative !important;
            }

            /* Green dot indicator sebelum tanggal (live indicator) */
            .announcement-container > [data-section="date"]::before {
            content: '' !important;
            display: inline-block !important;
            width: 8px !important;
            height: 8px !important;
            border-radius: 50% !important;
            background: #4caf50 !important;
            box-shadow: 0 0 6px #4caf50, 0 0 12px rgba(76, 175, 80, 0.4) !important;
            animation: pulse-dot 2s ease-in-out infinite !important;
            margin-right: 2px !important;
            }
            body {
                margin: 0 auto;
                color: #fff;
                font-size: 14px !important;
            }

            .form-control {
                background-color: #fff;
                border-color: #707070;
                -moz-appearance: none;
                -webkit-appearance: none;
                color: #000;
            }

            .login-btn:hover {
                background-color: #5f5f5f !important;
                border-color: #5f5f5f !important;
            }

            .register-btn:hover {
                color: #fff !important;
                text-decoration: none;
            }

            .menu-opt {
                font-size: 12px;
                margin-left: 22px;
            }

            .menu-opt-active {
                color: #fdf19b !important;
                font-weight: bold;
            }

            .menu-opt a:hover {
                color: #ffffff !important;
                text-decoration: none;
            }

            .provider:hover {
                width: 100%;
                background-color: rgba(0, 211, 254, 0.5);
                border-radius: 6px;
            }

            @keyframes topbar-icon-bounce {

                0%,
                20%,
                40%,
                60%,
                80%,
                100% {
                    transform: translateY(0)
                }

                70% {
                    transform: translateY(-5px)
                }

                50% {
                    transform: translateY(-12px)
                }
            }

            .circular-menu__button {
                display: none;
            }

            .circular-menu__button:checked+.circular-menu__icon {
                transform: scale(1, 1) translate3d(0, 0, 0);
                transition-duration: 0.2s;
                transition-timing-function: linear;
            }

            .circular-menu__button:checked~.circular-menu__item {
                transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
            }

            .circular-menu__button:checked~.circular-menu__item:nth-of-type(1) {
                transition-duration: 0.18s;
                transform: translate3d(0px, -105px, 0);
            }

            .circular-menu__button:checked~.circular-menu__item:nth-of-type(2) {
                transition-duration: 0.28s;
                transform: translate3d(99.86093418px, -32.446784369999996px, 0);
            }

            .circular-menu__button:checked~.circular-menu__item:nth-of-type(3) {
                transition-duration: 0.38s;
                transform: translate3d(61.71745146px, 84.94678437px, 0);
            }

            .circular-menu__button:checked~.circular-menu__item:nth-of-type(4) {
                transition-duration: 0.48s;
                transform: translate3d(-61.71745146px, 84.94678437px, 0);
            }

            .circular-menu__button:checked~.circular-menu__item:nth-of-type(5) {
                transition-duration: 0.58s;
                transform: translate3d(-99.86093418px, -32.446784369999996px, 0);
            }

            .circular-menu__icon {
                /* background: linear-gradient(#5F70FB, #4E63FA); */
                border-radius: 100%;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
                height: 50px;
                line-height: 50px;
                margin-left: 10px;
                position: fixed;
                text-align: center;
                bottom: 150px;
                transform: translate3d(0, 0, 0);
                transition: transform ease-out 0.2s;
                width: 50px;
                cursor: pointer;
                transform: scale(1.1, 1.1) translate3d(0, 0, 0);
                transition-duration: 0.4s;
                transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
                z-index: 7;
            }

            .circular-menu__icon:hover {
                transform: scale(1.2, 1.2) translate3d(0, 0, 0);
            }

            .circular-menu__item {
                background-image: linear-gradient(#5F70FB, #4E63FA);
                border-radius: 100%;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
                color: #fff;
                height: 45px;
                line-height: 45px;
                margin-left: 10px;
                position: fixed;
                text-align: center;
                bottom: 160px;
                transform: translate3d(0, 0, 0);
                transition: transform ease-out 0.2s;
                width: 45px;
                z-index: 5;
            }

            .circular-menu__item:nth-of-type(1) {
                transition-duration: 0.18s;
            }

            .circular-menu__item:nth-of-type(2) {
                transition-duration: 0.18s;
            }

            .circular-menu__item:nth-of-type(3) {
                transition-duration: 0.18s;
            }

            .circular-menu__item:nth-of-type(4) {
                transition-duration: 0.18s;
            }

            .circular-menu__item:nth-of-type(5) {
                transition-duration: 0.18s;
            }

            .circular-menu__item:hover {
                color: #dc143c;
                background: #f08080;
            }

            .circular-menu__item:active,
            .circular-menu__item:focus {
                color: #8b0000;
            }

            /* ====== CYCLE SLIDESHOW / RESULT IMPROVEMENT ====== */
            .result-slide {
                display: grid !important;
                grid-template-columns: repeat(5, 1fr) !important;
                gap: 8px !important;
                padding: 8px !important;
                width: 100% !important;
            }

            .result-item {
                flex: none !important;
                flex-direction: column !important;
                justify-content: center !important;
                align-items: center !important;
                border: 1px solid rgba(255, 193, 7, 0.3) !important;
                border-radius: 8px !important;
                padding: 10px 8px !important;
                height: auto !important;
                min-height: 75px !important;
                color: white !important;
                width: 100% !important;
                font-weight: 600 !important;
                background: linear-gradient(180deg, #1a1a2e 0%, #0d1117 100%) !important;
                margin-bottom: 0 !important;
                text-align: center !important;
                gap: 4px !important;
                transition: all 0.2s ease !important;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
            }

            .result-item:hover {
                border-color: rgba(255, 193, 7, 0.7) !important;
                box-shadow: 0 4px 12px rgba(255, 193, 7, 0.15) !important;
                transform: translateY(-1px) !important;
            }

            /* Nama permainan */
            .result-item>div:first-child {
                font-size: 12px !important;
                font-weight: 700 !important;
                color: #e0e0e0 !important;
                text-transform: uppercase !important;
                letter-spacing: 0.5px !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
                max-width: 100% !important;
                line-height: 1.3 !important;
            }

            .modal-body {
                padding: 0;
            }

            .modal .modal-dialog {
                color: #120608;
                top: 60px;
                moz-transform: translateY(0);
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }

            .modal-backdrop {
                position: fixed;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 1040;
                background-color: #000;
                opacity: .5;
            }

            #progressive_jackpot {
                font-family: Open24DisplaySt;
                font-size: 70px;
                margin: auto 0;
            }

            .announcement-container>[data-section="announcements"] {
                flex-basis: calc(100% - 40px);
                overflow: hidden;
                margin: auto 0;
            }

            .tickercontainer {
                margin: 0;
                padding: 0;
                overflow: hidden;
                text-align: center;
            }

            .tickercontainer .mask {
                position: relative;
                width: 100%;
                overflow: hidden;
            }

            ul.newsticker {
                position: relative;
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                display: flex;
            }

            ul.newsticker li {
                margin: 0;
                font-size: 16px;
                padding: 0 25px 0 0;
                white-space: nowrap;
            }

            .hot-games-bounce {
                animation-name: hot-games-bounce;
                animation-timing-function: ease;
            }

            @keyframes hot-games-bounce {
                0% {
                    transform: scale(1, 1) translateY(0);
                }

                10% {
                    transform: scale(1.1, .9) translateY(0);
                }

                30% {
                    transform: scale(.9, 1.1) translateY(-2px);
                }

                50% {
                    transform: scale(1, 1) translateY(0);
                }

                100% {
                    transform: scale(1, 1) translateY(0);
                }
            }

            /* .background-top {
            background: url() no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        } */