@charset "utf-8";

/* typeCalendar */
.mForm.typeCalendar { display:inline-block; position:relative; vertical-align:top; background:#fff; }
.mForm.typeCalendar > .fText { width:120px; }
.mForm.typeCalendar .btnCalendar { margin-left:-6px; }
.mForm.typeCalendar .btnCalendar:hover{ z-index:1; border-color:#fb6554; }
/* mCalendar plugin */
.mCalendar { display:none; width:251px; margin:4px 0 0; padding:20px 10px; box-sizing:border-box; border:1px solid #4e505d; background:#fff; }
.mCalendar .ui-datepicker-header { position:relative; margin:0 0 20px; padding:0 32px; text-align:center; }
.mCalendar .ui-datepicker-prev,
.mCalendar .ui-datepicker-next { position:absolute; top:0; border:0; display:inline-block; overflow:hidden; width:36px; height:30px; cursor:pointer; vertical-align:top; text-indent:120%; white-space:nowrap; background:#fff;
box-sizing:border-box; -webkit-transition:border .3s ease-out; transition:border .3s ease-out;
}
.mCalendar .ui-datepicker-prev { left:-4px; }
.mCalendar .ui-datepicker-next { right:-4px; }
.mCalendar .ui-datepicker-prev:hover:before,
.mCalendar .ui-datepicker-next:hover:before { border-color:#fb6554; }
.mCalendar .ui-datepicker-prev:before,
.mCalendar .ui-datepicker-next:before { content:""; position:absolute; top:50%; left:50%; width:8px; height:8px; margin-top:-4px; border-left:1px solid #555; border-bottom:1px solid #555; -webkit-transition:.3s ease-out; transition:.3s ease-out; }
.mCalendar .ui-datepicker-prev:before { margin-left:-2px; -webkit-transform:rotate(45deg); transform:rotate(45deg); }
.mCalendar .ui-datepicker-next:before { margin-left:-6px; -webkit-transform:rotate(-135deg); transform:rotate(-135deg); }
.mCalendar .ui-datepicker-prev:disabled:before,
.mCalendar .ui-datepicker-next:disabled:before { border-color:#b3b3b3; }
.mCalendar .ui-datepicker-title select { height:30px; max-width:78px; margin:0 2px; border:1px solid #d4d4d4; padding:0 12px 0 9px; outline:0; color:#666;font-size:14px;}
.mCalendar .ui-datepicker-calendar { font-size:14px; line-height:24px; }
.mCalendar .ui-datepicker-calendar th { font-weight:500; }
.mCalendar .ui-datepicker-calendar td { text-align:center; color:#555; }
.mCalendar .ui-datepicker-calendar .ui-state-default { display:inline-block; width:24px; }
.mCalendar .ui-datepicker-calendar .ui-state-default:hover { font-weight:500; color:#fff; text-decoration:none; background:#fb6554; }


/* form */
input { color:#666; padding:3px;font-size:14px; }
.fText { display:inline-block; position:relative; }
.fText input { position:relative; width:100%; height:30px; padding:0 9px; box-sizing:border-box; border:1px solid #d4d4d4;  line-height:30px; outline:none; -webkit-transition:.3s ease-out; transition:.3s ease-out; }
.fText input::-webkit-search-cancel-button { -webkit-appearance:none; }
.fText input:focus { z-index:1; border-color:#fb6554; }
.fText .btnReset { position:absolute; top:1px; right:1px; width:0; opacity:0; }
.fText .btnSearch { position:absolute; z-index:1; top:0; right:1px; height:36px; padding:0 1px 0 0; }
.fText .btnCalendar { position:absolute; z-index:1; top:0; right:1px; height:36px; padding:0 1px 0 0; }
.fText input[type="search"] { padding-right:27px; }
.fText input[type="search"] + .btnReset { width:0; right:25px; }
.fText.full { width:100%; }
.fText input.txtR { text-align: right; }

/* selected*/
.fText.selected input { padding-right:27px; }
.fText.selected input[type="search"]:focus { padding-right:50px; }
.fText.selected input[type="search"]:focus .btnReset { width:23px; }
.fText.selected input + .btnReset { z-index:1; width:27px; opacity:1; }

/* disabled */
.fText input:disabled { border-color:#d4d4d4; color:#999; background:#ddd; }
.fText input:disabled::-webkit-input-placeholder { color:#999; }
.fText input:disabled:-ms-input-placeholder { color:#999; }
.fText input:disabled::-moz-placeholder { color:#999; }
.fText input:disabled:-moz-placeholder { color:#999; }
.fText.selected input:disabled + .btnReset { display:none; }

.fTextarea { padding:9px; box-sizing:border-box; border:1px solid #d4d4d4; line-height:1.4; outline:none; -webkit-transition:.3s ease-out; transition:.3s ease-out; background:#fff; }
.fTextarea:focus { border-color:#fb6554; }
.fTextarea:disabled { border-color:#e5e5e5; color:#d3d3d3; background:#fff; }
.fTextarea[readonly]:focus { border-color:#d4d4d4; }
.fTextarea.full { width:100%; }
.gLabel { display:inline-block; position:relative; min-height:20px; padding:0 0 0 20px; line-height:20px; vertical-align:top; }



.fSelect { position:relative; display:inline-block; }
.fSelect .icoArrow { position:absolute; top:15px; right:5px; }
.fSelect:before { content:""; position:absolute; top:1px; right:1px; width:27px; height:34px; background:#fff; text-indent:150%; }
.fSelect select { width:100%; height:30px; padding:0 0 0 9px; box-sizing:border-box; border:1px solid #d4d4d4; line-height:30px; cursor:pointer; outline:none; -webkit-transition:.3s ease-out; transition:.3s ease-out; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
.fSelect:hover select { border-color:#fb6554; color:#fb6554; }
.fSelect:hover .icoArrow { border-color:#<p class="sbox icon03">32L</p> transparent transparent transparent; }
.fSelect option { padding:8px 9px 7px; font-weight:300; line-height:16px; color:#666;font-size:14px; }
.fSelect option:hover { color:#666;font-size:14px; background:#fff4ee; }
.fSelect option:checked { color:#666;font-size:14px; background:#fff; }
.fSelect select:focus + .icoArrow { -webkit-transform:rotate(180deg); transform:rotate(180deg); }


/* selectDesign */
.selectDesign { display:inline-block; position:relative; padding:0 27px 0 9px; box-sizing:border-box; border:1px solid #d4d4d4; vertical-align:top; -webkit-transition:.3s ease-out; transition:.3s ease-out; }
.selectDesign select { visibility:hidden; position:absolute; z-index:-1; }
.selectDesign button { position:absolute; top:0px; right:0; overflow:hidden; width:100%; height:100%; text-indent:150%; white-space:nowrap; background:none; }
.selectDesign button:after { content:""; position:absolute; top:15px; right:4px; width:0; height:0; border-style:solid; margin:0 6px; border-width:5px 5px 0 5px; border-color:#666 transparent transparent transparent; vertical-align:2px; -webkit-transition:.3s ease-out; transition:.3s ease-out; }
.selectDesign .now { height:28px; line-height:28px; cursor:pointer; }
.selectDesign .selectList { display:none; position:absolute; top:35px; left:-1px; width:100%; height:auto; border:1px solid #d4d4d4; opacity:1; background:#fff; }
.selectDesign .selectList li a { display:block; padding:8px 9px 7px; margin:0; line-height:16px; word-break:break-all; cursor:pointer; -webkit-transition:.3s ease-out; transition:.3s ease-out; }
.selectDesign .selectList li a:hover { text-decoration:none; background:#fff4ee; }
.selectDesign.show { z-index:10; }
.selectDesign.show button:after { -webkit-transform:rotate(180deg); transform:rotate(180deg); }
.selectDesign.show .selectList { display:block; }
.selectDesign.hide { display:none; border:0; visibility:hidden; position:absolute; z-index:-100; }
.selectDesign:hover { border-color:#fb6554; color:#fb6554; }
.selectDesign:hover button:after { border-color:#fb6554 transparent transparent transparent; }
.selectDesign.full { width:100%; }

.btnCalendar { display:inline-block; position:relative; overflow:hidden; width:36px; height:30px; box-sizing:border-box; border:1px solid #d4d4d4; vertical-align:top; text-indent:120%; white-space:nowrap;  -webkit-transition:border .3s ease-out; transition:border .3s ease-out; }
.btnCalendar:hover:before, .btnCalendar:hover:after, .btnCalendar:hover { border-color:#fb6554;   }
.btnCalendar:before { content:""; display:inline-block; position:absolute; top:0; left:0; width:36px; height:36px; margin-top:0;  background: url(../../images/btn_cale.gif)no-repeat; }
.btnCalendar { margin-left:-5px; }

.btnConfirm { background: #28303f; color:#eee; font-weight:700;-moz-border-radius: .2em;border-radius: .2em; display:inline-block; height:36px; padding:8px 18px; box-sizing:border-box; font-size:15px; line-height:1.2; text-align:center; vertical-align:middle;}
.btnConfirm:hover { background:#6c7a94;text-decoration:none; -webkit-transition:.3s ease-out; transition:.3s ease-out; }
[class*="btn"].large{min-width:162px; height:50px; padding:12px 54px; font-size:20px; }
.btnReset { overflow:hidden; width:27px; height:100%; -webkit-transition:opacity .3s ease-out; transition:opacity .3s ease-out; }
.btnReset span { display:inline-block; position:relative; overflow:hidden; width:11px; height:11px; margin:0 auto; font-size:1px; line-height:0; color:transparent; white-space:nowrap; -webkit-transform:rotate(45deg); transform:rotate(45deg); }
.btnReset span:before { content:""; position:absolute; top:0; right:5px; width:1px; height:11px; background:#666; -webkit-transition:.3s ease-out; transition:.3s ease-out; }
.btnReset span:after { content:""; position:absolute; top:5px; right:0; width:11px; height:1px; background:#666; -webkit-transition:.3s ease-out; transition:.3s ease-out; }
.btnReset:hover span:before,
.btnReset:hover span:after { background:#fb6554; }
.icoReset { display:inline-block; position:relative; overflow:hidden; width:11px; height:11px; margin:0 auto; font-size:1px; line-height:0; color:transparent; white-space:nowrap; -webkit-transform:rotate(45deg); transform:rotate(45deg); }
.icoReset:before { content:""; position:absolute; top:0; right:5px; width:1px; height:11px; background:#666; -webkit-transition:.3s ease-out; transition:.3s ease-out; }
.icoReset:after { content:""; position:absolute; top:5px; right:0; width:11px; height:1px; background:#666; -webkit-transition:.3s ease-out; transition:.3s ease-out; }
.btnReset:hover .icoReset:before,
.btnReset:hover .icoReset:after { background:#fb6554; }