/* 组件样式
    2017/12/08 by wangjubao xinba
*/

/*元素默认样式删除 start*/
body {
    font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans", "Noto Sans CJK Sc", "Microsoft YaHei", "Microsoft Jhenghei", sans-serif;
    margin: 0;
    /*font-weight: 200;*/
}

input, button {
    font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans", "Noto Sans CJK Sc", "Microsoft YaHei", "Microsoft Jhenghei", sans-serif;
    /*font-weight: 200;*/
}

button {
    padding: 0;
    margin: 0;
    outline: none;
    border: none
}

button:hover {
    border: none
}

input::-webkit-input-placeholder {
    color: #A9AAAA;
}

input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #A9AAAA;
}

input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #A9AAAA;
}

input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #A9AAAA;
}

.clearfix:after {
    display: block;
    content: "";
    clear: both;
}

.w-float-left {
    float: left;
}

.w-float-right {
    float: right;
}

/*元素默认样式删除 end*/
/*动画组样式 start*/

@keyframes rotateing {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

@-moz-keyframes rotateing /* Firefox */
{
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotateing /* Safari and Chrome */
{
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

@-o-keyframes rotateing /* Opera */
{
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

/*动画组样式 end*/

/*组件库Icon样式start*/
.w-icon {
    display: inline-block;
    background: url(wjb-img.png)
}
/*修改*/
.w-modal-close  .d-icon{
    width: 14px;
    height:14px;
    display: block;
    background: url(wjb-img.png);
    background-position: -40px -10px;
    cursor: pointer;
}
.w-del {
    width: 10px;
    height: 10px;
    background-position: -36px -153px;
}

.w-del-biger {
    width: 12px;
    height: 12px;
    background-position: -41px -11px;
}

.w-message-defult-icon {
    width: 20px;
    height: 20px;
    background-position: -107px -120px;
}

.w-message-success-icon {
    width: 20px;
    height: 20px;
    background-position: -139px -120px;
}

.w-message-warn-icon {
    width: 20px;
    height: 20px;
    background-position: -171px -120px;
}

.w-message-error-icon {
    width: 20px;
    height: 20px;
    background-position: -203px -120px;
}

.w-sea {
    width: 16px;
    height: 16px;
    background-position: -68px -60px;
}

.w-right {
    width: 14px;
    height: 14px;
    background-position: -64px -10px;
}

/*组件库Icon样式end*/
/*箭头样式 start
* 使用样例：将该类名加入需要显示箭头的元素上，！！该元素需要定位，relative
*/
.w-right-arrow:after {
    transition: all .2s ease-in-out;
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 12px;
    margin-top: -4px;
    width: 6px;
    height: 6px;
    border-top: 1px solid white;
    border-right: 1px solid white;
    transform: rotate(45deg);
    transform-origin: 50%;
}

/*箭头样式 end*/

/*滚动条样式 start  注：该样式未兼容 IE 浏览器
* 使用特点：将类名添加至需要滚动的元素上，该元素需要有最大或固定高
*/
.w-scroll-defult { /*默认滚动条*/
    overflow-y: auto;
    overflow-x: hidden;
}

.w-scroll-defult::-webkit-scrollbar-track { /*滚动条背景板*/
    background: #F3F6F8;
}

.w-scroll-defult::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #F3F6F8;
    border-radius: 2px;
}

.w-scroll-defult::-webkit-scrollbar-thumb { /*滚动条*/
    background-color: #d8d8d8;
    -webkit-box-shadow: inset 0 0 6px rgb(216, 216, 216);
    border-radius: 2px;
}

.w-scroll-opacity { /*透明滚动条*/
    overflow-y: auto;
    overflow-x: hidden;
}

.w-scroll-opacity::-webkit-scrollbar-track { /*滚动条背景板*/
    background: rgba(0, 0, 0, 0);
}

.w-scroll-opacity::-webkit-scrollbar {
    width: 2px;
    height: 2px;
    background-color: rgba(0, 0, 0, 0);
}

.w-scroll-opacity::-webkit-scrollbar-thumb { /*滚动条*/
    background-color: rgba(0, 0, 0, 0);
    -webkit-box-shadow: inset 0 0 6px rgba(216, 216, 216, 0);
}

/*滚动条样式 end */

/*按钮样式组 start*/
.w-btn {
    position: relative;
    display: inline-block;
    min-width: 90px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 17px;
    padding-right: 17px;
    font-size: 14px;
    /*font-weight: 200;*/
    color: #fff;
    border: none;
    border-radius: 2px;
    letter-spacing: 0;
}

.w-btn:hover {
    opacity: .8;
}

.w-btn.biger {
    padding-top: 10px;
    padding-bottom: 10px;
}

.w-btn.small {
    padding-top: 6px;
    padding-bottom: 6px;
}

.w-btn.min {
    font-size: 12px;
    padding-top: 6px;
    padding-bottom: 5px;
}

.w-btn[disabled] {
    opacity: .4;
    cursor: not-allowed;
}

.w-btn[loading=true] {
    /*cursor: not-allowed;*/
    padding-left: 37px;
    pointer-events: none;
    opacity: .4;
}

.w-btn[loading=true]:before {
    position: absolute;
    content: '';
    left: 20px;
    /*top: calc(~'50% - 8px');*/
    top:50%;
    margin-top: -8px;
    width: 14px;
    height: 14px;
    background: url(wjb-img.png) -160px -10px;
    animation: rotateing 1s linear infinite;
    -moz-animation: rotateing 1s linear infinite; /* Firefox */
    -webkit-animation: rotateing 1s linear infinite; /* Safari and Chrome */
    -o-animation: rotateing 1s linear infinite; /* Opera */
}

.w-btn-main { /*主要按钮*/
    background-color: #2783f2;
}

.w-btn-main.w-btn-dec, .w-btn-main.w-btn-write { /*次要按钮,文字按钮*/
    color: #2783f2;
}

.w-btn-success { /*主要成功按钮*/
    background-color: #50c368;
}

.w-btn-success.w-btn-dec, .w-btn-success.w-btn-write { /*次要成功按钮，文字成功按钮*/
    color: #50c368;
}

.w-btn-warn { /*主要警告按钮*/
    background-color: #fa7d00;
}

.w-btn-warn.w-btn-dec, .w-btn-warn.w-btn-write { /*次要警告按钮,文字警告按钮*/
    color: #fa7d00;
}

.w-btn-danger { /*主要危险按钮*/
    background-color: #fa5555;
}

.w-btn-danger.w-btn-dec, .w-btn-danger.w-btn-write { /*次要危险按钮,文字危险按钮*/
    color: #fa5555;
}

.w-btn-dec { /*次要按钮*/
    background-color:#F3FBFF;
}

.w-btn-write { /*文字按钮*/
    padding: 0;
    min-width: 0;
    background: none;
}

/*按钮样式组 end*/

/*输入框样式 start*/
.w-input-box {
    position: relative;
    display: inline-block;
    width: 180px;
    height: 40px;
}

.w-input-box > input {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
    border: 1px solid;
    border-color: #E1E1E1;
    border-radius: 2px;
    outline: none;
    color: #444;
}

.w-input-box > input[disabled] {
    cursor: not-allowed;
    background-color: #FBFBFB;
    opacity: .6;
}

.w-input-box > input[maxlength] {
    padding-right: 54px;
}

.w-input-box.w-remove > input[maxlength] {
    padding-right: 10px;
}

.w-input-box > input[type="number"] {
    padding-right: 32px;
    -webkit-webkit-appearance: none;
    -moz-webkit-appearance: none;
    -ms-webkit-appearance: none;
    -o-webkit-appearance: none;
    -khtml-webkit-appearance: none;
    webkit-appearance: none;
}

.w-input-box.w-remove > input[type="number"] {
    padding-right: 10px;
}

.w-input-num {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 28px;
    height: 100%;
    cursor: pointer;
}

.w-input-add {
    width: 28px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
    color: #666;
    border-left: 1px solid #E1E1E1;
    border-bottom: 1px solid #E1E1E1;
}

.w-input-red {
    width: 28px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
    color: #666;
    border-left: 1px solid #E1E1E1;
}

.w-input-box > input[type="number"] + .w-input-num {
    display: block;
}

.w-input-box > input[disabled] + .w-input-num {
    cursor: not-allowed;
    background-color: #FBFBFB;
    opacity: .6;
}

.w-input-box input[type="number"]::-webkit-outer-spin-button,
.w-input-box input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.w-input-box.delbtn > input {
    padding-right: 24px;
}

.w-input-del {
    position: absolute;
    right: 0;
    top: 0;
    width: 24px;
    height: 100%;
    /*height: 40px;*/
    padding: 0px 5px;
    cursor: pointer;
}

.w-input-del:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    /*top: calc(~'50% - 5px');*/
    top:50%;
    margin-top: -5px;
    background: url(wjb-img.png) -36px -153px;
}

.w-input-box.sea-btn > input {
    padding-left: 32px;
}

.w-input-box.sea-after-btn > input {
    padding-right: 32px;
}

.delbtn.sea-btn > input {
    padding-left: 32px;
    padding-right: 24px;
}

.w-input-sea {
    position: absolute;
    top: 0;
    width: 32px;
    height: 100%;
    padding: 0px 8px;
}

.w-input-sea:after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    /*top: calc(~'50% - 8px');*/
    top:50%;
    margin-top: -8px;
    background: url(wjb-img.png) -68px -60px;
}

.sea-btn > .w-input-sea {
    left: 0;
}

.sea-after-btn > .w-input-sea {
    cursor: pointer;
    right: 0;
}

.w-imput-limit {
    display: inline-block;
    position: absolute;
    right: 10px;
    /*top: calc(~'50% - 10px');*/
    top:50%;
    margin-top: -10px;
    height: 20px;
    line-height: 20px;
    color: #999999;
}
.w-limit-add {
    right: 25px !important;
}
.w-input-box > .w-input-num + .w-imput-limit {
    display: none;
}

input[error=true], .w-input-box > input[error=true]:focus {
    border-color: #FA5555;
}

.w-input-box > input:focus {
    border-color: #45C0FF;
}

.w-input-box.big {
    height: 36px;
}

.w-input-box.big > input {
    padding-top: 8px;
    padding-bottom: 8px;
}

.w-input-box.big > .w-input-num > .w-input-add, .w-input-box.big > .w-input-num > .w-input-red {
    height: 18px;
    line-height: 18px;
}

.w-input-box.defult {
    height: 32px;
}

.w-input-box.defult > input {
    font-size: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.w-input-box.defult > .w-input-num > .w-input-add, .w-input-box.defult > .w-input-num > .w-input-red {
    height: 16px;
    line-height: 16px;
}

.w-input-box.small {
    height: 28px;
}

.w-input-box.small > input {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 12px;
}

.w-input-box.small > .w-input-num > .w-input-add, .w-input-box.small > .w-input-num > .w-input-red {
    height: 14px;
    line-height: 14px;
    font-size: 12px;
}

/*输入框样式 end*/
/*textarea样式 srart*/
.w-textarea{
    width: 100%;
    border-radius: 2px;
    border:1px  solid #E1E1E1;
    color: #444444;
    padding: 10px;
    resize:none;
    min-height: 100px;
}
.w-textarea:focus{
    border-color: #45C0FF;
}
.w-textarea::-webkit-input-placeholder {
    color: #A9AAAA;
}
/*textarea end*/
/*下拉菜单 start*/
.w-down-select-placeholder{
    color: #999999;
}
.w-down-bac {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1200;
}
.w-down-bac-new{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1200;
    display: none;
}
.w-down-fixed {
    display: none;
    position: fixed;
    z-index: 1500;
    background: #fff;
    border: 1px solid #e7ecf3;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.04);
    border-radius: 2px;
}

.w-down-fixed.show {
    display: block;
}

.w-down-body {
    display: none;
    position: absolute;
    z-index: 1500;
    background: #fff;
    border: 1px solid #e7ecf3;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.04);
    border-radius: 2px;
}

.w-down-body.show {
    display: block;
}

.w-down-default { /*下拉菜单的默认样式*/
    min-width: 120px;
    max-height: 240px;
    overflow-y: auto;
    margin-top: 5px;
    padding: 10px 0;
}

.w-down-default > div {
    position: relative;
    font-size: 12px;
    color: #666;
}

.w-down-default > div:hover {
    color: #3289f2;
}

.w-down-default-item {
    width: 100%;
    height: 34px;
    line-height: 34px;
    padding: 0 15px;
    cursor: pointer;
}

.w-down-default-item:hover {
    background: #fbfcfc;
}

.w-down-open {
    position: relative;
    height: 28px;
}

.w-down-open:after {
    content: "";
    position: absolute;
    right: 0;
    /*top: calc(~'50% - 5px');*/
    top:50%;
    margin-top: -5px;
    width: 14px;
    height: 14px;
    background: url(wjb-img.png) -67px -10px;
}

.w-down-child {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background: #ffffff;
    border: 1px solid #e7ecf3;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.04);
    border-radius: 2px;
}

.w-down-child.show {
    display: inline-block;
}

.w-down-select {
    position: relative;
    min-width: 100px;
    max-width: 100%;
    height: 40px;
    padding-left: 15px;
    padding-right: 25px;
    line-height: 40px;
    font-size: 14px;
    background: #fff;
    color: #444;
    border: 1px solid #E1E1E1;
    border-radius: 2px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.w-down-select.big {
    height: 36px;
    line-height: 36px;
}

.w-down-select.defult {
    height: 32px;
    line-height: 32px;
    font-size: 12px;
}

.w-down-select.small {
    height: 28px;
    font-size: 12px;
    line-height: 28px;
}

.w-down-select:after {
    position: absolute;
    display: block;
    content: '';
    right: 5px;
    /*top: calc(50% - 7px);*/
    top:50%;
    margin-top:-7px;
    width: 14px;
    height: 14px;
    background: url(wjb-img.png) -90px -10px;
}

.w-fixed-down-defult {
    max-width: 100%;
    max-height: 240px;
    overflow-y: auto;
    padding: 10px 0;
    margin-top: 3px;
}

.w-fixed-down-defult > div {
    min-width: 160px;
    max-width: 100%;
    font-size: 12px;
    color: #666;
    height: 34px;
    line-height: 34px;
    padding: 0 10px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.w-fixed-down-defult > div:hover {
    color: #3289f2;
    background: #fbfcfc;
}

/*下拉菜单 end*/
/*按钮组件样式start 默认复选框样式 label的for属性必须指向input的ID*/
@keyframes hover-color {
    from {
        border-color: #c0c0c0;
    }
    to {
        border-color: #20a0ff;
    }
}

.w-checkbox-input {
    position: absolute;
    display: none;
}

/*.w-checkbox[disabled] {*/
/*cursor: not-allowed;*/
/*opacity: .5;*/
/*}*/

.w-checkbox-input + label {
    position: relative;
    display: inline-block;
    padding-left: 20px;
    height: 16px;
    line-height: 13px;
    cursor: pointer;
    color: #444;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 0;
}

.w-checkbox-input + label:hover:before {
    animation-duration: 0.4s;
    animation-fill-mode: both;
    animation-name: hover-color;
}

.w-checkbox-input + label:hover {
    color: #2783F2;
}

.w-checkbox-input + label:before {
    position: absolute;
    top: 0px;
    left: 0;
    display: inline-block;
    width: 14px;
    height: 14px;
    content: '';
    border: 1px solid #c0c0c0;
}

.w-checkbox-input + label:after {
    position: absolute;
    display: none;
    content: '';
}

.w-checkbox-input[disabled] + label {
    cursor: not-allowed;
    color: #e4e4e4;
}

.w-checkbox-input[disabled] + label:hover,
.w-checkbox-input[disabled] + label:before,
.w-checkbox-input[disabled] + label:after {
    cursor: not-allowed;
}

.w-checkbox-input[disabled] + label:hover:before {
    border: 1px solid #e4e4e4;
    animation-name: none;
    opacity: .6;
}

.w-checkbox-input[disabled] + label:before {
    border-color: #e4e4e4;
    opacity: .6;
}

.w-checkbox-input:checked + label:before {
    animation-name: none;
}

.w-checkbox-input:checked + label {
    /*color: #2783F2;*/
    color: #444;
}

.w-checkbox-input:checked + label:after {
    display: block;
}

.w-checkbox-input + label:before {
    border-radius: 3px;
}

.w-checkbox-input + label:after {
    top: 2px;
    left: 5px;
    box-sizing: border-box;
    width: 5px;
    height: 8px;
    transform: rotate(45deg);
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    border-top: 0;
    border-left: 0;
}

.w-checkbox-input:checked + label:before {
    border: #2783F2;
    background: #2783F2;
}

.w-checkbox-input:checked[disabled] + label:before {
    border: #c9e2f9;
    background: #c9e2f9;
    opacity: .6;
}

.w-label {
    display: inline-block;
    font-size: 12px;
    color: #666;
    font-weight: 500;
    cursor: pointer;
}

.w-label.disabled {
    cursor: not-allowed;
    opacity: .4;

}

.w-radio {
    display: none
}

.w-radioInput {
    background-color: #fff;
    border: 1px solid #CECECE;
    border-radius: 100%;
    display: inline-block;
    height: 14px;
    margin-right: 6px;
    margin-top: -1px;
    vertical-align: middle;
    width: 14px;
    line-height: 1;
}

.w-radio[disabled] + .w-radioInput {
    cursor: not-allowed;
}

.w-radio:checked + .w-radioInput {
    border: 5px solid #2783F2;
}

/*按钮组件样式end*/
/*消息反馈提示框样式start*/
.w-messge-warp {
    position: fixed;
    display: inline-block;
    z-index: 100001;
    width: 500px;
    /*left: calc(50% - 250px);*/
    left: 50%;
    margin-left: -250px;
    top: 30%;
    padding: 16px 20px;
    background: #F3FBFF;
    border-radius: 2px;
    border: 1px solid;
}

.w-messge-warp > .w-message-icon > .w-message-defult-icon,
.w-messge-warp > .w-message-icon > .w-message-success-icon,
.w-messge-warp > .w-message-icon > .w-message-warn-icon,
.w-messge-warp > .w-message-icon > .w-message-error-icon {
    display: none;
}

.w-messge-warp.default > .w-message-icon > .w-message-defult-icon,
.w-messge-warp.success > .w-message-icon > .w-message-success-icon,
.w-messge-warp.warn > .w-message-icon > .w-message-warn-icon,
.w-messge-warp.error > .w-message-icon > .w-message-error-icon {
    display: inline-block;
}

.w-messge-warp.default {
    background: #f3fbff;
    border-color: #DAE6ED;
}

.w-messge-warp.success {
    background: #EDFBF0;
    border-color: #DCEBDB;
}

.w-messge-warp.warn {
    background: #FFFAF5;
    border-color: #FBF1E6;
}

.w-messge-warp.error {
    background: #FFF4F4;
    border-color: #FDE2E2;
}

.w-message-top {
    position: relative;
    width: 100%;
    height: 20px;

}

.w-message-icon {
    width: 20px;
    height: 20px;
}

.w-messge-title {
    /*width: calc(100% - 40px);*/
    width:400px;
    height: 20px;
    line-height: 20px;
    color:#FF7F7F;
    font-size: 14px;
    padding: 0 10px;
}

.w-message-icon.del {
    cursor: pointer;
    padding: 4px;
}

.w-message-p {
    position: relative;
    width: 100%;
    padding: 0 30px;
}

/*消息反馈提示框样式end*/
/*用户引导提示框 start*/
.w-guide {
    position: absolute;
    width: 188px;
    padding: 20px 20px 10px 20px;
    border-radius: 2px;
    background: #4DADFF;
    opacity: .7;
    z-index: 109;
}

.w-guide-main {
    position: relative;
    width: 100%;
    color: #fff;
}

.w-guide-point-top {
    position: absolute;
    width: 12px;
    height: 20px;
    top: -40px;
    /*left: calc(50% - 6px);*/
    left:50%;
    margin-left:-6px;
    text-align: center;
}

.w-guide-point-top > .w-guide-ball {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #5EB2FF;
    border-radius: 50%;
}

.w-guide-point-top > .w-guide-line {
    position: absolute;
    top: 12px;
    left: 5px;
    width: 1px;
    height: 8px;
    background: #5EB2FF;
}

.w-guide-point-left {
    position: absolute;
    width: 38px;
    height: 12px;
    top: 0px;
    left: -58px;
    /*text-align: center;*/
}

.w-guide-point-left > .w-guide-ball {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #5EB2FF;
    border-radius: 50%;
}

.w-guide-point-left > .w-guide-line {
    position: absolute;
    top: 5px;
    left: 12px;
    width: 25px;
    height: 1px;
    background: #5EB2FF;
}

.w-guide-bottom {
    position: relative;
    width: 100%;
    height: 20px;
    margin-top: 12px;
}

.w-guide-btn {
    cursor: pointer;
    display: inline-block;
    float: right;
    color: #fff;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
}

/*用户引导提示框 end*/

/*加载动画 start*/
.w-load {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #f3f6f8;
    opacity: .8;
    z-index: 900;
}

.w-load-min {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("dc-min-load.gif");
}

.w-load-img {
    position: relative;
    /*top: calc(50% - 50px);*/
    top:50%;
    margin: -50px  auto  0  auto;
    width: 50px;
    height: 50px;
    background: url("wjb-load.gif");
}

.w-load-msg {
    position: relative;
    /*top: calc(50% - 50px);*/
    top: 50%;
    margin-top: -50px;
    width: 100%;
    font-size: 14px;
    text-align: center;
}

/*加载动画 end*/
/*翻页器样式start*/
.w-page-box {
    position: relative;
    display: inline-block;
    height: 32px;
    margin: 0 auto;
}

.w-page-box:after {
    content: "";
    clear: both;
}

.w-page-item {
    float: left;
    display: inline-block;
    height: 32px;
    min-width: 32px;
    text-align: center;
    line-height: 32px;
    color: #444;
    font-size: 14px;
    cursor: pointer;
}

.w-page-more {
    float: left;
    display: inline-block;
    height: 32px;
    min-width: 32px;
    text-align: center;
    line-height: 32px;
    color: #444;
    font-size: 14px;
    cursor: default;
}

.w-page-item:hover {
    color: #2783F2;
}

.w-page-item.active {
    color: #2783F2;
}

.w-page-count {
    float: left;
    display: inline-block;
    height: 32px;
    min-width: 32px;
    text-align: center;
    line-height: 32px;
    color: #9B9B9B;
    font-size: 12px;
    cursor: pointer;
}

.w-page-left {
    position: relative;
    margin-right: 5px;
}

.w-page-left:after {
    position: absolute;
    content: "";
    width: 14px;
    height: 14px;
    /*top: calc(~'50% - 7px');*/
    /*left: calc(~'50% - 7px');*/
    top:50%;
    left: 50%;
    margin: -7px 0px  0px  -7px;
    background: url(wjb-img.png) -208px -10px;
}

.w-page-right {
    position: relative;
    margin-left: 5px;
}

.w-page-right:after {
    position: absolute;
    content: "";
    width: 14px;
    height: 14px;
    /*top: calc(~'50% - 7px');*/
    /*left: calc(~'50% - 7px');*/
    top:50%;
    left: 50%;
    margin: -7px 0px  0px  -7px;
    background: url(wjb-img.png) -232px -10px;
}

.w-page-left, .w-page-right {
    float: left;
    height: 32px;
    width: 32px;
    cursor: pointer;
    background: #fff;
}

.w-page-left.disabled, .w-page-right.disabled {
    cursor: not-allowed;
    opacity: .3;
}

.w-page-jump {
    position: relative;
    float: left;
    display: inline-block;
    /*padding-left: 20px;*/
    height: 32px;
}

.w-page-jump:after {
    content: '';
    clear: both;
}

.w-page-jump-span {
    float: left;
    display: inline-block;
    height: 32px;
    line-height: 32px;
    color: #444;
    font-size: 12px;
}

.w-page-input {
    float: left;
    display: inline-block;
    height: 32px;
    width: 60px;
    padding: 4px 5px;
}

.w-page-input > input {
    width: 100%;
    height: 24px;
    font-size: 12px;
    color: #444;
    border: 1px solid #E1E1E1;
    outline: none;
    padding: 0 10px;
}

.w-page-jump-sure {
    position: relative;
    float: left;
    display: inline-block;
    height: 32px;
    padding: 4px 5px;
}

.w-page-jump-btn {
    display: inline-block;
    width: 46px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    background: #fff;
    border: 1px solid #E1E1E1;
    font-size: 12px;
    color: #444;
    cursor: pointer;
}

.w-page-jump-btn:hover {
    color: #2783F2;
}

/*翻页器样式end*/
/*模态框样式 start*/
.w-modal {
    position: relative;
    width: 580px;
    background: #fff;
    border-radius: 3px;
    margin: 5% auto;
}

.w-modal.notice {
    width: 600px;
    margin-top: 10%;
    height: 270px;
}

.w-modal.biger {
    width: 980px;
}

.w-modal.big {
    width: 780px;
}

.w-modal.small {
    width: 380px;
}

.w-modal-head {
    width: 100%;
    height: 50px;
    padding: 14px 20px;
}

.w-modal-title {
    position: relative;
    display: inline-block;
    float: left;
    height: 22px;
    line-height: 22px;
    color: #9B9C9C;
    font-size: 16px;
    font-weight: 500;
}

.w-modal-close {
    position: relative;
    display: inline-block;
    float: right;
    height: 22px;
    width: 14px;
    padding: 2px 1px;
}

.w-modal-body {
    position: relative;
    width: 100%;
    padding: 0 20px;
}

.w-modal-foot {
    width: 100%;
    padding: 14px 20px;
}

.w-modal-foot-btn {
    display: inline-block;
    height: 36px;
    float: right;
    margin-left: 10px;
}

.w-modal-foot-btn-add {
    line-height: 36px;
    min-width: 90px;
    text-align: center;
    background: #FFFBFCFC;
}

/*模态框样式 end*/
/*标签选择器 start*/
.w-lable-select {
    position: relative;
    display: inline-block;

    font-size: 12px;
    color: #666;
    background: #fff;
    border-radius: 2px;
    border: 1px solid #E1E1E1;
    cursor: pointer;
}

.w-lable-select.defult {
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 22px;
    padding-right: 22px;
}

.w-lable-select:hover {
    border: 1px solid #2783F2;
}

.w-label-checked {
    position: absolute;
    display: none;
    right: -1px;
    bottom: -1px;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    background: #2783F2;
}

.w-label-checked:after {
    display: block;
    content: '';
    width: 14px;
    height: 14px;
    background: url(wjb-img.png) -136px -10px;
}

.w-lable-select.checked {
    border: 1px solid #2783F2;
}

.w-lable-select.checked > .w-label-checked {
    display: block;
}

.w-lable-select[disabled=true] {
    pointer-events: none;
    opacity: .37;
}

/*.w-lable-select.checked:after{*/
/*position: absolute;*/
/*display: block;*/
/*content: '';*/
/*width: 14px;*/
/*height: 14px;*/

/*}*/
/*标签选择器 end*/

/*气泡提示样式 start*/
.w-bubble-body {
    display: none;
    position: fixed;
    z-index: 100000;
    background: #fff;
    border: 1px solid #e7ecf3;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.04);
    border-radius: 2px;
}

.w-bubble-defult {
    padding: 15px 10px;
}

.w-bubble-body.show {
    display: inline-block;
}

/*气泡提示样式 end*/

/*日期组件样式 start*/

.w-date-compmon{
    position: relative;
    display: inline-block;
    height: 32px;
    width: 120px;
    border: 1px solid #E1E1E1;
    border-radius: 2px;
}
.w-date-dual{
    position: relative;
    display: inline-block;
    height: 32px;
    width: 220px;
    border: 1px solid #E1E1E1;
    border-radius: 2px;
}
/*日期组件样式 end*/

/*解决知识库表格序号问题*/
td>ol>li {
    margin-left: 20px;
}