/* =Global
----------------------------------------------- */
/*
 * Orange: #f68a33;
 * Blue: #00508c;
 * Dark Blue: #005288;
 * Light Blue: #50a8e2;
 * Grey Blue: #8ab4cf;
 * Grey Blue 2: #6697b8;
 * Pale Blue: #e6f5ff;
 * Grey: #999;
 * Light Grey: #f0f0f0;
 * Body Font Color: #666;
 * Search Box Border Color: #ccc;
 */

/* Appearance Customization
---------------------------------------------------- */

.smart-forms,
.smart-forms .form-header h4,
.smart-forms label, 
.smart-forms input,
.smart-forms button,
.smart-forms select,  
.smart-forms textarea,
.smart-forms .input-hint,
.smart-forms .switch > .switch-label,
.smart-forms .rating label span,
.smart-forms .notification .close-btn,
.smart-forms .state-error + em,
.ui-datepicker,
.smart-forms .slider-tip,
.ui-autocomplete,
.smart-forms .price-box,
.smart-forms .ribbon-inner,
.tc #language-link a {
	font-family:  Arial, Helvetica, "微軟正黑體", "Microsoft JhengHei", sans-serif;
}

.tc .smart-forms,
.tc .smart-forms .form-header h4,
.tc .smart-forms label, 
.tc .smart-forms input,
.tc .smart-forms button,
.tc .smart-forms select,  
.tc .smart-forms textarea,
.tc .smart-forms .input-hint,
.tc .smart-forms .switch > .switch-label,
.tc .smart-forms .rating label span,
.tc .smart-forms .notification .close-btn,
.tc .smart-forms .state-error + em,
.tc .ui-datepicker,
.tc .smart-forms .slider-tip,
.tc .ui-autocomplete,
.tc .smart-forms .price-box,
.tc .smart-forms .ribbon-inner,
.en #language-link a {
	font-family:  "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
}

/* @form wrappers 
---------------------------------- */

.smart-container{	
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
}

/* @universal rules for all elements 
---------------------------------------------------- */
.smart-forms .button,
.smart-forms .tooltip,
.smart-forms .checkbox,  
.smart-forms .gui-input,
.smart-forms .notification,
.smart-forms .gui-textarea,
.smart-forms .select > select,
.smart-forms .select-multiple select,
.smart-forms input[type="button"].button,
.smart-forms input[type="submit"].button,
.smart-forms input[type="search"].gui-input{
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
	outline:none;
}

.smart-forms label.option {
    cursor: pointer;
}

/* @control border-size :: color etc for these elements 
----------------------------------------------------------- */
.smart-forms .select,
.smart-forms .gui-input,
.smart-forms .gui-textarea,
.smart-forms .select > select,
.smart-forms .select-multiple select{
	border-width: 1px;
}

/* @form header 
----------------------------------- */
.smart-forms .header-hkbn {
	-webkit-border-radius:0 ;
	-moz-border-radius:0 ;
	-o-border-radius:0 ;
	border-radius:0 ;
	padding: 0;
}

.smart-forms .header-hkbn h4{ font-size: 18px; }

/* @form body + footer 
------------------------------------------------------------------- */	
.smart-forms .form-body{
	border: 1px #BDC3C7 solid;
	border-width: 0 1px;
}
.smart-forms .form-footer {
	border: 1px #BDC3C7 solid;
	border-top-width: 0;
}

/* @form tagline 
--------------------------------- */
.smart-forms .theme-hkbn .tagline span{ text-transform:none; font-size:18px; }

/* @hint below textareas 
---------------------------------------- */
.smart-forms .input-hint {
    border-width: 1px;
}

/* @hint below textareas 
---------------------------------------- */
.smart-forms .box-remarks {
    padding: 10px;
    display: block;
    margin-top: -4px;
    line-height: 16px;
    position: relative;
    background: #F2F4FA;
    border: 1px solid #bdc3c7;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #777;
}

/* @form error
---------------------------------------- */
.smart-forms em.state-error{ 
    display: block!important;
    margin-top: 6px;
    padding: 0 3px;
    font-family:Arial, Helvetica, sans-serif;
    font-style: normal;
    line-height: normal;
    color:#CC0000;
    font-size:0.85em;
  
}


/* Theme Color Customization
---------------------------------------------------- */

/* @form header 
----------------------------------- */
.smart-forms .header-hkbn {	
	background-color:transparent;/*#00508c;*/
	border-top:0;  
	/*border-bottom:5px solid #00508c;*/
}

