@font-face {
	font-family: sukhumvit;
	src: url(../fonts/Sukhumvit/SukhumvitSet-Medium.ttf);
}

body {
	font-family: sukhumvit;
	background-color: var(--base-color-11);
	height: 100%;
}

.mobile-index {
	display: none;
}

.bg-secon {
	background-image: url("../images/bg-secon.png");
	background-repeat: no-repeat;
	height: 40vw;
	background-position: center;
	background-size: cover;
}

.mobile-index .bg-secon {
	background-image: url("../images/bg-secon-mobile.png");
	background-repeat: no-repeat;
	width: 100%;
	background-position: center;
	background-size: cover;
}

.img-secon {
	padding: .5rem;
	position: absolute;
	z-index: -1;
	width: 100%;
}

.mobile-index .mobile-contact {
	padding: .5rem;
margin-top: 3rem;
}

#contactModal .modal-content {
	background: inherit;
	border: 0;
}

.line-contact {
	margin-top: 1rem;
	padding: 1rem;
	border-radius: 1rem;
	background: var(--base-color-3);
	background: linear-gradient(90deg, var(--base-color-3) 0%, var(--base-color-4) 48%, var(--base-color-5) 100%);
	color: white;
	text-align: center;
	font-size: 1.5rem;
}

.contact-close {
	width: 34px;
	color: white;
	margin: .5rem auto;
	text-align: center;
	border-radius: 50%;
	background: grey;
	padding: .5rem;
}

.img-secon img {
	width: 100%;
	
    height: 22rem;
}

.mobile-index .logo-secon-box img {
	width: 150px;
}

.mobile-index .btn-register-secon {
	font-size: 1.2rem;
	padding: .3rem 1.5rem;
	box-shadow: 0 0 15px white;
}

.logo-secon-box {
	padding-top: 6vw;
}

.btn-register-box {
	padding-top: 4vw;
	width: 60%;
	margin: auto;
}

.btn-register-secon {
	font-size: 1.7rem;
	padding: .6rem 2.5rem;
	font-weight: bold;
	display: block;
	color: black;
	box-shadow: 0 0 15px white;
	border-radius: 2rem;
	background: rgb(255, 179, 0);
	background: linear-gradient(90deg, rgba(255, 179, 0, 1) 0%, rgba(234, 223, 126, 1) 100%);
	animation: btn-register-animate 1s infinite;
}
.register-step-mb{

	padding: 2vw;
	width: 80%;
	margin: 2rem auto;
	background: rgba(0, 0, 0, 0.37);
	border-radius: 2rem;
	color:#fff;
}
.register-step-mb span{
    font-size: .7rem;

}

.register-step {
	padding: 2vw;
	width: 60%;
	margin: 2rem auto;
	background: rgba(0, 0, 0, 0.37);
	border-radius: 2rem;
	color:#fff;
}
.register-step span{
    font-size: 1.2rem;
	font-weight: bold;
}
.btn-register-step {
    font-size: 1.7rem;
	font-weight: bold;
	display: block;
	color: black;
	box-shadow: 0 0 15px white;
	border-radius: 2rem;
	background: rgb(255, 179, 0);
	background: linear-gradient(
		90deg,
		rgba(255, 179, 0, 1) 0%,
		rgba(234, 223, 126, 1) 100%
	);
	padding: 0.6rem 1.4rem;
	margin:10px 0;
	margin-bottom:15px;
}
.line-register-step {
	width: 20px;
	height: 2px;
	background: rgb(255, 255, 255);
	margin-top: 2.5rem;
}

@keyframes btn-register-animate {
	0% {
		box-shadow: 0 0 15px white;
	}

	50% {
		box-shadow: 0 0 7px white;
	}

	100% {
		box-shadow: 0 0 15px white;
	}
}

.wrapper-index {
	width: 100%;
	padding: .5rem 1rem;
	margin: auto;
}

div.register-box-index {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 28vw;
	;
	z-index: 999;
	position: absolute;
}

img.register-img {
	width: 30vw;
}

.brand-logo {
	width: 200px;
}

