//  --------------------------------------------------------------------------------
//  展示给外部可以更改的变量
//  主题色
@primary: #3880ff;
//  应用背景色
@app-background-color: #FFF;
//  应用字体色
@app-text-color: #515a6e;
//  头部背景色
@header-background-color: @primary;
//  头部字体色
@header-text-color: #FFF;
//  导航背景色
@menu-background-color: #FFF;
//  导航文本色
@menu-text-color: #808080;
//  导航项激活背景色
@menu-item-background-color--active: @primary;
//  导航项激活文本色
@menu-item-text-color--active: #FFF;

//  ----------------------------------------基于主题色计算----------------------------------------
@color-primary-base: @primary;
@color-primary-contrast: #fff;
@color-primary-shade: mix(#000, @primary, 12%);
@color-primary-tint: mix(#fff, @primary, 10%);

//  ----------------------------------------应用级----------------------------------------
//  类名基础前缀
@ibiz-prefix: ibiz;

//  字体
@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
//  分隔线
@app-divider-color: mix(@app-background-color, @app-text-color, 85%);
//  头部悬浮背景色
@header-background-color--hover: rgba(255, 255, 255, 0.2);

//  ----------------------------------------导航栏----------------------------------------
//  导航项背景色
@menu-item-background-color: @menu-background-color;
//  导航项文本色
@menu-item-text-color: @menu-text-color;
//  导航项悬浮背景色
@menu-item-background-color--hover: mix(@menu-item-background-color--active, #FFF, 70%);
//  导航项悬浮文本色
@menu-item-text-color--hover: mix(@menu-item-text-color--active, #FFF, 70%);
//  导航项禁用背景色
@menu-item-background-color--disabled: #FFF;
//  导航项禁用文本色
@menu-item-text-color--disabled: rgba(0, 0, 0, 0.25);

//  ----------------------------------------按钮----------------------------------------
//  按钮（默认、行为级别 = 不常用 | 一般操作）背景色
@button-background-color: #FFF;
//  按钮（默认、行为级别 = 不常用 | 一般操作）文本色
@button-text-color: @app-text-color-step--200;
//  按钮（默认、行为级别 = 不常用 | 一般操作）边框色
@button-border-color: @app-text-color-step--700;
//  按钮（默认、行为级别 = 不常用 | 一般操作）悬浮背景色
@button-background-color--hover: #FFF;
//  按钮（默认、行为级别 = 不常用 | 一般操作）悬浮文本色
@button-text-color--hover: @primary;
//  按钮（默认、行为级别 = 不常用 | 一般操作）悬浮边框色
@button-border-color--hover: @primary;
//  按钮（默认、行为级别 = 不常用 | 一般操作）禁用背景色
@button-background-color--disabled: @app-background-color-step-50;
//  按钮（默认、行为级别 = 不常用 | 一般操作）禁用文本色
@button-text-color--disabled: @app-text-color-step--650;
//  按钮（默认、行为级别 = 不常用 | 一般操作）禁用边框色
@button-border-color--disabled: @app-text-color-step--750;

//  按钮（行为级别 = 常用操作）背景色
@button-middle-background-color: mix(@primary, #FFF, 20%);
//  按钮（行为级别 = 常用操作）文本色
@button-middle-text-color: @primary;
//  按钮（行为级别 = 常用操作）边框色
@button-middle-border-color: mix(@primary, #FFF, 40%);
//  按钮（行为级别 = 常用操作）悬浮背景色
@button-middle-background-color--hover: @primary;
//  按钮（行为级别 = 常用操作）悬浮文本色
@button-middle-text-color--hover: #FFF;
//  按钮（行为级别 = 常用操作）悬浮边框色
@button-middle-border-color--hover: @primary;
//  按钮（行为级别 = 常用操作）禁用背景色
@button-middle-background-color--disabled: mix(@button-middle-background-color, #FFF, 80%);
//  按钮（行为级别 = 常用操作）禁用文本色
@button-middle-text-color--disabled: mix(@primary, #FFF, 50%);
//  按钮（行为级别 = 常用操作）禁用边框色
@button-middle-border-color--disabled: mix(@button-middle-background-color, #FFF, 80%);

//  按钮（行为级别 = 关键操作）背景色
@button-high-background-color: @primary;
//  按钮（行为级别 = 关键操作）文本色
@button-high-text-color: #FFF;
//  按钮（行为级别 = 关键操作）边框色
@button-high-border-color: @primary;
//  按钮（行为级别 = 关键操作）悬浮背景色
@button-high-background-color--hover: mix(@primary, #FFF, 80%);
//  按钮（行为级别 = 关键操作）悬浮文本色
@button-high-text-color--hover: #FFF;
//  按钮（行为级别 = 关键操作）悬浮边框色
@button-high-border-color--hover: mix(@primary, #FFF, 80%);
//  按钮（行为级别 = 关键操作）禁用背景色
@button-high-background-color--disabled: mix(@primary, #FFF, 50%);
//  按钮（行为级别 = 关键操作）禁用文本色
@button-high-text-color--disabled: #FFF;
//  按钮（行为级别 = 关键操作）禁用边框色
@button-high-border-color--disabled: mix(@primary, #FFF, 50%);

//  ----------------------------------------项----------------------------------------
//  项背景色
@item-background-color: #FFF;
//  项文本色
@item-text-color: @app-text-color;
//  项边框色
@item-border-color: mix(@app-background-color, @app-text-color, 85%);

//  项背景色（激活）
@item-background-color--active: mix(@primary, #FFF, 20%);
//  项文本色（激活）
@item-text-color--active: @app-text-color-step--50;
//  项边框色（激活）
@item-border-color--active: mix(@primary, #FFF, 40%);

//  项背景色（悬浮）
@item-background-color--hover: mix(@item-background-color--active, #FFF, 50%);
//  项文本色（悬浮）
@item-text-color--hover: mix(@item-text-color--active, #FFF, 80%);
//  项边框色（悬浮）
@item-border-color--hover: mix(@item-border-color--active, #FFF, 80%);

//  项背景色（禁用）
@item-background-color--disabled: @app-background-color-step-50;
//  项文本色（禁用）
@item-text-color--disabled: @app-text-color-step--650;
//  项边框色（禁用）
@item-border-color--disabled: @app-text-color-step--750;

// -------------------------------------------------------------------------------------------
// 颜色步骤用于提供元素的文本和背景颜色的变化， 步骤朝着对比色的方向移动。
// 例如, @app-text-color-step-XXX 将从 @app-text-color 走向 @app-background-color,
// 反之，@app-background-color-step-XXX 将从 @app-background-color 走向 $text-color.
@app-background-color-step-50: mix(@app-text-color, @app-background-color, 5%);
@app-background-color-step-100: mix(@app-text-color, @app-background-color, 10%);
@app-background-color-step-150: mix(@app-text-color, @app-background-color, 15%);
@app-background-color-step-200: mix(@app-text-color, @app-background-color, 20%);
@app-background-color-step-250: mix(@app-text-color, @app-background-color, 25%);
@app-background-color-step-300: mix(@app-text-color, @app-background-color, 30%);
@app-background-color-step-350: mix(@app-text-color, @app-background-color, 35%);
@app-background-color-step-400: mix(@app-text-color, @app-background-color, 40%);
@app-background-color-step-450: mix(@app-text-color, @app-background-color, 45%);
@app-background-color-step-500: mix(@app-text-color, @app-background-color, 50%);
@app-background-color-step-550: mix(@app-text-color, @app-background-color, 55%);
@app-background-color-step-600: mix(@app-text-color, @app-background-color, 60%);
@app-background-color-step-650: mix(@app-text-color, @app-background-color, 65%);
@app-background-color-step-700: mix(@app-text-color, @app-background-color, 70%);
@app-background-color-step-750: mix(@app-text-color, @app-background-color, 75%);
@app-background-color-step-800: mix(@app-text-color, @app-background-color, 80%);
@app-background-color-step-850: mix(@app-text-color, @app-background-color, 85%);
@app-background-color-step-900: mix(@app-text-color, @app-background-color, 90%);
@app-background-color-step-950: mix(@app-text-color, @app-background-color, 95%);
@app-text-color-step--50: mix(@app-background-color, @app-text-color, 5%);
@app-text-color-step--100: mix(@app-background-color, @app-text-color, 10%);
@app-text-color-step--150: mix(@app-background-color, @app-text-color, 15%);
@app-text-color-step--200: mix(@app-background-color, @app-text-color, 20%);
@app-text-color-step--250: mix(@app-background-color, @app-text-color, 25%);
@app-text-color-step--300: mix(@app-background-color, @app-text-color, 30%);
@app-text-color-step--350: mix(@app-background-color, @app-text-color, 35%);
@app-text-color-step--400: mix(@app-background-color, @app-text-color, 40%);
@app-text-color-step--450: mix(@app-background-color, @app-text-color, 45%);
@app-text-color-step--500: mix(@app-background-color, @app-text-color, 50%);
@app-text-color-step--550: mix(@app-background-color, @app-text-color, 55%);
@app-text-color-step--600: mix(@app-background-color, @app-text-color, 60%);
@app-text-color-step--650: mix(@app-background-color, @app-text-color, 65%);
@app-text-color-step--700: mix(@app-background-color, @app-text-color, 70%);
@app-text-color-step--750: mix(@app-background-color, @app-text-color, 75%);
@app-text-color-step--800: mix(@app-background-color, @app-text-color, 80%);
@app-text-color-step--850: mix(@app-background-color, @app-text-color, 85%);
@app-text-color-step--900: mix(@app-background-color, @app-text-color, 90%);
@app-text-color-step--950: mix(@app-background-color, @app-text-color, 95%);

//  ----------------------------------------elements 网站HTML元素----------------------------------------

body {
    ::-webkit-scrollbar-thumb {
        background-color: @app-background-color-step-200;
    }

    div {
        scrollbar-color: @app-background-color-step-200 @app-background-color;
        /* 滑块颜色  滚动条背景颜色 */
    }

    //下拉项样式
    .ivu-dropdown-item {
        color: @app-text-color;
        background-color: @app-background-color;

        &:hover {
            color: @color-primary-base;
            background-color: @item-background-color--hover;
        }
    }
    .el-dropdown-menu__item {
        color: @app-text-color;
        background-color: @app-background-color;

        &:not(.is-disabled):hover {
            color: @color-primary-base;
            background-color: @item-background-color--hover;
        }
    }

    // 选择项样式
    .ivu-select-dropdown-transfer {
        .ivu-select-item-selected {
            color: @color-primary-base;
            font-weight: 600;
            // background-color: @item-background-color--active;
        }
    }

    // ivu 按钮样式
    .ivu-btn-default {
        .app-button.ivu-btn-default;
        &:focus {
            box-shadow: 0 0 0 2px rgba(@color-primary-base, 0.2);
        }
    }

    // 输入框
    .ivu-input:hover,.ivu-input:focus {
        border-color: @color-primary-base;
    }

    // 按钮样式
    .ivu-btn.ivu-btn-primary {
        .app-button.ivu-btn-default.srfactionlevel250;
    }

    .el-tabs {
        .el-tabs__item {
            &:hover {
                color: @color-primary-base;
            }

            &.is-active {
                color: @color-primary-base;
            }
        }

        .el-tabs__active-bar {
            background-color: @color-primary-base;
        }

        .el-tabs__nav-wrap::after {
            background-color: @app-divider-color;
        }
    }
    .ivu-input:hover{
        border-color: @color-primary-base;
    }
    .ivu-input:focus{
        .editor-border-active;
    }
    .el-select .el-input {
        .el-input__inner:focus,.el-input__inner:hover{
            border-color: @color-primary-base;
        }
        &.is-focus {
            .el-input__inner {
                border-color: @color-primary-base;
            }
        }
    }
    .el-select-dropdown {
        .el-select-dropdown__item {
            &:hover {
                color: @item-text-color--hover;
                background-color: @item-background-color--hover;
            }
        
            &.selected {
                color: @item-text-color--active;
                background-color: @item-background-color--active;
            }
        }
    }
    // iview 加载中
    .ivu-spin {
        color: @color-primary-base;
    }
}

//  ----------------------------------------generic 原子性样式----------------------------------------
.hover-active {
    &:hover {
        color: @item-text-color--hover;
        background-color: @item-background-color--hover;
    }

    &.is-active {
        color: @item-text-color--active;
        background-color: @item-background-color--active;
    }
}

.editor-border-active {
    border-color: @color-primary-base;
    box-shadow: 0 0 0 2px mix(white, @color-primary-base, 85%)
}

//  ----------------------------------------tumps 使用import----------------------------------------
body {
    font-family: @font-family !important;
}
// 分页导航样式 iview使用了important，此处必须使用important
.ivu-tabs-nav {
    .ivu-tabs-tab:hover {
        color: @color-primary-base !important;
    }

    .ivu-tabs-tab-active.ivu-tabs-tab-focused {
        color: @color-primary-base;
        border-color: @color-primary-base  !important;
    }

    .ivu-tabs-ink-bar {
        background-color: @color-primary-base;
    }
}

// 日历样式
.app-control-calendar {
    .app-control-calendar__header__legend.is-disabled {
        .lengend__icon {
            background: @item-background-color--disabled !important;
        }
    }
}
// 表格样式
.app-control-grid {
    .el-table td {
        border-bottom: 1px solid @item-border-color;
    }
    .ascending .sort-caret.ascending {
        border-bottom-color: @color-primary-base !important;
    }
    .descending .sort-caret.descending {
        border-top-color: @color-primary-base !important;
    }
    .el-table__row.grid-selected-row {
        background: @item-background-color--active;
        color: @item-text-color--active;
        &:hover {
            background: @item-background-color--active !important;
            color: @item-text-color--active !important;
            >td {
                background: @item-background-color--active !important;
                color: @item-text-color--active !important;
            }
        }
    }
    .el-table__row:hover,
    .el-table__row.hover-row {
        background: @item-background-color--hover;
        color: @item-text-color--hover;
        >td {
            background: @item-background-color--hover !important;
            color: @item-text-color--hover !important;
        }
    }
}
// 复选框样式
.el-checkbox__input.is-checked, 
.el-checkbox__input.is-indeterminate {
    .el-checkbox__inner {
        border-color: @color-primary-base !important;
        background-color: @color-primary-base !important;
    }
    +.el-checkbox__label {
        color: @color-primary-base !important;
    }
}
// -------------------------------------------------------------------------------------------
//  应用
.appindexview {
    &.app-vc-menu--tabexp_bottom {
        .app-content {
            background-color: @app-background-color;
        }
    }
}

.app-header {
    background-color: @header-background-color;
    color: @header-text-color;

    i:hover {
        color: @app-text-color-step--50;
    }
}

.app-content {
    .app-content__left {
        background: @app-background-color;
    }

    .app-content__right {
        background-color: @app-background-color-step-50;
    }
}

// style2
.app-style2-header {
    background-color: @header-background-color;
    color: @header-text-color;

    i:hover {
        color: @app-text-color-step--50;
    }
}
.app-style2-content__top {
    background-color: @app-background-color-step-50;
}
.app-style2-footer{
    background-color: @color-primary-base;
    color:@color-primary-contrast;
}

//  ----------------------------------------视图----------------------------------------

.view-container {
    background-color: @app-background-color;
}

.view-header {
    border-bottom: 1px solid @app-divider-color;
}

.view-header__left__caption {
    color: @app-text-color;
}

// 视图代理模式
.app-view-layout {
    .app-view-layout__container{
        height: 100%;
        .app-view-layout__container__header {
            border-bottom: 1px solid @app-divider-color;
        }
    }
    .container-item__flex{
        width: 100%;
    }
    .container-item__border{
        height: inherit;
    }
    .container-item__simpleflex{
        height: 100%;
    }
}

// style2 样式
.view-style2-container {
    background-color: @app-background-color;
}

//  应用门户视图
.deportalview {
    background-color: @app-background-color-step-50;
}
.deportalview.view-container2,.deportalview9.view-container2  {
    background-color: @app-background-color;
    .app-control-dashboard {
        background-color: @app-background-color;
    }
}

//  编辑视图2
.deeditview2 {
    .app-vc-dabar {
        background-color: @app-background-color;
    }
    .app-vc-dabar__left__caption {
        border-right: 1px solid @app-divider-color;
        border-left: 3px solid @app-background-color;
        background-color: @item-background-color;
        color: @item-text-color;
        &:hover {
            color: @item-text-color--hover;
            border-left-color: @item-border-color--hover;
            background-color: @item-background-color--hover;
        }

        &.is-active {
            color: @item-text-color--active;
            border-left-color: @color-primary-base;
            background-color: @item-background-color--active;
        }
    }
}

//  编辑视图3
.deeditview3 {
    .app-vc-tab__header {
        border-bottom: 1px solid @app-divider-color;
    }
    .app-vc-tab__header__caption {
        &.is-active {
            color: @color-primary-base;
            &::after {
                background-color: @color-primary-base;
            }
        }
    }
}

//  编辑视图4
.deeditview4 {
    .app-vc-tab__content {
        >.app-control-drtab {
            border-bottom: 1px solid @app-divider-color;
        }
    }
}

//  选择视图
.view-content__body__transfer__left {
    background-color: @app-background-color-step-50;
    border: 1px solid @app-background-color-step-50;
}

.view-content__body__transfer__right {
    background-color: @app-background-color-step-50;
}

.view-content__body__transfer__right__select {
    .picker-item {
        background-color: @app-background-color;
        .hover-active;
    }
}

//  门户视图
.appportalview {
    background-color: @app-background-color-step-50;
}
.appportalview.view-container2 {
    background-color: @app-background-color;
    .app-control-dashboard {
        background-color: @app-background-color;
    }
}

//  ----------------------------------------部件----------------------------------------
.control-container {
    color: @app-text-color;
    background-color: @app-background-color;
}

.control__loading {
    >.loading__text {
        color: @app-text-color-step--400;
    }
}

.control__empty {
    >.empty__text {
        color: @app-text-color-step--400;
    }
}

.app-loading {
    background-color: rgba(@color-primary-base, 0.5);
    .app-loading__icon__content {
        .content__item {
            background: @color-primary-base;

            &.is-active {
                background: @color-primary-base;
            }
        }
    }
}

.app-control-menu--left {
    background-color: @menu-background-color;
    color: @menu-text-color;

    .el-menu {
        background-color: @menu-background-color;
    }

    .el-menu-item,
    .el-submenu__title {
        background-color: @menu-item-background-color;
        color: @menu-item-text-color;

        .ivu-badge-count {
            box-shadow: 0 0 0 0px @color-primary-base;
        }

        &:hover {
            background-color: @menu-item-background-color--hover;
            color: @menu-item-text-color--hover;
        }

        &.is-active {
            color: @menu-item-text-color--active;
            background-color: @menu-item-background-color--active;
        }
    }

    .app-control-menu__item--circle {
        border: 1px solid @app-divider-color;
    }
}

.app-control-menu--center .app-control-menu__group>.ivu-card-head {
    border-bottom-color: @app-divider-color;
}

// 顶部菜单样式
.app-control-menu--top {
    .el-menu--horizontal {
        .el-menu-item,
        .el-submenu__title {
            color: @menu-item-text-color--active;

            .el-icon-arrow-down {
                color: @menu-item-text-color--active;
            }

            &:not(.is-disabled):hover,
            &:not(.is-disabled):focus,
            &.is-active {
                color: @menu-item-text-color--active;
                background-color: transparent;
                border-bottom: 2px solid @menu-background-color;
            }
        }

        .el-submenu {
            &.is-active .el-submenu__title {
                color:  @menu-item-text-color--active;
                border-bottom: 2px solid @menu-background-color;
            }
        }
    }
}

// 气泡菜单样式
.app-control-menu__popper {
    background-color: @app-background-color;
}
.app-control-menu__popper.el-menu--horizontal {
    .el-menu-item,
    .el-submenu__title {
        &:hover {
            background-color: @menu-item-background-color--hover;
            color: @menu-item-text-color--hover;
        }
    }
}

// 中间菜单样式
.app-control-menu--center {
    .app-control-menu__item {
        color: @app-text-color;
        border-left: 10px solid @color-primary-base;
    }
    .app-control-menu__item:hover {
        color: @color-primary-base;
        border-left-color: @color-primary-base;
    }
}

// 导航左侧菜单样式
.app-control-menu--tabexp_left {
    .el-tree-node__content {
        .hover-active;
    }
}

// 导航右侧菜单样式
.app-control-menu--tabexp_right {
    padding-top: 10px;
    .el-tree-node__content {
        .hover-active;
    }
}

// 导航顶部、底部菜单样式
.app-control-menu--tabexp_top,
.app-control-menu--tabexp_bottom {
    .el-menu--horizontal  .el-menu-item {
        color: @app-text-color;
        &.is-active {
            color: @color-primary-base;
            border-color: @color-primary-base;
        }

        &:not(.is-disabled):hover {
            color: @color-primary-base;
        }
    }
}

//  表单
.app-control-searchform__footer {
    .dropdown__icon {
        background: @color-primary-base;
        color: @color-primary-contrast;
    }
}

//  日历部件
.app-control-calendar {
    .el-card.is-always-shadow.is-active {
        box-shadow: 0px 0px 3px 1px mix(@item-background-color--active, @color-primary-base, 45%);
    }
    .fc-button,
    .fc-button-parimary {
        .app-button.ivu-btn-default.srfactionlevel250;
    }

    .fc-button-primary:focus,
    .fc-button-primary:not(:disabled):active:focus {
        box-shadow: none;
    }

    .fc-button-primary:not(:disabled):active,
    .fc-button-primary:not(:disabled).fc-button-active {
        background-color: @button-high-background-color--hover;
        border-color: @button-high-border-color--hover;
        color: @button-high-text-color--hover;
        box-shadow: none;
    }

    .fc-left,
    .fc-right {
        .fc-button-group {
            .fc-button {
                border-left: 1px solid @button-high-border-color--disabled;
                border-right: 1px solid @button-high-border-color--disabled;
            }

            .fc-button:first-child {
                border-left: none;
            }

            .fc-button:last-child {
                border-right: none;
            }
        }
    }
    .selected-event, .select-first-event {
        border: 2px solid @item-border-color--active;
    }
    .selected-event.fc-end:before,
    .select-first-event:before,
    .selected-event.fc-end:before,
    .select-first-event:before {
        border: 9px solid @item-border-color--active;
        color: @item-text-color;
    }
    .selected-event.fc-end:after,
    .select-first-event:after,
    .selected-event.fc-end:after,
    .select-first-event:after {
        border: 2px solid @item-border-color--active;
    }
}

// 选择跳转日期模态
.date-select-model {
    .ivu-modal-footer .ivu-btn {
        border-color: @item-border-color;
    }
}

//  数据看板
.app-control-dashboard {
    background-color: @app-background-color-step-50;
    .app-control-dashboard__portlet__header {
        background-color: @app-background-color;
        border-bottom: 1px solid @app-divider-color;
    }
}

// START --- 数据视图
.app-control-dataview {
    .app-control-dataview__load--more {
        color: @item-background-color--active
    }
    .app-control-dataview__content__item {
        border: 1px solid @item-border-color;
        &:hover {
            border: 1px solid @item-border-color--hover;
        }
        &.is-active {
            border: 1px solid @item-border-color--active;
        }
        .action-button {
            &:hover {
                color: @item-background-color--hover;
            }
            &:disabled,
            &:disabled:hover {
                color: @item-text-color--disabled;
            }
        }
    }
}

// END --- 数据视图

// START --- 数据关系栏
.app-control-drbar {
    .el-menu-item,
    .el-submenu__title {
        color: @item-text-color;
        border-left: 3px solid @app-background-color;

        &:hover {
            border-left-color: @item-background-color--hover;
        }

        &.is-active {
            border-left-color: @item-background-color--active;
        }
    }
    .app-control-drbar__content {
        border-right: 1px solid @app-divider-color;
    }
    .app-control-drbar__popover__item {
        background-color: @app-background-color;
        color: @item-text-color;
        .hover-active;
        &.is-active {
            border-left-color: @color-primary-base;
        }
    }
}

// END --- 数据关系栏

// START --- 数据关系分页
.app-control-drtab {
    .app-control-drtab__item {
        &:hover {
            color: @color-primary-base;
        }

        &.is-active {
            color: @color-primary-base;

            &::after {
                background-color: @color-primary-base;
            }
        }
    }
}

// END --- 数据关系分页

// START --- 表格
.app-control-grid {
    // 表格头样式
    .el-table__header-wrapper,
    .el-table__fixed-header-wrapper {
        th {
            background-color: @app-background-color-step-50;
        }
    }
    // 操作列样式
    .grid-column--ua {
        .column__divider {
            border-left: 1px @app-text-color-step--700 solid;
        }
        .column-content--normal {
            color: @color-primary-base;
        }
    }
    // 分组列样式（选中所有）
    .grid-column--group--all-select {
        >div>label {
            >span {
                .el-checkbox__inner {
                    background-color: @color-primary-base;
                    border-color: @color-primary-base;
                }
                .el-checkbox__inner:after {
                    border: 1px solid @color-primary-base;
                }
            }
        }
    }
    // 分组列样式（选择列）
    .grid-column--group--select {
        >div>label {
            >span {
                .el-checkbox__inner {
                    background-color: @color-primary-base;
                    border-color: @color-primary-base;
                }
                .el-checkbox__inner:before {
                    background-color:  @color-primary-base;
                }
            }
            >span.is-checked {
                .el-checkbox__inner {
                    background-color: @color-primary-base;
                    border-color: @color-primary-base;
                }
            }
        }
    }
    // 分页栏样式
    .control-footer {
        &.app-control-grid__pagination {
            .pagination__refresh {
                &:hover {
                    color: @color-primary-base;
                    border-color: @color-primary-base;
                }
            }
            .ivu-page-item-active {
                background-color: @color-primary-base;
                border-color: @color-primary-base;
                >a {
                    color: @color-primary-contrast;
                }
            }
            .ivu-select-selection:hover {
                border-color: @color-primary-base;
            }
            .ivu-page-options-elevator>input {
                border-color: @color-primary-base;
            }
        }
    }

    // 操作列样式（过滤）
    .app-control-grid__filter {
        background-color: @color-primary-base;
        &::before {
            background-color: @app-background-color;
        }
        &::after {
            background-color: @app-background-color;
        }
        .ivu-poptip-rel {
            .ivu-icon {
                &:hover {
                    color: mix(#fff, @color-primary-base, 80%);
                }
            }
        }
        &.filter__tip--show {
            >.ivu-poptip-rel {
                i {
                    color: @app-background-color;
                    &:hover {
                        color: @app-background-color;
                    }
                }
            }
        }
    }
}
.app-column-link {
    color: @color-primary-base;
}
.column__content--normal {
    color: @color-primary-base;
}
// END --- 表格

// START --- 导航栏
.app-control-expbar {
    .control-header {
        border-bottom: 1px solid @app-divider-color;
    }
}
// END --- 导航栏

// START --- 看板
.app-control-kanban {
    .group__foldingbar__content {
        color: @item-text-color;
        border: 1px solid @item-border-color;
        background-color: @item-background-color--active;
        .foldingbar__content__icon {
            &:hover {
                color: @item-background-color--hover;
            }
        }
    }
    .group__foldingarea {
        border: 1px solid @item-border-color;
        .foldingarea__header__icon {
            &:hover {
                color: @item-background-color--hover;
            }
        }
        .foldingarea__content__item {
            border: 1px solid @item-border-color;
            &.is-active {
                color: @item-background-color--active;
                border-color: @item-border-color--active;
            }
        }
    }
    &.app-control-kanban__row {
        .app-control-kanban__content__group {
            .group__foldingbar__content {
                border-right: none;
            }
            .group__foldingarea {
                border-right: none;
                .group__foldingarea__header {
                    border-bottom: 1px solid @item-border-color;
                }
            }
            &:last-child {
                .group__foldingbar__content {
                    border: 1px solid @item-border-color;
                }
                .group__foldingarea {
                    border: 1px solid @item-border-color;
                }
            }
        }
    }

    &.app-control-kanban__column {
        .app-control-kanban__content__group {
            .group__foldingbar__content {
                border-bottom: none;
            }
            .group__foldingarea {
                border-bottom: none;
                .group__foldingarea__header {
                    border-right: 1px solid @item-border-color;
                }
            }
            &:last-child {
                .group__foldingbar__content {
                    border: 1px solid @item-border-color;
                }
                .group__foldingarea {
                    border: 1px solid @item-border-color;
                }
            }
        }
    }
}

// END --- 看板

// START --- 列表
.app-control-list {
    .app-control-list__content__item {
        border-bottom: 1px solid @item-border-color;
        &:hover {
            background: @item-background-color--hover;
            .app-control-panel {
                background: @item-background-color--hover;
            }
        }
        &.is-active {
            background: @item-background-color--active;
            .app-control-panel {
                background: @item-background-color--active;
            }
        }
    }
}

// END --- 列表

// START --- 多编辑视图面板
.app-control-multieditviewpanel {
    .app-control-multieditviewpanel__content__tab {
        .ivu-tabs-tab {
            &:hover {
                color: @item-text-color--hover;
            }

            &.ivu-tabs-tab-active.ivu-tabs-tab-focused {
                color: @item-text-color--active;
                border-color: @item-border-color--active;
            }
        }
    }
    .app-control-multieditviewpanel__content__item {
        .ivu-icon-md-close {
            &:hover {
                color: @item-text-color--hover;
            }
        }
    }
}
// END --- 多编辑视图面板

// START --- 树视图
.app-control-treeview {
    .app-element-tree-node {
        .el-tree-node__content {
            &:hover {
                color: @item-text-color--hover;
                background-color: @item-background-color--hover;
            }
        }
        &.is-current {
            >.el-tree-node__content {
                color: @item-text-color--active !important;
                background-color: @item-background-color--active !important;
            }
        }
    }
}
// END --- 树视图

// START --- 面板
.app-control-panel {
    .app-control-panel__container__header {
        border-bottom: 1px solid @app-background-color-step-150;
    }
}

// END --- 面板

// START --- 门户部件
.app-control-portlet {
    >.control-header {
        border-bottom: 1px solid @app-background-color-step-150;
    }
    .app-control-portlet__content>div {
        background-color: @app-background-color;
    }
    .header__action {
        a {
            color: @color-primary-base;
        }
    }
}

// END --- 门户部件

// START --- 搜索表单
.app-control-searchform__dropdown__icon {
    .app-button.ivu-btn-default.srfactionlevel250;
    border-left: 1px solid @app-background-color;

    &:hover {
        border-left: 1px solid @app-background-color;
    }
}

// END --- 搜索表单

// START --- 向导面板
.app-control-wizardpanel {
    background-color: @app-background-color !important;
    .app-control-wizardpanel__header {
        border-bottom: 1px solid @app-background-color-step-100;

        // 步骤条样式
        .el-step {
            .is-success {
                color: @color-primary-base;
                border-color: @color-primary-base;
            }
        }
    }
}

//style2视图工具栏--特殊样式调整
.app-view-toolbar--style2{
    .app-view-toolbar__item{
        .ivu-btn-ghost.ivu-btn-default{
            background-color: @button-background-color;
            color:@button-text-color;
            border:1px solid @button-border-color;
            &:hover{
                background-color: @button-background-color--hover;
                color:@button-text-color--hover;
                border:1px solid @button-border-color--hover;
            }
            &:focus {
                border:1px solid @button-border-color;
            }
        }
    }
}

// END --- 向导面板

//  ----------------------------------------组件----------------------------------------
.app-anchor {
    .app-anchor--active {
        color: @color-primary-base;

        .points__dot {
            background-color: @color-primary-base;
        }
    }
}

.app-autocomplete {
    .el-input__inner:hover {
        border-color: @color-primary-base;
    }
}

.app-autocomplete__popper {
    .el-autocomplete-suggestion__list li:hover {
        color: @color-primary-base;
    }
}

//  按钮（默认、行为级别 = 不常用 | 一般操作）
.app-button.ivu-btn-default,
.app-button.ivu-btn-default.srfactionlevel50,
.app-button.ivu-btn-default.srfactionlevel100 {
    background: @button-background-color;
    color: @button-text-color;
    border-color: @button-border-color;

    &:hover {
        background: @button-background-color--hover;
        color: @button-text-color--hover;
        border-color: @button-border-color--hover;
    }

    &:disabled,
    &:disabled:hover {
        background: @button-background-color--disabled;
        color: @button-text-color--disabled;
        border-color: @button-border-color--disabled;
    }
}

//  按钮（行为级别 = 常用操作）
.app-button.ivu-btn-default.srfactionlevel200 {
    background: @button-middle-background-color;
    color: @button-middle-text-color;
    border-color: @button-middle-border-color;

    &:hover {
        background: @button-middle-background-color--hover;
        color: @button-middle-text-color--hover;
        border-color: @button-middle-border-color--hover;
    }

    &:disabled,
    &:disabled:hover {
        background: @button-middle-background-color--disabled;
        color: @button-middle-text-color--disabled;
        border-color: @button-middle-border-color--disabled;
    }
}

//  按钮（行为级别 = 关键操作）
.app-button.ivu-btn-default.srfactionlevel250 {
    background: @button-high-background-color;
    color: @button-high-text-color;
    border-color: @button-high-border-color;

    &:hover {
        background: @button-high-background-color--hover;
        color: @button-high-text-color--hover;
        border-color: @button-high-border-color--hover;
    }

    &:disabled,
    &:disabled:hover {
        background: @button-high-background-color--disabled;
        color: @button-high-text-color--disabled;
        border-color: @button-high-border-color--disabled;
    }
}

.app-checkbox-list {
    .ivu-checkbox-checked .ivu-checkbox-inner {
        border-color: @color-primary-base;
        background-color: @color-primary-base;
    }
    .ivu-checkbox-checked:hover .ivu-checkbox-inner,
    .ivu-checkbox-checked .ivu-checkbox-inner{
        border-color: @color-primary-base;
        background-color: @color-primary-base;
    }
}

.app-checkbox {
    .ivu-checkbox:hover .ivu-checkbox-inner{
        border-color: @color-primary-base;
    }
    .ivu-checkbox-checked:hover .ivu-checkbox-inner,
    .ivu-checkbox-checked .ivu-checkbox-inner{
        border-color: @color-primary-base;
        background-color: @color-primary-base;
    }
}

.app-dashboard-design {
    border: 1px solid @color-primary-base;

    .app-dashboard-design__tree {
        .tree__content {

            .el-menu {

                .el-menu-item {

                    // TODO
                    // background-color: @color-light-base;

                    // &:hover {
                    //     border-color: @color-secondary-base;
                    // }

                    // &.is-disable {
                    //     background-color: @color-light-base;
                    //     color: @color-medium-base;
                    // }
                }

            }
        }
    }

    .app-dashboard-design__panel {
        .app-dashboard-design__mask {
            background: -webkit-linear-gradient(top, @color-primary-base 10px, transparent 10px), -webkit-linear-gradient(left, @color-primary-base 10px, transparent 10px);
        }
    }
}

.app-department-personnel {
    .ivu-select-selection {
        .ivu-icon.ivu-icon-ios-close:hover {
            color: @color-primary-base;
        }

        &:hover {
            border-color: @color-primary-base;
        }
    }

    .ivu-select-visible {
        .ivu-select-selection {
            .editor-border-active;
            &:hover,
            &.ivu-select-selection-focused{
                .editor-border-active;
            }
        }
    }
}

.app-department-select {
    .el-checkbox.is-checked .el-checkbox__inner {
        background-color: @color-primary-base;
        border-color: @color-primary-base;
    }

    .el-checkbox__inner:focus,
    .el-checkbox__inner:hover {
        border-color: @color-primary-base;
    }

    .el-checkbox__input.is-focus .el-checkbox__inner {
        border-color: @color-primary-base;
    }

    .el-tree-node__content:hover {
        color: @color-primary-base;
    }
    .el-input__inner {
        &:hover {
            border-color: @color-primary-base;
        }
    }
    .el-select .el-input.is-focus .el-input__inner {
        .editor-border-active
    }
    
}

.app-department-select:hover {
    .el-select .el-input__inner {
        border-color: @color-primary-base;
    }
}

.app-file-upload__preview {
    .el-button:focus,
    .el-button:hover {
        color: @color-primary-base;
        border-color: @color-primary-base;
    }

}
.app-file-upload__upload {
    .el-upload-list__item.is-success .el-upload-list__item-name:hover {
        color: @color-primary-base;
    }
    .el-button:focus,
    .el-button:hover {
        color: @color-primary-base;
        border-color: @color-primary-base;
    }
} 
.app-file-upload__modal__item {
    .item__action {
        color: @color-primary-contrast;
    } 
}

.app-form-group {
    .app-form-group__action__extract {
        color: @color-primary-base;
    }
}

.app-form-group__action__item {
    color: @color-primary-base;
    &.is-disable {
        color: @button-text-color--disabled;
    }
}

.app-form-group__action__showmore {
  color: @color-primary-base;
}

.app-group-select {
    .el-icon-circle-close {
        &:hover {
            color: @color-primary-base;
        }
    }
}

.app-color-picker{
    .el-color-picker__color{
        border: 0.5px solid @color-primary-base;
    }
}

.app-group-select:hover {
    border-color: @color-primary-base;
}

.app-image-select {
    .el-dialog {
        .el-upload--picture-card:hover,
        .el-upload:focus {
            border-color: @color-primary-base;
            color: @color-primary-base;
        }
    }
    .el-upload--picture-card:hover,
    .el-upload:focus {
        border-color: @color-primary-base;
        color: @color-primary-base;
    }
    .app-image-select__dialog-model{
        .el-dialog__headerbtn:hover .el-dialog__close{
            color: @color-primary-base;
        }
    }
}

.app-picture-upload {
    .el-upload--picture-card:hover,
    .el-upload:focus {
        border-color: @color-primary-base;
        color: @color-primary-base;
    }
}
.app-picture-upload.is-single {
    .el-upload-content__item__caption:hover {
        border-color: @color-primary-base;
        color: @color-primary-base;

        .el-icon-document {
            color: @color-primary-base;
        }
    }
    .el-upload--picture-card {
        &:hover {
            border-color: @color-primary-base;
            color: @color-primary-base;
        }
    }
}

.app-list-box {
    .ivu-checkbox-group {
        .ivu-checkbox-checked .ivu-checkbox-inner {
            border-color: @color-primary-base;
            background-color: @color-primary-base;
        }
    }
}

.app-list-box__radio {
    .el-radio__input.is-checked {
        .el-radio__inner {
            border-color: @color-primary-base;
            background-color: @color-primary-base;
        }

        .el-radio__inner::after {
            background-color: @color-primary-base;
        }
    }

    .el-radio.is-checked {
        .el-radio__label {
            color: @color-primary-base;
        }
    }
}

.app-mpicker-select-container {
    .el-select {
        .el-input__inner:hover {
            border-color: @color-primary-base;
        }

        &:hover .el-input__inner {
            border-color: @color-primary-base;
        }
        .el-input.is-focus .el-input__inner{
            .editor-border-active;
        }
    }
    &:hover {
        border-color: @color-primary-base;
    }
}

.app-nav-pos {
    background-color: @app-background-color-step-50;
}

.app-org-select {
    .el-select:hover .el-input__inner {
        border-color: @color-primary-base;
    }
    .el-select .el-input.is-focus .el-input__inner {
        .editor-border-active;
    }
    .el-checkbox.is-checked .el-checkbox__inner {
        background-color: @color-primary-base;
        border-color: @color-primary-base;
    }

    .el-checkbox__inner:hover {
        border-color: @color-primary-base;
    }

    .el-checkbox__input {
        &.is-focus .el-checkbox__inner {
            border-color: @color-primary-base;
        }

        &.is-checked .el-checkbox__inner {
            .editor-border-active;
            background-color: @color-primary-base;
        }
    }

    .el-checkbox__inner:focus {
        .editor-border-active;
        background-color: @color-primary-base;
    }

    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        .editor-border-active;
        background-color: @color-primary-base;
    }

    .el-tree-node__content:hover {
        color: @color-primary-base;
    }
}

.app-picker-select-view__input {
    .ivu-input:focus,
    .ivu-input:hover {
        border-color: @color-primary-base;
    }
}
        
.app-picker {
    >a {
        color: @color-primary-base;
        &:hover {
            color: @color-primary-base;
        }
    }
}
.app-picker__ac {
    .el-input__inner:hover {
        border-color: @color-primary-base;
    }
    .el-input__inner:focus{
        .editor-border-active;
    }
}
.app-picker__input {
    .el-input__inner:hover {
        border-color: @color-primary-base;
    }
}
.app-picker__select {
    .el-input__inner:hover {
        border-color: @color-primary-base;
    }
    .el-input.is-focus .el-input__inner:focus{
        .editor-border-active;
    }
    &.el-select:hover .el-input__inner{
        border-color: @color-primary-base;
    }
}

// 下拉列表的远程加载样式
.app-picker__select__popper {
    .el-select-dropdown__item.hover {
        color: @color-primary-base;
    }
}

.app-picker__ac__popper {
    .el-autocomplete-suggestion__list li:hover {
        color: @color-primary-base;
    }
}


.app-quick-group {
    background-color: @app-background-color;

    .app-quick-item {
        .app-quick-item-label:hover {
            color: @color-primary-base;
        }

        .app-seleted-item {
            color: @color-primary-base;

            &::after {
                background-color: @color-primary-base;
            }
        }
    }
}

.view-header__right__quicksearch {
    .ivu-btn {
        &:hover {
            background-color: @color-primary-tint;
            color: @app-text-color-step--950;
            border-color: @app-text-color-step--950;
        }

        &.is-expand {
            color: @color-primary-tint;
        }

    }
}

.app-radio-group {
    .ivu-radio-checked:hover .ivu-radio-inner,
    .ivu-radio-checked .ivu-radio-inner {
        border-color: @color-primary-base;
    }

    .ivu-radio-checked .ivu-radio-inner::after {
        background-color: @color-primary-base;
    }
}


.op-icon.dropdown-wrapper.dropdown .popup-dropdown {
    .dropdown-item:hover {
        color: @item-text-color--hover;
    }
}
    
.app-slider {
    .el-slider__runway {
        .el-slider__bar {
            background-color: @color-primary-base;
        }

        .el-slider__button-wrapper .el-slider__button {
            border-color: @color-primary-base;

        }
    }
}

.app-sort-bar {
    .sort__item {
        border: 1px solid @item-border-color;
        &:hover {
            color: @item-text-color--hover;
            border: 1px solid @item-border-color--hover;
        }
        &.is-active {
            border: 1px solid @item-border-color--active;
            .item__caption {
                color: @item-text-color--active;
            }
            &.sort__item--ascending {
                .item__icon {
                    .ivu-icon.ivu-icon-md-arrow-dropup {
                        color: @item-background-color--active;
                    }
                }
            }
            &.sort__item--descending {
                .ivu-icon.ivu-icon-md-arrow-dropdown {
                    color: @item-background-color--active;
                }
            }
        }
    }
}

.app-stepper {
    .el-input {
        input:focus {
            border-color: @color-primary-base;
        }
    }
}

.el-switch.is-checked .el-switch__input+.el-switch__core {
    border-color: @color-primary-base;
    background-color: @color-primary-base;
}

.ivu-date-picker {
    .ivu-input:hover {
        border-color: @color-primary-base;
    }
}

.ivu-time-picker-cells-ul{
    .ivu-time-picker-cells-cell.ivu-time-picker-cells-cell-selected:hover{
        color: @color-primary-base;
    }
    
}
.ivu-date-picker-cells{
    .ivu-date-picker-cells-cell:hover em{
        background-color:mix(#FFF,@color-primary-base,85%)
    }
    .ivu-date-picker-cells-cell-selected em{
        background-color: @color-primary-base;
        &:hover{
            background-color: @color-primary-base;
        }
    }
    
}

.ivu-picker-panel-body-wrapper {
    .ivu-time-picker-cells-cell-selected {
        color: @color-primary-base;
    }
}

.dropdown-list-mpicker {

    .dropdown-list-mpicker__select {
        .ivu-select-selection:hover {
            border-color: @color-primary-base;
        }

        &.ivu-select-visible .ivu-select-selection {
            border-color: @color-primary-base;
        }
        .ivu-select-selection-focused{
            .editor-border-active;
          }
    }

}

.dropdown-list-mpicker__transfer {
    .ivu-select-item:hover {
        color: @color-primary-base;
    }

    .ivu-checkbox-wrapper-checked {
        color: @color-primary-base;

        .ivu-checkbox-checked .ivu-checkbox-inner {
            border-color: @color-primary-base;
            background-color: @color-primary-base;
        }
    }
}

.dropdown-list {
    .dropdown-list__select {
        .ivu-select-selection:hover {
            border-color: @color-primary-base;
        }

        &.ivu-select-visible .ivu-select-selection {
            border-color: @color-primary-base;
        }
        .ivu-select-selection-focused{
            .editor-border-active;
        }
    }
}

.dropdown-list__transfer {

    .ivu-select-item-focus,
    .ivu-select-item:hover {
        color: @color-primary-base;
    }
}

.app-input-box {

    .ivu-input-number {
        &:hover {
            border-color: @color-primary-base;
        }
        &.ivu-input-number-focused{
            .editor-border-active;
          }
    }

    .is-disabled {
        textarea:disabled,
        textarea[disabled] {
            background-color: #f1f1f1;
            color: rgb(44, 44, 44);
            opacity: 0.7;
        }
    }
}

.app-page-tag {
    background-color: @app-background-color-step-50;
}
.app-page-tag__left {
    .el-tabs__item {
        border: 1px solid @app-background-color;
        color: @app-text-color;
        background-color: @app-background-color;
    }

    .el-tabs__item:hover,
    .el-tabs__item.is-active {
        color: @primary;
    }

    .is-active .ivu-tag-dot-inner {
        background-color: @primary;
    }
}

.app-page-tag__right {
    .el-dropdown {
        button {
            background: @button-high-background-color;
            color: @button-high-text-color;
            border-color: @button-high-border-color;

            &:hover {
                background: @button-high-background-color--hover;
                color: @button-high-text-color--hover;
                border-color: @button-high-border-color--hover;
            }
        }
    }
}

.app-custom-theme__buttons {
    .app-button.preview {
        .app-button.ivu-btn-default.srfactionlevel250;
    }
}

.app-debug-actions__show-buttons{
    border: @color-primary-contrast;
    color: @color-primary-contrast;
}
.app-debug-actions__actions{
    .action__button{
        color: @color-primary-contrast;
    }
    .ivu-btn-ghost.ivu-btn-info:hover{
        color: @color-primary-contrast;
    }
}

.app-upload-file-info__item:hover {
    color: @color-primary-base;
}

.date-picker-range {
    .el-range-input {
        border: 1px solid @color-primary-base;
    }
}

.app-calendar-time-line__header__left,
.app-calendar-time-line__header__right {

    button.ivu-btn,
    button.ivu-btn.ivu-btn-primary {
        background: @button-background-color;
        color: @button-text-color;
        border-color: @button-border-color;
        height: 28px;
        width: 62px;

        &:hover {
            background: @button-background-color--hover;
            color: @button-text-color--hover;
            border-color: @button-border-color--hover;
        }

        &:disabled,
        &:disabled:hover {
            background: @button-background-color--disabled;
            color: @button-text-color--disabled;
            border-color: @button-border-color--disabled;
        }

        line-height: 0;

        span {
            line-height: 0.7;
        }
    }

    button.ivu-btn.button-active-color {
        background: @button-background-color--hover;
        color: @button-text-color--hover;
        border-color: @button-border-color--hover;
    }
}

.app-form {
    >.ivu-row {
        >.el-tabs {
            .el-tabs__header {
                .el-tabs__nav-wrap::after {
                    background-color: @menu-background-color;
                }
            }
        }
    }
}

.app-header-menus {
    >.ivu-menu.ivu-menu-horizontal {
        color: @header-text-color;

        >.ivu-menu-item,
        >.ivu-menu-submenu {
            color: @header-text-color;
        }

        >.ivu-menu-item:hover,
        >.ivu-menu-submenu:hover {
            color: @header-text-color;
        }    
    }
    .ivu-select-dropdown {

        >.ivu-menu-drop-list {

            >.ivu-menu-item,
            >.ivu-menu-submenu {
                color: @header-text-color;
            }
        }
    }
}


.app-map-position {
    #map__result {
        .el-vue-search-box-container {
            border: 1px solid @color-primary-base;
        }
    }

    .amap-marker-content {
        .input-map__marker {
            -webkit-box-shadow: 1px 1px 1px mix(white, @color-primary-base, 85%);
            box-shadow: 1px 1px 1px mix(white, @color-primary-base, 85%);
            background-color: @primary;
        }
    }
}

.popover__show-more {
    color: @color-primary-base;
}
.popover__content {
    border-bottom: 1px solid @color-primary-base;

    .popover__content__avatar {
        border: 0px solid @color-primary-base;
        span{
            background-color: @color-primary-base!important;
            color: @color-primary-contrast!important;
        }
    }
    .popover__content__caption {
        .process-definition-name:hover {
            color: @color-primary-base;
        }
    }
}

.app-theme__popper {
    .app-theme-icon {
        color: @app-text-color;
    }

    .app-theme-color .active {
        border: 2px solid @color-primary-base;
    }

    .ivu-form-item {
        border-top: 1px solid @color-primary-base;
    }
}

.app-header-user {
    .app-header-user__caption {
        color: @header-text-color;

        &:hover {
            background-color: @header-background-color--hover;
        }
    }
}

.app-wf-approval{
    .app-wf-approval-header{
        border: 1px solid @color-primary-base;
    }
    .app-wf-approval-bottom{
        border-color: @color-primary-base;
    }
    .app-wf-approval-content{
        border-left: 1px solid @color-primary-base;
        border-right: 1px solid @color-primary-base;
        .approval-content-item{
            border-bottom: 1px solid @color-primary-base;
        }
    }
    .approval-content-item-right{
        border-left:1px solid @color-primary-base;
    }
    .approval-content-item-wait{
        border-bottom:1px solid @color-primary-base;
    }
    .approval-content-item-info-item{
        border-bottom:1px solid @color-primary-base;
    }
}

.app-content-right{
    .app-content-bottom{
        > .app-content-bottom-close{
            color: @color-primary-base;
        }
    }  
}

.app-content-bottom-exp{
    .ivu-tabs-tab.ivu-tabs-tab-active {
        .tab-exp-title {
            border-bottom: 1px solid @app-divider-color;
        }
    }
}

.app-style2-menus.el-menu {
    background-color: @menu-background-color;
    color: @menu-text-color;
    .app-style2-menus__item {
        color: @menu-text-color;
        i {
            color: @menu-text-color;
        }
        &:hover,&.is-active {
            color: @menu-item-text-color--hover;
            i {
                color: @menu-item-text-color--hover;
            }
        }
    }
    .el-menu-item,
    .el-submenu__title {
        background-color: @menu-item-background-color;
        color: @menu-item-text-color;

        .ivu-badge-count {
            box-shadow: 0 0 0 0px @color-primary-base;
        }

        &:hover {
            background-color: @menu-item-background-color--hover;
            color: @menu-item-text-color--hover;
        }

        &.is-active {
            color: @menu-item-text-color--active;
            background-color: @menu-item-background-color--active;
        }
    }
}


.left-and-right{
    > div:nth-child(1) {
        border-right: 1px solid @app-divider-color;
    }
}

.ibiz-page-tag__body__tags{
    .ivu-tag {
        border-right: 1px solid @app-divider-color;
    }
    .ivu-tag.tag-is-active {
          background: @app-background-color;
          .ivu-tag-text {
              color: @app-text-color;
          }
          .ivu-icon {
              color: @app-text-color;
          }
      }
}

.ibiz-page-tag{
    .move-btn{
        border-left: 1px solid  @app-divider-color;
        border-right: 1px solid  @app-divider-color;
    }
}

.app-page-more{
    .ivu-dropdown-item:hover{
        color: @color-primary-base;
    }
}

.upload-file{
    .ivu-upload{
        .ivu-upload-drag{
            border:1px dashed @color-primary-base!important;
        }
    }
    .upload-file__text{
        border:1px dashed @color-primary-base;
    }
    .upload-file__text-style{
        cursor: pointer;
        color: @color-primary-base;
    }
}

.context-menus-item:hover {
    background-color: @menu-item-background-color--hover;
    color: @menu-item-text-color--hover;
}

.sider-drawer {
    .ivu-drawer {
      background-color: @color-primary-base!important;
    }
}
.context-menu-drag{
    .context-menu__list {  
        .context-menu__list__header {
            border-bottom: 1px solid @app-divider-color;
        }
    }    
}

.tab-exp-item-content {
    .toolbar-container {
        >.ivu-btn.ivu-btn-default:disabled {
            color: @button-text-color--disabled;
        }
    }
}

.lock-scren-footer-btn.el-button--primary{
    background-color: @button-high-background-color;
    color: @button-high-text-color;
    border: @button-high-border-color;
    &:hover{
        background-color: @button-high-background-color--hover;
        color: @button-high-text-color--hover;
        border: @button-high-border-color--hover;
    }
}
.lockscren-body .el-dialog__headerbtn:hover i{
    color: @color-primary-base;
    >i:hover{
        color: @color-primary-base;
    }
}

.view-style2{
    .app-style2-footer{
        background-color: @color-primary-base;
    }
}
// style2顶部菜单
.app-style2-header-menus {
    background-color: @menu-item-background-color--active;

    .el-menu--horizontal {
        background-color: @menu-item-background-color--active;

        .el-menu-item,
        .el-submenu__title {
            color: @menu-item-text-color--active;

            .el-icon-arrow-down {
                color: @menu-item-text-color--active;
            }

            &:not(.is-disabled):hover,
            &:not(.is-disabled):focus,
            &.is-active {
                color: @menu-item-text-color--active;
                background-color: @menu-item-background-color--active;
            }
        }

        .el-submenu {
            &.is-active .el-submenu__title {
                color:  @menu-item-text-color--active;
                border-bottom: 2px solid @menu-background-color;
            }
        }
    }
}
//style2导航条
.app-page-tag-style2__left__icon,.app-page-tag-style2__right__icon{
    &:hover{
        background: #efefef;
    }
}
.app-page-tag-style2__right{
    .ivu-dropdown-rel {
        >.ivu-icon:hover {
            background: #efefef;
        }
    }
}
.app-page-tag-style2__tag{
    .ivu-tag.is-active:before{
        background-color: @color-primary-base;
    }
}