/*
file: uss_bd.css

updates:
10:54 2019-05-16 (rename from bd_uss.css)
9:56 2019-07-11 for echeck
16:21 2019-08-23 iphone chrome distort. so reduce govhk_survey_qa_panel_1 and add govhk_survey_big_triangle
15:33 2019-08-26 all class with govhk_survey prefix
10:24 2019-12-09 web accessibility update
10:24 2019-12-09 do nothing for submit close button, let user handle
14:44 2020-05-28 enhance for TD 6 question (2 apps)
15:31 2020-05-29 style big change
16:03 2020-05-29 android chrome fix
17:05 2020-05-29 fix safari first bullet problem
10:25 2020-06-01 fix safari bullet not align
10:50 2020-06-01 fix android chrome bullet point
11:28 2020-06-02 for scroll in mobile device
16:06 2020-06-02 small width (le 375px) scroll, 1 line for text, 1 line for smiley
16:00 2020-09-02 remove background-size: cover;	as browser enlarge have a line on right side
*/


/* html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
	*/
	
	
/* 10:05 2019-12-09 for web accessibility */
.govhk_survey_access {
	top:-5000px;
	position:absolute;
	display:block;		/* 10:05 2019-12-09 try separate submit and close button */
}	
	
/* reset all element under #govhk_survey_pop */	
#govhk_survey_pop  {	
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-weight: normal;
    vertical-align: baseline;
    background: transparent;


}



/* make font family same */
#govhk_survey_pop:lang(en)  {
  font-family: Arial, sans-serif; }


/* 14:32 2020-06-02 remove class for top or bottom
#govhk_survey_pop.govhk_survey_top_8vh {
	top: 8vh;
}

#govhk_survey_pop.govhk_survey_bottom_1vh {
	bottom: 1vh;
}
*/
/* 14:34 2020-06-02 assume desktop first */
#govhk_survey_pop {
	top: 8vh;
}


#govhk_survey_dummy {
	display:block;
	float:left;
	clear:both;
	width:10%;	/* 10% or 100% */
	height:900px;
	border:1px solid blue;
}

  
/* Mockup the Feature Article font size */  

/* 11:43 2019-05-10 must have ID because one ID override one class */
#govhk_survey_thank_panel.govhk_survey_is_block {
	display:block;
}

#govhk_survey_expand_panel.govhk_survey_is_none {
	display:none;
}


#govhk_survey_pop {

	
	/* display:none;  */
	position:fixed; 
	
	/* 10:44 2018-10-09 debug display whole panel */
	
	/* 11:28 2018-10-09 for mobile */
	
	/* height is auto */
	
	/* 11:07 2019-05-10 move right side (hidden) */
	/* 15:25 2019-08-26 govhk_survey_pop is at most 360px */
	right:-400px;
	
	
	/* margin:auto; 14:38 2018-10-10 */ 
	margin:0;
	padding:0;
	
	/* width:970px;  */
	z-index: 2000;	
	text-align: right;

	/* 14:16 2017-12-04 debug */
	 /* border:1px solid blue; */
	 
	 /* 15:33 2019-05-09 animate */
     -webkit-transition: all 1.5s ease-in-out;
     -moz-transition: all 1.5s ease-in-out;
     -o-transition: all 1.5s ease-in-out;
     transition: all 1.5s ease-in-out;	 
	
}

#govhk_survey_pop.govhk_survey_move_left {
  
  transform: translate(-400px, 0);
  -webkit-transform: translate(-400px, 0);
  -o-transform: translate(-400px, 0);
  -moz-transform: translate(-400px, 0);
  
}

#govhk_survey_pop.govhk_survey_move_delay {
  animation-delay: 2s;
}

/* 12:08 2018-10-10 for mobile device landscape (limited height), move the flag up  */
/* 12:12 2018-10-10 bad, use js to do it after expand
@media screen and (max-height: 400px) {
    #govhk_survey_pop {
      top:10px;
	} 
}
*/



	
#govhk_survey_flag_panel,
#govhk_survey_thank_panel {
	z-index:2010;
	
	display:block;
	float:right;
	clear:both;
	
	/* width:360px; */
	height:32px;
	/* height:249px; */
	/* background-color:#FFC000;	*/
	
}

