﻿

body{
	font-family: "Microsoft JhengHei",PMingLiU,MingLiu,"Helvetica",Garuda,Arial,sans-serif !important;
	background-color: #fafafa !important;
    /*overflow-x: hidden;*/
    font-size: 13px;
    margin: 0 !important;
    padding: 50px 0px 0px 0px !important;
    /*min-width: 1024px; */
}

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}




/*--------------------------------------------------------------
	覆寫 UI 樣式
--------------------------------------------------------------*/

*{
	-webkit-border-radius: 0px !important;
	-moz-border-radius: 0px !important;
	border-radius: 0px !important;
}
.dropdown-menu{
	font-size: 13px;	
}
.fui-triangle-up, .fui-triangle-up-small, .fui-triangle-right-large, .fui-triangle-left-large, .fui-triangle-down, .fui-info, .fui-alert, .fui-question, .fui-window, .fui-windows, .fui-arrow-right, .fui-arrow-left, .fui-loop, .fui-cmd, .fui-mic, .fui-triangle-down-small, .fui-check-inverted, .fui-heart, .fui-location, .fui-plus, .fui-check, .fui-cross, .fui-list, .fui-new, .fui-video, .fui-photo, .fui-volume, .fui-time, .fui-eye, .fui-chat, .fui-home, .fui-upload, .fui-search, .fui-user, .fui-mail, .fui-lock, .fui-power, .fui-star, .fui-calendar, .fui-gear, .fui-book, .fui-exit, .fui-trash, .fui-folder, .fui-bubble, .fui-cross-inverted, .fui-plus-inverted, .fui-export, .fui-radio-unchecked, .fui-radio-checked, .fui-checkbox-unchecked, .fui-checkbox-checked, .fui-flat, .fui-calendar-solid, .fui-star-2, .fui-credit-card, .fui-clip, .fui-link, .fui-pause, .fui-play, .fui-tag, .fui-document, .fui-image, .fui-facebook, .fui-youtube, .fui-vimeo, .fui-twitter, .fui-stumbleupon, .fui-spotify, .fui-skype, .fui-pinterest, .fui-path, .fui-myspace, .fui-linkedin, .fui-googleplus, .fui-dribbble, .fui-blogger, .fui-behance, .fui-list-thumbnailed, .fui-list-small-thumbnails, .fui-list-numbered, .fui-list-large-thumbnails, .fui-list-columned, .fui-list-bulleted{

	margin:0px 5px 0px 0px;
	font-size: 12px;
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus{
	background-color: #333333;

}
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #333;
}
.nav > li > a.none-active {
       pointer-events: none;
       cursor: default;
}
.nav > li > ul > li > a.none-active {
       pointer-events: none;
       cursor: default;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  background-color: transparent !important;

}
.dropdown-menu{
	margin-top: 15px;
}
.open > .dropdown-menu {
  margin-top: 6px !important;
  opacity: 1;
  visibility: visible;
}
.dropdown-menu{
	border: 1px solid #ddd;

}

.breadcrumb{

	background-color: #f7f7f7;
	font-size: 13px;

}
.breadcrumb a{
	color: #888;
	font-weight: normal;

}
.breadcrumb .active > a {
    color: #aaa;
    cursor:pointer;
}
a:hover,
a:focus {
  color: #1abc9c;
  text-decoration: none;
}



.btn.btn-default:hover,
.btn.btn-default:active{
 	background-color: #1abc9c;
    color: #ffffff;
}


.form-horizontal .control-label{
	text-align:inherit;
}
.checkbox .icons .first-icon, .radio .icons .first-icon, .checkbox .icons .second-icon, .radio .icons .second-icon{
	font-size: 20px;
}

.select .dropdown-arrow{
	display: none;
}

.tab-content{
	border:none;
	border-top: 2px solid #ddd;
}

.checkbox.disabled.checked .second-icon, .radio.disabled.checked .second-icon {
  color: #999;
  opacity: 1;
}
.table-bordered > thead > tr th, .table-bordered > tbody > tr th, .table-bordered > tfoot > tr th, .table-bordered > thead > tr td, .table-bordered > tbody > tr td, .table-bordered > tfoot > tr td{
	padding: 8px;
}


