/*--------------------------------------------------------------
# #main - background setting
--------------------------------------------------------------*/
/* Web Background*/
#main {
	background-position: right top;
	background-repeat: no-repeat;
	background-size: cover;
}

.bg-twqr {
	background: url('../img/bg-twqr-web.png');
}

.bg-taiwanpay {
	background: url('../img/bg-taiwanpay-web.png');
}

/* Mobile Background*/
@media (max-width: 992px) {
	#main  {
		background-position: right top;
		background-size: contain;
		background-repeat: no-repeat;
	}
	.bg-twqr {
		background: url('../img/bg-twqr-mobile.png');
	}

	.bg-taiwanpay {
		background: url('../img/bg-taiwanpay-mobile.png');
	}
}

/*--------------------------------------------------------------
# Card - max size 900px
--------------------------------------------------------------*/
@media (min-width: 800px) {
	.card-twqr, .card-taiwanpay {
		max-width: 800px !important;
	}
}

/*--------------------------------------------------------------
# Form - Validation 
--------------------------------------------------------------*/

/* Checkbox */
.form-check-input.is-invalid~.form-check-label,
.was-validated .form-check-input:invalid~.form-check-label {
	color: black;
}

.form-check-input.is-invalid,
.was-validated .form-check-input:invalid {
	border-color: rgba(0, 0, 0, .25);
}

.form-check-input.is-invalid:checked,
.was-validated .form-check-input:invalid:checked {
	border-color: #0d6efd;
	background-color: #0d6efd;
}

.form-check-input.is-invalid:focus,
.was-validated .form-check-invalid:valid:focus {
	box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

/* Input */
.form-control.is-invalid,
.was-validated .form-control:invalid {
	background-image: none;
}

/* Bootstrap Select */
.bootstrap-select.is-invalid .dropdown-toggle {
	border-color: #dc3545 !important;

}

.bootstrap-select.is-invalid>.dropdown-toggle:focus,
.bootstrap-select.is-invalid>.dropdown-toggle.show {
	border-color: #dc3545 !important;
	box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .25) !important;
}

/*--------------------------------------------------------------
# Other
--------------------------------------------------------------*/
.modal.fade .modal-dialog {
	transition: transform 0.5s ease-out;
}

.bg-gray{
	background: #f6f6f6;
}

#icon-send {
	height: 80px;
	max-width: 268px;
	margin-right: 6px;
}

#isAgreed {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-top: 1.8px;
}