#govhk_survey_thank_panel {
	display:none; 
	/* display:block; */
}

/* hover: change together 15:44 2018-10-09 */
#govhk_survey_flag_text:hover,
#govhk_survey_submit_close_btn:hover {
	color:#ffffff; 	/* white */
}


	
#govhk_survey_flag_text,
#govhk_survey_thank_text {
	
	display:block;
	float:right;
	clear:none;	
	
	width:auto;
	height:40px;
	line-height:40px;
	text-align:right;
	padding:0 10px;
	
}

#govhk_survey_flag_triangle {
	display:block;
	float:right;
	clear:none;		
	/* background-color:#FFC077;	 */
	width:20px;
	height:40px;	
}

/* background for flag and thank_you (without the triangle) */
#govhk_survey_close_a,
#govhk_survey_flag_text,
#govhk_survey_thank_text {
	background-color:#F9E26E; /* yellow */
}


#govhk_survey_close_a {
	
	display:block;
	float:right;
	clear:none;	

	
	/*
	z-index: 2020;
	position:absolute;
	cursor:hand;
	display:block;
	top:0px;
	right:0px;
	text-align:right;
	*/
	
	/* size equal image size */
	width:32px;
	height:32px;
		
	/* 14:16 2017-12-04 debug */
	/* border:1px solid red; */		
}



#govhk_survey_banner {
}

/* 11:51 2018-10-10 consider mobile */
/* Set same height for background */
/* check "www.gov.hk/en/residents/transport/drivinglicense/roadtest.htm" for long app name */






/* 10:03 2018-10-09 add for flag version */
#govhk_survey_expand_panel {
	
	/* display:block; */
	
	display:table-row;
	
	/* display:none; */
	
	float:left;
	clear:both;
	text-align:left;
	/*background-color:#FFC000; */
	

	
}

/* 16:40 2019-05-16 moved from HTML */
#govhk_survey_flag_triangle {
	
	/* 17:10 2020-05-20 update: */	
	/* background-image: url("images/flag_triangle.svg?20200529d"); */
	background-image: url("default/images/flag_triangle.svg?20200529d");
	
  	background-repeat: no-repeat;	
}

.d202005_td #govhk_survey_flag_triangle {
	background-image: url("d202005_td/images/flag_triangle.svg?20200529d");
}

#govhk_survey_big_triangle {
	width:30px;
	min-width:30px;
	
	/* border:1px solid blue; 16:21 2019-08-23 test only */
	display:table-cell;
	
	height:auto;
	
	/* background-image: url("images/quest_triangle.svg?20200529d"); */
	/* 17:10 2020-05-20 update: */
	/* background-image: url("images/eServiceSurveyBackGround.svg?20200529d"); */
	background-image: url("default/images/eServiceSurveyBackGround.svg?20200529d");
	
	background-repeat: no-repeat;
	/* background-size: cover;	16:00 2020-09-02 remove as browser enlarge have a line on right side */
	/* background-size: 100% 100%; 16:07 2019-08-23 with this cannot align right */
	
	/* background-position: right center;	 */
	/* 16:05 2019-08-23 added */
	background-position: left center;	

}

.d202005_td #govhk_survey_big_triangle  {
	background-image: url("d202005_td/images/eServiceSurveyBackGround.svg?20200529d");
}

#govhk_survey_qa_panel_1 {

	height: auto;
	
	/* border:1px solid red; 16:21 2019-08-23 test only */
	/* display:block; 15:28 2019-08-23 */
	display:table-cell;
	
	/* float: right; 15:30 2019-08-23 */
	/* clear:none; 15:37 2019-08-23 */
    
	/*
	 width:auto; 
	min-width: 260px;
	max-width: 360px; 16:56 2019-04-24 for bd 
	max-width: 300px; 
	*/
	/* 9:26 2019-07-11 remark
	width: 320px; 
	*/
	
	/* 9:26 2019-07-11 for echeck */
	width:94vw;
		
	min-width: 260px;
	/* max-width: 360px;  16:03 2019-08-23 */
	max-width: 330px; /* 16:20 2019-08-23 */
	
	
	/* 15:15 2019-04-30 NOTE: cover all width
	background-size: auto 100%; */
	background-color:#F9E26E;
	
	/* for vertical-center */
	position: relative;

	padding-bottom: 10px;
	/* padding-left: 20px; 15:29 2019-08-23 */
	padding-right: 10px;  /* 15:39 2019-08-26 NOTE: 10px padding for scroll bar to overlap */
	
	
}