.top-bar {
	padding: 1rem;
	background: var(--base-color-3);
	background: linear-gradient(90deg, var(--base-color-3) 0%, var(--base-color-4) 48%, var(--base-color-5) 100%);
	/* background: var(--base-color-3);
  background: linear-gradient(180deg, var(--base-color-3) 0%, var(--base-color-11) 100%); */
}

.map-box {
	border: 3px solid #7f0303;
	background-color: var(--base-color-11);
	margin-top: 2rem;
	margin-bottom: 2rem;
	margin: auto;
	width: 80%;
}

.map {
	margin: auto;
	height: 400px;
	width: 60%;
}

.secon-bar {
	margin: 5px 0px;
	padding: .5rem;
	color: white;
	background: var(--base-color-3);
	background: linear-gradient(90deg, var(--base-color-3) 0%, var(--base-color-4) 48%, var(--base-color-5) 100%);
}

.third-bar {
	width: 80%;
	border-radius: 2rem;
	margin: 1.5rem auto;
	padding: .5rem;
	color: white;
	font-size: 1.2em;
	background: var(--base-color-3);
	background: linear-gradient(90deg, var(--base-color-3) 0%, var(--base-color-4) 48%, var(--base-color-5) 100%);
}

.btn-logout {
	border: 1px solid #fff;
	border-radius: 1rem;
	padding: .2rem .4rem;
	font-size: 12px;
}

.btn-logout:hover {
	background-color: #252525 !important;
}

.box-content {
	width: 80%;
	margin: auto;
	padding: 2rem;
}

.about-content {
	width: 80%;
	margin: auto;
	padding: 2rem;
}

.box-header {
	font-size: 1.5em;
}

.box-detail {
	font-size: 1em;
}

.bg-darkred {
	background-color: var(--base-color-11);
}

.bg-darkred-2 {
	background: var(--base-color-3);
	background: linear-gradient(90deg, var(--base-color-3) 0%, var(--base-color-4) 48%, var(--base-color-5) 100%);
}

.bg-dark {
	background-color: var(--base-color-11) !important;
}

.center-header {
	text-align: center !important;
	font-size: 1.2em;
}

.form-register {
	margin: auto;
	max-width: 500px;
	padding: 1rem 0 2rem 0;
}

.form-edit {
	margin: auto;
	width: 90%;
	padding: 1rem;
}

.form-edit .input-group-text {
	background-color: #fff;
	border-right: 2px solid #000;
	padding: .5rem;
}

.form-edit .form-control {
	padding: .5rem;
}

.form-success {
	font-weight: bold;
	font-size: 1.5rem;
	margin: auto;
	width: 100%;
}

.register-header {
	text-align: center;
	margin: 3rem 0 .8rem 0;
}

.register-header img {
	width: 300px;
}

.register-text {
	font-size: 1.2rem;
}

.form-register .form-control {
	background-color: var(--base-color-12);
	border-top: 2px solid #fff !important;
	border-left: 2px solid #fff !important;
	border-bottom: 2px solid #fff !important;
	border-right: 2px solid #fff !important;
	border-top-right-radius: 1.5rem;
	border-bottom-right-radius: 1.5rem;
	height: auto;
	color: #fff !important;
	padding: .8rem;
	border: 0px;
}

.form-register .form-control::placeholder {
	color: #fff;
}

.form-register .input-group-text {
	background-color: var(--base-color-12);
	border-top: 2px solid #fff !important;
	border-left: 2px solid #fff !important;
	border-bottom: 2px solid #fff !important;
	border-top-left-radius: 1.5rem;
	border-bottom-left-radius: 1.5rem;
	padding-left: 2rem;
	padding-right: 1.6rem;
	/* padding-left: 2rem; */
	border: 0px;
}

.phone-img {
	width: 25px;
	margin-right: .5rem;
}

div.icon-bank-box {
	height: 90px;
}

div.bank-box-img {
	width: 85px;
}

img.bank-img {
	/* border: 4px solid transparent;   */
	width: 95%;
}

.form-register img.bank-img.active {
	width: 100%;
	/* border: 4px solid #fff; */
	box-shadow: 0 0 10px #fff;
	border-radius: 3rem;
}

.success-header {
	font-weight: bold;
	text-align: center;
	font-size: 2rem;
	margin-bottom: 1rem;
}

