@import "ladder-base";
@import "ladder-animate";
// @charset "utf-8";
*{
    margin: 0;
    padding: 0;
    font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
    //font: 12px/20px "Microsoft YaHei", Tahoma, Helvetica, Arial, "宋体", sans-serif;
}
html,body{
    height: 100%;
}
//Ladder类库主体样式策略
@font-face {
    font-family: @icon-font-name;
    src: url('aliiconfont/iconfont.eot');
    src: url('aliiconfont/iconfont.eot?#iefix') format('embedded-opentype'),
    url('aliiconfont/iconfont.woff') format('woff'),
    url('aliiconfont/iconfont.ttf') format('truetype'),
    url('aliiconfont/iconfont.svg#iconfont') format('svg');
}
@{icon-font-class} {
    font-family:@icon-font-name !important;
    font-size:@font-small;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
li{list-style: none}
input,select,textarea,button{
    border: @border-color-base solid 1px;
    outline: none;
}
input[type='radio'],
input[type='checkbox']{vertical-align:middle;margin:0;}
table{
    cellpadding:0;
    cellspacing:0;
    border:0;
    border-collapse:collapse;
}
::-webkit-input-placeholder {
color:@color-lighter;
font-size:@font-small
}
::-webkit-scrollbar {
    width: @scrollbar-size;
    height: @scrollbar-size;
}
::-webkit-scrollbar-track{
    border-radius: @scrollbar-radius;
    background-color: @scrollbar-track;
}
::-webkit-scrollbar-thumb {
    border-radius: @scrollbar-radius;
    background-color: @scrollbar-thumb;
}
//常规CSS定义
.w20{width: 20px}
.w40{width: 40px}
.w50{width: 50px}
.w60{width: 60px}
.w70{width: 70px}
.w80{width: 80px}
.w100{width: 100px}
.w120{width: 120px}
.w150{width: 150px}
.w200{width: 200px}
.w250{width: 250px}
.w300{width: 300px}
.w500{width: 500px}
.h20{height: 20px}
.h22{height: 22px}
.h23{height: 23px}
.h24{height: 24px}
.h25{height: 25px}
.h28{height: 28px}
.h30{height: 30px}
.h32{height: 32px}
.h35{height: 35px}
.h40{height: 40px}
.h45{height: 45px}
.h50{height: 50px}
.h60{height: 60px}
.h70{height: 70px}
.h80{height: 80px}
.h100{height: 100px}
.h150{height: 150px}
.h200{height: 200px}
.h250{height: 250px}
.h300{height: 300px}
.w100p{width: @size-100p}
.h100p{height: @size-100p}
.w100p-1{width: calc(@size-100p - 1px);}
.w100p-2{width: calc(@size-100p - 2px);}
.w100p-3{width: calc(@size-100p - 3px);}
.w100p-5{width: calc(@size-100p - 5px);}
.p10{padding: 10px;}
.fl{float: @fl;}
.fr{float: @fr}
.font12{font-size: 12px}
.font14{font-size: 14px}
.font16{font-size: 16px}
.font18{font-size: 18px}
.font-small{font-size: @font-small}
.font-base{font-size: @font-base}
.font-normal{font-size: @font-normal}
.font-big{font-size: @font-big}
.clearfix{zoom:1;}
.clearfix:after{
    clear:both;
    display:block;
    visibility:hidden;
    height:0;
    line-height:0;
    content:'';
}
.hide{display: none}
.inline-block{display: inline-block}
.text-center{text-align: center}
.text-left{text-align: center}
//border、outline: none;
.shape-clear{@shape-clear{}}
.mart5 {margin-top: 5px;}
.mart2 {margin-top: 2px;}
.mart3 {margin-top: 3px;}
.mart1 {margin-top: 1px;}
.marr5 {margin-right: 5px;}
.marl5 {margin-left: 5px;}
.marb5 {margin-bottom: 5px;}
.mar5 {margin: 5px;}
.padt5 {padding-top: 5px;}
.padr5 {padding-right: 5px;}
.padl5 {padding-left: 5px;}
.padb5 {padding-bottom: 5px;}
.pad5 {padding: 5px;}
//.shadow-base{
//    box-shadow: 1px 1px 5px #ddd;
//}
.shadow-base-inset{
    box-shadow: 1px 1px 5px #ddd inset;
}
/*常用背景色*/
.ladder-background-primary{background-color: @background-blue;}
.ladder-background-success{background-color: @background-green;}
.ladder-background-warning{background-color: @background-origin;}
.ladder-background-danger{background-color: @background-red;}

.ladder-color-lighter{color: @ladder-color-lighter;}
.ladder-color-light{color: @ladder-color-light;}
.ladder-color-base{color: @ladder-color-base;}
.ladder-color-dark{color: @ladder-color-dark;}

.ladder-background-base{background-color: @ladder-background-base}
.ladder-background-dark{background-color: @ladder-background-dark}
.ladder-background-light{background-color: @ladder-background-light}
.ladder-background-lighter{background-color: @ladder-background-lighter}
.ladder-background-floor{background-color: @ladder-background-floor}

.ladder-colour-base{background-color: @ladder-background-base;color: @ladder-color-base;}
.ladder-colour-dark{background-color: @ladder-background-dark;color: @ladder-color-dark;}
.ladder-colour-light{background-color: @ladder-background-light;color: @ladder-color-light;}
.ladder-colour-lighter{background-color: @ladder-background-lighter;color: @ladder-color-lighter;}
.ladder-colour-floor{background-color: @ladder-background-floor;color: #333;}

.ladder-text-color-base{color:@color-base;}
.ladder-text-color-dark{color: @color-dark}
.ladder-text-color-light{color:@color-light}
.ladder-text-color-lighter{color: @color-lighter}

.ladder-border-base{border:@border-color-base solid 1px;}
.ladder-border-dark{border:@border-color-dark solid 1px;}
.ladder-border-light{border:@border-color-light solid 1px;}

.ladder-height{height: @height-base;line-height: @height-base}
.ladder-height-inner{height: @height-inner;line-height: @height-inner}
.ladder-height-outer{height: @height-outer;line-height: @height-outer}

.unselect,.unselect *{@unselect()}
input,textarea{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}
/*常用的基本样式*/
.ladder-input[type=text],
.ladder-text{
    height: @height-base;
    text-indent: 8px;
    border-radius: @radius-base;
    outline: none;
    &:focus{
        border-color: @ladder-background-base;
    }
}
.ladder-input[type=checkbox],
.ladder-input[type=radio],
.ladder-checkbox,
.ladder-radio{
    position: relative;
    height: 0 !important;
    transition: all 0.5s;
}
.ladder-input[type=checkbox]:before,
.ladder-checkbox:before,
.ladder-input[type=radio]:before,
.ladder-radio:before{
    content: "";
    display: inline-block;
    position: absolute;
    top: -10px;
    left: 0;
    height: 14px;
    width: 14px;
    border: @border-color-base solid 1px;
    //border-radius: 50%;
}
.ladder-input[type=checkbox]:checked:before,
.ladder-checkbox:checked:before,
.ladder-input[type=radio]:checked:before,
.ladder-radio:checked:before{
    border:@ladder-background-base solid 1px;
    background:@ladder-background-base ;
}
.ladder-input[type=checkbox]:checked:after,
.ladder-checkbox:checked:after,
.ladder-input[type=radio]:checked:after,
.ladder-radio:checked:after{
    font-family: @icon-font-name;
    content: "\e991";
    display: inline-block;
    position: absolute;
    top: -10px;
    left: 1px;
    color: #fff;
    width: 14px;
    height: 14px;
    font-size: 16px;
    line-height: 21px;
}
.ladder-input[type=radio]:checked:after,
.ladder-radio:checked:after,
.ladder-input[type=radio]:before,
.ladder-radio:before{
    border-radius: 50%;
    left: 0;
}
.ladder-input[type='text'],
.ladder-input[type='number']{
  position: relative;
  height: 34px;
  width: 100%;
  border-radius: 4px;
  margin: 0 auto;
  padding: 0 6px;
  outline: none;
  vertical-align: middle;
  box-sizing: border-box;
}
.ladder-input[type='text']:focus,.ladder-input[type='number']:focus{
  border:solid 1px @ladder-color-lighter;
}

.ladder-tab>li{
    line-height: @height-inner;
    height: @height-inner;
    background-color: @ladder-background-floor;
    color: @ladder-color-base;
    cursor: pointer;
    text-align: center;
    position: relative;
    float: left;
    padding: 0 5px;
    box-sizing: border-box;
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    transition: 0.3s all linear;
    &:not(:first-child):before {
        content: "";
        position: absolute;
        left: 0;
        top: 10px;
        bottom: 10px;
        width: 1px;
        background: #ddd;
    }
    &:after {
        content: "";
        position: absolute;
        left: 10px;
        width: 0;
        opacity: 1;
        bottom: 0;
        height: 2px;
        background: @ladder-background-base;
        z-index: 1;
        transition: width 0.3s;
    }
    &.current{
        color: @ladder-color-dark;
        font-weight: bold;
        &:after {
            content: "";
            position: absolute;
            left: 10px;
            width: calc(100% - 20px);
            opacity: 1;
            bottom: 0;
            height: 2px;
            background: @ladder-color-lighter;
            z-index: 1;
            transition: width 0.3s;
        }
    }
}
.ladder-list>li{
    height: @height-outer;
    line-height: @height-outer;
    position: relative;
    transition: all 0.5s;
    cursor: pointer;
    border-bottom: 1px dotted @border-color-base;
    &:hover{
        background-color: @ladder-background-lighter-hover;
        color: #fff;
    }
}
.ladder-label{
    width: 100px;
    text-align: center;
    color: @color-base;
    height: @height-base;
    line-height: @height-base;
    background-color: transparent;
    display: inline-block;
}
//线性botton
.ladder-button{
    font: unset;
    padding: 0 15px;
    color: @ladder-color-base;
    height: @height-base;
    line-height: @height-base;
    cursor: pointer;
    background: @ladder-background-floor;
    border-radius: @radius-base;
    font-size: @font-base;
    border: @ladder-border-color solid 1px;
    box-sizing: border-box;
    margin-right: 6px;
    transition: all @transition-time-base;
    @shape-clear{}
    &:hover{
        background: @ladder-background-base-hover;
        color: #fff;
    }
    &.reverse{
        background: @ladder-background-base-hover;
        color: #fff;
        &:hover{
            color: @ladder-color-base;
            background: @ladder-background-floor;
        }
    }
}
.ladder-small-button{
    .ladder-button;
    font-size: @font-small;
    height: @height-small;
}
//背景色button
@color-button:.colorButton;
@{color-button}{
    margin: 0;
    padding: 0 5px;
    /* background-image: url(images/datagrid_hbtns_bg01.jpg); */
    border: none;
    color: #fff;
    border-radius: 2px;
    background: @ladder-background-base;
    font-size: 14px;
    box-sizing: unset;
    cursor:pointer;
    @shape-clear{}
    &:hover{
        background: @ladder-background-base-hover;
    }
}

//正常大小按钮
@ladder-color-button:.ladder-colorButton;
@{ladder-color-button}{
    .colorButton;
    height: @height-base;
};

//小按钮
@small-color-button:.ladder-small-colorButton;
@{small-color-button}{
    .colorButton;
    font-size: @font-small;
    height: @height-small;
}

.Ladder-ButtonGroup{
    font: @font;
    display: inline-block;
    min-width: @btn-min-width;
    color: @ladder-color-base;
    border: 1px solid @ladder-border-color;
    height: @height-inner;
    line-height: @height-inner;
    background-color: @ladder-background-floor;
    margin: 0 0 0 2px;
    padding: 0 8px;
    cursor: pointer;
    outline: none;
    text-align: center;
    position: relative;
    border-radius: @radius-base;
    .title{
        height: @height-inner;
        line-height: @height-inner;
        padding: 0 6px 0 0;
    }
    .down{
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 7px solid @border-color-dark;
    }
    .up{
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 7px solid @border-color-dark;
    }
    .icon{
        position: absolute;
        line-height: 20px;
        color: @color-lighter;
        font-size: @font-small;
        height: 0;
        width: 0;
        top: (@height-base/2 - 4px);
        right: 4px;
    }
    ul{
        position: absolute;
        top:100%;
        right: -2px;
        display: none;
        margin-top: 4px;
        background: @ladder-background-floor;
        z-index: 99999;
        //padding: 0 0 4px 4px;
        li{
            display: block;
            clear: both;
            border-radius: @radius-small;
            height: @height-small;
            margin: 1px 0;
            min-width: 80px;
            text-align: center;
            transition: all @transition-time-base;
            line-height: @height-small;
            padding: 0 8px;
            color: @ladder-color-base;
            border: 1px solid @ladder-border-color;
            &:hover{
                background-color: @ladder-background-base;
                color: @ladder-background-floor;
            }
        }
    }
}
//todo:384355
.yui-intab{
    width: 100%;
    /*border-bottom: 5px solid #9e866e;*/
    border-bottom: 5px solid #384355;
    height: 28px;
    clear: both;
    box-sizing: content-box;
    overflow: hidden;
    font: @font;
}
.yui-intab>.yui-intab-tabs{
    height: 28px;
    float: @fl;
}
.yui-intab li{
    display: inline-block;
    height: 28px;
}

.yui-intab>.yui-intab-tabs li {
    width: auto;
    color: #384355;
    float: left;
    cursor: pointer;
    /*background-image: url("skin/skin_default/tab02.png");*/
}
//todo:f5f7fb
.yui-intab .yui-intab-tabs .current{
    /*color: #fff;*/
    color: #f5f7fb;
    /*background-image: url("skin/skin_default/tab01.png");*/
}
/*intab的标题样式*/
.yui-intab .yui-intab-tabs .current s{
    /*background-image:url("skin/skin_default/intab_left_02.png");*/
    background-image:url("skin/skin_black/intab_left_04.png");
}
.yui-intab .yui-intab-tabs .current i{
    /*background-image: url("skin/skin_default/intab_right_02.png");*/
    background-image: url("skin/skin_black/intab_right_04.png");
}
.yui-intab .yui-intab-tabs .current span{
    /*background-image: url("skin/skin_default/intab_center_02.png");*/
    background-image: url("skin/skin_black/intab_center_04.png");
}
.yui-intab li>s{ float: left;display: inline-block;height: 28px;width:5px;
    /*background-image: url("skin/skin_default/intab_left_01.png");*/
    background-image: url("skin/skin_black/intab_left_03.png")
}
.yui-intab li>span{
    float: @fl;
    display: inline-block;
    height: 28px;
    width:auto;
    line-height: 28px;
    padding: 0 5px;
    /*background-image: url("skin/skin_default/intab_center_01.png");*/
    background-image: url("skin/skin_black/intab_center_03.png");
}
.yui-intab li>i{
    float: @fl;
    display: inline-block;
    height: 28px;
    width:32px;
    /*background-image: url("skin/skin_default/intab_right_01.png");*/
    background-image: url("skin/skin_black/intab_right_03.png");
}
.yui-intab>.tabbtns {
    position: relative;
    right: 0;
    top: 0;
    float: @fr;
}
.yui-intab>.tabbtns ul{
    list-style: none;
    display: inline-block;
}
.yui-intab>.tabbtns>ul>li{float: @fl;}
.yui-intab>.tabbtns>ul>li>button{
    border-radius: @radius-base;
    width: 100px;
    height: @height-base;
    margin:0 3px;
}
.yui-intab>.tabbtns>.otherView{
    display: inline-block;
    position: relative;
    height: auto;
    line-height: @height-base;
}
.inpage {
    width: @size-100p;
    height: @size-100p;
    overflow-y: hidden;
    display: none;
}
.swapview {
    border: 1px solid @border-color-dark;
    overflow-y: auto;
    border-top: none;
}
.swapview iframe{
    width: @size-100p;
    height: @size-100p;
    border:none;
    margin: 0;
    padding: 0;
}
.alert {
    overflow: hidden;
    z-index: 1011;
    display: block;
    width: 300px;
    margin-left: -150px;
    position: absolute;
    top: 0;
    left: 50%;
}
.alert .button{
    border: 1px solid @border-color-dark;
    border-radius: @height-base;
    display: block;
    height: 23px;
    line-height: 24px;
    cursor: pointer;
    overflow: hidden;
    font-weight: bold;
    float: @fl;
    padding: 0 15px;
    text-decoration: none;
    margin-left: 5px;
    font-size: @font-base;
}
.alert .toolBar {
    display: block;
    overflow: hidden;
    height: 25px;
    padding-top: 5px;
    text-align: right;
    float: @fr;
    padding-right: 5px;
}
.alert .toolBar li{float: @fl}
.alert .confirm .alertInner {
    border-color: #b8d0d6;
    background: #fefacf;
}
.alert h1 {
    display: block;
    overflow: hidden;
    height: @height-base;
    line-height: @height-base;
    margin-bottom: 10px;
    padding: 0 0 0 25px;
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: @border-color-dark;
    background: url(images/alertpanel_icon.png) no-repeat;
    background-position: 2px -92px;
    font-size: 16px;
    font-family: 宋体;
}
.alert .error{background-color:#FEFACF ;  }
.alert .alertInner .msg {
    margin: 10px;
    max-height: 200px;
    line-height: 1.3em;
    /*overflow: auto;*/
}
.alert .alertInner {
    display: block;
    padding: 0 9px 9px 9px;
    text-align: left;
    border-style: solid;
    border-width: 1px;
    font-size: @font-small;
}
.alert .alertContent {
    display: block;
    overflow: hidden;
    padding: 5px 5px 1px 5px;
    border-style: solid;
    border-width: 0 1px;
}
.alert .alertContent {
    border-color: #b8d0d6;
    background: #eef4f5;
}
.alert .alertFooter{
    width: 100%;
    height: 4px;
    background-color: #eef4f5;
    border-radius: @radius-base
}
.yui-icon16{
    background-image: url('images/b1616.png');
    width: 16px;
    height: 16px;
}
.yui-icon16-ar{background-position: -4px -4px;}
@-webkit-keyframes roll{
    from {-webkit-transform:rotate(0deg)} to {-webkit-transform:rotate(360deg)}
}
.yui-floatmenu{
    margin-top:2px;
    margin-right: 50px;
    margin-bottom: 2px;
    font: @font;
}
.yui-floatmenu a{
    display: inline-block;
    border: 1px solid @border-color-dark;
    text-align: center;
    vertical-align: middle;
    line-height: @height-base;
    width: 70px;
    height: @height-base;
}
.yui-btn-curd{
    background-color: #DAC4AD;
    background-repeat: no-repeat;
    background-position:3px 6px;
    width: auto;
    height: @height-base;
    border: 1px solid #DAC4AD;
    text-align: left;
    padding: 0 5px 0 19px;
}
.yui-btn-curd:hover{
    border: 1px solid @border-color-light;
}
.yui-btn-add{
    background-image: url("images/add_ico.png");
}
.yui-btn-edit{
    background-image: url("images/edit_ico.png");
}
.yui-btn-delete{
    background-image: url("images/delete_ico.png");
}
.yui-complete {
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    height: 100px;
    display: none;
    padding-left: 0;
    outline: none;
    background-color: @ladder-background-floor;
    border: 1px solid @border-color-base;
    opacity: 1;
    font-size: @font-small;
    cursor: pointer;
    .selected {
        background-color: @background-light;
    }
    li {
        height: 20px;
        display: flex;
        padding: 6px;
        margin: 4px;
        border-bottom: 1px dotted @border-color-light;
        overflow: visible;
        transition: all 0.3s;
    }
    li:hover{
        color: @MainTonal;
        //font-weight: bold;
    }
}
/*便签组件*/
.yui-note {
    padding-bottom:5px;
    background:url("images/note_bg02.jpg") left bottom repeat-x;
    border:@border-color-base 1px solid;
    margin:0 auto;
    position:relative;
}
.yui-note>.content {
    padding-top:50px;
    padding-bottom:10px;
    background:#f8f9fa url("images/note_bg01_big.jpg") left top repeat-x;
}
.yui-note>.small{
    padding-top:35px;
    background-image: url("images/note_bg01_small.jpg");
}
.yui-note.small{
    padding-top:10px;
}
.yui-note>.radiu_tl,.yui-note>.radiu_tr {
    width:6px;
    height:6px;
    position:absolute;
    top:-1px;
}
.yui-note>.radiu_tl {
    background:url("images/note_l_t.jpg") no-repeat;
    left:-1px;
}
.yui-note>.radiu_tr {
    background:url("images/note_r_t.jpg") no-repeat;
    right:-1px;
}
.yui-note>.radiu_bl,.yui-note>.radiu_br {
    width:10px;
    height:10px;
    position:absolute;
    bottom:-1px;
}
.yui-note>.radiu_bl{
    background:url("images/note_l_b.jpg") no-repeat;
    left:-1px;
}
.yui-note>.radiu_br{
    background:url("images/note_r_b.jpg") no-repeat;
    right:-1px;
}

//表格选择器组件
.Ladder-TableCombox{
    font: @font;
    .select-query-area{
        /*width: 100%;*/
        height: 25px;
        padding: 8px 10px;
        background: #fff;
        .shadow-base;
        box-sizing: unset;
        font: @font;
        .close{
            display: block;
            float: @fr;
            height: 25px;
            width: 30px;
            background: url(images/icon-ui.png) no-repeat 0 -25px;
            background-size: 25px;
            overflow: hidden;
            margin: 0;
            cursor: pointer;
        }
        .caption{
            font-weight: bold;
            padding-left: 5px;
            height: 25px;
            line-height: 27px;
            font-size: 12px;
            color: @MainTonal;
        }
        &>label{
            margin-left: 4px;
            margin-right: 2px;
            color: @color-base;
        }
        &>input{
            width: 160px;
            height: 26px;
            border: 1px solid @border-color-base;
            border-radius: @radius-base;
            background: url(images/icon-ui.png) no-repeat 6px 2px;
            background-size: 22px;
            margin: 0;
            padding-left: 34px;
            box-sizing: border-box;
        }
        &>.query-button{
            /*background-image: url(../images/search.jpg);*/
            width: 70px;
            height: 22px;
            margin-left: 85px;
        }
        &>.reset-button{
            width: 70px;
            height: 22px;
            margin-left: 35px;
            /*background-image: url(../images/reset.jpg);*/
        }
    }
    .select-table-contain{
        /*max-height: 200px;*/
        margin-top: 5px;
        overflow: auto;
        background: @ladder-background-floor
    }
    .select-table{
        border-collapse: collapse;
        border: none;
        width: @size-100p;
    }
    .select-table-head{
        background: #c6d4ef;
        //background: @ladder-background-lighter;
        &>tr>th{
            height:@height-base;
            /*border: solid 1px #cfdcf5 ;*/
            border-collapse: collapse;
            text-align: center;
            color: @color-base;
        }
    }
    .select-table-body>tr>td{
        height:@height-base;
        border-bottom: solid 1px #D4DBE9;
        border-right: solid 1px #D4DBE9;
        border-collapse: collapse;
        text-align: center;
        color: @color-light;
        cursor: pointer;
    }
    .select-table-body>tr:hover{
        background-color: @background-lighter;
    }
    .select-table-body>tr>td>.js-select{
        appearance: none;
        -webkit-appearance: none;
        border: 0;
        outline: none;
        cursor: pointer;
    }
    .select-table-body>tr>td>.js-select:after{
        display: block;
        content: '';
        height: 14px;
        width: 14px;
        border: @border-color-base solid 1px;
        background: @ladder-background-floor;
        border-radius: 50%;
        margin: 5px 0;
    }
    .select-table-body>tr>td>.js-select:checked:after{
        width: 17px;
        height: 17px;
        background: url(images/icon-ui.png) no-repeat 0 -34px;
        background-size: 17px;
        border: 0;
    }
    .select-table-foot{
        width: 100%;
        height: 30px;
        background: #c6d4ef;
        button{
            float: right;
            width: 10px;
            height: 10px;
            background: url(images/icon-ui.png) no-repeat;
            background-size: 10px;
            border: 0;
            outline: 0;
            overflow: hidden;
            cursor: pointer;
        }
        &>.firstpage{
            margin: 10px 10px 0 0;
            background-position: 0 -30px;
        }
        &>.backpage{
            margin: 10px 20px 0 0;
            background-position: 0 -40px;
        }
        &>.nextpage{
            margin: 10px 0 0 20px;
            background-position: 0 -50px;
        }
        &>.lastpage{
            margin: 10px 20px 0 10px;
            background-position: 0 -60px;
        }
    }
    .select-table tbody {
        display: block;
        overflow-y: auto;
        /*height: 170px;*/
    }
    .select-table thead,.select-table tbody tr,.select-table tfoot{
        display: table;
        width: 100%;
        table-layout: fixed;
        box-sizing: border-box;
    }
}
.table-fill-blank{
    height:0;
    text-align: center;
    width: @size-100p;
}

.MultiSelect option{
    padding: 5px;
    border-bottom: 1px dotted @border-color-dark;
}
.tacktips{
    /*border: 1px solid #ccc;*/
    border-radius: @radius-big;
    width: auto;
    height: auto;
    padding: 4px 4px 0;
    position: absolute;
    top: 100px;
    left: 200px;
    background-color: #8282d2;
    z-index: 100;
}
.tacktips>.arrows{
    position: absolute;
    top: 100%;
    content: " ";
    left:10%;
    width:0;
    height:0;
    margin-top: -5px;
    border-left:12px solid transparent;
    border-top:12px solid #8282d2;
    border-right:12px solid transparent;
    z-index: 99;
}
.tacktips>.content{
    position: relative;
    width: auto;
    height: auto;
    color: #fff;
    z-index: 100;
    font-size: @font-small;
}
.tacktips>.content>.display{
    line-height: 20px;
    display: inline-block;
}
.Ladder-DataBlock{
    .DataBlock{
        margin-top: 2px;
    }
    .DataBlock:nth-of-type(1){
        margin-top:0;
    }
    .header{
        height: @height-inner;
        line-height: @height-inner;
        border:none;
        border-bottom: 1px solid @ladder-color-base;
        padding: 0 4px;
        text-align: left;
        clear: both;
        position: relative;
        cursor: pointer;
        @unselect();
        .links {
            display: inline-block;
            height: calc(100% - 4px);
            float: right;
            position: relative;

            .ladderfont {
                margin: 0 3px;
                position: relative;
                top: 10px;
                font-size: 20px;
                color: @ladder-color-base;
            }
        }
    }
}
.DataBlock{
    position: relative;
    box-sizing: border-box;
    padding: 0;
    * {
        box-sizing: border-box;
        font: @font;
    }
    @unselect();
}

.DataBlock>.caption{
    width: 100%;
    height: @height-base;
    line-height: @height-base;
    margin: 0 auto;
    border: 1px solid @ladder-color-lighter;
    border-radius: @radius-base;
    background-color: @background-lighter;
    color: @color-base;
    position: relative;
    overflow: hidden;
    &>input[type=checkbox]{
        margin: 0 3px;
        width: 15px!important;
    }
    .descr{
        margin-left: 5px;
        width:calc(100% - 60px);
        white-space:nowrap;
    }
    .actions{
        display: inline-block;
        position: absolute;
        right: 0;
        top: 0;
        height: @height-inner;
        line-height: @height-inner;
        z-index: 2;
        background-color: @background-lighter;
        .del,.open,.down,.up{
            margin:0 3px;
            transition: all 0.8s;
            height: 100%;
            line-height: 100%;
            width: 20px;
            cursor: pointer;
            position: relative;
            display: inline-block;
        }
        .del:after,.open:after,.down:after,.up:after{
            position: absolute;
            font-family: @icon-font-name;
            top: 12px;
            font-size: 18px;
        }
        .del:after{
            content:"\e797";
        }
        .open:after{
            content:"\e913";
        }
        .down:after{
            content:"\e661";
        }
        .up:after{
            content:"\e664";
        }
        .ladderfont{
            font-size: 18px;
            font-weight: 500;
        }
        .ladderfont:hover{
            font-weight: 900;
            color: @color-dark;
        }
    }
}
.DataBlock>.dataview{
    display: none;
    position: absolute;
    z-index: 5;
    top: @height-base;
    background-color: @background-lighter;
    width: 100%;
    .text{
        text-indent: 1em;
        padding: 3px 3px;
        line-height: 25px;
        color: @color-light;
    }
    .keyvalue{
        text-align: center;
        table{
            margin: 0 auto;
            width: 100%;
            tr td{
                padding: 4px;
            }
            tr td:first-child{
                font-size: 14px;
                font-weight: 800;
                color: @color-base;
            }
        }
    }
}
.yui-morequery{
    position: relative;
    width: 100%;
    min-width: 700px;
    overflow: hidden;
    box-sizing: content-box;
    margin: 0 auto;
    font: @font;
    /* max-height: 500px; */
    /* clear: both; */
    /* height: 500px; */
    /* height: auto; */
}
.yui-morequery .ladderfont{
    font-size: @font-small;
}
.yui-morequery .yui-morequery-mainpanel input{
    height: 23px;
    border-radius: 2px;
    border: 1px solid #c6d5e0;
    line-height: 23px;
}
.yui-morequery .search_input{
    background: url(images/search_bg.png) no-repeat right;
    width: 151px;
    border-radius: 0;
}
.yui-morequery .yui-morequery-head{
    height: 38px;
    border-bottom: 2px solid @border-color-dark;
    width: 100%;
}
.yui-morequery .abtns{
    padding: 15px 5px 0 0;
    float: right;
    //color: #3d89cc;
    color: @ladder-color-base;
}
.yui-morequery .abtns a{
    padding-right: 4px;
}
.yui-morequery .abtns .ladderfont{
    margin-left: 3px;
}
.yui-morequery .tpls ul li {
    padding: 7px 12px;
    float: left;
    background: #f5f5f5;
    cursor: pointer;
    height: 20px;
    border: 1px solid #fff;
    box-sizing: content-box;
}
.yui-morequery .tpls .current {
    background: @ladder-color-dark;
    color: #FFFFFF;
}
.yui-morequery .tpls .nosave:after{
    content: "*";
    font-weight: bolder;
    margin-left: 2px;
}
.yui-morequery-mainpanel{
    clear: both;
    width: 800px;
}
.yui-morequery-fields{
    padding: 5px 6px 10px 3px;
    float: left;width: 155px;
    /*border-right: 1px solid #eee;*/
}
.yui-morequery-fields .fielditem{
    padding: 6px 0 0 5px;
    color: @ladder-color-dark;
}
.yui-morequery-fields .columns{
    float: left;
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: 7px;
    width: 149px;
    border-right: 1px solid @border-color-dark;
    cursor: pointer;
}
.yui-morequery .templateTab{
    overflow-x: hidden;
    overflow-y: auto;
}
.yui-morequery .queryitem label{
    width: 60px;
    display: inline-block;
    text-align: center;
}
.yui-morequery .queryitem .op,.yui-morequery .queryitem select{
    width: 60px;
    height: 23px;
    line-height: 23px;
    padding: 0;
    text-align: center;
}
.yui-morequery .queryitem .op option,.yui-morequery .queryitem select option{
    padding: 2px;
}
.yui-morequery .queryitem{
    margin-top: 5px;
    padding-left: 5px;
}
.yui-morequery .queryitem i{
    color: @ladder-color-dark;
}
.yui-morequery .submit{
    border-radius: 3px;
    background: @ladder-background-dark;
    //background: #3d89cc;
    border: none;
    color: #FFFFFF;
    padding: 5px 20px;
    height: @height-base;
    width: 120px;
    font-size: 16px;
    cursor: pointer;
    outline: none;
}
.yui-morequery .cancel{
    border-radius: 3px;
    background: @background-origin;
    border: none;
    color: #FFFFFF;
    margin-left: 15px;
    padding: 5px 20px;
    height: @height-base;
    width: 120px;
    font-size: 14px;
    cursor: pointer;
    outline: none;
}
.yui-morequery .addInputOuter{
    left:0;
    top:0;
    bottom: 0;
    right: 0;
    background-color :#000;
    opacity :0.3;
    filter:alpha(opacity=30);
    position: absolute;
    display: none;
}
.yui-morequery .addInput{
    padding: 10px 8px;
    position: absolute;
    top:50%;
    left:50%;
    margin-left: -150px!important;
    margin-top: -30px!important;
    z-index: 500;
    background-color:#fff
}
.yui-morequery{
    padding-bottom: 5px;
    .condition-addAndBtn{
        margin: 0 10px 5px 10px;
        //border-color: @border-color-origin;
        border-color: @color-green;
        color: @color-green;
        outline: none;
        &:hover{
            background: @color-green !important;
            color: #fff;
        }
    }
    .condition-addOrBtn{
        margin-left: 25px;
        margin-top: 5px;
        outline: none;
    }
    .condition-block{
        background-color: #f5f7fa;
        margin: 5px 0;
        padding: 5px;
    }
    .condition-block:nth-of-type(1){
        margin-top: 0;
    }
    .condition-block>ul>li{
        padding: 5px 10px;
        position: relative;
        height:@height-outer;
        line-height:@height-outer;
        display: flex;
        flex-direction: row;
        *{
            outline-width: 1px;
            outline-color: #ddd;
            cursor: pointer;
        }
        select{
            height: @height-base;
            line-height: @height-base;
            width: 100%;
            padding-left: 5px;
        }
        &>.condition-fieldname{
            display: flex;
            float: left;
            //display: inline-block;
            height: @height-outer;
            line-height: @height-outer;
            //background-color: #0a001f;
            margin-right: 5px;
            width: 180px;
            &>.fieldinput{
                height: @height-base;
                line-height: @height-base;
                width: 145px;
                padding-left: 5px;
                box-sizing: border-box;
            }
        }
        &>.condition-op{
            //display: inline-block;
            //padding-top: 4px;
            //float: left;
            height: @height-outer;
            line-height: @height-outer;
            //background-color: #901280;
            margin-right: 5px;
            width: 80px;
        }
        &>.condition-input{
            display: flex;
            min-width: 200px;
            //display: inline-block;
            float: left;
            //line-height: @height-outer;
            //height: @height-outer;
            //background-color: #e8571d;
            &>input[type='text']{
                height: @height-base;
                line-height: @height-base;
                width: 250px;
                border-radius: 4px;
                padding-left: 5px;
                box-sizing: border-box;
            }
        }
        &>.condition-del{
            //position: relative;
            //top: 5px;
            font-size: 24px;
            //left: 5px;
            color: #ccc;
            margin-left: 10px;
            &:hover{
                color: #999;
                font-weight: bolder;
            }
        }
    }
}
/*可伸缩的panel组件*/
.yui-accordion{
    //border: 1px solid #56abe4;
    border: 1px solid @ladder-color-base;
    padding: 5px 10px;
    position: relative;
    &>.head{
        padding: 0 8px;
        height: 30px;
        border-bottom: 1px dotted @border-color-dark;
        margin: 0 auto 6px;
        overflow: hidden;
        font: @font;
        .title{
            float: left;
            cursor:pointer;
        }
        span{
            display: inline-block;
            padding-top: 8px;
            font-weight: bold;
            font-size: 14px;
            color: @ladder-color-base;
        }
        .toggle{
            float: right;
            margin-top: 10px;
            color: #ccc;
        }
    }
}
/*树组件*/
.ladder-tree{
    height: 100%;
    position: relative;
    display: flex;
    flex-direction:column;
    font: @font;
    .search-box{
        display: table-row;
        height: 40px;
        line-height: 40px;
        background-color: @background-lightest;
        input{
            padding: 6px 4px;
            margin:5px 0 2px 5px;
            border-radius: 4px;
            width: calc(100% - 20px);
            &:focus{
                border:solid 1px @ladder-color-lighter;
            }
        }
    }
    &>.treeview{
        overflow: auto;
        align-content:stretch;
        height:100%;
        ul{
            padding-left: 15px;
        }
        li{
            list-style-type: none;
            margin: 0;
            padding: 5px 5px 0 5px;
            position: relative;
            transition: height @transition-time-slower;
            span{
                display: inline-block;
                //border: 1px solid #414141;
                line-height: 25px;
                //background-color: @background-lighter;
                border-radius: 2px;
                padding: 2px 4px;
                cursor: pointer;
                box-sizing: content-box;
                transition: all 0.5s;
                &:hover{
                    color:@MainTonal;
                    transition: background-color @transition-time-slow;
                }
                &.current{
                    color:@MainTonal;
                }
            }
        }
        &>ul>li::before,&>ul>li::after{
            content: "";
            position: absolute;
        }
        &>ul>li::before{
            border-left: 1px solid @border-color-dark;
            bottom: 30px;
            height: 100%;
            top: 20px;
            width: 1px;
            left: -5px;
            right: auto;
        }
        &>ul>li::after{
            content: "";
            border-top: 1px solid @border-color-dark;
            position: absolute;
            top:20px;
            left: -5px;
            width: 10px;
            height: 1px;
        }
        &>ul.line>li:first-child::before {
            top: 10px;
        }
        &>ul>li:last-child::before {
            display: none;
        }
        .switchopen:before{
            content:"\e85b";
            color: @color-lightest;
        }
        .switchclose:before{
            content:"\e85a";
            color: @ladder-color-darker;
            font-weight: bold;
        }
    }
    ul li li::before,ul li li::after{
        content: "";
        position: absolute;
    }
    ul li li::before{
        border-left: 1px solid @border-color-dark;
        bottom: 80px;
        height: 100%;
        top: -4px;
        width: 1px;
        left: -8px;
        right: auto;
    }
    ul li li::after{
        content: "";
        border-top: 1px solid @border-color-dark;
        position: absolute;
        top:20px;
        left: -8px;
        width: 14px;
        height: 1px;
    }
    ul li:last-child::before{
        height: 25px;
    }
    ul.dataview li,ul.line li{
        position: relative;
        list-style-type: none;
        margin: 0;
        padding: 1px 5px 0 2px;
        transition: height @transition-time-slower;
    }
    ul.dataview li span.tree-node{
        padding: 2px 4px;
        border: none;
        height: 16px;
        line-height: 16px;
        background-color: transparent;
        color: @color-base;
        white-space: nowrap;
    }
    ul.line li{
        margin:8px 0;
    }
    ul.line li span.tree-node{
        .border-base();
        background: #fff;
        height: unset;
        min-height: 14px;
        line-height: 18px;
        color: #666;
        margin: 0px 0 2px 4px;
        padding: 5px;
    }
    ul.dataview li:before,ul.line li:before{
        height: 100%;
        top: -2px;
        width: 1px;
        left: -8px;
        right: auto;
    }
    ul.dataview li::after,ul.line li::after{
        content: "";
        border-top: 1px solid @border-color-dark;
        position: absolute;
        top:12px;
        left: -8px;
        width: 8px;
        height: 1px;
    }
    ul.dataview>li::before{
        top: 12px;
    }
    ul.dataview li:last-child::before{
        height: 14px;
    }
    ul.dataview li span.current{
        //background-color:@ladder-background-floor;
        color:@MainTonal;
        //font-size: 14px;
        font-weight: bold;
    }
    ul.line li:before{
        bottom: -20px;
        height:unset;
        top: -10px;
    }
    ul.line li:last-child::before{
        height: 20px;
    }
    ul.line li span.current{
        border-color:@ladder-color-base;
    }
    //切换按钮
    ul.dataview .switch,ul.line .switch{
        position: absolute;
        left: -21px;
        top: -2px;
        height: 18px;
        width: 18px;
        z-index: 100;
        margin: 5px;
        background: url("images/TreeStandard.png");
    }
    ul.dataview .switchopen,ul.line .switchopen{
        background-position: -92px 0
    }
    ul.dataview .switchopen:before,ul.line .switchopen:before{
        display: none;
    }
    ul.dataview .switchclose,ul.line .switchclose{
        background-position: -74px -36px;
    }
    ul.dataview .switchclose:before,ul.line .switchclose:before{
        display: none;
    }
    //去线
    &.noline{
        li::before,li::after{
            display: none;
        }
    }
}
.yui-treedialog{
    display: none;
    position: absolute;
    .main{
        width: 100%;position: absolute; margin: 0 auto;
        background-color: #fff;
        &>.lefttree{
            position: relative;
            left:2px;
            top:2px;
            width: 270px;
            border: 1px solid @border-color-dark;
            height: 320px;
            overflow-y:auto;
            float: left;
        }
        &>.operationview{
            float: left;
            width: 30px;
            margin: 100px 10px 0 10px;
            display: none;
            &>.ladderfont{
                font-size: 30px;
                color: #0A5FA2;
                clear: both;
                display: block;
                margin-top: 10px;
            }
        }
        &>.rightselect{
            float: left;
            width: 210px;
            display: none;
            &>.select_multi{
                border: 1px solid @border-color-dark;
                width: 100%;
                height: 320px;
                &>option{
                    padding: 5px;
                    border-bottom: 1px dashed @border-color-dark;
                }
            }
        }
        &>.errorinfo{
            position: absolute;top:325px;left: 0;
            width: 200px;
            height: 20px;
            color: red;
            margin-left: 10px;
            font-weight: bold;
            font-size: 14px;
        }
        &>.bottomview{
            /*position: absolute;*/
            margin-top: 2px;
            width: 100%;
            text-align: center;
            &>.returnbtn{
                width: 100px; height: 30px;
                margin: 2px;
                border: 1px solid @border-color-dark;
                border-radius: 4px;
                background-color: @border-color-base;
                display: none;
            }
        }
    }
    .shell{
        background-color: rgba(100, 100, 100, 0.2);
        border-radius: 4px;
        padding: 4px;
    }
}
.LinkMenu{
    position: absolute;
    right: 30px;
    bottom:20%;
    height: 120px;
    width: 50px;
    font: @font;
    /*background-color: darkorange;*/

}
.LinkMenu .leader,.LinkMenu .menu{
    width: 50px;
    height: 50px;
    //background-color: #D2363A;
    background: rgba(0,0,0,0.5);
    border-radius: 25px;cursor: pointer;
}
.LinkMenu .menu{
    //background-color: #f9d3d3;
    //border:1px solid #D2363A;
    background: rgba(0,0,0,0.5);

}
.LinkMenu .menu{
    margin-bottom: 25px;
}
.LinkMenu .menuLine:after{
    position: absolute;
    display: block;
    clear: both;
    content: "";
    left: 24px;
    //height: 20px;
    height: 16px;
    width: 0px;
    //border: 1px dashed #D2363A;
    border: 1px dashed rgba(0,0,0,0.6);
    margin-top: 16px;
}
.LinkMenu .title{
    display: inline-block;
    padding:15px 0 0 7px;
    color: #fff;
    font-size: @font-small;
    position: relative;
    z-index: 1;
}
.LinkMenu .menu .title{
    //color: #D2363A;
    color:#fff
}
.LinkMenu .leader{
    position: absolute;
    bottom: 0;
}
.LinkMenu .leader:after{
    content: "";
    position: absolute;
    left: -4px;
    bottom: -4px;
    background: rgba(0, 0, 0, 0.2);
    width: 58px;
    height: 58px;
    border-radius: 50%;
}
.PocketButton{
    width: auto;
    min-width: 50px;
    box-sizing: unset;
    padding: 0 10px;
    color: white;
    height: 26px;
    cursor: pointer;
    outline: none;
    border-radius: 2px;
    font-size: 14px;
    border: 0;
    margin: 5px;
    &.addBtn,&#addBtn,&.saveBtn{
        background: @background-blue;
    }
    &#updBtn,&.updBtn{
        background: @background-green;
    }
    &#delBtn,&.delBtn{
        background: #9f9f9f;
    }
    &#allBtn,&#publishBtn{
        background: @background-origin;
    }
}
.title_bar{
    height: 30px;
    line-height: 30px;
    border:none;
    border-bottom: 2px solid @border-color-light;
    padding: 0 4px;
    text-align: left;
    clear: both;
    position: relative;
    cursor: pointer;
    font: @font;
    @unselect();
    a{
        display: inline-block;
        height: calc(100% - 4px);
        border:none;
        border-bottom: 2px solid;
        padding: 0 15px;
    }
    &[onoff='1']::after{
        position: absolute;
        content: "\e661";
        top: 5px;
        right: 15px;
        font-family: @icon-font-name;
    }
    &[onoff='0']::after{
        position: absolute;
        content: "\e664";
        top: 5px;
        right: 15px;
        font-family: @icon-font-name;
    }
}
@-webkit-keyframes hide{from {opacity:1.0} to {opacity:0} }
@-webkit-keyframes show{from {opacity:0} to {opacity:1} }
/**
* 19-02-13 by An.HR
 */
