/* Import Kanit Font */
@import url('https://fonts.googleapis.com/css?family=Kanit:100,200,300,400,500,600,700&subset=thai');

html {
	overflow-x: hidden;
}

body {
/*	background: url(../image/v02/bg-mini.png);*/
	background-repeat: repeat;
	background-size: 60%;
	background-color: #fff;
}

html,
body {
/*	height: 100%;*/
/*	overflow-x: hidden;*/
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Kanit', sans-serif;
	margin: 0 0 35px;
	letter-spacing: 1px;
}

#all-wrap {
/*	min-height: 100%;*/
}

.content-collection {
	margin-top: 30px;
	margin-bottom: 30px;
}

.coin-pic {
	width: 40px;
}

.coin-txt {
	display: inline-block;
	font-size: 1.1rem;
	font-weight: 600;
	color: #606060;
	margin-bottom: 0;
	padding: .5rem .75rem;
	vertical-align: middle;
}

.count-collected-coin {
	margin-right: 5px;
	margin-left: 5px;
	color: #EDA439;
}

.collected-coin-m-container,
.collected-coin-d-container{
	display: none;
}

.all-content-coin-container {
	margin-top: 20px;
}

.tab-container:first-child {
	padding-right: 0;
}

.tab-container:last-child {
	padding-left: 0;
}

.tab-link-toggle {
	display: block;
	text-align: center;
	color: #939393;
	padding: 1rem .75rem;
	background-color: #E3E3E3;
	font-size: 1.3rem;
	font-weight: 600;
	border-bottom: 8px solid #e3e3e3;

	transition: all .2s ease-out;
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
}

.tab-link-toggle:hover,
.tab-link-toggle:focus,
.tab-link-toggle.active {
	color: #fff;
	background-color: #F21529;
	text-decoration: none;
	border-bottom: 8px solid #FF7985;
}

.head-section-container {
	margin-top: 20px;
	margin-bottom: 10px;
	margin-left: 0;
	margin-right: 0;
}

.head-section-text {
	text-align: center;
	color: #606060;
	font-weight: 600;
	font-size: 1.2rem;
	margin-bottom: 0;
}

.content-section-text {
	margin-bottom: 0;
}

.content-section-container {
	border-top: 1px solid rgba(193, 193, 193, .5);
	margin-left: 0;
	margin-right: 0;
}

.content-section-container:last-child {
	border-bottom: 1px solid rgba(193, 193, 193, .5);
}

.content-div-text-container {
	padding: .75rem;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
}

.column-content-section {
	border-left: 1px solid rgba(193, 193, 193, .5);
}

.coin-content-section {
	border-right: 1px solid rgba(193, 193, 193, .5);
}

.date-section {
	padding-right: 0;
}

.coin-section {
	padding-left: 0;
}

.content-section {
	padding-left: 0;
	padding-right: 0;
}

.content-section-text {
	color: #606060;
	font-size: 1.1rem;
}

.content-section-date-txt {
	text-align: center;
}

.content-section-price {
	display: inline-block;
	vertical-align: middle;
	float: right;
	font-weight: 600;
}

.content-price-lost {
	color: #F21529;
}

.content-price-get {
	color: #60BE11;
}

.no-coin-history-container {
	border-left: 1px solid rgba(193, 193, 193, .5);
	border-right: 1px solid rgba(193, 193, 193, .5);
}

.no-coin-history-in-container {
	position: relative;
	min-height: 300px;
}

.no-coin-history-text {
	margin-bottom: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 1.7rem;
	font-weight: 600;
	color: #939393;

	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
}

#load-more-btn-container {
	margin-top: 15px;
	display: none;
}

#load-more-btn-container.active {
	display: block;
}

.load-more-btn-container {
	text-align: center;
}

.load-more-coin-history-btn {
	background-color: #f21529;
	color: #fff;
	font-size: 1.3rem;
	padding-right: 35px;
	padding-left: 35px;
}

.head-price-rate-container {
	background-color: #F21529;
	margin-left: 0;
	margin-right: 0;
	border-bottom: 8px solid #FF7985;
}

.head-card-price-rate-container {
	border-right: 1px solid rgba(112, 112, 112, .5)
}

