@import 'iconfont.styl';
@import 'mixin.styl'; 
@font-face
  font-family 'iconfont';
  src url('iconfont/iconfont.eot');
  src url('iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont/iconfont.woff2') format('woff2'),
      url('iconfont/iconfont.woff') format('woff'),
      url('iconfont/iconfont.ttf') format('truetype'),
      url('iconfont/iconfont.svg#iconfont') format('svg');

/**日历*/
// [class*=" el-icon-"], [class^=el-icon-]
//   color #c0c4cc
// .el-date-range-picker__header div
//   color #606266
// .el-date-table td span
//   color #606266
// .el-date-editor .el-range__close-icon
//   line-height 24px
// .el-date-range-picker
//   width 5.5rem
// .el-date-table td span
//   width .2rem
//   height .2rem
//   line-height .2rem
//   font-size .14rem
// .el-date-table td div
//   height .24rem
// .el-date-table td
//   padding 0
//   height .28rem
// .el-date-range-picker__content
//   padding .06rem
.el-input__inner
  height 30px
  line-height 30px
.el-range-editor.el-input__inner
  padding 0 5px
.el-date-editor .el-range__icon
  font-size 12px
  line-height 30px
.el-date-editor .el-range-input
  font-size 12px
.el-date-editor .el-range-separator
  line-height 30px
  font-size 12px
// 选择器
.el-select
  width 100%
  display block
.el-input
  line-height 30px
  font-size 12px
.el-input__icon
  line-height 30px
.el-select-dropdown__item
  line-height 30px
  font-size 12px
  height 30px
  span
    font-size 12px

/**icon*/  
.iconfont
  font-family "iconfont" !important
  font-size .16rem
  font-style normal
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
.close_icon
  width .3rem
  height .3rem
  position absolute
  right 0
  top .05rem
  color #C0C4CC
  font-size .2rem
  line-height .3rem
  text-align center
.select_icon
  width 18px
  height 18px
  line-height 18px
  font-size 16px
  text-align center
  border-radius 100%
  background-color #c0c4cc
  color #c0c4cc
  overflow hidden
.select_square_icon
  border-radius 3px
.selected_icon
  background-color #1989fa
  color #fff
.unselect_icon
  background-color #c0c4cc
.radio_icon
  display inline-block
  width .16rem
  height .16rem
  border-radius 100%
  color #fff
  vertical-align middle
.radio_selected_icon
  border .05rem solid #1989fa
  background-color #fff
.radio_unselect_icon
  border 1px solid #1989fa
  background-color #fff
.button
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #909399;
  border: 1px solid #909399;
  color: #ffffff;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: .1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 7px 12px;
  font-size: 14px;
  border-radius: 4px;
.button--primary
  background-color #409EFF
  border-color #409EFF
.button--defalut
  color #fff
  border 1px solid #c9c9c9
  background-color #c9c9c9

/**header*/
.container
  _wh(100%, 100vh)
header
  height 45px
  padding 0 15px
  border-bottom 1px solid rgb(255, 208, 75)
  box-shadow 0 1px 2px rgba(255, 208, 75, 0.5)
  _fj()
.header-tip
  line-height 32px
  font-size 16px
  color #fff

/**nav*/
// .tabs
//   width 100%
//   height 34px
//   margin-bottom 10px
//   li
//     float left
//     line-height 32px
//     text-align center
//     a
//       display inline-block
//       color #fff
//       width 100%
//       font-size 14px
//       padding 0 20px
//     .router-link-active
//       border-bottom 1px solid #15347b
//       box-shadow 0 2px 0 rgba(228, 243, 244, 0.5)

/**content*/
.order-wraper
  width 100%
  height 100%
.wrap-filter-buttons
  display flex
  justify-content space-between
  align-items center
  width 100%
  height 30px
  margin-bottom 15px
.wrap-filters
  display flex
  justify-content flex-start
  align-items center
  width 60%
  height 30px
.wrap-buttons
  width 40%
  height 100%
  display flex
  justify-content flex-end
  align-items center
  .button+.button
    margin-left 5px
.filter_item
  width calc(50% - 10px)
  display flex
  justify-content space-between
  align-items center
  +.filter_item
    margin-left 10px
