body {
	background-color: var(--bg-main);
	font-family: "NunitoLight", sans-serif;
	font-size: 16px;	
	color: var(--color-main);
	min-width: 320px;
	overflow-x: hidden;
	background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../images/bg/bg-body.webp");
	background-blend-mode: overlay;
	background-repeat: repeat;
	background-size: 400px;
}

a, 
a:link {
	text-decoration: none;
	outline: none !important;
}

a, a:hover {
	color: var(--color-purple-light);
	outline: none !important;
}

a:hover {
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'BebasRegular';
	margin: 0;
	padding: 0;
}
abbr {
	border-bottom: none !important;
	font-size: 0.875rem;
}
pre {
	width: 100%;
}

/*
===== ROOT THEME =====
*/

/*
--- position Point ---
*/

.relative {
	position: relative !important;
}

/*
--- Text Point ---
*/

.bebas-regular {
	font-family: 'BebasRegular' !important;
}

.gotham-bold {
	font-family: 'GothamBold' !important;
}

.capitalize {
	text-transform: capitalize !important;
}

.uppercase {
	text-transform: uppercase !important;
}

.lowercase {
	text-transform: lowercase !important;
}

.bold {
	font-weight: 600 !important;
}

.justify {
	text-align: justify !important;
}

.txt-16 {
	font-size: 1rem !important;
}

.txt-18 {
	font-size: 1.125rem !important;
}

/*
--- bg Point ---
*/

.bg-main {
	background-color: var(--bg-main) !important;
}
.bg-secondary {
	background-color: var(--bg-secondary) !important;
}
.bg-glass {
	/* From https://css.glass */
	background: rgba(255, 255, 255, 0.09);
	border-radius: 0.6em;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(4.5px);
	-webkit-backdrop-filter: blur(4.5px);
	border: 1px solid rgba(255, 255, 255, 0.3);
}
.bg-glass-white {
	/* From https://css.glass */
	background: rgba(255, 255, 255, 0.73);
	border-radius: 0.6em;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(7.9px);
	-webkit-backdrop-filter: blur(7.9px);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

/*
--- color Point ---
*/

.purple-light {
	color: var(--color-purple-light) !important;
}

.purple-dark {
	color: var(--color-purple-dark) !important;
}

.red {
	color: var(--bs-red) !important;
}

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

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

.green-dark {
	color: var(--color-green-dark) !important;
}

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

/*
--- Button Point ---
*/

.btn {
	border-radius: 0;
	font-family: 'BebasRegular';
	color: var(--color-main);
	padding: 0.313rem 2rem;
	line-height: normal;
	font-size: 1.125rem;
	text-decoration: none !important;
	
	-webkit-box-shadow: none !important;
			box-shadow: none !important;
}

.btn-shadow {
	-webkit-box-shadow: 0.1875rem 0.3125rem 0.4375rem rgba(0, 0, 0, .65) !important;
			box-shadow: 0.1875rem 0.3125rem 0.4375rem rgba(0, 0, 0, .65) !important;	
}

.btn-main,
.btn-main:focus {
	background: linear-gradient(to bottom, #fce92d 0%,#ff6c27 100%);
	color: var(--color-main);
	border-color: #fce92d;
}

.btn-main:hover {
	background: linear-gradient(to bottom, #ffa700 0%,#ffa700 100%);
	border-color: #5e4a1b;
}

.btn-main-dark,
.btn-main-dark:focus {
	background-color: var(--color-purple-dark);
	color: var(--color-main);
}

.btn-main-dark:hover {
	background-color: var(--color-purple-dark-hover);
}

.btn-green,
.btn-green:focus {
	background-color: var(--color-green);
	color: var(--color-main);
}

.btn-green:hover {
	background-color: var(--color-green-hover);
}

.btn-white-dark,
.btn-white-dark:focus {
	background-color: var(--bg-white-dark);
	color: var(--color-gray);
}

.btn-white-dark:hover {
	background-color: var(--bs-white);
	color: var(--color-dark-gray);
}

.btn-trans,
.btn-trans:focus {
	background-color: transparent;
	border-color: var(--color-main);
	color: var(--color-main);
}

.btn-trans:hover {
	background-color: var(--color-main);
	color: var(--color-dark-gray);
}

.btn-group-sm > .btn, 
.btn-sm {
	font-size: 0.9375rem;
	padding: 0.1875rem 1rem;
}

.btn-group-lg > .btn, 
.btn-lg {
	font-size: 1.5rem;
	padding: 0.313rem 2.5rem;
}
.btn-see-all {
	margin: auto;
}
.btn-see-all:hover {
	color: var(--color-main);
}

.btn-with-icon .badge {
  padding: 0;
}
.btn-with-icon-left .badge {
  margin-right: 0.5em;
}
.btn-with-icon .badge .fa {
  font-size: 1.4em;
}

.btn-with-icon.big-icon-on-left {
	position: relative;
	min-height: 3em;
	font-size: 1.2em;
}
.btn-with-icon.big-icon-on-left .badge {
  left: 0;
  top: 0;
  width: 4em;
  bottom: 0;
}
.btn-with-icon.big-icon-on-left .badge .fa::before {
  font-size: 1.6em;
  display: block;
}

.btn-rounded {
	border-radius: 0.2em;
	overflow: hidden;
}
.btn-capsule {
	border-radius: 2em;
}

.btn-un-suggestion {
  text-transform: lowercase;
  font-size: 1em !important;
  position: relative;
  top: -1px;
}

.underinput_ext {
  background-color: rgb(0, 34, 51);
}
.underinput_ext.available {
  background-color: #0e5005;
  display: table;
  font-size: 0.9em;
  padding-top: 0px !important;
  padding-bottom: 2px !important;
}
.underinput_loader {
  font-size: 0.8em;
}
.underinput_loader .spinner-grow {
  scale: 0.6;
  position: relative;
  top: 2px;
  left: 2px;
}
.underinput_error {
  font-size: 0.9em;
  padding-top: 0px !important;
  padding-bottom: 2px !important;
}

.running-news .form-control {
	background-color: transparent;
}

/* RESPONSIVE FONT SIZE */
.rfs-1 {
	font-size: 1.8em;
}
.rfs-2 {
	font-size: 1.65em;
}
.rfs-3 {
	font-size: 1.55em;
}
.rfs-4 {
	font-size: 1.5em;
}
.rfs-5 {
	font-size: 1.35em;
}
.rfs-6 {
	font-size: 1.2em;
}

.rfs-tiny-1 {
	font-size: 0.875em;
}
.rfs-tiny-2 {
	font-size: 0.7em;
}
.rfs-tiny-3 {
	font-size: 0.6em;
}

@media (max-width:1399px) {
	.rfs-1 {
		font-size: 1.65em;
	}
	.rfs-2 {
		font-size: 1.55em;
	}
	.rfs-3 {
		font-size: 1.475em;
	}
	.rfs-4 {
		font-size: 1.4em;
	}
	.rfs-5 {
		font-size: 1.25em;
	}
	.rfs-6 {
		font-size: 1.125em;
	}
	.rfs-tiny-1 {
		font-size: 0.83em;
	}
	.rfs-tiny-2 {
		font-size: 0.68em;
	}
	.rfs-tiny-3 {
		font-size: 0.58em;
	}
}
@media (max-width:1199px) {
	.rfs-1 {
		font-size: 1.5em;
	}
	.rfs-2 {
		font-size: 1.425em;
	}
	.rfs-3 {
		font-size: 1.4em;
	}
	.rfs-4 {
		font-size: 1.3em;
	}
	.rfs-5 {
		font-size: 1.2em;
	}
	.rfs-6 {
		font-size: 1.1em;
	}
	.rfs-tiny-1 {
		font-size: 0.8em;
	}
	.rfs-tiny-2 {
		font-size: 0.66em;
	}
	.rfs-tiny-3 {
		font-size: 0.56em;
	}
}
@media (max-width:991px) {
	.rfs-1 {
		font-size: 1.4em;
	}
	.rfs-2 {
		font-size: 1.325em;
	}
	.rfs-3 {
		font-size: 1.25em;
	}
	.rfs-4 {
		font-size: 1.2em;
	}
	.rfs-5 {
		font-size: 1.125em;
	}
	.rfs-6 {
		font-size: 1.05em;
	}
	.rfs-tiny-1 {
		font-size: 0.775em;
	}
	.rfs-tiny-2 {
		font-size: 0.64em;
	}
	.rfs-tiny-3 {
		font-size: 0.54em;
	}
}
@media (max-width:767px) {
	.rfs-1 {
		font-size: 1.325em;
	}
	.rfs-2 {
		font-size: 1.275em;
	}
	.rfs-3 {
		font-size: 1.225em;
	}
	.rfs-4 {
		font-size: 1.1em;
	}
	.rfs-5 {
		font-size: 1.05em;
	}
	.rfs-6 {
		font-size: 1em;
	}
	.rfs-tiny-1 {
		font-size: 0.73em;
	}
	.rfs-tiny-2 {
		font-size: 0.62em;
	}
	.rfs-tiny-3 {
		font-size: 0.52em;
	}
}
@media (max-width:767px) {
	.rfs-1 {
		font-size: 1.325em;
	}
	.rfs-2 {
		font-size: 1.225em;
	}
	.rfs-3 {
		font-size: 1.15em;
	}
	.rfs-4 {
		font-size: 1em;
	}
	.rfs-5 {
		font-size: 0.975em;
	}
	.rfs-6 {
		font-size: 0.95em;
	}
	.rfs-tiny-1 {
		font-size: 0.7em;
	}
	.rfs-tiny-2 {
		font-size: 0.6em;
	}
	.rfs-tiny-3 {
		font-size: 0.5em;
	}
}

/* marquee */
marquee {
  line-height: 2.4em;
}
.running-news .input-group-text {
  font-size: 0.8em;
  position: relative;
  background-color: transparent;
  color: var(--color-purple-dark);
  padding-right: 1.6em;
}
.running-news .input-group-text::after {
	content: "\f101";
	font-family: "FontAwesome";
	position: absolute;
	right: 0;
	font-size: 1.4em;
	height: 100%;
	align-items: center;
	display: flex;
	top: -1px;
}
.running-news i {
  font-style: normal;
}
@media (max-width:767px) {
	.running-news i {
	  font-size: 1.1em;
	}
	.running-news {
	  border-top: 1px solid var(--color-dark-gray);
	}
	.running-news .input-group-text::after {
	  display: none;
	}
	marquee {
	  font-size: 0.9em;
	}
	.running-news .input-group-text {
	  padding-right: 0.2em;
	}
}

/* limit sizing */
.max-280 {
	max-width: 280px;
}
.max-767 {
  max-width: 767px;
}
.min-130 {
	min-width: 130px;
}
/* SEPARATORS */
.or-separator {
  position: relative;
  margin: 0 auto;
  margin-bottom: 0px;
}
.or-separator span {
  display: block;
  width: 120px;
  margin: 0 auto;
  font-size: 0.7em;
  letter-spacing: .2px;
  line-height: 22px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-secondary);
}
.or-separator::after, 
.or-separator::before {
  content: "";
  position: absolute;
  height: 1px;
  background-color: var(--bg-secondary);
  top: 11.25px;
}
.or-separator::before {
  width: 42%;
}
.or-separator::after {
  left: auto;
  right: 0;
  width: 42%;
}

/*
===== ELEMENT THEME =====
*/

header, 
.language-header, 
.select-language, 
.identity-header, 
.logo-header, 
.login-header, 
.menu-header, 
main, 
footer {
	float: left;
	width: 100%;
	position: relative;	
}

/*** LINE BORDER ***/

.line-border::after {
	content: '';
	position: absolute;
	bottom: 0;
	height: 0.125rem;
	background: var(--line-color);
}

.line-border-top::before {
	content: '';
	position: absolute;
	top: 0;
	height: 0.125rem;
	background: var(--line-color);
}

.line-border-h3::after, 
.line-border-h3::before {
	height: 0.1875rem;
}

.line-border-full::after, 
.line-border-full::before {
	left: 0;
	right: 0;
}

.line-border-w75::after {
	width: 80vw;
}

.line-border-left::after {
	left: 0;
}

.line-border-right::after {
	right: 0;
}

.line-border-zi2::after {
	z-index: 2;
}

/*** HEADER ***/

/*
==== LOGO ====
handling bentuk logo yg bervariasi
land-nearcubic: bentuk landscape hampir sama sisi
land-long: bentuk landscape yg lebarnya diantara 2 - 3 kali tingginya
land-verylong: bentuk landscape yg lebarnya lebih dari 3 kali tingginya
port-nearcubic: bentuk portrait hampir sama sisi
port-long: bentuk portrait yg tingginya diantara 2 - 3 kali lebarnya
port-verylong: bentuk portrait yg tingginya lebih dari 3 kali lebarnya
*/
.logo-header img.shape-land-nearcubic {
	width: 120px !important; 
}
.navbar-brand img.shape-land-nearcubic {
  width: 72px !important;
}
@media (max-width:767px) {
	.logo-header img.shape-land-nearcubic {
	  width: 85px !important;
	}
}

header {
	/*padding-top: 1.65rem;*/
}
.header-simple {
	
}
.logo-header img {
	max-width: 210px;
}
.header-simple .identity-header {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.header-simple .identity-header.line-border::after {
  width: 100%;
}
.header-simple .logo-header {
  display: flex;
  position: static;
  margin: auto;
  float: none;
}

.header-simple .logo-header img {
	max-width: 200px;
}

.offcanvas-header .navbar-brand img {
  min-width: 150px;
  max-width: 180px;
}
.offcanvas.show .offcanvas-header .navbar-brand img {
  width: 140px !important;
  min-width: unset;
}


@media (max-width:767px) {
	.logo-header-row {
		position: relative;
	}
	.logo-header {
		position: absolute;
		top: 0;
		width: 30%;
		z-index: 200;
	}

	.logo-header img {
		height: auto !important;
		max-width: 100%;
	}
	
	.header-simple .logo-header img {	
		width: 100%;
	}

}
@media (max-width:767px) {
	.identity-header {
		margin-top: 0.8em !important;
		margin-bottom: 0.8em !important;
	}
	.logo-header-col {
		width: 34%;
	}
	.login-header-col {
		width: 66%;
	}
}

/** language header **/

.language-header {
	
} 

.select-language {
	
}

.select-language > div + div {
	margin-left: 2rem;
}

.select-language img.icon {
	width: 1.25rem !important;
	margin-right: 0.625rem;
}

.select-language a {
	font-size: 0.75rem;
	color: var(--color-secondary);
	padding-bottom: 0.5rem;
}

.select-language a:hover {
	color: var(--color-purple-light);
	text-decoration: none;
}

.select-language .dropdown-item:hover {
	background-color: var(--color-dark-gray);
}

/** identity header **/

.identity-header {
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
}

.loggedin .identity-header {
}

.logo-header {
	
}

.login-header {
	
}

.login-header .row {
	--bs-gutter-x: 1rem;
}

#login-with-header a {
	font-size: 0.75rem !important;
	color: var(--color-secondary) !important;
	border: none !important;
	padding-bottom: 0.5rem !important;
}

#login-with-header a:hover {
	color: var(--color-purple-light) !important;
	text-decoration: none !important;
}

#login-with-header .dropdown-item {
	padding: 0.27rem 1rem !important;
}

.btn-google img {
	height: 16px;
	margin-right: 6px;
	margin-top: -1px;
}

.btn-google.btn-lg img {
	height: 22px;
}

#form_login_head {
	display: grid;
	grid-template-columns: repeat(4, auto);
	gap: 1rem;
}

@media (max-width: 1199px) {
	.btn-google {
		padding: 0.1875rem 0.5rem !important;
	}
}

@media (max-width: 991px) {
	.logo-header-col {
		/*margin-top: -25px;*/
	}

	.login-header-col {
		margin-top: .5rem;
	}
}

@media (max-width: 767px) {
	.logo-header-col {
		width: 34%;
		margin-top: 0;
	}

	.login-header-col {
		width: 66%;
		margin-top: 0;
	}
	
	#form_login_head {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.header-front .logo-header-col {
		width: 100%;
	}
	.header-front .login-header-col {
		display: none;
	}
	.header-front .logo-header a {
		margin: auto;
	}
	.header-front .logo-header {
		margin-top: 5px !important;
		width: 100%;
		position: static;
	}
	.header-front .logo-header img {
		width: 132px;
	}
	.header-front .identity-header .container {
		overflow: visible;
	}
}

.user-vital-box {
  position: relative;
}

/** FROM PHONE VALIDATION **/
.phone-verification-urgent button:hover {
	color: #ffffff;
}
.formtopcontent {
	max-width: 500px;
	margin: auto;
}
.formtopcontent .form-control,
.formtopcontent .form-control:focus {
	background-color: #d2cab0;
}

/** PEAK MENU **/
.peak-menu a {
	font-family: "NunitoLight", sans-serif;
	font-size: 0.65em;
	letter-spacing: 0.03em;
	position: relative;
}
.peak-menu a.separator::before {
  content: "";
  position: absolute;
  width: 1px;
  left: -8px;
  top: 2px;
  height: 10px;
  border-left: 1px solid;
}

@media(max-width: 767px) {
	.peak-menu {
	  position: absolute;
	  right: 15px;
	}
}

@media(max-width: 767px) {
	.peak-menu {
		display: none;
	}
}

/*** NAVBAR ***/

