.chaoti-os-ui-white {
  
  .el-button--primary,.el-button--default{
    color: #FFF;
    background-color: #3D8BF9 !important;
    border-color: rgba(255,255,255,.5) !important;
    opacity: 1;
  }
  .el-button--primary:focus, .el-button--primary:hover .el-button--default:focus, .el-button--default:hover{
    border-color: #64A1F8 !important;
    background-color: #64A1F8 !important;
    opacity:1;
  }
  .el-button--primary.is-active, .el-button--primary.active ,.el-button--primary.selected, .el-button--default.is-active, .el-button--default.active ,.el-button--default.selected{
    background-color: #2369CD !important;
    border-color: #2369CD !important;
    opacity:1;
  }
  .el-button--primary.is-disabled, .el-button--primary.is-disabled.active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover  .el-button--default.is-disabled, .el-button--default.is-disabled.active, .el-button--default.is-disabled:focus, .el-button--default.is-disabled:hover{
    background-color: #DDDDDD !important;
    border-color:#DDDDDD !important;
    opacity:1;
  }
  //空白按钮
  .el-button--primary.is-plain{
    color: #3D8BF9 !important;
    background: #EFF6FF !important;
    border-color: #B2D2FF !important;
  }
  .el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover{
    border-color: rgba(255,255,255,.5) !important;
    color: #3D8BF9 !important;
  }
  .el-button--primary.is-plain.active{
    background: #E4F0FF !important;
    color: #3D8BF9 !important;
    border-color:  #E4F0FF !important;
  }
  .el-button--primary.is-plain.selected{
    background: #EFF6FF !important;
    color: #3D8BF9!important;
    border-color: rgba(255,255,255,.5) !important;
  }
  .el-button--primary.is-plain.is-disabled, .el-button--primary.is-plain.is-disabled.active, .el-button--primary.is-plain.is-disabled:focus, .el-button--primary.is-plain.is-disabled:hover{
    color: #999999 !important;
    background-color: #DDDDDD !important;
    border-color: #DDDDDD !important;
  }
  //文字按钮
  .el-button--text{
    color: #3D8BF9 !important;
    text-underline-offset: 12px;
    text-decoration: underline;
    font-weight: 400;
  }
  .el-button--text:focus, .el-button--text:hover{
    color: #64A1F8 !important;
  }
  .el-button--text.active,.el-button--text.selected{
    color: #2369CD !important;
    text-decoration: none;
  }
  .el-button.is-disabled.el-button--text{
    color: #999999 !important;
    text-decoration: none;
  }
  //只有白色版空心按钮才有的样式
  .elButtonGroupStyle{
    .el-button--primary,.el-button--default{
      color: #3D8BF9;
      background-color: transparent !important;
      border-color: #3D8BF9 !important;
    } 
    .el-button--primary:hover,.el-button--default:hover{
      background-color: #EFF6FF !important;
    } 
    .el-button--primary.active,.el-button--default.active{
      background: #3D8BF9 !important;
      color: #fff;
    }
  }

  // 主要背景颜色
  .backgroundColor1{
    background: #ffffff;
  }
  .backgroundColor2{
    background: #ffffff;
  }
  .backgroundColor3{
    background: #f3f8ff;
  }
  .backgroundColor4{
    background: #e4f0ff;
  }
  .backgroundColor5{
    background: #3D8BF9;
  }

  //边框颜色(border)
  .borderColor1{
    border-color: #3d8bf9;
  }
  .borderColor2{
    border-color: #0b5a7c;
  }
  .borderColor3{
    border-color: #b2d2ff;
  }
  .borderColor4{
    border-color: #dddddd;
  }

  //正文文字颜色
  .fontColor1{
    color:#bbbbbb
  }
  .fontColor2{
    color:#666666
  }
  .fontColor3{
    color:#333333
  }
  .fontColor4{
    color:#000000
  }

  //数据文字和状态文字颜色
  .DataFontColor1{
    color:#ac47e5
  }
  .DataFontColor2{
    color:#3d8bf9
  }
  .DataFontColor3{
    color:#18aa64
  }
  .DataFontColor4{
    color:#ffbc1e
  }
  .DataFontColor5{
    color:#ff881f
  }
  .DataFontColor6{
    color:#ee3f3f
  }

  //box边框色值
  .boxBorderColor1{
    background: linear-gradient(-45deg, #4f8cf1 12px, transparent 0) bottom right,
    linear-gradient(45deg, #4f8cf1 12px, transparent 0) bottom left,
    linear-gradient(135deg, #4f8cf1 12px, transparent 0) top left,
    linear-gradient(-135deg, #4f8cf1 12px, transparent 0) top right;
    border: solid 1px #0B5A7C;
    background-color: #fff;
    box-shadow: 0px 0px 8px 0px rgba(11, 90, 124, 0.35);
  }
  .boxBorderColor2{
    &::after {
      background: #4f8cf1;
    }
    &::before {
      background: #4f8cf1;
    }
  }

    // radio样式
    .el-radio__label{
      color: #000000 !important;
    }
    .el-radio__inner{
      border: 1px solid #BBBBBB !important;
      background-color: transparent !important;
    }
    .el-radio__inner::after{
      width: 6px;
      height: 6px;
      background-color: #3D8BF9;
    }
    .el-radio__input.is-checked+.el-radio__label{
      color: #000000 !important;
    }
    .el-radio__input.is-checked .el-radio__inner{
      border: 1px solid #3D8BF9 !important;
      background-color: transparent !important;
    }
    .el-radio.disabled{
      .el-radio__inner::after{
        background-color: #B8B8B8;
      }
      .el-radio__inner{
        border: 1px solid #BBBBBB !important;
      }
      .el-radio__input.is-checked+.el-radio__label{
        color: #000000 !important;
      }
    }

    //checkBox
    .el-checkbox__label{
      color: #000000 !important;
    }
    .el-checkbox__inner{
      background: transparent !important;
      border: 1px solid #C0CCDA !important;
    }
    .el-checkbox__inner::after{
      border:1px solid #ffffff;
      box-sizing: content-box;
      content: "";
      border-left: 0;
      border-top: 0;
      height: 7px;
      left: 4px;
      position: absolute;
      top: 1px;
      transform: rotate(45deg) scaleY(0);
      width: 3px;
      transition: transform .15s ease-in .05s;
      transform-origin: center;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
      background: #3D8BF9 !important;
      border: 1px solid #3D8BF9 !important;
    }
    .el-checkbox__input.is-checked+.el-checkbox__label{
      color: #1F2D3D !important;
    }
    .el-checkbox.disabled{
      .el-checkbox__inner{
        background: #D3DCE6 !important;
        border: 1px solid #D3DCE6 !important;
      }
      .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
        background: #D3DCE6 !important;
        border: 1px solid #D3DCE6 !important;
      }
      .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{
        border-color: #ffffff !important;
      }
    }

    // input
  .el-input__inner,.el-textarea__inner{
    border: 1px solid #DDDDDD !important;
    background: #ffffff !important;
    color: #000000 !important;
  }
  ::-webkit-input-placeholder { /* WebKit browsers */
    color: #999999 !important;
  }
  :-moz-placeholder { /* Mozilla  Firefox 4 to 18 */
    color: #999999 !important;
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #999999 !important;
  }
  :-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #999999 !important;
  }
  .el-input__inner:hover,.el-textarea__inner:hover{
    border: 1px solid #3D8BF9 !important;
  }
  .el-input.readonly,.el-textarea.readonly{
    .el-input__inner,.el-textarea__inner{
      background: #F1F5FA !important;
      border: 1px solid #F1F5FA !important;
    }
  }
  .el-input.is-disabled .el-input__inner,.el-textarea.is-disabled .el-textarea__inner{
    background: #F5F5F5 !important;
    border: 1px solid #D9D9D9 !important;
    color: #B8B8B8 !important;
  }

  // 数字框
  .el-input-number__decrease{
    left: calc(100% - 80px);
  }
  .el-input-number__increase{
    right: 0px;
  }
  .el-input-number__decrease, .el-input-number__increase{
    top: 0px;
  }
  .el-input-number .el-input__inner{
    padding-left: 0px !important;
    padding-right: 80px !important;
    text-align: left !important;
    text-indent: 1rem;
  }
  .el-input-number__increase,.el-input-number__decrease{
    background: #FFFFFF !important;
    border: 1px solid #DDDDDD !important;
    color: #999999 !important;
  }
  .el-input-number .el-input__inner:hover{
      background: #F3F8FF !important;
      border: 1px solid #B2D2FF !important;
  }
  .el-input-number__decrease:hover, .el-input-number__increase:hover{
    border: 1px solid #B2D2FF !important;
    color: #3D8BF9 !important;
    background: #F3F8FF !important;
  }
  .el-input-number.is-disabled .el-input-number__decrease, .el-input-number.is-disabled .el-input-number__increase{
    background: #F5F5F5 !important;
    color: #B8B8B8 !important;
    border: 1px solid #D9D9D9 !important;
  }

  //dropDown 下拉框
  .el-dropdown{
    color: #3D8BF9 !important;
    font-weight: 400 !important;
    i{
      color: #3D8BF9 !important;
    }
    .el-button--primary:focus, .el-button--primary{
      i{
        color: #ffffff !important;
      }
    }
    .el-button--primary:focus, .el-button--primary:hover{
      color: #ffffff !important;
      i{
        color: #ffffff !important;
      }
    }
  }
  .el-dropdown-menu__item{
    color: #475669 !important;
    padding: 0 20px;
  }
  .el-dropdown-menu{
    background: #FFFFFF !important;
    border: 1px solid #D3DCE6 !important;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.04), 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
  }
  .el-popper[x-placement^=bottom] .popper__arrow::after,.el-popper[x-placement^=bottom] .popper__arrow{
    border-bottom-color: #D3DCE6 !important;
  }
  .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover{
    background: #3D8BF9 !important;
    color: #fff !important;
  }
  .el-dropdown-menu__item--divided:before{
    height: 1px;
    background-color: #D3DCE6 !important;
    margin: 0 -20px;
  }
  .el-dropdown-menu__item--divided{
    border: 1px solid transparent !important;
  }
  .el-dropdown:hover{
    .el-button-group .el-button--primary:first-child,.el-button-group .el-button--primary:last-child{
      border-color: #6CA9FF !important;
      background: #6CA9FF !important;
    }
  }

  //select
  .el-select-dropdown{
    border: 1px solid #D3DCE6 !important;
    background: #FFFFFF !important;
    text-indent: 1rem;
  }
  .el-select-dropdown__item{
    color: #475669 !important;
  }
  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
    background: #3D8BF9 !important;
    color: #FFFFFF !important;
    .selectRight{
      color: #FFFFFF !important;
    }
  }
  .el-select .el-input .el-select__caret{
    color: #D3DCE6 !important;
  }
  .el-input:hover{
    .el-input__icon{
      color: #5A8FEF !important;
    }
    .el-icon-circle-close{
      color: #C0CCDA !important;
    }
  }
  .el-popper[x-placement^=top] .popper__arrow::after,.el-popper[x-placement^=top] .popper__arrow{
    border-top-color: #3D8BF9 !important;
  }
  .el-select-dropdown__item.is-disabled{
    color: #007e8c !important;
  }
  .el-tag.el-tag--info{
    background: rgba(32, 160, 255, 0.1);
    border: 1px solid rgba(32, 160, 255, 0.2);
    color: #3D8BF9 !important;
  }
  .el-tag.el-tag--info .el-tag__close{
    color: #3D8BF9;
    background: transparent;
  }
  .el-tag.el-tag--info .el-tag__close:hover{
    color: #FFFFFF;
    background: #3D8BF9;
  }
  .el-select-dropdown__item.selected{
    color: #3D8BF9 !important;
    background: transparent !important;
  }
  .el-select-dropdown__item:hover.selected{
    color: #3D8BF9 !important;
    background: #E5E9F2 !important;
    .selectRight{
      color: #3D8BF9 !important;
    }
  }
  .el-scrollbar__thumb{
    background: rgba(31, 45, 61, 0.14);
  }
  .selectLeft{
    float: left;
  }
  .selectRight{
    float: right; 
    color: #475669; 
    font-size: 13px;
    margin-right:12px;
  }
  .el-select-group__title{
    color: #8492A6; 
    padding-left: 0px;
  }
  .el-select-group__wrap:not(:last-of-type)::after{
    height: 0px;
  }
  .el-select-group__wrap:not(:last-of-type){
    padding-bottom: 10px;
  }
  .el-select-group .el-select-dropdown__item{
    padding-left: 10px;
  }

    //Cascader级联关系
    .el-cascader__dropdown{
      background: #FFFFFF !important;
      border: 1px solid #D3DCE6 !important;
    }
    .el-cascader-menu{
      color: #666666 !important;
      border: 1px solid #D3DCE6 !important;
    }
    .el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover{
      background: #F5F7FA !important;
      color: #3D8BF9 !important;
    }
    .el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path{
      background: #F5F7FA !important;
      color: #3D8BF9 !important;
    }
    .el-input__prefix, .el-input__suffix{
      color: #BBBBBB !important;
    }

    // switch
    .el-switch{
      width: 50px;
    }
    .el-switch.is-checked .el-switch__core{
      background: #3D8BF9;
      border: 1px solid #3D8BF9;
    }
    .el-switch.is-checked .el-switch__core:after{
      background: #FFFFFF;
    }
    .el-switch .el-switch__core{
      background: #C0CCDA;
      border: 1px solid #C0CCDA;
    }
    .el-switch .el-switch__core:after{
      background: #FFFFFF;
    }
    .el-switch.is-disabled .el-switch__core, .el-switch.is-disabled .el-switch__label{
      background-color: #E5E9F2;
      border: none;
    }
    .el-switch.is-disabled .el-switch__core:after{
      background: #F9FAFC !important;
    }
    .el-switch__label--right{
      position: absolute;
      left: -6px;
      top: 1px;
      visibility: hidden; 
    }
    .el-switch__label--left{
      position: absolute;
      right: -6px;
      top: 1px;
      visibility: hidden; 
    }
    .el-switch__label.el-switch__label--left.is-active{
      visibility: visible;
      color: #FFFFFF;
      z-index: 1;
    }
    .el-switch__label.el-switch__label--right.is-active{
      visibility: visible;
      color: #FFFFFF;
      z-index: 0;
    }
    .elSwitchText.el-switch.is-checked .el-switch__core{
      background: #13CE66;
      border: 1px solid #13CE66;
    }
    .elSwitchText.el-switch.is-checked .el-switch__core:after{
      background: #FFFFFF;
    }
    .elSwitchText.el-switch .el-switch__core{
      background: #FF4949;
      border: 1px solid #FF4949;
    }
    .elSwitchText.el-switch .el-switch__core:after{
      background: #FFFFFF;
    }
    .elSwitchText.el-switch.is-disabled .el-switch__core{
      background: #E5E9F2;
      border: 1px solid #E5E9F2;
    }
    .elSwitchText.el-switch.is-disabled .el-switch__label{
      color: #F9FAFC;
      background: transparent;
    }

    //slider
    .el-slider__runway{
      background: #E5E9F2;
    }
    .el-slider__bar{
      background: #20A0FF;
    }
    .el-slider__runway.disabled{
      background:  #E5E9F2;
    }
    .el-slider__runway.disabled .el-slider__bar{
      background: #C0CCDA;
    }
    .el-slider__runway.disabled .el-slider__button{
      background: #C0CCDA;
      border: 3px solid #C0CCDA;
    }
    .el-slider__button{
      border: 3px solid #1D8CE0;
      background-color: #1D8CE0;
    }
    .el-tooltip__popper.is-dark{
      color: #666666;
      background: #FFFFFF !important;
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);
    }
    .el-slider__stop{
      background: #C0CCDA;
    }
    .el-slider.el-slider--with-input{
      .el-input-number__decrease{
        left: calc(100% - 64px);
      }
    }
    .el-tooltip__popper[x-placement^=top] .popper__arrow::after,.el-tooltip__popper[x-placement^=top] .popper__arrow {
      border-top-color: #FFFFFF !important;
    }
    .el-tooltip__popper[x-placement^=bottom] .popper__arrow::after,.el-tooltip__popper[x-placement^="bottom"] .popper__arrow {
      border-bottom-color: #FFFFFF !important;
    }
    .el-tooltip__popper[x-placement^=left] .popper__arrow::after,.el-tooltip__popper[x-placement^="left"] .popper__arrow {
      border-left-color: #FFFFFF ;
    }
    .el-tooltip__popper[x-placement^=right] .popper__arrow::after,.el-tooltip__popper[x-placement^="right"] .popper__arrow {
      border-right-color: #FFFFFF;
    }
    
     // TimePicker
    .el-date-editor{
      .el-input__prefix{
        left: calc(100% - 30px);
      }
    }
    .el-time-panel,.el-picker-panel{
      background: #FFFFFF;
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.04), 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
      border: 1px solid #E2E2E2;
    }
    .el-time-range-picker__body{
      border: 1px solid #E2E2E2;
    }
    .el-time-spinner__item{
      color: #475669;
    }
    .el-time-range-picker__header{
      color: #475669;
    }
    .el-time-spinner__item.active:not(.disabled){
      color: #FFFFFF;
      background: #3D8BF9;
    }
    .el-time-spinner__item.active:not(.disabled):hover{
      background: #2C7AE8;
    }
    .el-scrollbar__bar.is-vertical>div{
      width: 0px;
    }
    .el-time-panel__footer{
      border-top:  1px solid #E2E2E2;
    }
    .el-time-panel__btn{
      color: #8492A6;
    }
    .el-time-panel__content::after, .el-time-panel__content::before{
      border: none;
    }
    .el-time-spinner__item:hover:not(.disabled):not(.active){
      background: #E5E9F2;
    }
    .el-time-panel__btn.confirm{
      color: #3D8BF9;
    }
    .el-date-editor:hover {
      .el-input__prefix{
        display: none;
      }
    }
    .el-date-editor .el-range-input,.el-date-editor .el-range-separator{
      background: transparent;
      color: #1F2D3D;
    }
   
    .el-date-editor .el-range__icon,.el-range__close-icon{
      position: absolute;
      right: 10px;
      float: right;
      color: #D3DCE6;
      display: block;
    }
    .el-date-editor:hover {
      .el-icon-time{
        display: none;
      }
      .el-date-editor .el-range__icon,.el-range__close-icon{
        color: #1F2D3D;
      }
    }
    .time-select-item{
      color: #475669;
    }
    .time-select-item:hover{
      background: #E5E9F2;
      color: #475669;
    }
    .time-select-item.selected:not(.disabled){
      color: #FFFFFF;
      background: #3D8BF9;
    }

    // DatePicker
    .el-date-picker__header-label{
      color: #475669;
    }
    .el-picker-panel__icon-btn{
      color: #99A9BF;
    }
    .el-date-table th,.el-date-picker__header--bordered,.el-date-range-picker__header{
      color: #8492A6;
      border-bottom: none;
    }
    .el-date-table td.next-month, .el-date-table td.prev-month{
      color: #475669;
    }
    .available,.el-year-table td .cell,.el-month-table td .cell{
      color: #475669;
    }
    .el-date-table td.today span{
      color: #333333 !important;
    }
    .el-date-table td.available:hover{
      background: #E5E9F2;
      color: #475669;
      border-radius: 0px;
    }
    .el-date-table td.current:not(.disabled) span{
      color: #FFFFFF;
      background: transparent;
    }
    .el-date-table td.current:not(.disabled){
      background: #3D8BF9;
    }
    .el-year-table td .cell:hover, .el-year-table td.current:not(.disabled) .cell,.el-month-table td.current:not(.disabled) .cell,.el-month-table td .cell:hover{
      background: #3D8BF9;
      color: #FFFFFF;
      border-radius: 0px;
    }
    .is-week-mode{
      .el-date-table__row:hover{
        td{
          color:#475669 !important;
          background: #E5E9F2 !important;
        }
        div{
          background: transparent !important;
        }
      }
    }
    .el-date-table__row.current{
      td{
        color:#475669 !important;
        background: #D8E8FF !important;
      }
      div{
        background: transparent !important;
      }
    .start-date,.end-date{
        background: #3D8BF9 !important;
        color: #FFFFFF;
      }
    }
    .el-date-table td.end-date span, .el-date-table td.start-date span{
      background: transparent;
    }
    .el-picker-panel [slot=sidebar], .el-picker-panel__sidebar{
      background: #F9FAFC;
      box-shadow: 1px 0px 0px 0px #E0E6ED;
      border: 1px solid #D3DCE6;
      
    }
    .el-picker-panel__shortcut{
      color: #475669;
    }
    .el-picker-panel__shortcut:hover{
      color: #475669;
      background: #E5E9F2;
    }
    .el-date-table td.disabled div{
      background: #f3f8ff;
      span{
        color: #475669;
      }
    }
    .el-date-range-picker__content.is-left{
      border-color: #E0E6ED;
    }
    .el-date-range-picker__content.is-left,.el-date-range-picker__content.is-right{
      td.available.in-range{
        color:#475669 !important;
        background: #D8E8FF ;
      }
      div{
        background: transparent !important;
      }
    .in-range.start-date,.in-range.end-date{
        background: #3D8BF9 !important;
        color: #FFFFFF;
      }
    }

    //upload
    .el-upload__tip{
      color: #8492A6;
    }
    .el-upload-list__item-name{
      color: #475669;
    }
    .el-upload-list__item-name [class^=el-icon]{
      color: #475669;
    }
    .el-upload-list__item:hover{
      .el-upload-list__item-name{
        color: #475669 !important;
      }
      .el-icon-close:before{
        color: #475669;
        content: "删除";
      }
      background: #FFFFFF;
      .el-upload-list__item-name [class^=el-icon]{
        color: #475669;
      }
    }
    .el-progress-bar__inner{
      background:#20A0FF;
    }
    .el-progress__text,.el-upload-list__item .el-icon-upload-success{
      color: #475669;
    }

    .flexs.upload-demo{
      display: flex;
      flex-direction:column-reverse;
    }
    .uploadFiexd{
      width: 100%;
      text-align: left;
      margin-top: 10px;
    }
    .el-upload-dragger{
      background: #F9FAFC;
      border: 1px solid #C0CCDA;
    }
    .el-upload-dragger .el-icon-upload{
      color: #99A9BF;
    }
    .el-upload-dragger .el-upload__text{
      color: #99A9BF;
      em{
        color: #3d8bf9;
        font-weight: 500;
      }
    }
    .el-upload-dragger:hover{
      background: #F9FAFC;
      border: 1px solid #20A0FF;
      .el-upload-dragger .el-upload__text{
        color: #99A9BF;
      }
    }
    .el-upload-dragger.is-dragover{
      background: #20A0FF;
      border: 2px dotted #20A0FF;
    }
    .el-upload--picture-card{
      background: #F9FAFC;
      border: 1px solid #C0CCDA;
    }
    .el-upload--picture-card i{
      color: #C0CCDA;
    }
    .el-upload--picture-card:hover, .el-upload:focus{
      background: #F9FAFC;
      border: 1px solid #20A0FF;
    }

    // rate
    .readBlue_1{
      .el-rate__item{
        .el-rate__icon.el-icon-star-on{
          color: #004750 !important;
        }
      }
    }
    .readBlue_2{
      .el-rate__item:nth-child(2),.el-rate__item:nth-child(3),.el-rate__item:nth-child(4),.el-rate__item:nth-child(5){
        .el-rate__icon.el-icon-star-on{
          color: #004750 !important;
        }
      }
    }
    .readBlue_3{
      .el-rate__item:nth-child(3),.el-rate__item:nth-child(4),.el-rate__item:nth-child(5){
        .el-rate__icon.el-icon-star-on{
          color: #004750 !important;
        }
      }
    }
    .readBlue_4{
    .el-rate__item:nth-child(4),.el-rate__item:nth-child(5){
        .el-rate__icon.el-icon-star-on{
          color: #004750 !important;
        }
      }
    }
    .readBlue_5{
      .el-rate__item:nth-child(5){
        .el-rate__icon.el-icon-star-on{
          color: #594700 !important;
        }
      }
    }
    .readYellow_1{
      .el-rate__item{
        .el-rate__icon.el-icon-star-on{
          color: #594700 !important;
        }
      }
    }
    .readYellow_2{
      .el-rate__item:nth-child(2),.el-rate__item:nth-child(3),.el-rate__item:nth-child(4),.el-rate__item:nth-child(5){
        .el-rate__icon.el-icon-star-on{
          color: #594700 !important;
        }
      }
    }
    .readYellow_3{
      .el-rate__item:nth-child(3),.el-rate__item:nth-child(4),.el-rate__item:nth-child(5){
        .el-rate__icon.el-icon-star-on{
          color: #594700 !important;
        }
      }
    }
    .readYellow_4{
    .el-rate__item:nth-child(4),.el-rate__item:nth-child(5){
        .el-rate__icon.el-icon-star-on{
          color: #594700 !important;
        }
      }
    }
    .readYellow_5{
      .el-rate__item:nth-child(5){
        .el-rate__icon.el-icon-star-on{
          color: #594700 !important;
        }
      }
    }

    //from
    .el-form-item__label{
      color: #4E515E;
    }
    .promptInfo{
      color: #4E515E;
    }
    .el-input .el-input__count .el-input__count-inner{
      background: transparent;
      color: #4E515E;
    }
    .el-form-item.is-error.is-required,.el-form-item.is-error,.el-form-item.is-error.is-required{
      .el-input__inner,.el-textarea__inner{
        border: 1px solid red !important;
      }
    }
    
    // table
    .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
      border-bottom: 1px solid #B2D2FF;
    }
    .el-table tr{
      background: #FFFFFF;
      color: #333333;
    }
    .el-table th.el-table__cell{
      background: #F3F8FF !important;
      color: #15506B;
    }
    tr.el-table__row--striped>td{
      background: #E4F0FF !important;
      color:#000000;
    }
    .el-table__body tr:hover>td {
      background: #E4F0FF !important;
    }
    .el-table--border::after, .el-table--group::after, .el-table::before{
      border-bottom: 1px solid #B2D2FF;
    }
    .el-table--border, .el-table--group{
      border: 1px solid #B2D2FF;
    }
    .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
      border-right: 1px solid #B2D2FF;
    }
    .el-table--border::after, .el-table--group::after, .el-table::before,.el-table__fixed-right::before, .el-table__fixed::before{
      background: #B2D2FF;
    }
    .warning-row{
      background: #E4F0FF !important;
    }
    .success-row{
      background: rgba(255, 136, 31,0.3)  !important;  
    }
    .el-table--scrollable-y .el-table__body-wrapper{
      background:#EFF2F7;
    }
    .el-table{
      ::-webkit-scrollbar {
        width:10px;
        height:10px; 
        background:transparent;
      } /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
      ::-webkit-scrollbar-track {
        background-color:#EFF2F7;  
        width: 14px !important;
      } /*定义滚动条轨道 内阴影+圆角*/
      ::-webkit-scrollbar-thumb {
        background: #D3DAE4;
        width: 6px ;
        margin: auto;
        border-radius:6px;
      } /*定义滑块 内阴影+圆角*/
      .scrollbarHide ::-webkit-scrollbar{
        display: none;
      }
      .scrollbarShow ::-webkit-scrollbar{
        display: block;
      }
    }
    .el-table__body-wrapper tr:hover>td {
      background: #E4F0FF !important;
    }
    .fixeds{
      .el-table__fixed{
        tr.el-table__row>td.el-table__cell{
          background: #FFFFFF;
          box-shadow: 4px 0px 4px 0px rgba(0, 0, 0, 0.2);
        }
      }
    }
    
      //Badge
    .el-badge__content{
      background: #FF4949;
      border: 1px solid #FFFFFF;
    }
    .el-badge{
      color: #475669 !important;
    }

    // tag
    .el-tag{
      background-color: #999999;
      color: #FFFFFF !important;
      border: 1px solid #999999;
      font-weight: 800 !important;
      .el-tag__close:hover{
        background: #FFFFFF;
      }
    }
    .el-tag.el-tag--success{
      background: rgba(24, 170, 100, 0.1);
      border: 1px solid #A5DDC2;   
      color: #18AA64 !important;
      .el-tag__close:hover{
        background: #18AA64;
      }
    }
    .el-tag.el-tag--warning{
      background: rgba(255, 136, 31, 0.1);
      border: 1px solid #FFCA9B;
      color: #FF881F !important;
      .el-tag__close:hover{
        background: #FF881F;
      }
    }
    .el-tag.el-tag--danger{
      background: rgba(238, 63, 63, 0.1);
      border: 1px solid #FE9D9D;
      color: #EE3F3F !important;
      .el-tag__close:hover{
        background: #EE3F3F;
      }
    }
    .primary.el-tag.el-tag--light{
      background: rgba(61, 139, 249, 0.1);
      border: 1px solid #B2D2FF;
      color: #007BB6 !important;
      .el-tag__close:hover{
        background: #3D8BF9;
      }
    }

    //Pagination
    .el-pagination.is-background .btn-next.disabled, .el-pagination.is-background .btn-next:disabled, .el-pagination.is-background .btn-prev.disabled, .el-pagination.is-background .btn-prev:disabled, .el-pagination.is-background .el-pager li.disabled{
      background: #EFF2F7;
      border: 1px solid #D3DCE6;
      color: #D3DCE6;
    }
    .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
      background: #FFFFFF;
      border: 1px solid #E6E6E6;
      color: #666666;
    }
    .el-pagination.is-background .el-pager li:not(.disabled).active{
      background: #3C8BF9;
      color: #FFFFFF;
      border:1px solid #3C8BF9 !important;
    }
    .el-pagination.is-background .el-pager li:not(.disabled):hover{
      background: #FFFFFF;
      border: 1px solid #3C8BF9;
      color: #3D8BF9;
    }
    .el-pagination__total{
      color: #666666;
    }
    .el-pagination button:disabled{
      background: #EFF2F7;
      border: 1px solid #D3DCE6;
      color: #D3DCE6;
    }
    .el-pager li.active{
      background: #3C8BF9;
      color: #FFFFFF;
    }
    .totals{
      .el-pager li{
        background: #FFFFFF;
        border: 1px solid #E6E6E6;
        color: #666666;
        border-radius: 2px;
        margin-right: 10px;
        &:first-child{
          margin-left: 10px;
        }
      }
      .el-pager li.active{
        background: #3C8BF9;
        color: #FFFFFF;
        border:1px solid #3C8BF9 !important;
      }
    }    
    .el-pagination .btn-next, .el-pagination .btn-prev{
      background: #FFFFFF;
      border: 1px solid #E6E6E6;
      color: #666666;
    }
    .el-pager li:hover,.el-pagination button:hover{
      background: #FFFFFF !important;
      border: 1px solid #3D8BF9 !important;
      color: #3C8BF9 !important;
    }
    .el-pagination button:disabled:hover{
      background: #EFF2F7 !important;
      border: 1px solid #D3DCE6 !important;
      color: #D3DCE6 !important;
    }
    .el-pagination__jump{
      color:#666666 ;
    }
    .smallTotals{
       .btn-next,.btn-prev, button:disabled{
        background: transparent !important;
        border-color: transparent;
      }
      .el-pager li{
        color: #666666;
        background: transparent !important;
        margin-right: 10px;
        &:first-child{
          margin-left: 10px;
        }
      }
      .el-pager li.active{
        background: #3C8BF9 !important;
        color: #FFFFFF;
      }
      .el-pager li:hover, button:hover{
        border: 1px solid transparent !important;
        color: #3D8BF9;
      }
      button:disabled:hover{
        background: transparent !important;
        border: 1px solid transparent !important;
        color: #D3DCE6 !important;
      }
    }

    //card
    .el-card{
      background: #FFFFFF;
      border: 1px solid #B2D2FF;
      box-shadow: 0px 0px 8px 0px rgba(0, 28, 68, 0.1);
      border-radius: 0px 0px 6px 6px;
      position: relative;
    }
    .box-card-number{
      display: block;
      padding: 0px;
      margin: 0px;
      width: 26px;
      height: 26px;
      line-height: 24px;
      color: #000000;
      text-align: center;
      border: 1px solid #B2D2FF;
      position: absolute;
      top: -1px;
      left: -1px;
      border-bottom-right-radius: 10px;
    }
    .el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover{
      background: #FFFFFF;
      border: 1px solid #3D8BF9;
      border-radius: 0px 0px 6px 6px;
      .box-card-number{
        border: 1px solid #3D8BF9;
        color: #000000;
      }
    }
    .box-card.active{
      background: #F3F8FF;
      border: 1px solid #3D8BF9;
      border-radius: 0px 0px 6px 6px;
      .box-card-number{
        border: 1px solid #3D8BF9;
        color: #000000;
      }
    }

    //tree
    .el-tree{
      background: #FFFFFF;
      border: 1px solid #D3DCE6;
    }
    .el-tree-node__expand-icon,.el-tree-node__label{
      color: #99A9BF;
    }
    .el-tree-node__content:hover{
      background: #E5E9F2 !important;
      .el-tree-node__expand-icon,.el-tree-node__label{
        color: #99A9BF;
      }
    }
    .el-tree-node__content{
      background-color: #FFFFFF !important;
    }
    .el-tree-node.is-current > .el-tree-node__content{
      background-color: #E5E9F2 !important;
    }

    // progress
    .el-progress-bar__outer{
      background: #E5E9F2;
      border: 1px solid #E5E9F2;
    }
  
    .el-progress.is-success .el-progress-bar__inner{
      background: #18AA64;
    }
    .el-progress.is-exception .el-progress-bar__inner{
      background: #FF4949
    }
    .default{
      .el-progress-bar__inner{
        background: #3D8BF9;
      }
      .el-progress__text{
        color: #475669;
      }
    }
    .el-progress-circle svg path:first-child{
      stroke: #E5E9F2;
    }
    .default{
      .el-progress-circle svg path:last-child{
        stroke: #3D8BF9;
      }
    }
    .el-progress.is-success{
      .el-progress-circle svg path:last-child{
        stroke: #18AA64;
      }
    }
    .el-progress.is-exception{
      .el-progress-circle svg path:last-child{
        stroke: #FF4949;
      }
    }

    //tabs
    .el-tabs__nav-wrap::after{
      background: #D3DCE6;
    }
    .el-tabs__active-bar{
      background: #3D8BF9;
    }
    .el-tabs__item.is-active{
      color: #3D8BF9;
    }
    .el-tabs__item{
      color: #8492A6;
    }
    .el-tabs__item:hover{
      color: #1F2D3D;
    }
    .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
      background: #3D8BF9 !important;
      border: 1px solid #3D8BF9;
      color: #FFFFFF;
    }
    .tabsAngle.el-tabs--card>.el-tabs__header .el-tabs__nav,
    .tabsRounded.el-tabs--card>.el-tabs__header .el-tabs__nav{
      border: none;
    }
    .tabsAngle.el-tabs--card>.el-tabs__header .el-tabs__item,.tabsRounded.el-tabs--card>.el-tabs__header .el-tabs__item{
      border: none;
      border-bottom: 1px solid #3D8BF9;
      margin-right:5px;
      background: #EFF2F7;
    }
    .el-tabs--card>.el-tabs__header{
      border-bottom:1px solid #3D8BF9;
    }
    .tabsAngle,.tabsRounded,.tabsBtns{
      .el-tabs__item:hover{
        background: #E4F0FF !important;
        border: 1px solid transparent;
        color: #000000 !important;
      }
    }
    .tabsRounded.el-tabs--card>.el-tabs__header .el-tabs__item{
      border-radius: 4px 4px 0px 0px !important;
    }
    .tabsBtns.el-tabs--card>.el-tabs__header .el-tabs__nav,.tabsBtns.el-tabs--card>.el-tabs__header .el-tabs__item{
      border: none;
    }
    .tabsBtns.el-tabs--card>.el-tabs__header{
      border-bottom: 1px solid transparent;
    }
    .tabsBtns.el-tabs--card > .el-tabs__header .el-tabs__item.is-active{
      border-top: 1px solid #3D8BF9;
      color: #FFFFFF !important;
    }
    .tabsBtns.el-tabs--card>.el-tabs__header .el-tabs__nav{
      border-bottom: 1px solid transparent;
    }
    .tabsBtns.el-tabs--card > .el-tabs__header .el-tabs__item{
      border: 1px solid #3D8BF9;
      border-right: none;
      &:last-child{
        border-right: 1px solid #3D8BF9;
      }
    }
    .tabsBtnsClose{
      .el-tabs__header .el-tabs__nav{
        border: none;
      }
      .el-tabs__header .el-tabs__item{
        border: none;
      }
      .el-tabs__item .el-icon-close:hover{
        color: #FFFFFF;
        background: #99A9BF;
      }
      .el-tabs__header.el-tabs__item.is-active{
      background: #FFFFFF;
      color: #C9FFFF;
      border-top-left-radius:5px;
      border-top-right-radius: 5px;
      }
    }
    .tabsBtnsCard{
      .el-tabs__header{
        margin: 0px;
      }
      .el-tabs__content{
        border: 1px solid #D3DCE6;
        background: #FFFFFF;
        color: 1F2D3D;
        border-top: 0px;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
      }
    }

    //Breadcrumb 
    .el-breadcrumb__inner{
      color: #475669;
    }
    .el-breadcrumb__separator{
      color: #475669;
    }
    .el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
      color: #99A9BF;
    }
    .el-breadcrumb__inner:hover{
      color: #3D8BF9;
      text-decoration: none;
      text-underline-offset: 12px !important;
    }

    //Steps
  .el-step__title{
    font-size: 14px;
  }
  .iconSteps{
    .el-step__icon{
      background: transparent;
    }
    .el-step.is-horizontal .el-step__line{
      left: 38px;
    }
    .el-step__head.is-finish{
      .el-step__icon-inner{
        color: #3D8BF9;
      }
    }
    .el-step__head.is-process{
      .el-step__icon-inner{
        color:#C0CCDA;
      }
    }
  }
  .el-step__head.is-finish{
    .el-step__icon.is-text{
      background: #3D8BF9;
      color: #fff;
      border: none;
    }
    .el-step__title.is-process{
      color: #3D8BF9;
    }
    .el-step__line{
      background: #3D8BF9;
    }
    &+.el-step__main{
      .el-step__title.is-finish,.el-step__description.is-finish{
        color: #3D8BF9;
      }
      
    }
  }
  .el-step__head.is-process{
    .el-step__icon.is-text{
      border: none;
      background: #C0CCDA;
      color: #fff;
    }
    .el-step__line{
      background: #C0CCDA;
    }
    &+.el-step__main{
      .el-step__title.is-process,.el-step__description.is-process{
        color: #475669;
      }
    }
  }
  .el-step__head.is-wait{
    .el-step__line{
      background: #C0CCDA;
    }
    .el-step__icon.is-text{
      border: 1px solid #C0CCDA;
      background: #ffffff;
      color: #99A9BF;
    }
    .el-step__icon-inner{
      color:#99A9BF;
    }
    &+.el-step__main{
      .el-step__title.is-wait,.el-step__description.is-wait{
        color: #99A9BF !important;
      }
    }
  }
  .sameColor{
    .el-step__head.is-finish{
      .el-step__icon.is-text{
        background: #3D8BF9;
        color: #FFFFFF;
        border: none;
      }
      .el-step__title.is-process{
        color: #3D8BF9;
      }
      .el-step__icon-inner{
        color:#FFFFFF;
      }
      &+.el-step__main{
        .el-step__title.is-finish{
          color: #3D8BF9;
        }
      }
      .el-step__line{
        background: #3D8BF9;
      }
    }
    .el-step__head.is-process{
      .el-step__icon.is-text{
        border: none;
        background: #BEDAFF;
        color: #FFFFFF;
      }
      .el-step__line{
        background: #C0CCDA;
      }
    }
  }
  .el-step__head.is-success{
    .el-step__icon.is-text{
      background: #18AA64;
      border: none;
    }
    .el-step__icon-inner.is-status{
      color: #FFFFFF;
    }
    .el-step__line{
      background: #18AA64;
    }
    &+.el-step__main{
      .el-step__title.is-success{
        color: #18AA64 !important;
      }
    }
  }
  .successSameColor{
    .el-step__head.is-success{
      .el-step__icon.is-text{
        background: #3D8BF9;
        border: none;
      }
      .el-step__icon-inner.is-status{
        color: #FFFFFF;
      }
      .el-step__line{
        background: #3D8BF9;
      }
      &+.el-step__main{
        .el-step__title.is-success{
          color: #3D8BF9 !important;
        }
      }
    }
  }
  .el-step__head.is-error{
    .el-step__icon.is-text{
      border: none;
      background: #F9686B;
      color: #FFFFFF;
    }
    .el-step__line{
      background: #C0CCDA;
    }
  }

  //alert
  .default.el-alert--warning.is-light{
    background: #3D8BF9;
    color: #FFFFFF;
    .el-alert__description{
      color: #FFFFFF;
    }
  }
  .el-alert.is-light .el-alert__closebtn{
    color: #FFFFFF;
  }
  .el-alert--success.is-light{
    background: #18AA64;
    color: #FFFFFF;
    .el-alert__description{
      color: #FFFFFF;
    }
  }
  .el-alert--info.is-light{
    background: #BBBBBB;
    color: #FFFFFF;
    .el-alert__description{
      color: #FFFFFF;
    }
  }
  .el-alert--warning.is-light{
    background: #FF881F;
    color: #FFFFFF;
    .el-alert__description{
      color: #FFFFFF;
    }
  }
  .el-alert--error.is-light{
    background:#EE3F3F;
    color: #FFFFFF;
    .el-alert__description{
      color: #FFFFFF;
    }
  }

  //Message
  .el-message__closeBtn{
    color: #FFFFFF;
    opacity: 0.4;
  }
  .el-message.el-message--info{
    background: #FFFFFF !important;
    border: 1px solid #3D8BF9 !important;
  }
  .el-message__content{
    color: #1F2D3D;
  }
  .el-message .el-icon-info{
    color:#3D8BF9;
  }
  .el-message--success{
    background:  #FFFFFF;
    border: 1px solid #18AA64;
    .el-message__content{
      color: #1F2D3D;
    }
    .el-message .el-icon-info{
      color:#18AA64;
    }
  }
  .el-message--warning{
    background:  #FFFFFF;
    border: 1px solid #FF881F;
    .el-message__content{
      color: #1F2D3D;
    }
    .el-message .el-icon-info{
      color:#FF881F;
    }
  }
  .el-message--error{
    background:  #FFFFFF;
    border: 1px solid #EE3F3F;
    .el-message__content{
      color: #1F2D3D;
    }
    .el-message .el-icon-info{
      color:#EE3F3F;
    }
  }
  .rightMessage{
    left:calc(100% - 220px);
  }

  //messageBox
  .el-message-box{
    background: #FFFFFF;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.04), 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
    border: 1px solid #D3DCE6;
  }
  .el-message-box__title{
    color: #4E515E;
  }
  .el-message-box__headerbtn .el-message-box__close{
    color: #C0CCDA;
  }
  .el-message-box__content{
    color: #475669;
  }
  .btn-custom-cancel {
    float: right;
    margin-left: 10px;
  }

  //Notification
  .el-notification{
    background: #FFFFFF;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.04), 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
    border: 1px solid #D3DCE6;
  }
  .el-notification__title{
    color: #1F2D3D;
  }
  .el-notification__content i{
    color: #8492A6 !important;
  }
  .el-notification__closeBtn{
    color: #C0CCDA;
  }
  .el-notification__content{
    color: #8492A6 !important;
  }
  .notifyInfo{
     .el-icon-info{
       color: #50BFFF;
     }
  }
  .notifyInfoIcon{
    .el-icon-info,.el-icon-success,.el-icon-warning,.el-icon-error{
      color: #3D8BF9;
    }
  }

    //Popover
    .el-popover{
      background: #FFFFFF;
      border: 1px solid #DDDDDD;
      box-shadow: 0px 2px 6px 0px rgba(153, 153, 153, 0.3);
      color: #666666;
    }
    .el-popover__title{
      color: #000000;
    }

    //自定义的tables
    .xTable {
      height: 100%;
      background-color: #fff;
      .thead {
        height: 3rem;
        line-height: 3rem;
        position: relative;
        margin-bottom: 0.8vh;
        .left,
        .right {
          position: absolute;
          top: -0.15rem;
          left: -8px;
          width: 18px;
          height: 3.2rem;
          background: url("./white/tbbt_l.png") no-repeat;
          background-size: 100% 100%;
          z-index: 1;
        }
        .left::before,
        .right::before {
          content: "";
          position: absolute;
          width: 13px;
          height: 2rem;
          top: 50%;
          transform: translateY(-50%);
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
        .left::before {
          right: 0;
        }
        .right::before {
          left: 0;
        }
        .right {
          left: auto;
          right: -8px;
          background-image: url("./white/tbbt_r.png");
        }
        .fields {
          background: url("./white/tabbg_rp.png") repeat-y;
          background-size: 100% 1px;
          display: flex;
          > div {
            flex: 1;
            font-size: 1rem;
            font-weight: bold;
            color: #000;
            > div {
              display: inline-block;
              padding: 0 10px;
              user-select: none;
              &.cursor {
                cursor: pointer;
              }
              i {
                display: inline-block;
                vertical-align: middle;
                margin-top: -0.2vh;
                width: 16px;
                height: 16px;
                background-repeat: no-repeat;
                background-size: 100% 100%;
              }
              i.desc {
                background-image: url("./white/sortPos.png");
              }
              i.asc {
                background-image: url("./white/sortOrd.png");
              }
            }
          }
          &.current {
            padding-right: 8px;
          }
        }
        &::before,
        &::after {
          position: absolute;
          content: "";
          height: 1px;
          width: 100%;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          background: url("./white/taborder_sx.png") no-repeat;
          background-size: 100% 1px;
        }
        &::after {
          bottom: 0;
          top: auto;
        }
      }
      .noData {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6vh;
      }
      .tbody,
      .noData {
        height: calc(100% - 13.5rem);
        background-color: #fff;
        border: 1px solid #b2d2ff;
        overflow-y: auto;
        color: #000;
        .row {
          display: flex;
          height: 3.5rem;
          line-height: 3.5rem;
          font-size: 0.8rem;
          font-weight: bold;
          position: relative;
          border-bottom: 1px solid #b2d2ff;
          &:first-child {
            border-bottom: none;
          }
          &:hover {
            background-color: rgba(239, 242, 247, 1);;
          }
          &:first-of-type {
            &::before {
              display: none !important;
            }
          }
          &.current {
            background-color: #fff;
            &::before,
            &::after {
              position: absolute;
              content: "";
              top: 0;
              left: 0;
              height: 1px;
              width: 100%;
              background-color: #b2d2ff;
            }
            &::after {
              top: auto;
              bottom: 0;
            }
            &:hover {
              background-color: rgba(239, 242, 247, 1);;
            }
          }
          > div {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            span {
              padding: 2px 0;
              font-size: 0.8rem;
              color: #3d8bf9;
              font-weight: bold;
              cursor: pointer;
              margin: 0 5px;
              line-height: 1vh;
            }
            span:hover {
              text-decoration: underline;
            }
          }
          .btns {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
          }
        }
        &::-webkit-scrollbar {
          width: 10px;
          background-color: #eff2f7;
        }
        &::-webkit-scrollbar-track {
          width: 10px;
        }
        &::-webkit-scrollbar-thumb {
          background-color: #d3dae4;
          border-radius: 10px;
        }
      }
      .page {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        .el-pagination {
          padding: 0;
        }
      }
    }

    //title
    .search_title {
      width: 50%;
      margin: auto;
      height: 2.3rem;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-bottom: 8px;
      box-sizing: border-box;
      color: #ffffff;
      background: url("./white/biaoti_bg.png") no-repeat;
      background-size: 100% 100%;
      font-size: 16px;
    }
    .jplvr_header {
      width: 100%;
      height: auto;
      text-align: center;
      background: url("./white/zbtbh_s.png") no-repeat;
      background-size: 100% 100%;
      height: 2rem;
      position: relative;
      .htClass {
        position: absolute;
        top: 0.2rem;
        left: 0rem;
        z-index: 20;
        width: 3.5rem;
        height: 1.6rem;
        background: url("./white/fanhui_icon.png") no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
      }
      .htClass:hover {
        background: url("./white/fanhui_icon_anxia.png") no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
      }
      .jplvr_title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        box-sizing: border-box;
        color: white;
        height: 2.4rem;
        line-height: 2.4rem;
        font-size: 1rem;
        padding: 0px 20px;
        
        background: url("./white/zbtc_rp.png") repeat-x center top;
        background-size: 100% 100%;
        .jplvr_title1{
          position: relative;
          width: 100%;
          height: 100%;
          background: url("./white/zbtd.png") no-repeat center bottom;
          background-size: 50px 5px;
          &::after{
            content: '';
            position: absolute;
            top: 0px;
            left: -30px;
            width: 10px;
            height: 100%;
            background: url("./white/zbta.png") no-repeat center center;
            background-size:100% 100% ;
          }
          &::before{
            content: '';
            position: absolute;
            top: 0px;
            right: -30px;
            width: 10px;
            height: 100%;
            background: url("./white/zbtb.png") no-repeat center center;
            background-size:100% 100% ;
          }
        }
        span {
          width: 1.2rem;
          height: 1.2rem;
          display: inline-block;
          vertical-align: top;
          margin-right: 10px;
        }
        .jplvr_title_span{
          margin: 0;
          padding: 0;
          display: inline-block;
        }
      }
    }
    .first_chart_title {
      width: 100%;
      height: 32px;
      line-height: 32px;
      text-align: center;
      background: url("./white/zbtbjx.png") no-repeat center center;
      background-size: 100% 2px;
      color: #0B5A7C;
      font-size: 14px;
      font-weight: 500;
      position: relative;
    }
    .first_chart_title_bg{
      span{
        padding: 6px 20px;
        background: url("./white/zbtbg_rp.png") repeat-x left top;
        background-size:100% 100%;
        position: relative;
        &::after{
          content: '';
          position: absolute;
          top: 0px;
          left: -8px;
          width: 8px;
          height: 100%;
          background: url("./white/zbta1.png") no-repeat center center;
          background-size:100% 100% ;
        }
        &::before{
          content: '';
          position: absolute;
          top: 0px;
          right: -8px;
          width: 8px;
          height: 100%;
          background: url("./white/zbtb1.png") no-repeat center center;
          background-size:100% 100% ;
        }
      }
    }

      //body样式表
  .boxBlock {
    position: relative;
    border-radius: 20px;
    background-repeat: no-repeat;
  }
  .boxTop {
    &::after {
      position: absolute;
      content: "";
      top: -1.4px;
      left: -1.4px;
      width: 40px;
      height: 40px;
      background: url("./white/mbbga.png") no-repeat center center;
      background-size: 100% 100%;
    }
  }
  .boxLeft {
    &::after {
      position: absolute;
      content: "";
      right: -1.4px;
      top: -1.4px;
      width: 40px;
      height: 40px;
      background: url("./white/mbbgb.png") no-repeat center center;
      background-size: 100% 100%;
    }
  
  }
  .boxBottom {
    &::after {
      position: absolute;
      content: "";
      right: -1.4px;
      bottom: -1.4px;
      width: 40px;
      height: 40px;
      background: url("./white/mbbgd.png") no-repeat center center;
      background-size: 100% 100%;
    }
  }
  .boxRight {
    &::after {
      position: absolute;
      content: "";
      left: -1.4px;
      bottom: -1.4px;
      width: 40px;
      height: 40px;
      background: url("./white/mbbgc.png") no-repeat center center;
      background-size: 100% 100%;
    }
  }

  //Dialog
  .el-dialog__header{
    background: url("./white/tc_repeatx.png") repeat-x center center;
    background-size: 100% 100%;
    text-align: left !important;
  }
  .el-dialog__title{
    color: #fff;
  }
  .el-dialog__headerbtn .el-dialog__close{
    color: #fff;
  }
  .el-dialog__body{
    background: #002436;
    box-shadow: 0px 0px 12px 0px rgba(11, 90, 124, 0.4);
  }
  .el-dialog__footer{
    background: #002436;
    border-top: 1px dashed #007583;
    text-align: center;
  }
}