.table-bordered > tbody > tr td .checkbox,
.table-bordered > tbody > tr td  .table .radio{
	margin: 0px;
}

.form-control[disabled], 
.form-control[readonly], 
fieldset[disabled] .form-control {	
	color: #000;
	background-color: #ddd;
}

/*
.form-control:-moz-placeholder {color: #000;}
.form-control::-moz-placeholder {color: #000;opacity: 1;}
.form-control:-ms-input-placeholder {color: #000;}
.form-control::-webkit-input-placeholder {color: #000;}
.form-control.placeholder {color: #000;}
*/

.form-control{
	font-size: 13px;	
}

.table-responsive{
	overflow-x: auto;
}

.table .checkbox, .table .radio{
	margin: 0px;
	padding-left: 23px;
}




/*--------------------------------------------------------------
	通用
--------------------------------------------------------------*/
.none{
	display: none;
	visibility: hidden;
}
.height_zero{
	height: 0px !important;
}

.clear-margin{
	margin: 0px !important;
}
.clear-padding{
	padding: 0px !important;
}
.error{
	color: #e74c3c !important;
}


input[type="text"].text-danger:disabled{
	
}

.form-control.text-primary ,
.form-control[disabled].text-primary , 
.form-control[readonly].text-primary , 
fieldset[disabled] .form-control.text-primary{
	color:#077d65;
}

.form-control.text-info ,
.form-control[disabled].text-info , 
.form-control[readonly].text-info , 
fieldset[disabled] .form-control.text-info{
	color:#0066ff;;
}

.form-control.text-warning  ,
.form-control[disabled].text-warning  , 
.form-control[readonly].text-warning  , 
fieldset[disabled] .form-control.text-warning {
	color:#ff3300;
}

.form-control.text-danger,
.form-control[disabled].text-danger, 
.form-control[readonly].text-danger, 
fieldset[disabled] .form-control.text-danger{
	color: #f00000 !important;
}

/*----------------------------------------------------*/
body.login{
	background-image: url("../images/loginBg.jpg");
	background-repeat:repeat;
	background-position: center top;
}
    body.login.app,
    body.Orderlogin.app {
        margin:0 !important;
        padding:0 !important;
    }

body.Orderlogin{
	background-image: url("../images/OrderloginBg.jpg");
	background-repeat:repeat;
	background-position: center top;
}
.loginWrapper{
	width: 358px;
	margin: 0px auto;
	display: block;
}

.loginWrapper .logo{
	background-image: url("../images/application_logo.png");
	background-position: center;
	background-repeat: no-repeat;
	width: 358px;
	height: 100px;
	display: block;
	margin: 38px 0px 41px;
}
.joinTitle{}
.joinTitle h6{
	text-align: center;
}

.loginWrapper.join .logo{
	margin-bottom: 20px;
}
.loginWrapper.join .logo a{
	width:100%;
	height: 100%;
	display: block;
}

.loginWrapper.join .loginInfo{
	padding-left: 0px;
	padding-right: 0px;
}
.tmsTry .tooltip{
	display: none;
}

.tmsTry .form-group.col-md-12{}


.tmsTry .form-group.col-md-12 .input-group-addon{
	width: 110px;
	text-align:right;
}

.tmsTry .form-group.col-md-12.has-error .input-group-addon{
	color: #fff !important;
	background-color: #bdc3c7 !important;
}
.tmsTry .has-error .input-group-addon{
	color: #fff !important;
	background-color: #bdc3c7 !important;
	border-color: #bdc3c7;
}
.tmsTry .has-feedback .form-control-feedback{
	top: 4px;
	color: #1abc9c;
}

.tmsTry .has-feedback .form-control-feedback.glyphicon-remove{
	color: #e74c3c;

}

.tmsTry .panel{
	background:none;
	background-image: url("/images/loginAlpahBg.png");
	border:none;
}

.demoAccount{
	width: 100%;
	margin: 6px 0px;
	background-image: url("/images/loginAlpahBg.png");
	text-align: center;
	color: #f00;
	font-size: 14px;
}

.joinTxt{	
	background-image: url("/images/loginAlpahBg.png");
	text-align: center;
	color: #000;	
	margin-bottom: 10px;	
}
.joinTxt p{
	font-size: 14px;

}