.menu-header-wrap {
  display: table;
  width: 100%;
}
.menu-header {
	background: linear-gradient(to bottom,  #464545 0%,#292828 40%,#131313 100%);	
}
.navbar {
	background: none !important;
}
.navbar-nav > .nav-item, 
.navbar-nav > .nav-item > .nav-link {
	position: relative;
}

.navbar-nav > .nav-item > .nav-link {
	font-family: 'BebasRegular';
	line-height: normal;
	font-size: 1.1rem;
	color: var(--nav-link-color);
	text-transform: uppercase;
	text-decoration: none !important;
}

.navbar-nav > .nav-item > .nav-link {
	padding-left: 1rem;
	padding-right: 1rem;
}

.navbar-nav > .nav-home {
	padding-right: 1rem;
}

.navbar-nav > .nav-home > .nav-link {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #a4a3a3;
	border-radius: 3.125rem;
	height: 2.125rem;
	width: 2.125rem;
	padding: 0;
	color: #292929;
}

.navbar-nav > .nav-home > .nav-link:focus, 
.navbar-nav > .nav-home > .nav-link:hover, 
.navbar-nav > .nav-home > .nav-link.active {
	background-color: var(--nav-link-hover);
	color: #292929;
}

.nav-link:focus, 
.nav-link:hover {
	color: var(--nav-link-hover);
}

.navbar-nav .nav-link.active, 
.navbar-nav .nav-link.show {
	color: var(--nav-link-hover);
}

.nav-link::after {
	-webkit-transition: .3s ease-in-out;
			transition: .3s ease-in-out;
}

.nav-link.show::after {
	-webkit-transform: rotate(-90deg);
			transform: rotate(-90deg);
}
.dropdown-item:hover {
	text-decoration: none;
}
.dropdown-item {
	font-family: 'BebasRegular';
	font-size: 1.1em;
}

.nav-link-image img {
	height: 21px;
	transform: scale(3) translateY(-1px);
	border-radius: 4px;
	object-fit: contain;
	mix-blend-mode: lighten;
}

.nav-link-image:hover img {
	transform: scale(4) translateY(-1px);
}

.login-register-aside-navbar-toggler {
	position: absolute;
	right: 51px;
	top: 18px;
}
.login-register-aside-navbar-toggler a {
	line-height: 1.6em;
	border-radius: 4px;
}

@media(max-width: 767px) {
	.navbar-toggler-wrap {
		position: absolute;
		top: 10px;
		right: 1px;
		transform: scale(0.6);
	}
	.loggedin .navbar-toggler-wrap {
		top: 4px;
	}
	.navbar,
	.menu-header {
		position: static;
		padding-top: 0;
		padding-bottom: 0;
	}
	.navbar-toggler-wrap button {
		border: none;
		background-color: var(--color-main);
	}
	.navbar.navbar-expand-sm {
		padding-top: 0;
		padding-bottom: 0;
	}
	.navbar-nav > .nav-item {
		width: 100%;
	}
	.navbar-nav > .nav-item > .nav-link,
	.dropdown-item {
		padding-left: var(--bs-offcanvas-padding-x) !important;
		padding-right: var(--bs-offcanvas-padding-x) !important;
		padding-top: var(--nav-link-mobile-padding-y) !important;
		padding-bottom: var(--nav-link-mobile-padding-y) !important;
	}
	.navbar-nav > .nav-item > .nav-link:hover {
		color: var(--bs-dropdown-link-color-dark) !important;
		background-color: var(--bs-dropdown-link-color-light) !important;
	}
	.navbar-nav > .nav-item:not(.nav-home) + .nav-item:not(.nav-home) > a {
		border-top: 1px solid var(--color-main);
	}
	.dropdown-item {
		font-family: 'BebasRegular';
		line-height: normal;
		font-size: 1.1rem;
		color: var(--nav-link-color);
		text-transform: uppercase;
		text-decoration: none !important;
		font-size: inherit !important;
	}
	.navbar-nav .dropdown-menu {
		padding-top: 0;
		padding-bottom: 0;
		background-color: transparent;
		border-radius: 0;
		border: none;
		margin-top: 0;
	}
	.dropdown-menu > li .dropdown-item {
		border-top: 1px solid var(--color-main);
	}
}

/*** OFF CANVAS ***/

.offcanvas.offcanvas-start {
	width: var(--menu-offcanvas-width);
}
.offcanvas {
	background-color: var(--bg-offcanvas);
	border-right: 2px solid #0d193b !important;
}

.offcanvas-header .btn-close {
	outline: none !important;
}

/*** MEGA MENU ***/

.navbar .megamenu {
	padding: 1rem;
}
.dropdown-menu.megamenu .row > div {
	/*margin: auto;*/
}


.menu-card-titledesc {
	background-color: var(--color-main);
	border-radius: 0.5em;
	font-size: 0.9em;
}
.menu-title {
	font-size: 0.9em;
}
.menu-description {
	font-size: 0.8em;
}

@media(max-width: 1099px){
	.navbar-nav > .nav-item > .nav-link {
		font-size: 0.9em;
	}
	.dropdown-item {
		font-size: 1em;
	}
	.item_game_menu_wrap button {
		font-size: 0.9em;
	}
	.btn-see-all {
		font-size: 0.9em;
	}
	.menu-title {
		font-size: 0.85em;
	}
}
@media(max-width: 991px){
	.navbar-nav > .nav-home {
		padding-right: 0.6em;
	}
	.navbar-nav > .nav-item:not(.nav-home) > .nav-link {
		padding-left: 0.6em;
		padding-right: 0.6em;
	}
	.menu-description .btn-see-all {
		font-size: 1.2em;
	}
}

@media(max-width: 620px){
	.navbar-nav > .nav-home {
		display: none !important;
	}
}

/* desktop view */
@media all and (min-width: 576px) {
	.navbar .has-megamenu {
		position: static !important;
	}
	.navbar .megamenu {
		left: 0; 
		right: 0; 
		width: 100%; 
		margin-top: 0;
	}
	/*
	.nav-item.dropdown.open-onhover:hover .dropdown-menu {
        display: block;
    }
	*/
	.nav-link.no-chevron::after {
		display: none;
	}
	.item_game_menu_wrap {
		position: relative;
	}
	.item_game_menu_wrap a {
		display: table;
		margin: auto;
		position: relative;
		width: 100%;
	}
	.item_game_menu_wrap a:hover img {
		opacity: .65;
	}
	.item_game_menu_wrap .btn_wrapper {
		position: absolute;
		width: 100%;
		bottom: 1em;
		display: none;
	}
	.item_game_menu_wrap:hover .btn_wrapper {
		display: block;
	}
	.item_game_menu_wrap button {
		margin: auto;
		display: block;
		border: 0.1em solid var(--color-purple-light);
		/*border-radius: 0.5em;*/
		border-radius: 3.125rem;
		background-color: var(--color-purple-light);
		color: var(--color-main);
		-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .75) !important;
				box-shadow: 0 0 5px rgba(0, 0, 0, .75) !important;
	}
	.item_game_menu_wrap button:hover {
		/*
		color: var(--color-purple-light);
		*/
		border-color: var(--color-purple-light-hover);
		background-color: var(--color-purple-light-hover);
		color: var(--color-main);
	}
	.item_game_menu_wrap img {
		/*
		border: 0.3em solid var(--bs-orange);
		border-radius: 0.7em;
		*/
		border: .188rem solid var(--color-purple-dark-hover);
		border-radius: .625rem;
	}
}

/* mobile view */
@media(max-width: 767px){
	.item_game_menu_wrap a {
		display: table;
		margin: auto;
		position: relative;
		width: 100%;
	}
	.item_game_menu_wrap .btn_wrapper {
		position: absolute;
		width: 100%;
		bottom: 1em;
	}
	.item_game_menu_wrap .btn_wrapper button {
	  margin: auto;
	  display: block;
	}
	.item_game_menu_wrap button {
		margin: auto;
		display: block;
		border: 0.1em solid var(--color-purple-light);
		/*border-radius: 0.5em;*/
		border-radius: 3.125rem;
		background-color: var(--color-purple-light);
		color: var(--color-main);
		-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .75) !important;
				box-shadow: 0 0 5px rgba(0, 0, 0, .75) !important;
	}
	.item_game_menu_wrap button:hover {
		/*
		color: var(--color-purple-light);
		*/
		border-color: var(--color-purple-light-hover);
		background-color: var(--color-purple-light-hover);
		color: var(--color-main);
	}
	.item_game_menu_wrap img {
		/*
		border: 0.3em solid var(--bs-orange);
		border-radius: 0.7em;
		*/
		border: .188rem solid var(--color-purple-dark-hover);
		border-radius: .625rem;
	}
	
	.navbar.fixed-top .navbar-collapse, 
	.navbar.sticky-top .navbar-collapse {
		overflow-y: auto;
		max-height: 90vh;
		margin-top:10px;
	}
	.nav-link.no-chevron::after {
		display: none;
	}
}

/*** MEGA MENU END ***/

/** MENU SLIDER **/

.menu-slider .container {
	position: relative;
}

.navbar-slide {
	overflow: hidden;
	position: static;
}

.navbar-slide-control {
	position: absolute;
	top: 0;
	bottom: 0;
	background: transparent;
	color: #fff;
	font-size: 21px;
	border: none;
	padding: 0;
	cursor: pointer;
	z-index: 5;

	display: flex;
	align-items: center;
	align-content: center;
}

.navbar-slide-control.prev {
	left: -15px;
}

.navbar-slide-control.next {
	right: -15px;
}


@media (min-width: 768px) and (max-width: 1399px) {
	.navbar-nav-slide {
		padding-left: 50px;
	}

	.navbar-nav-slide > .nav-home {
		position: absolute;
		left: 12px;
		z-index: 2;
		background: transparent;
	}	
}

@media(min-width: 1400px){
	.navbar-slide-control {
		display: none;
	}
}

@media(max-width: 767px){	
	.menu-slider .container {
		position: unset;
	}
	
	.navbar-slide {
		overflow: visible;
	}
	
	.navbar-slide-control {
		display: none;
	}
}

/* Bootstrap Select */
.btn-select, 
.btn-select:focus,
.btn-select:hover {
	min-height: 34px;
	font-family: inherit;
	font-size: inherit;
	padding: .375rem .75rem;
	border-color: transparent !important;
	border-bottom: 1px solid var(--color-gray) !important;
	outline: none !important;
}

.btn-select.show,
.btn-select.show:focus, 
.btn-select.show:hover {
	border-color: transparent !important;
	border-bottom: 1px solid var(--color-gray) !important;
	outline: none !important;
}

.bootstrap-select .popover-header {
	background-color: var(--color-dark-gray);
	padding: .5rem .75rem;
	font-family: "BebasRegular";
	font-size: 1rem;
	color: var(--color-main);
	line-height: normal;
}

.bootstrap-select .popover-header .close {
	background-color: transparent;
	padding: 0;
	border: 0;
	-webkit-appearance: none;
	float: right;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--color-main);
	text-shadow: none;
	opacity: .5;
	margin-top: -3px;
}

.bootstrap-select .dropdown-menu {
	background-color: var(--bg-secondary);
	font-family: inherit;
	font-size: inherit;
	text-transform: inherit;
}

.bootstrap-select .dropdown-item {
	font-family: inherit;
	font-size: inherit;
	text-transform: inherit;
}

/* Bootstrap Select specific for promotion selector */

[data-id="promotionselector"], [data-id="promotionselector"]:hover, [data-id="promotionselector"]:active {
  padding-left: 12px;
  padding-right: 15px;
  background-color: transparent !important;
  border: none;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-width: medium;
    border-bottom-style: none;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
  color: #ccc !important;
  border-bottom: 1px solid #666 !important;
}

[data-id="promotionselector"] + div.dropdown-menu {
  background-color: var(--bg-white-dark);
  padding-top: 4px;
  padding-bottom: 4px;
  width: 100%;
}

[data-id="promotionselector"] + div.dropdown-menu a {
  background-color: var(--bg-white-dark);
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  font-family: 'BebasRegular';
  font-size: 1.3em !important;
  color: #333;
  white-space: wrap;
  padding-left: 2.2em !important;
  position: relative;
}

[data-id="promotionselector"] + div.dropdown-menu ul > li + li > a {
  border-top: 1px solid #aaa !important;
}

[data-id="promotionselector"] + div.dropdown-menu a::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  left: 0.8em;
  border: 2px solid #888;
  border-radius: 15px;
  transition: background-color 0.2s ease;
  top: 0.65em;
}

[data-id="promotionselector"] + div.dropdown-menu a.selected::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  background-color: #000;
  left: 0.8em;
  top: 0.65em;
  border: 2px solid transparent;
  transition: background-color 0.2s ease;
  scale: 0.5;
}

@media (max-width: 767px) {
	.bootstrap-select .dropdown-item {
		padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x) !important;
		border: none !important;
	}
	[data-id="promotionselector"] + div.dropdown-menu a {
	  padding-top: 10px !important;
	  padding-bottom: 10px !important;
	}
	[data-id="promotionselector"] + div.dropdown-menu a::before {
	  top: 0.75em;
	}
	[data-id="promotionselector"] + div.dropdown-menu a.selected::after {
	  top: 0.75em;
	}
}

/* AFB88 PAGE */
.afbsport-iframe-wrap {
  height: 600px;
  display: block;
  margin-bottom: 50px;
}

/* FOOTER */
footer {
	color: var(--color-gray-light);
}
body:not(.homepage) footer {
	margin-top: 6em;
}
.footer-simple {
  border-top: 1px solid var(--color-gray);
}

@media(max-width: 575px) {
	footer {
		padding-bottom: 120px;
	}
}

.brand-description {
	font-family: "NunitoExtraLight", sans-serif;
	border-top: 1px solid var(--bg-secondary);
	font-size: 1em;
}
.our-mission {
	border-top: 1px solid var(--bg-secondary);
	position: relative;
}
.our-mission::after {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--line-color);
	height: 3px;
}
.our-mission > .row > div + div {
	position: relative;
}
.our-mission > .row > div + div::before {
	content: "";
	position: absolute;
	left: 0px;
	top: 5em;
	bottom: 0;
	width: 1px;
	border-left: 1px solid var(--bg-secondary);
}
.spat-icon {
	float: left;
}
.spat-icon img {
	width: 2.6em !important;
	margin-top: 0.4em;
}
.spat-main {
	font-size: 1.6em;
	text-transform: uppercase;
	padding-left: 62px;
	color: var(--color-white-dark);
}
.spat-desc {
	padding-left: 4.4em;
	font-size: 0.9em;
}
.sub-page-aside-content {
	border-top: 1px solid var(--bg-secondary);
}

/* CARD PROGRESS ITEM */
.card-progress-item {
	display: table;
	width: 100%;
}
.cpi-title {
	float: left;
	text-transform: uppercase;
	font-size: 1.2em;
}
.cpi-desc {
	float: left;
	clear: left;
	font-size: 0.9em;
}
.cpi-time {
	float: right;
	margin-top: -0.8em;
	font-size: 2.5em;
	color: var(--color-white-dark);
}
.cpi-time span {
	font-size: 0.5em;
}
.cpi-progress {
	clear: both;
	height: 0.7em;
	background-color: var(--bg-secondary);
}
.cpi-progress .progress-bar {
	background-color: var(--color-cool-blue);
}
.small-desc {
  font-size: 0.8em;
}

/* BANK */
.bank-items-container {
    /*max-width: 600px;*/
}
.bank-legends {
	font-size: 0.8em;
}
.bank-business-hour {
	font-size: 0.8em;
}
.bic-item img {
	filter: grayscale(1);
}
.bic-item,
.bic-legend {
	position: relative;
}
.bic-legend {
	color: var(--color-white-dark);
	font-size: 0.8em;
}
.bic-item::before,
.bic-legend::before {
	position: absolute;
	content: "";
	left: 4px;
	top: 0;
	bottom: 0;
	width: 3px;
	background-color: var(--color-gray-light);
	border-radius: 2px;
}
.bic-item.active img {
	filter: none;
}
.bic-item.active::before,
.bic-legend.active::before {
	background-color: var(--color-green);
}



.in-page .bank-items .row {
  display: grid;
  grid-template-columns: repeat(8,1fr);
  grid-auto-flow: dense;
}

@media(max-width: 991px) {
	.in-page .bank-items .row {
		grid-template-columns: repeat(5,1fr);
	}
}

@media(max-width: 575px) {
	.in-page .bank-items .row {
		grid-template-columns: repeat(4,1fr);
	}
}

@media(max-width: 480px) {
	.in-page .bank-items .row {
		grid-template-columns: repeat(3,1fr);
	}
}

.in-one-third .bank-items .row {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-auto-flow: dense;
}

@media(max-width: 1199px) {
	.in-one-third .bank-items .row {
		grid-template-columns: repeat(3,1fr);
	}
}

@media(max-width: 991px) {
	.in-one-third .bank-items .row {
		grid-template-columns: repeat(2,1fr);
	}
}

@media(max-width: 767px) {
	.in-one-third .bank-items .row {
		grid-template-columns: repeat(4,1fr);
	}
}

@media(max-width: 640px) {
	.in-one-third .bank-items .row > div {
		margin-bottom: 10px !important;
	}
}

@media(max-width: 360px) {
	.in-one-third .bank-items .row {
		grid-template-columns: repeat(3,1fr);
	}
}


/* SIMPLE CARD */
.sctd-title {
	font-size: 1.2em;
	text-transform: uppercase;
}
.simple-card-title-desc > .sctd-item + .sctd-item {
  border-top: 1px solid var(--bg-secondary);
}
.sctd-desc {
  font-size: 0.9em;
}

/* SIMPLE CARD TITLE IMAGE */
.scti-title {
  font-size: 0.9em;
}
.scti-item img {
  height: 2.2em !important;
  width: auto !important;
  max-width: none;
}
.scti-contentcenter {
  text-align: center;
}
.scti-contentcenter img {
  margin: auto;
}
.scti-contentend {
  text-align: right;
}
.scti-contentend img {
  margin-left: auto;
  margin-right: 0;
}

@media(max-width: 1399px) {
	.spat-main {
	  font-size: 1em;
	}
	.spat-icon img {
	  width: 2.2em !important;
	  margin-top: 0.2em;
	}
	.cpi-title {
	  font-size: 1em;
	}
	.cpi-time {
		font-size: 2em;
	}
	.sctd-title {
	  font-size: 1em;
	}
}
@media(max-width: 991px) {
	.sub-page-aside-title {
	  min-height: 4.4em;
	}
	.cpi-desc {
	  font-size: 0.7em;
	}
	.play-browser {
	  text-align: center;
	}
	.play-browser img {
	  margin: auto;
	}
	.simple-card-title-image {
	  margin-top: 1.5em;
	}
	.logo-group {
	  margin-top: 2em !important;
	}
}
@media(max-width: 767px) {
	.sub-page-aside-title {
	  min-height: auto;
	}
	.our-mission > .row > div + div::before {
		display: none;
	}
	.our-mission > .row > div {
	  margin-top: 1em;
	}
	.bic-item::before, .bic-legend::before {
		width: 5px;
	}
}
@media(max-width: 767px) {
	
}
/* LOGO STACK IMAGE */
.logo-group {
  border: 1px solid var(--bg-secondary);
  position: relative;
  /*
  background-color: #cccccc;
  */
  border-radius: 5px;
}
.logo-group-content {
  display: table;
  text-align: center;
}
.lggr-item {
  display: inline-block;
}
.logo-group-content img {
  height: 45px !important;
  max-width: none;
  width: auto !important;
  
	-webkit-filter: invert(58%) sepia(6%) saturate(202%) hue-rotate(251deg) brightness(90%) contrast(87%);
	   -moz-filter: invert(58%) sepia(6%) saturate(202%) hue-rotate(251deg) brightness(90%) contrast(87%);
		-ms-filter: invert(58%) sepia(6%) saturate(202%) hue-rotate(251deg) brightness(90%) contrast(87%);
		 -o-filter: invert(58%) sepia(6%) saturate(202%) hue-rotate(251deg) brightness(90%) contrast(87%);
			filter: invert(58%) sepia(6%) saturate(202%) hue-rotate(251deg) brightness(90%) contrast(87%);
}
.logo-group-title {
  font-size: 0.9em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  display: table;
  top: -0.8em;
  position: absolute;
  background-color: var(--bg-main);
}
@media(max-width: 480px) {
	.scti-item img {
	  height: 1.8em !important;
	}
}