.head-card-price-rate-container,
.head-price-price-rate-container {
	padding: 1rem;
}

.head-price-rate-only-txt {
	text-align: center;
}

.body-price-rate-container {
	margin-left: 0;
	margin-right: 0;
	border: 1px solid rgba(112, 112, 112, .25);
	border-top: none;
}

.body-card-price-rate-container {
	border-right: 1px solid rgba(112, 112, 112, .25);
	padding: 1rem;
}

.body-price-price-rate-container {
	padding: 1rem;
}

.body-card-price-rate-container img {
	width: 30px;
}

.body-card-price-rate-container img,
.price-rate-txt {
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 0;
}

.price-rate-txt {
	margin-left: 20px;
	font-size: 1.1rem;
	font-weight: 600;
}

.price-rate-plus-txt {
	font-size: .75rem;
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 0;
	font-weight: 700;
	color: #F21529;
}

.head-price-rate-txt {
	color: #fff;
	margin-bottom: 0;
	font-size: 1.5rem;
}

.true-logo-container {
	border: 1px solid rgba(112, 112, 112, .25);
	text-align: center;
	padding-top: 50px;
	padding-bottom: 50px;
}

.coin-history-content-content-container,
.truemoney-topup-code-container {
	display: none;
}

.coin-history-content-content-container {
	min-height: 500px;
}

.coin-history-content-content-container.active {
	display: flex;
}

.truemoney-topup-code-container.active {
	display: block;
}

.header-true-table-label {
	margin-bottom: 0;
	margin-top: 20px;
	font-size: 1.8rem;
	color: #2B3142;
	font-weight: 600;
}

.flex-input-box {
	display: flex;
	margin-top: 10px;
}

.input-code-container {
	flex: 0 0 100%
}

.input-submit-container {
	flex: 0 0 35%;
}

.topup-field,
.topup-send {
	border-radius: 0;
	width: 100%;
	padding: 1rem;
	font-size: 1.3rem;
}

.topup-send {
	background-color: #F21529;
	color: #fff;
}

.how-to-topup-container {
	flex:  0 0 100%;
}

.how-to-topup-txt {
	font-size: 1.8rem;
	margin-bottom: 0;
	margin-top: 20px;
	color: #939393;
	font-weight: 600;
	text-align: center;
}

.how-to-topup-txt a {
	color: #F21529;
}

.how-to-topup-txt a:hover,
.how-to-topup-txt a:focus {
	color: #F21529;
	text-decoration: none;
}

.true-logo-link-container {
	display: block;
	padding: .5rem;
	border-radius: 5px;
}

.true-logo-link-container.active {
/*	box-shadow: 0 0px 10px 5px rgba(242, 21, 41, .15)*/
}

.true-logo-link-container:hover,
.true-logo-link-container:focus {
	text-decoration: none;
}

.choose-package-price-container {
	display: inline-block;
	margin-left: 5px;
	vertical-align: middle;
	float: right;
}

.choose-package-price-link {
	display: block;
	background-color: #f21529;
	color: #fff;
	padding: .25rem .75rem;
	border-radius: 5px;
	font-size: .85rem;
}

.choose-package-price-link:hover,
.choose-package-price-link:focus {
	color: #fff;
}

.code-topup-container {
	display: none;
}

.code-topup-container.active {
	display: block;
}

.price-select-label,
.price-show-label {
	font-size: 1rem;
	font-weight: 600;
}

.price-select-selection,
.price-show-selection {
	font-size: 0.9rem;
	font-weight: 600;
	color: #f21529;
	margin-left: 5px;
}

.ais-otp-submit {
	background-color: #f21529;
	color: #fff;
}

.transfer-popup-container {
	text-align: center;
}

.transfer-popup-logo {
	width: 45%;
}

#transfer-table-history-container {
	margin-top: 30px;
}

.transfer-list-container {
	border-left: 1px solid rgba(193, 193, 193, .5);
	border-right: 1px solid rgba(193, 193, 193, .5);
	padding: 15px;
}

.transfer-status-container,
.transfer-created-container {
	display: inline-block;
	vertical-align: middle;
}

.transfer-created-container {
	position: absolute;
	top: 50%;
	right: 5px;

	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
}

