/* 
feedback.css
9:54 2017-11-07 store feedback parts only 
11:12 2017-11-30 button hover
9:02 2017-12-15 en require more spacing between image and smile on mobile view
15:27 2018-02-15 fix for /en/theme/mygovhk/
15:13 2018-06-13 shrink to smiley bar width only
14:14 2018-07-25 update for text and notice, placeholder
11:31 2019-06-19 change for agile approach
11:56 2019-10-31 ER feedback on homepage
14:59 2019-11-28 for new message
09:27 2020-05-19 Align All Pages of feedback text to Arial for English
10:16 2020-10-22 fix desktop chrome feedback text drop down
15:32 2021-04-09 change all image texts to texts
15:37 2021-04-13 adjust for thankyou EN only
15:01 2021-04-20 CAUTION: valign middle for all stuff in giveFeedback2, remove chrome only valign stuff
*/ 

.bottomBar {
	position: relative;
	
	
	/* 15:25 2018-02-15 fix for /en/theme/mygovhk/  */
	display:block;
	float:left;
	clear:both;
	
	/* 14:48 2018-06-13 */
	width:100%;
}

/* #feedbackFormWrapper {
	width:70%;
} */


/* === lastRevision === */
body.innerPage .bottomBar .lastRevision {
	/* float:none; */
	/* vertical-align:bottom; */	
	
	/*
	display:inline-block;	
	float:none; 
	height:100%;
	margin-top:auto;
	*/

  position: absolute;
  bottom: 0;
  right: 0;	
	
}
 
/*  mobile view - change back to block  */
 @media screen and (max-width: 767px) {
	body.innerPage .bottomBar .lastRevision {
		margin-top:20px;
		position: relative;
		display:block;
		clear:both;
		
		/* 15:13 2018-06-13 from none to right */
		float:right;
		
		
	}
}


/* 14:45 2017-11-30 OBSOLETE: lastRevision old code for vertical-align middle (may not work)
body.innerPage .bottomBar .lastRevision {	
 	margin-top:0;
	position: absolute;
	right:0;
	top: 50%;
	transform: translateY(-50%); 
}

@media screen and (max-width: 1200px) {
	body.innerPage .bottomBar .lastRevision {
		margin-top: 0px;
	}
}

 mobile view - change back to block 
@media screen and (max-width: 767px) {
	body.innerPage .bottomBar .lastRevision {
		position: relative;
		top:0;
		transform: none;
		margin:20px 0 10px 0;
	}
}
*/

/* 10:44 2017-11-30 for fix copyright page that lastRevision disappear */
body.innerPage .innerPageWrapper .blockDetailHolder {
    width: 100%;
    float:none;
}



/* === feedbackFormWrapper === */
#feedbackFormWrapper {

	/*
	display:inline-block;
	float: left;
	position: relative;  */

	/* display:inline-block;  */
	
	/* 14:42 2018-06-13 old: width 70% for desktop or tablet 
	display:block;
	width:70%; */
	
	/* 14:42 2018-06-13 now expand as first element width (smiley bar) */
	display:block;
	float:left;
	
	width:500px;
	/* 15:39 2018-07-20 hardcode the width to 500px */
	
}

/* 15:00 2021-04-13 make "thank you" longer, EN only */
:lang(en) #feedbackFormWrapper.thankyou {
	width:600px;	
}


/* 15:35 2021-04-13 move here (for TC and SC)  */
@media screen and (max-width: 500px) {

	/* width 100% for mobile */
	/* 14:52 2018-06-13 now not 100%, remark 	*/
	/* 15:39 2018-07-20 width is 100% if less than hardcode value */
	
	#feedbackFormWrapper {
		width:100%;
	}

}

/* 15:36 2021-04-13 add for fix EN small screen (600px) */
@media screen and (max-width: 600px) {
	
	/* 15:36 2021-04-13 fix EN small screen */
	:lang(en) #feedbackFormWrapper.thankyou {
		width:100%;
	}
	
}


/* 17:14 2018-07-20 red link */
#feedbackFormWrapper a,
#feedbackFormWrapper a span {
	color: #951717; /* red link */
}	

/* 09:27 2020-05-19 Align All Pages of feedback text to Arial for English */
:lang(en) #feedbackFormWrapper a,
:lang(en) #feedbackFormWrapper a span {
	font-family: Arial, sans-serif;	
}


/* 15:39 2018-07-20 width is 100% of container (#feedbackFormWrapper)  */
.giveFeedback2,
.giveFeedback3,
.giveFeedback4 {
	width:100%;
}
	


/* === giveFeedback2 === */
.giveFeedback2 {
	background-color: #fff;
	display:inline-block;
	/* height:50px; */
	padding:10px 25px; 
	/* pad left 25px to align article */
}

.giveFeedback2 * {
	/* for "face" align */
	display:inline-block;
	
	/* 14:32 2021-04-20 CAUTION: valign middele for all stuff in giveFeedback2 */
	vertical-align:middle;
}

.giveFeedback2 img {
	vertical-align:middle; /* Image is full height and TEXT middle */
}

/* 10:25 2019-07-09 as server may strip the space, HTML now no space between input and label, and so make space before label */
.giveFeedback2 .feedback2Answer label {
	margin-left:4px;
}


/* 9:02 2017-12-15 en require more spacing between image and smile on mobile view */ 
:lang(en) .giveFeedback2 img {
	padding:2px 0;
}