/* COPYRIGHTS */
.copyright-footer-wrap {
  text-align: center;
  font-size: 12px;
}

/* BREADCRUMBS */
.breadcrumb-wrap {
  font-size: 0.85em;
}
.breadcrumb-item.active {
  color: var(--color-gray-light);
}
.breadcrumb-item a {
  color: var(--color-yellow);
}
.breadcrumb-item + .breadcrumb-item::before {
	color: var(--color-gray-light);
}

/* MAIN CONTENT OF PAGES */
body:not(.homepage) main {
  min-height: 600px;
}

/* INSIDE OF CONTENT & THE WRAPPER (INNER) */
.content-wrap h1,
.content-wrap h2,
.content-wrap h3,
.content-wrap h4,
.content-wrap h5,
.content-wrap h6 {
	margin-bottom: 1em;
}

.content-about_description {
  font-size: 0.8em;
}
.content-about_description h1,
.content-about_description h2,
.content-about_description h3,
.content-about_description h4,
.content-about_description h5,
.content-about_description h6 {
	margin-bottom: 1em;
	font-size: 1.4em;
}

/* CONTACTS AND SOCMEDS */
.floating-socmed {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 2em 5px 10px 7px;
  background-color: var(--color-purple-light);
  border-radius: 0 0.5em 0.5em 0;
  z-index: 999;
}
.floating-socmed::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 2px;
  background-color: #ff0000;
  z-index: 1000;
}
.floating-socmed .contact-outer {
  margin-bottom: 0;
}
.close-flsocmed {
  position: absolute;
  top: 3px;
  font-size: 0.7em;
  border: 1px solid #333;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.3em;
  border-radius: 1em;
  text-align: center;
  color: #222;
  right: 3px;
  cursor: pointer;
}
.contact-wrap, 
.contact-outer,
.floating-socmed {
  display: table;
}
.contact-outer {
	padding-left: 0;
	font-size: 1em;
}
.contact-outer li::marker {
	content: '';
}
.contact-outer li {
  display: table;
}
.contact-outer a {
  width: 2em;
  height: 2em;
  align-items: center;
  display: flex;
  justify-content: center;
  border-radius: 0.5em;
  background-color: var(--color-gray);
}
.contact-outer .fa {
	font-size: 1.6em;
	color: var(--color-white-dark);
}
.contact-outer.display-vertical > li + li {
  margin-top: 0.6em;
}
.contact-outer.display-horizontal {
	display: table;
}
.contact-outer.display-horizontal > li {
	float: left;
}
.contact-outer.display-horizontal > li + li {
  margin-left: 0.6em;
}
.contact-outer a:hover {
	text-decoration: none;
	background-color: var(--color-purple-dark-hover);
}

@media (max-width:991px) {
	.floating-socmed {
		font-size: 0.8em;
	}
	.close-flsocmed {
		font-size: 0.9em;
		line-height: 1.1em;
	}
}
@media (max-width:767px) {
	.floating-socmed {
		font-size: 0.7em;
		padding-top: 2.3em;
	}
	.close-flsocmed {
		line-height: 1.2em;
	}
}
@media (max-width:767px) {
	.floating-socmed {
		font-size: 0.6em;
	}
}

/* iframe */
iframe {
  border-radius: 0.5em;
}

/* Youtube Wrapper */
.youtubeVideoWrapper {
  justify-content: center;
  display: flex;
}

/* Center Wrap */
.center-wrap {
  background-color: #141414;
  border-radius: 0.5em;
  padding: 3em;
}
@media (max-width:767px) {
	.center-wrap {
	  padding: 1em;
	}
}

/* Conditional / Toggling / Switching */
/* header */
/*
header {
	display: none;
}
.frontend .frontend-header,
.backend .backend-header {
	display: block;
}
*/

/* in page body */
.subpage-title {
	position: relative;
	padding-left: 0.75em;
	color: var(--color-white-dark);
}
.subpage-title::before {
	content: "\f0da";
	font-family: "FontAwesome";
	position: absolute;
	left: 0;
	top: 0;
	font-size: 1.1em;
}
.subpage-title-hint {
  padding-left: 1.4em !important;
}
.subpage-title.no-pointer::before {
  display: none;
}

/* SPINNER/LOADER ICON */
#loading {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 10000;
	justify-content: center;
	display: flex;
	align-items: center;
	background-color: rgba(0,0,0,0.75);
	flex-direction: column;
	gap: 5px;
}
#loading .fa-spinner {
	color: #aaa;
}
#loading .text {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
}
@media (max-width:767px) {
	#loading .fa-spinner {
	  font-size: 2.5em;
	}
}
@media (max-width:767px) {
	#loading .fa-spinner {
	  font-size: 2em;
	}
}

/* TABS */
.nav-tabs .nav-link,
.nav-tabs .nav-link .fa {
	color: var(--color-white-darker) !important;
}
.nav-tabs .nav-link.active {
	color: var(--color-gray) !important;
}
.nav-tabs .nav-link.active .fa {
  color: var(--color-gray) !important;;
}
.nav-tabs .nav-link {
	text-decoration: none !important;
}
@media (max-width:991px) {
	.nav-tabs .nav-item {
	  width: 100% !important;
	}
	.nav-tabs .nav-item .nav-link {
	  border-radius: 10px;
	  margin-bottom: 5px;
	  text-align: center;
	}
}
@media (max-width:360px) {
	.nav-tabs .nav-item a {
	  font-size: 0.8em;
	  padding-left: 0.8em;
	  padding-right: 0.8em;
	}
	.nav-tabs .nav-item a .fa {
	  font-size: 1.6em !important;
	}
}

/* REGISTER */

.button-otp-verification {
	position: absolute;
	top: 0;
	right: calc(var(--bs-gutter-x) * .5);
}

.text-otp-verification, 
.phone-otp-verification {
	display: block;
}

.text-otp-verification {
	padding-top: 3px !important;
}

.phone-otp-verification {
	margin-top: 5px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.button-otp-verification #get-otp-code, 
#section-otp-kode #send-otp-code, 
.btn-get-otp-code, 
.btn-send-otp-code {
	width: 130px;
}

.img-flag-sm {
	width: 24px;
}

.get-secure-page {
	position: relative;
}

.get-secure-page form {
	position: relative;
	z-index: 2;
}

.get-secure-page::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	height: 70%;
	width: 50%;
	background-image: url(../../assets/images/icon/user-shield-solid.webp);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left bottom;
	opacity: .055;
	z-index: 1;
}

@media (max-width: 480px) {
	.phone-otp-verification {
		grid-template-columns: 1fr;
	}
}

/* OTP CHANGE EMAIL OR PHONE */
.button-on-side-form-field {
  position: absolute;
  top: 0;
  right: calc(var(--bs-gutter-x) * .5);
}

/* GOOGLE RECAPTCHA */
.grecaptcha-badge {
  display: none !important;
}

/* SUPPORT CHAT */
.custom-live-chat {
	display: table;
	position: fixed;
	z-index: 1100;
	bottom: 0;
	left: 0;
	font-size: 15px;
	width: 100%;
	padding: 1em;
	max-width: 26em;
}
.custom-live-chat.right {
	right: 0;
	left: auto;
	width: auto;
}
.custom-live-chat.goup {
	bottom: 7em;
}
.clc-button {
	display: block;
	cursor: pointer;
}
.clc-button:hover {
	text-decoration: none;
}
.clc-greet {
	font-size: 1.2em;
	text-decoration: none;
	position: absolute;
	bottom: 3em;
	width: 15em;
	line-height: 1.3em;
	color: #222;
	left: 0;
}
.custom-live-chat.right .clc-greet {
	right: 0;
	left: auto;
	text-align: right;
}
.clc-greet p {
	background-color: #fff;
	padding: 0.4em 1em;
	border-radius: 0.5em;
	position: relative;
}
.clc-greet p::after {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	border-left: 0.6em solid transparent;
	border-right: 0.6em solid transparent;
	border-top: 0.6em solid #fff;
	bottom: -0.5em;
	left: 0.8em;
}
.clc-great-close {
	position: absolute;
	font-family: "Arial";
	display: table;
	right: 0.2em;
	top: 0.2em;
	color: #999;
	z-index: 100;
	font-size: 0.8em;
	line-height: 0.95em;
	padding: 0.1em;
	border-radius: 2em;
	border: 1px solid #999;
	text-align: center;
	width: 1.4em;
	height: 1.4em;
}
.custom-live-chat.right .clc-great-close {
	left: 0.2em;
	right: auto;
}
.custom-live-chat.right .clc-greet p::after {
	right: 0.8em;
	left: auto;
}
.clc-btnimg {
	position: relative;
}
.clc-btnstartchat {
	display: table;
	text-align: center;
	margin: auto;
	margin-top: auto;
	margin-bottom: auto;
	background-color: #fd5002;
	padding: 0.5em 1em;
	font-size: 0.9em;
	border-radius: 0.5em;
	margin-top: 0.3em;
	color: #fff;
	margin-bottom: 0.3em;
	line-height: 1em;
}
.clc-photo {
	position: absolute;
	width: 4em !important;
	border-radius: 2em;
	z-index: 10;
}
.custom-live-chat.right .clc-photo {
	right: 0;
	left: auto;
}
.clc-icon {
	height: 2.67em !important;
	border-radius: 0.67em;
	margin-left: 3.33em;
	margin-top: 0.67em;
	margin-bottom: 0.67em;
	width: auto !important;
}
.custom-live-chat.right .clc-icon {
	margin-right: 3.4em;
	margin-left: auto;
}

.clc-iframe {
	max-height: 40em;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1000;
	padding: 1em;
	max-width: 25em;
	height: 0;
	width: 0;
	opacity: 0;
	
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}
.custom-live-chat.right .clc-iframe {
	left: auto;
	right: 0;
}
.clc-iframe.show {
	height: 100%;
	width: 100%;
	opacity: 1;
}

.clc-iframe iframe {
	height: 100%;
	width: 100%;
	background-color: #fff;
	border-radius: 10px;
}

.clc-minimize {
	font-family: "Arial";
	font-size: 0.8em;
	cursor: pointer;
	float: right;
	position: absolute;
	top: 0;
	right: 2em;
	background-color: #fff;
	line-height: 0.8em;
	padding: 0.22em 0.4em;
	color: #000;
	border-radius: 3px 3px 0 0;
}

.clc-notes {
	font-family: "Arial";
	font-size: 0.7em;
	padding-left: 6em;
	position: absolute;
	bottom: 0.5em;
	left: 0;
	margin-left: 1em;
	text-shadow: 1px 1px 4px #000;
	z-index: 100;
}

.custom-live-chat.right .clc-notes {
	margin-left: auto;
	left: auto;
	right: 0;
	margin-right: 1em;
	padding-left: 0;
	padding-right: 6em;
	text-align: right;
	width: 100%;
}

.clc-greet p, 
.custom-live-chat .clc-icon {
	-webkit-box-shadow: 0 0 .8em rgba(0, 0, 0, .45);
			box-shadow: 0 0 .8em rgba(0, 0, 0, .45);
}

@media (max-width: 991px) {
	.clc-btnimg {
		font-size: 0.8em;
	}
	.clc-notes {
		padding-left: 5em;
	}
	.custom-live-chat.right .clc-notes {
		padding-right: 5em;
	}
}
@media (max-width: 767px) {
	.clc-btnimg {
		font-size: 0.7em;
	}
	.clc-notes {
		padding-left: 4em;
		bottom: 0.3em;
	}
	.custom-live-chat.right .clc-notes {
		padding-right: 4em;
	}
}
@media (max-width: 480px) {
	.clc-btnimg {
		font-size: 0.6em;
	}
	.custom-live-chat.right .clc-notes {
		padding-right: 4em;
	}
}

/*
=========================================================
	CARD PROMOTION
=========================================================
*/

.main-content-promotion, 
.item-promotion, 
.card-promotion, 
.card-promotion .banner-promotion, 
.card-promotion .content-promotion, 
.card-promotion .desc-promotion, 
.card-promotion .title-promotion, 
.card-promotion .expired-promotion, 
.card-promotion .action-promotion, 
.card-promotion .detail-promotion, 
.card-promotion .section-promotion, 
.card-promotion .section-promotion .title-section-promotion, 
.card-promotion .section-promotion .body-section-promotion {
	float: left;
	width: 100%;
	position: relative;	
}

.sidemenu-wrap .list-group-item, 
.sidemenu-wrap .list-group-item-action:focus {
	background-color: #141414;
	border-color: var(--color-gray);
	color: var(--color-main);
}

.sidemenu-wrap .list-group-item-action:hover {
	color: #292929;
	background-color: var(--nav-link-hover);
	border-color: var(--nav-link-hover);	
}

.sidemenu-wrap .list-group-item.active {
	color: #292929;
	background-color: var(--nav-link-hover);
	border-color: var(--nav-link-hover);
}

.sidemenu-wrap .list-group-item.disabled, 
.sidemenu-wrap .list-group-item:disabled {
	color: var(--color-gray);
	background-color: var(--color-dark-gray);
}

.main-content-promotion > .item-promotion + .item-promotion {
	margin-top: 1rem;
}

.card-promotion {
	
} 

.card-promotion .banner-promotion {
	
}

.card-promotion .content-promotion {
	background-color: #141414;
	display: grid;
	column-gap: 1rem;
	grid-template-columns: repeat(2,auto);
	padding: .625rem 1rem;
	align-content: center;
	align-items: center;
}

.card-promotion .desc-promotion {
}

.card-promotion .title-promotion {
	
}

.card-promotion .title-promotion h4 {
	margin-bottom: 0;
}

.card-promotion .expired-promotion {
	font-size: .875rem;
	color: var(--color-purple-light);
}

.card-promotion .action-promotion {
	text-align: right;
}

.card-promotion .detail-promotion {
	background-color: #141414;
	padding: .625rem 1rem;	
}

.card-promotion .detail-promotion img {
	display: block;
	max-width: 100%;
}

.card-promotion .section-promotion {
	
}

.card-promotion .section-promotion .title-section-promotion {
	font-weight: 700;
} 

.card-promotion .section-promotion .body-section-promotion {
	
}

@media (max-width: 767px){
	.main-content-promotion {
		margin-top: 1rem;
	}
	
	.card-promotion .content-promotion {
		row-gap: 1rem;
		grid-template-columns: 1fr;
		justify-content: center;
		text-align: center;
	}

	.card-promotion .action-promotion {
		text-align: center;
		margin-bottom: 5px;
	}	
}

/*
.card-promotion, 
.inner-card-promotion, 
.card-promotion .title-promotion, 
.card-promotion .code-promotion,
.card-promotion .decs-promotion, 
.card-promotion .action-promotion, 
.card-promotion .section-promotion, 
.card-promotion .section-promotion .title-section-promotion, 
.card-promotion .section-promotion .body-section-promotion {
	float: left;
	width: 100%;
	position: relative;
}

.card-promotion {
	background: linear-gradient(to bottom,  rgba(113,23,106,1) 0%,rgba(212,185,210,0) 35%,rgba(255,255,255,0) 50%,rgba(212,185,210,0) 65%,rgba(113,23,106,1) 100%);
	padding: 0.125rem;
	margin-bottom: 1.5rem;
	
	-webkit-box-shadow: 0.1875rem 0.3125rem 0.4375rem rgba(0, 0, 0, .75);
			box-shadow: 0.1875rem 0.3125rem 0.4375rem rgba(0, 0, 0, .75);
}

.inner-card-promotion {
	background: var(--bg-main);
	padding: .7rem .7rem 1.5rem;
}

.card-promotion .title-promotion {
	/*
	min-height: 3.75rem;
	*/
	/*
	margin-bottom: 1rem;
	text-align: center;
}

.card-promotion .title-promotion h4 {
	text-align: center;
	margin-bottom: 0;
}

.card-promotion .code-promotion {
	text-align: center;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
}

.card-promotion .code-promotion span {
	background-color: var(--nav-link-hover);
	color: #292929;
	font-weight: 700;
	padding: 0.125rem 0.4375rem;
	border-radius: 0.25rem;
}

.card-promotion .decs-promotion {
	min-height: 18.75rem;
	color: var(--color-white-dark);
	font-size: 0.875rem;
	text-align: left;
	padding-bottom: 1rem;
	margin-bottom: 1.5rem;
}

.card-promotion .section-promotion {
	
}

.card-promotion .section-promotion .title-section-promotion {
	font-weight: 700;
} 

.card-promotion .section-promotion .body-section-promotion {
	
}

.card-promotion .action-promotion {
	text-align: center;	
}
*/



/*
=========================================================
	FLOATING QR CODE DOWNLOAD
=========================================================
*/

.floating-content {
	position: fixed;
	right: -224px;
	top: 50%;
	display: inline-block;
	z-index: 999;
	border-radius: 7px 0 0 7px;
	
	-webkit-box-shadow: 0 2px 3px -1px #000;
	   -moz-box-shadow: 0 2px 3px -1px #000;
			box-shadow: 0 2px 3px -1px #000;
	
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
			transform: translateY(-50%);
			
    -webkit-transition: .5s ease-in-out;
	   -moz-transition: .5s ease-in-out;
			transition: .5s ease-in-out;
}

.floating-content .img-responsive {
	display: block;
    max-width: 100%;
    height: auto;	
}

.floating-content:hover {
	right: 0;
}

.floating-content:hover .bottom-icon {
	-webkit-transform: rotate(-180deg);
	   -moz-transform: rotate(-180deg);
			transform: rotate(-180deg);
}

.floating-content > div {
	float: left;
	position: relative;
	min-height: 196px;
}

