/*
file: uss_bd.css

updates:
10:54 2019-05-16 (rename from bd_uss.css)
9:56 2019-07-11 for echeck
*/


/* 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 {
	*/
/* 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; }


#govhk_survey_pop.top_8vh {
	top: 8vh;
}

#govhk_survey_pop.bottom_1vh {
	bottom: 1vh;
}

#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 */
	display:block; 

	
	/* 11:28 2018-10-09 for mobile */
	
	/* height is auto */
	
	/* 11:07 2019-05-10 move right side (hidden) */
	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.move_left {
  transform: translate(-400px, 0);
  -webkit-transform: translate(-400px, 0);
  -o-transform: translate(-400px, 0);
  -moz-transform: translate(-400px, 0);
}

#govhk_survey_pop.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 */



#govhk_survey_qa_panel_1 {
	height: auto;
}


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

	
}

/* 16:40 2019-05-16 moved from HTML */
#govhk_survey_flag_triangle {
	background-image: url("images/flag_triangle.svg");
  	background-repeat: no-repeat;	
}



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

    
	/*
	 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; 
	
	
	background-image: url("images/eServiceSurveyBackGround.svg");
  	background-repeat: no-repeat;
  	
	/* 15:15 2019-04-30 NOTE: cover all width
	background-size: auto 100%; */
	background-size: 100% 100%;
	
	
	/* for vertical-center */
	position: relative;

	padding-bottom: 10px;
	padding-left: 20px;
	padding-right: 10px;
}

@media (min-width: 400px) {
	#govhk_survey_qa_panel_1 {
		padding-left: 30px;
	}
}



#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;

}


	  
	  



#govhk_survey_qa_panel_2 {
}


#govhk_survey_list_panel ol {
	padding:0;
	margin:0;
	/*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: 1.1428rem;
	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;
}

.govhk_survey_submit_button:hover,
.govhk_survey_close_button:hover {
	background-color: #7A2900;
	color: white;
}


.govhk_survey_list_panel_li_row {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: flex-start;
}

@media (min-width: 400px) {
	.govhk_survey_list_panel_li_row {
		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;
	font-size: 1.4285rem;
}

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

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

.govhk_survey_q1_text {
	color: #900404;
}

.govhk_survey_q2_text {
	color: #0c00EB;
}

.color_text_004D00 {
	color: #004D00;
}

#govhk_survey_list_panel li{
	margin-bottom: 20px;
}

#govhk_survey_question_front {
	margin-bottom: 15px;
}

.govhk_survey_smiley_row {
	margin-top: 5px;
	min-width: 162px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

@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: 1.0357rem;
}