/*
* @Author: tianye1
* @Date:   2018-07-19 18:25:26
* @Last Modified by:   tianye1
* @Last Modified time: 2018-08-06 10:59:05
*/

/* function */

@for $i from 4 through 20 {
  .f-fs#{$i * 2} { font-size: #{$i*2}px; }
}
@for $i from 1 through 10 {
  .mt#{$i * 5} { margin-top: #{$i*5}px; }
}
@for $i from 1 through 10 {
  .mr#{$i * 5} { margin-right: #{$i*5}px; }
}
@for $i from 1 through 10 {
  .mb#{$i * 5} { margin-bottom: #{$i*5}px; }
}
@for $i from 1 through 10 {
  .ml#{$i * 5} { margin-left: #{$i*5}px; }
}

@for $i from 1 through 10 {
  .pt#{$i * 5} { padding-top: #{$i*5}px; }
}
@for $i from 1 through 10 {
  .pr#{$i * 5} { padding-right: #{$i*5}px; }
}
@for $i from 1 through 10 {
  .pb#{$i * 5} { padding-bottom: #{$i*5}px; }
}
@for $i from 1 through 10 {
  .pl#{$i * 5} { padding-left: #{$i*5}px; }
}
.f-middle{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.f-cb:after,.f-cbli li:after{
  display:block;
  clear:both;
  visibility:hidden;
  height:0;
  overflow:hidden;
  content:".";
}
.f-cb,.f-cbli li{
  zoom:1;
}
.f-ib{
  display:inline-block;
  *display:inline;
  *zoom:1;
}
.f-dn{
  display:none;
}
.f-db{
  display:block;
}
.f-fl{
  float:left;
}
.f-fr{
  float:right;
}
.f-pr{
  position:relative;
}
.f-pa{
  position: absolute;
}
.f-prz{
  position:relative;
  zoom:1;
}
.f-oh{
  overflow:hidden;
}
.f-ff0{
  font-family:arial,\5b8b\4f53;
}
.f-ff1{
  font-family:"Microsoft YaHei",\5fae\8f6f\96c5\9ed1,arial,\5b8b\4f53;
}
.f-efonts{
  font-family:efonts
}
.f-tahoma{
  font-family:Tahoma
}
.f-red{
  color:#ff0000
}
.f-blue{
  color:#517ebb
}
.f-darkblue{
  color:#1632eb;
}
.f-orange{
  color:#ed9c00!important
}
.f-green{
  color:#65C178!important
}
.f-gray{
  color:#999
}
.f-black{
  color:#333
}
.f-error{
  color:#ef9b6d
}
.f-fwn{
  font-weight:normal;
}
.f-fwb{
  font-weight:bold;
}
.f-tal{
  text-align:left;
}
.f-tac{
  text-align:center;
}
.f-tar{
  text-align:right;
}
.f-taj{
  text-align:justify;
  text-justify:inter-ideograph;
}
.f-vam,.f-vama *{
  vertical-align:middle;
}
.f-wsn{
  word-wrap:normal;
  white-space:nowrap;
}
.f-pre{
  overflow:hidden;
  text-align:left;
  white-space:pre-wrap;
  word-wrap:break-word;
  word-break:break-all;
}
.f-wwb{
  white-space:normal;
  word-wrap:break-word;
  word-break:break-all;
}
.f-ti{
  overflow:hidden;
  text-indent:-30000px;
}
.f-ti2{
  text-indent:2em;
}
.f-lhn{
  line-height:normal;
}
.f-tdu,.f-tdu:hover{
  text-decoration:underline;
}
.f-tdn,.f-tdn:hover{
  text-decoration:none;
}
.f-toe{
  overflow:hidden;
  word-wrap:normal;
  white-space:nowrap;
  -o-text-overflow:ellipsis;
     text-overflow:ellipsis;
}
.f-csp{
  cursor:pointer;
}
.f-csd{
  cursor:default;
}
.f-csh{
  cursor:help;
}
.f-csm{
  cursor:move;
}
.f-usn{
  -webkit-user-select:none;
     -moz-user-select:none;
      -ms-user-select:none;
          user-select:none;
}
/* start input & textarea widget css*/
.c-input,.c-textarea{
  width:200px;
  padding:0 5px;
  border:1px solid #e9e9e9;
  border-radius:3px;
  height:28px;
  line-height:28px;
  vertical-align: middle;
}
.c-textarea{
  height: 100px;
  line-height: 20px;
}
.c-input:focus,.c-textarea:focus{
  border-color:#98E3A8;
  -webkit-box-shadow:1px 2px 2px #ececec;
          box-shadow:1px 2px 2px #ececec;
  -webkit-transition:border-color 200ms ease-in;
  -o-transition:border-color 200ms ease-in;
  transition:border-color 200ms ease-in;
}
.div-input{
  display: inline-flex;
  width:200px;
  border:1px solid #e9e9e9;
  border-radius: 2px;
  height:28px;
  line-height:28px;
  vertical-align: middle;
  padding:0 3px;
}
.div-input > input{
  width:100%;
  border-style:none;
  border-radius:0;
  box-shadow: 0px 0px 0px 0px;
  margin:0;
  padding:0;
  color: #666;
}
.div-input > span{
  display: flex;
  border-style: none;
  margin-left: 10px;
  padding: 0;
}
.div-textarea{
  z-index:1;
  position:relative;
  width:200px;
  border:1px solid #e9e9e9;
  border-radius:3px;
  vertical-align: middle;
  padding:3px;
  font-size:13px;
  line-height:20px;
}
.div-textarea > textarea{
  z-index:2;
  border-style:none;
  border-radius:0;
  box-shadow: 0px 0px 0px 0px;
  margin:0;
  padding:0;
  vertical-align: middle;
  resize: none;
}
.div-textarea > span{
  z-index:3;
  display:block;
  position:absolute;
  width:auto;
  line-height:20px;
  right:3px;
  bottom:0;
  background:#fff;
}

.div-input:hover,.div-textarea:hover{
  border:1px solid #83a4cc;
  border-color:#83a4cc;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(91, 133, 191, 0.2);
  box-shadow: 0 0 0 2px rgba(91, 133, 191, 0.2);
  -webkit-transition:border-color 200ms ease-in;
  -o-transition:border-color 200ms ease-in;
  transition:border-color 200ms ease-in;
}
.div-input > input:focus, .div-textarea > textarea:focus{
  border-style:none;
  border-radius:0;
  box-shadow: 0px 0px 0px 0px;
  margin:0;
  padding:0;
}
.input-error{
  border:1px solid #f5222d;
  &:hover {
    border:1px solid #f5222d;
    box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
  }
}
/*edn input & textarea widget css*/