@charset "utf-8";
/*==========
Author: yibin616
Author URI: http://www.umtheme.com/
Plugin ID: umForm
==========*/
.umTips{ margin-bottom: 20px;padding: 10px 0 0 0; color: #282828;}
.umbg .umTips{padding: 5px 20px 0 15px;}
.umFormBox{padding:0px;-moz-osx-font-smoothing: auto;}
.umFormBox a{-webkit-transition: color .3s ease;-o-transition: color .3s ease;transition: color .3s ease;}
.umFormBox.umbg{background: #FFFFFF;padding: 15px;}
.umFormBox #umForm{margin:0 -10px;}
.umFormBox .umInput{ position: relative;padding-left:0px;display:inline-block;width: calc(100% / 2 - 20px);margin: 10px; line-height: normal;vertical-align: top;}
.umFormBox .umInput a{ text-decoration: none !important;}
.umFormBox .umInput:last-of-type{margin-bottom: 0;}
.umFormBox .umInput.w100{width: calc(100% / 1 - 20px);}
.umFormBox .umInput label{width: 120px;text-align: right;margin-left: -120px;float: left;height: 38px;line-height: 38px; padding-right: 10px;}
.umFormBox .umInput label span{ color: #FB3203;}
.umFormBox .umInput label span.tit{opacity: .5; color: #333; padding-left: 4px;}
.umFormBox .umInput input{height: 42px;line-height: 42px; width: 100%; font-size: 14px; padding: 0 12px;border: 1px solid #EEEEEE;background: #FFFFFF; color: #282828;}
.umFormBox .umInput .umText{width: 100%; height: 172px; font-size: 14px; padding: 10px;line-height: 22px;resize: none;border: 1px solid #EEEEEE;background: #FFFFFF;color: #282828;}
.umFormBox .umForm{  height: 42px; border:1px solid #EEEEEE; background: #FFFFFF; font-size: 14px; padding:0px 10px;display: block; width: 100%;}
.umFormBox .umItem{ position: relative; z-index: 1; margin:15px 0; display: block;}
.umFormBox .umItemIn{ width: 100%;display: inline-block; padding-right: 0; position: relative;}
.umFormBox .vcode .umItemIn .ccode{position: absolute; height: 35px!important; right: 4px; top: 4px;}
.umFormBox .umFormBtn{ border: medium none; background: #00B68C; height:46px; line-height:46px;font-weight: 500; min-width: 120px;padding: 0 15px; color: #fff; font-size: 16px;display: block; cursor: pointer; text-align: center;display: inline-block;width: auto;}
.umFormBox .umSelect .umFormCate.umForm{outline: none;appearance: none;-webkit-appearance: none;-moz-appearance: none;}
.umFormBox .umSelect .umFormCate.umForm option{line-height: 38px;}
.umFormBox .umSelect .umFormCate.umForm{color: #282828;}
.umFormBox .umSelect .umItemIn:after{ content: ''; position: absolute; top: 18px; right: 12px; width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 6px solid #28282880;}
.umFormBox .umSelect .umFormCate{ padding-right: 30px; padding-left: 12px;}
.umFormBox .clear{ clear: both;}
.umFormBox .umInput.umTextBox{width: calc(100% - 20px);}
.umFormBox .umMsg{ padding: 20px 24px; position: fixed; z-index: 9999; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(0,0,0,1); color: #fff; border-radius: 5px; display: none; text-align: center;}
.umFormBox .umMsg span.success{ color: #5AF03B;}
.umFormBox input::-webkit-input-placeholder, .umFormBox textarea::-webkit-input-placeholder{color:#28282896;}
.umFormBox input::-moz-placeholder,.umFormBox textarea::-moz-placeholder{color:#28282896;}
.umFormBox input:-moz-placeholder,.umFormBox textarea:-moz-placeholder{color:#28282896;}
.umFormBox input:-ms-input-placeholder,.umFormBox textarea:-ms-input-placeholder{color:#28282896;}
.umFormBox .umInput input,.umFormBox .umFormBtn,.umFormBox .umForm,
.umFormBox .umInput .umText{-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}
.umFormBox.umRound .umInput input,.umFormBox.umRound .umForm,.umFormBox.umRound .cityPicker .selector-item,.umFormBox.umRound .cityPicker .selector-list,
.umFormBox.umRound .umInput .umText{-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;}
.umFormBox.umRound .umFormBtn{-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;}
.umFormBox.umRound .cityPicker .selector-name,.umFormBox.umRound .cityPicker .selector-search input,
.umFormBox.umRound .vcode .umItemIn .ccode{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}

.cityPicker{*zoom:1}
.umFormBox .cityPicker .selector-search input{border:1px solid #eee;color:#282828;font-size:14px;width:100%;height:36px;line-height:36px\9;padding:0 8px;background: #fff;}
.umFormBox .cityPicker .selector-search input::-webkit-input-placeholder{color:#28282896;}
.umFormBox .cityPicker .selector-search input::-moz-placeholder{color:#28282896;}
.umFormBox .cityPicker .selector-search input:-moz-placeholder{color:#28282896;}
.umFormBox .cityPicker .selector-search input:-ms-input-placeholder,.umFormBox textarea:-ms-input-placeholder{color:#28282896;}
.cityPicker .input-search:focus{outline:none}
.cityPicker .input-search::-webkit-input-placeholder{color:#bababa}
.clearfix:after,.cityPicker:after{content:" ";display:table;height:0;clear:both}
.cityPicker .umCitySelect{ margin-right:-8px;}
.cityPicker .selector-item{ width: calc(100% / 3 - 8px); height:42px;line-height:40px;margin-left:8px;position:relative;border:1px solid #EEEEEE;vertical-align: top;display: inline-block;}
.cityPicker .selector-item:first-child{margin-left:0}
.cityPicker .selector-item:after{content:'';border-right:5px solid transparent;border-left:5px solid transparent;border-top:6px solid #28282880;display:block;width:0;height:0;position:absolute;top:18px;right:10px;-webkit-transition-duration:400ms;transition-duration:400ms}
.cityPicker .selector-show .selector-list{-webkit-transform:translateY(0);transform:translateY(0);opacity:1;visibility:visible}
.cityPicker .selector-show:after{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.cityPicker .selector-name{font-size: 14px;display:block; padding: 0 10px; text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background: #FFFFFF; color: #282828;}
.cityPicker .selector-name.df-color{color:#28282896}
.cityPicker .selector-name.forbid{cursor:default}
.cityPicker .selector-name.disabled{background-color:#eef1f6;cursor:not-allowed}
.cityPicker .selector-list{border:1px solid #eee;background:#fff;width:100%;position:absolute;top:44px;left:-1px;z-index:1;-webkit-transition-duration:400ms;transition-duration:400ms;-webkit-transform:translateY(-2%);transform:translateY(-2%);opacity:0;visibility:hidden;overflow:hidden}
.cityPicker ul{max-height:160px;overflow-x:hidden;overflow-y:auto; padding: 0;}
.cityPicker li{border-top:1px solid #f7f7f7;color:#333;cursor:pointer;font-size:14px;width:100%;padding:0 5%;height:36px;line-height:36px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.cityPicker li:first-child{border-top:none}
.cityPicker li.placeholder-li{cursor:default}
.cityPicker li strong{color:#00B68C;padding:0 5px}
.cityPicker li.caller:hover{background:#f5f5f5}
.cityPicker li.caller.active,.cityPicker li.caller.active:hover{background:#00B68C;color:#fff}
.cityPicker li.forbid{color:#28282896;font-size:14px;cursor:not-allowed}
.cityPicker .selector-search{border:1px solid #ececec;border-top:none;background:#f8f8f8;font-size:0;padding:10px;margin-left:-1px;margin-right:-1px;line-height: 24px;}
.cityPicker select{border:1px solid #EEEEEE;background:#fff;border-radius:5px;color:#333;font-size:16px;outline:none;width:160px;height:36px;margin-right:10px;box-shadow:0 0 5px #eee}
.cityPicker select:disabled{background-color:#eef1f6;cursor:not-allowed}

@media screen and (max-width:540px){
.umFormBox{ margin-right: 0;padding-right: 15px;}
.umFormBox .umInput,.umFormBox .umInput.w100{width: 100%;padding-right: 0px;}
.umFormBox .umInput.umTextBox{ width: 100%;padding-right:0px;}
.umFormBox .umInput .umFormBtn{ width: auto;margin-right: 0; padding-left:10px;}
.umFormBox #umForm{padding-right:5px;}
}
@media screen and (max-width:480px){
.umFormBox{padding-left: 15px;}
.umFormBox #umForm{padding-right:0px;}
.umTips{padding: 10px 0px 0 0px;}
.umFormBox .umInput{padding-left: 0px;margin: 5px 0px 5px 0;}
.umFormBox .umInput label{ width: 100%;text-align: left;margin-left: 0px;padding-right: 0;}
.umFormBox .umInput .umFormBtn{padding-left: 10px; margin: 15px 0;}
}