.head-floating-content {
	background: linear-gradient(to bottom,  #8239d1 0%,#346dd4 100%);
	padding: 10px;
	padding-top: 35px;
	border-radius: 7px 0 0 7px;
	border-right: 3px solid #d50855;
	width: 44px;
	cursor: pointer;
	font-size: 1.1em;
	line-height: 1.3em;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.head-floating-content .title {
	width: 21px;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	white-space: nowrap;
	
	-webkit-transform: rotate(180deg);
	   -moz-transform: rotate(180deg);
			transform: rotate(180deg);
}

.head-floating-content .bottom-icon {
    -webkit-transition: .5s ease-in-out;
	   -moz-transition: .5s ease-in-out;
			transition: .5s ease-in-out;
	margin-top: 0.2em;
}

.close-fldlapk {
  position: absolute;
  top: 1em;
  font-size: 0.6em;
  border: 1px solid white;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  border-radius: 1em;
  text-align: center;
}

.body-floating-content {
	background: linear-gradient(to bottom, #346dd4 0%,#04989c 100%);
	min-width: 224px;
	padding: 24px 10px;
	text-align: center;
	color: #fff;
}

.body-floating-content .body-title {
	background-color: transparent;
	padding: 0;
	font-size: 16px;
	line-height: 16px;
	margin-bottom: 10px;
}

.floating-content .body-floating-content .body-content a {
	display: table;
	margin: auto;
}

.floating-content .body-floating-content .body-content img {
	width: 110px !important;
	margin: auto;
	border-radius: 7px;
	border: 3px solid #8239d1;
	
    -webkit-transition: .3s ease-in-out;
	   -moz-transition: .3s ease-in-out;
			transition: .3s ease-in-out;
}

.floating-content .body-floating-content .body-content img:hover {
	-webkit-transform: scale(1.1);
	   -moz-transform: scale(1.1);
			transform: scale(1.1);
}

@media (max-width: 991px){
	.head-floating-content {
		font-size: 0.9em;
		line-height: 1.4em;
		width: auto;
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 35px;
	}
	.body-floating-content {
	  padding: 12px 10px;
	}
	.body-floating-content .body-title {
		font-size: 0.9em;
	}
}

@media (max-width: 480px){
	.head-floating-content {
		padding-left: 3px;
		padding-right: 3px;
	}
	.floating-content {
		right: -184px;
	}

	.floating-content > div {
		min-height: 178px;
	}	
	
	.head-floating-content .bottom-icon {
		margin-top: 5px;
	}
	
	.body-floating-content {
		min-width: 184px;
		padding: 18px 10px;
	}
	
	.body-floating-content .body-title {
		font-size: 14px;
		line-height: 14px;
	}
	
	.floating-content .body-floating-content .body-content img {
		width: 100px !important;
	}
}


/*** PLAY FUN DEMO GAMES ***/

.fun-demo-games, 
.fun-demo-games .side-fun-demo-games, 
.fun-demo-games .title-side-fun-demo-games, 
.fun-demo-games .menu-side-fun-demo-games, 
.fun-demo-games .main-fun-demo-games, 
.fun-demo-games .maintenance-fun-demo-games, 
.fun-demo-games .title-fun-demo-games, 
.fun-demo-games .search-fun-demo-games, 
.fun-demo-games .content-fun-demo-games, 
.fun-demo-games .loadmore-fun-demo-games, 
.fun-demo-games .item-fun-demo-game, 
.fun-demo-games .inner-fun-demo-game, 
.fun-demo-games .item-fun-demo-game .content, 
.fun-demo-games .item-fun-demo-game .subtitle {
	float: left;
	width: 100%;
	position: relative;		
}

.fun-demo-games {
	padding: 2rem 0 3rem;
}

.fun-demo-games .side-fun-demo-games {
	
}

.fun-demo-games .title-side-fun-demo-games {
	font-family: 'BebasRegular';
	font-size: 2.375rem;
	color: var(--color-main);
	text-transform: uppercase;
	border-bottom: 2px solid var(--color-main);
	padding-bottom: .313rem;
	margin-bottom: .625rem;
}

.fun-demo-games .menu-side-fun-demo-games {
	/*
	padding-left: .625rem;
	*/
	margin-bottom: 1.25rem;	
}

.fun-demo-games .menu-side-fun-demo-games ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.fun-demo-games .menu-side-fun-demo-games ul > li {
	position: relative;
}

.fun-demo-games .menu-side-fun-demo-games ul > li.maintenance {
	cursor: not-allowed;
}

.fun-demo-games .menu-side-fun-demo-games ul > li.maintenance::before {
	content: '';
	background-image: url(../images/icon/maintenance-only.webp?v=3);
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 4;
	background-size: 80%;
	background-repeat: no-repeat;
	left: 0;
	bottom: 0;
	background-position: center;
	background-color: rgba(250, 216, 79, 0.7);
	border-radius: inherit;
}

.fun-demo-games .menu-side-fun-demo-games ul > li + li {
	margin-top: .313rem;
}
/*
.fun-demo-games .menu-side-fun-demo-games ul > li > a {
	display: flex;
	font-family: 'PlayRegular';
	color: var(--color-main);
	text-decoration: none;
	text-transform: uppercase;
}
*/

.fun-demo-games .menu-side-fun-demo-games ul > li > a {
	display: flex;
	justify-content: start;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: var(--color-dark-gray);
	border-radius: .5rem;
	padding: 5px;
	font-family: 'PlayRegular';
	font-size: 16px;
	color: var(--color-main);
	text-decoration: none;
	text-transform: uppercase;
	border: 1px solid var(--color-gray);
	min-height: 52px;
}

.fun-demo-games .menu-side-fun-demo-games ul > li > a:hover,
.fun-demo-games .menu-side-fun-demo-games ul > li > a:focus,
.fun-demo-games .menu-side-fun-demo-games ul > li.active > a, 
.fun-demo-games .menu-side-fun-demo-games ul > li.active > a:hover, 
.fun-demo-games .menu-side-fun-demo-games ul > li.active > a:focus {
	font-family: 'PlayBold';
	color: var(--color-purple-light);
}

.fun-demo-games .menu-side-fun-demo-games ul > li > a > img {
	width: 31px;
	margin-right: 7px;
}

.fun-demo-games .menu-side-fun-demo-games ul > li > a:hover > img {
	transform: scale(1.2);
}

@media (max-width: 1199px) {
	.fun-demo-games .title-side-fun-demo-games {
		font-size: 2.125rem;
	}
}

.fun-demo-games .main-fun-demo-games {
	min-height: 650px;
}

.fun-demo-games .title-fun-demo-games {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	gap: 1rem;
	padding-bottom: 1rem;
	margin-bottom: 2rem;
}

.fun-demo-games .title-fun-demo-games img {
	height: 3rem;
}

.fun-demo-games .title-fun-demo-games h1 {
	font-size: 2.5rem;
}

.fun-demo-games .search-fun-demo-games {
	margin-bottom: 1.5rem;
}

.fun-demo-games .search-fun-demo-games .input-group-text {
	background-color: #141414 !important;
	border: var(--bs-border-width) solid rgba(255, 255, 255, 0.3) !important;
	border-radius: var(--bs-border-radius-lg) !important;
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	border-right: none !important;
}

.fun-demo-games .search-fun-demo-games .form-control {
    background-color: #141414 !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--bs-border-radius-lg) !important;
    font-size: 1.25rem !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 0 !important;
    margin-left: 0 !important;
	padding-left: 0 !important;
}

.fun-demo-games .search-fun-demo-games .btn.dropdown-toggle, 
.fun-demo-games .search-fun-demo-games .btn.dropdown-toggle:focus, 
.fun-demo-games .search-fun-demo-games .btn.dropdown-toggle:hover {
	border-color: transparent;
}

.fun-demo-games .search-fun-demo-games .dropdown-item {
	color: var(--color-secondary);
}

.fun-demo-games .search-fun-demo-games .dropdown-item:focus, 
.fun-demo-games .search-fun-demo-games .dropdown-item:hover, 
.fun-demo-games .search-fun-demo-games .dropdown-item.active, 
.fun-demo-games .search-fun-demo-games .dropdown-item:active {
	background-color: var(--color-dark-gray);
	color: var(--color-purple-light);	
}

.fun-demo-games .content-fun-demo-games {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-column-gap: 0.625rem;
	grid-row-gap: 1rem;
	grid-auto-flow: dense;
	padding-bottom: 2rem;
	margin-bottom: 2rem;
	position: relative;
	min-height: 45px;
}

.fun-demo-games .content-fun-demo-games .loader, 
.fun-demo-games .content-fun-demo-games .no-results {
	height: 24px;
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	color: var(--color-gray-light);
}

.fun-demo-games .item-fun-demo-game {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	background: linear-gradient(to bottom, rgba(113,23,106,1) 0%,rgba(212,185,210,0) 35%,rgba(255,255,255,0) 50%,rgba(212,185,210,0) 65%,rgba(113,23,106,1) 100%);
	padding: 0.125rem;
	border-radius: 0.313rem;
}

.fun-demo-games .inner-fun-demo-game {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	background: var(--bg-main);
	border-radius: 0.125rem;
}

.fun-demo-games .item-fun-demo-game .content {
	aspect-ratio: 1;
	align-items: center;
	justify-content: center;
	display: flex;
	overflow: hidden;
}

.fun-demo-games .item-fun-demo-game .content::before {
  content: "";
  position: absolute;
  inset: 0; /* top:0; left:0; width:100%; height:100%; */
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(3px);
  transform: scale(1.6);
  background-image: var(--bg-url, none);
}

.fun-demo-games .item-fun-demo-game .content img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
	
	-webkit-mask-image: 
		linear-gradient(
		  to bottom,
		  transparent 0px,
		  black 5px,
		  black calc(100% - 5px),
		  transparent 100%
		),
		linear-gradient(
		  to right,
		  transparent 0px,
		  black 5px,
		  black calc(100% - 5px),
		  transparent 100%
		);

	  -webkit-mask-composite: source-in;
	  -webkit-mask-repeat: no-repeat;

	  mask-image: 
		linear-gradient(
		  to bottom,
		  transparent 0px,
		  black 5px,
		  black calc(100% - 5px),
		  transparent 100%
		),
		linear-gradient(
		  to right,
		  transparent 0px,
		  black 5px,
		  black calc(100% - 5px),
		  transparent 100%
		);

	  mask-composite: intersect;
	  mask-repeat: no-repeat;
}

.fun-demo-games .item-fun-demo-game .subtitle {
	padding: 0.188rem 0.313rem;	
	margin-top: auto;
}

.fun-demo-games .item-fun-demo-game .subtitle h5, 
.fun-demo-games .item-fun-demo-game .subtitle p, 
.fun-demo-games .item-fun-demo-game .play-fun-demo-game h5 {
	font-family: 'PlayRegular';
	text-overflow: ellipsis !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	text-align: center;
}

.fun-demo-games .item-fun-demo-game .subtitle h5, 
.fun-demo-games .item-fun-demo-game .play-fun-demo-game h5 {
	font-size: .875rem;
	line-height: normal;
	color: var(--color-main);
}

.fun-demo-games .item-fun-demo-game .subtitle p {
	font-size: .625rem;
	margin-bottom: 0;
	color: var(--color-purple-light);
	text-transform: uppercase;
	border-top: .5px solid var(--color-gray);
	margin-top: 3px;
	padding-top: 2px;		
}

/* hot game */
.fun-demo-games .content-fun-demo-games .hot::before {
	content: 'HOT';
	position: absolute;
	top: 0.125rem;
	left: 0.125rem;
	background-color: var(--bs-red);
	font-size: 0.625rem;
	text-transform: uppercase;
	font-weight: 700;
	padding: 0 0.313rem;
	border-radius: 0;
	color: var(--color-main);
	z-index: 2;
}

.fun-demo-games .item-fun-demo-game:hover .content, 
.fun-demo-games .item-fun-demo-game:hover .subtitle {
	filter: blur(.313rem);
}

.fun-demo-games .item-fun-demo-game .play-fun-demo-game {
	display: none;
}

.fun-demo-games .item-fun-demo-game:hover .play-fun-demo-game {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 0.625rem;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-direction: column;
	border-radius: 0.125rem;
	/*backdrop-filter: blur(.313rem);*/
	background-color: rgba(255, 255, 255, 0.15);
}

.fun-demo-games .item-fun-demo-game .maintenance-fun-demo-game {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 0.625rem;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-direction: column;
	border-radius: 0.125rem;
	/*backdrop-filter: blur(.313rem);*/
	background-color: rgba(255, 255, 255, 0.55);	
}

.fun-demo-games .item-fun-demo-game .maintenance-fun-demo-game .icon-maintenance {
	margin-bottom: 3px;
}

.fun-demo-games .item-fun-demo-game .maintenance-fun-demo-game .icon-maintenance img {
	width: 75px;
}

.fun-demo-games .item-fun-demo-game .maintenance-fun-demo-game .text-maintenance .btn {
	font-size: 14px;
	background: linear-gradient(to bottom, #e86400 0%,#fedf26 100%);
	border-width: 0;
	color: #111;
	padding: 0.1275rem 1rem;
}

.btn-play {
	width: 3.125rem;
	height: 3.125rem;
	font-size: 1.875rem;
	padding: .313rem .938rem;
	border-radius: 3.125rem;
	text-align: center;
	display: flex;
	align-content: center;
	align-items: center;
	text-align: center;
}

.btn-trans,
.btn-trans:focus {
	background-color: transparent;
	border-color: var(--color-main);
	color: var(--color-main);
}

.btn-trans:hover {
	background-color: var(--color-main);
	color: var(--color-dark-gray);
}

.fun-demo-games .item-fun-demo-game .play-fun-demo-game > * + * {
	margin-top: .75rem;
}

.fun-demo-games .item-fun-demo-game .play-fun-demo-game h5 {
	width: 100%;
	padding: 0 0.625rem;
}

.fun-demo-games .loadmore-fun-demo-games {
	text-align: center;
}

/* SWIPER MENU GAMES */
.swiper-menu-games, 
.swiper-menu-games .swiper-container {
	float: left;
	width: 100%;
	position: relative; 
}

.swiper-menu-games .swiper-container {
	max-width: 100%;
	margin-bottom: 20px;
	padding: 10px 0;
	overflow: hidden;
}

.swiper-menu-games .swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: auto;
	max-width: 190px;
	min-width: 190px;
	height: auto;
	max-height: 65px;
	min-height: 65px;
}

.swiper-menu-games .swiper-slide > a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: var(--color-dark-gray);
	border-radius: .5rem;
	padding: 10px;
	font-size: 16px;
	color: var(--color-main);
	border: 1px solid var(--color-gray);
	text-decoration: none;
}

.swiper-menu-games .swiper-slide > a:hover, 
.swiper-menu-games .swiper-slide > a:focus,
.swiper-menu-games .swiper-slide > a.active {
	border-color: var(--color-purple-dark-hover);
}

.swiper-menu-games .swiper-slide > a > img {
	height: 41px;
	width: auto;
}

.swiper-menu-games .swiper-slide > a > img.glx-play {
	height: 18px;
}

.swiper-menu-games .swiper-slide > a > img.pgsoft, 
.swiper-menu-games .swiper-slide > a > img.pgsoft-color {
	height: 30px;
}

.swiper-menu-games .swiper-slide > a.maintenance {
	background-color: rgba(196, 196, 196, 0.35);
	cursor: not-allowed;
}

.swiper-menu-games .swiper-slide > a.maintenance::before {
	content: '';
	background-image: url(../images/icon/icon-robot-maintenance.webp);
	position: absolute;
	height: 120%;
	width: 40%;
	z-index: 4;
	background-size: 100%;
	background-repeat: no-repeat;
	left: -10px;
}

.swiper-menu-games .swiper-slide > a.maintenance::after {
	content: 'Pemeliharaan';
	position: absolute;
	left: 30%;
	display: flex;
	background: linear-gradient(to bottom,  #e86400 0%,#fedf26 100%);
	border-radius: .3rem;
	padding: 0 10px;
	font-size: 16px;
	color: #111;
	font-weight: bold;
	line-height: normal;
	opacity: 1;
}

.swiper-menu-games .swiper-slide > a.maintenance > img {
	/*filter: blur(.313rem);*/
}

.swiper-menu-games .swiper-button-next, .swiper-menu-games .swiper-button-prev {
	color: #f9f9f9;
	opacity: 0;
	transition: opacity 0.3s ease;
	background-color: var(--color-gray-light);
	width: 35px;
	height: 35px;
	font-size: 20px;
	border-radius: 50px;
	display: flex;
	justify-content: center;
	align-content: center;
	text-align: center;
	border: 1px solid #f9f9f9;
	margin-top: -17px;
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .75);
			box-shadow: 0 0 10px rgba(0, 0, 0, .75);
}

.swiper-menu-games .swiper-button-next::after, 
.swiper-menu-games .swiper-button-prev::after {
	font-size: 20px;
	font-weight: 700;
}

.swiper-menu-games .swiper-container:hover .swiper-button-next,
.swiper-menu-games .swiper-container:hover .swiper-button-prev {
	opacity: .95;
}

.swiper-menu-games .swiper-button-next.swiper-button-disabled,
.swiper-menu-games .swiper-button-prev.swiper-button-disabled {
	display: none;
}

/* PROVIDER MENU GAMES */
.provider-menu-games, 
.main-provider-menu-games, 
.main-provider-menu-games .item-provider, 
.seeall-menu-provider-games {
	float: left;
	width: 100%;
	position: relative; 	
}

.provider-menu-games {
	margin-bottom: 20px;
	padding: 10px 0;
}

.main-provider-menu-games {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-column-gap: 10px;
	grid-row-gap: 10px;
}

.main-provider-menu-games {
	/*height: 170px;*/
	overflow: hidden;
}

.main-provider-menu-games::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 30px;
	background: linear-gradient(to bottom, rgba(20,20,20,0) 0%,var(--bg-main) 100%);
	display: none;
}

.main-provider-menu-games.with-after::after {
    display: block; /* muncul hanya saat perlu */
}

.main-provider-menu-games .item-provider {
	position: relative;
	min-height: 56px;
	max-height: 56px;
}

.main-provider-menu-games .item-provider > a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background: var(--color-dark-gray);
	border-radius: .5rem;
	padding: 10px;
	font-size: 16px;
	color: var(--color-main);
	border: 1px solid var(--color-gray);
	text-decoration: none;
}

.main-provider-menu-games .item-provider > a:hover, 
.main-provider-menu-games .item-provider > a:focus,
.main-provider-menu-games .item-provider > a.active {
	border-color: var(--color-purple-dark-hover);
}

.main-provider-menu-games .item-provider > a > img {
	height: 34px;
	width: auto;
}

/* FIX 2026-03-15: Fat Panda default grayscale (matches SVG adaptive filter) */
.main-provider-menu-games .item-provider > a > img.fatpanda,
.swiper-menu-games .swiper-slide > a > img.fatpanda {
	filter: grayscale(1) brightness(1.2);
}
.main-provider-menu-games .item-provider > a:hover > img.fatpanda,
.main-provider-menu-games .item-provider > a:focus > img.fatpanda,
.main-provider-menu-games .item-provider > a.active > img.fatpanda,
.swiper-menu-games .swiper-slide > a:hover > img.fatpanda,
.swiper-menu-games .swiper-slide > a.active > img.fatpanda {
	filter: none;
}

