@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;family=Anuphan:wght@100;200;300;400;500;600;700&amp;family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&amp;family=Noto+Sans+Thai:wght@100;300;500;600;700;800;900&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap');

:root {
	--body-font: "Prompt", sans-serif !important;
	--head-font: "Prompt", sans-serif !important;
	--p1: 212, 155, 31;
	--gradient3: linear-gradient(188deg, rgb(255 163 0 / 15%) 5.73%, rgba(246, 71, 28, 0.00) 92.87%, rgb(246 168 26 / 15%) 92.87%);
}

body { font-family: "Prompt", sans-serif !important; outline: none; }
a, p, button, span, li, th, td, input, textarea, select, label, blockquote { font-family: var(--body-font); outline: none;  }
.cl_gray { color: #a9a9a9; }
.bgp-1 { 
	background: linear-gradient(270.03deg, rgb(139, 104, 50) 0.05%, rgb(252, 221, 154) 51.59%, rgb(150, 107, 42) 100%), linear-gradient(0deg, rgb(236, 202, 119), rgb(236, 202, 119));
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	color: #000;
	font-weight: 500;
	border: 1px solid rgb(236, 202, 119);
}
.display-one {
	font-size: 40px;
	line-height: 140%;
	font-weight: 500 !important;
}

.fw400 { font-weight: 400 !important; }
.fw500 { font-weight: 500 !important; }
.fs12 { font-size: 12px !important; }
.fs13 { font-size: 13px !important; }
.fs14 { font-size: 14px !important; }
.fs16 { font-size: 16px !important; }
.fs18 { font-size: 18px !important; }
.fs24 { font-size: 24px !important; }
.fs30 { font-size: 30px !important; }

.tx_gold { color: #ccab67; }
.tx_gold_2 { color: #fbdeb2; }
.tx_gold_3 { color: #d0ae71; }
.tx_gold_4 { color: #fdd387; }
.tx_gold_5 { color: #d5b67b; }
.tx_gold_6 { color: #8a7349; }

.swiper-3d-section .swiper-3d-container .swiper-slide .card-3d .card-status { border: 1px solid rgb(212, 155, 31); }
.top-player-section .swiper-top-player .swiper-slide .player-card .player-img { margin: 0 auto; }
.display-four {
	font-size: 30px;
	line-height: 120%;
}

.gradient-bg2 {
	background: rgb(255 219 0);
}

.hero-section { 
	background-position: center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
.hero-section .hero-content .card-area .card-item .card-img-area { border: none; }
section, footer { max-width: unset; }
.swiper-3d-section { background-size: 100% auto; }

.-providers-logo-inner {
	border: 1px solid transparent;
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
/*	background: linear-gradient(181deg, #675d47 0%, #201c19 100%) padding-box, linear-gradient(90deg, #E6CEA1 0%, #A6772E 96.86%);*/
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 25px;
line-height: 16px;
text-align: center;
letter-spacing: 1;
color: #EFD8A5 !important;
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
font-size: 22px;
font-weight: 400;
flex-wrap: wrap;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}

.-providers-logo-inner .-img {
	background: unset;
	padding: 2px 6px;
	border-radius: 54px;
	margin: 0.5rem 0.2rem;
	width: 100px;
	transition: all .4s;
	min-height: 38px;
}

.swiper-wrapper { align-items: center; }
.swiper-top-player { margin: 80px 0; }
.card-icon { padding: 0 40px; }
.swiper-3d-section .swiper-3d-container .swiper-slide { width: 260px; }
.swiper-3d-section .swiper-3d-container .swiper-slide .card-3d { width: 260px; }
.display-three {
	font-size: 30px;
	line-height: 0;
}

.uael-img-grid__column-2{
	position: relative;
	width: 100%;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-line-pack: start;
	align-content: flex-start;
	display: flex;
}
.uael-grid-item {align-items: flex-start; display: inline-grid; /*width: 19.6666%;*/ padding-right: calc( 20px/2); padding-left: calc( 20px/2); }
.uael-img-grid__column-2 .uael-grid-item  { width: 50%; }
.uael-img-grid__column-5 .uael-grid-item  { width: 19.5%; }
.size-full { width: 100%; }

.input-group-text, .form-control { background-color: transparent; color: #d3b35f; border: 0; }
input:-internal-autofill-selected { background-color: transparent !important; color: #d3b35f !important; border: 0; }
.single-input input { color: #d3b35f; }
input::placeholder, input::hover, input::focus, ::-ms-input-placeholder {
	font-weight: bold;
	opacity: 0.5;
	color: red;
	background-color: transparent !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: #d3b35f !important;
	transition: background-color 5000s ease-in-out 0s !important;
	box-shadow: inset 0 0 20px 20px #00000000 !important;
	outline: none;
	padding-left:10px;
}

.form-control { font-size: 14px; }

h3.tcn-1 { font-weight: 500; }

.single-input { 
	border-image: linear-gradient(270deg, #c4984e00, #f6d780 48.99%, #c4984e00);
	border-image-slice: 1;
	border-style: solid;
	border-width: 0 0 2px;
	padding: 12px 0px;
}

.master_login_ds { 
	font-weight: 500;
	font-size: 14px; 
}
.form-control { 
	padding: 0; 
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: #d3b35f !important;
	transition: background-color 5000s ease-in-out 0s !important; 
	outline: none;
} 

h1, h2, h3, h4, h5, h6, .display-one, .display-two, .display-three, .display-four, .display-five, .display-six { font-weight: 500; }

.display-one { font-size: 30px; }
.nav-bg {
	background: url(../../images/nav-bottom-with-play-pc.webp) no-repeat bottom;
	background-size: auto 120px;
}


.login-form {
	/*-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);*/
	background: linear-gradient(0deg, #7f7e76bf -.04%, #171516bf 0, #61615fbf 97.15%);
	border: 1px solid hsla(30, 86%, 78%, .3);
	border-radius: 10px;
	margin: 12px auto auto;
	padding: 11px 0;
	width: 80%;
}

.sign-in-section .form-area { 
	/*-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);*/
	background: linear-gradient(0deg, #7f7e76bf -.04%, #171516bf 0, #61615fbf 97.15%);
	border: 1px solid hsla(30, 86%, 78%, .3);
	border-radius: 10px;
	margin: 12px auto auto;
	width: 80%;
}


.input-group-text { padding: 0rem 0.75rem; } 

.dtblockinput {
	background: linear-gradient(180deg, #252525, #343434);
	border: 0px solid var(--lighter, #fbdeb2);
	border-radius: 10px;
	padding: 4px 0;
	line-height: 0;
	height: 46px;
	border-image: linear-gradient(270deg, #c4984e00, #f6d780 48.99%, #c4984e00);
	border-image-slice: 1;
	border-style: solid;
	border-width: 0 0 2px;
}

.btncp-2 { 
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	color: #ecca77;
	font-weight: 500;
	border: 1px solid rgb(236, 202, 119);
	padding: 4px 13px;
	border-radius: 50px;
	text-decoration: none;
	font-size: 13px;
}


.hero-banner-area { left: unset; }
.hero-banner-area .hero-banner-img { width: 645px; height: 624px; }


@media (max-width: 1600px) {
	.hero-banner-area .hero-banner-img { width: 550px; height: 560px; }
	.header-section {
		background: unset;
	}
}

@media (min-width: 992px) {
	.header-section .custom-nav {
		display: flex;
		align-items: baseline;
		justify-content: flex-end;
	}
}

@media (max-width: 1399px) {
	.hero-banner-area .hero-banner-bg {
		display: block;
	}
	h3.tcn-1 { font-size: 22px; }
	h4.card-title { font-size: 20px; }

}

@media (max-width: 1199px) {
	h2, h2 > a {
		font-size: 20px;
	}
	.uael-img-grid__column-2 .uael-grid-item  { width: 50%; }
	.uael-img-grid__column-5 .uael-grid-item  { width: 24%; }
	.tournament-section .tournament-wrapper { margin: 15px; }
	.hero-banner-area .hero-banner-bg {
		display: block; 
	}
	.score-slot .hero-content { display: none; }
	.header-section {
		background: rgb(var(--n0));
	}
}

@media (max-width: 991px) {
	.card-icon { padding: 0px; }
	.mbmock { padding: 50px; }
	.uael-img-grid__column-5 .uael-grid-item {
		width: 32%;
	}
	.header-section .navbar-toggle-item {
		transform: translateX(-150%);
	}
	.header-section .navbar-toggle-item { top: 92px; }
	.header-section .custom-nav {
		display: block;
		overflow-y: auto;
		overflow-x: hidden;
		width: 100%;
		background: rgb(var(--n4));
		padding: 20px 10px;
		height: 100vh;
		max-height: unset;
		text-align: center;
	}
	li.menu-link { padding: 30px 0;  }
	.connect-wallet-section .wallet-area { width: 86%; }
	.hero-banner-area .hero-banner-img {
		width: 430px;
		height: 440px;
		transform: translateX(0%);
	}
}


@media (max-width: 768px) {
/*	.hero-banner-area {
		left: 70%;
	}
	.hero-banner-area .hero-banner-img {
		left: unset;
		height: 350px;
		bottom: 0;
		top: unset;
		z-index: -1;
	}

	.hero-banner-area { position: relative; }*/

	.hero-section { margin-bottom: -204px; }
	.hero-content { text-align: center; }
	.hero-content .heading-font { justify-content: center; }
}

@media (max-width: 602px) {
	.uael-img-grid__column-5 .uael-grid-item {
		width: 49%;
		padding-right: calc(5px / 2);
		padding-left: calc(5px / 2);
	}
	.uael-img-grid__column-2 .uael-grid-item {
		width: 100%;
	}
}

@media (max-width: 575px) {
	.hero-banner-area { display: block; }
	.display-one { font-size: 20px; }
	.header-section .navbar-brand .logo2 {
		display: block;
	}
	.header-section .navbar-toggle-item {
		top: 65px;
	}
	.header-btn-area .btn-circle { display: none; }
	.header-btn-area .btn-rounded-cus , .header-btn-area .wallet-btn { padding: 5px 10px !important; }
	.header-btn-area .btn-rounded-cus span, .header-btn-area .wallet-btn span { font-size: 13px; }


}


@media (max-width: 480px) {
	.swiper-3d-section .swiper-3d-container .swiper-slide {
		width: 150px;
	}

	.hero-section .pt-120 { padding-top: 0; }
}

@media (max-width: 303px) {
	.uael-img-grid__column-5 .uael-grid-item {
		width: 100%;
	}
}

.jconfirm .jconfirm-box{
	color: #40403f;
}