@charset "UTF-8";
/*
* @data 2019-8-15
* Author: Alyshia Lee #7711
*
* E.SUN CREDITCARD ADDITIONAL FILE Stylesheet
-----------------------------------
   1_SelectItem
-----------------------------------
*/

		
		.formItem .formZone:last-child{
			margin-bottom: 35px;
		}
		.itemTitle{
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 10px;
		}

		/*===========================
			ID Zone
		============================*/
		.formItem .formZone#idInfoForm{
			padding-bottom: 10px;
		}

		@media screen and (max-width: 768px){
			.formItem .formZone#idInfoForm{
				padding-bottom: 20px;
			}
		}


		/*===========================
			Finance Zone
		============================*/
		.itemContainer#selfUpload{
			padding-bottom: 10px;
			margin-bottom: 20px;
			border-bottom: 1px dashed #9B9B9B;
		}
		.formZone#finInfoForm{
			position: relative;
		}
		a.financeDescriptionBtn{
			position: absolute;
			left: 170px;
			top: -37px;
			line-height: 22px;
			font-size: 16px;
			font-weight: bold;
			color: #EB8300;
		}
		.financeDescriptionBtn img{
			width: 22px;
			height: 22px;
			float: left;
			margin-right: 3px;
		}
		/*==== MyData Checkbox ===*/
		.itemContainer#govInfo .checkboxForm{
			display: block;
			width: 100%;
		}
		.itemContainer#govInfo .checkboxForm .checkboxField{
			width: 100%;
		}
		.itemContainer#govInfo .checkboxForm .checkboxText{
			display: block;
			float: left;
			width: calc( 100% - 40px );
		}
		.itemContainer#govInfo .checkboxForm .checkboxText font{
			color: #F94E4E;
		}
		/*==== MyData Notes ===*/
		#MyDataChkErr img{
			width: 22px;
			height: 22px;
			float: left;
			margin-right: 3px;
		}
		#myDataItemArea ul{
			margin: 0px;
			padding: 0px;
		}
		.myDataDescription ul li{
			margin:0;
			padding-left:18px;
			padding-top:0;
			position: relative;
		}
		.myDataAnnotation{
			color: #EB8300;
			font-size: 18px;
		}
		.myDataDescription{
			margin-top: 10px;
			font-size: 16px;
		}
		.myDataDescription li{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.myDataDescription ul li::before{
			display: block;
			content:'';
			height: 6px;
			width: 6px;
			border-radius: 50%;
			background-color: #222;
			position: absolute;
			left: 4px;
			top: 6px;
		}
		.myDataClauseLink {
			text-align: left;
			margin-top: 30px;
			text-decoration:underline;
		}
		.myDataClauseLink a {
			color:#009E96;
			font-weight: bold;
		}
		@media screen and (max-width: 824px){
			.itemContainer#govInfo .checkboxField .checkboxText{
				padding-bottom: 32px;
			}
		}
		@media screen and (max-width: 768px){
			/*=== if mobile: MyData hides ===*/
			#govInfo{
				display: none;
			}
			.itemContainer#selfUpload{
				padding-bottom: 0px;
				margin-bottom: 0px;
				border-bottom: none;
			}

			.itemContainer#govInfo .checkboxForm .checkboxText font{
				font-size: 16px;
				color: #9B9B9B;
			}
		}
		@media screen and (max-width: 454px){
			.itemContainer#govInfo .checkboxField .checkboxText{
				padding-bottom: 64px;
			}
		}
		@media screen and (max-width: 340px){
			.itemContainer#govInfo .checkboxField .checkboxText{
				padding-bottom: 96px;
			}
		}
		
		
		/*===========================
			General Checkbox
		============================*/
		.itemContainer .checkboxForm{
			margin-bottom: 0px;
		}
		.itemContainer .checkboxForm .checkboxField input[type="checkbox"]:checked + label .checkboxText{
			font-weight: bold;
			color: #1B9E9E;
		}

		@media screen and (max-width: 768px){
			.itemContainer .checkboxForm{
				display: block;
			}
			.itemContainer .checkboxForm .checkboxText{
				display: block;
				float: left;
				width: calc( 100% - 40px);
			}
		}
		@media screen and (max-width: 417px){
			.itemContainer .checkboxField .checkboxText.twoLine{
				padding-bottom: 32px;
			}
		}
		
		/*===========================
			General Radio
		============================*/
		.itemContainer .radioForm .radioField input[type="radio"]:checked + label .radioText{
			font-weight: bold;
			color: #1B9E9E;
		}

		@media screen and (max-width: 768px){
			.itemContainer .radioForm{
				display: block;
			}
			.itemContainer .radioForm .radioText{
				width: calc( 100% - 40px);
			}
		}