@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');
		}

		body {
			margin: 0 auto;
			color: var(--text-color, #fff);
			background-color: var(--body-bg-color, #1a1a2e);
		}

		.form-control {
			background-color: var(--input-bg-color, #2F211D);
			border-color: var(--input-border-color, #707070);
			-moz-appearance: none;
			-webkit-appearance: none;
			color: var(--input-text-color, #fff);
		}

		#right-column.active {
			right: 0;
			visibility: visible;
		}

		#right-column {
			overflow: auto;
		}

		#right-column {
			width: 60%;
			visibility: hidden;
			height: 100%;
			background-color: var(--card-bg-color, var(--secondary-color));
			color: var(--text-color, #fff);
			position: fixed;
			top: 0;
			z-index: 1049;
			transition: all 0.5s;
			right: -500px;
			text-transform: capitalize;
			font-size: 14px;
		}

		.closebtn {
			color: var(--text-color, #fff);
			position: absolute;
			top: 0;
			right: 9px;
			padding: 1px 5px;
			z-index: 3;
			font-size: 33px;
		}

		.overlay.show {
			opacity: 1;
			visibility: visible;
		}

		.show {
			display: block !important;
		}

		.overlay {
			position: fixed;
			opacity: 0;
			visibility: hidden;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 21;
			-webkit-transition: all 0.5s ease-in-out;
			-moz-transition: all 0.5s ease-in-out;
			-o-transition: all 0.5s ease-in-out;
			-ms-transition: all 0.5s ease-in-out;
			transition-timing-function: ease;
		}

		.home-surface,
		.home-section-head,
		.announcement-container.home-surface {
			background: linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.18) 100%) !important;
		}
		.home-section-head,
		.home-section-head[style] {
			background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,.12) 100%) !important;
		}
		.home-chip {
			background: linear-gradient(180deg, var(--card-bg-color, #1a1208) 0%, #0a0705 100%) !important;
			border: 1px solid var(--link-color, #FFD700) !important;
		}
		.home-chip.glowing {
			background: linear-gradient(180deg, #ffe566 0%, var(--btn-primary-bg, #FFD700) 45%, var(--primary-color, #b8860b) 100%) !important;
			color: var(--btn-primary-text, #1a1208) !important;
			border: 1px solid rgba(0,0,0,.28) !important;
		}
		.home-card {
			background: linear-gradient(180deg, var(--game-card-bg, #000) 0%, var(--togel-body-bg, #2F211D) 100%) !important;
		}
		a { color: var(--link-color, #FFD700); }
		a:hover { color: var(--link-hover-color, #FFA500); }

		.main-menu-outer-container,
		.active-menu-scroll {
			position: sticky;
			top: 50px;
			background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.12) 100%);
			z-index: 1;
		}

		.main-menu-outer-container a {
			color: var(--menu-text-color, #ffffff);
		}

		/* Card styling */
		.card, .game-card, .setting-card {
			background-color: var(--card-bg-color, #222222) !important;
			border-color: var(--card-border-color, #444444) !important;
		}

		/* Table stripe */
		tbody tr:nth-child(even) {
			background-color: var(--table-stripe-color, #2a2a2a);
		}

		/* Button primary */
		.btn-primary, .glowing, .glowing2 {
			background-color: var(--btn-primary-bg, #533483) !important;
			color: var(--btn-primary-text, #ffffff) !important;
		}

		/* Button secondary */
		.btn-secondary {
			background-color: var(--btn-secondary-bg, #444444) !important;
			color: var(--btn-secondary-text, #ffffff) !important;
		}

		/* Accent elements */
		.accent-text { color: var(--accent-color, #e94560); }
		.accent-border { border-color: var(--accent-color, #e94560); }

		/* Status colors */
		.text-success { color: var(--success-color, #28a745) !important; }
		.text-warning { color: var(--warning-color, #ffc107) !important; }
		.text-danger { color: var(--danger-color, #dc3545) !important; }
		.text-info { color: var(--info-color, #17a2b8) !important; }
		.bg-success { background-color: var(--success-color, #28a745) !important; }
		.bg-warning { background-color: var(--warning-color, #ffc107) !important; }
		.bg-danger { background-color: var(--danger-color, #dc3545) !important; }
		.bg-info { background-color: var(--info-color, #17a2b8) !important; }

		#progressive_jackpot {
			font-family: Open24DisplaySt;
			font-size: 32px;
			margin: auto auto auto 0;
			color: var(--link-color);
		}

		.main-menu-outer-container {
			display: flex;
			z-index: 3;
		}

		.main-menu-outer-container>i {
			color: var(--menu-text-color, #fff);
			display: flex;
			align-items: center;
			padding: 0 3px;
			top: 0
		}

		.main-menu-outer-container>main {
			margin: 0;
			display: flex;
			overflow: auto;
		}

		.main-menu-outer-container>main>a:first-child {
			margin-left: auto
		}

		.main-menu-outer-container>main>a:last-child {
			margin-right: auto
		}

		.main-menu-outer-container>main>a {
			display: block;
			white-space: nowrap;
			padding: 10px 0;
			font-size: 11px;
			text-align: center;
			text-transform: uppercase;
			color: var(--menu-text-color, #fff)
		}

		.main-menu-outer-container>main>div:first-child {
			margin-left: auto
		}

		.main-menu-outer-container>main>div:last-child {
			margin-right: auto
		}

		.main-menu-outer-container>main>div {
			display: block;
			white-space: nowrap;
			padding: 10px 0;
			font-size: 11px;
			text-align: center;
			color: var(--menu-text-color, #fff)
		}

		.main-menu-outer-container>main>a>img {
			display: block;
			width: 25px;
			margin: 10px auto
		}

		.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);
			}
		}

		@property --angle {
			syntax: '<angle>';
			initial-value: 90deg;
			inherits: true;
		}

		@property --gradX {
			syntax: '<percentage>';
			initial-value: 50%;
			inherits: true;
		}

		@property --gradY {
			syntax: '<percentage>';
			initial-value: 0%;
			inherits: true;
		}

		:root {
			--d: 2500ms;
			--angle: 90deg;
			--gradX: 100%;
			--gradY: 50%;
			--c1: rgba(255, 255, 255, 1);
			--c2: rgba(255, 255, 255, 0.1);
		}

		.glowing {
			border: 0.35rem solid;
			border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
			animation: borderRotate var(--d) linear infinite forwards;
		}

		.glowing:nth-child(2) {
			border-image: radial-gradient(ellipse at var(--gradX) var(--gradY), var(--c1), var(--c1) 10%, var(--c2) 40%) 30;
			animation: borderRadial var(--d) linear infinite forwards;
		}

		@keyframes borderRotate {
			100% {
				--angle: 420deg;
			}
		}

		@keyframes borderRadial {
			20% {
				--gradX: 100%;
				--gradY: 50%;
			}

			40% {
				--gradX: 100%;
				--gradY: 100%;
			}

			60% {
				--gradX: 50%;
				--gradY: 100%;
			}

			80% {
				--gradX: 0%;
				--gradY: 50%;
			}

			100% {
				--gradX: 50%;
				--gradY: 0%;
			}
		}

		.glowing2 {
			position: relative;
			overflow: hidden;
		}

		.glowing2:before {
			content: '';
			position: absolute;
			width: 100px;
			height: 100%;
			background-image: linear-gradient(120deg,
					rgba(255, 255, 255, 0) 30%,
					rgba(255, 255, 255, .8),
					rgba(255, 255, 255, 0) 70%);
			top: 0;
			left: -100px;
			animation: shine 3s infinite linear;
			/* Animation */
		}

		@keyframes shine {
			0% {
				left: -100px
			}

			20% {
				left: 100%
			}

			100% {
				left: 100%
			}
		}
	

	
		.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:var(--secondary-color);
			opacity: .5;
		}

		.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: 12px;
			padding: 0 25px 0 0;
			white-space: nowrap;
		}

		.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(var(--btn-primary-bg), var(--primary-color));
			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(var(--btn-primary-bg), var(--primary-color));
			border-radius: 100%;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
			color: var(--menu-text-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;
		}
	
	
		#right-column.active {
			right: 0;
			visibility: visible;
		}

		#right-column {
			overflow: auto;
		}

		#right-column {
			width: 60%;
			visibility: hidden;
			height: 100%;
			background-color: var(--card-bg-color, var(--secondary-color));
			color: var(--text-color, #fff);
			position: fixed;
			top: 0;
			z-index: 1049;
			transition: all 0.5s;
			right: -500px;
			text-transform: capitalize;
			font-size: 14px;
		}

		.closebtn {
			color: var(--text-color, #fff);
			position: absolute;
			top: 0;
			right: 9px;
			padding: 1px 5px;
			z-index: 3;
			font-size: 33px;
		}

		.overlay.show {
			opacity: 1;
			visibility: visible;
		}

		.show {
			display: block !important;
		}

		.overlay {
			position: fixed;
			opacity: 0;
			visibility: hidden;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 21;
			-webkit-transition: all 0.5s ease-in-out;
			-moz-transition: all 0.5s ease-in-out;
			-o-transition: all 0.5s ease-in-out;
			-ms-transition: all 0.5s ease-in-out;
			transition-timing-function: ease;
		}

		.show-opt {
			display: block !important;
			background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
		}

		.arrow-show-opt {
			transform: rotate(90deg);
		}

		.active-menu-scroll {
			position: sticky;
			top: 49px;
			background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.12) 100%);
			z-index: 1;
		}

		#progressive_jackpot {
			font-family: Open24DisplaySt;
			font-size: 32px;
			margin: auto auto auto 0;
			color: var(--link-color);
		}

		.main-menu-outer-container {
			display: flex;
			z-index: 3;
		}

		.main-menu-outer-container>i {
			color: var(--menu-text-color, #fff);
			display: flex;
			align-items: center;
			padding: 0 3px;
			top: 0
		}

		.main-menu-outer-container>main {
			margin: 0;
			display: flex;
			overflow: auto;
		}

		.main-menu-outer-container>main>a:first-child {
			margin-left: auto
		}

		.main-menu-outer-container>main>a:last-child {
			margin-right: auto
		}

		.main-menu-outer-container>main>a {
			display: block;
			white-space: nowrap;
			padding: 10px 0;
			font-size: 11px;
			text-align: center;
			text-transform: uppercase;
			color: var(--menu-text-color, #fff)
		}

		.main-menu-outer-container>main>div:first-child {
			margin-left: auto
		}

		.main-menu-outer-container>main>div:last-child {
			margin-right: auto
		}

		.main-menu-outer-container>main>div {
			display: block;
			white-space: nowrap;
			padding: 10px 0;
			font-size: 11px;
			text-align: center;
			color: var(--menu-text-color, #fff)
		}

		.main-menu-outer-container>main>a>img {
			display: block;
			width: 25px;
			margin: 10px auto
		}

		.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);
			}
		}

		@property --angle {
			syntax: '<angle>';
			initial-value: 90deg;
			inherits: true;
		}

		@property --gradX {
			syntax: '<percentage>';
			initial-value: 50%;
			inherits: true;
		}

		@property --gradY {
			syntax: '<percentage>';
			initial-value: 0%;
			inherits: true;
		}

		:root {
			--d: 2500ms;
			--angle: 90deg;
			--gradX: 100%;
			--gradY: 50%;
			--c1: rgba(255, 255, 255, 1);
			--c2: rgba(255, 255, 255, 0.1);
		}

		.glowing {
			border: 0.35rem solid;
			border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
			animation: borderRotate var(--d) linear infinite forwards;
		}

		.glowing:nth-child(2) {
			border-image: radial-gradient(ellipse at var(--gradX) var(--gradY), var(--c1), var(--c1) 10%, var(--c2) 40%) 30;
			animation: borderRadial var(--d) linear infinite forwards;
		}

		@keyframes borderRotate {
			100% {
				--angle: 420deg;
			}
		}

		@keyframes borderRadial {
			20% {
				--gradX: 100%;
				--gradY: 50%;
			}

			40% {
				--gradX: 100%;
				--gradY: 100%;
			}

			60% {
				--gradX: 50%;
				--gradY: 100%;
			}

			80% {
				--gradX: 0%;
				--gradY: 50%;
			}

			100% {
				--gradX: 50%;
				--gradY: 0%;
			}
		}

		.glowing2 {
			position: relative;
			overflow: hidden;
		}

		.glowing2:before {
			content: '';
			position: absolute;
			width: 100px;
			height: 100%;
			background-image: linear-gradient(120deg,
					rgba(255, 255, 255, 0) 30%,
					rgba(255, 255, 255, .8),
					rgba(255, 255, 255, 0) 70%);
			top: 0;
			left: -100px;
			animation: shine 3s infinite linear;
			/* Animation */
		}

		@keyframes shine {
			0% {
				left: -100px
			}

			20% {
				left: 100%
			}

			100% {
				left: 100%
			}
		}
	
	
		/* Popup home modal styling */
		.popup-home-content {
			color: #333 !important;
			background-color: #fff !important;
		}

		.popup-home-body {
			color: #333 !important;
		}

		.popup-home-body h1,
		.popup-home-body h2,
		.popup-home-body h3,
		.popup-home-body h4,
		.popup-home-body h5,
		.popup-home-body h6 {
			color: #000 !important;
		}

		.popup-home-body p {
			color: #333 !important;
		}

		.popup-home-body a {
			color: #007bff !important;
			text-decoration: underline;
		}

		.popup-home-body a:hover {
			color: #0056b3 !important;
		}

		.popup-home-body strong,
		.popup-home-body b {
			color: #000 !important;
		}

		.popup-home-body::-webkit-scrollbar {
			width: 8px;
		}

		.popup-home-body::-webkit-scrollbar-track {
			background: #f1f1f1;
			border-radius: 10px;
		}

		.popup-home-body::-webkit-scrollbar-thumb {
			background: #888;
			border-radius: 10px;
		}

		.popup-home-body::-webkit-scrollbar-thumb:hover {
			background: #555;
		}

		.popup-home-close:hover {
			opacity: 0.8 !important;
		}

		/* Prevent body scroll when modal is open */
		body.popup-home-open {
			overflow: hidden;
		}

		/* Responsive adjustments for mobile */
		@media (max-width: 768px) {
			.popup-home-modal {
				padding: 15px !important;
			}

			.popup-home-dialog {
				margin: 0 !important;
				width: 85% !important;
				max-width: 450px !important;
			}

			.popup-home-header {
				padding: 10px 12px !important;
			}

			.popup-home-close {
				top: 8px !important;
				right: 12px !important;
				font-size: 24px !important;
			}

			.popup-home-body {
				max-height: 70vh !important;
				padding: 12px !important;
			}

			.popup-home-body h4 {
				font-size: 16px !important;
				margin-bottom: 10px !important;
				line-height: 1.3 !important;
			}

			.popup-home-body p {
				font-size: 13px !important;
				margin-bottom: 8px !important;
				line-height: 1.4 !important;
			}

			.popup-home-body>div {
				margin-bottom: 8px !important;
			}

			.popup-home-body img {
				margin-top: 8px !important;
			}
		}

		@media (max-width: 480px) {
			.popup-home-modal {
				padding: 10px !important;
			}

			.popup-home-dialog {
				margin: 0 !important;
				width: 90% !important;
				max-width: 380px !important;
			}

			.popup-home-header {
				padding: 8px 10px !important;
			}

			.popup-home-close {
				top: 6px !important;
				right: 10px !important;
				font-size: 22px !important;
			}

			.popup-home-body {
				max-height: 65vh !important;
				padding: 10px !important;
			}

			.popup-home-body h4 {
				font-size: 15px !important;
				margin-top: 0 !important;
				margin-bottom: 8px !important;
				line-height: 1.3 !important;
			}

			.popup-home-body p {
				font-size: 12px !important;
				margin-bottom: 6px !important;
				line-height: 1.4 !important;
			}

			.popup-home-body>div {
				margin-bottom: 6px !important;
			}

			.popup-home-body img {
				margin-top: 6px !important;
			}
		}
		
/* Ini adalah penutup dari class .popup-home-body yang ada di baris 902 */
img[src*="logo"], 
.header-logo img, 
.navbar-brand img,
*[class*="logo"] img {
    height: 60px !important;
    max-height: 60px !important;
    width: auto !important;
    min-height: 50px !important;
    display: inline-block !important;
}

/* ===== Terapkan warna tema dari backadmin ===== */
.form-control,
select.form-control,
textarea.form-control,
input.form-control,
input[type="text"]:not(.popup-home-content input),
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
	background-color: var(--input-bg-color) !important;
	border-color: var(--input-border-color) !important;
	color: var(--input-text-color) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
	color: var(--text-secondary-color) !important;
	opacity: 0.8;
}

.btn-primary,
input[type="submit"].btn-primary,
button.btn-primary,
.submit,
.register-btn {
	background-color: var(--btn-primary-bg) !important;
	background-image: none !important;
	color: var(--btn-primary-text) !important;
	border-color: var(--btn-primary-bg) !important;
}

.btn-secondary {
	background-color: var(--btn-secondary-bg) !important;
	color: var(--btn-secondary-text) !important;
}

table {
	color: var(--text-color);
}

.menu-opt,
.menu-top {
	color: var(--header-text-color);
}

.section-header,
.game-section-header {
	background-color: var(--section-header-bg);
	border-left: 3px solid var(--section-header-border);
	color: var(--section-header-text);
}