/* 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;
        }
        
        .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;
        }
        
            #game-content > .box-game {
                width: 100%!important;
                max-width: 100%!important;
            }
        
        .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 {
        }
        
        .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-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);;
        }
        
        
        /* 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);
        }    

            
        @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;
            }
            
            .currency::before {
                content: "";
            }
            
            .footer {
                padding-bottom: 80px!important;
                
            }
        }
        
        @media (max-width: 380px) { 
            .d-xs-none {
                display: none;
            }
        }