body {
	background-color: var(--bg-main);
	font-family: "NunitoLight", sans-serif;
	font-size: 16px;	
	color: var(--color-main);
	min-width: 320px;
	overflow-x: hidden;
}

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

a {
	/*color: var(--color-purple-light);*/
	color: var(--color-main-link);
	outline: none !important;
}

a:hover {
	color: var(--color-main-link-hover);
	text-decoration: underline;
	outline: none !important;
}

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(2, 13, 35, 0.95);
	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-soft {
	/* From https://css.glass */
	background: rgba(36, 96, 45, 0.1);
	border-radius: 0.6em;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	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-teal-highlight) !important;
}

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

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

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

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

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

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

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

.light-black {
	color: var(--color-light-black) !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-color: var(--color-yellow-main);
	color: var(--color-light-black);
}

.btn-main:hover {
	background-color: var(--color-yellow-hover-main);
	color: var(--color-light-black);
}

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

.btn-main-dark:hover {
	background-color: var(--color-teal-highlight);
	color: var(--color-light-black);
}

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


/* 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: 0.9em;
	}
	.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;
	}
}
@media (max-width:575px) {
	.running-news i {
	  font-size: 1.1em;
	}
}

/* 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);
	width: 100%;
}

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

.line-border-full::after {
	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: 235px;
	height: 40px;
}
@media (max-width: 1199px) {
	.logo-header img {
	  max-width: 205px;
	  height: 32px;
	}	
}
.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;
}


@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-yellow-fade) !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;
}

.offcanvas.show .offcanvas-header .navbar-brand img {
  width: auto !important;
  height: 26px !important;
  min-width: unset;
}

@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: 145px;
	}
	.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;
	z-index: 10;
}
.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(--color-teal-highlight);
	color: #292929;
}

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

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

.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(1.75);
	border-radius: 4px;
	object-fit: contain;
	mix-blend-mode: lighten;
}

.nav-link-image:hover img {
	transform: scale(2.5);
}

@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 ***/

.bg-offcanvas {
  background: rgba(0, 18, 23, 0.6);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15);
  border-right: 3px solid rgba(0, 61, 49, 0.44) !important;
}
.offcanvas.offcanvas-start {
	width: var(--menu-offcanvas-width);
}
.offcanvas {
	/*
	background-color: var(--bg-offcanvas) !important;
	border-right: 2px solid #00241f !important;
	*/
	z-index: 10000000000;
}
.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-yellow-main);
		/*border-radius: 0.5em;*/
		border-radius: 3.125rem;
		background-color: var(--color-yellow-main);
		color: var(--color-light-black);
		-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-yellow-hover-main);
		background-color: var(--color-yellow-hover-main);
		color: var(--color-light-black);
	}
	.item_game_menu_wrap img {
		/*
		border: 0.3em solid var(--bs-orange);
		border-radius: 0.7em;
		*/
		border: .134rem solid var(--color-yellow-main);
		border-radius: 0.526rem;
		background-color: var(--bg-main);
	}
}

