* {
    padding: 0;
    margin: 0;
    font-family: Arial;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    touch-action: manipulation;
}

.main {
    width: 100%;
    height: 100%;
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
    background: #fff;
}

.login {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
}

/* login.html edit 19/08/06 */
i>svg{
	display: block;
	width: 100%;
	height: 100%;
}
input[type="text"]{
	transform: translate3d(0, 0, 0);
}
input[type="button"]{
	cursor: pointer;
}

.bg_login{
	width: 100%;
	min-height: 100%;
	padding-bottom: 16px;
	background: url('../Content/Images/Home/bg_login.jpg') no-repeat;
	background-position: center 56px;
}
.box_language{
	width: 100%;
	height: 56px;
	line-height: 56px;
	text-align: center;
	font-size: 14px;
	background: #503f32;
}
.btn_language{
	display: inline-block;
	width: 33.33%;
	height: 100%;
	max-width: 107px;
	margin-right: -4px;
	color: rgba(255, 255, 255, 0.72);
	transition: all 0.3s ease;
}
.btn_language.on{
	color: #debb69;
}
.icon_login{
	display: block;
	width: 55px;
	height: 55px;
	margin: 16px auto;
	border-radius: 50%;
	background: url(../Content/Images/Home/icon_login.svg) no-repeat;
	background-size: contain;
}
.box_login{
	width: 100%;
	max-width: 320px;
	margin: 0 auto 20px auto;
	padding: 16px;
	text-align: center;
	background: #fff;
	box-shadow: 0 -1px 20px 0 rgba(0, 0, 0, 0.24);
}
.lab_input{
	position: relative;
	display: block;
	width: 100%;
	height: 48px;
	margin-bottom: 16px;
}
.input_chgpwd .lab_input{
	margin-bottom: 0;
}
.lab_input>input{
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 32px 0 16px;
	font-size: 16px;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.32);
	color: #000;
	box-shadow: none;
	transition: all 0.3s ease;
	pointer-events: auto;
}
.text_input{
	line-height: normal!important;
	pointer-events: none;
}
.text_input:after{
	content: attr(data-tooltip);
	position: absolute;
	top: 0px;
	left: 14px;
	display: flex;
	height: 100%;
	align-items: center;
	padding: 0 4px;
	font-size: 16px;
	color: rgba(0,0,0,0.24);
	background: #fff0;
	transition: all 0.3s ease , background 0.1s 0.1s;
}
.lab_input>input:valid ~ .text_input:after{
	top: -8px;
	height: 16px;
	font-size: 12px;
	color: rgba(0,0,0,0.56);
	background: #fff;
}
.lab_input.error>input{
	border: 2px solid #e76565!important;
}
.lab_input.error>input:valid ~ .text_input:after,
.lab_input.on.error .text_input:after{
	color: #e76565!important;
}

.text_error{
	display: block;
	width: 100%;
	line-height: 16px;
	margin-bottom: 16px;
	text-align: center;
	font-size: 12px;
	color: #ce3636;
}
.lab_input .btn_clear{
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	padding: 8px;
	background-image: url(../images/icon_close_b.svg);
	background-repeat: no-repeat;
	background-position: center;
	transition: none!important;
	pointer-events: auto;
	z-index: -1;
}

.lab_input .btn_clear svg{
	width: 100%;
	height: 100%;
	opacity: 0;
	fill: rgba(0,0,0,0.4);
	pointer-events: none;
}

.btn_login{
	width: 100%;
	height: 48px;
	line-height: 48px;
	margin-bottom: 16px;
	padding: 0 16px;
	border-radius: 4px;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	border: none;
	color: #fff;
	background: #19805c;
	transition: background 0.3s ease;
}
.box_remember{
	width: 100%;
	height: 48px;
	line-height: 48px;
	margin-bottom: 11px;
	text-align: left;
}
.lab_radio{
	position: relative;
	float: left;
	display: block;
	color: rgba(0, 0, 0, 0.64);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.check_remember{
	height: 48px;
	margin-right: 8px;
}
.lab_radio input{
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
.checkmark{
	display: inline-block;
	width: 18px;
	height: 18px;
	margin: 3px;
	vertical-align: middle;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.64);

	background: url('../images/icon_check.svg') no-repeat;
	background-size: contain;
	background-position: -24px;
}
.lab_radio tt{
	display: inline-block;
	margin-left: 4px;
	vertical-align: middle;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.64);
}
.lab_radio input:checked ~ .checkmark{
	border: none!important;
	background-position: 0;
}
.btn_forgot{
	float: right;
	display: block;
	margin-top: 1px;
	text-align: right;
	font-size: 14px;
	color: #007ba8;
	cursor: pointer;
}
.btn_passcode{
	width: 100%;
	height: 48px;
	line-height: 48px;
	margin-bottom: 16px;
	padding: 0 16px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	border: none;
	color: #fff;
	background: #9b8d79;
	transition: background 0.3s ease;
}
.btn_oldsite{
	width: 100%;
	height: 48px;
	line-height: 48px;
	padding: 0 16px;
	border-radius: 4px;
	font-size: 14px;
	border: none;
	color: #007ba8;
	background: #fff;
	transition: background 0.3s ease;
	/* display: none!important; */
}