.main-provider-menu-games .item-provider > a > img.glx-play {
	height: 18px;
}

.main-provider-menu-games .item-provider > a > img.pgsoft, 
.main-provider-menu-games .item-provider > a > img.pgsoft-color {
	height: 24px;
}

.main-provider-menu-games.expanded::after {
  display: none;
}

.seeall-menu-provider-games {
	text-align: center;
}

.seeall-menu-provider-games .btn {
	padding: 0;
	border: none !important;
	font-size: 0.875rem;
}

.seeall-menu-provider-games .btn:hover {
	color: var(--color-purple-light);	
} 
.seeall-menu-provider-games .btn:focus {

}

.seeall-menu-provider-games .ico-button {
	margin-right: 5px;
}

.main-provider-menu-games .item-provider > a.maintenance {
	background-color: rgba(196, 196, 196, 0.35);
	cursor: not-allowed;
}

.item-fav-provider > a.maintenance {
	cursor: not-allowed;
}
/*
.main-provider-menu-games .item-provider > a.maintenance::before {
	content: '';
	background-image: url(../images/icon/icon-robot-maintenance.webp);
	position: absolute;
	height: 115%;
	width: 35%;
	z-index: 4;
	background-size: 100%;
	background-repeat: no-repeat;
	left: -5px;
}
*/

.main-provider-menu-games .item-provider > a.maintenance::before,
.item-fav-provider > a.maintenance::before {
	content: '';
	/*background-image: url(../images/icon/icon-robot-maintenance.webp);*/
	background-image: url(../images/icon/maintenance-only.webp?v=3);
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 4;
	background-size: 80%;
	background-repeat: no-repeat;
	left: 0;
	top: 0;
	background-position: center;
	background-color: rgba(250, 216, 79, 0.7);
	border-radius: inherit;
}

.main-provider-menu-games .item-provider > a.maintenance::after {
	content: 'Pemeliharaan';
	display: none !important;
	position: absolute;
	left: 30%;
	display: flex;
	background: linear-gradient(to bottom,  #e86400 0%,#fedf26 100%);
	border-radius: .3rem;
	padding: 0 10px;
	font-size: 14px;
	color: #111;
	font-weight: bold;
	line-height: normal;
	opacity: 1;
}

.main-provider-menu-games .item-provider > a.maintenance > img {
	/*filter: blur(.313rem);*/
}

.dropdown-menu.megamenu .item_game_menu_wrap.maintenance {
	cursor: not-allowed;
}

.dropdown-menu.megamenu .item_game_menu_wrap.maintenance::before {
	content: '';
	background-image: url(../images/icon/maintenance-only.webp?v=3);
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 4;
	background-size: 85%;
	background-repeat: no-repeat;
	left: 0;
	top: 0;
	background-position: center;
	background-color: rgba(250, 216, 79, 0.7);
	border-radius: inherit;
}

.dropdown-menu.megamenu .item_game_menu_wrap.menu_providers.maintenance::before {
	content: '';
	background-image: url(../images/icon/maintenance-only.webp?v=3);
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 4;
	background-size: 85%;
	background-repeat: no-repeat;
	left: 0;
	top: 0;
	background-position: center;
	background-color: rgba(250, 216, 79, 0.48);
	border-radius: 20%;
}
/*
@media(min-width: 481px) {
	.main-provider-menu-games {
		height: auto !important;
	}
	.seeall-menu-provider-games {
		display: none;
	}
}
*/

@media(min-width: 1400px) {
	.fun-demo-games .menu-side-fun-demo-games ul > li > a {
		padding: 5px 10px;
	}
}

@media(max-width: 1199px) {
	.fun-demo-games .content-fun-demo-games {
		grid-template-columns: repeat(6, 1fr);	
	}
	
	.main-provider-menu-games .item-provider > a.maintenance::before {
		left: -5px;
	}
	
	.main-provider-menu-games .item-provider > a.maintenance::after {
		padding: 0 5px;
		left: 25%;
	}
	
	.fun-demo-games .menu-side-fun-demo-games ul > li > a {
		font-size: 14px;
	}
	
	.fun-demo-games .menu-side-fun-demo-games ul > li > a > img {
		width: 26px;
		margin-right: 5px;
	}
}

@media(max-width: 991px) {
	.fun-demo-games .content-fun-demo-games {
		grid-template-columns: repeat(4, 1fr);	
	}
	
	.swiper-menu-games .swiper-slide {
		max-width: 150px;
		min-width: 150px;
		max-height: 50px;
		min-height: 50px;
	}
	
	.swiper-menu-games .swiper-slide > a > img {
		height: 35px;
	}
	
	.swiper-menu-games .swiper-slide > a > img.pgsoft, 
	.swiper-menu-games .swiper-slide > a > img.pgsoft-color {
		height: 25px;
	}
	
	.swiper-menu-games .swiper-slide > a.maintenance::after {
		left: 27%;
		padding: 0 5px;
		font-size: 14px;
	}
	
	.main-provider-menu-games {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.main-provider-menu-games .item-provider {
		min-height: 50px;
		max-height: 50px;
	}
	
	.main-provider-menu-games .item-provider > a {
		padding: 7px;
	}
	
	.main-provider-menu-games .item-provider > a > img {
		height: 30px;
	}
	
	.main-provider-menu-games .item-provider > a > img.pgsoft, 
	.main-provider-menu-games .item-provider > a > img.pgsoft-color {
		height: 20px;
	}
	
	.main-provider-menu-games .item-provider > a > img.glx-play {
		height: 14px;
	}
	
	.main-provider-menu-games .item-provider > a.maintenance::after {
		left: 27%;
		padding: 0 5px;
		font-size: 14px;
	}
}

@media(max-width: 767px) {
	.fun-demo-games .menu-side-fun-demo-games {
		padding-left: 0;
	}
	
	.fun-demo-games .menu-side-fun-demo-games ul {
		display: grid;
		align-items: center;
		justify-content: space-between;
		grid-template-columns: repeat(3, 1fr);
		grid-column-gap: 10px;
		grid-row-gap: 5px;		
	}
	
	.fun-demo-games .menu-side-fun-demo-games ul > li + li {
		margin-top: 0;
	}
	
	.fun-demo-games .menu-side-fun-demo-games ul > li > a {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background-color: var(--color-dark-gray);
		border-radius: .5rem;
		padding: 5px;
		font-size: 16px;
		color: var(--color-main);
		border: 1px solid var(--color-gray);
		text-decoration: none;
		min-height: 50px;
	}
	
	.fun-demo-games .content-fun-demo-games {
		grid-template-columns: repeat(4, 1fr);
	}
	
	.fun-demo-games .item-fun-demo-game .content img {
		min-height: 1px;
	}	
	
	.fun-demo-games .search-fun-demo-games .dropdown-item {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
		padding-top: 7px !important;
		padding-bottom: 7px !important;
		border-top: none;
	}
}

@media(max-width: 575px) {
	.main-provider-menu-games .item-provider > a.maintenance::after {
		font-size: 12px;
	}
}

@media(max-width: 480px) {
	.fun-demo-games .menu-side-fun-demo-games ul {
		grid-template-columns: repeat(2, 1fr);			
	}
	
	.fun-demo-games .menu-side-fun-demo-games ul > li > a {
		min-height: 42px;
	}
	
	.fun-demo-games .content-fun-demo-games {
		grid-template-columns: repeat(3, 1fr);	
	}
	
	.swiper-menu-games .swiper-button-next, .swiper-menu-games .swiper-button-prev {
		opacity: .95;
	}
	
	.fun-demo-games .item-fun-demo-game .content img {
		min-height: 1px;
	}
	
	.main-provider-menu-games {
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 10px;
		grid-row-gap: 5px;
	}
	
	.main-provider-menu-games .item-provider {
		min-height: 42px;
		max-height: 42px;
	}
	
	.main-provider-menu-games .item-provider > a {
		padding: 5px;
	}
	/*
	.main-provider-menu-games .item-provider:last-child {
		justify-self: center;
		width: 50%;
		grid-column: 1 / -1;
	}
	
	.main-provider-menu-games {
		height: 120px;
		overflow: hidden;
	}
	*/
	.main-provider-menu-games::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 30px;
		background: linear-gradient(to bottom, rgba(20,20,20,0) 0%,var(--bg-main) 100%);
	}
	
	.main-provider-menu-games .item-provider > a.maintenance::before {
		left: 2%;
		height: 45px;
		width: 45px;
	}
}

@media(max-width: 360px) {
	.fun-demo-games .item-fun-demo-game .content img {
		min-height: 92px;
	}

	.fun-demo-games .menu-side-fun-demo-games ul > li > a {
		font-size: 14px;
	}
	
	.fun-demo-games .menu-side-fun-demo-games ul > li > a > img {
		width: 21px;
	}		
}

/* COLLAPSIBLE CONTENT */
.collapsible-content {
	position: relative;
}

.collapsible-content .collapsible-text {
	position: relative;
	height: 3rem;
	overflow: hidden;
}

.collapsible-content .collapsible-text::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	background: linear-gradient(to bottom, rgba(20,20,20,0) 0%,rgb(20, 20, 20) 100%);
}

.collapsible-text.expanded::after {
  display: none;
}

.collapsible-content .collapsible-action {
	text-align: center;
	margin-top: -.625rem;
}

.collapsible-content .collapsible-action .btn {
	padding: 0;
	border: none !important;
}

.collapsible-content .collapsible-action .btn:hover {
	color: var(--color-purple-light);	
} 
.collapsible-content .collapsible-action .btn:focus {

}

.collapsible-content .collapsible-action .btn > span {
	display: block;
}

.collapsible-content .collapsible-action .btn > span.ico-button {
	font-size: 1.313rem;
}

.collapsible-content .collapsible-action .btn > span.txt-button {
	font-size: 0.875rem;
	margin-top: .2rem;
}

@media(max-width: 767px) {
	.collapsible-content .collapsible-action .btn > span.ico-button {
		font-size:  0.875rem;
	}

	.collapsible-content .collapsible-action .btn > span.txt-button {
		font-size: 0.75rem;
		margin-top: .15rem;
	}	
}

/* MODAL */

.modal-content {
	color: var(--color-light-black);
}
.subtitle-modalform {
  background-color: #004567;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
}
.modal-body-section + .modal-body-section {
  margin-top: 1em;
}

/* DEPOSIT FORM */
.bank-destination-card {
  max-width: 400px;
}
.card-text.repeater-wrapper > div + div {
	border-top: 1px solid #fff;
}

.bankqrcode {
	max-width: 160px;
	position: relative;
}
.download-bankqrcode {
	/*vertical-align: bottom;*/
	display: block;
}
.bankqrcode::before {
  position: absolute;
  content: "sedang loading gambar. tunggu...";
  left: 0;
  width: 160px;
  font-size: 0.8em;
  top: -10px;
  color: #222;
  background-color: #fff;
  line-height: 1em;
  padding: 5px 10px;
  border-radius: 5px;
  box-sizing: border-box;
}

li.no-bullet {
  list-style-type: none;
}

/* CARD PROMO */
.promo-info-card .card-title {
	background-color: var(--color-purple-light-hover);
}

.promo-info-card .card-text {
	background-color: var(--color-purple-light);
}

/* GAMES ICON */
.game-maintenance {
  position: relative !important;
  cursor: not-allowed;
}

.game-maintenance::after {
  position: absolute;
  background-color: rgba(255,0,0,0.5);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: url("../images/icon/maintenance-game.webp");
  background-size: 90%;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  z-index: 100;
}

/* RECEIPT IMAGE */
#preview-image-receipt,
#preview-image-upload {
	max-width: 280px;
	width: 100%;
}

/* REFERRAL TABLE */
.about-referral h1,
.about-referral h2,
.about-referral h3,
.about-referral h4,
.about-referral h5,
.about-referral h6 {
	margin-bottom: 0.6em;
}
.about-referral ul {
	padding-left: 1em;
}
.member-referral-comm-table-wrap {
	float: left;
	margin-right: 1.5em;
	width: 40%;
}
#member-referral-comm-table {
  color: var(--table-striped-color);
  margin-bottom: 0.5em;
}

@media(max-width: 767px) {
	.member-referral-comm-table-wrap {
	  float: none;
	  margin-right: 0;
	  width: 100%;
	  margin-bottom: 1em;
	}
}

/* MESSAGE */
.unread-message {
  position: relative;
  display: inline;
  margin-right: 20px;
}
.unread-message::before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  left: 0;
  top: 5px;
  background-color: rgb(26, 179, 28);
  border-radius: 10px;
}

.caption-image {
	font-size: 0.9em;
	text-align: center;
}

/**********************
MENU SIDEBAR
***********************/

.login-sidebar {
}

@media(max-width: 767px) {
	.dropdown-menu.megamenu {
		padding-top: 0;
	}
	.dropdown-menu.megamenu .row {
		margin-top: 0 !important;
		margin-left: -25px;
		margin-right: -23px;
	}
	.dropdown-menu.megamenu .row > div {
		width: 50%;
	}
	.login-sidebar .login-header {
		float: none;
		padding-top: 0;
		padding-left: 15px;
		padding-right: 15px;
		padding-bottom: 15px;
	}
	.login-sidebar .btn-google {
	  width: 100%;
	}
	.login-sidebar .or-separator {
	  margin-top: 0 !important;
	  margin-bottom: 0 !important;
	}
	.login-sidebar .or-separator::before,
	.login-sidebar .or-separator::after {
		width: 30%;
	}
	
	.login-sidebar #passwordHelp a {
		color: #bebebe;
	}
}

/*
.copyttc {
  left: 405px;
  position: absolute;
  top: 0;
  height: 100%;
}
*/
#form_transfer_confirm #toAcc {

}
@media(max-width: 500px) {
	/*
	.copyttc {
		position: absolute;
		left: auto;
		right: 0;
		border-bottom: transparent !important;
	}
	*/
	#form_transfer_confirm #toAcc {

	}
}

/* swal sweetalert */
.swal2-popup .swal2-actions {
  font-size: 0.8em;
}
.swal2-popup {
  background-color: #affef7 !important;
  box-shadow: 1px 1px 74px rgba(255,255,255,0.3);
}
.swal2-popup .swal2-close {
  color: #3289d6 !important;
}
.swal2-popup .swal2-styled:focus {
	outline: none !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	-ms-box-shadow: none !important;
	-0-box-shadow: none !important;
	box-shadow: none !important;
}
.swal2-container.swal2-shown {
  background-color: rgba(0, 0, 0, 0.8) !important;
}
.swal2-popup .swal2-styled.swal2-cancel {
  background-color: #60a0a2 !important;
}

/* buttons */
@media (max-width: 575px) {
	#form_login .btn-in-form,
	#form_register .btn-in-form{
	  width: 100%;
	  font-size: 1.2em;
	  padding-left: 0;
	  padding-right: 0;
	  padding-top: 0.6em;
		padding-bottom: 0.6em;
	}
	.offer-register-forgotpassword > div,
	.offer-login-inregisterform > div {
	  text-align: center !important;
	}
	#AgreeTOS + label {
		width: 88%;
	}
}


/* BACK BUTTON MOBILE */
.back-header {
  display: flex;
  align-items: center;
  padding: 14px 10px 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  background-color: #242424;
}

.back-header .back-button {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.8em;
  width: 100%;
  color: #bbbbbb;
  line-height: 2em;
}

.back-header .back-button svg {
  margin-right: 8px;
  stroke: #bbbbbb;
  width: 14px;
  height: 14px;
  position: relative;
  top: -0.01em;
}

.back-header .back-button:hover {
  color: #cccccc;
}

.back-header .back-button:hover svg {
  stroke: #cccccc;
}

.text-with-icon {
  position: relative !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  background-color: #945a00;
  display: table;
}
.twi-icon {
  position: absolute;
  left: 15px;
  top: 8px;
}
.twi-icon img {
  width: 20px;
}
.twi-desc {
  color: #fff;
  padding-left: 30px;
  line-height: 1.4em;
}

/*** MOBILE BOTTOM MENU ***/

.mobile-bottom-menu {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--bg-main);
	z-index: 9999;
	padding: 5px 0;
	box-shadow: 0px 1px 10px rgba(255, 255, 255, .335);
}

.mobile-bottom-menu.second-pos {
  bottom: 4em;
  padding-top: 2px;
}
.mobile-bottom-menu.second-pos a {
  border-radius: 8px;
  color: #111111;
  font-size: 1em;
}
.mobile-bottom-menu.second-pos a:hover {
  color: #131313;
}
.mobile-bottom-menu.second-pos a.active {
  background-color: var(--color-purple-light);
  border-color: var(--color-purple-light);
  color: #111;
}


.main-bottom-menu {
	display: flex;
	justify-content: center;
	align-items: center;
}

.nav-bottom-menu {
	width: 100%; 
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-item-bottom {
	flex: 1;
	text-align: center;
}

.nav-item-bottom a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--color-main);
	font-size: 12px;
	text-decoration: none;
}

.nav-item-bottom a:hover, 
.nav-item-bottom a.active, 
.nav-item-bottom a.active:hover {
	color: var(--color-purple-light);
	/*text-shadow: 0 0 5px rgba(246, 29, 230, .75);*/
}

.nav-item-bottom .ico {
	width: 24px;
	height: 24px;
	margin-bottom: 5px;
}

.nav-item-bottom .ico img {
	width: 100%;
	height: auto;
}

.nav-item-bottom .text {
	font-size: 11px;
	white-space: nowrap;
}

.nav-bottom-menu .nav-item-bottom.center-item {

}

.nav-bottom-menu .nav-item-bottom.center-item .ico {
	background-color: var(--bg-main);
	padding: 2px;
	border-radius: 50%;
	margin-bottom: 5px;
	transform: scale(2.5) translateY(-4px);
}

.bottom-menu-popover {
	/*transform: translate3d(103px, -90px, 0px) !important;*/
	bottom: 35px !important;
	z-index: 9999;
}

.bottom-menu-popover .popover-header {
	background-color: var(--color-purple-dark-hover);
	color: var(--color-main);
}

.bottom-menu-popover .popover-body {
	background-color: var(--bg-secondary);
	padding-top: .5rem;
	padding-bottom: .5rem;
}

.bottom-menu-popover .popover-body a {
	display: block;
	color: var(--color-main);
	font-size: 14px;
	text-transform: uppercase;
	text-decoration: none;
}

.bottom-menu-popover .popover-body a + a {
	margin-top: .125rem;
}

.bottom-menu-popover .popover-body a:hover {
	font-weight: 700;
}