.input-group-addon{
	font-size: 13px !important;
}




@media (max-width: 767px) {

.dateGap {
	display: none;


}


}

/* Small devices (tablets, 768px and up) */
@media screen and (max-width: 767px) { 
 .pageContent .container-fluid:first-child {
  width: 100% !important;
 }
}

/* Medium devices (desktops, 992px and up) */
@media screen and (max-width: 992px) { 
 .pageContent .container-fluid:first-child {
  width: 100% !important; 
 }
}

/* Large devices (large desktops, 1200px and up) */
@media screen and (max-width: 1200px) { 
 .pageContent .container-fluid:first-child {
  width: 100% !important; 
 }

}


 @media screen and (min-width: 1040px) { 
/*-------------------------------------------*/

	.mainContent .container{
		width: 916px !important;
		float: left !important;	
	}

 	.pageContent .formInputList{
 		
 	}
	.formInputList .form-group {
	    margin-bottom: 1px !important;
	}

 	.pageContent .formInputList .col-lg-12{
 		display: block;
 		margin: 0px 0px 10px 0px;
 		padding: 0px;
 		width: 100%;
 		height: auto; 	
 	}
	.pageContent .formInputList .col-lg-12 input[type="submit"].btn{
		border: none !important;
	}
 	
 	.pageContent .formInputList .col-lg-4,
 	.pageContent .formInputList .col-lg-6{
 		display: block;
 		margin: 0px 0px 10px 0px;
 		padding: 0px; 		
 		height: auto; 
 		float: left		
 	}



 	.pageContent .formInputList .form-group label{
 		margin: 0px;
 		padding: 0px;
 		line-height: 24px;

 	}
 	.pageContent .formInputList .form-group label.inputLabelName,
 	.pageContent .formInputList .form-group span.inputLabelName{
 		float: left;
 		display: inline-block;
 		width: 120px;
 		margin: 0px;
 		padding: 0px;
 		line-height: 24px;
 		text-align: right; 		
 	}
	.pageContent .formInputList .form-group label.inputLabelName.full{
		width: 100%;
		text-align: left;
	}

	/*給備註使用*/
	.pageContent .formInputList .form-group .col-sm-12.remark{
		width: 100% !important;
	}
	.pageContent .formInputList .form-group .col-sm-1{
		 width: 8.33333%;
	}
	.pageContent .formInputList .form-group .col-sm-2{
		width: 16.6667%;
		line-height: auto;
	}
	.pageContent .formInputList .form-group .col-lg-3, 
	.pageContent .formInputList .form-group .col-sm-3{
		width: 25% !important;
	}
	.pageContent .formInputList .form-group .col-sm-4{		
		width: calc(33.3333% - 120px);
		float: left;
		display: block !important;
	}



	.pageContent .formInputList .form-group .col-sm-5{
		width: 41.6667%;
	}
	.pageContent .formInputList .form-group .col-sm-6{
		width: 50%;
	}
	.pageContent .formInputList .form-group .col-sm-7{
		width: calc(58.3333% - 120px);
		float: left;
		display: block !important;
	}
	.pageContent .formInputList .form-group .col-sm-8{
		width: 66.6667%;
	}
	.pageContent .formInputList .form-group .col-sm-9{
		width: calc(75% - 120px);
		float: left;
		display: block !important;
	}
	.pageContent .formInputList .form-group .col-sm-10{
		 width: 83.3333%;
	}
	.pageContent .formInputList .form-group .col-sm-11{
		width: 91.6667%;
	}
	.pageContent .formInputList .form-group .col-sm-12{
		width: calc(100% - 120px);
		float: left;
		display: block !important;
	}

	.pageContent .formInputList .form-group .col-sm-12.full{
		width: 100% !important;
	}

	.pageContent .formInputList .form-group.text-space-20 {		
	}
	.pageContent .formInputList .form-group.text-space-20 label.inputLabelName{
		width: 140px;
	}
	.pageContent .formInputList .form-group.text-space-20 .col-sm-12{
		width: calc(100% - 140px);
	}
	.pageContent .formInputList .form-group [class*="col-"]{
		line-height: 1;
	}
	.pageContent .formInputList .form-group .prodImg{
		width: 90px;
		height: 90px;
		display: block;
	}
	.pageContent .formInputList .form-group .prodImg img{
		width: 90px;
		height: 90px;


	}


	.pageContent .formInputList .form-group .col-sm-1 input,
	.pageContent .formInputList .form-group .col-sm-2 input,
	.pageContent .formInputList .form-group .col-sm-3 input,
	.pageContent .formInputList .form-group .col-sm-4 input,
	.pageContent .formInputList .form-group .col-sm-5 input,
	.pageContent .formInputList .form-group .col-sm-6 input,
	.pageContent .formInputList .form-group .col-sm-7 input,
	.pageContent .formInputList .form-group .col-sm-8 input,
	.pageContent .formInputList .form-group .col-sm-9 input,
	.pageContent .formInputList .form-group .col-sm-10 input,
	.pageContent .formInputList .form-group .col-sm-11 input,
	.pageContent .formInputList .form-group .col-sm-12 input{
	 	padding:0px 3px; 
	 	margin:0px;
	 	border:1px solid #999 !important;	 	
	 	height:23px;	
	 	width: 100%;
	 	line-height: 23px;
	 	vertical-align: middle; 	
 	}
 	.pageContent .formInputList .form-group .col-sm-12 textarea{
	 	padding:0px 3px; 
	 	margin:0px;
	 	border:1px solid #999 !important;
	 	
	 	width: 100%;
	 	line-height: auto; 	
 	}
 	.pageContent .formInputList .form-group .col-sm-12 select{
 		width:100%;

 	}


	.btn-default:focus,
	.input-group-btn .btn-default:focus{
		background-color: #1abc9c;
	    color: #ffffff;
	}


	.pageContent .formInputList .form-group .col-sm-1 input:focus,
	.pageContent .formInputList .form-group .col-sm-2 input:focus,
	.pageContent .formInputList .form-group .col-sm-3 input:focus,
	.pageContent .formInputList .form-group .col-sm-4 input:focus,
	.pageContent .formInputList .form-group .col-sm-5 input:focus,
	.pageContent .formInputList .form-group .col-sm-6 input:focus,
	.pageContent .formInputList .form-group .col-sm-7 input:focus,
	.pageContent .formInputList .form-group .col-sm-8 input:focus,
	.pageContent .formInputList .form-group .col-sm-9 input:focus,
	.pageContent .formInputList .form-group .col-sm-10 input:focus,
	.pageContent .formInputList .form-group .col-sm-11 input:focus,
	.pageContent .formInputList .form-group .col-sm-12 input:focus,
	.pageContent .formInputList .form-group .col-sm-12 textarea:focus {
		border-color: #1abc9c !important;
		box-shadow: none;
		outline: 0 none;
}
 	.pageContent .formInputList .form-group .input-group-addon{
 		line-height: 23px;
 		border: 0px;
 		padding: 0px 3px;
 		margin: 0px;
 	}
 	.pageContent .formInputList .form-group .btn{
		padding: 0px 3px;
 	}

 	/* 內有 checkbox 使用*/
 	.formInputList .form-group .col-sm-12 input[type="checkbox"], 	
	label.cbox,
	label.cbox input[type="checkbox"]{ /*checkbox*/
		height: auto !important;
		vertical-align: middle;
		line-height: normal !important;
	}

	/*清除兩側*/
	.clearboth{
		clear: both;
	}

	.pageContent .formInputList .form-group .input-group-btn{
		
	}

		.pageContent .formInputList .input-group .input-group-btn .btn.btn-default{
			border:0px;
			padding:0px 4px;
			line-height: 23px;
			
		}
		.pageContent .formInputList .input-group .input-group-btn .btn.btn-default > [class^="fui-"]{
			top:-1px;
			font-size: 12px;
		}
				
	
.dropdown-menu [class*="fui-"]{
	font-size: 13px;	
}
.tooltip.top.custom{
	bottom:23px;
	right: 0px; 
	display: block;
}
.tooltip.top.custom .tooltip-inner{
	padding: 8px;
}

.tooltip-light.top.custom .tooltip-arrow {
    border-top-color: #e74c3c;
}

.tooltip.top.error .tooltip-inner{
	background-color: #e74c3c; 
	color: #ffffff;
}
.tooltip-light.top.error .tooltip-arrow{
	border-top-color: #e74c3c;	
}



 /*-------------------------------------------*/
}/* end @media screen and (min-width: 1200px) */


 
/*平版版本*/
 @media screen and (max-width: 990px) { 
 	body{
 		
 	}
 	div.table .row{
 		margin: 0px;
 	}
 }


 /*2016/07/25 max改成min導致浮動表頭寬度計算錯誤 */
 @media screen and (max-width: 480px) { 



 	.btn-block-xs {
    	white-space: normal;
	}
	.btn-block-xs {
    display: block;
    width: 100%;
    padding-right: 0;
    padding-left: 0;    
	}
	.input-group-addon {
 	   padding: 4px 12px;
	}

 	.dropdown-menu li a [class*="icon-"],
 	.dropdown-menu li a [class*="fui-"] {
    	display: none;
	}


	.mainContent.indent .SideMenu ul li.menuType{
		display: none;
	}
	.header .nav.navbar-right{
		margin:0px;
	}
	.breadcrumb a{
		line-height: 20px;
	}
	.formTable .form-group{
		height: auto;
	}
	.mobile-select-full select,
	.input-group select {
	    height: 23px;
	    line-height: 23px;
	    width: 100%;
	}
	textarea.form-control{
		height:100px;
	}
	.table .row.thead{
		display: none;
	}
	.table .row .col:before,
	.table .row .col .input-group .input-group-addon:before{
		content: attr(tdTitle) "";
	}
	.table .row .col:after,
	.table .row .col .input-group .input-group-addon:after{
		content: attr(tdTitle-after) "";
	}



	.pageContent .formInputList .input-group .input-group-btn .btn.btn-default {
    	border: 0px;
    	padding: 0px 4px;
    	line-height: 23px;    
	}

	.pageContent .formInputList .dataSearch.form-group .col-sm-12 .input-group input{
		padding:0px 3px; 
	 	margin:0px;
	 	border:1px solid #999 !important;	 	
	 	height:23px;	
	 	width: 100%;
	 	line-height: 23px;
	 	vertical-align: middle;
	 }

	.clear-padding-xs{
		padding: 0px !important;
	}
	.clear-margin-xs{
		margin: 0px !important;

	}

	.padding-ver-5-xs{
		padding: 5px 0px !important;
		display: inline-block;
	}

	.padding-ver-10-xs{
		padding: 10px 0px !important;
		display: inline-block;
	}
	.padding-ver-15-xs{
		padding: 15px 0px !important;
		display: inline-block;
	}

	.padding-ver-20-xs{
		padding: 20px 0px !important;
		display: inline-block;
	}

	.padding-hor-5-xs{
	padding: 0px 5px !important;
	display: inline-block;	
	}
	.padding-hor-10-xs{
		padding: 0px 10px !important;
		display: inline-block;	
	}
	.padding-hor-15-xs{
		padding: 0px 15px !important;
		display: inline-block;	
	}
	.padding-hor-20-xs{
		padding: 0px 20px !important;
		display: inline-block;	
	}
	.margin-ver-5-xs{
		margin: 5px 0px !important;
		display: inline-block;
	}

	.margin-ver-10-xs{
		margin: 10px 0px !important;
		display: inline-block;
	}
	.margin-ver-15-xs{
		margin: 15px 0px !important;
		display: inline-block;
	}

	.margin-ver-20-xs{
		margin: 20px 0px !important;
		display: inline-block;
	}


	.mobile-hide{
		display: none;
	}
	.mobile-inline{
		display: inline;
	}
	.mobile-block{
		display: block;
		width: 100%;
	}


	.clear-float-xs{
		float: none !important;
		clear: both;
	}
	.text-left-xs{
		text-align: left !important;
	}
	.text-right-xs{
		text-align: right !important;
	}
	.text-center-xs{
		text-align: center !important;
	}
	.input-group-addon.date{
		padding: 4px 6px;
	}

	.clear-both-xs{
		clear: both !important;
		float: none !important;
	}
	.clear-left-xs{
		clear: left !important;
	}
	.clear-right-xs{
		clear: right !important;
	}
	.pull-left-xs{
		float: left !important;
	}
	.pull-right-xs{
		float: right !important;
	}






 }