.filter_label
  _font(12px, 30px, #fff,,)
  width 50px
.filter-input-wrap
  position relative
  width calc(100% - 55px)
  height 30px
  line-height 30px
  display flex
  justify-content center
  align-items center
.filter-input
  _wh(100%, 30px)
  _font(12px, 30px, #606266,,)
  padding 0 10px
  border-radius 4px
  background-color #fff
.grid_wraper
  _wh(100%, calc(100% - 45px))
  overflow-y auto
.filter-table
  width 100%
  text-align center
  user-select none
  th
    position: sticky;
    top -1px
    z-index 1
    color #606266
    padding 5px 0
    font-weight bold
    background-color #8B90A6
  th,td
    line-height 15px
    font-size 12px
    color #fff
    word-break break-all
    border-right 1px solid #8B90A6
    border-bottom 1px solid #8B90A6
    box-sizing border-box
    &:first-child
      border-left 1px solid #8B90A6
  td
    padding 5px
.input
  width 1.8rem
  height .3rem
  line-height .3rem
  font-size .13rem
  color #606266
  text-indent .05rem
.slide_new
  width: 100%
  height: 100%
  overflow-y: auto
.zd_wrapper
  height calc(100% - 95px)
  overflow hidden
  .grid_wraper
    table-layout fixed
    width auto
    min-width 100%
    height 100%
    th
      position sticky
      top -1px
      z-index 49
      &:first-child
        position sticky
        left -1px
        z-index 51
    th,td
      overflow hidden
      white-space nowrap
      text-overflow ellipsis
      padding 8px 10px
    td
      &:first-child
        position sticky
        left -1px
        z-index 50
        background-color #090b3c

.message-box__wrapper
  position fixed
  top 0
  bottom 0
  left 0
  right 0
  text-align center
  background rgba(0,0,0,.5)
.message-box__wrapper::after
  content ""
  display inline-block
  height 100%
  width 0
  vertical-align middle
  z-index 100
.message-box
  display inline-block
  width 4.2rem
  padding-bottom .1rem
  vertical-align middle
  background-color #fff
  border-radius 4px
  border 1px solid #ebeef5
  font-size .18rem
  box-shadow 0 2px 12px 0 rgba(0,0,0,.1)
  text-align left
  overflow hidden
  backface-visibility hidden
.message-box__content
  position relative
  padding .1rem .15rem
  color #606266
  font-size .14rem
.message-box__btns
  padding .05rem .15rem 0
  text-align right
.message-box__message p
  color #303133
  line-height .3rem
.message-box__input
    padding .15rem 0
    margin-top .1rem
    line-height .3rem
    color #606266
    border-top 1px solid #e1e1e1
    border-bottom 1px solid #e1e1e1
.message-box__input .input-cus
  border 1px solid #dcdfe6
  padding-right .2rem
.keyValue
  position relative 
input::-webkit-input-placeholder
  color #C0C4CC
.input-cus-wrap
  position relative
  display inline-block
.radio_dot_icon
  width 5px
.modal-radios
  width 90%
  margin .15rem auto 0
.modal-radio
  display inline-block
  line-height .16rem
  color #606266
  font-size .13rem
.el-range-editor.el-input__inner
  width 100%
.el-icon-arrow-up
  vertical-align top

.form_wraper
  width 100%
.form
  width 100%
  .form_item
    width 100%
  .form_item+.form_item
    margin-top: 20px
.form_item__label
  width: 74px;
  text-align: left;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  i
    color $red2
.form_item__content
  width: calc(100% - 74px)
  margin-left: 74px;
  line-height: 40px;
  position: relative;
  font-size: 14px;
.form_item__input
  width 100%
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid $gray1;
  box-sizing: border-box;
  color: #696969;
  display: inline-block;
  font-size: 17px;
  height: 40px;
  line-height: 40px;
  outline: none;
  padding: 0 15px;
  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  width: 100%;

// 半成品
.search-confirm-wrap
  margin 0 auto
  border-radius 5px
  padding-bottom 15px
.search-wrap
  width 100%
  padding 0 10px
  _fj(flex-start)
  flex-wrap wrap
.search-item
  _fj()
  width 32%
  margin-top 10px
  &:nth-child(3n+2)
    margin-left 2%
    margin-right 2%
  .button+.button
    margin-left 5px
.search-label
  _wh(60px, 30px)
  _font(12px, 30px,#fff,,)
.filter_input_wraper
	width calc(100% - 60px)
	height 30px
.search-item_2
  _fj(flex-end)
  width 64%
  margin-top 10px
  margin-left 4%
  .button+.button
    margin-left 5px
.flexend
  justify-content flex-end

// 颜色切换
.overall_orange
    background linear-gradient(#ff7a31 0%,#ff6b00 20%,#ff5200 100%)
    .body-container
      border-color $orange !important
    .tabs li a
      border-color #ffbb31 !important
    .tabs li .router-link-active
      background linear-gradient(#f5e24a 0%,#ffbb31 100%) !important
    .button--primary
      background-color #fff
      border-color $red
      color $red
    .button--defalut
      color: #fff;
      border-color #c9c9c9
      background-color: #c9c9c9;
    .selected_icon
      background-color: #fff;
      color: $red
      td
        color: $red
    .zd_wrapper .grid_wraper td:first-child
      background-color #ff6b00
.overall_lightgreen
    background linear-gradient(#00d9a1 0%,#00c0a5 30%,#115fae 100%)
    .body-container
      border-color $lightgreen !important
    .tabs li a
      border-color #008f8f !important
    .tabs li .router-link-active
      background linear-gradient(#b7e15d 0%,#008f8f 100%) !important
    .button--primary
      background-color #008f8f
      border-color #008f8f
      color #fff
    .button--defalut
      color: #fff;
      border-color #c9c9c9;
      background-color: #c9c9c9;
    .selected_icon
      background-color: #fff;
      color: #008f8f
      td
        color: #008f8f
    .zd_wrapper .grid_wraper td:first-child
      background-color #00c0a5
.overall_blue
    background linear-gradient(#031f6d 0%,#011a60 20%,#060346 100%)