/* 09:50 2020-10-22 add to fix google chrome display, but firefox bad */
/* 15:00 2021-04-20 remark, should not need now
body.chrome .giveFeedback2 .feedback2Question img {
	display:block;
}
*/

/* ===== 13:45 2021-04-08 added due to change img to text ===== */
/* 14:12 2021-04-08 try add one more SPAN tag to wrap text, but looks more ugly */
.giveFeedback2 .feedback2Question {
	display:inline-block;
	font-size: 18px;
	font-weight: bold;
}

/* 14:53 2021-04-08 font for EN */
:lang(en) .giveFeedback2 .feedback2Question { 
	font-family: Arial, "Montserrat",  sans-serif; 
}
/* 14:53 2021-04-08 font for TC and SC (chrome and firefox) */
:lang(zh-hk) .giveFeedback2 .feedback2Question,
:lang(zh-cn) .giveFeedback2 .feedback2Question { 
	font-family: "Microsoft JhengHei", 微軟正黑體, "Arial", sans-serif; 
	/* 14:52 2021-04-20 no need now: padding-top:4px;	  */
}


/* 15:00 2021-04-20 remark
/+ esp for chrome +/
body.chrome .giveFeedback2 .feedback2Question  {
	/+ 14:47 2021-04-20 change to middle +/
	vertical-align: middle;
	/+ vertical-align: super; +/
}
*/

/* ===== 13:45 2021-04-08 added due to change img to text: end ===== */


body.innerPage .giveFeedback2  input[type="radio"] {
	margin:0 0 0 10px;
	vertical-align:middle;
	/* Note: padding is no-use */
}

/* === giveFeedback3,4 === */
.giveFeedback3,
.giveFeedback4 {
	
	background-color: #fff;
	
	/* display:inline-block;  */
	display:none; /* 17:18 2017-11-21 hide first, javascript show is "inline-block" */
	
	/* height:50px; */
	padding:10px 25px; 
	/* pad left 25px to align article */
}

/* === 15:15 2021-04-09 added for change from Image to text === */
.feedbackBoldText {
	font-size: 18px;
	font-weight: bold;	
}

/* 14:53 2021-04-08 font for EN */
:lang(en) .feedbackBoldText { 
	font-family: Arial, "Montserrat",  sans-serif; 
}
/* 14:53 2021-04-08 font for TC and SC (chrome and firefox) */
:lang(zh-hk) .feedbackBoldText,
:lang(zh-cn) .feedbackBoldText { 
	font-family: "Microsoft JhengHei", 微軟正黑體, "Arial", sans-serif; 
}	

/* 15:25 2021-04-09 make desktop fit one line */
/* 15:25 2021-04-09 change from 16 to 18px */
#feedback4Matter.feedbackBoldText { 
	/* font-size: 16px;  */
	font-size: 18px;
	
}

/* === 15:15 2021-04-09 added for change from Image to text:end === */	


/* on giveFeedback3 */
.feedbackAlertMessage {
	display:block;
	float:left;
	clear:both;
	color:red;
}

/* 15:23 2018-07-20 for Notice */
.feedbackNoticeMessage {
	display:inline-block;
	width:auto;
	color:blue;
	padding-bottom:10px;
} 

/* 14:59 2019-11-28 for new message (use ID as class not have CSS priority) */
#feedback3NoticeMessage strong {
	font-weight:bold;
}

/* on feedback3and4 */
.feedbackImageText {
	/* display:inline-block; */
	padding:0 0 5px 0;
}

#feedback3Answer { 
	display:block;
	float:left;
	clear:both;
	width:100%;
	border: 1px solid #000;
	/* spacing with "Your feedback" and "Submit" Button */
	margin:5px 0 15px 0; 
	
}

/* 11:31 2019-06-19 change for agile approach */
.feedback3Buttons {
	margin-bottom:10px;
}


.feedback3Buttons input{
    background-color: #cc4c02;
    color: #FFF;
    margin-right: 20px;
    padding: 5px 25px;
    border: 0;
    border-bottom: 2px solid #d34e00;
    cursor: pointer;
	min-width:90px;
    /* width: 126px; */
    -webkit-transition: background 0.3s ease-in-out, border 0.3s ease-in-out, color 0.3s ease-in-out;
            transition: background 0.3s ease-in-out, border 0.3s ease-in-out, color 0.3s ease-in-out; 
}

/* squeeze last bit to make 2 buttons in horizontal line */
.feedback3Buttons input:last-child{
	margin-right:0;
}

/* 11:11 2017-11-30 button hover from QnA */
.feedback3Buttons input:hover{
	background-color: #fff;
    color: #cc4c02;
    border-color: #cc4c02;
}


/* 16:43 2018-06-26 placeholder */
#feedbackForm 	:placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #505050;
    opacity: 1; /* Firefox */
	 
}

/* 14:13 2018-07-25 CAUTION: workaround for Mac-Safari and iPhone, when the text is clear, placeholder will NOT display. 
   placeholder will display when text is empty and LEAVE focus (click other place).
*/
#feedbackForm 	:placeholder-shown {
	border:1px solid black;
}

#feedbackForm 	:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #505050;
}

#feedbackForm 	::-ms-input-placeholder { /* Microsoft Edge */
    color: #505050;
}

/* 11:51 2019-10-31 ER */
body.homePage #feedbackFormWrapper {
	display:none;
}