/* Scrollbar styling for WebKit browsers */
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        ::-webkit-scrollbar-track {
            background: var(--scrollbar-track-color);
        }

        ::-webkit-scrollbar-thumb {
            background-color: var(--scrollbar-thumb-color);
            border-radius: 6px;
            border: 2px solid var(--scrollbar-track-color);
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: var(--scrollbar-thumb-hover-color);
        }

        /* Hide arrow on numeric input */

        /* 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;
        }

        input[readonly] {
            background-color: #eeeecd !important;
        }

        .no-scrollbar {
            overflow: auto !important;
            /* or scroll, depending on your use case */
            scrollbar-width: none !important;
            /* Firefox */
            -ms-overflow-style: none !important;
            /* IE and Edge */
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none !important;
            /* Chrome, Safari, Opera */
        }

        /* Firefox scrollbar styling */
        * {
            scrollbar-width: thin;
            scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
        }

        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
            font-weight: 600;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            font-family: "Figtree", sans-serif;
            /*font-family: "proxima-nova";*/
            font-optical-sizing: auto;
            font-size: 14px;
            background: var(--bg-base);
            color: var(--text-base);

        }

        ul {
            list-style-type: none;
            padding: 0px;
        }

        a {
            color: inherit;
            /* blue colors for links too */
            text-decoration: inherit;
            /* no underline */
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin: 0px;
        }

        .btn {
            font-weight: 600;
        }

        .bg-accent {
            background-color: var(--btn-accent-background);
            color: var(--btn-accent-color);
        }


        .bg-surface {
            background-color: var(--bg-surface);
            color: var(--text-surface);
        }

        .bg-base {
            background-color: var(--bg-base);
            color: var(--text-base);
        }

        .text-base {
            color: var(--text-base);
        }

        .bg-deep {
            background-color: var(--bg-deep);
            color: var(--text-deep);
        }

        .text-deep {
            color: var(--text-deep);
        }

        .bg-elevated {
            background-color: var(--bg-elevated);
            color: var(--text-elevated);
        }

        .text-elevated {
            color: var(--text-elevated);
        }

        .subtext-color {
            color: var(--subtext-color);
        }

        .fs-xxs {
            font-size: var(--fs-xxs);
        }

        .fs-xs {
            font-size: var(--fs-xs);
        }

        .fs-sm {
            font-size: var(--fs-sm);
        }

        .fs-md {
            font-size: var(--fs-md);
        }

        .fs-lg {
            font-size: var(--fs-lg);
        }

        .fs-xl {
            font-size: var(--fs-xl);
        }

        .text-color-secondary {
            color: var(--text-color-secondary);
        }

        .wrapper {
            display: flex;
            width: 100%;
            height: 100%;
        }


        .sidebar {
            min-width: 240px;
            background: var(--bg-sidebar);
            height: 100%;
            /*max-height: 100%;*/
            overflow-y: auto;
            scrollbar-gutter: stable;
            /* Keeps space reserved (optional, modern browsers) */
        }

        .sidebar-head {}

        .sidebar-body {
            display: flex;
            flex-direction: column;
        }

        .main {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        #box-content {
            flex: 1;
            overflow-y: scroll;
        }


        #content {
            height: 100%;
            min-height: 100%;
        }

        .container {
            max-width: 1200px;
        }

        .banner {
            aspect-ratio: 1900/380;
        }


        .box-game {
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            position: relative;
            width: 150px;
            max-width: 150px;
        }

        .box-game.game-casino {
            width: 234px;
            max-width: 234px;
        }

        .game-rank {
            position: absolute;
            top: 40%;
            width: 26px;
            height: 36px;
            background: var(--btn-accent-background);
            color: var(--btn-accent-color);
            display: grid;
            place-items: center;
            font-weight: bold;
            font-size: 16px;
            border-radius: 0px 4px 4px 0px;
            opacity: .75;
        }

        .game-new {
            position: absolute;
            top: 0px;
            left: 0;
            z-index: 2;
            width: 48px;
            height: 48px;
        }

        .game-hot {
            position: absolute;
            top: -8px;
            right: -8px;
            width: 54px;
            /* adjust based on your GIF size */
            height: 54px;
            border-radius: 0 4px 0 4px;
            opacity: 0.85;
            z-index: 2;
        }

        .game-hot>img,
        .game-new>img {
            width: 100%;
            height: 100%;
        }

        .box-game:hover {
            transform: translateY(-8px);
        }

        .game-img {
            height: 150px;
            max-height: 150px;
            background: var(--bg-surface);
            position: relative;
        }

        .game-img>img {
            height: 100%;
            width: 100%;
        }

        .img-slot,
        .img-sports,
        .img-sabung,
        .img-arcade,
        .img-interactive {
            object-fit: stretch;
        }

        .img-casino {
            object-fit: cover;
        }

        .game-body {
            padding: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
            width: 100%;
        }

        .game-name {
            font-weight: bold;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            /* This forces the text to stay in one line */
        }

        .game-provider {
            font-weight: bold;
            color: var(--subtext-color);
        }

        .box-promotion {
            height: 150px;
            width: 384px;
        }

        .box-transaction {
            flex: 1;
        }


        .menu-group {
            display: flex;
            flex-direction: column;
            background: var(--bg-btn-menu);
            color: var(--text-btn-menu);
            border-radius: 8px;
            overflow: hidden;
            font-size: 14px;
            font-weight: 600;
            margin: 0;
        }

        .menu-item {
            position: relative;
        }

        .btn-menu {
            padding: 13px 16px;
            line-height: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .menu-item:hover {
            background: var(--bg-hover);
        }

        .menu-icon {
            transition: filter 0.1s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .menu-item:hover .menu-icon {
            filter: var(--sidebar-icon-hover);
        }

        .icon-sm {
            width: 14px;
            height: 14px;
        }

        .icon-md {
            width: 16px;
            height: 16px;
        }

        .btn-icon {
            cursor: pointer;
        }

        .btn-text {
            cursor: pointer;
        }

        .btn-promotion {
            color: #fff;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            display: inline-block;
            outline: none;
            border: none;
            background-size: 120% auto;
            background-image: linear-gradient(315deg, #c02425 0%, #f0cb35 75%);
            font-size: 14px;
        }

        .btn-promotion:hover {
            background-position: right center;
        }

        .btn-promotion:active {
            top: 2px;
        }

        .btn-event {
            color: #fff;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            display: inline-block;
            outline: none;
            border-radius: 5px;
            border: none;
            background-size: 120% auto;
            background-image: linear-gradient(315deg, #43cea2 0%, #185a9d 75%);
            font-size: 14px;
        }

        .btn-event:hover {
            background-position: right center;
        }

        .btn-event:active {
            top: 2px;
        }

        .btn-base {
            background-color: var(--bg-base);
            color: var(--text-base);
            font-weight: 600;
            padding: 8px 16px;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease;
            font-family: "Figtree", sans-serif;
        }

        .btn-surface {
            background-color: var(--bg-surface);
            color: var(--text-surface);
            font-weight: 600;
            padding: 8px 16px;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .btn-elevated {
            background-color: var(--bg-elevated);
            color: var(--text-elevated);
            font-weight: 600;
            padding: 8px 16px;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .btn-elevated.active {
            background: var(--bg-surface) !important;
            color: var(--text-surface) !important;
            border: var(--bg-surface) !important;
        }

        .btn-deep {
            background-color: var(--bg-deep);
            color: var(--text-deep);
            font-weight: 600;
            padding: 8px 16px;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .btn-accent {
            color: var(--btn-accent-color);
            background-color: var(--btn-accent-background);
            border-color: var(--btn-accent-background);
        }

        .btn-accent:hover {
            color: var(--btn-accent-color);
            background-color: color-mix(in srgb, var(--btn-accent-background), black 10%);
            border-color: color-mix(in srgb, var(--btn-accent-background), black 12%);
        }

        .btn-accent:focus,
        .btn-accent.focus {
            color: var(--btn-accent-color);
            background-color: color-mix(in srgb, var(--btn-accent-background), black 12%);
            border-color: color-mix(in srgb, var(--btn-accent-background), black 14%);
        }

        .btn-accent:disabled,
        .btn-accent.disabled {
            color: var(--btn-accent-color);
            background-color: var(--btn-accent-background);
            border-color: var(--btn-accent-background);
            opacity: 0.65;
        }

        .btn-accent:active,
        .btn-accent.active,
        .show>.btn-accent.dropdown-toggle {
            color: var(--btn-accent-color);
            background-color: color-mix(in srgb, var(--btn-accent-background), black 14%);
            border-color: color-mix(in srgb, var(--btn-accent-background), black 16%);
        }

        .btn-accent>i {
            color: var(--btn-accent-color);
            ;
        }

        .btn-togel {
            padding: 10px 15px;
        }


        /* Hover Effects */
        .btn-base:hover {
            background-color: var(--bg-hover);
            color: var(--text-base);
        }

        .btn-surface:hover {
            background-color: var(--bg-hover);
            color: var(--text-surface);
        }

        .btn-elevated:hover {
            background-color: var(--bg-hover);
            color: var(--text-elevated);
        }

        .btn-deep:hover {
            background-color: var(--bg-hover);
            color: var(--text-deep);
        }

        /* Small Button */
        .btn-sm {
            padding: 4px 12px;
            font-size: 12px;
        }

        /* Large Button */
        .btn-lg {
            padding: 12px 24px;
            font-size: 16px;
        }

        /* Full Width Button */
        .btn-block {
            display: block;
            width: 100%;
        }

        /* Disabled Button */
        .btn-disabled {
            background-color: var(--bg-deep);
            color: var(--text-deep);
            cursor: not-allowed;
            opacity: 0.6;
        }

        /* Button with Icon */
        .btn-icon {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .icon-color {
            filter: var(--icon-color);
        }

        .icon-accent {
            filter: var(--accent-icon);
        }

        .icon-danger {
            filter: sepia(1) saturate(6000%) hue-rotate(-10deg) brightness(0.8);
        }


        #bottom-navbar {
            display: none;
        }

        .page-header {
            height: 115px;
        }

        .nav-link {
            color: var(--text-base);
        }

        .nav-link:hover {
            border-color: var(--bg-elevated);
        }

        .nav-tabs .nav-item.show .nav-link,
        .nav-tabs .nav-link.active {
            color: var(--text-base) !important;
            background-color: var(--bg-elevated);
            border-color: var(--bg-elevated);
        }

        .nav-tabs {
            border-bottom: 1px solid var(--bg-elevated);
        }

        .unread-memo-badge {
            display: flex;
            align-items: center;
        }

        /* Table Striped Transparent */

        .table-striped-transparent>tbody>tr:nth-of-type(odd) {
            background-color: rgba(255, 255, 255, 0.05) !important;
            /* Adjust alpha for lighter or darker stripes */

        }

        .table-striped-transparent {
            background-color: transparent !important;
        }

        .table-striped-transparent th,
        .table-striped-transparent td {
            background-color: transparent;
            /* Ensures all cells remain transparent */
            color: inherit;
            font-weight: normal;
        }

        /* Table Transparent */

        .table-transparent {
            background-color: transparent !important;
        }

        .table-transparent th,
        .table-transparent td {
            background-color: transparent;
            /* Ensures all cells remain transparent */
            color: inherit;
            font-weight: normal;
            border-color: var(--bg-elevated);
        }

        .nav-pills .nav-link.active,
        .nav-pills .show>.nav-link {
            background-color: var(--bg-elevated);
        }

        .currency::before {
            content: "Rp ";
        }

        /* Custom Color */

        .text-green {
            color: #62c462 !important;
        }

        .text-blue {
            color: #5bc0de !important;
        }

        .text-orange {
            color: #f89406 !important;
        }

        .text-red {
            color: #ee5f5b !important;
        }

        .text-accent {
            color: var(--accent-color) !important;
        }

        .toastify {
            margin-top: 54px;
        }

        .toast-success {
            background: rgba(25, 35, 45, 0.4) !important;
            backdrop-filter: blur(16px) saturate(150%);
            -webkit-backdrop-filter: blur(16px) saturate(150%);
            border-left: 4px solid var(--accent-color) !important;
            color: var(--text-base) !important;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
        }

        .toast-error {
            background: rgba(30, 10, 10, 0.5) !important;
            backdrop-filter: blur(16px) saturate(150%);
            -webkit-backdrop-filter: blur(16px) saturate(150%);
            border-left: 4px solid #D32F2F !important;
            color: #fff !important;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
        }

        .pagination {
            --bs-pagination-padding-x: 0.75rem;
            --bs-pagination-padding-y: 0.375rem;
            --bs-pagination-font-size: var(--fs-sm);
            --bs-pagination-color: var(--text-base);
            --bs-pagination-bg: var(--bg-elevated);
            --bs-pagination-border-color: var(--bg-deep);
            --bs-pagination-border-radius: 0.375rem;
            --bs-pagination-hover-color: var(--text-base);
            --bs-pagination-hover-bg: var(--bg-base);
            /* ganti jadi bg-base */
            --bs-pagination-hover-border-color: var(--bg-base);
            --bs-pagination-focus-color: var(--text-base);
            --bs-pagination-focus-bg: var(--bg-base);
            --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
            --bs-pagination-active-color: var(--btn-accent-color);
            --bs-pagination-active-bg: var(--btn-accent-background);
            --bs-pagination-active-border-color: var(--btn-accent-background);
            --bs-pagination-disabled-color: var(--text-color-secondary);
            --bs-pagination-disabled-bg: var(--bg-deep);
            --bs-pagination-disabled-border-color: var(--bg-deep);
        }

        .page-link {
            color: var(--text-base);
            background-color: var(--bg-elevated);
            /* elevated default */
            border: 1px solid var(--bg-base);
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        .page-link:hover {
            color: var(--text-base);
            background-color: var(--bg-base);
            border: 1px solid var(--bg-base);
        }

        .page-item.active .page-link {
            color: var(--text-surface);
            background-color: var(--bg-surface);
            border: 1px solid var(--bg-base);
        }





        @media (max-width: 1200px) {

            .chat-widget-container {}

            .box-sidebar {
                display: none;
            }

            #bottom-navbar {
                display: block;
            }
        }

        @media (max-width: 768px) {

            table {
                font-size: var(--fs-sm);
            }

            .fs-sm-xxs {
                font-size: var(--fs-xxs);
            }

            .fs-sm-xs {
                font-size: var(--fs-xs);
            }

            .fs-sm-sm {
                font-size: var(--fs-sm);
            }

            .fs-sm-md {
                font-size: var(--fs-md);
            }

            .fs-sm-lg {
                font-size: var(--fs-lg);
            }

            .fs-sm-xl {
                font-size: var(--fs-xl);
            }

            .page-header {
                height: 80px;
            }

            .box-game {
                width: 120px;
                max-width: 120px;
            }

            .box-game.game-casino {
                width: 187px;
                max-width: 187px;
            }

            .box-game:hover {
                transform: none
            }


            .game-img {
                height: 120px;
                max-height: 120px;

                background: var(--bg-surface);
            }

            .banner {
                aspect-ratio: 600/280
            }

            .modal-dialog,
            .modal-content {
                /* height: 100%;
                margin: 0px;
                 */
                width: 100vw;
                max-width: 100vw;
                /*height: calc(100vh - 120px);*/
                /*max-height: calc(100vh - 120px) ;*/
                margin: 0;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                transform: none;
            }

            .currency::before {
                content: "";
            }

            .footer {
                padding-bottom: 80px !important;

            }
        }

        @media (max-width: 380px) {
            .d-xs-none {
                display: none;
            }
        }