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






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

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

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

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

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

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




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



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

.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;
}