.gridContainer.clearfix.login{
	background: none;
}
.gridContainer.clearfix{
	width: 100%;
}

.open_bet,
.open_bet.chg_psw_title {
	background-image: url(../images/bg_all_sport.png);
	background-position: bottom;
}

/* first_login */
.title_chgpwd{
	display: flex;
	width: 100%;
	height: 56px;
	line-height: 56px;
	padding: 0 8px 0 16px;
	margin-bottom: 16px;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: #503f32;
}
.mobile .btn_oldsite{display: none!important;}

.title_chgpwd span{
	display: inline-block;
}
.btn_help{
	position: absolute;
	top: 0;
	right: 8px;
	display: inline-block;
	width: 32px;
	height: 32px;
	padding: 8px;
	margin: 12px 0;
}
.btn_help svg{
	display: block;
	width: 100%;
	height: 100%;
	fill: #fff;
	opacity: 0.64;
}
.content_chgpwd{
	margin: 0 auto;
	padding: 0 16px 16px 16px;
}
@media screen and (min-width: 1024px) {
	.title_chgpwd{
		margin-bottom: 32px;
	}
	.content_chgpwd{
		width: 100%;
		max-width: 650px;
		padding: 0 0 16px 0;
	}
}

.content_chgpwd .text_sub,
.content_chgpwd .text_normal{
	font-size: 14px;
	color: rgba(0,0,0,0.64);
}
.content_chgpwd .text_sub{
	display: flex;
	height: 16px; /* 1123TAG */
	align-items: center;
}
.content_chgpwd.forpwd .text_sub{
	margin: 16px 0 24px 0;
}
.content_chgpwd.forpwd .text_normal{
	margin: 0 0 24px 0;
}
.forpwd .text_sub.text_sub_st4{
	margin: 0 0 16px 0;
}
.forpwd_help .text_normal{
	margin: 0 0 16px 0;
}

.content_chgpwd .text_sub ~ .text_sub{
	margin-top: 8px;
}
.input_chgpwd{
	display: flex;
	margin-top: 24px;
	align-items: center;
	justify-content: space-between;
}
.input_chgpwd .lab_login{
	margin-bottom: 0;
	flex: 1 1 auto;
}
.icon_status{
	position: absolute;
	top: 0px;
	right: 87px;
	display: block;
	width: 40px;
	height: 100%;
	background: url('../images/icon_allow.svg') no-repeat center left;
	z-index: 1;
}
.icon_status.error{
	display: block!important;
	visibility: visible!important;
	background: url('../images/icon_disallow.svg') no-repeat center left;
}
.btn_choose{
	width: 79px;
	height: 48px;
	line-height: 48px;
	margin-left: 8px;
	flex: 0 0 79px;
	text-align: center;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: #19805c;
	cursor: pointer;
}
.btn_choose.unable{
	background: rgba(0,0,0,0.24);
	pointer-events: none;
}
.tip_chgpwd{
	width: 100%;
	margin-top: 16px;
	padding: 16px;
	font-size: 12px;
	color: rgba(0,0,0,0.64);
	background: #ededed;
}
.forpwd .tip_chgpwd{
	margin: 0 0  16px 0;
}
.tip_chgpwd b,
.tip_forpwd b{
	display: block;
	margin-bottom: 8px;
	font-weight: bold;
}
.text_msg{
	display: block;
	width: 100%;
	line-height: 16px;
	margin-top: 16px;
	text-align: center;
	font-size: 12px;
	color: #19805c;
}
.text_msg.error{
	color: #ce3636;
}
.btn_chgpwd{
	display: flex;
	width: 100%;
	margin-top: 16px;
	align-items: center;
	justify-content: space-between;
}
.btn_chgpwd > div{
	display: inline-block;
	width: 50%;
	height: 48px;
	line-height: 48px;
	text-align: center;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	flex: 1 1 auto;
}
.btn_chgpwd > div ~ div{
	margin-left: 16px;
}
.btn_cancel{
	color: #fff;
	background: #7a7a7a;
}
.btn_chgpwd .btn_submit,
.box_help_btn .btn_submit{
	color: #fff;
	background: #19805c;
}
.btn_sendcode{
	width: 100%;
	height: 48px;
	line-height: 48px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	border-radius: 4px;
	color: #fff;
	background: #9b8d79;
}

