/*
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
*/


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


#govhk_survey_pop.govhk_survey_top_8vh {
	top: 8vh;
}

#govhk_survey_pop.govhk_survey_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 */
	
	/* 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 {
	background-image: url("images/flag_triangle.svg");
  	background-repeat: no-repeat;	
}

#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"); */
	background-image: url("images/eServiceSurveyBackGround.svg?20190826b");
	
	background-repeat: no-repeat;
	/* 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;	
	
	
	
}

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

}

#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: 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 {
	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; 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;
}

.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: 14.5px;
}