html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
input {
  border-radius: 0;
}

input[type="search"] {
  -webkit-appearance: none;
}
button {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

body {
	position: relative;
	margin: 0 auto;
	max-width: 600px;
	min-width: 320px;
	color: #fff;
	font-size: 16px;
	line-height: 100%;
	background: #14032B;
}

::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { background: #100527; }
::-webkit-scrollbar-thumb { background: #331e5f; }
::-webkit-scrollbar-thumb:hover { background: #331e5f; }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

a:focus {
	border: 0;
	outline: 0;
	box-shadow: none;
}

.modal {
	background: rgba(9,4,18,0.38);
    -webkit-backdrop-filter: blur(3px);
    		backdrop-filter: blur(3px);
}
.offcanvas-backdrop.show { opacity: 1; }

.offcanvas-backdrop {
	background: rgba(9,4,18,0.38);
    -webkit-backdrop-filter: blur(3px);
    		backdrop-filter: blur(3px);
}

.modal-fullscreen .modal-content {
	margin: 0 auto;
}

.modal-content {
	background: #140630;
	border: 1px solid #211038;
	border-radius: 8px;
	overflow: hidden;
}

.modal-body {
	padding: 16px;
}

@media only screen and (min-width: 600px) {
	.modal {
		padding: 24px 0;
	}
	
	.modal-fullscreen .modal-content {
		max-width: 500px;
		height: auto;
		border: 1px solid #211038;
		border-radius: 16px;
		overflow: hidden;
	}
}

.btn-closemodal {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0;
	top: 24px;
	right: 24px;
	z-index: 10;
}

.btn-closemodal svg {
	fill: #fff;
	width: 24px;
	height: 32px;
}

.btn-nostyle a {
	background: #3d2065;
	background: -moz-linear-gradient(0deg, #3d2065 0%, #96329e 100%);
	background: -webkit-linear-gradient(0deg, #3d2065 0%, #96329e 100%);
	background: linear-gradient(0deg, #3d2065 0%, #96329e 100%);
	box-shadow: rgba(0, 0, 0, 0.28) 0px -4px 0px inset;
}

.btn-main a {
	background: #c807ff;
	background: -moz-linear-gradient(0deg, #ffc107 0%, #ffc107 35%, #ffda6b 100%);
	background: -webkit-linear-gradient(0deg, #ffc107 0%, #ffc107 35%, #ffda6b 100%);
	background: linear-gradient(0deg, #ffc107 0%, #ffc107 35%, #ffda6b 100%);
	box-shadow: rgba(0, 0, 0, 0.28) 0px -4px 0px inset;
}

.btn-back a {
	position: absolute;
	top: 12px;
	left: 16px;
	display: block;
	height: 36px;
	width: 36px;
	font-size: 1.25em;
	text-align: center;
	line-height: 36px;
	background: rgba(255,255,255,0.08);
	border-radius: 8px;
}

/* ---------------
Typograpghy
--------------- */
h1, h2, h3, h4 {
	font-weight: 700;
	margin: 0;
	padding: 0;
	color: #080808;
}

h1 { font-size: 1.4em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.0em; }
h4 { font-size: 0.80em; }

a:link, a:visited, a:active { 
	color: #fff;
	text-decoration: none;
}

p { margin: 0 0 8px; line-height: 120%; }

strong { font-weight: 700; }

ol {
	margin: 0;
	padding: 0;
}

ol li {
	list-style-type: decimal;
	padding: 0 0 0 5px;
	margin: 0 0 10px 30px;
}

.mgbt-8 { margin-bottom: 8px; }
.mgbt-16 { margin-bottom: 16px; }
.mgbt-32 { margin-bottom: 32px; }

/********
Forms
********/

.loginmodal .modal-content,
.regmodal .modal-content {
	margin: 0 auto;
    height: 100%;
	max-width: 600px;
    border: 0;
    border-radius: 0;
	background: #140630;
}

.loginmodal .modal-body {
}

.regmodal .modal-body {
}

.loginmodal .modal-body,
.regmodal .modal-body{
	background-size: auto;
	height: 100%;
	padding: 16px;
}

.formbox {
	position: relative;
	display: block;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    margin: 138px auto 0;
    padding: 16px;
    width: 100%;
    background: rgba(9,4,18,0.88);
	border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    -webkit-backdrop-filter: blur(3px);
    		backdrop-filter: blur(3px);
	box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, 
				rgba(0, 0, 0, 0.07) 0px 2px 4px, 
				rgba(0, 0, 0, 0.07) 0px 4px 8px, 
				rgba(0, 0, 0, 0.07) 0px 8px 16px, 
				rgba(0, 0, 0, 0.07) 0px 16px 32px, 
				rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

.formbox .formlogo {
	position: absolute;
    top: -55px;
    left: 0;
    right: 0;
    display: block;
    margin: 0 auto 16px;
    padding: 0;
    width: 70%;
    max-width: 128px;
}

.logregtitle h2 {
	display: block;
	margin-bottom: 16px;
	color: #e9d7ad;
	font-size: 1.68em;
	text-align: center;
	line-height: 100%;
}

.logregtitle {
	text-align: center;
}

.logregtitle a {
	text-decoration: underline;
}

.form-floating > label {
	color: #fff;
	line-height: 150%;
}

.form-select,
input[type=text],
input[type=number],
input[type=password],
input[type=date],
input[type=email] {
	width: 100%;
    color: #fff;
	background: rgb(14,4,32);
	background: -moz-linear-gradient(0deg, rgba(14,4,32,1) 0%, rgba(14,4,32,0.4990371148459384) 100%);
	background: -webkit-linear-gradient(0deg, rgba(14,4,32,1) 0%, rgba(14,4,32,0.4990371148459384) 100%);
	background: linear-gradient(0deg, rgba(14,4,32,1) 0%, rgba(14,4,32,0.4990371148459384) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0e0420",endColorstr="#0e0420",GradientType=1);
	border: 2px solid #211038;
    border-radius: 8px;
}

input[type=date]::-webkit-calendar-picker-indicator{
	filter: invert(1);
}

.form-select:focus,
input[type=text]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=date]:focus,
input[type=email]:focus {
    color: #e9d7ad;
	background: rgb(14,4,32);
	background: -moz-linear-gradient(0deg, rgba(14,4,32,1) 0%, rgba(14,4,32,0.4990371148459384) 100%);
	background: -webkit-linear-gradient(0deg, rgba(14,4,32,1) 0%, rgba(14,4,32,0.4990371148459384) 100%);
	background: linear-gradient(0deg, rgba(14,4,32,1) 0%, rgba(14,4,32,0.4990371148459384) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0e0420",endColorstr="#0e0420",GradientType=1);
	border: 2px solid #e9d7ad;
	box-shadow: none !important;
	outline: none;
}

.form-select:disabled,
input[type=text]:disabled,
input[type=number]:disabled,
input[type=password]:disabled,
input[type=date]:disabled,
input[type=email]:disabled {
	color: #fff;
	background: rgb(14,4,32);
	background: -moz-linear-gradient(0deg, rgba(14,4,32,1) 0%, rgba(14,4,32,0.4990371148459384) 100%);
	background: -webkit-linear-gradient(0deg, rgba(14,4,32,1) 0%, rgba(14,4,32,0.4990371148459384) 100%);
	background: linear-gradient(0deg, rgba(14,4,32,1) 0%, rgba(14,4,32,0.4990371148459384) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0e0420",endColorstr="#0e0420",GradientType=1);
}

select option {
	background: #fff;
	color: #000;
}
.table-condensed {
	color: #000;
}

.formbox a.referopen {
	display: block;
	margin-bottom: 16px;
}

.formbox span.forgotpass {
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

.formbox span.forgotpass a {
	display: block;
	color: #fff;
	line-height: 100%;
	text-decoration: underline;
}

.formbox span.acceptterms {
	display: block;
	width: 100%;
	line-height: 125%;
}

.formbox span.acceptterms a {
	color: #fff;
	text-decoration: underline;
}

p.important {
	margin: 0;
	font-size: 0.85em;
	border-radius: 8px;
	text-align: left;
}

p.important a {
	text-decoration: underline;
}

ul.important {
	margin-top: 16px;
	margin-left: 16px;
	list-style-type: disc;
	font-size: 0.75em;
	text-align: left;
}

.btn-formsubmit {
	margin-top: 48px;
	width: 100%;
}

.btn-formsubmit a {
	display: block;
	width: 100%;
	height: 50px;
	color: #fff;
	font-size: 1.3em;
	font-weight: 700;
	text-shadow: 0px 1px 3px rgba(0,0,0,0.5);
	line-height: 46px;
	border-radius: 8px;
}

.floatchar-login {
	position: absolute;
    top: -8px;
    left: 0;
    right: -50px;
    z-index: 1;
    margin: 0 auto;
    width: 58%;
    max-width: 238px;
}

.floatchar-reg {
	position: absolute;
    top: -78px;
    left: 0;
    right: -15px;
    z-index: 1;
    margin: 0 auto;
    width: 58%;
    max-width: 198px;
}

.floatchar-login img,
.floatchar-reg img {
	display: block;
    margin: 0 auto;
    width: 100%;
}

.loginsocial {
	position: relative;
	display: block;
	margin-top: 32px;
	border-top: 1px solid rgba(255,255,255,0.15);
}

.loginsocial span.ls-sep {
	position: absolute;
    display: block;
    top: -10px;
    left: 0;
    right: 0;
    margin: 0 auto;
	font-size: 0.85em;
    text-align: center;
	text-shadow: 0px 0px 15px rgba(0, 0, 0, 1);
}

.ls-list {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 24px;
}

button.ls-brand {
	display: block;
	width: 48px;
}

button.ls-brand img {
	max-width: 100%;
}

@media screen and (max-width: 360px) {
	.formbox {
		width: 95%;
	}
}

@media only screen and (min-width: 600px) {
	.loginmodal .modal-content,
	.regmodal .modal-content {
		max-width: 500px;
		height: auto;
		border-radius: 16px;
		overflow: hidden;
	}
}

/********
Success 
********/

.success-icon i {
	display: block;
	margin: 32px auto 16px;
	color: #84ff7b;
	font-size: 5em;
	text-align: center;
}

ul.success-menu {
	display: flex;
	flex-direction: column;
	margin-top: 16px;
}

ul.success-menu li {
	margin: 0 auto 16px;
	width: 80%;
}

ul.success-menu li:last-child {
	margin: 0 auto;
}

ul.success-menu li a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	text-align: center;
	line-height: 42px;
    border: 2px solid #211038;
    border-radius: 48px;
}

ul.success-menu li a i {
	margin-right: 8px;
	color: #e9d7ad;
	font-size: 1.25em;
}

/********
Forget Password
********/

.lightmodal h2 {
	display: block;
	margin: 0;
	padding: 8px 0 24px;
	color: #e9d7ad;
	font-size: 1.25em;
	line-height: 28px;
}

.resendtimer {
	position:absolute;
	top: 0;
	right: .75rem;
	height: 58px;
	color: rgba(255,255,255,0.5);
	line-height: 58px;
}

.resendtimer a {
	color: #fff;
	text-decoration: underline;
}

.resendtimer button {
	color: #fff;
	text-decoration: underline;
}
.resendtimer button:disabled{
	filter: grayscale(1);
}
/********
Quickmenu
********/

.quickmenu {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 99;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	max-width: 600px;
	min-width: 320px;
}

.qm-wrap {
	width: 100%;
}

ul.qm-menu {
	display: flex;
	justify-content: space-evenly;
	padding: 0;
	width: 100%;
	height: 68px;
	background: rgba(9,4,18,0.88);
    -webkit-backdrop-filter: blur(3px);
    		backdrop-filter: blur(3px);
}

ul.qm-menu li svg {
	display: block;
	font-size: 1.25em;
	margin: 0 auto;
	fill: #fff;
}

.bounce {
  animation: bounce 1.5s ease infinite;
}
@keyframes bounce {
    0% {transform: scale(1, 1) translateY(0);}
    10% {transform: scale(1.1, 0.9) translateY(0);}
    30% {transform: scale(0.9, 1.1) translateY(-10px);}
    50% {transform: scale(1.05, 0.95) translateY(0);}
    57% {transform: scale(1, 1) translateY(-5px);}
    64% {transform: scale(1, 1) translateY(0);}
    100% {transform: scale(1, 1) translateY(0);}
}

ul.qm-menu li {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	width: 18%;
}

ul.qm-menu li a {
	display: block;
	width: 100%;
	color: #fff;
}

ul.qm-menu li i {
	display: block;
	font-size: 1.25em;
	text-align: center;
}

ul.qm-menu li a > span.qm-menutxt {
	display: block;
	margin-top: 4px;
	color: #e9d7ad;
	font-size: 0.65em;
	text-align: center;
	text-shadow: 0px 1px 3px rgba(0,0,0,0.5);
	line-height: 100%;
}

ul.qm-menu li.qm-menumid {
	width: 28%;
}

ul.qm-menu li.qm-menumid img {
	position: absolute;
	bottom: 8px;
	left: 0;
	right: 0;
	display: block;
    margin: 0 auto;
    max-height: 58px;
}

ul.qm-menu li.qm-wallet {
	width: 36%;
}

ul.qm-menu li.qm-wallet a i {
	font-size: 1.5em;
}

.qm-balance {
	display: flex;
	flex-direction: column;
}

.qm-balance > .qmw-balance {
	display: flex;
	align-items: center;
	line-height: 100%;
}

.qmw-title {
	display: block;
	margin-bottom: 4px;
	font-size: 0.65em;
	line-height: 100%;
}

.qmw-currency {
	display: block;
	margin-right: 4px;
	font-size: 0.65em;
	line-height: 100%;
}

.qmw-amount {
	display: block;
	color: #e9d7ad;
	font-size: 0.85em;
	line-height: 100%;
}

@media screen and (min-width: 360px) {
	ul.qm-menu li.qm-menumid img {
		max-height: 58px;
	}
	
    .qmw-amount {
        font-size: 0.75em;
    }
}

@media screen and (max-width: 360px) {
	ul.qm-menu li {
		width: 25%;
	}

	ul.qm-menu li.qm-wallet {
		width: 50%;
	}

	ul.qm-menu li.qm-menumid {
		display: none;
	}
}

@media screen and (min-width: 400px) {
	ul.qm-menu li.qm-menumid img {
		max-height: 68px;
	}
	
    .qmw-amount {
        font-size: 1em;
    }
}

@media screen and (min-width: 600px) {
	.quickmenu {
		bottom: 8px;
	}

	ul.qm-menu {
		border-radius: 8px;
	}
}

/********
Main Menu
********/

.mainmenu {
	margin: 0;
	padding: 0;
	width: 100% !important;
	max-width: 480px;
	border: 0;
	background: rgba(9,4,18,0.88);
    -webkit-backdrop-filter: blur(5px);
    		backdrop-filter: blur(5px);
}

.mainmenu .offcanvas-body {
	position: relative;
	margin: 0;
	padding: 0;
}

.mm-wrap {
	position: absolute;
	top: 12px;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
	padding: 8px 24px;
}

.mm-wrap .actionbtn {
	padding: 0;
}

.mm-nav {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 24px;
	margin-bottom: 24px;
}

.btn-home a {
	display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50px;
    background: rgba(255,255,255,0.08);
}

.mm-lang {
}

.btn-lang {
	display: flex;
	align-items: center;
	padding: 8px 12px 8px 8px;
	color: #fff;
	font-size: 1em;
	line-height: 100%;
	background: rgba(255,255,255,0.08);
	border-radius: 50px;
}

.btn-lang img {
	display: block;
	margin-right: 12px;
	width: 20px;
	height: 20px;
}

.btn-lang i {
	display: block;
	margin-left: 12px;
}

.ddlang {
	width: calc(100% - 48px);
	margin: 6px auto;
	padding: 24px 0;
	background: rgba(9,4,18,0.88);
	box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 8px;
    -webkit-backdrop-filter: blur(5px);
    		backdrop-filter: blur(5px);
}

.ddlang h3.lang-title {
	margin-bottom: 0;
	padding: 0 0 24px 16px;
	color: #fff;
	border-bottom: 1px solid rgba(255,255,255,0.18);
}

.lang-country {
	display: flex;
	align-items: center;
	margin: 24px 0 0 16px;
	color: #fff;
}

.lang-country img {
	display: block;
	margin-right: 16px;
	width: 32px;
	height: 32px;
}

ul.lang-list {
	display: flex;
	flex-wrap: wrap;
}

span.lang-countryname {
	display: block;
	margin-bottom: 4px;
	width: 100%;
	font-weight: 700;
	line-height: 100%;
}

ul.lang-list li {
	display: flex;
	margin-right: 16px;
	padding-right: 16px;
	line-height: 100%;
	border-right: 1px solid rgba(255,255,255,0.12);
}

ul.lang-list li:last-child {
	margin: 0;
	padding: 0;
	border: 0;
}

ul.lang-list li a {
	/* color: rgba(255,255,255,0.5); */
	font-size: 0.85em;
	color: #e9d7ad;
	text-decoration: underline;
}

ul.lang-list li.disabled a {
	color: rgba(255,255,255,0.5);
	text-decoration: none;
}

/* ul.lang-list li.active a {
	color: #e9d7ad;
	text-decoration: underline;
} */

.userprofile {
	display: flex;
	align-items: center;
 	width: 100%;
    margin-bottom: 16px;
    padding: 0;
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
	overflow: hidden;
}

.up-user {
	display: flex;
	align-items: center;
    justify-content: space-between;
    width: 100%;
	height: 58px;
    padding: 0;
}


.up-profile {
	display: flex;
	width: 100%;
}

.up-rank {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
}

.up-rank img {
	width: 38px;
	height: 38px;
}

.up-level {
	position: absolute;
    display: block;
    left: 0;
    right: 0;
    margin: 0 auto;
	font-size: 0.85em;
    text-align: center;
}

.usr-uid {
	font-size: 0.85em;
}

.usr-identidy {
	display: flex;
	flex-direction: column;
	width: calc(100% - 50px);
}

.usr-greet {
	font-weight: 700;
	margin-bottom: 4px;
}

.btn-account {
	display: block;
    color: #fff;
    width: 58px;
    height: 58px;
    line-height: 40px;
    background: rgba(255,255,255,0.12);
}

ul.ddaccount  {
	width: calc(100% - 48px);
	margin: 0 auto;
	padding: 12px 0;
	background: rgba(9,4,18,0.88);
	box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 8px;
    -webkit-backdrop-filter: blur(5px);
    		backdrop-filter: blur(5px);
}

ul.ddaccount li a {
	display: flex;
	align-items: center;
	padding: 12px 24px;
	font-size: 1em;
}

ul.ddaccount li.ddlogout a {
	display: flex;
    align-items: center;
    margin-top: 12px;
    padding: 24px 24px 12px;
	color: red;
    font-size: 1em;
    border-top: 1px solid rgba(255,255,255,0.18);
}

ul.ddaccount li i {
	display: block;
    margin-right: 24px;
    height: 24px;
    width: 24px;
    font-size: 1.25em;
    text-align: center;
    line-height: 24px;
}

.up-lvlprogress {
	width: 100%;
    padding: 16px;
}

.lp-progressbar {
	display: flex;
    align-items: baseline;
    justify-content: space-between;
	margin: 0;
}

.up-lvlprogress .progress {
	margin: 8px 0;
	font-size: 0.65em;
    background: rgba(255,255,255,0.12);
	border-radius: 4px;
}

.pb-pct,
.pb-lvlstatus {
	display: block;
	font-size: 0.85em;
	line-height: 100%;
}

.pb-bar {
	background: rgb(55,32,101);
	background: -moz-linear-gradient(90deg, rgba(55,32,101,1) 0%, rgba(86,50,158,1) 83%, rgba(107,67,186,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(55,32,101,1) 0%, rgba(86,50,158,1) 83%, rgba(107,67,186,1) 100%);
	background: linear-gradient(90deg, rgba(55,32,101,1) 0%, rgba(86,50,158,1) 83%, rgba(107,67,186,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#211038",endColorstr="#6b43ba",GradientType=1);
}

ul.mm-menu {
	margin-top: 16px;
}

ul.mm-menu li {
	font-size: 1.25em;
}

ul.mm-menu li img {
	display: block;
	margin-right: 16px;
	width: 32px;
	height: 32px;
}

ul.mm-menu li a {
	display: flex;
	align-items: center;
	padding: 8px 0;
}

ul.mm-footermenu {
	margin: 16px 0;
	padding-top: 16px;
    font-size: 1em;
	border-top: 1px solid rgba(255,255,255,0.18);
}

ul.mm-footermenu li a {
	display: block;
	padding: 8px 0;
	color: rgba(255,255,255,0.5);
}

.badge {
	margin-left: 8px;
	font-weight: 400;
}

@media screen and (max-width: 360px) {
	ul.lang-list li {
		margin-right: 8px;
		padding-right: 8px;
	}
}

/********
Main Banner
********/

.mainbanner {
	width: 100%;
	margin-bottom: 16px
}

.mainbanner img {
	max-width: 100%;
	border-radius: 8px;
}

.mb-pg {
    opacity: 1;
    background: #fff;
    border: 0;
    border-radius: 10px;
    display: inline-block;
    height: 6px;
    margin: 3px;
    padding: 0;
    transition: transform .8s all;
    width: 6px;
}

.mb-pg.is-active {
    background: #594be7;
    transform: scale(1);
	min-width: 20px;
    border-radius: 10px;
}

/********
Join Telegram
********/

.jointlg {
    position: relative;
    width: calc(100% - 16px);
    height: 88px;
    margin: 32px auto 0;
    padding: 16px;
    border-radius: 8px;
    overflow: hidden;
}

.jointxt {
    display: block;
    margin-bottom: 8px;
    font-size: 1.25em;
    font-weight: 700;
}

.joinoffer {
	display: block;
    margin: 8px 0 24px;
    color: rgba(255,255,255,0.5);
	font-size: 0.85em;
    line-height: 100%;
}

.btn-jointlg a {
	display: block;
	padding: 8px 16px;
	font-size: 0.85em;
	background: rgba(255,255,255,0.12);
	border-radius: 8px;
}

.tlg-s {
	width: 88px;
	height: 88px;
	position: absolute;
	top: -8px;
    right: 16px;
}

.tlg-m {
	width: 38px;
	height: 38px;
	position: absolute;
	top: 24px;
    right: 108px;
	color: rgba(255,255,255,0.5);
}

.tlg-xs {
	width: 58px;
	height: 58px;
	position: absolute;
	top: -40px;
    right: 64px;
	color: rgba(255,255,255,0.5);
}

@media screen and (max-width: 360px) {
	.tlg-s {
		width: 68px;
		height: 68px;
		top: 0;
	}
	.tlg-m { display: none; }
	.tlg-xs { display: none; }
}

/********
Login & Register
********/

.actionbtn {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 16px;
	padding: 0 8px;
}

.btn-act {
	position: relative;
	width: 50%;
	overflow: hidden;
	border-radius: 8px
}

.btn-act a {
	display: block;
	width: 100%;
	height: 50px;
	color: #fff;
	font-size: 1.3em;
	font-weight: 700;
	text-shadow: 0px 1px 3px rgba(0,0,0,0.5);
	line-height: 46px;
	border-radius: 8px;
}

/********
Games Category
********/

ul.gc-list {
	display: flex;
	padding: 0 8px;
	gap: 8px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

ul.gc-list::-webkit-scrollbar { 
    display: none;
}

ul.gc-list li a {
	display: block;
	padding: 16px 24px;
	color: #fff;
	text-align: center;
	text-shadow: 0px 2px 4px rgba(20,6,48,0.88);
	background: #211038;
	border: 2px solid #211038;
	border-radius: 8px;
}

ul.gc-list li a.active {
	background: transparent;
	/* border: 2px solid #e9d7ad; */
	color: #c86dde;

}

ul.gc-list li img {
	display: block;
	margin: 0 auto 8px;
	width: 28px;
	height: 28px;
}

ul.gc-list li span.gc-title {
	display: block;
	font-size: 0.85em;
	line-height: 100%;
	text-align: center;
}
ul.gc-list li span.gc-title i {
	margin-left: 4px;
}
ul.selprovider {
	padding: 8px;
	background: #211038;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
	border-radius: 8px;
    -webkit-backdrop-filter: blur(5px);
    		backdrop-filter: blur(5px);
}

ul.selprovider.show {
	display: grid;
	margin: 6px auto 0 !important;
    width: calc(100% - 16px);
    justify-content: space-between;
    gap: 8px;
}

@media screen and (max-width: 360px) {
	ul.selprovider.show { grid-template-columns: 49% 49%; }
}

@media screen and (min-width: 360px) {
	ul.selprovider.show { grid-template-columns: 32% 32% 32%; }
}

@media screen and (min-width: 500px) {
	ul.selprovider.show { grid-template-columns: 24% 24% 24% 24%; }
}

@media screen and (min-width: 768px) {
	ul.selprovider.show { grid-template-columns: 19% 19% 19% 19% 19%; }
}

ul.selprovider li {
	display: flex;
    align-items: center;
    width: 100%;
    height: 78px;
	background: rgba(0,0,0,0.12);
	border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
}
ul.selprovider li.active {
	background: transparent;
    border: 2px solid #e9d7ad;
}

ul.selprovider li img {
	display: block;
	margin: 0 auto 8px;
	width: 35px;
	height: 35px;
}

ul.selprovider li a {
	display: flex;
    align-items: center;
    flex-direction: column;
    margin: 0;
    padding: 0;
    width: 100%;
    background: transparent;
	border: 0;
}

ul.selprovider li a span.ddp-name {
	display: block;
	padding: 0 8px;
	white-space: normal;
    font-size: 0.65em;
	line-height: 100%;
}

.lobbywrap {
	position: relative;
}

.lobbywrap .gamesearch {
	position: sticky;
    top: 0;
    z-index: 9;
    width: calc(100% - 16px);
    margin: 0 auto;
    padding: 8px 0;
    background: #140630;
}

.gamesearch {
	position: relative;
	width: calc(100% - 16px);
	margin: 8px auto 0;
}

.gamesearch i {
	position: absolute;
    top: 0;
    right: 20px;
	height: 58px;
	color: rgba(255,255,255,0.5);
    font-size: 1.25em;
	line-height: 58px;
}

.gamesearch input[type=search] {
	width: 100%;
	color: #fff;
	font-size: 0.85em;
	background: rgba(0,0,0,0.18);
	border: 2px solid #211038;
	border-radius: 8px;
}

.gamesearch input[type=search]:focus {
	border: 2px solid #e9d7ad;
	box-shadow: none !important;
	outline: none;
}

.form-floating > label i {
	margin-right: 4px;
}

/********
Feature Games
********/

.sectionwrap {
	display: flex;
	justify-content: space-between;
	margin: 32px 0 16px;
}

.sectiontitle {
	display: flex;
	align-items: center;
	padding-left: 8px;
	width: 70%;
	color: #fff;
	font-size: 1.25em;
	line-height: 100%;
	text-transform: capitalize;
}

.sectiontitle img {
	display: block;
	margin-right: 8px;
	width: 24px;
	height: 24px;
}

span.sectionmore {
	display: flex;
    align-items: center;
    padding-right: 8px;
}

span.sectionmore a {
	display: block;
    align-self: end;
    padding: 0 12px;
    font-size: 0.85em;
    color: #fff;
    text-align: right;
    line-height: 30px;
	background: rgba(255,255,255,0.08);
	border-radius: 8px;
}

ul.fg-list li img {
	display: block;
    margin: 0 auto;
    max-width: 98%;
    padding-bottom: 8px;
    border-radius: 8px;
}

.fg-overlay {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	margin: 0 auto;
	width: 100%;
	height: 100%;
    background: rgb(20,6,48);
    background: -moz-linear-gradient(0deg, rgba(20,6,48,1) 20%, rgba(20,6,48,0) 60%);
    background: -webkit-linear-gradient(0deg, rgba(20,6,48,1) 20%, rgba(20,6,48,0) 60%); 
    background: linear-gradient(0deg, rgba(20,6,48,1) 20%, rgba(20,6,48,0) 60%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#140630",endColorstr="#140630",GradientType=1);
}

.fg-details {
	position: absolute;
	display: flex;
	flex-direction: column;
	bottom: 0;
	width: 100%;
}

.fg-details > .fg-title {
	display: flex;
    align-items: flex-end;
	justify-content: space-around;
    margin: 0 auto 4px;
    padding: 0 4px;
    height: 32px;
	font-size: 0.75em;
    text-align: center;
    line-height: 100%;
}

.fg-details > .fg-provider {
	display: block;
	width: 100%;
	color: #e9d7ad;
	font-size: 0.65em;
	text-align: center;
    line-height: 100%;
}

/********
Transactions
********/

.trxcontent h2 {
	display: block;
	margin: 0;
	padding: 8px 0 24px;
	color: #e9d7ad;
	font-size: 1.68em;
	text-align: center;
	line-height: 28px;
}

.trx-radio input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

.trx-radio-fpx input[type="radio"]:checked + label {
	color: #ff6529;
	border: 2px solid #211038;
	background: transparent;
}

.trx-radio .pgx-radio {
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    height: 58px;
	min-width: 90px;
    border-radius: 8px;
	background: rgb(14,4,32);
	background: -moz-linear-gradient(0deg, rgba(14,4,32,1) 0%, rgba(14,4,32,0.4990371148459384) 100%);
	background: -webkit-linear-gradient(0deg, rgba(14,4,32,1) 0%, rgba(14,4,32,0.4990371148459384) 100%);
	background: linear-gradient(0deg, rgba(14,4,32,1) 0%, rgba(14,4,32,0.4990371148459384) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0e0420",endColorstr="#0e0420",GradientType=1);
	border: 2px solid #211038;
}

.pgx-selection input[type="radio"]:checked + label,
.amt-selection input[type="radio"]:checked + label {
	color: #e9d7ad;
	border: 2px solid #e9d7ad;
	background: transparent;
}

.pgx-selection {
	display: flex;
	gap: 8px;
	justify-content: space-evenly;
	margin-bottom: 32px;
	overflow-x: scroll;
}

.pgx-selection .pgx-name,
.pgx-selection .pgx-desc {
	display: block;
	text-align: center;
	line-height: 100%;
}

.pgx-selection .pgx-name {
	/* font-size: 1.25em; */
	font-size: 14px;
	margin-bottom: 4px;
}

.pgx-selection .pgx-desc {
	font-size: 0.65em;
}

.amt-selection {
	display: flex;
	gap: 8px;
	justify-content: space-between;
	margin: 8px 0 0;
}

.trx-radio .amt-radio {
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    width: 25%;
	min-height: 46px;
	cursor: pointer;
	background: rgb(14,4,32);
	background: -moz-linear-gradient(0deg, rgba(14,4,32,1) 0%, rgba(14,4,32,0.4990371148459384) 100%);
	background: -webkit-linear-gradient(0deg, rgba(14,4,32,1) 0%, rgba(14,4,32,0.4990371148459384) 100%);
	background: linear-gradient(0deg, rgba(14,4,32,1) 0%, rgba(14,4,32,0.4990371148459384) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0e0420",endColorstr="#0e0420",GradientType=1);
	border: 2px solid #211038;
    border-radius: 8px;
}

.input-rg-item {
	position: absolute;
	top: 0;
	right: 16px;
	padding: 0 8px;
	height: 58px;
	font-size: 1.25em;
	line-height: 58px;
}

.color-valid {
	color: #84ff7b;
}

.amt-radio > .amt-currency {
	display: block;
	margin-right: 4px;
	font-size: 0.65em;
	line-height: 100%;
}

.amt-radio > .depamt {
	display: block;
	line-height: 100%;
}

.amt-radio > .depextra {
	display: block;
	width: 100%;
	margin-top: 4px;
	color: #84ff7b;
	font-size: 0.65em;
	text-align: center;
	line-height: 100%;
}

.promo-selection{
	position: relative;
	flex-direction: column;
	flex-wrap: wrap;
}

.labeltitle {
	display: block;
	margin: 32px 0 8px;
	width: 100%;
	font-size: 0.85em;
}
.labeltitle2 {
	display: block;
	margin: 16px 0 8px;
	width: 100%;
	font-size: 0.85em;
}
.warning-href{
	width: 100%;
	font-size: 0.85em;
	color: rgb(218, 24, 24) !important;
	text-decoration: underline !important;
	margin: 15px 0 0 0;
	display: flex;
	cursor: pointer;
}
.bank-radio,
.promo-radio {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 8px;
	padding: 8px;
	height: 58px;
	cursor: pointer;
	background: rgb(14,4,32);
	background: -moz-linear-gradient(0deg, rgba(14,4,32,1) 0%, rgba(14,4,32,0.4990371148459384) 100%);
	background: -webkit-linear-gradient(0deg, rgba(14,4,32,1) 0%, rgba(14,4,32,0.4990371148459384) 100%);
	background: linear-gradient(0deg, rgba(14,4,32,1) 0%, rgba(14,4,32,0.4990371148459384) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0e0420",endColorstr="#0e0420",GradientType=1);
	border: 2px solid #211038;
    border-radius: 8px;
}

.bank-selection input[type="radio"]:checked + label,
.promo-selection input[type="radio"]:checked + label {
	color: #e9d7ad;
	border: 2px solid #e9d7ad;
	background: rgb(14,4,32);
	background: -moz-linear-gradient(0deg, rgba(14,4,32,1) 0%, rgba(14,4,32,0.4990371148459384) 100%);
	background: -webkit-linear-gradient(0deg, rgba(14,4,32,1) 0%, rgba(14,4,32,0.4990371148459384) 100%);
	background: linear-gradient(0deg, rgba(14,4,32,1) 0%, rgba(14,4,32,0.4990371148459384) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0e0420",endColorstr="#0e0420",GradientType=1);
}

.trx-radio .promotitle {
	display: block;
	width: 100%;
	text-align: center;
}

.ps-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
}

.ps-label {
    max-width: 50%;
	color: rgba(255,255,255,0.5);
    font-size: 0.75em;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}

.ps-bonuscode {
    padding: 0 8px;
	color: rgba(255,255,255,0.5);
	font-size: 0.65em;
    line-height: 16px;
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
}

.ps-showmore {
	position: absolute;
    top: 90px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 68px;
    cursor: pointer;
    color: #e9d7ad;
    text-align: center;
    background: rgb(20,6,48);
    background: -moz-linear-gradient(0deg, rgba(20,6,48,1) 25%, rgba(20,6,48,0.3) 100%);
    background: -webkit-linear-gradient(0deg, rgba(20,6,48,1) 25%, rgba(20,6,48,0.3) 100%);
    background: linear-gradient(0deg, rgba(20,6,48,1) 25%, rgba(20,6,48,0.3) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#140630",endColorstr="#140630",GradientType=1);
}

.turnovertxt {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin: 16px 0;
	font-size: 1em;
	text-align: center;
}

.wd-details {
	display: flex;
	gap: 1px;
	border-radius: 8px;
	overflow: hidden;
}

.wd-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 16px 0;
	width: 50%;
	background: rgba(255,255,255,0.08);
}

.wd-title {
	margin-bottom: 4px;
	font-size: 0.85em;
	text-align: center;
}

.wd-answer {
	display: flex;
	gap: 4px;
	color: #e9d7ad;
	font-size: 1em;
}

.wd-currency {
	color: #fff;
	font-size: 0.65em;
	/* color: #e9d7ad;
	font-size: 1em; */
}

.amt-limit {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
	font-size: 0.85em;
}

.amt-max {
	position: absolute;
    top: 9px;
    right: 9px;
	z-index: 9;
}

.amt-max a {
	display: block;
    height: 40px;
    padding: 0 16px;
    color: #fff;
    font-size: 1em;
    line-height: 40px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
}

.bankdelete {
	position: absolute;
    right: 16px;
}

.createbank {
	width: 100%;
}

.createbank a {
	position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 8px;
    width: 100%;
    height: 58px;
    background: rgba(255,255,255,0.08);
    border: 2px dashed #211038;
    border-radius: 8px;
}

ul.bankinfo {
	font-size: 0.85em;
    margin-bottom: 32px;
    margin-left: 16px;
    list-style-type: decimal;
}

ul.bankinfo li {
	margin-bottom: 8px;
}

ul.bankinfo li:last-child {
	margin: 0;
}

.cancelaction {
	width: 100%;
}

.cancelaction a {
	display: block;
	margin-top: 16px;
	width: 100%;
	text-align: center;
	text-decoration: underline;
}

.wd-fulfil {
	display: flex;
	align-items: center;
	padding: 16px;
	width: 100%;
	height: 188px;
	text-align: center;
	background: rgba(255,255,255,0.08);
    border-radius: 8px;
}

.wd-fulfil p {
	margin: 0;
	width: 100%;
	line-height: 100%;
}

.wd-turnover {
	display: block;
	text-align: center;
	margin-top: 16px;
	color: #e9d7ad;
	font-size: 1.5em;
}

@media screen and (max-width: 360px) {
	.amt-selection .amt-currency { display: none; }
	.turnovertxt { font-size: 0.75em; }
	.bankdelete { right: 8px; }
	.wd-details { flex-direction: column; }
	.wd-content { padding: 8px; width: 100%; }
	.wd-title span:first-child { margin: 0; }
}

/********
Member Area
********/

h2.page-title {
    display: block;
    margin: 0;
    padding: 8px 0 16px;
    color: #e9d7ad;
    font-size: 1.68em;
    text-align: center;
    line-height: 28px;
}

h3.ma-title {
	color: #fff;
	margin-bottom: 16px;
	padding-left: 8px;
}

h3.ma-title i {
	margin-right: 8px;
}

.member-area {
    margin: 0 auto 16px;
    padding: 16px;
	width: calc(100% - 16px);
	max-width: 500px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
}

ul.msglist {
	
}

ul.msglist li {
	margin-bottom: 8px;
}

ul.msglist li:last-child {
	margin-bottom: 0;
}

.listheader {
	display: flex;
	justify-content: space-between;
	margin-bottom: 16px;
}

.msg-action {
	display: flex;
	gap: 8px;
	color: rgba(255,255,255,0.2);
}

.msg-action a {
	color: rgba(255,255,255,1);
}

ul.msglist li {
	display: flex;
	justify-content: space-between;
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 8px;
	overflow: hidden;
}

ul.msglist li.new {
	background: rgba(255,255,255,0.08);
	border: 0;
}

ul.msglist li.read {
	background: rgba(255,255,255,0.08);
	border: 0;
}

ul.msglist li a {
	width: calc(100% - 50px);
	padding: 8px 0;
}

.msg-checkbox {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
}

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

.msg-title {
	margin-bottom: 4px;
}

.msg-date {
	font-size: 0.85em;
	color: rgba(255,255,255,0.5);
}

.msg-delete {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25px;
}

.msgmwrap .modal-body {
    padding-top: 68px;
}

.msgmwrap h3 {
	display: block;
    margin-bottom: 8px;
    color: #e9d7ad;
    font-size: 1.25em;
}

.msgmwrap span.msg-date {
	display: block;
	margin-bottom: 16px;
}

.msgmwrap img {
	display: block;
	max-width: 90%;
	border-radius: 8px;
}

@media screen and (max-width: 360px) {
	.member-area {
		padding: 0;
		border: 0;
	}
}

/********
Game List
********/
@keyframes rotate {
    0% {
        transform: rotate(-360deg);
    }
}

ul.gl-list {
	display: grid;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 16px;
	padding: 0 8px;
}
ul.gl-list.fullver{
	grid-template-columns: 100%;
}

ul.gl-list > div{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 50px 0;
}
ul.gl-list > div.rotate{
	animation: rotate 0.6s ease-out infinite;
}

ul.gl-list > div > img{
	width: 30%;
}

ul.gl-list > div > span{
	width: 100%;
	color: #fff;
	text-align: center;
	margin-top: 20px;
}

ul.gl-list li {
	position: relative;
	margin-bottom: 16px;
	padding-bottom: 16px;
}

ul.gl-list li img {
	display: block;
    margin: 0 auto;
    max-width: 98%;
    padding-bottom: 8px;
    border-radius: 8px;
}

@media screen and (max-width: 360px) {
	ul.gl-list { grid-template-columns: 49% 49%; }
}

@media screen and (min-width: 360px) {
	ul.gl-list { grid-template-columns: 32% 32% 32%; }
}

@media screen and (min-width: 500px) {
	ul.gl-list { grid-template-columns: 24% 24% 24% 24%; }
}

@media screen and (min-width: 768px) {
	ul.gl-list { grid-template-columns: 19% 19% 19% 19% 19%; }
}

/********
Refer
********/

ul.rs-btn {
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

ul.rs-btn li {
	width: 50%;
}

.btn-refercode {
	display: block;
	width: 100%;
	height: 38px;
	color: #fff;
	line-height: 34px;
	background: #211038;
    border: 2px solid #211038;
	border-radius: 38px;
}

.btn-refercode.active {
	background: transparent;
    border: 2px solid #e9d7ad;
}

.rstab-title {
	display: block;
	font-size: 0.85em;
	margin-bottom: 8px;
}

.rs-referlink input[type=text] {
	width: 100%;
	padding-right: 68px;
	color: #fff;
	height: 58px;
	font-size: 1.25em;
	text-align: center;
    text-overflow: ellipsis;
    text-wrap: nowrap;
	line-height: 58px;
	background: rgba(0,0,0,0.18);
	border: 2px solid #211038;
	border-radius: 8px !important;
	overflow: hidden;
}

.rs-referlink input[type=text]:focus {
	border: 2px solid #e9d7ad;
	box-shadow: none !important;
	outline: none;
}

.rsqr-wrap img {
	display: block;
    max-width: 58%;
    margin: 0 auto;
    border: 8px solid rgba(255,255,255,0.08);
    border-radius: 8px;
	background: #fff;
}

ul.rs-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 16px;
}

ul.rs-social li {
	font-size: 1.5em;
}

.download-qr {
	display: block;
	margin: 16px auto 0;
	width: 50%;
}

.download-qr a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 8px 0;
	text-align: center;
	line-height: 100%;
	border: 2px solid #211038;
    border-radius: 48px;
}

.refer-rewards {
	display: flex;
	margin: 16px auto;
	gap: 1px;
	width: calc(100% - 32px);
	max-width: 500px;
	border-radius: 8px;
	overflow: hidden;
}

.rr-card {
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 16px 8px;
    text-align: center;
    width: 50%;
    background: rgba(255,255,255,0.08);
}

.rr-card span:first-child {
	display: block;
    margin-bottom: 8px;
    color: #e9d7ad;
    font-size: 1.5em;
    line-height: 100%;
}

.rr-card span:last-child {
	display: block;
	font-size: 0.85em;
    line-height: 100%;
}

h3.refer-title {
	display: block;
	margin-bottom: 8px;
	padding: 0 8px;
	color: #fff;
	font-size: 1.25em;
	text-align: center;
	line-height: 100%;
}

.refer-desc {
	display: block;
	padding: 0 8px;
	font-size: 0.85em;
	text-align: center;
	line-height: 100%;
}

.refer-report a {
	display: block;
	height: 48px;
	line-height: 44px;
	text-align: center;
	border: 2px solid #211038;
	border-radius: 48px;
}

.refer-table {
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 0.85em;
	text-align: center;
	overflow: hidden;
}

.refer-table a {
	color: #fff;
	text-decoration: underline;
}

.refer-table tr th {
	font-weight: 700;
	background: rgba(255,255,255,0.08);
	border: 2px solid #140630;
}

.refer-table tr td {
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

.refer-table tr td.underline{
	text-decoration: underline;
}

@media screen and (max-width: 360px) {
	.refer-rewards { flex-direction: column; }
	.rr-card { padding: 16px 8px; width: 100%; }
	.rr-card span:first-child { margin: 0; }
}

/********
Quest
********/

ul.qi-menu {
	display: flex;
    justify-content: space-between;
    gap: 8px;
}

ul.qi-menu li {
	width: 33%;
}

.btn-questmenu {
	display: block;
	width: 100%;
	height: 38px;
	color: #fff;
	line-height: 34px;
	background: #211038;
    border: 2px solid #211038;
	border-radius: 38px;
}

.btn-questmenu.active {
	background: transparent;
    border: 2px solid #e9d7ad;
}

.qi-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	padding: 16px;
	background: rgba(255,255,255,0.08);
	border-radius: 8px;
}

.qi-wrap.claimed {
	opacity: 0.38;
}

.qi-wrap:last-child { margin: 0; }

.qi-desc {
	display: flex;
	flex-direction: column;
	width: calc(100% - 80px);
}

.qi-desc span:first-child {
	font-size: 0.85em;
}

.qi-desc span:nth-child(2) {
	color: #e9d7ad;
	font-size: 0.85em;
	margin: 4px 0 16px;
}

.qi-desc i {
	margin-right: 4px;
}

.qi-wrap .progress {
	height: 8px;
	font-size: 0.65em;
    background: rgba(255,255,255,0.12);
    border-radius: 4px;
	position: relative;
}
.qi-desc{
	position: relative;
}
.qi-desc .progress-txt{
	color: #fff;
	position: absolute;
	bottom: -4px;
	font-size: 12px;
	left: 50%;
	transform: translateX(-50%);
}

.qi-btn{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-width: 60px;
}

.btn-claim a {
	display: block;
	width: 58px;
	height: 34px;
	font-size: 0.85em;
	line-height: 30px;
	border-radius: 4px;
}

.btn-claimed {
	display: block;
	width: 58px;
	height: 38px;
	font-size: 0.75em;
	text-align: center;
	line-height: 100%;
	color: #fff;
	border-radius: 8px;
	/* word-break: break-word; */
}

.btn-claimed:disabled{
	filter: grayscale(1);
}

.btn-claimed.claim{
	background: linear-gradient(0deg, rgba(55,32,101,1) 0%, rgba(86,50,158,1) 100%);
    box-shadow: rgba(0, 0, 0, 0.28) 0px -4px 0px inset;
}
.btn-claimed.not_completed{
	background: transparent;
	pointer-events: none;
	color: #4e4e4e;
	border: none;
}
.btn-claimed.pending{
	background: transparent;
	pointer-events: none;
	color: orange;
	border: none;
}
.btn-claimed.fail{
	background: transparent;
	pointer-events: none;
	color: red;
	border: none;
}
.btn-claimed.success{
	background: transparent;
	pointer-events: none;
	color: green;
	border: none;
}






.btn-claimed i {
	font-size: 1.5em;
}

.btn-claimed span {
	font-size: 1.25em;
}

.timer {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 16px;
	height: 38px;
	font-size: 0.85em;
	line-height: 38px;
	background: rgba(255,255,255,0.08);
    border-radius: 8px;
}

/********
Level
********/

.lvl-wrap {
	margin: 0 auto;
	max-width: 500px;
}

.lvl-card {
	position: sticky;
	top: 0;
	z-index: 9;
	display: block;
	margin: 0 auto 16px;
	padding: 16px 16px 0;
	width: 100%;
	background: rgba(20,6,48,0.68);
	border-bottom: 1px solid rgba(255,255,255,0.08);
    -webkit-backdrop-filter: blur(5px);
    		backdrop-filter: blur(5px);
	box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}

.lvl-laurel {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.lvl-laurel img {
	display: block;
	margin: 0 auto;
	width: 68px;
	height: 68px;
}

.lvl-laurel span:first-child {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    margin: 0 auto;
	font-size: 2em;
    text-align: center;
}

.lvl-rewards {
	position: relative;
    display: flex;
	align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 auto 24px;
    padding: 0 16px 0 4px;
    width: calc(100% - 32px);
	border: 2px solid #211038;
    border-radius: 100px;
}

.lvl-rewards::after {
	position: absolute;
    left: 40px;
    bottom: -26px;
    border-right: 4px solid #211038;
    content: "";
    height: 24px;
}

.lvl-rewards:last-child::after {
	border: 0;
    content: "";
}

.lvl-rewards.notreach {
	opacity: 0.38;
}

.lvl-rewards.currentlevel {
	animation: pulse 3s infinite;
}

.lr-level {
	position: relative;
    display: flex;
    align-items: center;
    height: 75px;
    width: 75px;
    justify-content: center;
    border-radius: 100px;
    padding: 8px;
}

.lr-level img {
	max-width: 100%;
	max-height: 100%;
}

.lr-level span {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    margin: 0 auto;
	font-size: 1.25em;
    text-align: center;
}

.lr-benefit {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.lr-item {
	display: flex;
	flex-direction: column;
	text-align: center;
}

.lr-item > span:first-child {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #e9d7ad;
	font-size: 1.25em;
	line-height: 100%;
}

.lr-item > span:last-child {
	margin-top: 4px;
	font-size: 0.65em;
	line-height: 100%;
}

.lr-item span.rewards-currency {
	margin-right: 4px;
	font-size: 0.55em;
}

/********
History
********/

.daterangepicker {
	color: #000;
}

/********
Terms
********/

.accordion {
	background: transparent;
	border-radius: 8px;
}

.accordion-button {
    padding: 8px 16px;
    color: #fff;
    font-size: 0.85em;
	background: rgba(255,255,255,0.08);
    border-radius: 8px;
}

.accordion-button:not(.collapsed) {
	background: rgba(255,255,255,0.12);
	color: #e9d7ad;
}

.accordion-button::after,
.accordion-button:not(.collapsed)::after {
	background-image: none;
}

.accordion-button:not(.collapsed),
.accordion-button:focus,
.accordion-button::after {
	border: 0;
	outline: 0;
	box-shadow: none;
}

.accordion-item {
	margin-bottom: 16px;
	background: transparent;
	border: 0;
}

.accordion-item:last-child {
	margin: 0;
}

.accordion-item h3 {
	font-size: 0.85em;
}

.accordion-item h3,
span.terms-subtitle {
	display: block;
	color: #fff;
	margin-bottom: 8px;
}

.accordion-body {
    color: #fff;
	margin-top: 8px;
    padding: 8px;
	background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
	border-radius: 8px;
}

ul.terms {
	margin-left: 20px;
}

ul.terms li {
	list-style-type: disc;
	margin-bottom: 16px;
	font-size: 0.85em;
	line-height: 120%;
}

ul.terms li:last-child {
	margin: 0;
}

/********
Promotions
********/

.promowrap {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0 8px;
}

.promolist {
	position: relative;
    display: flex;
    width: 100%;
    max-width: 500px;
	margin: 0 auto;
}

.promolist img {
	display: block;
	max-width: 100%;
	border-radius: 8px;
}

.btn-promo a {
	position: absolute;
    bottom: 10%;
    left: 7.5%;
    padding: 0 16px;
    height: 32px;
    font-size: 1em;
    line-height: 28px;
    border-radius: 4px;
}

.promocontent .modal-body {
	padding-top: 68px;
}

.promocontent h2 {
	display: block;
	margin-bottom: 24px;
	color: #e9d7ad;
	font-size: 1.25em;
}

.promocontent h3 {
	display: block;
	margin: 32px 0 16px;
	padding-bottom: 16px;
	color: #e9d7ad;
	font-size: 1em;
	border-bottom: 1px solid rgba(255,255,255,0.12);
}

.promocontent ol {
	margin: 0;
	padding: 0;
	list-style-type: decimal;
}

.promocontent ol li {
    padding: 0 0 0 4px;
    margin: 0 0 10px 16px;
	font-size: 0.85em;
}

.tnc-table {
	margin: 0;
	padding: 0;
	color: #fff;
	text-align: center;
	border-radius: 8px;
	overflow: hidden;
}

.tnc-table tr th {
	font-weight: 700;
	background: #211038;
	border: 1px solid #140630;
}

.tnc-table tr td {
	background: rgba(255,255,255,0.08);
	border: 1px solid #140630;
}

@media screen and (min-width: 600px) {
	.promowrap {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.promolist {
		width: calc(50% - 8px);
		margin: 0;
	}
}

/********
Footer
********/

footer {
	margin-top: 32px;
}

.ft-img {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	margin: 0 0 16px;
	padding: 24px 8px 0;
	border-top: 1px solid rgba(255,255,255,0.08);
}

.ft-img img {
	display: block;
	max-width: 128px;
	max-height: 28px;
}

.ft-licence {
	padding: 0 8px;
	margin-bottom: 8px;
	color: rgba(255,255,255,0.5);
	font-size: 0.65em;
}

.ft-copyright {
	margin: 24px 0 0;
	padding: 24px 8px 0;
	color: rgba(255,255,255,0.5);
	font-size: 0.65em;
	border-top: 1px solid rgba(255,255,255,0.08);
}

/********
Decorations
********/

.shine {
	content:'';
 	top:0;
	transform:translateX(100%);
	width:100%;
	height:100%;
	position: absolute;
	z-index:1;
	animation: slide 4.8s infinite;
	background: rgb(255,255,255);
	background: -moz-linear-gradient(315deg, rgba(255,255,255,0) 15%, rgba(255,255,255,0.5018382352941176) 50%, rgba(255,255,255,0) 85%);
	background: -webkit-linear-gradient(315deg, rgba(255,255,255,0) 15%, rgba(255,255,255,0.5018382352941176) 50%, rgba(255,255,255,0) 85%);
	background: linear-gradient(315deg, rgba(255,255,255,0) 15%, rgba(255,255,255,0.5018382352941176) 50%, rgba(255,255,255,0) 85%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
}

@keyframes slide {
  0% { transform: translateX(-100%); }
  10% {transform: translateX(100%); }
  100% {transform: translateX(150%); }
}

.gradientbg {
  display: flex;
  align-items: center;
  background-size: 300% 300%;
  background-image: linear-gradient(-45deg, #140630 0%, #211038 25%, #55319d 51%, #0a0516 100%);
  -webkit-animation: gradientBG 20s ease infinite;
          animation: gradientBG 20s ease infinite;
}

@-webkit-keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.flt3, .flt6, .flt9 {
    animation-name: floating;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.flt3 { animation-duration: 6s; }
.flt6 { animation-duration: 12s; }
.flt9 { animation-duration: 18s; }

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 10px); }
    to   { transform: translate(0, -0px); }    
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(83, 41, 168, 0.8);
  }
  70% {
    -webkit-box-shadow: 0 0 0 24px rgba(83, 41, 168, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(83, 41, 168, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(83, 41, 168, 0.8);
    box-shadow: 0 0 0 0 rgba(83, 41, 168, 0.8);
  }
  70% {
    -moz-box-shadow: 0 0 0 24px rgba(83, 41, 168, 0);
    box-shadow: 0 0 0 24px rgba(83, 41, 168, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(83, 41, 168, 0);
    box-shadow: 0 0 0 0 rgba(83, 41, 168, 0);
  }
}
#toast-container {
	margin-top: 10px !important;
}
.basic-field{
	position: relative;
}
.basic-field > i{
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	padding: 5px 5px;
}
button:disabled{
	filter: grayscale(1);
}
.hint-block{
	width: 100%;
	display: flex;
	justify-content: center;
	text-align: center;
	margin: 15px 0 !important;
}
.hint-block > a.hint-link{
	text-align: center;
	text-decoration: underline !important;
	color: red;
}
@counter-style custom-steps-en {
	system: fixed;
	symbols: 'STEP 1️⃣' 'STEP 2️⃣' 'STEP 3️⃣' 'STEP 4️⃣' 'STEP 5️⃣';
	suffix: ' ';
  }
  ol.listeps-en li { list-style: custom-steps-en; padding: 0 0 0 8px;  margin: 0 0 10px 56px; }
  
  @counter-style custom-steps-zh {
	system: fixed;
	symbols: '步骤 1️⃣' '步骤 2️⃣' '步骤 3️⃣' '步骤 4️⃣' '步骤 5️⃣';
	suffix: ' ';
  }
  ol.listeps-zh li { list-style: custom-steps-zh; padding: 0 0 0 8px;  margin: 0 0 10px 52px; }
  
  @counter-style custom-steps-my {
	system: fixed;
	symbols: 'Langkah 1️⃣' 'Langkah 2️⃣' 'Langkah 3️⃣' 'Langkah 4️⃣' 'Langkah 5️⃣';
	suffix: ' ';
  }
  ol.listeps-my li { list-style: custom-steps-my; padding: 0 0 0 8px;  margin: 0 0 10px 78px; }
  
  ol li a:link { text-decoration: underline !important; }
  /********
404
********/

.pg404 {
	display: flex;
	flex-direction: column;
	margin-top: 88px;
	text-align: center;
}

.pg404 p {
	margin-top: 88px;
	padding: 0 16px;
	font-size: 0.85em;
}

.pg404 a:link {
	text-decoration: underline;
}

.pg404 span {
	line-height: 100%;
}

.pg404 span.txt404 {
	font-size: 1.25em;
}

.pg404 span.title404 {
	font-size: 8.8em;
	font-weight: 700;
	color: #e9d7ad;
}

.ft-article {
    width: calc(100% - 16px);
    margin: 32px auto 0;
    padding: 16px;
    font-size: 0.75em;
    background: rgba(0,0,0,0.18);
    border-radius: 8px;
}

.ft-article h1 {
    color: #fff;
    margin-bottom: 8px;
}

.ft-article a {
    color: #fff;
    text-decoration: underline;
}

.ft-article p:last-child {
    margin: 0;
}