/* Change the password */
.chg_psw_title {
	width: 100%;
	height: 48px;
	background: #503F32;
	line-height: 48px;
	text-align: center;
}

.chg_psw_title.no_login {
	color: #fff;
}

.chg_psw_title i {
	display: block;
	position: absolute;
	width: 32px;
	height: 32px;
	line-height: 32px;
	background-position: center;
	background-repeat: no-repeat;
	margin: 8px;
	padding: 8px;
}
.chg_psw_title i:active {
	background-color: rgba(0, 0, 0, 0.08);
	background-image: url(../images/icon_backbtn.svg);
	background-position: center;
	background-repeat: no-repeat;
}

.noteBox {
	margin-bottom: 24px;
}

.noteBox1 {
	display: block;
	width: 100%;
	line-height: 20px;
	color: rgba(0, 0, 0, 0.64);
	font-size: 14px;
	margin-bottom: 8px;
}
.EN .noteBox1{
	margin-bottom: 1rem;
}

.noteBox2 {
	display: block;
	width: 100%;
	line-height: 20px;
	color: rgba(0, 0, 0, 0.64);
	font-size: 14px;
}
.noteBox2 li{
	list-style-type: decimal;
	margin-left: 1rem;
	margin-bottom: 1rem;
	padding-left: 1rem;
}
.noteBox2 li:last-child{
	margin-bottom: 0;
}

.btn_cancel{
	display: block;
	width: 100%;
	height: 48px;
	line-height: 48px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	background-color: #7a7a7a;
	color: #fff;
	transition: background 0.3s ease;
}


/* Help set mail */

.deepGrayBtn {
	color: #fff;
	display: block;
	width: 100%;
	height: 48px;
	line-height: 48px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	-webkit-box-flex: 1;
	background: #19805c;
}


.betSubmitBtn.error,
.deepGrayBtn.error {
	background: rgba(0, 0, 0, 0.24);
}


.forpwd_help li{
	margin: 16px 0 16px 16px;
	margin-bottom: 16px;
	list-style: decimal;
	font-size: 14px;
	color: rgba(0,0,0,0.64);
}
.forpwd_help li:first-child{
	margin-top: 0px;
}
.img_chgpwd{
	width: 100%;
	height: 584px;
	margin-top: 16px;
	background-repeat: no-repeat;
	background-position: center center;
}

.TW .img_chgpwd1{background-image: url(../images/img_chgid_1_tw.png);}
.TW .img_chgpwd2{background-image: url(../images/img_chgid_2_tw.png);}
.TW .img_chgpwd3{background-image: url(../images/img_chgid_3_tw.png);}
.TW .img_chgpwd4{background-image: url(../images/img_chgid_1_tw.png);}

.CN .img_chgpwd1{background-image: url(../images/img_chgid_1_tw.png);}
.CN .img_chgpwd2{background-image: url(../images/img_chgid_2_tw.png);}
.CN .img_chgpwd3{background-image: url(../images/img_chgid_3_tw.png);}
.CN .img_chgpwd4{background-image: url(../images/img_chgid_1_tw.png);}

.EN .img_chgpwd1{background-image: url(../images/img_chgid_1_en.png);}
.EN .img_chgpwd2{background-image: url(../images/img_chgid_2_en.png);}
.EN .img_chgpwd3{background-image: url(../images/img_chgid_3_en.png);}
.EN .img_chgpwd4{background-image: url(../images/img_chgid_1_en.png);}