.bottom-menu-popover .popover-arrow {
	
}

.bottom-menu-popover .popover-arrow::before, 
.bottom-menu-popover .popover-arrow::after {
	border-top-color: var(--bg-secondary) !important;
}

/** Live Chat support buttom menu **/

#live-chat-box {
	display: none;
	position: fixed;
	right: 15px;
	bottom: 50px;
	width: 80%;
	max-width: 400px;
	height: 60%;
	max-height: 400px;
	background: transparent;
	/*box-shadow: 0 0 10px rgba(0,0,0,0.2);*/
	z-index: 9999;
	overflow: hidden;
}

#live-chat-header {
	text-align: right;
}

#live-chat-content {
	height: 100%;
	overflow: hidden;
}

#live-chat-content iframe {
	border-radius: 0;
}

.close-live-chat-box {
	background: var(--bg-secondary);
	border: none !important;
	font-size: 11px;
	text-transform: uppercase;
	line-height: normal;
	color: var(--color-main);
	cursor: pointer;
	padding: 3px 10px 0;
	transform: translateY(3px);
}

.live-chat-dekstop {
	position: fixed;
	bottom: 0;
	right: 15px;
	background-color: #CE1D1D;
	border-radius: 4px 4px 0px 0px;
	box-shadow: rgba(0, 0, 0, 0.125) 0px 0.362176px 0.941657px -1px,rgba(0, 0, 0, 0.18) 0px 3px 7.8px -2px;
	z-index: 9999;
}

.live-chat-dekstop a {
	color: #fff;
	font-size: 14px;
	font-family: 'GothamBold';
	text-decoration: none;
	padding: 7px 15px;
	display: flex;
	justify-content: space-between;
	align-content: center;
	align-items: center;
	gap: 50px;
}

.live-chat-dekstop svg {
	height: 21px;
}

@media(max-width: 575px) {
	/* adjust to offcanvas */
	#offcanvasNavbar .navbar-nav {
		padding-bottom: 4rem;
	}
	
	#live-chat-box {
		bottom: 90px;
	}
}

/*** Realtime Feed DP WD ***/

.realtime-latest-dpwd {
	height: 180px;
	max-height: 180px;
	padding: 10px;
	border: 1px solid var(--bg-secondary);
	border-radius: 4px;
	overflow: hidden;
}

.realtime-latest-dpwd .list-latest-dpwd {
	list-style: none;
	padding: 0;
	margin: 0;
}

.realtime-latest-dpwd .list-latest-dpwd > .item-latest-dpwd {
	background-color: var(--color-dark-gray);
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: space-between;
	border: 1px solid var(--bg-secondary);
	padding: 3px 7px;
	border-radius: 4px;
}

.realtime-latest-dpwd .list-latest-dpwd > .item-latest-dpwd + .item-latest-dpwd {
	margin-top: 7px;
}

.realtime-latest-dpwd .latest-player {
	font-size: 12px;
}

.realtime-latest-dpwd .latest-amount {
	font-size: 12px;
	color: var(--color-purple-light);
}

.fixed-latest-dpwd {
	position: fixed;
	bottom: 15px;
	left: -100%;
	background-color: var(--color-purple-light-hover);
	font-size: 14px;
	color: #ffffff;
	padding: 5px 15px;
	border: 2px solid var(--color-purple-dark-hover);
	border-radius: 7px;
	box-shadow: 0 0 10px rgba(0, 0, 0, .75);
	z-index: 9;
	transition: left 0.5s ease;
}

.fixed-latest-dpwd .highlight {
	color: var(--color-yellow);
}

@media(max-width: 575px) {
	.fixed-latest-dpwd {
		bottom: 90px;
		font-size: 11px;
		padding: 5px 10px 3px;
		border: 1px solid var(--color-purple-dark-hover);
		border-radius: 5px;
	}
}

/*** iFrame Game ***/

body.on-play-game {
	margin: 0;
	padding: 0;
	background: #0d0d0d;
	font-family: "NunitoLight", sans-serif;
	font-size: 16px;
	color: #f9f9f9;
	min-width: 320px;
	overflow-x: hidden;
}

.iframe-container {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--bg-main);
}

#iframeGames {
	width: 100% !important;
	height: 100% !important;
	border: none !important;
	border-radius: 0 !important;
}

#iframeGames {
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}
#iframeGames.show {
	opacity: 1;
}

body.on-apk .iframe-container {
	height: calc(100vh - 50px) !important;
}

/*** TOP Download Android ***/

.top-download-apk {
	background-color: var(--color-dark-gray);
	padding: .5rem 0;
	min-width: 320px;
}

.top-download-apk .container {
	overflow: unset;
}

.top-download-apk .main-download-apk {
	display: grid;
	grid-template-columns: fit-content(100%) auto fit-content(100%);
	gap: 10px;
	position: relative;
}

.top-download-apk .main-download-apk > div {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-direction: column;
}

.top-download-apk .content-download-apk > p {
	margin-bottom: 0;
}

.top-download-apk .logo-download-apk img {
	width: 45px;
}

.top-download-apk .close-download-apk {
	display: flex;
	width: 20px;
	height: 20px;
	justify-content: center;
	align-content: center;
	align-items: center;
	align-self: flex-end;
	margin-top: -10px;
	margin-bottom: 5px;
	color: var(--color-gray-light);
}

@media(max-width: 360px) {
	.top-download-apk .logo-download-apk img {
		width: 35px;
	}

	.top-download-apk .content-download-apk {
		font-size: 13px;
	}
	
	.top-download-apk .action-download-apk .btn {
		font-size: 13px;
		padding: 2px 15px;
	}
	
	.top-download-apk .close-download-apk {
		margin-top: -5px;
		margin-bottom: 0px;
	}
}

.download-android-wrap {
	width: 75%;
}

@media(max-width: 991px) {
	.download-android-wrap {
		width: 100%;
	}
}

/*** Page Access Restricted ***/

html#restricted,
html#restricted body,
html#restricted main {
	height: 100%;
}
html#restricted main {
	min-height: auto;
}

.access_restricted_wrap {
  max-width: 600px;
}

/** Maintenance Popup **/
/* Overlay gelap */
#maintenance-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 9998;
}

#maintenance-overlay-page {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9998;
	background: linear-gradient(
      rgba(0, 0, 0, 0.5),   /* hitam transparan */
      rgba(0, 0, 0, 0.5)
    ),
    url('../images/bg/under-maintenance-web.webp?v=2');
	background-size: cover;
	background-position: center;
}

/* Popup box */
#maintenance-popup {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	padding: 20px 30px;
	border-radius: 10px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
	z-index: 9999;
	max-width: 400px;
	text-align: center;
	font-family: Arial, sans-serif;
	color: #444;
}

#maintenance-popup h2 {
	margin-top: 0;
	color: #d9534f;
}

#maintenance-popup p {
	margin: 15px 0;
	line-height: 1.4;
	color: 
}

#maintenance-popup button {
	padding: 8px 16px;
	background-color: #5cb85c;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

#maintenance-popup button:hover {
	background-color: #4cae4c;
}
@media(max-width: 767px) {
	#maintenance-popup {
		left: 10%;
		right: 10%;
		transform: translate(0, -50%);
		max-width: auto;
	}
}
@media(max-width: 560px) {
	#maintenance-popup {
		left: 5%;
		right: 5%;
		transform: translate(0, -50%);
		max-width: auto;
	}
}


/* ======================================
*		THEME ADAPTED BRAND is HERE
 ======================================== */
 
.bg-offcanvas {
	backdrop-filter: unset;
	box-shadow: none !important;
	background: var(--bg-menu) !important;
}
.bg-offcanvas.show {
	background: var(--bg-main) !important;
}
@media(max-width: 767px) {
	.bg-offcanvas {
		background: var(--bg-main) !important;
	}	
}

 .spat-icon img {
	-webkit-filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(358deg) brightness(1108%) contrast(103%);
			filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(358deg) brightness(1108%) contrast(103%);
 }
 
 .header-back .peak-menu nav {
	background-color: rgba(0, 0, 0, 0.48);
	border-radius: 5px;
 }

:root {
	--bg-menu: #232323;
	
	--color-rosegold-ver-hover: linear-gradient(to bottom, #A67C00 0%, #6C002F 100%);
	--color-rosegold-hor-hover: linear-gradient(135deg, #A67C00 0%, #6C002F 100%);
	--color-gold-border-hover: #A67C00;
	--color-rosegold-text-hover: #fff;
	
	--color-rosegold-ver: linear-gradient(to bottom, #D4AF37 0%, #E33750 100%);
	--color-rosegold-hor: linear-gradient(135deg, #D4AF37 0%, #E33750 100%);
	--color-gold-border: #D4AF37;
	--color-rose-border: #E33750;
	--color-rosegold-text: #571f22;
	--color-campagne: #E7D5A9;
	
	--color-red-main: #f00308;
}
	
  /*** ITEM GAME MENU WITH DETAILS ***/ 
.navbar .megamenu {
	background: var(--bg-menu);
	border-radius: 0 0 0.6em 0.6em;
	border-top: none;
}

.navbar .bg-offcanvas.show .megamenu {
	background: var(--bg-menu);
}

.navbar .megamenu.hot_game, 
.navbar .megamenu.slot {
	/*
	background-image: url(../images/content/astronot.webp);
	background-size: 320px;
	background-position: bottom right;
	background-repeat: no-repeat;
	*/
}

.navbar .bg-offcanvas.show .megamenu.hot_game, 
.navbar .bg-offcanvas.show .megamenu.slot {
	background-image: none;
}

@media(min-width: 1400px) {
	.navbar .megamenu.hot_game, 
	.navbar .megamenu.slot {
		background-position: bottom;
	}
}

.item_game_menu_wrap.with_details {
	/*overflow: hidden;*/
	background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.56) 100%);
	border-radius: 0 50px 50px 0;
	padding: 10px;
}

.item_game_menu_wrap.with_details a {
	display: grid !important;
	grid-template-columns: 1fr 1.2fr;
	gap: 10px;
	align-items: center;
	text-decoration: none !important;
}

.item_game_menu_wrap.with_details .item_game_image {
	min-width: 1px;
}

.item_game_menu_wrap.with_details .item_game_image img {
	background: none !important;
	border: none;
	border-radius: 5px;
	max-height: 70px;
	width: auto !important;
	filter: drop-shadow(3px 3px 5px rgb(0, 0, 0));
}

.item_game_menu_wrap.with_details a:hover .item_game_image img {
	opacity: 1;
}

.item_game_menu_wrap.with_details .item_game_content {
	min-width: 1px;
	overflow: hidden;  
 }

.item_game_menu_wrap.with_details .item_game_content h5, 
.item_game_menu_wrap.with_details .item_game_content p {
	display: block;
	font-family: 'PlayRegular';
	text-overflow: ellipsis !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	text-align: center;
}

.item_game_menu_wrap.with_details .item_game_content h5 {
	font-size: .875rem;
	line-height: normal;
	color: var(--color-main);
	margin-bottom: 5px;
}

.item_game_menu_wrap.with_details .item_game_content p {
	font-size: .625rem;
	margin-bottom: 0;
	color: var(--color-cyan-main);
	background: rgba(0, 0, 0, 0.53);
	display: table;
	margin: auto;
	border-radius: 30px;
	padding: 0 10px;
}

.item_game_menu_wrap.with_details .btn_wrapper {
	position: absolute !important;
	width: 100% !important;
	top: 0 !important;
	bottom: 0 !important;
}

.item_game_menu_wrap.with_details:hover .item_game_image, 
.item_game_menu_wrap.with_details:hover .item_game_content {
	filter: blur(.313rem);
}

body:not(.loggedin) .item_game_menu_wrap.with_details .btn_wrapper button {
	display: none;
}

body:not(.loggedin) .item_game_menu_wrap.with_details:hover .btn_wrapper button {
	display: block;
}

.item_game_menu_wrap.with_details:hover .btn_wrapper {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	border-radius: 5px;
	/*backdrop-filter: blur(.313rem);*/
	background-color: rgba(255, 255, 255, 0.15);	
}

.see-all-games {
	/* border-top: 1px solid var(--color-gray-light); */
	padding-top: 1.2rem;
	position: relative;
}

.see-all-games .btn {
	border-radius: 50px !important;
	background: var(--color-rosegold-ver);
	color: var(--color-rosegold-text);
	border-color: var(--color-gold-border);
}

.see-all-games .btn:hover {
	background: var(--color-rosegold-ver-hover);
	color: var(--color-campagne);
	border-color: var(--color-gold-border-hover);
}

/* on providers menu */
.item_game_menu_wrap.with_details.menu_providers {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	padding: 0;
	background: transparent;
	border-radius: 0;
}

.item_game_menu_wrap.with_details.menu_providers a {
	grid-template-columns: 1fr;
}

.item_game_menu_wrap.with_details.menu_providers .item_game_image img {
	max-height: 100%;
}

.item_game_menu_wrap.with_details.menu_providers:hover .btn_wrapper {
	background: transparent;
}

.item_game_menu_wrap.with_details.menu_providers:hover .item_game_image, 
.item_game_menu_wrap.with_details.menu_providers:hover .item_game_content {
	filter: none;
}

.item_game_menu_wrap.with_details.menu_providers:hover .item_game_image img {
	transform: scale(1.15);
}

/*
.item_game_menu_wrap.with_details.menu_providers {
	min-height: 65px;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.item_game_menu_wrap.with_details.menu_providers a {
	grid-template-columns: 1fr;
}

.item_game_menu_wrap.with_details.menu_providers .item_game_image img {
	max-height: 36px;
}

.item_game_menu_wrap.with_details.menu_providers .item_game_image img.prv-pragmatic-play, 
.item_game_menu_wrap.with_details.menu_providers .item_game_image img.prv-afb-gaming {
	max-height: 46px;
}

.item_game_menu_wrap.with_details.menu_providers.maintenance .btn_wrapper {
	display: flex !important;
	justify-content: center;
	align-content: center;
	align-items: center;
	border-radius: 5px 50px 50px 5px;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255, 255, 255, 0.15) 100%);
}
*/
.item_game_menu_wrap.with_details.menu_providers.maintenance .btn_wrapper h4 {
	text-shadow: 2px 2px 5px rgb(0, 0, 0);
}

.item_game_menu_wrap.with_details.menu_providers.maintenance a {
	cursor: not-allowed !important;
}

.item_game_menu_wrap.with_details.menu_providers.maintenance .item_game_image, 
.item_game_menu_wrap.with_details.menu_providers.maintenance .item_game_content {
	filter: blur(.313rem);
}

.item_game_menu_wrap.with_details.menu_providers.maintenance:hover .btn_wrapper {
	display: none !important;
}

.item_game_menu_wrap.with_details.menu_providers.maintenance:hover .item_game_image, 
.item_game_menu_wrap.with_details.menu_providers.maintenance:hover .item_game_content {
	filter: none;
}

/* RTP IN GAME ICON */

.rtp-game {
  text-align: center;
  background-color: transparent;
  position: relative;
  font-family: "Nunito", sans-serif;
}
.rtp-game .progress {
  height: 1.1em;
  border-radius: 0;
  background-color: #151515;
  opacity: 0.6;
  filter: brightness(1.8);
}

.rtp-game-percentage {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  line-height: 0;
  color: #ffdf81;
  text-shadow: 0px 0px 1px #ffd980;
  font-size: 0.65em;
}
.rtp-game-percentage span {
  letter-spacing: 0.05em;
  background: radial-gradient(circle, rgba(255, 255, 255, 0) 50%,rgba(255,255,255,0) 100%);
  padding-left: 1em;
  padding-right: 1em;
}
.item-fun-demo-game:hover .rtp-game {
  filter: blur(.313rem);
}

@media (max-width: 575px) {
	.navbar .megamenu.hot_game, 
	.navbar .megamenu.slot {
		background-image: none;
	}
	
	.item_game_menu_wrap.with_details a {
		grid-template-columns: 1fr;
		gap: 0;
	}
	
	.item_game_menu_wrap.with_details .item_game_content {
		display: none;
	}
	
	body:not(.loggedin) .item_game_menu_wrap.with_details .btn_wrapper button {
		display: block;
	}
	
	.item_game_menu_wrap.with_details .btn_wrapper {
		position: relative !important;
		top: unset !important;
		bottom: -10px !important;
		display: flex;
		background: transparent;
	}
	
	.item_game_menu_wrap.with_details:hover .btn_wrapper {
		background-color: transparent;
	}
	
	.item_game_menu_wrap.with_details:hover .item_game_image, 
	.item_game_menu_wrap.with_details:hover .item_game_content {
		filter: unset;
	}
	
	.item_game_menu_wrap.with_details.menu_providers .item_game_image img {
		max-height: 100%;
		max-width: 100%;
		height: auto !important;
	}
	
	.item_game_menu_wrap.with_details.menu_providers.maintenance .item_game_image, 
	.item_game_menu_wrap.with_details.menu_providers.maintenance .item_game_content {
		filter: none;
	}
	
	.item_game_menu_wrap.with_details.menu_providers.maintenance:hover .btn_wrapper {
		display: flex !important;
	}
}

@media (max-width: 480px) {
/*
	.item_game_menu_wrap.with_details.menu_providers {

	}
	
	.item_game_menu_wrap.with_details.menu_providers .item_game_image {
		min-height: 45px;
	}
	
	.item_game_menu_wrap.with_details.menu_providers .item_game_image img {
		max-height: none;
		max-width: 81px;
		height: auto !important;
		transform: none;
	}
*/
	
	.item_game_menu_wrap.with_details.menu_providers .item_game_image img, 
	.item_game_menu_wrap.with_details.menu_providers:hover .item_game_image img {
		transform: none;
	}
}

/** SEE ALL PROVIDERs BY MODAL, MODAL SEE ALL PROVIDERs **/

.bg-blue-greyish {
	background-color: #4e4969;
}
.bg-green-greyish {
	background-color: #4c7257;
}

.bg-soft-orange {
	background-color: #ff7800;
}
.bg-dark-grey {
	background-color: #2f2f2f;
}

.bg-hover-blue-greyish:hover {
	background-color: #4e4969;
}
.bg-hover-green-greyish:hover {
	background-color: var(--color-outer-accent);
}


.border-multi-blueish {
  position: relative;
  border-radius: inherit;
}

.border-multi-blueish::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient( 90deg, #07a596, orange, yellow, #eb00ff, aqua, blue, violet );

  -webkit-mask:
	linear-gradient(#000 0 0) content-box,
	linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
		  mask-composite: exclude;

  pointer-events: none;
}

.border-multi-hover-greenish:hover {
  position: relative;
  border-radius: inherit;
}

.border-multi-hover-greenish:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient( 90deg, #d5da32, #00ff4c, yellow, #0ff, aqua, #4f0, #eedd82 );

  -webkit-mask:
	linear-gradient(#000 0 0) content-box,
	linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
		  mask-composite: exclude;

  pointer-events: none;
}

.text-color-gold {
	color: #ffe300;
}
.text-color-hover-gold:hover {
	color: #ffe300;
}

.text-color-softgreen {
	color: #8aff8c;
}
.text-color-hover-softgreen:hover {
	color: #8aff8c;
}

.text-color-neon {
	color: #2df9dc;
}
.text-color-hover-neon:hover {
	color: #2df9dc;
}

.responsive-text-smallgap {
	font-size: clamp(1rem, 0.2vw + 1rem, 1.4rem);
}

.gamingGLPLModal .modal-header {
	border-color: var(--color-gray);
}

#search-provider::placeholder {
	color: #848484;
	opacity: 1; /* supaya tidak pudar di beberapa browser */
}

.gamingGLPLModal .btn-close {
	position: absolute;
	right: 0.3em;
	background-color: #fff;
	z-index: 100;
	top: 0.3em;
	transform: scale(0.7);
}

.gamingGLPLModal .modal-content {
	border: 1px solid var(--color-gray);
	box-shadow: 0 0 24px rgba(255, 255, 255, .225);
	min-height: calc(100vh - 3rem);
}

.gamingGLPLModal .input-group-search-provider #search-provider {
	border-radius: 0 0.5rem 0.5rem 0;
}
.gamingGLPLModal .input-group-search-provider #search-provider:focus {
	border-color: var(--color-gray);
}

.gamingGLPLModal .input-group-search-provider .input-group-text {
	border-radius: 0.5rem 0 0 0.5rem;
}

.gamingGLPLModal .input-group-search-provider .btn-clear-search {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	background: none;
	border: none;
	color: #aaa;
	font-size: 14px;
	cursor: pointer;
	padding: 0 4px;
	line-height: 1;
	display: none; /* hidden by default */
	transition: color 0.2s;
}

.gamingGLPLModal .input-group-search-provider .btn-clear-search:hover {
	color: #fff;
}

@media (max-width: 575px) {
	.gamingGLPLModal .modal-content {
		min-height: calc(100vh - 6rem);
		max-height: calc(100vh - 6rem);
	}
}

/*
@media (max-width: 991px) and (min-width: 481px) {
	#btn-show-all-providers {
		transform: translateY(-20px);
		z-index: 2;
	}
}
*/
/** FAVORITE GAMESs **/

.fun-demo-games .content-fun-demo-games.list-favorited-game {
	padding-top: 2rem;
}

.fun-demo-games .content-fun-demo-games.list-favorited-game .no-results {
	top: 50%;
	transform: translateY(-50%);
}


/** ADD FAVORITE GAMEs **/
.main-add-favorite-game {
	position: absolute;
	z-index: 2;
	right: 5px;
	top: 5px;
	height: 25px;
	width: 25px;
	background: rgba(0, 0, 0, 0.87);
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	border-radius: 50px;
	line-height: normal;
}

.main-add-favorite-game a, 
.main-add-favorite-game a:focus {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	text-decoration: none;
	color: var(--color-gray);
}

.main-add-favorite-game a:hover {
	color: var(--color-red-main);
}

.main-add-favorite-game a:hover i {
    font-weight: 900; /*make it solid*/
}

.main-add-favorite-game a.favorited, 
.main-add-favorite-game a.favorited:hover {
	color: var(--color-red-main);
}

.main-add-favorite-game a.favorited i, 
.main-add-favorite-game a.favorited:hover i {
    font-weight: 900; /*make it solid*/
}

/** FAVORITE PROVIDERs **/

.fun-demo-games .content-fun-demo-games.list-favorited-provider {
	grid-template-columns: repeat(5, 1fr);
	padding-top: 2rem;
}

.fun-demo-games .content-fun-demo-games.list-favorited-provider .no-results {
	top: 50%;
	transform: translateY(-50%);
}

.list-favorited-provider .item-fav-provider {
	float: left;
	width: 100%;
	position: relative;
	min-height: 56px;
	max-height: 56px;
}

.list-favorited-provider .item-fav-provider > a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background: var(--bg-wrap);
	border-radius: .5rem;
	padding: 10px;
	font-size: 16px;
	color: var(--color-main);
	border: 1px solid var(--color-gray);
	text-decoration: none;
}