.smart-forms .header-lite{ border-top-color:#7C9AB8; }
.smart-forms .header-lite:before{ background-color:#00508c; }
.smart-forms .header-hkbn h4{ color:#00508c; }
.smart-forms .header-hkbn p{ color:#f68a33; }

/* @form body + footer 
------------------------------------------------------------------- */	
.smart-forms .form-footer {
	background:#F3F5FA;
}

/* @form tagline 
--------------------------------- */
.smart-forms .theme-hkbn .tagline span{ color:#00508c; }
.smart-forms .theme-hkbn .smart-link{ color:#00508c; }

/* @hover | focus  
--------------------------------- */
.smart-forms .theme-hkbn .gui-input:hover,
.smart-forms .theme-hkbn .gui-textarea:hover,
.smart-forms .theme-hkbn .select > select:hover,
.smart-forms .theme-hkbn .select-multiple select:hover, 
.smart-forms .theme-hkbn .gui-input:hover ~ .input-hint,
.smart-forms .theme-hkbn .file .gui-file:hover + .gui-input,
.smart-forms .theme-hkbn .gui-textarea:hover ~ .input-hint{ border-color: #00508c; }
.smart-forms .theme-hkbn .gui-input:focus,
.smart-forms .theme-hkbn .gui-textarea:focus,
.smart-forms .theme-hkbn .select > select:focus,
.smart-forms .theme-hkbn .select-multiple select:focus{ border-color: #00508c; color: #3C3C3C; }
.smart-forms .theme-hkbn .gui-textarea:focus{  height: 120px; }
.smart-forms .theme-hkbn .select > select:focus { z-index:10; z-index:20\9; }
.smart-forms .theme-hkbn .gui-input:focus ~ .field-icon i,
.smart-forms .theme-hkbn .gui-textarea:focus ~ .field-icon i{ color:#00508c; }
.smart-forms .theme-hkbn .select-multiple select:focus, 
.smart-forms .theme-hkbn .gui-input:focus ~ .input-hint,
.smart-forms .theme-hkbn .gui-textarea:focus ~ .input-hint, 
.smart-forms .theme-hkbn .file .gui-file:focus + .gui-input{ border-color: #00508c; }
.smart-forms .theme-hkbn .select > select:focus + .arrow{ color:#00508c; }

/* @star rating 
--------------------------------------------------------------- */
.smart-forms .theme-hkbn .rating:hover .rating-star:hover,
.smart-forms .theme-hkbn .rating:hover .rating-star:hover ~ .rating-star,
.smart-forms .theme-hkbn .rating-input:checked ~ .rating-star { color: #f68a33;	}
.smart-forms .theme-hkbn .rating-star, 
.smart-forms .theme-hkbn .rating:hover .rating-star {	color: #B5C1C7;	 }

/* @check + radio black 
---------------------------------------------------------------- */
.smart-forms .option-hkbn input:hover + .checkbox,  
.smart-forms .option-hkbn input:hover + .radio{ border-color: #00508c; }
.smart-forms .option-hkbn input:checked + .checkbox, 
.smart-forms .option-hkbn input:focus + .checkbox, 
.smart-forms .option-hkbn input:checked + .radio, 
.smart-forms .option-hkbn input:focus + .radio{ border-color: #00508c; }
.smart-forms .option-hkbn input:checked + .radio:before, 
.smart-forms .option-hkbn input:focus + .radio:before{  background: #00508c; }
.smart-forms .option-hkbn input:checked + .checkbox:before, 
.smart-forms .option-hkbn input:focus + .checkbox:before{ border-color: #00508c; }

/* @toggle-switch black 
------------------------------------------------------------ */
.smart-forms .switch-hkbn > input:checked + .switch-label { background: #00508c; border-color: #00508c; }
.smart-forms .switch-hkbn > input:checked + .switch-label:after { color:#00508c; }
.smart-forms .switch-hkbn > input:checked:focus + .switch-label { background: #f68a33; border-color: #f68a33; }

/* @button black 
------------------------------------------------------------- */
.smart-forms .btn-hkbn { background-color: #003d69; }
.smart-forms .btn-hkbn:hover { background-color: #f27022; }
.smart-forms .btn-hkbn:focus,
.smart-forms .btn-hkbn:active{ background-color: #003d69; }
.smart-forms .btn-hkbn,
.smart-forms .btn-hkbn:hover,
.smart-forms .btn-hkbn:focus,
.smart-forms .btn-hkbn:active{ color: #fff; text-shadow: 0 1px rgba(0, 0, 0, 0.08); }

/* @datepicker overides 
----------------------------------------------------------- */
.ui-datepicker { border:5px solid #00508c; }
.ui-datepicker:before{ 
	border-color:transparent transparent #00508c transparent; 
	border-color:rgba(255,255,255,0) rgba(255,255,255,0) #00508c rgba(255,255,255,0); 
}
.ui-timepicker-div .ui-widget-header,
.ui-datepicker .ui-datepicker-header { background:#00508c; }
.ui-datepicker-today a, 
.ui-datepicker-today a:hover, 
.ui-datepicker .ui-state-highlight { background:#00508c!important; }

/* @price-box 
------------------------------------------------------------- */
.smart-forms .theme-hkbn .selected-box h4{ color:#00508c; }
.smart-forms .ribbon-inner{ background:#00508c; }
.smart-forms .ribbon-inner:before,
.smart-forms .ribbon-inner:after{ border-top-color:#f68a33; }
        

/* @responsiveness for tablets + smart mobile 
-------------------------------------------------- */
@media (max-width: 800px) {
    .smart-forms .frm-row .colm-hidden{display: none;}
}