.title_chgpwd .btn_close{
	position: absolute;
	top: 0;
	right: 0;
	width: 48px;
	height: 48px;
	margin-top: 4px;
	padding: 8px;
}
.title_chgpwd .btn_close i{
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 8px;
	background-image: url(../images/icon_close.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 16px;
	opacity: 0.56;
}
.title_chgpwd .btn_close svg{
	display: block;
	width: 100%;
	height: 100%;
	fill: #fff;
}

.help_pwd{
	width: 100%;
}
.title_help{
	display: flex;
	width: 100%;
	height: 48px;
	align-items: center;
	flex: none;
	background-image: url('../images/bg_op_league.jpg');
	background-position: bottom;
	background-color: #e1dbd8;
}
.title_help .btn_back{
	display: inline-block;
	width: 32px;
	height: 32px;
	margin: 8px;
	flex: 0 0 32px;
	transition: background 0.3s ease;
}
.title_help .btn_back i{
	display: block;
	width: 100%;
	height: 100%;
	padding: 8px;
}
.btn_back svg{
	fill: rgba(0,0,0,0.64);
}
.title_help span{
	display: inline-block;
	width: calc(100% - 96px);
	height: 24px;
	line-height: 24px;
	padding: 0 4px;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	flex: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #000;
}
.box_help_pwd{
	width: 100%;
}
.text_help_pwd{
	width: 100%;
	line-height: 16px;
	margin-bottom: 24px;
	padding: 0 16px;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.64);
}
.box_help_input{
	width: 100%;
	padding: 0 16px;
}
.box_help_pwd .text_error{
	display: block;
}
.box_help_btn{
	display: flex;
	width: 100%;
	padding: 0 16px;
	align-items: center;
	justify-content: space-between;
}
.box_help_btn + .box_help_btn{
	margin-top: 16px;
}
.box_help_pwd .btn_cancel,
.box_help_pwd .btn_next,
.box_help_pwd .btn_submit,
.box_help_pwd .btn_safecode{
	display: inline-block;
	width: 100%;
	height: 48px;
	line-height: 48px;
	flex: 1 1 auto;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	border-radius: 4px;
	color: #fff;
}
.btn_cancel{
	background: #7a7a7a;
}
.btn_next{
	background: #19805c;
}
.btn_safecode{
	background: #9b8d79;
}



/* help_pwd02 */
.box_pwd_mail{
	display: flex;
	width: 100%;
	height: 48px;
	margin-bottom: 16px;
	padding: 0 8px 0 16px;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2px solid #e6e6e6;
}
.box_pwd_mail span{
	display: block;
	width: 100%;
	font-size: 14px;
	font-weight: bold;
	color: #000;
}
.box_pwd_mail .btn_edit,
.box_pwd_mail .btn_delet{
	display: block;
	width: 32px;
	height: 32px;
	padding: 8px;
	flex: none;
}
.box_pwd_mail .btn_delet{
	margin-left: 8px;
}
.box_pwd_mail .btn_edit svg,
.box_pwd_mail .btn_delet svg{
	width: 100%;
	height: 100%;
	fill: rgba(0,0,0,0.56);
}


.box_help_note{
	width: auto;
	margin: 16px;
	padding: 16px;
	font-size: 12px;
	color: rgba(0,0,0,0.64);
	background: #ededed;
}
.box_help_note span{
	display: block;
	font-weight: bold;
	margin-bottom: 8px;
}
.help_pwd04 .text_help_pwd{
	margin: 16px 0;
}


.msg_help_pwd{
	position: fixed;
	bottom: 16px;
	width: 100%;
	padding: 0 16px;
}
.msg_help_pwd .box_msg{
	display: flex;
	width: 100%;
	height: 64px;
	padding: 0 0 0 16px;
	font-size: 12px;
	align-items: center;
	justify-content: space-between;
	color: rgba(255,255,255,0.88);
	background: rgba(0,0,0,0.72);
}
.msg_help_pwd .box_msg span{
	display: block;
	width: 100%;
	flex: 1 1 auto;
	text-align: left;
}
.msg_help_pwd .btn_msg{
	width: 48px;
	height: 48px;
	line-height: 48px;
	margin-left: 24px;
}


.btn_back:active{
	background: rgba(0,0,0,0.08);
}



.lab_input .btn_delet{
	display: none;
}

.input_safecode{
	text-transform: uppercase;
}

/* 1st login set user id */
.chgid_input{
	position: relative;
}
.chgid_input .error ~ .error .btn_clear{
	display: none!important;
}

.chgid_input input::selection,
.chgid_input input::-moz-selection{
	color: #fff;
	background: #449bf9;
}
.chgid_input .lab_input>input{
	padding: 0 40px 0 16px;
}