.transfer-info-container {
	padding: .5rem;
	border-bottom: 1px solid rgba(193, 193, 193, .5);
	position: relative;
	width: 100%;
	margin-bottom: .5rem;
}

.transfer-status-txt,
.transfer-created-txt {
	margin-bottom: 0;
}

.transfer-status-txt {
	padding: .25rem .5rem;
	background-color: #ccc;
	border-radius: 6px;
	color: #fff;
}

.transfer-status-txt.pending {
	background-color: #f21529;
}

.transfer-status-txt.done {
	background-color: #3DAF2E;
}

.transfer-created-txt {
	color: #393939;
}

.transfer-each-line-container {
	position: relative;
	margin-top: 5px;
	margin-bottom: 5px;
}

.label-transfer-list-txt,
.label-transfer-price-txt {
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 0;
}

.label-transfer-list-txt {
	color: #424242;
	font-size: .8rem;
}

.label-transfer-price-txt {
	color: #02A7FF;
	font-size: 1.15rem;
}

.label-transfer-price-txt {
	position: absolute;
	top: 50%;
	right: .5rem;
	font-size: .85rem;

	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
}

.transfer-info-link {
	position: relative;
	display: inline-block;
	color: #000000;
}

.transfer-ref-txt {
	position: absolute;
	right: .5rem;
	top: 50%;
	margin-bottom: 0;
	font-size: .85rem;

	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
}

.transfer-popup-trans-head-txt {
	font-size: 1.2rem;
}

.transfer-popup-price-txt {
	font-size: 1.6rem;
	color: #02A7FF;
}

.transfer-popup-trans-warn-container {
	background-color: #f21529;
	color: #fff;
	font-size: .85rem;
	padding: .5rem;
}

.transfer-pop-head-info-txt {
	background-color: #eaeaea;
	padding: .5rem;
}

.transfer-popup-trans-warn-txt {
	margin-bottom: 0;
}

.transfer-popup-upload-img-container {
	position: relative;
	width: 30%;
	padding-top: 30%;
	margin: auto;
}

.transfer-popup-upload-img-in-container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	border: 1px dashed #F21529;

	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
}

.slip-upload {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
	opacity: 0;
	top: 0;
	left: 0;
}

.slip-upload-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	background-color: transparent;
	color: #f21529;


	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
}

.slip-upload-btn i {
	display: block;
	font-size: 1.3rem;
	margin-bottom: 5px;
}

.transfer-popup-upload-btn {
	margin-top: 10px;
	background-color: #f21529;
	color: #fff;

}

#myCanvas {
	width: 100%;
	height: 100%;
}

.demo-transfer-slip-container {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 0;
	display: none;
}

.demo-transfer-slip-container.active {
	display: block;
	z-index: 3;
}

.demo-transfer-slip-big-container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.demo-transfer-slip-big-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.close-transfer-slip {
	position: absolute;
	top: -10px;
	right: -10px;
	z-index: 4;
	background-color: #fff;
	border-radius: 100%;
	color: #f21529;
	line-height: 1;
}

.close-transfer-slip:hover,
.close-transfer-slip:focus {
	color: #f21529;
}

.transfer-popup-info {
	margin-bottom: 0;
}

.pay-link-container {
	display: none;
	vertical-align: top;
	width: 30%;
}

.pay-link-container.active {
	display: inline-block;
	position: relative;
}

.recommend-tag-container {
	position: absolute;
	top: -5px;
	left: 50%;
	background: #F21529;
	padding: .15rem .25rem;	
	color: #fff;
	border-radius: 10px;
	min-width: 90%;
	
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
}

.recommend-tag-txt {
	margin-bottom: 0;
	font-size: 1.1rem;
}

.pay-logo-container {
	width: 100%;
	margin: 0 auto;
	margin-bottom: 15px;
	border: 1px solid #E3E3E3;
	border-radius: 20px;
}

.true-logo-link-container.active .pay-logo-container {
	border: 2px solid #F21329;
}

.true-logo-container img {
	width: 100%;
}

.pay-way-txt {
	text-align: center;
	color: #434343;
	font-size: .8rem;
}

.confirm-topup-btn {
	display: block;
	background-color: #f21529;
	border-color: #F21529;
	margin: 0 auto;
	border-radius: 0;
	padding: .5rem .75rem;
	font-size: .9rem;
}