.success-box {
	width: 90%;
	margin: auto;
	padding: 1rem;
	margin-bottom: 1rem;
	background: rgb(0, 23, 65);
	background: linear-gradient(0deg, rgba(0, 23, 65, 1) 2%, rgba(0, 13, 92, 1) 47%, rgba(0, 41, 120, 1) 100%);
}

.success-border {
	padding: 1rem;
	border: 3px solid var(--base-color-11);
}

.correct-img {
	width: 100px;
}

.text-silver {
	background: rgb(155, 156, 158);
	background-color: white;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.text-warning {
	background: rgb(255, 247, 149);
	background: linear-gradient(180deg, rgba(255, 247, 149, 1) 0%, rgba(252, 204, 0, 1) 42%, rgba(253, 187, 45, 1) 82%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.text-success {
	background: rgb(19, 111, 0);
	background: linear-gradient(0deg, rgba(19, 111, 0, 1) 0%, rgba(43, 191, 0, 1) 49%, rgba(174, 255, 161, 1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.red-line {
	width: 20%;
	height: 5px;
	background: var(--base-color-2);
	background: linear-gradient(0deg, var(--base-color-2) 0%, var(--base-color-11) 62%, var(--base-color-3) 100%);
}

.border-red {
	border-radius: 5px;
	padding: 3px;
	background: var(--base-color-9);
	background: var(--base-color-5);
}

.border-gold {
	border-radius: 5px;
	padding: 3px;
	background: rgb(101, 67, 2);
	background: linear-gradient(180deg, rgba(101, 67, 2, 1) 0%, rgba(247, 201, 114, 1) 25%, rgba(100, 66, 2, 1) 48%, rgba(247, 201, 114, 1) 73%, rgba(111, 77, 12, 1) 100%);
}

.border-silver {
	border-radius: 5px;
	padding: 3px;
	background: rgb(120, 120, 120);
	background: linear-gradient(180deg, rgba(120, 120, 120, 1) 0%, rgba(195, 198, 200, 1) 39%, rgba(238, 238, 238, 1) 55%, rgba(196, 196, 196, 1) 72%, rgba(120, 120, 120, 1) 100%);
}

.border-gold-deposit {
	border-radius: 25px;
	padding: 3px;
	background: rgb(101, 67, 2);
	background: linear-gradient(180deg, rgba(101, 67, 2, 1) 0%, rgba(247, 201, 114, 1) 25%, rgba(100, 66, 2, 1) 48%, rgba(247, 201, 114, 1) 73%, rgba(111, 77, 12, 1) 100%);
}

.btn-copy {
	border-radius: .8rem;
	width: 100%;
	font-size: 1.5rem;
	padding: 1.2rem 1.4rem !important;
}

.icon-user-left {
	margin-right: .5rem;
	width: 30px;
	height: 40px;
}

.border-copy-silver {
	border-radius: .8rem;
	padding: 3px;
	background: rgb(120, 120, 120);
	background: linear-gradient(180deg, rgba(120, 120, 120, 1) 0%, rgba(195, 198, 200, 1) 39%, rgba(238, 238, 238, 1) 55%, rgba(196, 196, 196, 1) 72%, rgba(120, 120, 120, 1) 100%);
}

.border-gold-deposit .d-flex {
	border-radius: 25px;
}

.wallet-circle {
	height: 250px;
	background-image: url('../images/circle_gold.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 250px 250px;
}

img.wallet-icon {
	width: 80px;
	margin-top: 2rem;
}

.wallet-top {
	margin-right: 1rem;
}

.wallet-text {
	font-weight: bold;
	font-size: 1.4em;
}

.user-detail-mobile {
	display: none;
}

.profile-box {
	margin: auto;
	width: 50%;
}

.profile-box .red-line {
	width: 100%;
}

.profile-content {
	width: 60%;
	margin: auto;
}

.profile-detail {
	font-size: 1.2rem;
}

.chw-header {
	color: #fff;
	font-size: 1.5rem;
	text-align: center;
	margin-bottom: 1rem;
}

.btn-profile {
	display: inline-block;
	position: relative;
	text-decoration: none;
	color: #fff;
	border: 0;
	font-size: 1rem;
	padding: .5rem 1.2rem;
	border-radius: 1.2rem;
	border: 2px solid #fff;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
	background: rgb(79, 79, 79);
	background: linear-gradient(273deg, rgba(79, 79, 79, 1) 0%, rgba(53, 54, 54, 1) 100%);
}

.btn-copy-mylink {
	display: inline-block;
	position: relative;
	text-decoration: none;
	color: #fff;
	border: 0;
	font-size: 1rem;
	padding: .5rem 1.2rem;
	border-radius: 1.2rem;
	border: 2px solid #fff;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
	background: rgb(79, 79, 79);
	background: linear-gradient(273deg, rgba(79, 79, 79, 1) 0%, rgba(53, 54, 54, 1) 100%);
}

.box-circle-number {
	border: 3px solid #fff;
	/* padding: 2rem 2.5rem; */
	width: 120px;
	height: 120px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.2rem;
	margin: 0 .3rem;
	border-radius: 50%;
	background: var(--base-color-3);
	background: linear-gradient(90deg, var(--base-color-3) 0%, var(--base-color-4) 48%, var(--base-color-5) 100%);
	color: #fff;
}

.box-circle-text {
	color: #fff;
	font-size: 1rem;
}

.my-link {
	border-radius: 1.5rem;
	border: 2px solid #fff;
	padding: .5rem 1.2rem;
	max-width: 400px;
	color: #fff;
	margin: auto;
}

.commission-box-amount {
	background-color: #fff;
	color: #000;
	font-size: 1.2rem;
	padding: .5rem 1.2rem;
	border-radius: 1.5rem;
}

.btn-commission {
	display: inline-block;
	position: relative;
	text-decoration: none;
	color: #fff;
	border: 1px solid #fff;
	font-size: .8rem;
	padding: .5rem;
	border-radius: 50%;
	border: 2px solid #fff;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
	background: var(--base-color-3);
	background: linear-gradient(90deg, var(--base-color-3) 0%, var(--base-color-4) 48%, var(--base-color-5) 100%);
}

.btn-chw {
	display: inline-block;
	position: relative;
	text-decoration: none;
	color: #000;
	border: 0;
	font-size: 1rem;
	padding: .3rem 1.5rem;
	border-radius: 1.2rem;
	border: 2px solid #fff;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
	background: var(--base-color-1);
	background: linear-gradient(90deg, var(--base-color-1) 0%, var(--base-color-2) 100%);
}

.btn-profile:hover {
	filter: contrast(.8);
	color: #fff;
}

.deposit-box {
	width: 50%;
}

.text-logout {
	font-size: 14px;
}

.copy-img {
	margin-top: .5rem;
	width: 120px;
}

.balance-text {
	font-weight: bold;
	font-size: 1.6em;
}

.withdraw-box-top {
	width: 50%;
	font-size: 1.2em;
	margin: auto;
}

.form-withdraw {
	width: 50%;
}

.form-withdraw .form-control {
	padding: 1.5rem;
	border: 2px solid #fff;
	border-left: 0;
	background-color: #000;
	border-top-right-radius: 2rem;
	border-bottom-right-radius: 2rem;
	color: #fff;
}

.form-withdraw .input-group-text {
	border: 2px solid #fff;
	border-right: 0;
	/* padding: 1.5rem; */
	padding-left: 2rem;
	background-color: #000;
	border-top-left-radius: 2rem;
	border-bottom-left-radius: 2rem;
}

.title-withdraw-history {
	width: 90%;
	padding: 1rem;
	background: var(--base-color-4);
	background: linear-gradient(180deg, var(--base-color-4) 0%, var(--base-color-11) 100%);
	margin: auto;
	margin-bottom: 1rem;
	;
}

img.wallet-menu {
	height: 50px;
	width: auto;
}

.btn-list-menu {
	border: 2px solid white !important;
	border-radius: 1rem;
	font-size: 1rem !important;
	width: 110px;
	height: 110px;
	padding: .8rem 1rem;
}

.btn-list-desktop {
	display: block;
}

.btn-list-mobile {
	display: none !important;
}

img.wallet-menu-deposit {
	height: 80px;
	width: auto;
}

img.wallet-menu-withdraw {
	height: 80px;
	width: auto;
}

.btn-wallet-deposit {
	border: 2px solid white !important;
	border-radius: 1rem !important;
	font-size: 1.3rem !important;
	padding: 1.1rem 2.3rem !important;
}

.btn-wallet-withdraw {
	border: 2px solid white !important;
	border-radius: 1rem !important;
	font-size: 1.3rem !important;
	padding: 1.1rem 2.3rem !important;
}

.deposit-withdraw-bottom {
	width: 70%;
	margin: auto;
	padding-bottom: 3rem;
	display: block;
}

.btn-dw-custom {
	display: inline-block;
	position: relative;
	text-decoration: none;
	color: var(--base-color-12);
	border: 0;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
	background: rgb(79, 79, 79);
	background: linear-gradient(273deg, rgba(79, 79, 79, 1) 0%, rgba(53, 54, 54, 1) 100%);
}

.btn-dw-custom:hover {
	text-decoration: none;
	filter: contrast(.8);
}

.deposit-bottom {
	margin: 0 1rem;
}

.withdraw-bottom {
	margin: 0 1rem;
}

.deposit-bottom .btn-dw-custom {
	border-radius: 0;
	font-weight: bold;
	font-size: 1.2rem;
	padding: 1rem 2rem;
	border-radius: 1rem;
	border: 2px solid #fff;
}

.withdraw-bottom .btn-dw-custom {
	border-radius: 0;
	font-weight: bold;
	font-size: 1.2rem;
	padding: 1rem 2rem;
	border-radius: 1rem;
	border: 2px solid #fff;
}

.deposit-pro-box {
	padding: 1rem;
	color: white;
	border-radius: 1.5rem;
	background: rgb(79, 79, 79);
	background: linear-gradient(273deg, rgba(79, 79, 79, 1) 0%, rgba(53, 54, 54, 1) 100%);
}

.user-text {
	font-size: 1.2em;
}

.text-danger {
	color: #a72424 !important;
}

.modal-content {
	border-radius: 1.5rem;
	background: var(--base-color-3);
	background: linear-gradient(90deg, var(--base-color-3) 0%, var(--base-color-4) 48%, var(--base-color-5) 100%);
}

.form-login {
	padding: 1rem 1.2rem;
}

.input-desktop {
	display: block;
}

.form-login .input-group-text {
	border-radius: 1.2rem;
	background-color: var(--base-color-11);
	border: 0px;
}

.form-login .form-control {
	height: auto;
	padding: .8rem 1.2rem;
	border-radius: 1.2rem;
	border: 0px;
}

.form-login input {
	font-size: 1.1rem;
	color: var(--base-color-12);
	;
	background-color: white;
}

.form-login input:focus {
	color: var(--base-color-12);
	;
	background-color: white;
}

.form-login input::placeholder {
	color: grey !important;
}

.form-check input:checked {
	background-color: red;
}

.btn-warning {
	font-weight: bold;
	color: var(--base-color-11);
	background: var(--base-color-6);
	background: linear-gradient(0deg, var(--base-color-6) 0%, var(--base-color-7) 32%, var(--base-color-7) 54%, var(--base-color-8) 85%);
}

.btn-warning:active {
	/*on click*/
	color: grey;
	-ms-transform: translateY(2px);
	-webkit-transform: translateY(2px);
	transform: translateY(2px);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
	background: var(--base-color-6);
	background: linear-gradient(0deg, var(--base-color-6) 0%, var(--base-color-7) 50%, var(--base-color-8) 94%);
}

.btn-login-top {
	font-weight: 200;
	border-radius: .5rem;
	width: 120px;
	color: #000;
	/* border: 2px solid white; */
	font-size: 1.1rem;
	background: var(--base-color-1);
	background: linear-gradient(90deg, var(--base-color-1) 0%, var(--base-color-2) 100%);
}

.btn-register-top {
	font-size: 1.1rem;
	padding: .5rem 2.5rem;
}

.btn-login {
	font-weight: bold;
	width: 70%;
	border-radius: 1.5rem;
	box-shadow: 0 0 5px #fff;
	color: var(--base-color-12);
	background: var(--base-color-1);
	background: linear-gradient(90deg, var(--base-color-1) 0%, var(--base-color-2) 100%);
}

.btn-danger {
	font-weight: bold;
	color: white;
	border: 2px solid white;
	background: var(--base-color-10);
	background: linear-gradient(180deg, var(--base-color-2) 0%, var(--base-color-2) 100%);
}

.btn-submit {
	padding: .3rem 2rem;
	font-size: 1.4em;
	border-radius: 1.5rem;
	color: var(--base-color-12);
}

.mobile-menu-bottom {
	display: none;
}

.btn-main {
	font-weight: bold;
	color: white;
	background: linear-gradient(180deg, var(--base-color-2) 0%, var(--base-color-2) 100%);
}

.btn-outline-light {
	border: 3px solid white;
	border-radius: .8rem;
}

.btn-outline-light:hover {
	color: white;
	background: var(--base-color-2);
	background: linear-gradient(0deg, var(--base-color-2) 0%, var(--base-color-2) 62%, var(--base-color-3) 100%);
}

.btn-outline-light:active {
	-ms-transform: translateY(2px);
	-webkit-transform: translateY(2px);
	transform: translateY(2px);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
	color: white !important;
	background: var(--base-color-2);
	background: linear-gradient(0deg, var(--base-color-2) 0%, var(--base-color-2) 62%, var(--base-color-3) 100%);
}

.dropdown-menu {
	background-color: var(--base-color-11);
	/* margin-left: rem; */
	padding: 0;
	width: 40px !important;
	min-width: 0 !important;
}

.dropdown-item {
	margin-top: .4rem;
	padding: 0.1rem;
}
.wallet {
	font-size: 14px;
	width: 200px;
	color: white;
	background: var(--base-color-9);
	background: linear-gradient(180deg, var(--base-color-4) 0%, var(--base-color-11) 100%);
	padding: .3rem .5rem;
}

.menu-bar {
	width: 12%;
	padding: 1rem;
	background: var(--base-color-3);
	background: #282C31;
	border-radius: 1rem;
}

.menu-bar.active {
	/* border: 3px solid #252525; */
	background: #143355 !important;
}

.menu-bar img {
	width: 30%;
}

.menu-mobile .menu-bar {
	width: 24%;
	padding: .5rem;
	background: var(--base-color-3);
	background: #282C31;
	border-radius: 1rem;
	font-size: 12px;
}

.menu-mobile .menu-bar.active {
	/* border: 3px solid #252525; */
	background: #143355 !important;
}

.menu-mobile .menu-bar img {
	height: 20px;
}

.center-menu {
	padding: 6rem;
}

.center-menu-box {
	width: 15%;
}

.center-menu img {
	width: 100%;
}

img.user-circle {
	width: 90%;
	margin-bottom: .8rem;
}

.user-name {
	font-size: 1.2em;
}

.deposit-content {
	color: white;
	font-size: 1.3em;
}

.table-deposit {
	width: 90%;
}

.table-history {
	width: 90%;
}

.table-history th:first-child {
	/*border-radius: 10px 0 0 0;*/
}

.table-history th:last-child {
	/*border-radius: 0 10px 0 0;*/
}

.table-history th:only-child {
	/*border-radius: 10px 10px 0 0;*/
}

.table-history tr:last-child td:first-child {
	/*border-radius: 0 0 0 10px;*/
}

.table-history tr:last-child td:last-child {
	/*border-radius: 0 0 10px 10px;*/
}

.table-deposit th:first-child {
	/*border-radius: 10px 0 0 0;*/
}

.table-deposit th:last-child {
	/*border-radius: 0 10px 0 0;*/
}

.table-deposit th:only-child {
	/*border-radius: 10px 10px 0 0;*/
}

.table-deposit tr:last-child td:first-child {
	/*border-radius: 0 0 0 10px;*/
}

.table-deposit tr:last-child td:last-child {
	/*border-radius: 0 0 10px 10px;*/
}

.table thead th {
	border-bottom: none;
}

.table td, .table th {
	border-top: none;
}

.game-logo {
	width: 70px;
}

.btn-withdraw {
	display: inline-block;
	position: relative;
	text-decoration: none;
	color: var(--base-color-12);
	border: 2px solid white;
	border-radius: 2rem;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
	background: var(--base-color-1);
	background: linear-gradient(90deg, var(--base-color-1) 0%, var(--base-color-2) 100%);
}

.btn-withdraw:hover {
	filter: contrast(.8);
}

.login-desktop {
	display: block;
}

.login-mobile {
	display: none;
}

footer {
	position: relative;
	padding: 10px 0;
	color: white;
	font-size: 1.2em;
	bottom: 0;
	left: 0;
	width: 100%;
}

footer img.bank-footer {
	width: 70px;
}

.footer-text {
	font-size: 1rem;
}

.link-game-desktop {
	display: block;
}

.link-game-mobile {
	display: none;
}

.link-back-desktop {
	display: block;
}

.link-back-mobile {
	display: none;
}

.custom-deposit {
	background: var(--base-color-5) !important;
	background: linear-gradient(0deg, var(--base-color-5) 2%, var(--base-color-3) 47%, var(--base-color-4) 80%, var(--base-color-5) 100%) !important;
}

.custom-withdraw {
	background: var(--base-color-5) !important;
	background: linear-gradient(0deg, var(--base-color-5) 2%, var(--base-color-3) 47%, var(--base-color-4) 80%, var(--base-color-5) 100%) !important;
}

.btn-custom {
	display: inline-block;
	position: relative;
	text-decoration: none;
	color: var(--base-color-12);
	border: 0;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
	background: var(--base-color-1);
	background: linear-gradient(90deg, var(--base-color-1) 0%, var(--base-color-2) 100%);
}

.btn-custom-cc {
	display: inline-block;
	position: relative;
	text-decoration: none;
	color: var(--base-color-11);
	border: 0;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
	background: var(--base-color-7);
	background: linear-gradient(180deg, rgba(180, 129, 50, 1) 0%, rgba(243, 211, 151, 1) 28%, rgba(203, 158, 75, 1) 47%, rgba(180, 129, 46, 1) 68%);
}

.btn-custom:hover {
	/*on hover*/
	color: grey;
	text-decoration: none;
}

.btn-custom-cc:hover {
	/*on hover*/
	color: grey;
	text-decoration: none;
}

button:focus {
	outline: 0 !important;
}

.btn-custom:active {
	/*on click*/
	color: grey;
	-ms-transform: translateY(2px);
	-webkit-transform: translateY(2px);
	transform: translateY(2px);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
	background: var(--base-color-2);
	background: linear-gradient(0deg, var(--base-color-2) 0%, var(--base-color-2) 62%, var(--base-color-4) 100%);
}

.btn-custom-cc:active {
	/*on click*/
	color: grey;
	-ms-transform: translateY(2px);
	-webkit-transform: translateY(2px);
	transform: translateY(2px);
	background: var(--base-color-2);
	background: linear-gradient(0deg, var(--base-color-2) 0%, var(--base-color-2) 62%, var(--base-color-4) 100%);
}

.btn-category-com {
	/* height: 100px;
	width: 100px; */
	font-weight: bold;
	color: white;
	padding: 1rem 1.5rem;
	font-size: .9rem;
	border-radius: 1.5rem !important;
	background: var(--base-color-3);
	background: linear-gradient(90deg, var(--base-color-3) 0%, var(--base-color-4) 48%, var(--base-color-5) 100%);
}

.btn-category-com:hover {
	opacity: 0.8;
	color: white;
}

.btn-category-com:active {
	/*on click*/
	color: #fff;
	-ms-transform: translateY(2px);
	-webkit-transform: translateY(2px);
	transform: translateY(2px);
	background: rgb(79, 79, 79);
	background: linear-gradient(273deg, rgba(79, 79, 79, 1) 0%, rgba(53, 54, 54, 1) 100%);
}

.btn-category {
	height: 100px;
	width: 100px;
	font-weight: bold;
	color: white;
	padding: .5rem;
	font-size: .9rem;
	border-radius: 1.5rem !important;
	background: var(--base-color-3);
	background: linear-gradient(90deg, var(--base-color-3) 0%, var(--base-color-4) 48%, var(--base-color-5) 100%);
}

.btn-category:hover {
	opacity: 0.8;
	color: white;
}

.btn-category:active {
	/*on click*/
	color: #fff;
	-ms-transform: translateY(2px);
	-webkit-transform: translateY(2px);
	transform: translateY(2px);
	background: rgb(79, 79, 79);
	background: linear-gradient(273deg, rgba(79, 79, 79, 1) 0%, rgba(53, 54, 54, 1) 100%);
}

.btn.focus, .btn:focus {
	outline: 0;
	box-shadow: none;
}

.nav-pills .btn-category.active {
	background: rgb(79, 79, 79);
	background: linear-gradient(273deg, rgba(79, 79, 79, 1) 0%, rgba(53, 54, 54, 1) 100%);
}

.bank-deposit-img {
	height: 100px;
	border-radius: 15px;
}

/* -------------------------------- */
/* update qrcode - 22042024 */
.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.btn-container {
	width: 80%;
	max-width: 600px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin: auto;
	gap: 1rem;
}

.deposit-input-container {
	position: relative;
	width: calc(70% - 16px);
	max-width: 600px;
	margin: 2rem auto;
}
.deposit-input-container input {
	width: 100%;
	max-height: 3.5rem;
	padding: 1.5vw 4vw;
	text-align: center;
	font-size: min(3vw, 0.8rem) !important;
	font-family: sukhumvit;
	height: auto;
	border-radius: 2rem;
	border: 1px solid #fff;
	background: transparent;
	color: #fff;
}
.deposit-input-container .icon {
	position: absolute;
	top: 50%;
	left: 5vw;
	width: 3.5vw;
	max-width: 2rem;
	transform: translate(-50%, -50%);
}
.deposit-input-container .icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.amount-button {
	width: 100%;
	background: var(--base_color_2);
	background: linear-gradient( 180deg, var(--base-color-3) 0%, var(--base-color-4) 80%, var(--base-color-5) 100%);
	/* border: 1px solid var(--base-color-8); */
	border-radius: 1.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.5rem 0;
	cursor: pointer;
}
.amount-button span {
	font-size: min(3.5vw, 1rem);
	color: #fff;
}

.btn-withdraw {
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: var(--base-color-12);
    border: 2px solid #fff;
    border-radius: 2rem;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    background: var(--base-color-1);
    background: linear-gradient( 90deg, var(--base-color-1) 0%, var(--base-color-2) 100%);
	padding: 0.5rem 0;
	cursor: pointer;
}

.btn-withdraw:hover {
    filter: contrast(0.8);
}

.green-button {
	width: fit-content;
	font-family: var(--font-primary-bold);
	color: #181818 !important;
	background-image: linear-gradient(#e2ffa4, #ceff67, #aaff00) !important;
	box-shadow: 0px 5px 8px #00000020;
	border: 1px solid #a3d53d;
	border-radius: 6px !important;
	padding: 0.5rem 2.5rem;
	text-align: center;
	position: relative;
	white-space: nowrap;

	display: flex;
	justify-content: center;
	cursor: pointer;
}
.green-button.glow {
	box-shadow: 0px 0px 5px rgba(173.4, 255, 0, 0.5);
}
.green-button.rounded {
	border-radius: 500px !important;
}

@media only screen and (max-width: 550px) {
	.green-button {
		min-width: auto;
		border-radius: 1vw !important;
		padding: 1vw 7vw;
	}
}

.qr-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: 360px;
}
.qr-container .logo {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	justify-content: center;
	align-items: center;
}
.qr-image-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #fff;
	border-radius: 1rem;
	padding: 6;
}
.qr-payment-container {
	background: #0f3e68;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px 10px 0 0;
}
.qr-container img {
	width: 100%;
	height: 100%;
	object-fit: contain
}

.qr-countdown-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #fff;
	border-radius: 1rem;
	padding: 8 4 0;
}

.qr-logo-image img {
	background: var(--base-color-3);
	aspect-ratio: 1/1;
	border-radius: 0.5rem;
}

/* update qrcode - 22042024 */
/* -------------------------------- */