/* PC hover effect */
@media (pointer: fine) and (max-resolution: 2dppx),
screen and (pointer: fine) and (-webkit-max-device-pixel-ratio: 2),
(-moz-touch-enabled: 0),
screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
	.lab_input>input:hover{
		border-color: #33997a;
	}
	.lab_input.on>input:hover ~ .text_input:after{
		color: #33997a;
	}
	.btn_passcode:hover{
		background: #aca190;
	}

	/* first_login */
	.btn_language:hover{
		color: #debb69;
	}
	.btn_login:hover,
	.btn_choose:hover,
	.btn_chgpwd .btn_submit:hover,
	.box_help_btn .btn_submit:hover{
		background: #379e7a;
	}
	.btn_cancel:hover{
		background: #8f8f8f;
	}
	.btn_help:hover svg{
		fill: #fff;
	}
	.lab_radio:hover .checkmark{
		border: 1px solid #19805c;
	}

	/* Help set mail */
	.betSubmitBtn:hover {
		background: #379e7a;
	}
	.deepGrayBtn:hover {
		background: #379e7a;
	}
	.cancleBtn:hover {
		background: #8f8f8f;
	}
	.btn_sendcode:hover {
		background: #aca190;
	}
	.pswPopBtnBox3>div:hover {
		background: #5c5c5c;
	}
	.btn_edit:hover svg,
	.btn_delet:hover svg{
		fill: #000;
	}
	.btn_cancel:hover{
		background: #8f8f8f;
	}
	.btn_next:hover{
		background: #20a275;
	}

	.title_chgpwd .btn_close:hover i{
		opacity: 1;
	}
}
/* All active effect */
/* first_login */
.btn_language:active{
	color: #debb69;
	background: #433429;
}
.btn_login:active,
.btn_choose:active,
.btn_chgpwd .btn_submit:active,
.box_help_btn .btn_submit:active{
	background: #056b48;
}
.btn_passcode:active{
	background: #867864;
}
.btn_cancel:active{
	background: #666;
}
.btn_help:active,
.title_chgpwd .btn_close:active i{
	opacity: 1;
	background-color: #3c2f26;
}
.btn_help:active svg{
	fill: #fff;
}
.btn_forgot:active{
	color: #005e80;
}
/* Help set mail */
.betSubmitBtn:active {
	background: #056b48;
}
.deepGrayBtn:active {
	background: #056b48;
}
.cancleBtn:active {
	background: #666666;
}
.btn_sendcode:active {
	background: #867864;
}
.pswPopBtnBox3>div:active {
	background: #333333;
}
.btn_edit:active,
.btn_delet:active{
	background: rgba(0,0,0,0.08);
}
.btn_edit:active svg,
.btn_delet:active svg{
	fill: #000;
}
.btn_cancel:active{
	background: #666;
}
.btn_next:active{
	background: #125e43;
}
.box_img{
	display: block;
	width: 100%;
	max-width: 320px;
	margin: 16px auto 0 auto;
}
.img_ip{
	position: relative;
	display: block;
	/* display: none; */
	width: 100%;
	padding-bottom: 48.75%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.img_ip span{
	position: absolute;
	top: 57%;
	right: 5%;
	display: inline-block;
	font-size: 24px;
    font-weight: bold;
    text-decoration: underline;
	color: #0471B3;
}
.TW .img_ip{background-image: url('../images/img_ip_tw.jpg');}
.CN .img_ip{background-image: url('../images/img_ip_cn.jpg');}
.EN .img_ip{background-image: url('../images/img_ip_en.jpg');}

.img_festival{
	display: none;
	/* display: block; */
	width: 100%;
	padding-bottom: 40.625%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.TW .img_festival{background-image: url('../images/festival_tw.jpg');}
.CN .img_festival{background-image: url('../images/festival_cn.jpg');}
.EN .img_festival{background-image: url('../images/festival_en.jpg');}




.lab_input.on>input{
	border: 2px solid #19805c;
}
.lab_input.on .text_input:after{
	top: -8px;
	height: 16px;
	font-size: 12px;
	color: #19805c!important;
	background: #fff;
}
.lab_input.error.on>input{
	border: 2px solid #e76565!important;
}
.lab_input.error.on .text_input:after{
	top: -8px;
	font-size: 12px;
	color: #e76565;
}
.lab_input.on > input:valid ~ .btn_clear{
	z-index: 1;
	cursor: pointer;
}
.lab_input .btn_clear:active{
	z-index: 1;
}
.lab_input .btn_clear{
	z-index: -1;
}

.lab_input.on .icon_status{
	visibility: hidden;
}




@media screen and (min-width: 1024px) {
	.box_help_pwd {
		width: 100%;
		max-width: 650px;
		margin: 0 auto;
	}

	.box_pwd_mail{
		padding: 0;
	}
	.box_help_note{
		margin: 16px 0;
	}
	.box_help_pwd .text_help_pwd{
		padding: 0;
	}
	.box_help_pwd .box_help_input{
		padding: 0;
	}
	.box_help_pwd .box_help_btn{
		padding: 0;
	}
}