/*溢出变点*/
.ladder-rest-point{
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.Ladder-shadow{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: @background-shadow;
}

/*带搜索查询的多选*/
.Ladder-SearchSelect{
    border-radius: 4px;
    outline: none;
    box-sizing: border-box;
    width: 100%;
    font: @font;
    .selectContent{
        position: relative;
        background: #fff;
        height: @height-base;
        line-height: @height-base;
        border: @border-color-base solid 1px;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        color: @color-light;
        box-sizing: border-box;
        .selected{
            position: relative;
            padding: 0 20px 0 6px;
            line-height: 28px;
            font-size: 14px;
            height: 35px;
            overflow: hidden;
            .select-number{
                position: absolute;
                right: 35px;
                top: 6px;
                background: @ladder-background-base;
                color: #fff;
                border-radius: 4px;
                padding: 0 8px;
                z-index: 1;
                line-height: 20px;
            }
        }
        &:before{
            position: absolute;
            top: 2px;
            right: 10px;
            height: 24px;
            font-family: "ladderfont" !important;
            font-style: normal;
            content: '\e68c';
            font-size: 14px;
            font-weight: 400;
            color: @color-lightest;
        }
        //&:after{
        //    display: none;
        //    content: '';
        //    position: absolute;
        //    right: 14px;
        //    top: 35px;
        //    width: 0;
        //    height: 0;
        //    border-right: 6px solid transparent;
        //    border-left: 6px solid transparent;
        //    border-bottom: 6px solid @border-color-base;
        //    z-index: 1;
        //}
        .tagBox{
            position: relative;
            float: left;
            /* background: #4f9cfe; */
            color: #fff;
            border-radius: 2px;
            padding: 0 25px 0 5px;
            margin: 8px 0;
            max-width: 100px;
            height: 18px;
            line-height: 18px;
            min-width: 60px;
            border-right: @border-color-dark solid 1px;
            .name{
                overflow: hidden;
                word-break: break-all;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                color: @color-light;
                line-height: inherit;
                text-align: center
            }
            .del{
                position: absolute;
                right: 5px;
                top: 1px;
                font-size: 14px;
                color: @color-light;
            }
        }
    }
    .selectContent.on:after{
        display: block;
    }
    &.selectBottom{
        /*position: relative;*/
        position: absolute;
        background: #fff;
        /*box-shadow: #ddd 0px 1px 2px;*/
        margin-top: 5px;
        border: @border-color-base solid 1px;
        border-radius: 4px;
        overflow: hidden;
        z-index: 1;
        height: 0;
        max-height: 320px;
        //min-height: 180px;
        /*transition: all @transition-time-base;*/
    }
    .search{
        height: 40px;
        padding: 0 10px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        input{
            border-radius: 6px;
            height: 24px;
            width: 100%!important;
            padding: 0;
            text-indent: 30px;
            outline: none;
            border: @border-color-dark solid 1px;
            margin: 10px 0 0 0;
            padding: 2px 0;
        }
        &:before{
            position: absolute;
            left: 20px;
            top: 17px;
            font-family: "ladderfont" !important;
            font-style: normal;
            content: '\e6c1';
            font-size: 18px;
            color: @ladder-color-light;
            //color: #2096ff;
        }
    }
    .listContent{
        top: 40px;
        position: absolute;
        left: 0;
        right: 0;
        overflow: auto;
        height: calc(100% - 40px);
    }
    .list{
        li{
            position: relative;
            padding: 0 10px;
            font-size: 14px;
            width: 100%;
            margin-top: 0;
            box-sizing: border-box;
            min-height: 35px;
            transition: all 0.5s;
        }
        li.normalLi{
            cursor: pointer;
            color: @color-base;
            input{
                height: 16px;
                margin-top: 8px;
            }
            input[type="radio"]{
                width: 0;
                margin-right: 25px;
                border: 0;
                /*vertical-align: middle;*/
                float: left;
                &:after{
                    display: block;
                    content: "";
                    width: 14px;
                    height: 14px;
                    background: #fff;
                    border-radius: 50%;
                    border: 2px solid @border-color-darker;
                    /*margin-top: 6px;*/
                }
            }
            .text{
                display: block;
                line-height: 35px;
                user-select: none;
            }
        }
        .normalLi.on{
            color: @ladder-color-light;
            background: @ladder-background-lighter;
            &:after .text{
                color: @ladder-color-light;
            }
            input[type="radio"]:after {
                width: 18px;
                height: 18px;
                background: url("images/select_check.png");
                border: 0;
                background-size: 18px;
            }
        }
        .normalLi.hover_on{
            color: @color-origin !important;
            background: #fff6ea !important;
            input[type = "radio"]:after{
                border-color: #ffc881 !important;
            }
        }
        li.noSelect{
            /*border-bottom: 0;*/
            color: @color-lighter;
            line-height: 60px;
            height: 60px;
        }
    }
}

//穿梭框
.Ladder-Chooser{
    display: block;
    clear: both;
    position: relative;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    font: @font;
    .Ladder-Chooser-searchBox{
        position: relative;
        height: @height-base;
        width: calc(50% - 40px);
        float: left;
        .border-base();
        padding-left: 40px;
        box-sizing: border-box;
        overflow: hidden;
        
        &.right{
            float: right;
        }
        
        .Ladder-Chooser-LeftSearch,
        .Ladder-Chooser-RightSearch{
            width: calc(100% - 10px);
            outline: none;
            height: @height-inner;
            box-sizing: border-box;
            border: none;
        }
        
        &:before{
            position: absolute;
            left: 10px;
            top: 8px;
            font-family:@icon-font-name;
            content: '\e964';
            font-size: 20px;
            color: @ladder-color-base;
        }
    }
    
    &>.Ladder-Chooser-DataArea{
        height: calc(100% - 50px);
        .Ladder-Chooser-DataArea-Control{
            position: absolute;
            width: 50px;
            left: 50%;
            margin-left: -25px;
            top: 50%;
            margin-top: -65px;
            
            button {
                cursor: pointer;
                display: block;
                height: @height-small;
                line-height: 35px;
                width: 100%;
                padding: 0;
                background: @ladder-background-base;
                border: none;
                border-radius: 2px;
                color: #fff;
                margin-bottom: 10px;
                font-size: 24px;
                overflow: hidden;
                outline: none;
                &:last-child{
                    transform: rotate(180deg);
                }
                &:hover{
                    background: @ladder-background-base-hover;
                }
            }
        }
    }
    .Ladder-Chooser-DataArea-Select{
        float:left;
        width:calc(50% - 40px);
        height:calc(100% - @height-base);
        outline: none;
        .border-base();
        border-top: none;
        option{
            padding: 10px;
            border-bottom: 1px dotted @border-color-dark;
            appearance: none;
        }
        &.right{
            float: right;
        }
    }
    &>.Ladder-Chooser-Bottom{
        text-align: center;
        margin-top: 13px;
        clear: both;
        
        .savebtn{
            width: 120px;
            cursor: pointer;
            display: block;
            height: @height-base;
            padding: 0;
            background: @ladder-background-base;
            border: none;
            border-radius: 2px;
            color: #fff;
            overflow: hidden;
            margin: 0 auto;
            outline: none;
            &:hover{
                background: @ladder-background-base-hover;
            }
        }
    }
}

.Ladder-Uploader{
    position: relative;
    height: auto;
}
.Ladder-Uploader .Ladder-Uploader-Iframe{
    border: none;
    outline: none;
    width: 100%;
    height: auto;
    /*pointer-events: none;*/
}


/*日历*/
.Ladder-Calendar{
    position: relative;
    display: flex;
    font: @font;
    min-width: 300px;
    min-height: 355px;
    height: auto;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    transition: height @transition-time-base;
    box-shadow: 0 3px 6px @background-light;
    .calendar-center{
        height: 350px;
        width: 300px;
        position: absolute;
        left: 50%;
        margin-left: -150px;
        top: 50%;
        margin-top: -175px;
        background: #fff;
        border-radius: 2px;
        overflow: hidden;
        box-shadow: 0 3px 6px @background-light;
        user-select:none;
    }
    .calendarHeader {
        width: 100%;
        position: relative;
        height: 70px;
        line-height: 50px;
        color: #fff;
        font-size: 20pt;
        text-align: center;
        background: #4293da
        url("data:image/jpg;base64,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b29sAAAAAABDbGJyYm9vbAAAAAAAUmdzTWJvb2wAAAAAAENybkNib29sAAAAAABDbnRDYm9vbAAAAAAATGJsc2Jvb2wAAAAAAE5ndHZib29sAAAAAABFbWxEYm9vbAAAAAAASW50cmJvb2wAAAAAAEJja2dPYmpjAAAAAQAAAAAAAFJHQkMAAAADAAAAAFJkICBkb3ViQG/gAAAAAAAAAAAAR3JuIGRvdWJAb+AAAAAAAAAAAABCbCAgZG91YkBv4AAAAAAAAAAAAEJyZFRVbnRGI1JsdAAAAAAAAAAAAAAAAEJsZCBVbnRGI1JsdAAAAAAAAAAAAAAAAFJzbHRVbnRGI1B4bEBSAAAAAAAAAAAACnZlY3RvckRhdGFib29sAQAAAABQZ1BzZW51bQAAAABQZ1BzAAAAAFBnUEMAAAAATGVmdFVudEYjUmx0AAAAAAAAAAAAAAAAVG9wIFVudEYjUmx0AAAAAAAAAAAAAAAAU2NsIFVudEYjUHJjQFkAAAAAAAAAAAAQY3JvcFdoZW5QcmludGluZ2Jvb2wAAAAADmNyb3BSZWN0Qm90dG9tbG9uZwAAAAAAAAAMY3JvcFJlY3RMZWZ0bG9uZwAAAAAAAAANY3JvcFJlY3RSaWdodGxvbmcAAAAAAAAAC2Nyb3BSZWN0VG9wbG9uZwAAAAAAOEJJTQPtAAAAAAAQAEgAAAABAAEASAAAAAEAAThCSU0EJgAAAAAADgAAAAAAAAAAAAA/gAAAOEJJTQQNAAAAAAAEAAAAHjhCSU0EGQAAAAAABAAAAB44QklNA/MAAAAAAAkAAAAAAAAAAAEAOEJJTScQAAAAAAAKAAEAAAAAAAAAAThCSU0D9QAAAAAASAAvZmYAAQBsZmYABgAAAAAAAQAvZmYAAQChmZoABgAAAAAAAQAyAAAAAQBaAAAABgAAAAAAAQA1AAAAAQAtAAAABgAAAAAAAThCSU0D+AAAAAAAcAAA/////////////////////////////wPoAAAAAP////////////////////////////8D6AAAAAD/////////////////////////////A+gAAAAA/////////////////////////////wPoAAA4QklNBAAAAAAAAAIAAjhCSU0EAgAAAAAABgAAAAAAADhCSU0EMAAAAAAAAwEBAQA4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dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2QjQ5RTM1RkNGMkZFNzExQkY0OEY2NzE1NzYyRjAwOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowRjkzNjA0NzJFRkUxMUU3QjRCMEUwODJFODlGODg2NSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyMzhhYzI0Mi03MTBjLTY1NDEtOGQ3NS00Y2FlNDI0MWJjNzEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAzLTIzVDEzOjA0OjI3KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMC0wMy0yM1QxMzoxNDoyNSswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMC0wMy0yM1QxMzoxNDoyNSswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9qcGVnIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0iIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjM1NkI4RTE5MTMzRTcxMTlGNEJGOEUyN0Y5RkFDNDgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NkI0OUUzNUZDRjJGRTcxMUJGNDhGNjcxNTc2MkYwMDkiLz4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MjM4YWMyNDItNzEwYy02NTQxLThkNzUtNGNhZTQyNDFiYzcxIiBzdEV2dDp3aGVuPSIyMDIwLTAzLTIzVDEzOjE0OjI1KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8P3hwYWNrZXQgZW5kPSJ3Ij8+/+4ADkFkb2JlAGRAAAAAAf/bAIQAAgICAgICAgICAgMCAgIDBAMCAgMEBQQEBAQEBQYFBQUFBQUGBgcHCAcHBgkJCgoJCQwMDAwMDAwMDAwMDAwMDAEDAwMFBAUJBgYJDQoJCg0PDg4ODg8PDAwMDAwPDwwMDAwMDA8MDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM/8AAEQgAFAFeAwERAAIRAQMRAf/dAAQALP/EAaIAAAAHAQEBAQEAAAAAAAAAAAQFAwIGAQAHCAkKCwEAAgIDAQEBAQEAAAAAAAAAAQACAwQFBgcICQoLEAACAQMDAgQCBgcDBAIGAnMBAgMRBAAFIRIxQVEG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")
        no-repeat left bottom;
        background-size: 100%;
        .back {
            width: 50px;
            /* height: 40px; */
            position: absolute;
            right: 0;
            line-height: 55px;
            top: 0;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
        }
        .year {
            font-size: 24px;
        }
    }
    .calendarTable{
        width: 98%;
        flex: 1;
        margin: 0 auto;
        margin-bottom: 5px;
        cursor: pointer;
        /*月*/
        .month-box {
            color: @ladder-color-base;
            //color: #4293da;
            font-size: 23px;
            text-align: center;
            height: 30px;
            td{
                position: relative;
            }
            .month{
                font-size: 14px;
            }
        }
        .month-btn {
            position: absolute;
            left: 8px;
            top: 0;
            color: @ladder-color-base;
            /* transform: rotate(180deg); */
            font-size: 22px;
            height: 24px;
            display: block;
            text-align: left;
            line-height: 30px;
            /*padding-left: 20px;*/
            box-sizing: border-box;
            cursor: pointer;
        }
        .next-btn {
            transform: rotate(180deg);
            left: unset;
            right: 8px;
        }
        /*周*/
        .week-box {
            color: @ladder-color-base;
            font-size: 10pt;
            text-align: center;
            height: 40px;
            background-size: 100%;
        }
        /*日*/
        .day-box {
            height: 40px;
            font-family: "Arial";
            text-align: center;
            font-size: 18px;
            .day {
                width: 30px;
                height: 30px;
                line-height: 30px;
                display: block;
                margin: 0 auto;
                border-radius: 50%;
                color: #333;
                overflow: hidden;
                box-sizing: border-box;
                cursor: pointer;
            }
            .mask{
                font-size: @font-small;
                color: @ladder-background-base;
                //font-weight: 900;
            }
            .day.on{
                border: @ladder-border-color solid 2px;
                color: @ladder-color-base;
                line-height: 26px;
            }
        }
    }
}

/*地址联动组件*/
.Ladder-Address{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /*background: rgba(255,255,255,0.6);*/
    background: @background-shadow;
    font: @font;
    .address-center{
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 3;
        -webkit-transform:translate(-50%,-50%);
        border-radius: 2px;
        background: #fff;
        box-shadow: 0 3px 6px @background-light;
        width: 500px;
        /*height: 375px;*/
        height: 400px;
        overflow: hidden;
    }
    .address-select{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 40px;
        padding: 0 10px;
        line-height: 40px;
        background: @ladder-background-base;
        color: #fff;
    }
    .address-header{
        position: absolute;
        left: 0;
        right: 0;
        top: 40px;
        height: 35px;
        background: #fff;
        user-select: none;
        &:after{
            content: "";
            position: absolute;
            left: 10px;
            right: 10px;
            bottom: 1px;
            height: 1px;
            background: #ddd;
        }
        li{
            position: relative;
            float: left;
            /*width: 25%;*/
            width: 33.33%;
            text-align: center;
            height: 35px;
            line-height: 35px;
            cursor: pointer;
            padding: 0 5px;
            box-sizing: border-box;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            transition: @transition-time-base all linear;
            &:before{
                content: "";
                position: absolute;
                left: 0;
                top: 10px;
                bottom: 10px;
                width: 1px;
                background: #ddd;
            }
            &:first-child:before{
                background: #fff;
            }
            &:after{
                content: "";
                position: absolute;
                left: 10px;
                width: 0;
                opacity: 1;
                bottom: 0;
                height: 2px;
                background: @ladder-background-base;
                z-index: 1;
                transition: width @transition-time-base
            }
        }
        li.on{
            color: @ladder-color-base;
            font-weight: bold;
            &:after{
                content: "";
                position: absolute;
                left: 10px;
                width: calc(100% - 20px);
                opacity: 1;
                bottom: 0;
                height: 2px;
                background: @ladder-background-base;
                z-index: 1;
                transition: width @transition-time-base
            }
        }
    }
    .list-content{
        position: absolute;
        left: 0;
        right: 0;
        top:75px;
        height: 270px;
        padding: 5px 0;
        overflow: auto;
    }
    .address-list{
        min-height: 100%;
        li{
            float: left;
            padding: 3px 15px;
            margin: 5px 0 5px 15px;
            border: #ddd solid 1px;
            border-radius: 4px;
            cursor: pointer;
            &:hover{
                border: @ladder-color-base solid 1px;
            }
        }
        li.on{
            position: relative;
            background: @ladder-background-base;
            color: #fff;
            border-color: @ladder-color-base;
            &:after{
                position: absolute;
                bottom: 2px;
                right: -1px;
                font-family: "ladderfont";
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                /* content: "\e852"; */
                content: "\e8a9";
                color: #fff;
                font-size: 36px;
                /*transform: rotate(-16deg);*/
            }
        }
    }
    .address-detail-content{
        position: absolute;
        left: 0;
        right: 0;
        /*top: 230px;*/
        top: 255px;
        height: 80px;
        box-shadow: 0 10px 9px -10px #eaeaea inset;
        padding: 10px;
        .tag{
            position: absolute;
            left: 0;
            top: 15px;
            bottom: 15px;
            width: 100px;
            text-align: center;
            line-height: 70px;
            border-right: 1px solid @border-color-base;
        }
        textarea{
            position: absolute;
            left: 110px;
            top: 15px;
            bottom: 15px;
            display: block;
            height: 70px;
            padding: 5px;
            box-sizing: border-box;
            resize: none;
            margin: 0;
            border: none;
        }
    }
    .btn-box{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        box-shadow: 0 -2px 4px #ededed;
        text-align: center;
        background: #fff;
        button{
            margin: 8px 10px;
            background: #fff;
            border: @border-color-base solid 1px;
            width: 100px;
            border-radius: 4px;
            height: 30px;
            cursor: pointer;
        }
        button.address-sure{
            background: @ladder-background-base;
            color: #fff;
            border: @ladder-border-color solid 1px;
        }
    }
}

/*提示框*/
.Ladder-Tiper{
    background: @background-shadow;
    color: #fff;
    min-width: 100px;
    line-height: 24px;
    padding: 8px 20px;
    border-radius: 4px;
    text-align: center;
    z-index: 1000;
    top: 45%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}

/*地标*/
.Ladder-Mapper{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom:0;
    font: @font;
    /*background: rgba(255,255,255,0.6);*/
    background: @background-shadow;
    border-radius: 2px;
    z-index: 10;
    .mapper-center{
        position: absolute;
        top: 50%;
        left: 50%;
        transform:translate(-50%,-50%);
        -webkit-transform:translate(-50%,-50%);
        background: #fff;
        box-shadow: 0 3px 6px #c0c0c0;
    }
    .mapper-header{
        background: @ladder-background-base;
        color: #fff;
        text-align: center;
        height: 35px;
        line-height: 35px;
    }
    .mapper-btns{
        text-align: center;
        button{
            margin: 8px 10px;
            background: #fff;
            border: @border-color-base solid 1px;
            width: 100px;
            border-radius: 4px;
            height:25px;
            cursor: pointer;
        }
        button.mapper-sure{
            background: @ladder-background-base;
            color: #fff;
            border: @ladder-border-color solid 1px;
        }
    }
}

/*通用组件*/
.Ladder-group-fixed{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: @background-shadow;
    z-index: 1;
}
.Ladder-group-main{
    font: @font;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform:translate(-50%,-50%);
    border-radius: 2px;
    background: #fff;
    box-shadow: 1px 1px 5px #777;
    min-width: 300px;
}
.Ladder-group-header{
    background: @ladder-background-base;
    color: #fff;
    text-align: left;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    .close{
        position: absolute;
        right: 10px;
        top: 7px;
        cursor: pointer;
    }
}
.Ladder-group-btns{
    box-shadow: 0 -2px 4px #ededed;
    text-align: center;
    height: 40px;
    overflow: hidden;
    width: 100%;
    button {
        margin: 7px 10px;
        background: #fff;
        border: @border-color-base solid 1px;
        width: 100px;
        border-radius: 4px;
        height: 26px;
        cursor: pointer;
        outline: none;
    }
    button.btn-sure{
        background: @ladder-background-base;
        color: #fff;
        border: @ladder-background-base solid 1px;
    }
}

/*组织架构*/
.Ladder-Organize{
    .Ladder-group-header{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
    }
    .Ladder-group-main{
        width: 600px;
        height: 90%;
    }
    /*tag*/
    .tag-box{
        position: absolute;
        left: 0;
        right: 0;
        top: 30px;
        height: 20px;
        padding: 8px 0;
        box-shadow: 0 1px 4px #e7e7e7;
        li{
            position: relative;
            float: left;
            height: 20px;
            line-height: 20px;
            padding: 0 20px;
            /*min-width: 56px;*/
            width: 16.66%;
            border-right: @border-color-base solid 1px;
            text-align: center;
            cursor: pointer;
            color: @color-light;
            font-size: 14px;
            transition: @transition-time-base all linear;
            box-sizing: border-box;
            
            &:last-child{
                border-right: none;
            }
            &:after{
                content: "";
                position: absolute;
                left: 10px;
                width: 0;
                bottom: -8px;
                height: 2px;
                background: @ladder-background-base;
                z-index: 1;
                transition: width @transition-time-base
            }
        }
        li.on{
            color: @ladder-color-base;
            font-weight: bold;
            &:after{
                content: "";
                width: calc(100% - 20px);
            }
        }
    }
    .list-center{
        position: absolute;
        left: 0;
        right: 0;
        top: 66px;
        bottom: 40px;
        margin: 15px 0;
        .left-tip-box,.init-tip{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            text-align: center;
            color: @color-lighter;
            font-size: 14px;
        }
        .left-tip-box i,.init-tip i{
            display: block;
            font-size: 60px;
            line-height: 80px;
            margin-top: 50px;
            color: #bbb;
        }
    }
    /*列表*/
    .list-box{
        position: relative;
        height: calc(100% - 30px);
        overflow: auto;
        padding: 8px 5px 8px 20px;
        box-sizing: border-box;
    }
    /*左侧内容*/
    .left-contain{
        position: absolute;
        left: 0;
        right: 50%;
        top: 0;
        bottom: 0;
        /*padding: 0 20px;*/
        box-sizing: border-box;
    }
    .left-list{
        li{
            position: relative;
            margin-bottom: 5px;
            color: @color-light;
        }
        li>.name{
            position: relative;
            padding-left: 42px;
            font-size: 15px;
            color: inherit;
            line-height: 30px;
            cursor: pointer;
            word-break: break-all;
            padding-right: 15px;
        }
        li>.select-icon-place{
            position: absolute;
            width: 16px;
            left: 0;
            top: 7px;
            height: 20px;
            z-index: 1;
        }
        li>.name:before,li>.name.on:after{
            position: absolute;
            left: 17px;
            top: 6px;
            font-family: @icon-font-name;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            //content: '\e944';
            //content: '\e980';
            content: '\e963';
            color: @color-origin;
            font-size: 16px;
            cursor: auto;
            line-height: 20px;
            height: 20px;
            pointer-events: none;
        }
        li>.name.on{
            background: #ebf3ff;
            &:after{
                content: "\e886";
                right: 5px;
                left: unset;
                font-size: 18px;
            }
        }
        li.have-list:before{
            position: absolute;
            left: 0;
            top: 8px;
            height: 14px;
            font-family: "ladderfont";
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            content: '\e619';
            color: @color-lighter;
            font-size: 10px;
            cursor: pointer;
            z-index: 1;
        }
        li.have-list.open:before{
            content:'\e623';
        }
        li.have-list>.name:before{
            content: "\e943";
            transform: rotateX(180deg);
            font-size: 20px;
            top: 4px;
            left: 15px;
            color: @ladder-background-base;
            //color: @color-origin;
        }
        li.current{
            background: #e4efff;
            &:after{
                position: absolute;
                right: 0;
                top: 8px;
                height: 14px;
                font-size: 20px;
                font-family: "ladderfont";
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                content:'\e852';
                //color: #117ece;
                color: @ladder-color-dark;
            }
            .name.current{
                color: @ladder-color-dark;
            }
        }
        .have-no-level{
            text-align: center;
            /* line-height: 120px; */
            color: @color-lighter;
            font-size: 14px;
            i{
                display: block;
                font-size: 60px;
                line-height: 80px;
                margin-top: 50px;
                color: #bbb;
            }
        }
        .have-no-level:before,.have-no-level.on:before{
            content: "";
        }
    }
    /*右部分内容*/
    .right-contain{
        position: absolute;
        left: 50%;
        top:0;
        right: 0;
        bottom:0;
        width: 50%;
        padding: 0 20px;
        box-sizing: border-box;
        border-left: @border-color-base solid 1px;
        /*右侧头部*/
        .right-header{
            font-size: 10px;
            color: @color-lighter;
            line-height: 25px;
            height: 25px;
            border-bottom: @border-color-base solid 1px;
            overflow: hidden;
            padding-left: 10px;
            .del-all{
                float: right;
                color: @ladder-color-base;
                cursor: pointer;
                background: #fff;
                border: none;
                outline: none;
                font-size: 10px;
                margin: 0;
                line-height: 25px;
                height: 25px;
            }
        }
        /*右侧列表*/
        .right-list{
            li{
                position: relative;
                float: left;
                color: @color-light;
                font-size: 14px;
                border-radius: 4px;
                border: @border-color-base dashed 1px;
                /*height: 24px;*/
                line-height: 24px;
                padding: 0 25px 0 10px;
                margin: 0 6px 10px 0;
                .del{
                    position: absolute;
                    margin-left: 6px;
                    color: @color-origin;
                    font-size: 16px;
                    cursor: pointer;
                    vertical-align: bottom;
                    top: 4px;
                    right: 3px;
                }
            }
            .type{
                float: unset;
                padding: 10px 0 3px 0;
                color: @color-lighter;
                font-size: @font-small;
                border: none;
                margin: 0;
            }
        }
    }
    /*搜索*/
    .search-box{
        position: relative;
        height: 25px;
        line-height: 25px;
        border-bottom: @border-color-base solid 1px;
        overflow: hidden;
        margin: 0 15px;
        .search-btn{
            font-family: @icon-font-name;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            content: '\e6c1';
            color: @ladder-color-base;
            font-size: 26px;
            vertical-align: text-top;
            margin: 0;
            position: absolute;
            border: 0;
            bottom: 0;
            right: 10px;
            cursor: pointer;
            background: #fff;
            width: 40px;
            outline: none;
        }
        input{
            border: none;
            height: 20px;
            line-height: 20px;
            font-size: 10px;
            margin: 0;
            padding: 0;
            outline: none;
            color: @color-light;
            text-indent: 20px;
            width: 200px;
        }
    }
    /*按钮部分*/
    .Ladder-group-btns{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

/*表格明细组件*/
.Ladder-Table-Form{
    font: @font;
    padding: 10px;
    /*box-sizing: border-box;*/
    position: relative;
    min-width: 300px;
    clear: both;
    .handel-header{
        text-align: center;
        .btn-box{
            margin: 0 auto;
            display: table;
        }
    }
    .header-btn-bg{
        float: left;
        width: 90px;
        height: 30px;
        line-height: 30px;
        border: none;
        background:transparent;
        outline: none;
        margin: 0;
        overflow: hidden;
        position: relative;
        cursor: pointer;
        &:before{
            font-family: "ladderfont";
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            content: '\e945';
            color: #ecf4fe;
            font-size: 28px;
            position: absolute;
            left: 1px;
            top: 6px;
            z-index: 1;
        }
        &:after{
            font-family: "ladderfont";
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            content: '\e945';
            color: #cbe0ff;
            font-size: 29px;
            position: absolute;
            top: 5px;
            left: 0;
        }
        i{
            text-align: center;
            color: #4689ea;
            position: relative;
            line-height: 38px;
            z-index: 1;
            font-size: 20px;
        }
    }
    .add-btn{
        margin: 0 auto;
    }
    .table-box{
        width: 100%;
        border: #ddd solid 1px;
        background: #fff;
        border-radius: 4px 4px 0 0;
        box-sizing: border-box;
        margin: 0 auto;
        //overflow: auto;
    }
    table{
        width: 100%;
        th{
            height: 45px;
            text-align: left;
            background: #f4f4f4;
            border-bottom: @border-color-base solid 1px;
            font-size: 14px;
            color: @color-light;
            padding: 0 5px;
        }
        th.checkbox,td.check-td{
            width: 30px;
            text-align: center;
            box-sizing: border-box;
        }
        th.operatebox,td.operate{
            width: 80px;
            text-align: center;
            box-sizing: border-box;
        }
        input[type=checkbox],input[type=radio]{
            position: relative;
            margin: 0;
            padding: 0;
            width: 14px;
            height: 14px;
        }
        input[type=checkbox]:before,input[type=radio]:before{
            content: "";
            position: absolute;
            left: -1px;
            top: -1px;
            background: #fff;
            width: 14px;
            height: 14px;
            border-radius: 4px;
            border: @border-color-base solid 1px;
        }
        input[type=radio]:before{
            border-radius: 50%;
        }
        input[type=checkbox]:checked:after,input[type=radio]:checked:after{
            position: absolute;
            right: -8px;
            top: -1px;
            font-family: @icon-font-name;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            content: '\e947';
            font-size: 24px;
            color: @ladder-color-base;
        }
        td{
            height: 45px;
            border-bottom: @border-color-base solid 1px;
            font-size: @font-small;
            color: @color-base;
            cursor: default;
            padding: 0 5px;
            box-sizing: border-box;
            .js-yui{
                border: none;
                margin: 0;
                padding: 0;
                outline: unset;
                width: 100%;
                box-shadow: 1px 1px 5px @border-color-base;
                height: 30px;
                display: list-item;
            }
            .btn{
                font-size: 18px;
                //color: #4689ea;
                color: @ladder-color-base;
                margin: 0 8px;
                cursor: pointer;
                &:hover{
                    color: @ladder-color-base-hover;
                }
            }
        }
        tr:hover{
            background: #ecf4fe;
        }
        tr.on td{
            color: #4689ea;
            background: #ecf4fe;
        }
    }
    /*thead头部固定*/
    .table-form table tbody.flex{
        display: block;
        overflow-y: auto;
    }
    .table-form table thead.flex,
    .table-form tbody tr.flex{
        display: table;
        width: 100%;
        table-layout: fixed;
        box-sizing: border-box;
    }
}

/*表格弹窗*/
.Ladder-tableEditBox{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 111;
    background: rgba(0, 0, 0, 0.3);
    .center {
        position: fixed;
        width: 400px;
        height: 500px;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        background: #fff;
    }
    .title {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        height: 40px;
        line-height: 40px;
        text-indent: 20px;
        background: #ffffff;
        //color: #2484c7;
        color: @ladder-color-dark;
        box-shadow: 1px 1px 5px #ddd;
        border-bottom: #e2e2e2 solid 1px;
        font-size: 18px;
        letter-spacing: 5px;
        //border-left: #4aa4e4 solid 5px;
        border-left: @ladder-border-color solid 5px;
        overflow: hidden;
        z-index: 1;
        .close{
            float: right;
            font-size: 20px;
            cursor: pointer;
            line-height: 45px;
            margin-right: 10px;
            //color: #4aa4e4;
            color: @ladder-color-base;
        }
    }
    .main {
        position: absolute;
        left: 0;
        top: 40px;
        right: 0;
        bottom: 40px;
        overflow: auto;
    }
    .list{
        width: 100%;
        .js-formarea{
            border-bottom: @border-color-base solid 1px;
            padding: 10px 0;
            height: 40px;
            line-height: 40px;
        }
        .js-title{
            /*display: inline-block;*/
            width: 100px;
            /*border-right: #ddd solid 1px;*/
            color: @color-light;
            text-align: center;
        }
        .js-yui{
            display: inline-block;
            margin: 10px 0;
            width: calc(100% - 20px);
            padding-left: 10px;
            outline: none;
            border: none;
            /* margin-left: 10px; */
            border-left: @border-color-base solid 1px;
        }
    }
    .btns{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 40px;
        border-top: @border-color-base solid 1px;
        button{
            display: block;
            float: left;
            width: 50%;
            margin: 0;
            padding: 0;
            background: #fff;
            border: none;
            height: 40px;
            outline: none;
            color: @color-light;
            cursor: pointer;
            font-size: 14px;
        }
        button.sure{
            //background: #4aa4e4;
            background: @ladder-color-base;
            color: #fff;
        }
    }
}

/*评分组件*/
.Ladder-Score{
    font: @font;
    text-align: center;
    display: inline-block;
    .score-title{
        text-align: center;
        display: inline-block;
        &:before{
            content: "";
            left: 0;
            right: 0;
            height: 1px;
            background: @border-color-base;
        }
        .title{
            line-height: 80px;
            color: @color-base;
            font-weight: bold;
            font-size: 16px;
        }
    }
    /*星星*/
    .Ladder-Stars{
        display: inline-block;
        .score-stars-list{
            display: inline-block;
        }
    }
    /*总体评分*/
    .score-totality{
        margin-bottom: 20px;
    }
    /*分类评分*/
    .score-category{
        display: inline-block;
        padding: 20px 20px 10px;
        box-shadow: 1px 1px 5px #d9d9d9;
        margin-bottom: 20px;
        background: #fff;
        min-width: 350px;
        .one-type-row{
            height: 26px;
            line-height: 26px;
            overflow: hidden;
            margin-bottom: 10px;
            .one-type-title{
                height: 26px;
                line-height: 26px;
                color: @color-light;
                float: left;
                width: 80px;
                text-align: left;
            }
            .start-result {
                height: 26px;
                line-height: 26px;
                color: @color-lighter;
                display: inline-block;
                width: 60px;
                box-sizing: unset;
            }
            .start-result.right {
                width: 70px !important;
                text-align: left !important;
                padding-right: 0 !important;
            }
        }
    }
    /*标签分类*/
    .score-label-list{
        display: inline-block;
        padding: 10px 15px;
        /*max-width: 85%;*/
        li{
            float: left;
            padding: 5px 15px;
            border: @border-color-base solid 1px;
            margin: 6px;
            border-radius: 4px;
            cursor: pointer;
            overflow: hidden;
            height: 24px;
            line-height: 24px;
            background: #fff;
            box-sizing: unset;
        }
        li.check-fill{
            border: @border-color-origin solid 1px;
            position: relative;
            &:after{
                position: absolute;
                font-family: @icon-font-name;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                content: '\e8a9';
                font-size: 34px;
                right: -1px;
                color: #ff9000;
                bottom: 0;
            }
        }
    }
    /*文本意见*/
    .score-text textarea{
        /*width: 400px;*/
        border: @border-color-base solid 1px;
        height: 100px;
        border-radius: 4px;
        resize: none;
        padding: 5px 10px;
        margin: 0 auto 20px;
    }
}

/*评分，单独星星*/
.Ladder-Stars{
    padding: 5px 0;
    box-sizing: border-box;
    height: 34px;
    
    .score-stars-list{
        display: inline-block;
        height: 30px;
        overflow: hidden;
        line-height: 30px;
        li{
            float: left;
            padding:0 5px;
            cursor: pointer;
            height: 30px;
            overflow: hidden;
            width: 30px;
            box-sizing: unset;
            margin: 0;
            i:before{
                display: inline-block;
                font-family: "ladderfont";
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                content: '\e828';
                font-size: 26px;
                line-height: 30px;
                color: #ccc;
                /*background: #fff;*/
            }
        }
        .check-fill i:before{
            content: '\e867';
            background: linear-gradient(to right, #ff9000, #ff2900);
            -webkit-background-clip: text;
            color: transparent;
            transition: @transition-time-base all linear;
        }
    }
    .start-result{
        padding: 0 20px;
        text-align: center;
        color: #ff9000;
        line-height: 24px;
        display: inline-block;
        vertical-align: top;
    }
    .start-result.bottom{
        display: block;
        padding: 0;
        font-size: 14px;
    }
}

/*竖版单项表格*/
.Ladder-table-vertical{
    border: @border-color-base solid 1px;
    border-bottom: 0;
    overflow: auto;
    table{
        width: 100%;
        overflow: hidden;
    
        tr{
            border-bottom: @border-color-base solid 1px;
            height: 30px;
            padding: 5px 0;
        }
        th{
            background: @background-lighter;
            min-width: 80px;
        }
        td{
            text-align: center;
            padding: 5px 10px;
            input{
                border: none;
                outline: none;
                margin: 0;
                padding: 0;
                width: 100px;
            }
        }
    }
}

/*图片选择器*/
.Ladder-PicSelector{
    font: @font;
    user-select: none;
    .PicCenter{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 600px;
        max-height: 90%;
        height: 580px;
        -webkit-transform:translate(-50%,-50%);
        border-radius: 6px;
        background: #fff;
        overflow: hidden;
    }
    .header{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 40px;
        line-height: 40px;
        background: @ladder-background-base;
        color:#fff;
        text-indent: 20px;
        font-size: 16px;
    }
    .projectTag{
        position: absolute;
        left: 0;
        top: 40px;
        right: 0;
        box-shadow: 0 3px 5px #e6e6e6;
        
        li{
            float: left;
            border-right: 1px solid #d5d5d5;
            padding: 0 10px;
            font-size: 14px;
            color: @color-light;
            min-width: 100px;
            text-align: center;
            box-sizing: border-box;
            margin: 7px 0;
            cursor: pointer;
        }
        .current{
            color: @ladder-color-base;
        }
    }
    .one-project{
        position: absolute;
        left: 0;
        right: 0;
        top: 75px;
        bottom: 50px;
        .picContent{
            position: absolute;
            left: 0;
            top: 81px;
            bottom: 0;
            right: 0;
            overflow: auto;
            /*background: #f2f2f2;*/
            .tip{
                width: 100%;
                box-sizing: border-box;
                text-align: center;
                line-height: 100px;
                font-size: 16px;
                color: @color-lighter;
            }
        }
    }
    /*图片格式*/
    .pic-list{
        background: inherit;
        width: 100%;
        
        li{
            position: relative;
            float: left;
            width: 76px;
            height: 100px;
            padding: 10px 10px 0;
            margin-bottom: 10px;
            cursor: pointer;
            overflow: hidden;
            .img-box{
                width: 76px;
                height: 76px;
                background: #ddd;
                text-align: center;
                /*box-shadow: 1px 1px 5px #fff;*/
                box-sizing: border-box;
                border: #fff solid 1px;
                img{
                    display: block;
                    margin: 0 auto;
                    width: 100%;
                }
            }
        }
        .name{
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            color: @color-base;
        }
        .url{
            display: none;
            word-break: break-all;
        }
        .current{
            background: #c4e6ff;
            position: relative;
        
            &:before{
                content: "";
                position: absolute;
                right: -20px;
                top: -3px;
                background: @ladder-background-base;
                width: 60px;
                height: 20px;
                text-align: center;
                transform: rotate(30deg);
                line-height: 26px;
            }
            &:after{
                position: absolute;
                right:0;
                top: 0;
                font-family: "ladderfont";
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                content: '\e852';
                font-size: 20px;
                text-align: center;
                line-height: 22px;
                transform: rotate(10deg);
                color: #fff;
            }
            .name,.url{
                color:@ladder-color-base;
            }
        }
        .row.nothing{
            width: 100%;
            text-align: center;
            line-height: 100px;
            color: @color-lighter;
            border: none;
            padding: 0;
            margin: 0;
            font-size: 18px;
        }
    }
    /*列表格式*/
    .pic-list.type-list{
        display: table;
        cursor: pointer;
        background: #fff;
        /*border-bottom: #ddd solid 1px;*/
        .row{
            display: table-row;
            width: 100%;
            height: auto;
            box-sizing: border-box;
            padding: 10px;
            margin: 0;
            border-bottom: @border-color-base solid 1px;
            &:last-child{
                border-bottom: 0;
            }
        }
        .img-box{
            display: table-cell;
            vertical-align: middle;
            /*float: left;*/
            width: 50px;
            height: 50px;
            background: #ddd;
            text-align: center;
            box-sizing: border-box;
            border: #fff solid 1px;
            margin: 10px;
            img{
                display: block;
                margin: 0 auto;
                width: 100%;
            }
        }
        .name{
            display: table-cell;
            vertical-align: middle;
            /*float: left;*/
            padding: 0 10px;
            text-align: center;
            width: 120px;
        }
        .url{
            display: table-cell;
            vertical-align: middle;
            padding: 0 10px;
            text-align: center;
            /*float: left;*/
        }
    }
    .pic-list.type-list.current{
        //background: #e4f3ff
        background: @ladder-background-lighter
    }
    .tagHeader{
        position: absolute;
        top:0;
        left: 0;
        right: 0;
        /*height: 115px;*/
        .search{
            width: 330px;
            position: relative;
            height: 28px;
            border: @border-color-base solid 1px;
            border-radius: 4px;
            margin: 8px 10px 0px;
            overflow: hidden;
        }
        input{
            display: block;
            width: calc(100% - 50px);
            height: 28px;
            border: none;
            outline: none;
            text-indent: 20px;
            margin: 0;
        }
        .search-btn{
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 40px;
            background: none;
            border: none;
            font-size: 20px;
            border-left: 1px solid @border-color-base;
            color: #ff9000;
            line-height: 34px;
            cursor: pointer;
            margin: 0;
            padding: 0;
            height: 30px;
            outline: none;
        }
        .pic-control{
            position: relative;
            border-bottom: #d5d5d5 solid 1px;
            .show-type{
                position: absolute;
                right: 10px;
                top: 0;
                bottom: 0;
                line-height: 36px;
                i{
                    font-size: 17px;
                    color: @color-light;
                    cursor: pointer;
                    height: 30px;
                    display: inline-block;
                    line-height: 38px;
                    vertical-align: middle;
                }
                i.pic{
                    font-size: 26px;
                    margin: 4px 14px 0 10px;
                    border-right: @border-color-base solid 1px;
                    padding-right: 10px;
                }
                i.current{
                    color: @ladder-color-base;
                }
            }
            .pic-type{
                padding: 6px 0 8px;
                width: calc(100% - 100px);
                li{
                    padding: 0 5px;
                    height: 22px;
                    line-height: 22px;
                    border-radius: 4px;
                    float: left;
                    margin: 4px 0 0 10px;
                    border: #d5d5d5 solid 1px;
                    min-width: 40px;
                    text-align: center;
                    cursor: pointer;
                }
                li.current{
                    background: @background-origin;
                    border: @border-color-origin solid 1px;
                    color: #fff;
                }
            }
        }
    }
    .btn-box{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 50px;
        box-shadow: 0 -2px 4px #ededed;
        text-align: center;
        overflow: hidden;
        width: 100%;
    
        button{
            font-size: 14px;
            height: 28px;
            background: #fff;
            border: @border-color-base solid 1px;
            width: 100px;
            border-radius: 4px;
            cursor: pointer;
            outline: none;
            margin: 12px;
        }
    
        button.btn-sure {
            background: @ladder-background-base;
            color: #fff;
            border: @ladder-border-color solid 1px;
        }
    }
}

/*二次确认弹窗*/
.Ladder-ConfirmTipper{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 11111;
    background: @background-shadow;
    
    .ConfirmTipper-center{
        position: absolute;
        left: 50%;
        margin-left: -150px;
        width: 300px;
        top: 50%;
        background: #fff;
        border-radius: @radius-base;
        box-shadow: 1px 1px 5px #b5b5b5;
        transform: translate(0, -50%);
        max-height: 90%;
        min-height: 80px;
        overflow: auto;
    }
    
    .ConfirmTipper-tip{
        padding: 30px 15px;
        line-height: 24px;
        color: @color-light;
        margin-bottom: 40px;
        min-height: 24px;
        text-align: center;
        font-size: 16px;
    }
    
    .ConfirmTipper-btn{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40px;
        border-top: @border-color-base solid 1px;
    }
    
    .ConfirmTipper-btn .btn{
        display: block;
        float: left;
        width: 50%;
        height: 40px;
        line-height: 40px;
        color: @color-light;
        background: #fff;
        border: 0;
        margin: 0;
        outline: 0;
        font-size: 14px;
        text-align: center;
        box-sizing: border-box;
        cursor: pointer;
        
        &:nth-child(2){
            //background: #4f77aa;
            background: @ladder-background-base;
            color: #fff;
        }
    }
}

/*模拟原生selector*/
.Ladder-Selector{
    position: relative;
    *{
        font: @font;
    }
    .select-header{
        position: relative;
        min-height: @height-base;
        .border-base;
        border-radius: @radius-base;
        transition: all @transition-time-base ease-in-out;
        padding: 0 20px 0 6px;
        box-sizing: border-box;
        cursor: pointer;
        background: #fff;
        .icon-row{
            position: absolute;
            right:10px;
            top: 50%;
            color: @color-lightest;
            font-size: 14px;
            display: block;
            height: 14px;
            margin-top: -7px;
            transition: all @transition-time-base;
        }
        .search-input{
            height: 100%;
            @shape-clear()
        }
        .search-input:focus{
            border:none;
        }
        .search-input:read-only{
            opacity: 0;
            height: 0;
            width: 0;
            margin:0;
            padding: 0;
        }
        .select-type{
            //line-height: 16px;
            //padding:9px 0
        }
        
        &.open{
            border-color: @ladder-background-light;
            box-shadow:0 0 3px @ladder-background-light;
    
            .icon-row{
                transform: rotate(180deg);
            }
        }
    }
    
    .data-load{
        position: absolute;
        left: 1px;
        top: 1px;
        line-height: @height-inner;
        right: 1px;
        text-indent: 15px;
        color: @color-lighter;
        cursor: no-drop;
        background: #fff;
        border-radius: @radius-base;
        overflow: hidden;
    }
    
    .select-radio{
        .search-input {
            position: absolute;
            left: 6px;
            width: calc(100% - 40px);
        }
        .select-name{
            display: inline-block;
            line-height: 16px;
            padding:8px 0;
            width:calc(100% - 10px)
        }
    }
    
    .select-checkbox{
        
        .search-input{
            padding: 7px 0;
            //flex-grow: 1;
            min-width: 8px;
            max-width:200px
        }
        .select-tag{
            position: relative;
            float: left;
            border:@border-color-light solid 1px;
            background:@background-lightest;
            color: @color-light;
            min-width:30px;
            margin: 5px 5px 5px 0;
            padding: 0 0 0 7px;
            font-size: @font-small;
            border-radius: 2px;
            
            .select-name{
                padding-right:20px;
            }
            
            .del{
                position: absolute;
                right: 3px;
                top:3px;
                font-size:@font-small;
                color: #ccc;
            }
            
            &:hover{
                color: @color-lighter;
            }
        }
    }
    
    .select-list-content{
        //position: absolute;
        position: fixed;
        background: #fff;
        .border-base(@border-color-light);
        //min-width: 200px;
        top: @height-base + 4;
        border-radius: @radius-base;
        box-sizing: border-box;
        .shadow-base;
        max-height: 280px;
        overflow: auto;
        z-index: 100;
        //width: 100%;
        
        li.normal-li{
            line-height: 20px;
            height: 20px;
            //padding: 0 10px;
            cursor: pointer;
            color: @color-light;
            padding: 7px 10px;
            //width: 100%;
            display: block;
            float: unset;
            border: none;
            margin: 0;
            box-sizing: content-box;
            .right-tip{
                float: right;
                color: @color-lightest;
                line-height: inherit;
            }
            .left-name{
                color: inherit;
                font-weight: inherit;
                display: inline-block;
            }
            
            &:hover{
                background: @background-lightest;
            }
            &.current{
                background: @ladder-background-lighter;
                color:@ladder-color-base !important;
                font-weight: 700;
            }
            &.hover{
                font-weight: 700;
                background: @background-lightest;
            }
        }
        li.noSelect{
            width: 100%;
            color:@color-lighter;
            line-height: 100px;
            text-align: center;
            border: none;
        }
        li.tip-li{
            width: 100%;
            text-align: center;
            color: @color-lighter;
            line-height: 80px;
        }
    }

    &.disabled-select{
        .select-header{
            background: #f2f2f2;
            cursor: no-drop;
        }
    }
}

//switch组件
@switch-size:@height-small;
@switch-space:1px;
.Ladder-Switcher{
    display: inline-block;
    text-align: center;
    font: @font;
    .center{
        display: inline-block;
        position: relative;
    }
    
    .switch-value{
        float: left;
        line-height: @switch-size;
        color: #999;
        margin: 0;
        margin-right: 10px;
        
        &.switch-behide{
            margin-right:0;
            margin-left: 10px;
        }
    }
    .select{
        color: @ladder-color-base;
        font-weight: bold;
    }
    .switch-el{
        float: left;
        height: @switch-size;
        position: relative;
        width: 55px;
        background: #d0d0d0;
        border-radius: 20px;
        //margin: 0 10px;
        -webkit-transition: all 1s;
        transition: all 1s;
        cursor: pointer;
        box-sizing: unset;
        margin: 0;
        //.border-base(#eee);
        
        &:before{
            content: "";
            width: @switch-size - @switch-space*2;
            height: @switch-size - @switch-space*2;
            left: @switch-space;
            position: absolute;
            display: block;
            top: @switch-space;
            background: #fff;
            border-radius: 50%;
            -webkit-transition: all 1s;
            transition: all 1s;
        }
    }
    .switch-el.on{
        background: @ladder-background-base;
        //.border-base(@ladder-background-base);
        
        &:before{
            background: #fff;
            right: @switch-space;
            left: unset;
        }
    }
    .be-inner{
        .switch-value{
            position: absolute;
            top: 0;
            z-index: 1;
            opacity: 0;
            pointer-events: none;
            user-select: none;
            width: @switch-size;
            height: @switch-size;
            text-align: center;
            margin: 0;
            overflow: hidden;
        }
        .switch-before{
            left: 0;
        }
        .switch-behide{
            right: 0;
        }
        .select{
            -webkit-transition: all 0.5s;
            transition: all 0.5s;
            opacity: 1;
        }
    }
}

//Messager组件
@messager-space:40px;
.Ladder-Messager{
    position: fixed;
    padding: 10px 20px;
    line-height: 24px;
    max-width: 50%;
    min-width: 200px;
    background: #fff;
    .border-base();
    box-shadow: 1px 1px 5px #ddd;
    border-radius: 4px;
    user-select: none;
    left: unset;
    right: unset;
    top: unset;
    bottom: unset;
    transform:unset;
    z-index: 1111;
    
    //位置
    &.center{
        top:50%;
        left: 50%;
        transform:translate(-50%,-50%);
    }
    &.center-left{
        top:50%;
        left: @messager-space;
        transform:translate(0,-50%);
    }
    &.center-right{
        top:50%;
        right: @messager-space;
        transform:translate(-50%,0);
    }
    &.top{
        top:@messager-space;
        left: 50%;
        transform:translate(-50%,0);
    }
    &.top-left{
        top:@messager-space;
        left: @messager-space;
    }
    &.top-right{
        top:@messager-space;
        right: @messager-space;
    }
    &.bottom{
        bottom:@messager-space;
        left: 50%;
        transform:translate(-50%,0);
    }
    &.bottom-left{
        bottom:@messager-space;
        left: @messager-space;
    }
    &.bottom-right{
        bottom:@messager-space;
        right: @messager-space;
    }
    
    //背景色
    &.background-normal{
        border:@background-blue solid 1px;
        background: #f2f9ff;
    }
    &.background-err{
        border:@background-red solid 1px;
        background: #fff7f7;
    }
    &.background-warn{
        border:@background-origin solid 1px;
        background: #fffdf7;
    }
    &.background-success{
        border:@background-green solid 1px;
        background: #f2fff9;
    }
    
    .sta-icon{
        color: @background-blue;
        font-size: 18px;
        height: 18px;
        display: inline-block;
        line-height: 18px;
        vertical-align: bottom;
        margin-right: 5px;
        
        &:before{
            font-family: @icon-font-name;
            content: '\e77f';
            height: 18px;
            display: block;
            line-height: 18px;
        }
        &.err{
            vertical-align: middle;
            color: @background-red;
            &:before{
                content: '\e785';
            }
        }
        &.warn{
            color: @background-origin;
        }
        &.success{
            vertical-align: middle;
            color: @background-green;
            font-size: 16px;
            &:before{
                content: '\e851';
                line-height: 20px;
            }
        }
    }
    .close-btn{
        position: absolute;
        top: 3px;
        right: 6px;
        font-size: 14px;
        color: #999;
        cursor: pointer;
        
        &:hover{
            color: #666;
        }
    }
}

//平铺选择框
.Ladder-Checkbox{
    font: @font;
    .primary-input{
        margin-left: 10px;
        &:first-child{
            margin-left: 0;
        }
    }
    .checkbox-list{
        &>li{
            float: @fl;
            padding: 3px 15px;
            margin: 5px 0 5px 15px;
            border: @ladder-background-base solid 1px;
            border-radius: @radius-base;
            cursor: pointer;
            min-width: 60px;
            text-align: center;
            min-height: 28px;
            line-height: unset !important;
            box-sizing: border-box;
            background: #fff;
            color: @ladder-background-base;
            overflow: hidden;
        
            &.check{
                position: relative;
                background: @ladder-background-base;
                color: #fff;
                border-color: @ladder-background-base;
            
                &:after{
                    position: absolute;
                    bottom: 2px;
                    right: -1px;
                    font-family:@icon-font-name;
                    content: "\e8a9";
                    color: #fff;
                    font-size: 36px;
                }
            }
        }
    }
}

//上传文件
.Ladder-UploadFiles{
    width: 100%;
    min-width: 430px;
    border-radius: 2px;
    position: relative;
    .header{
        position: relative;
        padding: 0 20px;
        height: 45px;
        line-height: 45px;
        box-shadow: 0px 1px 5px #ddd;
        color: #333;
        font-size: 16px;
        font-weight: bold;
        box-sizing: border-box;

        .tip{
            position: absolute;
            right: 20px;
            top: 0;
            bottom: 0;
            color: #999;
            font-size: @font-small;
            font-weight: normal;
            line-height: 45px;
        }
    }

    .select-contain{
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        height: 55px;

        .select-btn{
            position: relative;
            display: inline-block;
            overflow: hidden;
            cursor: pointer;

            .select-input{
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                font: unset;
                font-size: 14px;
            }
        }

        .paste-input{
            padding: 0 10px;
            width: 200px;
            height: @height-base;
            .border-base();
            border-radius:@radius-base;
            box-sizing: border-box;
            vertical-align: top;
            margin-right: 10px;
        }
        .upload-btn{
            background: @ladder-background-base;
            color: #fff;
            float: right;
        }
    }

    .files-list{
        width: calc(100% - 20px);
        margin: 0 auto;
        box-shadow: 1px 1px 3px #ddd;
        * {
            font: 12px/20px "Microsoft YaHei", Tahoma, Helvetica, Arial, "宋体", sans-serif;
        }
        tr{
            border-bottom: #eee dashed 1px;
            //&:first-child{
            //    border-bottom: none;
            //}
            &:last-child,.tr-last{
                border-bottom: none;
            }
        }
        th{
            height: @height-outer;
            line-height: @height-outer;
            color: #333;
            background: #f9f9f9;
            padding: 0 4px;
            box-sizing: border-box;
            font: 12px/20px "Microsoft YaHei", Tahoma, Helvetica, Arial, "宋体", sans-serif;
        }
        .handle-box{
            text-align: right;
            padding-right: 20px;
            box-sizing: border-box;
            width: 100px;
        }
        td{
            color: #666;
            text-align: center;
            padding: 8px 4px;
            box-sizing: border-box;

            &.handle-box{
                .ladderfont{
                    color: @ladder-background-base;
                    font-size: 20px;
                    margin: 0 5px;
                    cursor: pointer;
                    vertical-align: middle;

                    &.del{
                        color: #ff5d5b;
                        font-size: 16px;
                    }
                }
            }
            &.tip{
                line-height: 90px;
                color: #999;
                font-size: 14px;
            }
        }
        .text-left{
            text-align: left;
        }
    }
}

//上传文件图片预览弹窗
.Ladder-uploadImgWin{
    .position-fixed();
    display: flex;
    justify-content:center;
    align-items:center;


    .contain{
        position: relative;
        max-height: calc(100% - 100px);
        max-width: calc(100% - 40px);
        img{
            display: block;
            width: 100%;
        }
    }

    .shadow{
        .position-fixed();
        background: @background-shadow;
    }
    .close{
        position: absolute;
        top: -35px;
        right: 0;
        color: #fff;
        font-size: 30px;
        line-height: 30px;
        cursor: pointer;

        &:hover{
            font-size: 34px;
        }
    }
}

//普通input,带动画，聚焦边框转圈
@input_radio:4px;
.ladder-animation-input{
    display: block;
    background: none;
    width:100%;
    min-width: 30px;
    height: 34px;
    border-radius:@input_radio;
    box-sizing: border-box;
    font-size: inherit;
    text-transform: capitalize;
    position: relative;
    overflow: hidden;
    border: #eee solid 1px;
    background: #fff !important;
    background-color: #fff !important;

    .type-icon{
        display: block;
        position: absolute;
        left: 9px;
        top: 9px;
        width: 20px;
        font-size: 18px;
        color: #ccc;
    }
    input{
        position: absolute;
        left: 1px;
        top: 1px;
        width: calc(100% - 2px) !important;
        height: calc(100% - 2px) !important;
        border: none !important;
        border-radius:@input_radio;


        &:focus{
            border: unset !important;
        }
    }
    .type-input{
        left: 28px;
        width: calc(100% - 30px) !important;
    }
    &::before,
    &::after {
        box-sizing: border-box;
        content: '';
        position: absolute;
        border: 1px solid transparent;
        width: 0;
        height: 0;
    }

    &::before {
        top: 0;
        left: 0;
    }
    &::after {
        bottom: 0;
        right: 0;
    }
    &.current::before,
    &.current::after{
        width: 100%;
        height: 100%;
    }
    &.current::before {
        border-radius: @input_radio;
        border-top-color: @ladder-background-base;
        border-right-color: @ladder-background-base;
        -webkit-transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
        transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
    }
    &.current::after {
        border-radius: @input_radio;
        border-bottom-color: @ladder-background-base;
        border-left-color: @ladder-background-base;
        -webkit-transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.2s, height 0.2s ease-out 0.60s;
        transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.60s;
    }
}

/*Loading遮罩部分*/
.Ladder-Loading {
    font: @font;
    display: flex;
    justify-content:center;
    align-items:center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgba(0,0,0,0.3);
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
}

.Ladder-Loading .load {
    width: 80px;
    height: 70px;
    text-align: center;
}

.Ladder-Loading .load>div {
    background-color: #fff;
    height: 100%;
    width: 8px;
    margin-left: 4px;
    display: inline-block;
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
}

.Ladder-Loading .load .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.Ladder-Loading .load .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.Ladder-Loading .load .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.Ladder-Loading .load .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}
.Ladder-Loading .tip{
    color: #fff;
    font-size: 14px;
    line-height: 18px;
}

@-webkit-keyframes stretchdelay {
    0%,
    40%,
    100% {
        -webkit-transform: scaleY(0.4)
    }
    20% {
        -webkit-transform: scaleY(1.0)
    }
}

@keyframes stretchdelay {
    0%,
    40%,
    100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }
    20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}


//步骤组件
@Steps-color:#E1E1E1;
@Steps-size:20px;
//直线型
.Ladder-Steps-line{
    font: @font;
    position: relative;
    width: calc(100% - 20px);
    margin: 0 auto;
    min-height: 70px;
    &:before{
        content: "";
        position: absolute;
        top: @Steps-size;
        right: 0;
        height: 4px;
        width: 100%;
        background: @Steps-color;
    }

    .processing-bar{
        content: "";
        position: absolute;
        top: @Steps-size;
        left: 0;
        height: 4px;
        width: 0;
        background: @ladder-background-base;
    }

    .list{
        display: flex;
        justify-content: space-around;
    }


    li{
        position: relative;
        width: 100%;


        .point{
            position: absolute;
            left: calc(50% - @Steps-size/2);
            top: (@Steps-size / 2) + 2px;
            width: @Steps-size;
            height: @Steps-size;
            border-radius: 50%;
            background: @Steps-color;
        }

        .step{
            position: absolute;
            left:0;
            right: 0;
            top: @Steps-size*2;
            text-align: center;
            display: block;
        }

        &:first-child{
            .point{
                left: 0;
            }
            .step{
                text-align: left;
            }
        }

        &:last-child{
            .point{
                left: unset;
                right: 0;
            }
            .step{
                text-align: right;
            }
        }

        &.current{
            .point{
                background: @ladder-background-base;

                &:before{
                    content:"";
                    position: absolute;
                    left: -4px;
                    top: -4px;
                    width: @Steps-size + 6;
                    height: @Steps-size + 6;
                    border-radius: 50%;
                    background: @Steps-color;
                    opacity: 0.5;
                    border: @ladder-background-base solid 1px;
                    z-index:-1;
                }
            }
        }
    }
}

//块状型
.Ladder-Steps-block{
    margin: 0 auto;
    .list{
        display: flex;

        li{
            text-indent: 10px;
            position: relative;
            padding: 3px 20px;
            text-align: center;
            min-width: 120px;
            border: @ladder-background-base solid 1px;
            border-right: 0;
            box-sizing: border-box;
            color: @ladder-background-base;
            margin-right: @Steps-size+5px;
            cursor: default;

            &:after{
                position: absolute;
                right: (-@Steps-size/2);
                content: "";
                width: @Steps-size;
                height: @Steps-size;
                box-sizing: border-box;
                border: 1px solid @ladder-background-base;
                border-width: 1px 1px 0 0;
                transform: rotate(45deg);
                text-indent:@Steps-size/2;
            }

            &.current{
                background:@ladder-background-base;
                color: #fff;

                &:after{
                    background: @ladder-background-base;
                }
            }

            //&:hover{
            //    background:@ladder-background-base;
            //    opacity: 0.6;
            //    color: #fff;
            //
            //    &:after{
            //        background: @ladder-background-base;
            //    }
            //}
        }
    }

}

//背景色型
.Ladder-Steps-background{
    position: relative;
    width: 100%;
    background: @ladder-background-base;
    padding: 20px 0;
    min-height: 80px;
    margin: 0 auto;
    .processing-bar{
        position: absolute;
        top: @Steps-size*2;
        left: 5%;
        margin: 0 auto;
        height: 2px;
        width: 90%;
        //background: radial-gradient(white 40%, @ladder-background-base 100%);
        background: -webkit-linear-gradient(left, @ladder-background-base -4%, #fff 20%,#fff 80%, @ladder-background-base 100%);
    }

    .list{
        display: flex;
        justify-content: space-around;
        li{
            position: relative;
            width: 100%;
            text-align: center;
            min-height: 80px;
            .point{
                position: absolute;
                left: calc(50% - @Steps-size/2);
                top: (@Steps-size / 2) + 2px;
                width: @Steps-size;
                height: @Steps-size;
                border-radius: 50%;
                background: #fff;

                &:before{
                    content: "";
                    position: absolute;
                    left: 6px;
                    top: 6px;
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background: @ladder-background-base;
                }
            }
            .step{
                position: absolute;
                left:0;
                right: 0;
                top: @Steps-size*2.5;
                text-align: center;
                display: block;

                span{
                    color: #fff;
                    padding: 3px 10px;
                    border-radius: 20px;
                }
            }
            &.current{
                .point{
                    box-shadow: 0px 0px 10px 2px #fff
                }
                .step{
                    span{
                        background: #fff;
                        color: @ladder-background-base;
                    }
                }
            }
        }
    }
}
//标签下拉
.Ladder-tagSelect{
    font: @font;
    &.fixed{
        width: 100% !important;
        height: 100% !important;
        display: block;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
    }
    .select-item{
        position: relative;
        width: 100%;
        height: @height-base;
        .border-base();
        border-radius: @radius-base;
        box-sizing: border-box;

        .icon-row{
            position: absolute;
            right: 10px;
            top: 50%;
            color: #ccc;
            font-size: 14px;
            display: block;
            height: 14px;
            margin-top: -7px;
            transition: all 0.3s;
        }

        &.open .icon-row{
            transform: rotate(180deg);
        }
    }
    .tag-list-contain{
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 3;
        transform:translate(-50%,-50%);
        webkit-transform:translate(-50%,-50%);
        overflow: hidden;
        background: #fff;
        border-radius: @radius-base;
        border: @border-color-light solid 1px;
        display: inline-block;
        box-sizing: border-box;
        min-width: 300px;
    }

    .header-contain{
        padding: 0 5px 5px;
        box-shadow: 1px 1px 5px #ddd;
        background: #fbfbfb;
        box-sizing: border-box;
        .tagHeader{
            border-bottom: @border-color-base solid 1px;

            li{
                float: left;
                padding: 3px 6px;
                border: @border-color-base solid 1px;
                color: @color-light;
                border-radius: @radius-base;
                min-width: 40px;
                box-sizing: border-box;
                text-align: center;
                margin: 5px;
                cursor: pointer;
                height: @height-small;
                background: #fff;

                &.checked{
                    position: relative;
                    background: @background-origin-lighter;
                    color:@background-origin;
                    border:@background-origin-lighter-hover solid 1px;

                    &:after{
                        content: '';
                        position: absolute;
                        right: -2px;
                        top: -2px;
                        background:@background-origin-lighter-hover;
                        width: 6px;
                        height: 6px;
                        overflow: hidden;
                        border-radius: 50%;
                    }
                }
                &.current{
                    background: @ladder-color-base;
                    border:@ladder-color-base solid 1px;
                    color:#fff
                }
            }
        }
        .searchHeader{
            position: relative;
            height: @height-small;
            border:@border-color-base solid 1px;
            border-radius: @radius-base;
            width: calc(100% - 10px);
            margin: 5px auto 0;
            overflow: hidden;
            input{
                position:absolute;
                left: 0;
                top: 0;
                width:calc(100% - 40px);
                bottom: 0;
                text-indent: 5px;
                @shape-clear();
                background: #fff;
            }
            .search-btn{
                position: absolute;
                right:0;
                top: 0;
                bottom: 0;
                width: 40px;
                font-size: 16px;
                line-height: @height-small + 2;
                color: @ladder-color-base;
                @shape-clear();
                background: none;
                cursor: pointer;
                background: #fff;
                &:before{
                    content:"";
                    position: absolute;
                    left: 0;
                    top: 5px;
                    bottom: 5px;
                    width: 1px;
                    background: @border-color-base;
                }
            }

        }
    }
    .list-contain{
        overflow: auto;
        padding: 10px;
        box-sizing: border-box;
        .list{
            overflow: auto;
            width: 100%;
            li{
                position: relative;
                color: @color-light;
                padding: 8px 6px;
                border-bottom:@border-color-base dashed 1px;
                cursor: pointer;

                &.current{
                    background: @ladder-background-lighter;
                    color: @ladder-color-base;
                }

                &:last-child{
                    border-bottom: none;
                }
                .list-tag{
                    position: absolute;
                    right: 0px;
                    top: 5px;
                    border: #ddd dashed 1px;
                    border-radius: 4px;
                    padding: 2px 5px;
                }
            }
            .tip{
                color: #999;
                font-size: 14px;
                width: 100%;
                height: 60px;
                line-height: 60px;
                padding: 0 !important;
                margin: 0 !important;
                float: unset !important;
                border: none !important;
                text-align: center;
                cursor: default;
            }
            &.free{
                li{
                    float: left;
                    padding: 3px 6px;
                    border: @border-color-base dashed 1px;
                    margin: 5px;
                    border-radius: @radius-base;
                }
            }
        }
    }
    .btn-box{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        box-shadow: 0 -2px 4px #ededed;
        text-align: center;
        background: #fff;
        height: 46px;
        overflow: hidden;
        button{
            margin: 8px 10px;
            background: #fff;
            border: @border-color-base solid 1px;
            width: 100px;
            border-radius: 4px;
            height: 30px;
            cursor: pointer;
        }
        button.sure{
            background: @ladder-background-base;
            color: #fff;
            border: @ladder-border-color solid 1px;
        }
    }

}
// 列表
.Ladder-ListView{
    .selectHeader{
        position: relative;
        display: flex;
        justify-content: flex-end;
        box-shadow: 1px 1px 2px #f2f2f2;
        padding: 10px 0;
        height:30px;
        line-height: 30px;
        overflow: hidden;
        .caption{
            position: absolute;
            left: 10px;top: 15px;
            width: auto;
            font-size: 16px;
            margin: 0 5px;
            font-weight: bold;
            color: @ladder-color-darker;
        }
    }
   .type-change-contain{
       display: flex;
       margin-right: 10px;
        li{
            font-size: @font-small;
            margin-right: 10px;
            color: #999;
            cursor: pointer;

            .ladderfont{
                padding:0 3px 0 10px;
            }

            &.current{
                color: @MainTonal;
            }

        }

   }
   .searchContain{
       width: 220px;
       border: #eee solid 1px;
       display: flex;
       justify-content: space-between;
       height: 30px;
       line-height: 30px;
       border-radius: 20px;
       overflow: hidden;
       margin-right: 20px;

       .btn-search{
            width: 40px;
            color: #41A5EB;
            background: none;
            border: none;
            line-height: 34px;
            font-size: 16px;
            cursor: pointer;
       }
       input{
           display: block;
           width: calc(100% - 60px);
           border: none;
           text-indent: 15px;
       }
   }
   @li_width:180px;
   .list{
       display: flex;
        flex-wrap: wrap;
        padding: 10px 5px;
       li{
           width: @li_width;
           padding: 10px;
           box-sizing: border-box;
           cursor: pointer;
           margin: 0 10px 18px;
           border-radius: 2px;
           border: #f2f2f2 solid 1px;
           position: relative;
           &:hover{
               box-shadow: 1px 1px 5px #ddd;
               border-color:#fff;
           }
           .img-box{
                width:@li_width - 20;
                height: @li_width - 50;
                border-radius: 4px;
                overflow: hidden;
                text-align: center;
                img{
                    width: @li_width - 50;
                    height: @li_width - 50;
                    margin: 0 auto;
                    // width: 120px;
                    // height: 120px;
                    // margin: 5px auto;
                }
            }
            .text-box{
                padding-top: 10px;
            }
            p{
                // white-space:nowrap;
                font-size: 14px;
                .ladder-rest-point;
                // word-break:keep-all
            }
            .name{
                font-weight: bold;
                color: #444;
                // margin: 8px;
                text-align: center;
            }
            .desc{
                color: #999;
                text-align: center;
            }
       }
       &.flow{
           li{
               width: 100%;
               margin-bottom: 10px;

                .inner{
                    display: flex;
                    align-content: center;
                    align-items: center;
                }

               .img-box{
                    width: 60px;
                    height: 60px;
                    margin-right: 10px;
                   img{
                       width: 100%;
                       height: unset;
                       margin: unset;
                   }
               }

               .text-box{
                   padding: 0;
                   p{
                       line-height: 26px;
                   }
                   .name{
                       text-align: left;
                   }
               }
           }
       }
   }
   .tipper{
       text-align: center;
       padding: 20px 0;
       font-size:14px;
       color: #ddd;

       .ladderfont{
           color: #eee;
           font-size: 90px;
       }
   }
}


// cron表达式
.Ladder-CronEquation{
    width: 400px;
    height: 440px;
    border:#eee solid 1px;
    border-radius: 6px;
    box-sizing: border-box;
    box-shadow: 1px 1px 5px #ddd;
    background-color: #fff;
    .cron-type-nav{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        display: flex;
        width: 100%;
        // border-bottom: #eee solid 1px;
        background: #e8f3ff;
        line-height: 35px;
        height: 35px;
        overflow: hidden;

        li{
            position: relative;
            width: 100%;
            color: #a2ccff;
            font-size: 14px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;

            &::after{
                content:"";
                position: absolute;
                right: 0;
                top: 10px;
                bottom: 10px;
                width: 1px;
                background: #dbdaff;
            }

            &:last-child::after{
                content:unset
            }

            &::before{
                content:"";
                position: absolute;
                background: #0075ff;
                height: 2px;
                width: 0;
                left: 50%;
                margin-left: -5px;
                border-radius: 8px;
                bottom: 0;
                transition: all 0.3s;
            }

            &.current{
                color: #0075ff;

                &::before{
                    width: 10px;
                }

            }
        }
    }

    .cronList-content{
        position: relative;
        height: calc(100% - 35px);
        margin-top: 35px;

        .cronList{
            padding: 0 20px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            box-sizing: border-box;
        }
        .cronList li{
            color: #666;
            padding: 10px 0;
            font-size: 14px;
            border-bottom: #eee dashed 1px;
            line-height: 14px;

            label{
                cursor: pointer;
            }

            &:last-child{
                border: none;
            }

            input[type=number],input[type=text]{
                width: 60px;
                height: 25px;
                border: #eee solid 1px;
                border-radius: 4px;
                margin: 0 5px;
                text-indent: 10px;
            }

            input[type=radio]{
                width: 14px;
                height: 14px;
                margin-right: 5px;
            }

            .cron-appoint-set{
                display: flex;
                flex-wrap: wrap;
                margin-top: 10px;

                .list{
                    display: flex;
                    flex-wrap: wrap;
                    margin-top: 10px;
                }
                .title{
                    padding-top: 8px;
                }

                label{
                    width: 16.66%;
                    margin-bottom: 10px;

                    input{
                        margin-right: 5px;
                    }
                }

                &.cron-day-set label{
                    width: 12.5%;
                }
                &.cron-week-set label{
                    width: 14.28%;
                }
            }
        }
    }
}

.Ladder-FullCalendar .fc-button{
    height: @height-inner;
    line-height: @height-inner;
    min-width: 60px;
    border: @ladder-background-base solid 1px;
    color: @ladder-background-base;
    background: @ladder-background-lighter;
    text-align: center;
    margin-right: 10px !important;
    border-radius: @radius-small !important;
    font-size: 14px !important;
}
.Ladder-FullCalendar .fc-state-down, .fc-state-active{
    box-shadow:none !important;
    background: @ladder-background-base;
    color: #fff;
}
.Ladder-FullCalendar .fc-button-today{
    background: @ladder-background-base;
    color: #fff;
}
.Ladder-FullCalendar .fc-state-disabled{
    cursor: no-drop;
    opacity: 0.4 !important;
}
.Ladder-FullCalendar .fc-header-title h2{
    font-size: 24px;
}
.Ladder-FullCalendar .fc-header .fc-button{
    margin-bottom: unset;
}
.Ladder-FullCalendar .fc-header-title{
    padding: 15px 0;
}