@media (max-width: 360px) {
	#govhk_survey_qa_panel_1 {
		/* padding-left: 30px; 15:17 2019-08-26, */
		/* 15:27 2019-08-26 width:260px, esp. for iPhone SE (320px width) only */
		width:260px;
	}
}


#govhk_survey_qa_panel_2 {
	
	/* width: 100%; 14:45 2019-04-30 */
	/* width:305px; 9:55 2019-07-11 test back to 100% */
	
	width: 100%;
	/* padding: 1px 5px 10px 10px; 15:16 2020-05-29 */
	padding: 1px 5px 10px 0px;

}

/* 17:05 2020-05-29 try fix safari first bullet problem */
#govhk_survey_list_panel {
	display:block;
	float:left;
	
	/* 09:50 2020-06-01 move bullet numbers away (right) for (better not shadow by triangle) */
	padding-left:20px; 
}


#govhk_survey_list_panel ol {
	padding:0;
	margin:0;
	/* 14:13 2020-05-29 */
	/* list-style-position:inside; 17:22 2020-05-29 esp for mac */
	list-style-position:outside;
	
	/*padding-left:15px;*/
}

.govhk_survey_list_item {
	display:inline-block;
	width:160px;

}

#govhk_survey_submit_close_panel{
	padding-top: 5px;
	text-align:center;
}


.govhk_survey_button {
	background-color: white;
	border: none;
	color: black;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	font-weight: bold;
	margin: 0 4px;
	-webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
	cursor: pointer;
	width: 86px;
	height: 37px;
	border-radius: 4px;
	outline-style: none;

}

/* 10:44 2019-12-05 add focus for accessibility */
.govhk_survey_submit_button:hover,
.govhk_survey_submit_button:focus,
.govhk_survey_close_button:hover,
.govhk_survey_close_button:focus {
	background-color: #7A2900;
	color: white;
}


.govhk_survey_list_panel_li_row {
	/* 15:49 2020-05-28
	display: flex; 
	flex-flow: column nowrap; 
	justify-content: center;
	align-items: flex-start;
	*/
}

/* 16:27 2020-05-28 */
.govhk_survey_list_panel_li_row div {
	vertical-align:top; 
	/* 10:58 2020-06-01	android chrome tc version bullet number will move up on mobile device */
}


@media (min-width: 400px) {
	.govhk_survey_list_panel_li_row {
		/* 15:49 2020-05-28 
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: flex-start;
		margin-left: -20px;
		*/
	}
}


/*
.govhk_survey_list_panel_li_row {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flex-start;
	margin-left: -20px;
}
*/

 




.govhk_survey_smiley_icon {
	
	text-decoration: none;
	width: 29px;
	height: 29px;
	border-radius: 4px;
	border-radius: 50%;
	padding: 0;

	background-position: -1.1px -1.1px;
	background-repeat: no-repeat;
	
	-webkit-transition-duration: 0.8s; /* Safari */
	transition-duration: 0.8s;

	outline-style: none;

}

.govhk_survey_qa_panel_close_cross a {
	text-decoration: none;
	color: black;
	font-weight: bolder;
	font-family: Arial, Helvetica, sans-serif;
	/* margin: 8px 8px 0 0; 16:56 2019-08-23 */
	margin: 12px 8px 0 0; /* 16:57 2019-08-23 to remove the space between big triangle and rectangle area */
	font-size: 20px; 
	
}

@media (min-width: 400px) {
	.govhk_survey_qa_panel_close_cross a {
		font-size: 16px;
	}
}

.govhk_survey_qa_panel_close_cross {
	display: flex;
	flex-flow: row-reverse nowrap;
}

/* 16:04 2020-05-28 test */
div.govhk_survey_q_text	{
		/* width:135px; 14:20 2020-05-29 */
		width:125px;
		display:inline-block;
}




/*
.govhk_survey_q_text {
	color: #900404;
}

.govhk_survey_q_text {
	color: #0c00EB;
}

.color_text_004D00 {
	color: #004D00;
}
*/

