﻿/*
app_survey_201810.css
17:15 2018-10-09 rewrite-d
12:08 2018-10-10 flag version
16:59 2018-10-16 update for colleague comment
11:40 2018-12-21 for zoom 80%
11:38 2019-01-25 Add USSActionButton
9:04 2019-02-01 moveUSS Button to layout_append.css
*/


/* make font family same */
:lang(en) #govhk_survey_pop  {
  font-family: Arial, sans-serif; }


/* Mockup the Feature Article font size */  






.top_8vh {
	top: 8vh;
}

.bottom_1vh {
	bottom: 1vh;
}

#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 */
	
	
	right:0px;
	
	
	/* 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; */
	
}

/* 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;
}

/* 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; */
	

	
}



#govhk_survey_qa_panel_1 {
	display:block;
	float: right;
	clear:none;

	width: 94vw;
	min-width: 260px;
	max-width: 360px;
	
	background-image: url("/images/survey/eServiceSurveyBackGround.svg");
  	background-repeat: no-repeat;
  	background-size: auto 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%;
	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: 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;
}

.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;
}
*/

.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: 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;
}

.color_text_900404 {
	color: #900404;
}

.color_text_0c00EB {
	color: #0c00EB;
}

.color_text_004D00 {
	color: #004D00;
}

#govhk_survey_list_panel li{
	margin-bottom: 20px;
}

#govhk_survey_question_front {
	margin-bottom: 15px;
}

.survey_smiley_row {
	margin-top: 5px;
	min-width: 162px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

@media (min-width: 400px) {
	.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;
}

.cursorPointer {
	cursor: pointer;
}

.cursorProgress {
	cursor: progress;
}