/* 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-teal-fade);
		/*border-radius: 0.5em;*/
		border-radius: 3.125rem;
		background-color: var(--color-teal-fade);
		color: var(--color-light-black);
		-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-teal-highlight);
		background-color: var(--color-teal-highlight);
		color: var(--color-light-black);
	}
	.item_game_menu_wrap img {
		/*
		border: 0.3em solid var(--bs-orange);
		border-radius: 0.7em;
		*/
		border: .188rem solid var(--color-teal-fade);
		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 ***/


/* 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-teal-highlight);
}
.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;
  filter: brightness(0) invert(0.8);
}
.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-main-link);
}
.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: #123867;
  border-radius: 0 0.5em 0.5em 0;
  box-shadow: 0 0 10px rgb(2, 13, 35);
  z-index: 999;
}
.floating-socmed::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 2px;
  background-color: var(--color-yellow-main);
  z-index: 1000;
}
.floating-socmed .contact-outer {
  margin-bottom: 0;
}
.close-flsocmed {
  position: absolute;
  top: 3px;
  font-size: 0.7em;
  border: 1px solid var(--color-gray-light);
  width: 1.5em;
  height: 1.5em;
  line-height: 1.3em;
  border-radius: 1em;
  text-align: center;
  color: var(--color-gray-light);
  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-yellow-main);
}
.contact-outer .fa {
	font-size: 1.6em;
	color: var(--color-dark-gray);
}
.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-yellow-hover-main);
}

@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: #00051b;
  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;
}

/* 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(--color-teal-fade);
	border-color: var(--color-teal-fade);	
}

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

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

.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: 1.313rem;
	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 {
	
}

.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: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, #1832bb 0%,#0d206c 40%,#0c1737 100%);
	border-radius: .313rem;
	padding: 5px;
	font-family: 'PlayRegular';
	font-size: 12px;
	color: var(--color-main);
	text-decoration: none;
	text-transform: uppercase;
	border: 1px solid #1832bb;
}

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

.fun-demo-games .main-fun-demo-games {
	
}

.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: #00051b !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: #00051b !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-yellow-main);	
}

.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, var(--color-yellow-main) 0%,rgba(212,185,210,0) 35%,rgba(255,255,255,0) 50%,rgba(212,185,210,0) 65%, var(--color-yellow-main) 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 {
	
}

.fun-demo-games .item-fun-demo-game .content img {
	min-height: 88px;
}

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

.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: .5rem;
	margin-bottom: 0;
	color: var(--color-yellow-main);	
}

/* hot game */
.fun-demo-games .content-fun-demo-games .hot::before {
	content: 'HOT';
	position: absolute;
	top: 0.125rem;
	right: 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-game, 
.btn-play-game:focus {
	transform: skewX(-20deg);
	border-radius: 4px;
	background: linear-gradient(135deg, #ff6c27 0%,#fce92d 100%);
	border: 1px solid #FCE92D !important;
	color: #642304 !important;
	box-shadow: 2px 3px 0px #812C04, 0 -1px 15px rgba(252, 233, 45, .45 ) !important;
}

.btn-play-game:hover {
	color: var(--color-light-black) !important;
}

.btn-play-game span {
	transform: skewX(20deg);
	display: flex;
}

.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: linear-gradient(to bottom, #1832bb 0%,#0d206c 40%,#0c1737 100%);
	border-radius: .5rem;
	padding: 10px;
	font-size: 16px;
	color: var(--color-main);
	border: 1px solid #1832bb;
	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-yellow-main);
}

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

@media(max-width: 1199px) {
	.fun-demo-games .content-fun-demo-games {
		grid-template-columns: repeat(6, 1fr);	
	}
}

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

@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: linear-gradient(to bottom, #1832bb 0%,#0d206c 40%,#0c1737 100%);
		border-radius: .313rem;
		padding: 5px;
		font-size: 12px;
		color: var(--color-main);
		border: 1px solid #1832bb;
		text-decoration: none;
	}
	
	.fun-demo-games .content-fun-demo-games {
		grid-template-columns: repeat(3, 1fr);	
	}
	
	.fun-demo-games .item-fun-demo-game .content img {
		min-height: 115px;
	}
	
	.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: 480px) {
	.fun-demo-games .menu-side-fun-demo-games ul {
		grid-template-columns: repeat(2, 1fr);			
	}
	
	.fun-demo-games .content-fun-demo-games {
		grid-template-columns: repeat(2, 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: 111px;
	}
}

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

/* 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(0, 5, 27) 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-yellow-main);	
} 
.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;
}

.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: cover;
  content: "";
  background-position: center;
}

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

/* transaction table */
#get_detail_transaction {
	color: #397ee3;
}

/**********************
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: var(--color-teal-highlight) !important;
  box-shadow: 1px 1px 110px rgba(126, 195, 222, 0.61);
}
.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: #001F4D;
	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-yellow-main);
	/*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: #001F4D;
	padding: 2px;
	border-radius: 50%;
	margin-bottom: 5px;
	transform: scale(2.5) translateY(-4px);
}

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

.bottom-menu-popover .popover-header {
	background-color: #001F4D;
	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;
}

/** bottom-menu-popover **/
.bottom-menu-popover .popover-header {
	background-color: #001F4D;
}

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

.fixed-latest-dpwd {
	position: fixed;
	bottom: 15px;
	left: -100%;
	background-color: #123867;
	font-size: 14px;
	color: var(--color-main);
	padding: 5px 15px;
	border: 2px solid var(--color-yellow-main);
	border-radius: 5px;
	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-main);
}

@media(max-width: 575px) {
	.fixed-latest-dpwd {
		bottom: 90px;
		font-size: 11px;
		padding: 5px 10px 3px;
		border: 1px solid var(--color-yellow-highlight);
		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;
}