.list-favorited-provider .item-fav-provider > a:hover, 
.list-favorited-provider .item-fav-provider > a:focus, 
.list-favorited-provider .item-fav-provider > a.active {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--color-orange-main) 100%);
	border: 1px solid var(--color-orange-main);
}

.list-favorited-provider .item-fav-provider a > img {
	height: 34px;
	width: auto;
}

/** ADD FAVORITE PROVIDERs **/
.main-add-favorite-provider {
	position: absolute;
	z-index: 2;
	right: 5px;
	top: 5px;
	height: 25px;
	width: 25px;
	background: rgba(0, 0, 0, 0.87);
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	border-radius: 50px;
	line-height: normal;
}

.main-add-favorite-provider a, 
.main-add-favorite-provider a:focus {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	text-decoration: none;
	color: var(--color-gray);
}

.main-add-favorite-provider a:hover {
	color: var(--color-red-main);
}

.main-add-favorite-provider a:hover i {
    font-weight: 900; /*make it solid*/
}

.main-add-favorite-provider a.favorited, 
.main-add-favorite-provider a.favorited:hover {
	color: var(--color-red-main);
}

.main-add-favorite-provider a.favorited i, 
.main-add-favorite-provider a.favorited:hover i {
    font-weight: 900; /*make it solid*/
}

/* custom favorite popup */
.swal2-popup.favorite-popup {
	background: var(--bg-dark-grey) !important;
	color: var(--color-main) !important;
	box-shadow: 0 0 20px rgba(255, 255, 255, .275);
	border: 1px solid var(--color-dark-gray);
}

.swal2-popup.favorite-popup .swal2-title {
	color: var(--color-main);
}

.swal2-popup.favorite-popup .swal2-styled.swal2-cancel {
	background-color: var(--color-gray) !important;
}

/* animate favorite */

/*
.fav-flying-heart {
    position: fixed;
    font-size: 1.3rem;
    color: #e05555;
    z-index: 9999;
    pointer-events: none;
    opacity: 1;
    transform: scale(1.2);
    text-shadow: 0 0 10px rgba(224, 85, 85, 0.9),
                 0 0 20px rgba(224, 85, 85, 0.5);
    transition: left      0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                top       0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.65s ease-in,
                opacity   0.5s ease-in 0.2s;
}
.fav-flying-heart.fly-done {
    transform: scale(0.1);
    opacity: 0;
}


.fav-particle {
    position: fixed;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    z-index: 9998;
    pointer-events: none;
    opacity: 1;
    transform: scale(1);
    transition: left      0.6s cubic-bezier(0.4, 0, 0.2, 1),
                top       0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s ease-in,
                opacity   0.6s ease-in;
}
.fav-particle.fly-done {
    transform: scale(0);
    opacity: 0;
}


@keyframes _shake {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-6px); }
    40%  { transform: translateX(6px); }
    60%  { transform: translateX(-4px); }
    80%  { transform: translateX(4px); }
    100% { transform: translateX(0); }
}
@keyframes _glow {
    0%   { box-shadow: 0 0 0px rgba(224, 85, 85, 0); }
    50%  { box-shadow: 0 0 18px rgba(224, 85, 85, 0.7); }
    100% { box-shadow: 0 0 0px rgba(224, 85, 85, 0); }
}
._shake-glow {
    animation: _shake 0.4s ease, _glow 0.6s ease;
}
*/

/* =============================================
   FLY TO FAVORITE — HEART (game) + ROCKET (provider)
   ============================================= */

/* --- Flying Icon (shared) --- */
.fav-flying-icon {
    position: fixed;
    font-size: 1.3rem;
    z-index: 9999;
    pointer-events: none;
    opacity: 1;
    /* transform di-set via JS agar rocket rotate dinamis */
    transition: left      0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                top       0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity   0.5s ease-in 0.2s;
    /* TIDAK ada transition untuk transform agar rotate rocket tidak berubah saat terbang */
}
.fav-flying-icon.fly-done {
    opacity: 0;
}

/* --- Particles --- */
.fav-particle {
    position: fixed;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    z-index: 9998;
    pointer-events: none;
    opacity: 1;
    transform: scale(1);
    transition: left      0.6s cubic-bezier(0.4, 0, 0.2, 1),
                top       0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s ease-in,
                opacity   0.6s ease-in;
}
.fav-particle.fly-done {
    transform: scale(0);
    opacity: 0;
}

/* --- Shake + Glow Target --- */
@keyframes _shake {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-6px); }
    40%  { transform: translateX(6px); }
    60%  { transform: translateX(-4px); }
    80%  { transform: translateX(4px); }
    100% { transform: translateX(0); }
}

/* Glow merah — untuk target game */
@keyframes _glow-game {
    0%   { box-shadow: 0 0 0px rgba(224, 85, 85, 0); }
    50%  { box-shadow: 0 0 18px rgba(224, 85, 85, 0.7); }
    100% { box-shadow: 0 0 0px rgba(224, 85, 85, 0); }
}
._shake-glow-game {
    animation: _shake 0.4s ease, _glow-game 0.6s ease;
}

/* Glow kuning — untuk target provider */
@keyframes _glow-provider {
    0%   { box-shadow: 0 0 0px rgba(240, 192, 64, 0); }
    50%  { box-shadow: 0 0 18px rgba(240, 192, 64, 0.8); }
    100% { box-shadow: 0 0 0px rgba(240, 192, 64, 0); }
}
._shake-glow-provider {
    animation: _shake 0.4s ease, _glow-provider 0.6s ease;
}

/* =============================================
   EXPLODE UNFAVORITE
   ============================================= */

/* Icon yang muncul lalu meledak */
.fav-explode-icon {
    position: fixed;
    font-size: 1.2rem;
    z-index: 9999;
    pointer-events: none;
    opacity: 1;
    transform: scale(1);
}

/* Fase 1: membesar dengan bounce */
@keyframes _explode-pop {
    0%   { transform: scale(1);   opacity: 1; }
    60%  { transform: scale(1.8); opacity: 1; }
    100% { transform: scale(1.5); opacity: 1; }
}
.fav-explode-icon.explode-pop {
    animation: _explode-pop 0.18s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

/* Fase 2: meledak hilang */
@keyframes _explode-bang {
    0%   { transform: scale(1.5); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}
.fav-explode-icon.explode-bang {
    animation: _explode-bang 0.25s ease-out forwards;
}

/* Serpihan yang menyebar */
.fav-shard {
    position: fixed;
    z-index: 9998;
    pointer-events: none;
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity   0.45s ease-out;
}
.fav-shard.shard-fly {
    transform: translate(var(--tx), var(--ty)) rotate(360deg) scale(0);
    opacity: 0;
}

/* Flash kilat ledakan */
.fav-explode-flash {
    position: fixed;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    z-index: 9997;
    pointer-events: none;
    opacity: 0.7;
    transform: scale(1);
    transition: transform 0.35s ease-out,
                opacity   0.35s ease-out;
}
.fav-explode-flash.flash-done {
    transform: scale(2.5);
    opacity: 0;
}

@media (max-width: 991px) {
	.fun-demo-games .content-fun-demo-games.list-favorited-provider {
		grid-template-columns: repeat(3, 1fr);
	}	
}

@media (max-width: 480px) {
	.fun-demo-games .content-fun-demo-games.list-favorited-provider {
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 10px;
		grid-row-gap: 5px;
	}
	
	.list-favorited-provider .item-fav-provider {
		min-height: 42px;
		max-height: 42px;
	}	
	
	.list-favorited-provider .item-fav-provider > a {
		padding: 5px;
	}
	
	.list-favorited-provider .item-fav-provider a > img {
		height: 30px;
	}
}

/* FILTER GRAYSCALE and WHITE IMAGE */

.item-provider img {
  filter: grayscale(100%) brightness(1.5) contrast(0.85);
  transition: filter 0.3s ease;
}

.item-provider:hover img {
  filter: none !important;
}

/* MAIN LOBBY */
.fun-demo-games .title-fun-demo-games h1 {
  /* Gold gradient */
  background: linear-gradient(
    180deg,
    #fffadf 0%,
    #f9df7a 15%,
    #d4a017 30%,
    #f9df7a 50%,
    #b8820a 65%,
    #f0c040 80%,
    #7a4e00 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  /* Shadow & bevel */
  filter:
    drop-shadow(0px 3px 3px rgba(0,0,0,0.9))
    drop-shadow(0px 6px 10px rgba(0,0,0,0.7))
    drop-shadow(0px -1px 1px rgba(255,230,120,0.5));	
}

/* GAME ITEM LOBBY */

/* animate spread game items -- start */
.page-games.loggedin .item-fun-demo-game {
  opacity: 0;
  transform: translateY(60px) rotate(var(--init-rot, 0deg)) scale(0.6);
}

.page-games.loggedin .item-fun-demo-game.dealt {
  animation: dealCard 0.55s cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
}

@keyframes dealCard {
  0% {
    opacity: 0;
    transform: translateY(80px) rotate(var(--init-rot, 0deg)) scale(0.55);
    filter: blur(4px);
  }
  80% {
    transform: translateY(-8px) rotate(calc(var(--init-rot, 0deg) * 0.1)) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
    filter: blur(0);
  }
}
/* animate spread game items -- end */

/* SIDE MENU LOBBY */

.fun-demo-games .title-side-fun-demo-games {
  /* Gold gradient */
  background: linear-gradient(
    180deg,
    #fffadf 0%,
    #f9df7a 15%,
    #d4a017 30%,
    #f9df7a 50%,
    #b8820a 65%,
    #f0c040 80%,
    #7a4e00 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  /* Shadow & bevel */
  filter:
    drop-shadow(0px 3px 3px rgba(0,0,0,0.9))
    drop-shadow(0px 6px 10px rgba(0,0,0,0.7))
    drop-shadow(0px -1px 1px rgba(255,230,120,0.5));
}

.fun-demo-games .menu-side-fun-demo-games ul {

}

.fun-demo-games .menu-side-fun-demo-games ul li {
	position: relative;
	border-radius: .5rem;
	overflow: visible;
}

.fun-demo-games .menu-side-fun-demo-games ul > li + li {
	background-color: rgba(0, 0, 0, 0.56);
	margin-top: 0.625rem;
}

/* Bottom spread glow */
.fun-demo-games .menu-side-fun-demo-games ul li::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 15%; right: 15%;
  height: 14px;
  border-radius: 50%;
  filter: blur(9px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  background: var(--glow-spread, rgba(100,150,255,0.7));
  transition: opacity 0.2s;
}
.fun-demo-games .menu-side-fun-demo-games ul li:hover::after { opacity: 1; }

.fun-demo-games .menu-side-fun-demo-games ul li a {
  position: relative;
  display: flex;
  align-items: center;
  /*gap: 10px;*/
  /*padding: 9px 14px 9px 10px;*/
  border-radius: .5rem;
  text-decoration: none;
  overflow: hidden;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: none;
  color: var(--glow-text, #c8d8ff);
  text-shadow: 0 0 8px var(--glow-mid, rgba(100,150,255,0.8));
  box-shadow:
    0 0 0 1.5px var(--glow-border, rgba(100,150,255,0.85)),
    0 0 7px 2px  var(--glow-mid,    rgba(80,130,255,0.55)),
    0 0 20px 4px var(--glow-outer,  rgba(60,110,240,0.28)),
    inset 0 0 18px var(--glow-inner, rgba(40,90,200,0.10));
  transition: transform 0.15s ease, filter 0.15s ease;
  z-index: 1;
}

@media (max-width: 1199px) {
	.fun-demo-games .menu-side-fun-demo-games ul li a img {
		width: 26px;
		height: 26px;
	}	
}

@media (max-width: 767px) {
	.fun-demo-games .menu-side-fun-demo-games ul {
		grid-row-gap: 7px;
	}

	.fun-demo-games .menu-side-fun-demo-games ul > li + li {
		margin-top: 0;
	}
}

@media (max-width: 480px) {	
	.fun-demo-games .menu-side-fun-demo-games ul li a {
		font-size: 12px;
	}
}

@media (max-width: 360px) {
	.fun-demo-games .menu-side-fun-demo-games ul li a img {
		width: 21px;
		height: 21px;
	}
	
	.fun-demo-games .menu-side-fun-demo-games ul li a {
		font-size: 10px;
	}
}

/* TOP SHINE */
.fun-demo-games .menu-side-fun-demo-games ul li a::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.10) 15%,
    rgba(255,255,255,0.80) 50%,
    rgba(255,255,255,0.10) 85%,
    transparent 100%
  );
  z-index: 3;
  pointer-events: none;
}

/* INNER TOP GLOW */
.fun-demo-games .menu-side-fun-demo-games ul li a::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  border-radius: 14px 14px 60% 60% / 14px 14px 30px 30px;
  background: linear-gradient(180deg, var(--glow-shine, rgba(160,190,255,0.07)) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.fun-demo-games .menu-side-fun-demo-games ul li a:hover { 
	filter: brightness(1.15); 
	border: none; 
}
.fun-demo-games .menu-side-fun-demo-games ul > li > a:hover, 
.fun-demo-games .menu-side-fun-demo-games ul > li > a:focus, 
.fun-demo-games .menu-side-fun-demo-games ul > li.active > a, 
.fun-demo-games .menu-side-fun-demo-games ul > li.active > a:hover, 
.fun-demo-games .menu-side-fun-demo-games ul > li.active > a:focus,
.fun-demo-games .menu-side-fun-demo-games ul li a:hover,
.fun-demo-games .menu-side-fun-demo-games ul li a:active { 
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #A40890 100%);
	border: none; 
}

.fun-demo-games .menu-side-fun-demo-games ul li a img {
  width: 31px;
  height: 31px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
  position: relative;
  z-index: 4;
  filter: drop-shadow(0 0 7px var(--glow-mid, rgba(100,150,255,0.7)));
  transition: transform 0.15s ease;
}
.fun-demo-games .menu-side-fun-demo-games ul li a:hover img { transform: scale(1.1); }

/* ===== METEOR INNER — tepat di garis border atas ===== */
.fun-demo-games .menu-side-fun-demo-games ul li .meteor-inner {
  position: absolute;
  top: -1px;
  right: 8%;
  width: 35%;
  height: 2px;
  border-radius: 99px;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--glow-outer)  15%,
    var(--glow-mid)    50%,
    var(--glow-border) 68%,
    var(--glow-outer)  85%,
    transparent 100%
  );
  filter: blur(0.3px);
  animation: meteor-in 3.8s ease-in-out infinite;
}
.fun-demo-games .menu-side-fun-demo-games ul li .meteor-inner::after {
  content: '';
  position: absolute;
  right: 30%;
  top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 3px 2px var(--glow-border),
    0 0 8px 4px var(--glow-mid),
    0 0 16px 6px var(--glow-outer);
}

/* ===== METEOR OUTER — tepat di garis border bawah ===== */
.fun-demo-games .menu-side-fun-demo-games ul li .meteor-outer {
  position: absolute;
  bottom: -1px;
  left: 8%;
  width: 50%;
  height: 2px;
  border-radius: 99px;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--glow-outer)  10%,
    var(--glow-mid)    40%,
    var(--glow-border) 60%,
    var(--glow-outer)  80%,
    transparent 100%
  );
  filter: blur(0.35px);
  animation: meteor-out-flicker 3.2s ease-in-out infinite 0.6s;
}
.fun-demo-games .menu-side-fun-demo-games ul li .meteor-outer::after {
  content: '';
  position: absolute;
  left: 56%;
  top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 4px 2px var(--glow-border),
    0 0 10px 5px var(--glow-mid),
    0 0 20px 8px var(--glow-outer);
}

