html, body {
    color : var (--text);
    /* background-color : #ffcb09; */
    font-family: "Microsoft YaHei";
    font-size:1em;
    }
:root {
  /*  Branding  */
  --text: #24272c;
  --purple: #8d64a9;
  --white: #ffffff;
  --alert: #ff172d;
  --border: #203b55;
}

.padding-top0 {padding-top: 0}
.padding-top10 {padding-top: 0.8em}
.padding-top20 {padding-top: 1.5em}
.padding-bottom0 {padding-bottom: 0}
.padding-bottom10 {padding-bottom: 0.8em}
.padding-bottom20 {padding-bottom: 1.5em}
.padding-left0 {padding-left: 0}
.padding-left10 {padding-left: 0.8em}
.padding-left20 {padding-left: 1.5em}
.padding-left30 {padding-left: 2em}
.padding-left50 {padding-left: 4em}
.padding-right0 {padding-right: 0}
.padding-right10 {padding-right: 0.8em}
.padding-right20 {padding-right: 1.5em}
.padding-right30 {padding-right: 2em}
.padding-right50 {padding-right: 4em}
.row {margin-left: 0; margin-right: 0}
.text-alert, small { color:  var(--alert)}

.container-header {
    padding    : 0 !important;
    overflow-x : hidden;
     /*background-color : #f94a98;*/ 
    }


.main-header-bg {
    position        : relative;
    margin          : 0 auto;
    display         : flex;
    justify-content : center;
    }
.main-bg {
    /*position        : relative;
    margin          : 0 auto;
    display         : flex;
    justify-content : center;*/
    max-width       : 1200px;
    max-height      : 587px;
    text-align      : center;
	border-radius: 30px;
    }

.container {
	/* background: #ffcb09; */
	padding: 30px;
	/*width: 50%;*/
	/*margin-bottom: 150px;*/
	font-size: 1em;
}
.container-form {
	 /*background: #ffcb09;*/ 
	width: 100%;
}
.btn-copy {
	background: var(--purple);/*#8ba4ca*/
	color: var(--white);
	font-size:1em;
	border-radius: 0 0.25em 0.25em 0;
}
	.btn-copy:hover {
		background: #86689b;/*#597baf*/
		color: var(--white);
	}
.submit-btn {
	background: var(--purple);
	color: #fbfafa;
	border: 0;
	width: 50%;
	border-radius: 25px;
	padding: 10px 20px;
	text-align: center;
	text-decoration: underline;
}
	.submit-btn:hover {
		background: #86689b;
		color:  var(--white);
	}


/*---- tnc ----*/
.tnc-header {
	padding: 10px 10px;
	color:  var(--purple);
	text-align: center;
	font-size: 1.15em;
	font-weight: 500;
}

.form-group {
	
    vertical-align: middle;
	display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: var(--white);
  background-clip: padding-box;
  border-radius: 0;
	
}
.form-txt {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	color: var(--text);
	/* text-align: right; */
	line-height: 30px;
}
.v-input {
	border-radius: 0.25em 0 0 0.25em;
}
/*----- modal ------*/
.modal {
	top:20%;
}
.modal-game {
	border-radius: 0;
}
.modal-header {
	/*background: var(--purple);*/
    color: #f9f9f9;
    border-radius: 0;
	display:flex;
	justify-content:center;
	align-items:center;
	min-height:100px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}
.modal-content.succeed {
	border-radius: 0 !important;
	border: 0 !important;
	background-color: transparent; 
}
	.modal-content.succeed .modal-header {
		background:radial-gradient(circle, rgba(156,242,101,1) 0%, rgba(111,191,60,1) 40%)
	}
		.modal-content.succeed .modal-header span {
			background:url("../img/succeed.svg") center top no-repeat;background-size:50px;width:50px;height:50px;
		}
		.modal-content.succeed a {
			background-color:#6fbf3c;
		}
		.modal-content.succeed a:hover {
			background-color:#a2db7d;
		}

