/*==================================================
										formulaire
									20151203 Gabby
					＊會員&表單&問卷模組 輸入欄位樣式

   改用.forms.formulaire 才能到處用 carrie 20151210
==================================================*/

/* BASE */
.forms.formulaire { position: relative; margin-bottom: 0; }
.forms.formulaire > li { 
	margin-bottom: 25px;
	padding-bottom: 0; 
}
.forms.formulaire > li.heighter { padding-top:10px; }
.forms.formulaire > li.heighter.first { padding-top:18px; }
.forms.formulaire > li:last-child { margin-bottom: 0px; }
.formulaireColumn { clear: both; }

/* title */
.forms.formulaire .title {
	margin-top: 12px;
	position: relative;
}
.forms.formulaire .title:before {
	content: '';
	display: block;
	width: 30px;
	height: 2px;
	background-color: #000;
	position: absolute;
	top: -12px;
}

/* answer */
.formulaireAnswer { color:#00A0EA; }
.formulaireAnswer.fill { margin:0 5px;}
.formulaireAnswer.inline { 
	display: inline-block; 
	vertical-align: bottom; 
	border-bottom: 1px solid #00A0EA;
}
.formulaireAnswer.picture div {
	display: inline-block;
	vertical-align: top;
	width: 32%;
	margin-right: 1%;
}
.formulaireAnswer.picture div:last-child {
	margin-right: 0;
}

.forms.formulaire .formulaireAnswer .title { margin-top: 0;}
.formulaireAnswer .list li { border-left: none; padding-left: 0; margin-top: 10px;}

/*說明文字*/
.forms.formulaire p {
	margin-bottom: 20px;
	line-height: 1.5;
}
.forms.formulaire .openQ { margin-left: 0;}
.forms.formulaire .alert i ~ .openQ { margin-left: 3px;}

/*放欄位跟提示文字*/
.formulaireContent { width: 100%; }
.select-title ~ .formulaireContent { margin-top:5px; }
.formulaireContent > .w-410 { width: 410px; float: left; }
.formulaireContent > .w-245 { width: 245px; float: left; }
.formulaireContent > .w-160 { width: 160px; margin-right: 90px; float: left; }
.formulaireContent > .w-160:nth-child(2n) { margin-right: 0px; }
.formulaireContent > .w-180 { width: 180px; margin-right: 50px; float: left; }
.formulaireContent > .w-180:nth-child(2n) { margin-right: 0px; }
.formulaireContent > .four { width: 25%; float: left; }

.formulaireContent.msgGetWay .select-title { width:100px; }
.formulaireContent.msgGetWay .inlineColumn { width:560px; }

/*說明圖片*/
.formulaireImage { width: 400px; margin-left: 20px; float: right; }
.formulaireImage ~ .formulaireContent { max-width: 550px; float: left; }

/*提示文字*/
.forms.formulaire .alert {
	border:none;
	background-color:transparent;
	color:#888888;
	padding: 4px 3px 5px;
	margin: 0 0 0 10px;
}

/* 預覽畫面 */
.formulairePreview,
.formulairePreview label,
.formulairePreview .select-title { font-size: 1.2rem; font-size: 12px; }
.formulairePreview .forms.formulaire p { margin-bottom: 10px;}
.formulairePreview .inlineColumn.half.name { width: 30%; margin-right: 0.5%;}

/* 放下面的按鈕 */
.formulaireBtn {
	width: 100%;
    padding: 25px 0px 22px;
    position: relative;
    left: 0px;
    clear: both;
    border-top: 1px solid #cccccc;
}

.btn-step { padding-left: 0; padding-right: 0; }
.btn-step:link { color:#999999; }
.btn-step:visited { color:#999999; }
.btn-step:hover { color:#333333; }
.btn-step:active { color:#333333; }
.btn-step > i { font-size: 40px; font-size: 4rem; vertical-align: middle; margin-right: 10px; }
.btn-step.right > i { margin-left: 10px; }
.btn-step.next, .btn-blue.send { float: right; }
.btn-blue.send { margin-top: 8px; }
.formulaire .captcha {
    position: absolute;
    top: 15px;
    right: 160px;
}

/*隱私權聲明*/
.forms.formulaire > li.agree { padding-top: 20px; }
/*checkbox*/
.agree label { font-size:16px; font-size:1.6rem; margin-right:8px; } 
.agree label:active div.checker span:after {
	opacity: 1;
  	
  	-webkit-transform: scale(1);
  	-moz-transform: scale(1);
  	-ms-transform: scale(1);
  	-o-transform: scale(1);
 	transform: scale(1);

 	-webkit-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	-moz-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	-ms-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	-o-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
} 
.agree div.checker {
	width: auto;
	height: auto;
	margin-right: 5px;
} 
.agree div.checker span {
	background:rgba(255,255,255,0.7);
	height:24px;
	width: 24px;
	border:2px solid #cccccc;
	border-radius: 6px;
	display: block;

	-webkit-transition:all 0.3s ease-in-out;
       -moz-transition:all 0.3s ease-in-out;
         -o-transition:all 0.3s ease-in-out;
            transition:all 0.3s ease-in-out;
} 
.agree div.checker span:after {
	content: '';
	width: 200px;
  	height: 200px;
  	display: block;
  	position: absolute;
  	left:50%;
  	top:50%;
  	margin-left:-100px;
  	margin-top:-100px;
  	opacity: 0;
  	border-radius: 100%;
  	background:rgba(255,255,255,0.3);
  	z-index: -1;

  	-ms-filter: none;
  	filter: none;

  	-webkit-transform: scale(0);
  	-moz-transform: scale(0);
  	-ms-transform: scale(0);
  	-o-transform: scale(0);
  	transform: scale(0);

	-webkit-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	-moz-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	-ms-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	-o-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
}
.agree div.checker input { cursor: pointer; width: 24px; height: 24px; }
.agree .checker input:focus { outline: 0; }
.agree .checker { vertical-align: bottom; }
/*滑鼠按下瞬間的效果*/ 
.agree div.checker:active span, 
.agree div.checker.active span {
	background: #00A0EA;
	border-color:#00A0EA;
}
.agree div.checker:active span:after, 
.agree div.checker.active span:after {
	opacity: 1;

	-webkit-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	-moz-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	-ms-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	-o-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
  	
  	-webkit-transform: scale(1);
  	-moz-transform: scale(1);
  	-ms-transform: scale(1);
  	-o-transform: scale(1);
 	transform: scale(1);
}
/*滑鼠移動到checkbox框上的效果*/
.agree label.focus div.checker span,
.agree label:hover div.checker span,
.agree div.checker.focus span,
.agree div.checker:hover span {
	border-color:#00A0EA;
}
.agree div.checker.focus:active span, .agree div.checker:active:hover span,
.agree div.checker.active:hover span, .agree div.checker.focus.active span {
	background: #00A0EA;
	border-color:#00A0EA;
} 
.agree div.checker span.checked {
	background: #00A0EA;
	border-color:#00A0EA;
} 
.agree div.checker span.checked:before {
	/*font-family: 'MaterialDesignIcons'; 20160328 換成Ionicons Gabby*/
	font-family: 'Ionicons';
	color: #ffffff;
	content: "\f122";
	position: absolute;
	top: 3px;
	left: 4px;
	font-size: 24px;
	font-size: 2.4rem;
	line-height: 24px;
}
.agree div.checker:active span.checked, 
.agree div.checker.active span.checked {
	background: #00A0EA;
	border-color:#00A0EA;
}
.agree div.checker.focus span.checked,
.agree div.checker:hover span.checked {
	background: #00A0EA;
	border-color:#00A0EA;
}
.agree div.checker.focus:active span.checked,
.agree div.checker:hover:active span.checked,
.agree div.checker.active:hover span.checked,
.agree div.checker.active.focus span.checked {
	background: #00A0EA;
	border-color:#00A0EA;
}
.agree div.checker.disabled span,
.agree div.checker.disabled:active span,
.agree div.checker.disabled.active span {
	background: #dedede;
	border-color:#dedede;
}
.agree div.checker.disabled span.checked,
.agree div.checker.disabled:active span.checked,
.agree div.checker.disabled.active span.checked {
	background: #dedede;
	border-color:#dedede;
}

/*下一頁的分隔*/
.nextPage {
	margin: 40px 0;
	text-align: center;
	color: #666666;
	position: relative;
}
.nextPage span {
	position: relative;
	z-index: 2;
	padding: 0 5px;
	background-color: rgba(255,255,255,0.6);
}
.nextPage:before {
	content: '';
	background:url(
		data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAJnzpz5zwjjgzgmJiaMYAEYB8RmROaABAD4hQ9o0iqJkwAAAABJRU5ErkJggg==
	) repeat;
	width: 100%;
	height: 6px;
	position: absolute;
	top: 50%;
	margin-top: -4px;
	left: 0px;
	z-index: 1;
}


/*選擇評分*/
.symbol {
  display: inline-block;
  border-radius: 50%;
  border: 5px double white;
  width: 30px;
  height: 30px;
}
.symbol-empty {
  background-color: #ccc;
}
.symbol-filled {
  background-color: black;
}
.rating-symbol {
	padding-left: 2px;
}
.rating-symbol:first-child {}
 
/*分節線*/
.hr-border {
	border-bottom: 1px solid #cccccc;
	margin:40px 0 10px;
	width: 100%;
}
.hr-border.dotted { border-style: dotted;}
.hr-border.double { border-style: double; border-bottom-width:4px;}
.hr-border.dashed { border-style: dashed;}

/*前台不顯示 20160330 Gabby新增*/
.invisible { text-align: center; }
.invisible::after {
		content: '';
    display: block;
    background: rgba(0,0,0,0.2);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 498;
    top: 0;
    left: 0;
    overflow: visible;
    visibility: visible;
}
.invisible::before {
		font-family: 'MaterialDesignIcons'; 
		content: "\F209";
    color: #ffffff;
    position: absolute;
    z-index: 499;/*小於adminbox*/
    font-size: 40px;
		font-size: 4rem;
		top:50%;
		transform:translateY(-50%);
		-webkit-transform:translateY(-50%);
		-moz-transform:translateY(-50%);
		-ms-transform:translateY(-50%);
		-o-transform:translateY(-50%);
}
/*前台不顯示 20160330 Gabby END*/

/* 新增檔案樣式 20160416 Gabby */
.forms.formulaire .list li > span.title { margin-top:0; } 
/* 新增檔案樣式 20160416 Gabby END */
/**/



@media screen and (max-width : 680px) {
	/*媒體*/
	#divAppellation > label {
		float: left;
		margin-bottom: 10px;
	}
	#divAppellation > label:nth-child(5) {
		clear: both;
	}
	#divAppellation div.polymer-form.inline { float: left; }
	.formulaireContent.msgGetWay .inlineColumn { width: 100% !important; }
	.formulaireContent > .w-410 { width: 100% !important; }
	.formulaireContent > .w-245 { width: 100% !important; }
	.formulaireContent > .w-160 {
		width: 100% !important;
		margin-right: 0;
	}
	.formulaireContent > .w-160:nth-child(2n) {
		margin-top: 25px;
	}
	.formulaireContent.msgGetWay {
		padding-top: 15px;
	}
	.formulaireContent.msgGetWay .select-title {
		width: 100%;
	}
}