@keyframes meteor-in {
  0%   { opacity: 0; transform: translateX(14px); }
  10%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-10px); }
}
@keyframes meteor-out-flicker {
  0%   { opacity: 0.1; }
  20%  { opacity: 0.9; }
  45%  { opacity: 0.5; }
  60%  { opacity: 1;   }
  80%  { opacity: 0.6; }
  100% { opacity: 0.1; }
}


/* ===== FIRE EMBER — khusus .glow-red (Hot Game) ===== */

/* Titik ember utama di pojok kanan atas border */
.glow-red .fire-ember {
  position: absolute;
  top: -4px;
  right: 18%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  z-index: 10;
  pointer-events: none;
  background: radial-gradient(circle, #fff 0%, #ffe066 30%, #ff9900 65%, transparent 100%);
  box-shadow:
    0 0 4px 2px  rgba(255, 220, 80,  1.0),
    0 0 10px 5px rgba(255, 140, 20,  0.9),
    0 0 22px 10px rgba(255, 80,  10, 0.6),
    0 0 40px 18px rgba(220, 40,   0, 0.3);
  animation: ember-pulse 1.8s ease-in-out infinite;
}

/* Sinar silang di tengah ember */
.glow-red .fire-ember::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 28px; height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 200, 80, 0.6) 20%,
    rgba(255, 255, 180, 1.0) 50%,
    rgba(255, 200, 80, 0.6) 80%,
    transparent 100%
  );
  border-radius: 99px;
  animation: ember-ray-h 1.8s ease-in-out infinite;
}

.glow-red .fire-ember::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1.5px; height: 22px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 200, 80, 0.5) 20%,
    rgba(255, 255, 180, 0.9) 50%,
    rgba(255, 200, 80, 0.5) 80%,
    transparent 100%
  );
  border-radius: 99px;
  animation: ember-ray-v 1.8s ease-in-out infinite;
}

/* Percikan kecil melayang di sekitar ember */
.glow-red .spark-1,
.glow-red .spark-2,
.glow-red .spark-3,
.glow-red .spark-4 {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9;
  background: radial-gradient(circle, #fff 0%, #ffcc44 50%, transparent 100%);
}

.glow-red .spark-1 {
  width: 3px; height: 3px;
  top: -8px; right: 22%;
  box-shadow: 0 0 4px 2px rgba(255, 160, 30, 0.9);
  animation: spark-float-1 2.2s ease-in-out infinite 0.3s;
}
.glow-red .spark-2 {
  width: 2px; height: 2px;
  top: -2px; right: 12%;
  box-shadow: 0 0 3px 1px rgba(255, 120, 20, 0.8);
  animation: spark-float-2 1.9s ease-in-out infinite 0.7s;
}
.glow-red .spark-3 {
  width: 2px; height: 2px;
  top: -6px; right: 28%;
  box-shadow: 0 0 3px 1px rgba(255, 180, 40, 0.8);
  animation: spark-float-3 2.5s ease-in-out infinite 0.1s;
}
.glow-red .spark-4 {
  width: 3px; height: 3px;
  top: 0px; right: 8%;
  box-shadow: 0 0 4px 2px rgba(255, 100, 10, 0.7);
  animation: spark-float-4 2.0s ease-in-out infinite 1.1s;
}

@keyframes ember-pulse {
  0%   { transform: scale(0.85); opacity: 0.7; }
  40%  { transform: scale(1.15); opacity: 1;   }
  70%  { transform: scale(1.0);  opacity: 0.9; }
  100% { transform: scale(0.85); opacity: 0.7; }
}
@keyframes ember-ray-h {
  0%   { opacity: 0.4; transform: translate(-50%,-50%) scaleX(0.6); }
  40%  { opacity: 1.0; transform: translate(-50%,-50%) scaleX(1.0); }
  100% { opacity: 0.4; transform: translate(-50%,-50%) scaleX(0.6); }
}
@keyframes ember-ray-v {
  0%   { opacity: 0.3; transform: translate(-50%,-50%) scaleY(0.5); }
  40%  { opacity: 0.9; transform: translate(-50%,-50%) scaleY(1.0); }
  100% { opacity: 0.3; transform: translate(-50%,-50%) scaleY(0.5); }
}
@keyframes spark-float-1 {
  0%   { opacity: 0;   transform: translate(0, 0)    scale(0.5); }
  30%  { opacity: 1;   transform: translate(-3px, -6px) scale(1); }
  70%  { opacity: 0.7; transform: translate(-6px, -12px) scale(0.8); }
  100% { opacity: 0;   transform: translate(-9px, -18px) scale(0.3); }
}
@keyframes spark-float-2 {
  0%   { opacity: 0;   transform: translate(0, 0)     scale(0.5); }
  30%  { opacity: 1;   transform: translate(2px, -5px)  scale(1); }
  70%  { opacity: 0.6; transform: translate(4px, -10px) scale(0.7); }
  100% { opacity: 0;   transform: translate(6px, -16px) scale(0.2); }
}
@keyframes spark-float-3 {
  0%   { opacity: 0;   transform: translate(0, 0)      scale(0.4); }
  25%  { opacity: 0.9; transform: translate(-2px, -4px) scale(1); }
  65%  { opacity: 0.5; transform: translate(-5px, -9px) scale(0.6); }
  100% { opacity: 0;   transform: translate(-8px, -15px) scale(0.2); }
}
@keyframes spark-float-4 {
  0%   { opacity: 0;   transform: translate(0, 0)     scale(0.5); }
  35%  { opacity: 1;   transform: translate(3px, -7px) scale(1.1); }
  75%  { opacity: 0.5; transform: translate(5px, -13px) scale(0.7); }
  100% { opacity: 0;   transform: translate(7px, -20px) scale(0.2); }
}


/* ===== LOVE GLOW — khusus .glow-pink (Favorit Game) ===== */

/* Titik glow utama pojok kiri atas */
.glow-pink .love-core {
  position: absolute;
  top: -5px;
  left: 14%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 10;
  pointer-events: none;
  background: radial-gradient(circle, #fff 0%, #ffaaee 35%, #ff44cc 65%, transparent 100%);
  box-shadow:
    0 0 5px 3px  rgba(255, 100, 200, 1.0),
    0 0 12px 6px rgba(255,  60, 180, 0.9),
    0 0 26px 12px rgba(220,  20, 150, 0.6),
    0 0 45px 20px rgba(180,   0, 120, 0.3);
  animation: love-pulse 2.0s ease-in-out infinite;
}

/* Sinar silang pink */
.glow-pink .love-core::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 30px; height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 150, 220, 0.5) 20%,
    rgba(255, 220, 240, 1.0) 50%,
    rgba(255, 150, 220, 0.5) 80%,
    transparent 100%
  );
  border-radius: 99px;
  animation: love-ray-h 2.0s ease-in-out infinite;
}
.glow-pink .love-core::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1.5px; height: 24px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 150, 220, 0.5) 20%,
    rgba(255, 220, 240, 0.9) 50%,
    rgba(255, 150, 220, 0.5) 80%,
    transparent 100%
  );
  border-radius: 99px;
  animation: love-ray-v 2.0s ease-in-out infinite;
}

/* Heart-heart melayang berterbangan */
.glow-pink .heart-1,
.glow-pink .heart-2,
.glow-pink .heart-3,
.glow-pink .heart-4,
.glow-pink .heart-5 {
  position: absolute;
  pointer-events: none;
  z-index: 9;
  font-style: normal;
  line-height: 1;
  color: #fff;
  text-shadow:
    0 0 3px  #fff,
    0 0 6px  rgba(255, 180, 230, 1.0),
    0 0 12px rgba(255, 80,  200, 1.0),
    0 0 22px rgba(255, 40,  170, 0.9),
    0 0 40px rgba(220, 0,   140, 0.6);
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 8px rgba(255, 80, 200, 1.0))
    drop-shadow(0 0 18px rgba(220, 0, 160, 0.8));
}

.glow-pink .heart-1 { font-size: 8px;  top: -2px;  left: 18%; animation: heart-fly-1 2.4s ease-in-out infinite 0.0s; }
.glow-pink .heart-2 { font-size: 6px;  top:  2px;  left: 8%;  animation: heart-fly-2 2.8s ease-in-out infinite 0.5s; }
.glow-pink .heart-3 { font-size: 10px; top: -4px;  left: 26%; animation: heart-fly-3 2.1s ease-in-out infinite 0.9s; }
.glow-pink .heart-4 { font-size: 7px;  top:  0px;  left: 32%; animation: heart-fly-4 3.0s ease-in-out infinite 0.3s; }
.glow-pink .heart-5 { font-size: 5px;  top: -6px;  left: 6%;  animation: heart-fly-5 2.6s ease-in-out infinite 1.2s; }

@keyframes love-pulse {
  0%   { transform: scale(0.85); opacity: 0.75; }
  40%  { transform: scale(1.2);  opacity: 1.0;  }
  70%  { transform: scale(1.0);  opacity: 0.9;  }
  100% { transform: scale(0.85); opacity: 0.75; }
}
@keyframes love-ray-h {
  0%   { opacity: 0.3; transform: translate(-50%,-50%) scaleX(0.5); }
  40%  { opacity: 1.0; transform: translate(-50%,-50%) scaleX(1.0); }
  100% { opacity: 0.3; transform: translate(-50%,-50%) scaleX(0.5); }
}
@keyframes love-ray-v {
  0%   { opacity: 0.2; transform: translate(-50%,-50%) scaleY(0.4); }
  40%  { opacity: 0.9; transform: translate(-50%,-50%) scaleY(1.0); }
  100% { opacity: 0.2; transform: translate(-50%,-50%) scaleY(0.4); }
}

@keyframes heart-fly-1 {
  0%   { opacity: 0;   transform: translate(0, 0)       scale(0.5) rotate(-10deg); }
  25%  { opacity: 1;   transform: translate(-4px, -8px)  scale(1.1) rotate(5deg);  }
  65%  { opacity: 0.7; transform: translate(-7px, -16px) scale(0.9) rotate(15deg); }
  100% { opacity: 0;   transform: translate(-10px,-26px) scale(0.4) rotate(25deg); }
}
@keyframes heart-fly-2 {
  0%   { opacity: 0;   transform: translate(0, 0)       scale(0.4) rotate(8deg);   }
  30%  { opacity: 0.9; transform: translate(3px, -7px)   scale(1.0) rotate(-5deg);  }
  70%  { opacity: 0.6; transform: translate(5px, -14px)  scale(0.7) rotate(-15deg); }
  100% { opacity: 0;   transform: translate(7px, -22px)  scale(0.3) rotate(-28deg); }
}
@keyframes heart-fly-3 {
  0%   { opacity: 0;   transform: translate(0, 0)        scale(0.6) rotate(-5deg);  }
  20%  { opacity: 1;   transform: translate(-2px, -6px)   scale(1.2) rotate(8deg);   }
  60%  { opacity: 0.8; transform: translate(-5px, -13px)  scale(1.0) rotate(18deg);  }
  100% { opacity: 0;   transform: translate(-8px, -22px)  scale(0.3) rotate(30deg);  }
}
@keyframes heart-fly-4 {
  0%   { opacity: 0;   transform: translate(0, 0)        scale(0.5) rotate(12deg);  }
  35%  { opacity: 1;   transform: translate(4px, -9px)    scale(1.1) rotate(-8deg);  }
  72%  { opacity: 0.5; transform: translate(6px, -17px)   scale(0.7) rotate(-20deg); }
  100% { opacity: 0;   transform: translate(8px, -27px)   scale(0.2) rotate(-35deg); }
}
@keyframes heart-fly-5 {
  0%   { opacity: 0;   transform: translate(0, 0)        scale(0.4) rotate(-15deg); }
  28%  { opacity: 0.8; transform: translate(-3px, -5px)   scale(0.9) rotate(0deg);   }
  68%  { opacity: 0.5; transform: translate(-6px, -12px)  scale(0.6) rotate(12deg);  }
  100% { opacity: 0;   transform: translate(-9px, -20px)  scale(0.2) rotate(22deg);  }
}

/* ===== GLOW COLOR CLASSES ===== */
.glow-red    { --glow-spread:rgba(255,80,20,.75);  --glow-border:rgba(255,90,30,.85);  --glow-mid:rgba(255,70,20,.58);   --glow-outer:rgba(220,50,10,.30);  --glow-inner:rgba(180,40,10,.12);  --glow-shine:rgba(255,140,80,.08);  --glow-text:#ffaa80; }
.glow-orange { --glow-spread:rgba(255,135,0,.75);  --glow-border:rgba(255,145,10,.85); --glow-mid:rgba(240,120,0,.58);   --glow-outer:rgba(220,100,0,.30);  --glow-inner:rgba(185,80,0,.12);   --glow-shine:rgba(255,180,80,.08);  --glow-text:#ffcc80; }
.glow-gold   { --glow-spread:rgba(255,175,0,.75);  --glow-border:rgba(255,185,10,.85); --glow-mid:rgba(240,165,0,.60);   --glow-outer:rgba(220,140,0,.32);  --glow-inner:rgba(180,110,0,.12);  --glow-shine:rgba(255,220,80,.08);  --glow-text:#ffe080; }
.glow-yellow { --glow-spread:rgba(230,230,0,.70);  --glow-border:rgba(240,240,10,.82); --glow-mid:rgba(220,220,0,.55);   --glow-outer:rgba(200,200,0,.28);  --glow-inner:rgba(170,170,0,.10);  --glow-shine:rgba(255,255,80,.08);  --glow-text:#ffff80; }
.glow-lime   { --glow-spread:rgba(180,240,0,.70);  --glow-border:rgba(185,245,0,.82);  --glow-mid:rgba(165,225,0,.55);   --glow-outer:rgba(145,200,0,.28);  --glow-inner:rgba(120,170,0,.10);  --glow-shine:rgba(210,255,60,.08);  --glow-text:#d8ff80; }
.glow-green  { --glow-spread:rgba(30,220,80,.72);  --glow-border:rgba(40,225,85,.82);  --glow-mid:rgba(25,205,70,.55);   --glow-outer:rgba(15,185,55,.28);  --glow-inner:rgba(10,155,45,.10);  --glow-shine:rgba(80,255,120,.08);  --glow-text:#aaffaa; }
.glow-neon-green { --glow-spread:rgba(0,255,155,.72); --glow-border:rgba(0,255,160,.82); --glow-mid:rgba(0,240,145,.55); --glow-outer:rgba(0,215,128,.28); --glow-inner:rgba(0,185,110,.10); --glow-shine:rgba(80,255,190,.08); --glow-text:#80ffcc; }
.glow-teal   { --glow-spread:rgba(0,210,195,.72);  --glow-border:rgba(0,220,200,.85);  --glow-mid:rgba(0,200,182,.58);   --glow-outer:rgba(0,178,160,.30);  --glow-inner:rgba(0,145,130,.10);  --glow-shine:rgba(80,255,240,.07);  --glow-text:#80ffe8; }
.glow-cyan   { --glow-spread:rgba(0,210,255,.72);  --glow-border:rgba(0,215,255,.82);  --glow-mid:rgba(0,195,245,.55);   --glow-outer:rgba(0,175,225,.28);  --glow-inner:rgba(0,145,195,.10);  --glow-shine:rgba(80,235,255,.08);  --glow-text:#80e8ff; }
.glow-sky    { --glow-spread:rgba(0,180,255,.72);  --glow-border:rgba(0,185,255,.82);  --glow-mid:rgba(0,165,245,.55);   --glow-outer:rgba(0,145,225,.28);  --glow-inner:rgba(0,120,195,.10);  --glow-shine:rgba(80,210,255,.08);  --glow-text:#80ddff; }
.glow-blue   { --glow-spread:rgba(50,130,255,.72); --glow-border:rgba(60,140,255,.82); --glow-mid:rgba(45,120,245,.55);  --glow-outer:rgba(35,100,225,.28); --glow-inner:rgba(25,80,195,.10);  --glow-shine:rgba(120,180,255,.08); --glow-text:#90c0ff; }
.glow-purple { --glow-spread:rgba(155,75,255,.75); --glow-border:rgba(170,90,255,.85); --glow-mid:rgba(150,70,245,.60);  --glow-outer:rgba(130,50,225,.32); --glow-inner:rgba(110,40,195,.12); --glow-shine:rgba(200,150,255,.08); --glow-text:#d0aaff; }
.glow-pink   { --glow-spread:rgba(255,75,195,.72); --glow-border:rgba(255,80,200,.82); --glow-mid:rgba(245,60,182,.55);  --glow-outer:rgba(225,40,162,.28); --glow-inner:rgba(190,28,135,.10); --glow-shine:rgba(255,150,230,.08); --glow-text:#ffaaee; }
.glow-crimson{ --glow-spread:rgba(210,30,60,.75);  --glow-border:rgba(215,35,65,.85);  --glow-mid:rgba(195,25,50,.58);   --glow-outer:rgba(175,15,38,.30);  --glow-inner:rgba(150,10,28,.12);  --glow-shine:rgba(255,100,120,.08); --glow-text:#ff8088; }
.glow-neon-red { --glow-spread:rgba(255,45,95,.75); --glow-border:rgba(255,55,105,.85); --glow-mid:rgba(240,38,88,.60); --glow-outer:rgba(220,22,72,.32);  --glow-inner:rgba(190,12,58,.12);  --glow-shine:rgba(255,120,160,.08); --glow-text:#ff90b0; }