.modal-content.warning {
	border-radius: 0 !important;
	border: 0 !important;
	background-color: transparent; 
}
	.modal-content.warning .modal-header {
		background:radial-gradient(circle, rgba(247,125,125,1) 0%, rgba(239,84,84,1) 40%)
	}
		.modal-content.warning .modal-header span {
			background:url("../img/warning.svg") center top no-repeat;background-size:50px;width:50px;height:50px;
		}
		.modal-content.warning a {
			background-color:#ef5454;
		}
		.modal-content.warning a:hover {
			background-color:#f27070;
		}

.modal-body {
	color: var(--text);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 50px 0;
	background: var(--white);
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	flex-direction: column;
}
.modal-body-wrapper {
	text-align:center;
	padding:0 20px;
	
	margin:auto;
}
.modal-body-wrapper span{
	font-size: 1.25em;
	font-weight: 600;
}
.modal-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 0;
	border-radius: 50px;
	padding: 5px 15px;
	font-size:0.85em;
	color: var(--white) !important;
}



@media screen and (min-width : 10px) and (max-width : 319px) {
.main-header-bg {
    display: flex;
    justify-content: flex-start;
	}
.main-bg {
    max-width       : 600px;
    max-height      : 587px;
	border-radius: 0;
    } 
.container {
	width: 100%;
	padding: 0;
	font-size: 0.75em;
	border-radius: 0;
	}
.container-form {
	width: 100%;
	/*padding: 20px;*/
	font-size: 0.75em;
	border-radius: 0;
	}
.tnc-header {
	font-size: 1.35em;
	}


    }

@media screen and (min-width : 320px) and (max-width : 449px) {
.main-header-bg {
    display: flex;
    justify-content: flex-start;
	}
.main-bg {
    max-width       : 600px;
    max-height      : 587px;
	border-radius: 0;
    }
.container {
	width: 100%;
	padding: 0;
	font-size: 0.75em;
	border-radius: 0;
	}
.container-form {
	width: 100%;
	/*padding: 10px;*/
	font-size: 0.75em;
	border-radius: 0;
	}
.form-txt {
	display: flex;
	justify-content: flex-start;
}
.tnc-header {
	font-size: 1.35em;
	}
    }

@media screen and (min-width : 450px) and (max-width : 575px) {
.main-header-bg {
    display: flex;
    justify-content: flex-start;
	}
.main-bg {
    max-width       : 800px;
    max-height      : 587px;
	border-radius: 0;
    }
.container {
	width: 100%;
	padding: 20px;
	font-size: 0.75em;
	}
.container-form {
	width: 100%;
	/*padding: 0 20px;*/
	font-size: 0.75em;
	}
.form-txt {
	display: flex;
	justify-content: flex-start;
	}

    }

@media screen and (min-width : 576px) and (max-width : 767px) {
.main-header-bg {
    display: flex;
    justify-content: flex-start;
	}
.main-bg {
    max-width       : 1200px;
    max-height      : 587px;
	border-radius: 0;
    }
.container {
	width: 100%;
	padding: 30px;
	font-size: 0.85em;
	}
.container-form {
	width: 100%;
	padding: 0 20px;
	font-size: 0.85em;
	}
.form-txt {
	display: flex;
	justify-content: flex-start;
	}

.bonus-header {
	width: 100%;
}
    }

@media screen and (min-width : 768px) and (max-width : 991px) {
.main-bg {
    max-width       : 1200px;
    max-height      : 587px;
    }
 .container {
	width: 100%;
	padding: 40px;
	font-size: 0.95em;
	}
 .container-form {
	width: 100%;
	padding: 0 20px;
	font-size: 0.95em;
	}
.form-txt {
	display: flex;
	justify-content: flex-start;
}

    }

@media screen and (min-width : 992px) and (max-width : 1199px) {
 
    }

@media screen and (min-width : 1200px) {
    }