#govhk_survey_list_panel ol li:nth-child(3n+1) {
	color: #900404;
}
#govhk_survey_list_panel ol li:nth-child(3n+2) {
	color: #0c00EB;
}
#govhk_survey_list_panel ol li:nth-child(3n+3) {
	color: #353535;
}


#govhk_survey_list_panel li{
	/* 16:46 2020-05-28 margin-bottom: 20px; */
	margin-bottom: 15px;
}

#govhk_survey_question_front {
	margin-bottom: 15px;
}



.govhk_survey_smiley_row {
	/* margin-top: 5px; 10:24 2020-06-01 no need now */
	min-width: 162px;
	/* 15:52 2020-05-28
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	*/

	display:inline-block;
	
	/* 10:20 2020-06-01 fix for safari tc version drop to 2 lines, refer: win10 desktop chrome default as 13.33px, consider word-spacing but not set */
	font-size:13px;

}


@media (min-width: 400px) {
	.govhk_survey_smiley_row {
		margin-top: initial;
	}
}


#govhk_survey_app_name {
	font-weight: bold;
}

.govhk_survey_question_front p,
.govhk_survey_list_panel_li_row span {
	font-size: 14.5px;
}

/* 15:32 2020-06-02 when screen height le 400 */
@media (max-height: 400px)  {	
	#govhk_survey_pop {
		top: 3vh;
	}	
}

/* 15:28 2020-06-02 for 3 questions survey, pop area is around 360x360px, 
  if screen width LE 360px, or height LE 412px (device test as have URL bar) then adjust by below  */
@media (max-width: 360px), (max-height: 412px)  {	

	/* 14:59 2020-06-02: bottom means 100-3-95=2vw */
	#govhk_survey_pop {
		
		/* 09:16 2020-06-02 for scroll in mobile device */
		max-width: 95vw;
		max-height: 95vh;
		overflow-y: scroll;
		overflow-x: hidden;		
		/* 16:01 2020-06-02 after set height */
		top: 3vh;
	}
	
	/* body.android.chrome div.govhk_survey_q_text	{ */
	#govhk_survey_pop div.govhk_survey_q_text	{
			/* width:80%; 15:39 2020-06-02 remark */
			width:98%; /* 15:45 2020-06-02 to force 2 line */
			clear:both;
	}
	
	/* body.android.chrome .govhk_survey_list_panel_li_row div { */
    #govhk_survey_pop  .govhk_survey_list_panel_li_row div {		
		vertical-align:baseline; 
		/* 11:05 2020-06-01 as bullet number move up for android chrome, move it down */
	}
	
}


/* 
 15:33 2020-06-02 for 6 questions survey, pop area around 360 x 503 (use 374 and 550 below)
 15:59 2020-05-29 as android chrome have bigger text, just make the text 1 line, smiley another line 
 14:36 2020-06-02 change android chrome to width or height LE 375px - for iPhone6,7,8 (not iPhone6,7,8 Plus)
 15:11 2020-06-02 Refer: Galaxy Note II (360x640) bad on text and smiley on 1 line
*/
@media (max-width: 374px), (max-height: 550px)  {	

	/* 14:59 2020-06-02: bottom means 100-3-95=2vw */
	#govhk_survey_pop.d202005_td {
		/* 09:16 2020-06-02 for scroll in mobile device */
		max-width: 95vw;
		max-height: 95vh;
		overflow-y: scroll;
		overflow-x: hidden;	
		/* 16:01 2020-06-02 after set height */
		top: 3vh;
	}
	
	/* body.android.chrome div.govhk_survey_q_text	{ */
	#govhk_survey_pop.d202005_td div.govhk_survey_q_text	{
			/* width:80%; 15:39 2020-06-02 remark */
			width:98%; /* 15:45 2020-06-02 to force 2 line */
	}
	
	/* body.android.chrome .govhk_survey_list_panel_li_row div { */
    #govhk_survey_pop.d202005_td  .govhk_survey_list_panel_li_row div {		
		vertical-align:baseline; 
		/* 11:05 2020-06-01 as bullet number move up for android chrome, move it down */
	}

	
}


/* 
12:06 2020-06-02
panel_1 : (94vw) (range: 260-330px)
panel_2 : 100%
bullet point: around 20px
text: around 125px
smiley: 162px
*/