.confirm-topup-btn:hover {
	background-color: #F21529;
	border-color: #F21529;
}

.confirm-topup-btn:focus {
	box-shadow: 0 0 0 3px rgba(242, 21, 41, .5);
}

.modal-price-select-container {
	display: block;
	width: 100%;
	text-align: center;
}

.confirm-label-tag-txt {
	text-align: center;
	font-size: 1.2rem;
	font-weight: 600;
}

.topup-confirm-btn-container {
	width: 100%;
}

#coin-value-container {
	opacity: 0;
	min-height: 400px;
}

#coin-value-container.active {
	opacity: 1;
	min-height: auto;
}



/* lotties container */
.lotties-container {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
	background-color:rgba(52, 58, 64, .3);
	display: none;
}

.lotties-container.active {
	display: block;
}

.lotties-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 35%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
}
/* // lotties container */


.hover-txt {
	display: block;
	margin-left: 40px;
}

.collect-package-line {
	display: inline-block;
}

@media(min-width: 320px) {
	.collected-coin-m-container {
		display: block;
	}

	.content-collection {
		margin-top: 0px;
	}

	.all-content-coin-container .col-all {
		padding-left: 0;
		padding-right: 0;
	}

	.tab-link-toggle {
		font-size: .8rem;
	}

	.head-section-text {
		font-size: .75rem;
	}

	.content-section-text {
		font-size: .7rem;
	}

	.content-div-text-container {
		padding: .25rem;;
	}

	.date-section {
		padding-left: 5px;
	}

	.coin-section {
		padding-right: 5px;
	}

	.content-coin-img {
		display: none;
	}

	.content-section-price {
		display: block;
		float: none;
	}

	.load-more-coin-history-btn {
		font-size: 1rem;
	}

	.truemoney-topup-code-container .col-all {
		padding-left: 0;
		padding-right: 0;
	}

	.true-logo-container {
		margin-left: -15px;
		margin-right: -15px;
		padding-left: 10px;
		padding-right: 10px;
/*
		margin-left: -15px;
		margin-right: -15px;
		white-space: nowrap;
		overflow-x: auto;
*/
	}

/*
	.true-logo-container img {
		width: 100%;
	}
*/

	.head-price-rate-txt {
		font-size: .85rem;
	}

	.price-rate-txt {
		font-size: .75rem;
		margin-left: 10px;
		min-width: 70px;
	}

	.body-card-price-rate-container {
		padding: .5rem;
	}

	.header-true-table-label {
		font-size: 1rem;
	}

	.input-code-container {
		flex: 0 0 66.666667%;
	}

	.input-submit-container {
		flex: 0 0 33.333333%;
	}
	
	.ais-code-container {
		flex: 0 0 100%;
	}
	
	.ais-submit-container {
		flex: 0 0 50%;
	}

	.topup-field, .topup-send {
		padding: .5rem .75rem;
		font-size: .9rem;
	}

	.how-to-topup-txt {
		font-size: 1rem;
	}

	.all-content-coin-container {
		margin-top: 0px;
	}

	.collected-coin-m-container {
		background-color: #1b2549;
		margin-left: -15px;
		margin-right: -15px;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.coin-txt-m {
		display: block;
		text-align: center;
		color: #fff;
	}

	.coin-pic-m {
		width: 55px;
		display: block;
		margin: auto;
	}

	.count-collected-coin-m {
		display: block;
		text-align: center;
		margin-bottom: 0;
		font-size: 1.7rem;
		margin-top: 5px;
	}


	.transfer-popup-trans-warn-txt {
		font-size: .7rem;
	}

	.transfer-popup-info-container {
		font-size: .8rem;
	}

	.slip-upload-btn {
		font-size: .6rem;
	}

	.filter-section-text {
		font-size: 1rem;
		text-align: left;
		margin-top: 10px;
		margin-bottom: 15px;
	}

	.transfer-popup-trans-head-txt {
		font-size: 1.1rem;
		margin-bottom: .5rem;
	}

	.transfer-popup-price-txt {
		font-size: 1.3rem;
		margin-bottom: .5rem;
	}

	.transfer-popup-trans-countdown-txt {
		font-size: .9rem;
		margin-bottom: .5rem;
	}

	.transfer-popup-trans-ref-id {
		font-size: .75rem;
	}
	
	.confirm-label-tag-txt {
		font-size: .9rem;
	}
	
	.recommend-tag-txt {
		font-size: .7rem;
	}
}

@media(min-width: 768px) {
	.collected-coin-d-container{
		display: block;
	}

	.collected-coin-m-container {
		display: none;
	}

	.content-collection {
		margin-top: 30px;
	}

	.all-content-coin-container .col-all {
		padding-left: 15px;
		padding-right: 15px;
	}

	.tab-link-toggle {
		font-size: 1.3rem;
	}

	.head-section-text {
		font-size: 1.2rem;
	}

	.content-section-text {
		font-size: 1.1rem;
	}

	.content-div-text-container {
		padding: .75rem;
	}

	.date-section {
		padding-left: 15px;
	}

	.coin-section {
		padding-right: 15px;
	}

	.content-coin-img {
		display: inline;
	}

	.content-section-price {
		display: inline-block;
		float: right;
	}

	.load-more-coin-history-btn {
		font-size: 1.3rem;
	}

	.truemoney-topup-code-container .col-all {
		padding-left: 15px;
		padding-right: 15px;
	}

	.true-logo-container {
		padding-left: 0px;
		padding-right: 0px;
		margin-left: 0;
		margin-right: 0;

		white-space: normal;
		overflow-x: hidden;
	}

/*
	.true-logo-container img {
		width: auto;
		height: 100px;
	}
*/

	.head-price-rate-txt {
		font-size: 1.5rem;
	}

	.price-rate-txt {
		font-size: 1.1rem;
		margin-left: 20px;
		min-width: 100px;
	}
	
	.choose-package-price-link {
		padding: .25rem 1.1rem;
	}

	.body-card-price-rate-container {
		padding: 1rem;
	}

	.header-true-table-label {
		font-size: 1.5rem;
	}

	.input-code-container {
		flex: 0 0 83.333333%;
	}

	.input-submit-container {
		flex: 0 0 16.666667%;
	}
	
	.ais-code-container {
		flex: 0 0 100%;
	}
	
	.ais-submit-container {
		flex: 0 0 35%;
	}

	.topup-field, .topup-send {
		padding: 1rem;
		font-size: 1.3rem;
	}

	.how-to-topup-txt {
		font-size: 1.5rem;
	}

	.all-content-coin-container {
		margin-top: 20px;
	}

	.choose-package-price-link {
		font-size: 1rem;
	}

	.price-select-label,
	.price-show-label{
		font-size: 1.2rem;
	}

	.price-select-selection,
	.price-show-selection{
		font-size: 1.2rem;
	}

	.transfer-popup-trans-warn-txt {
		font-size: .8rem;
	}

	.transfer-popup-info-container {
		font-size: 1rem;
	}

	.slip-upload-btn {
		font-size: 1rem;
	}

	.label-transfer-list-txt {
		font-size: 1rem;
	}

	.label-transfer-price-txt {
		font-size: 1.15rem;
	}

	.filter-section-text {
		font-size: 1.2rem;
		text-align: center;
		margin-top: 10px;
		margin-bottom: 15px;
	}

	.transfer-popup-trans-head-txt {
		font-size: 1.2rem;
		margin-bottom: 1rem;
	}

	.transfer-popup-price-txt {
		font-size: 1.6rem;
		margin-bottom: 1rem;
	}

	.transfer-popup-trans-countdown-txt {
		font-size: 1rem;
		margin-bottom: 1rem;
	}
	
	.confirm-topup-btn {		
		padding: 1rem;
		font-size: 1.3rem;
	}
	
	.confirm-label-tag-txt {
		font-size: 1.2rem;
	}
	
	.pay-link-container {
		width: 15%;
	}
	
	.pay-way-txt {
		font-size: 1rem;
	}
	
	.price-rate-plus-txt {
		font-size: 1.1rem;
		margin-right: 10px;
	}
	
	.recommend-tag-txt {
		font-size: .85rem;
	}
	
	.hover-txt {
		display: inline-block;
		margin-left: 0;
	}
}