}


._VTOSet_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
}

._VTS_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .LabelIP-container {
        margin: 0;
    }
    .LabelIP-ip-input {
        line-height: 0;
    }
    .has-error .ant-form-explain, .ant-form-explain {
        margin-left: 10px;
    }
    .ant-form-item-label{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

._SystemLog_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    &header {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;

        &-label {
            display: inline-block;
            width: 120px;
            text-align: right;
            margin-right: 10px;
        }
        &-select {
            display: inline-block;
            width: 220px;
            margin-right: 10px;
        }

        &-btn {
            margin-left: 10px;
        }

    }
    &logTotal {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
    }

    &container {
        margin-top: 10px;

        &-pagination {
            margin-top: 10px;
            text-align: right;
        }
    }

    .m-content {
        height: calc(100% - 53px);
        border-top: 1px solid #e8e8ee;
        border-right: 1px solid #e8e8ee;
        border-left: 1px solid #e8e8ee;
    }
    min-width: 1090px;
    .ant-drawer-header {
        padding: 20px 24px;
    }
    .ant-drawer-close {
        width: 62px;
        height: 62px;
    }
    ._SystemLog_header {
        .LabelInput-label-dark {
            margin-bottom: 0px;
            top: 4px;
            line-height: 0px;
        }
    }
    .encryptcol .LabelInput-label-dark {
        top: 5px;
    }
}
.WeekPlan-Modal {
    .ant-form-item {
        margin-bottom: 16px !important;
    }
    ._ScheduleComponent_ {
        padding: 0;
    }
    ._NewScheduleComponent_ {
        padding: 0;
    }
    ._NewScheduleComponent_ .main-container .label {
        padding-left: 7px;
        padding-right: 7px;
    }
    ._new_schedule_public_component_ {
        padding: 0;
    }
}
._WiegandMobile_{
    .adm-form-item-child-inner {
        text-align: right ;
    }
    .adm-list-item-content-extra{
        width: 140px;
    }
    .adm-list-item-content-prefix {
        flex: 1 1 auto;
        white-space: nowrap;
    }
}

._WiegandSet_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    
}

._Wifi_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .icon {
        font-size: 20px;
        vertical-align: middle;
        &:hover {
            cursor: pointer;
            color: @btnNormalColorNo1;
        }
    }
}

._WifiNext_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .icon {
        font-size: 20px;
        vertical-align: middle;
        &:hover {
            cursor: pointer;
            color: @btnNormalColorNo1;
        }
    }
    .fn-relative {
        position: relative;
    }
    .refresh-btn {
        position: absolute;
        right: 0;
        top: -40px;
    }
}
.password-inputwitheye-wrap {
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    
}
._WIFINEXT_ {
    padding-bottom: 80px;
    .wifi-list .list-title {
        padding: 10px 15px;
        display: flex;
        justify-content: space-between;
    }
    .adm-list-body {
        border-bottom: none;
    }
}

._Wizard_ {
    height: calc(100vh - 64px);
    .wizard-header {
        height: 64px;
    }
    .wizard-wrap {
        min-width: 1280px;
        height: 100%;
        padding: 16px;
    }
    .wizard-content {
        height: 100%;
        background-color: #ffffff;
    }
    .wizard-header-wrap {
        height: 64px;
        min-Width: 1280px;
        line-height: 64px;
        color: @listBorderColorNo8;
        background-color: @titleColorNo4;
        position: fixed;
        width: 100%;
        z-index: 100;
    }
    .header-logo {
        margin-left: 20px;
        cursor: pointer;
    }
    .header-logo-icon {
        margin-right: 10px;
        display: inline-block;
        vertical-align: -5px;
        width: 28px;
        height: 25px;
        background-image: url('/static/media/logo.c88c93b5.png');
    }
    .header-divider{
        height: 1.2rem;
        margin-left: 10px;
        background: rgba(255, 255, 255, 0.2);
    }
    .wizard-step-wrap {
        padding: 50px 20%;
    }
    .wizard-step-content {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        .vtoset-wrap, .sip-wrap {
            padding: 20px 30px;
        }
        ._DevManager_ {
            width: 100%;
            min-height: auto;
            padding: 16px;
            margin: 0;
        }
    }
    .ant-carousel .slick-slider {
        margin-top: 0;
    }
    .wizard-step-footer {
        justify-content: center;
        // padding-bottom: 30px;
        // margin-top: 16px;
    }
    .devicetype-wrap {
        width: 600px;
        border: @border-normal;
        align-items: center;
        cursor: pointer;
    }
    .devicetype-wrap-focus {
        width: 600px;
        border: 1px solid #1e93fe;
        background-color: #e6f7ff;
        align-items: center;
        cursor: pointer;
    }
    .devicetype-img {
        padding: 40px 0;
    }
    .devicetype-text {
        font-size: 21px;
    }
    .icon {
        font-size: 60px;
    }
    .ant-table-filter-trigger{
        margin: 0px 0px -5px 0px !important;
    }
    .tip-alert {
        margin-bottom:30px;
        display: flex !important;
        flex-direction: column;
        align-items: center;
    }
}
.DevManager_modal_content {
    .ant-form-item,
    .form-extra {
        margin-bottom: 16px !important;
    }
    .type-select {
        padding-bottom: 30px;
        margin-bottom: 28px;
        border-bottom: 1px solid #e9ebee;
    }
    .label-normal-container {
        padding: 0 !important;

        .label-normal-wrapper {
            width: unset !important;
        }
    }
    .ant-form {
        .ant-form-item:last-child {
            margin-bottom: 0 !important;
        }
    }
    .ant-form-item-label {
        text-overflow: ellipsis;
        padding-top: 5px;
    
        & > label {
            display: inline;
        }
    }
    .label-password-container {
        .ant-form-item-has-error .ant-form-item-explain,
        .ant-form-item-explain {
            margin-left: 196px;
        }
        .ant-input-affix-wrapper {
            width: 236px;
        }
    }
}


._DevManager_ {
    min-height: calc(100vh - 96px);
    height: auto;
    // padding: 16px;
    padding: 24px 32px;
    margin: 16px;
    background: @contentBgColorNo15;
    overflow: hidden;

    .ant-btn-link {
        padding: 0;
    }

    .round {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 5px;

        &.online {
            background-color: @successColorNo19;
        }
        &.offline {
            background-color: @errorColorNo17;
        }
    }
}

.filter-dropdown-radio {
    width: 140px;
    display: flex;
    flex-direction: column;
    padding: 8px;

    .ant-radio-wrapper {
        width: 100%;
        line-height: 32px;

        &.selected {
            background-color: @secondNavHoverColorNo14;
            color: @btnHoverColorNo2;
        }
        .ant-radio {
            display: none;
        }
    } 
}
.DiskFullWarning {
    .ant-modal-confirm-title {
        display: inline;
        padding-left: 10px;
    }
    .ant-modal-confirm-content {
        word-wrap: break-word;
        word-break: break-all;
    }
}

.h5Bar {
    position: absolute;
    right: 0px;
    top: 0px;
    .active{
        color: @export-color;
    }
    i {
        margin-right: 10px;
        &:hover, &.active{
            color: @export-color;
        }
    }

}
/* border css */
.m-b-none {
    border: none !important;
}

.m-bb-0 {
    border-bottom: 0 !important;
}
/*
* 使用函数生成margin、padding等的类名的方式
*/


/* margin
* 类明分别为 fn-mar、fn-marl10、fn-mart10、fn-marb10、fn-marr10....
*/
@margin: 0, 10, 16, 20, 30;
@marginLeft: 0, 5, 10, 15, 16, 20, 30, 40, 60, 90;
@marginRight: 0, 5, 10, 15, 20, 50;
@marginTop: 0, 5, 6, 10, 15, 16, 20, 22, 30, 40, 50;
@marginBottom:  0, 5, 10, 12, 14, 15, 16, 18, 20, 30, 40, 50, 80;


/* padding
* 类明分别为 fn-pad、fn-padl10、fn-padt10、fn-padb10、fn-padr10....
*/
@padding: 0, 10, 16, 20, 30;
@paddingLeft: 5, 10, 15, 16, 20;
@paddingTop:  5, 10, 15, 20;
@paddingRight: 5, 10, 15, 16, 20;
@paddingBottom: 0, 5, 10, 15, 16, 20, 40, 50, 80;


.fn-mar(@name, @value) when(@name = margin){
    .fn-mar@{value}{
        @{name}: @value + 0px;
    }
}
.fn-mar(@name, @value) when(@name = margin-left){
    .fn-marl@{value}{
        @{name}: @value + 0px;
    }
}
.fn-mar(@name, @value) when(@name = margin-right){
    .fn-marr@{value}{
        @{name}: @value + 0px;
    }
}
.fn-mar(@name, @value) when(@name = margin-top){
    .fn-mart@{value}{
        @{name}: @value + 0px;
    }
}
.fn-mar(@name, @value) when(@name = margin-bottom){
    .fn-marb@{value}{
        @{name}: @value + 0px;
    }
}


.loopEdge(@list, @name, @i:1) when (@i <= length(@list)) {
    .fn-mar(@name, extract(@list, @i));
    .loopEdge(@list, @name, @i+1);
}



.loopEdge(@margin, margin);
.loopEdge(@marginLeft, margin-left);
.loopEdge(@marginTop, margin-top);
.loopEdge(@marginRight, margin-right);
.loopEdge(@marginBottom, margin-bottom);



.fn-mar(@name, @value) when(@name = padding){
    .fn-pad@{value}{
        @{name}: @value + 0px;
    }
}
.fn-mar(@name, @value) when(@name = padding-left){
    .fn-padl@{value}{
        @{name}: @value + 0px;
    }
}
.fn-mar(@name, @value) when(@name = padding-right){
    .fn-padr@{value}{
        @{name}: @value + 0px;
    }
}
.fn-mar(@name, @value) when(@name = padding-top){
    .fn-padt@{value}{
        @{name}: @value + 0px;
    }
}
.fn-mar(@name, @value) when(@name = padding-bottom){
    .fn-padb@{value}{
        @{name}: @value + 0px;
    }
}

.loopEdge(@padding, padding);
.loopEdge(@paddingLeft, padding-left);
.loopEdge(@paddingTop, padding-top);
.loopEdge(@paddingRight, padding-right);
.loopEdge(@paddingBottom, padding-bottom);


.fn-flex {
    display: flex;
}
.fn-flexcenter {
    align-items: center;
    justify-content: center;
}
.fn-flexbetween {
    align-items: center;
    justify-content: space-between;
}

.fn-flexauto {
    flex: 0 1 auto;
}
/* length
* @width 类明分别为 fn-wid10、fn-wid20、fn-wid30、fn-wid40....
* @widthp 生成百分比宽度 fn-widp10、fn-widp20、fn-widp30、fn-widp40
* @height 类明分别为 fn-hei10、fn-hei20、fn-hei30、fn-hei40....
* @heightp 生成百分比宽度 fn-heip10、fn-heip20、fn-heip30、fn-heip40
* @minWidth 生成最小宽度 fn-minwid10、fn-minwid20、fn-minwid30、fn-minwid40
* @maxWidth 生成最大宽度 fn-maxwid10、fn-maxwid20、fn-maxwid30、fn-maxwid40
* @minHeight 生成最小宽度 fn-minhei10、fn-minhei20、fn-minhei30、fn-minhei40
*/
@width: 0, 10, 16, 20, 30, 50, 80, 100, 120, 160, 200, 220, 250, 280, 300, 320;
@widthP: 0, 10, 16, 20, 30, 100;
@height: 0, 10, 16, 20, 30, 40;
@heightP: 0, 10, 16, 20, 30, 100;
@minWidth: 0, 10, 16, 20, 30, 100, 120, 140, 200, 250;
@maxWidth: 0, 10, 16, 20, 30, 100, 120, 140, 200, 250;
@minHeight: 0, 10, 16, 20, 30, 100;

.fn-wid(@name, @value) when(@name = width){
    .fn-wid@{value}{
        width: @value + 0px;
    }
}

.fn-wid(@name, @value) when(@name = widthp){
    .fn-widp@{value}{
        width: @value + 0%;
    }
}

.fn-wid(@name, @value) when(@name = height){
    .fn-hei@{value}{
        height: @value + 0px;
    }
}

.fn-wid(@name, @value) when(@name = heightp){
    .fn-heip@{value}{
        height: @value + 0%;
    }
}

.fn-wid(@name, @value) when(@name = minWidth){
    .fn-minwid@{value}{
        min-width: @value + 0px;
    }
}
.fn-wid(@name, @value) when(@name = maxWidth){
    .fn-maxwid@{value}{
        max-width: @value + 0px;
    }
}
.fn-wid(@name, @value) when(@name = minHeight){
    .fn-minhei@{value}{
        min-height: @value + 0px;
    }
}

.loopLen(@list, @name, @i:1) when (@i <= length(@list)) {
    .fn-wid(@name, extract(@list, @i));
    .loopLen(@list, @name, @i+1);
}



.loopLen(@width, width);
.loopLen(@widthP, widthp);
.loopLen(@height, height);
.loopLen(@heightP, heightp);
.loopLen(@minWidth, minWidth);
.loopLen(@maxWidth, maxWidth);
.loopLen(@minHeight, minHeight);

.rtl {
    .ant-form-item-explain {
        text-align: left;
        direction: rtl;
    }
    .label-normal-container .label-normal {
        text-align: left;
        direction: rtl;
    }
    .sideView-menu .ant-menu-item a{
        text-align: left;
        direction: rtl;
    }
    .z-sections .z-sections-title .title-left {
        text-align: left;
        direction: rtl;
    }
    ._SystemUpgrade_ .find-version, ._SystemUpgrade_ .wrap-title {
        text-align: left;
        direction: rtl;
    }
    
    .ant-alert {
        // text-align: left;
        direction: rtl;
        .ant-alert-message {
            margin-right: 10px;
        }
    }
    .ant-form-item-label {
        text-align: left;
        direction: rtl;
    }
    .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
        text-align: left;
        direction: rtl;
    }
    ._SAFESecurityStatus_titleTip, .icon-desc-popover div:not(.icon-desc-title), .icon-desc-popover .ant-col {
        text-align: left;
        direction: rtl;
    }
    ._SAFESecurityStatus_ ._SAFESecurityStatus_listTitle {
        direction: rtl;
        .anticon {
            margin-left: 5px;
        }
    }
    .selectGetCert-radio-group .info {
        text-align: left;
        direction: rtl;
    }
   
}
/**字体相关*/
.m-fw-normal {
    font-weight: normal !important;
}

.m-fw-bold {
    font-weight: bold !important;
}

.m-fs-small {
    font-size: small;
}

.m-fs-15 {
    font-size: 1.25rem;
}

.m-fs-18 {
    font-size: 1.5rem;
}

.m-fs-43 {
    font-size: 43/12rem;
}

/* line-height */
.m-lh-24 {
    line-height: 2rem;
}

.m-lh-28 {
    line-height: 2.3333333333333335rem;
}

.m-lh-30 {
    line-height: 2.5rem;
}

.m-lh-32 {
    line-height: 32/12rem;
}

.m-lh-32-4 {
    line-height: 2.7rem;
}

.m-lh-35 {
    line-height: 35/12rem;
}

.m-lh-40 {
    line-height: 40/12rem !important;
}

/* 鼠标的css */
/* 默认 箭头 */
.m-cursor-default {
    cursor: default !important;
}

/* 手形 */
.m-cursor-pointer {
    cursor: pointer !important;
}

/* 十字 */
.m-cursor-crosshair {
    cursor: crosshair !important;
}

/* 移动 */
.m-cursor-move {
    cursor: move !important;
}

/* 文本 */
.m-cursor-text {
    cursor: text !important;
}

/* 等待 沙漏 */
.m-cursor-wait {
    cursor: wait !important;
}

/* 帮助 一个问号或者气球 */
.m-cursor-help {
    cursor: help !important;
}

/* 禁用 */
.m-cursor-notAllowed {
    cursor: not-allowed !important;
}

.m-vertical-top {
    vertical-align: top !important;
}

.m-vertical-middle {
    vertical-align: middle !important;
}

.m-vertical-bottom {
    vertical-align: bottom !important;
}

.m-vertical-text-bottom {
    vertical-align: text-bottom !important;
}

.m-text-center {
    text-align: center;
}

.m-text-left {
    text-align: left;
}

.m-text-right {
    text-align: right;
}

.m-inline-block {
    display: inline-block;
}

.m-visibility-hidden {
    visibility: hidden !important;
}

.m-overflow-hidden {
    overflow: hidden !important;
}

.m-overflow-initial {
    overflow: initial !important;
}

.m-opacity-0 {
    opacity: 0;
}

.m-ws-nowrap {
    white-space: nowrap;
}

.m-text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}







/*各组件less引入主题然后赋值给自己的实际变量值*/
@btnNormalColorNo1: #1890ff; // primary 按钮正常状态颜色、图标/文字 Hover状态颜色
@btnHoverColorNo2: #40a9ff; // primary 按钮 hover颜色
@btnPressedColorNo3: #096dd9; //  primary 按钮 鼠标按下颜色
@titleColorNo4: #272727; // 二级导航文字颜色、表单/正文标题颜色、图标颜色
@textColorNo5: #272727; // 正文文字颜色
@formContentColorNo6: #565656; // 表单内容颜色（比如input输入内容的颜色）
@disableColorNo7: #8f8f8f; // 次要文字/提示性文字颜色、disabled的文字/图标颜色
@listBorderColorNo8: #e8e8e8; // 列表/表格 边框颜色、滑块等控件底色
@dividerColorNo9: #e8e8e8; // 分割线颜色
@inputBorderColorNo10: #d9d9d9; // 次按钮边框、输入框边框
@disableInputBgColorNo11:#f5f5f5; // 次按钮 disabled、input 的disabled 的背景色
@firstNavBgColorNo12: #001529; // 一级导航背景色
@secondNavBgColorNo13: #ffffff; // 二级导航背景色
@secondNavHoverColorNo14: #e6f7ff; // 表格的td的Hover、二级导航的hover
@contentBgColorNo15: #ffffff; // 内容背景色
@bodyBgColorNo16: #f0f2f5; // 最底层背景色
@homePageNo1:#ffffff;// 首页卡片颜色
@homePageNo2:#f0f2f5;// 首页背景颜色
@errorColorNo17: #f5222d; // 失败色
@warnColorNo18: #fcac15; // 警告色
@successColorNo19: #52c41a; // 成功色
@linkColorNo20: #1890ff; // 链接、其他提示颜色

/*该颜色和之后的项目一致，采用20基础色*/
@font-size-improtant: 14px; //重要标准字大小，用于标题、重要提示
@font-size-normal: 12px; //常规标准字大小，用于大多数常规文字，如正文等
@color-border: @listBorderColorNo8; //用于普通的边框颜色，灰
@border-color: @listBorderColorNo8; //用于普通的边框颜色，灰
@border-normal: 1px solid @color-border; //常规边框, 灰色
@sideMenuBackColor:#ebecf0;
@sideSubMenuTitleColor:linear-gradient(#f7f7f7,#dadde1);

/**三方库的变量需要如下用标签包裹起来**/
/**antd**/
@text-color:@textColorNo5;
@primary-color:@btnNormalColorNo1;
/**antd**/


/*TabMenu一级导航*/
@topMenuTabActiveColor:#ffffff; //头部导航栏激活颜色
@topMenuTabColor:@disableColorNo7; // 头部导航栏未激活颜色
@tabArrowColor:@textColorNo5; //头部箭头导航图标颜色
@tabArrowHoverColor:@btnNormalColorNo1;//头部箭头导航图标hover颜色
@tabCloseColor:@textColorNo5;//头部导航关闭按钮颜色
@tabBackGroundColor:@firstNavBgColorNo12;//头部导航背景色
@tabMenuTabHoverColor:#ffffff;//头部导航栏hover颜色
@tabDividerColor: rgba(255, 255, 255, 0.2);//头部竖直分割线颜色

/*MenuView主页菜单*/
@MenuViewPageSwitch:#AFC6E1;//主页菜单下的分页圆圈背景色
@MenuViewActivePageSwitch:@linkColorNo20;//主页菜单下的分页圆圈激活色
@MenuViewItemLineColor:#81B6FC;//主页菜单选项下划线颜色
@MenuViewBackGroundColor:@homePageNo1;//主页菜单背景色
@MenuViewItemMessageColor:rgba(255, 255, 255, 0.8);//主页菜单描述文字颜色
@MenuViewItemHoverColor:#ECF4FF;//主页菜单hover背景色
@MenuViewCarouselColor:#7DB1EC;//主页菜单左右箭头背景色

/*sideMenu二级导航*/
@sideMenuBackGroundColor:@secondNavBgColorNo13; // 二级导航背景色
@sideMenuSelectedColor:#171B13; //二级导航选中色

/*login 登录*/
@loginForgetPasswordHoverColor:#ffffff; // 登录忘记密码按钮hover色
@loginIconColor:@btnHoverColorNo2; // 登录图标颜色

/*页面相关*/
@font-size-normal: 12rem; //字体大小（px）+单位,用于后面计算rem
/*换肤相关颜色*/
@skin-black: #001529;
@skin-blue: #1890ff;

@export-color:#1890ff;

/*一键诊断颜色*/
@body-background: #F0F2F5;
@indexBgColor:#fff;
@normalColor:#52c41a;   // 辅助色  成功、密码强度强
@warnColor:#fcac15;   // 辅助色  警告、密码强度中
@errorColor:#f5222d;  // 辅助色  错误、密码强度低

/*流量4g*/
@font-color:#272727;
@white: #fff;
@baseColor:#ebecf0;
@success-color:#52c41a;
@error-color:#f5222d;
@label-light-Color:#ffffff;
@label-dark-Color:#666666;
@tab-active-color:#e6f7ff;


// AntD基础色
@deviceOffline: #8f8f8f;
@px-unit: 14rem; 

// IB换肤自定义颜色
@textColor: #FFF;
@textColorSecondary: fade(@textColor, 45%);//#8B8D89
@textColorDisabled: #444849;
@borderColor: #484C55;
@activeColor:#00a335;
.ant-drawer-header {
    position: relative;
    .ant-drawer-close {
        position: absolute;
        right: 0;
        // margin-right: 0;
    }
}

.label-div-Container {
    .ant-input-suffix {
        color: #808e9d;
    }
}
._PasswordCheck_ {
    // UI组件特有的CSS，
    
}



._SysSet_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    
}



.icon_inputfg {
    background: url('/static/media/icon.829d6739.png');
    background-position: 0px 0px;
}

.icon_outputCfg {
    background: url('/static/media/icon.829d6739.png');
    background-position: 0px -97px;
}

.icon_networkCfg {
    background: url('/static/media/NetworkSetting.595ad26f.png');
}

.icon_alarmManage {
    background: url('/static/media/icon.829d6739.png');
    background-position: -122px 0px;
}

.icon_deviceInfo {
    background: url('/static/media/icon.829d6739.png');
    background-position: -244px 0px;
}

.icon_systemMangage {
    background: url('/static/media/System.483fc2ec.png');
    width: 54px;
    height: 54px;
}

.icon_log{
    background: url('/static/media/icon.829d6739.png');
    background-position: -122px -194px;
}

.icon_safety{
    background: url('/static/media/Security.9f45c4b4.png');
    width: 54px;
    height: 54px;
}


.icon_videoAudio {
    background: url('/static/media/VideoAudio.20c548bb.png');
}

.icon_talking {
    background: url('/static/media/Intercom.462f623b.png');
}

.icon_access {
    background: url('/static/media/AccessControl.c447a54a.png');
}

.icon_advertisement {
    background: url('/static/media/Personalization.4767b650.png');
}

.icon_faceDetection {
    background: url('/static/media/FaceDetection.fb0b5292.png');
}

.icon_personManagement {
    background: url('/static/media/PersonManagement.5604f595.png');
}
.icon_maintenance_center {
    background: url('/static/media/info.05fea31f.png');
    width: 54px;
    height: 54px;
}
.icon_logs {
    background: url('/static/media/logs.97eb2ddd.png');
    width: 54px;
    height: 54px;
}

.icon_attendanceSet {
    background: url('/static/media/AttendanceSet.961cd74b.png');
}


/**三方库的变量需要如下用标签包裹起来**/
/**antd**/

/**antd**/

/*TabMenu一级导航*/
@tabBackGroundColor:@firstNavBgColorNo12;//头部导航背景色


html, body {
    height: 100%;
    display: block!important;
}
body {
    background-color: @bodyBgColorNo16;
}
.ant-table-cell {
    .myicon {
        font-size: 20px;
    }
}
.label-explain {
    font-size: 12px;
}
.ant-table-pagination.ant-pagination {
    margin: 16px 0 0;
}
.m-h-100-p{
    height: 100%;
    background-color: @bodyBgColorNo16;
}
  
.clearfix {
    &::after {
        content: ".";            
        display: block;        
        height: 0;
        visibility: hidden;  
        clear: both;   
    }
}
.fn-left {
    float: left;
}
.fn-right {
    float: right;
}
._SideView_::after {
    display: none;
}
ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.has-error .ant-form-explain {
    margin-left: 21%;
}
.LabelInput-label-Col {
    text-align: left;
}
.myicon[disabled] {
    color: @disableColorNo7;
    cursor: default;
}
#main {
    min-width: 1100px;
}
// 重写antd样式文件
.ant-table-thead > tr > th, .ant-table-tbody > tr > td {
    padding: 9px 11px;
}
.ant-table-thead > tr {
    background: transparent;
}
.ant-table-tbody > tr > td .myicon-edit {
    margin-right: 10px;
}
.ant-table-thead .ant-table-header-column .ant-table-column-title {
    font-weight: bold;
}
.ant-form-item-label > label::after {
    content: '';
}
.ant-popover {
    min-width: 150px;
}

// .ant-table-thead > tr > th {
//     background: #ffffff
// }

.ant-pagination .ant-pagination-total-text {
    position: absolute;
    left: 0;
}

.ant-modal-confirm-btns .ant-btn:first-child{
    float: right;
    margin-left: 10px;
}

.ant-table {
    // border: 1px solid #e8e8ee;
    margin-top: 16px;
    .ant-table-tbody > tr:last-child > td {
        border: none;
    }
}
.reverse-btn{
    .ant-modal-footer{
        overflow: hidden;
        .ant-btn{
            float: right;
            margin-left: 8px;
        }
        
    }
}

._DevManager_ {
    padding: 0;
    margin: 0;
}
.ant-alert-content {
    flex: 1 1 auto;
}

// antd form超长显示省略号
// .ant-form-item-label > label {
//     display: block;
//     float: left;
//     white-space: nowrap;
//     text-overflow: ellipsis;
//     overflow: hidden;
//     line-height: 32px;
// }
.ant-form-item-label {
    text-overflow: ellipsis;
    padding-top: 5px;

    & > label {
        display: inline;
    }
}
.ant-popover {
    .ant-popover-inner-content{
        overflow: hidden;
        .ant-popover-buttons{
            .ant-btn{
                float: right;
                margin-left: 8px;
            }    
        }
    }
}

// IB换肤
.myicon:hover{
    color: #7cc478;
}
.label-append-rng{
    color:rgba(255, 255, 255, 0.85);
}
.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled){
    background-color: @activeColor;
}
.ant-select-item-option-active:not(.ant-select-item-option-disabled){
    border:1px solid @activeColor;
    background-color: transparent;
}

/*datepicker*/
.ant-picker-cell-inner:hover{
    background-color: @activeColor;
}

.ant-picker-cell-in-view.ant-picker-cell-in-range::before,
.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before {
    background-color: rgba(0, 163, 55, 0.4);
}

.ant-picker-cell-range-hover,
.ant-picker-cell-range-hover-start {
    color: @text-color;
    background-color: @activeColor;
}
.ant-picker-cell-in-range.ant-picker-cell-range-hover {
    background-color: transparent;
}

/* 数字背景颜色  .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover > .ant-picker-cell-inner */

/* hover选中区间背景.ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before */
.ant-picker-cell-in-range:hover,
.ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before,
.ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start
    .ant-picker-cell-inner::after,
.ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before,
.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single).ant-picker-cell-range-hover-start::before,
.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single).ant-picker-cell-range-hover-end::before {
    background-color: rgba(0, 163, 55, 0.7) !important;
}

/* 结束日期样式*/
.ant-picker-date-panel
    .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end
    .ant-picker-cell-inner::after,
.ant-picker-panel
    > :not(.ant-picker-date-panel)
    .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before {
    background-color: rgba(0, 163, 55, 0.7) !important;
}

/* 下个月hover背景和字体 */
.ant-picker-cell:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner {
    background-color: @activeColor !important;
}
.ant-picker-cell:not(.ant-picker-cell-in-view) .ant-picker-cell-inner {
    color: rgba(255, 255, 255, 0.6);
}
/* 不可选日期样式 */
.ant-picker-cell.ant-picker-cell-disabled .ant-picker-cell-inner {
    color: #666666;
}
/* 区间外选取样式 */
.ant-picker-cell.ant-picker-cell-in-view.ant-picker-cell-range-hover {
    background-color: transparent;
}
.ant-picker-cell-range-hover.ant-picker-cell-range-hover-edge-end {
    background-color: transparent;
}
/* 起始样式 */
.ant-picker-cell-range-hover,
.ant-picker-cell-range-hover-start {
    // color: @text-color;
    background-color: transparent;
}
.ant-picker-cell.ant-picker-cell-in-view.ant-picker-cell-range-hover-start .ant-picker-cell-inner {
    background-color: @activeColor;
}
.ant-picker-cell-in-range.ant-picker-cell-range-hover-start:hover,
.ant-picker-cell-in-range.ant-picker-cell-range-hover-end:hover {
    background-color: transparent !important;
}

// .ant-picker-panel-container {
//     color: @text-color;
//     background-color: @backgoundColor;
// }
.ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end)
    .ant-picker-cell-inner,
.ant-picker-time-panel-column
    > li.ant-picker-time-panel-cell
    .ant-picker-time-panel-cell-inner:hover,
.ant-picker-time-panel-column
    > li.ant-picker-time-panel-cell-selected
    .ant-picker-time-panel-cell-inner {
    border-color: @activeColor;
    background-color: @activeColor;
}
.ant-picker-header > button:hover span {
    color: @activeColor;
}
.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before {
    background-color: @activeColor;
}

/*slider*/
.ant-slider-track,.ant-slider-track:hover{
    background-color: @activeColor!important;
}
.ant-slider-handle{
    border: solid 2px @activeColor!important;
}
/*滑动条*/
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
    background: rgba(255, 255, 255, 0.15) !important;
    background-clip: border-box;
}
::-webkit-scrollbar-thumb {
    border-radius: 2px !important;
    border-style: dashed;
    border-color: transparent;
    border-top-width: 1px;
    border-right-width: 0;
    border-bottom-width: 1px;
    border-left-width: 4px;
    background-color: rgba(255, 255, 255, 0.15) !important;
    background-clip: padding-box;
}



// IB换肤-这边自定义初始颜色
@primary-color: #00A335;
@processing-color: #00A335;
// @info-color: #6A90A7;
@success-color: #00A335; // 成功色
@warning-color: #EAB42A; // 警告色
@error-color: #D72735; // 错误色


// 以下粘贴自/node_modules/antd/lib/style/themes/dark.less"

// @theme: dark;
// color palettes
@blue-1: mix(color(~`colorPalette('@{blue-base}', 8) `), @component-background, 15%);
@blue-2: mix(color(~`colorPalette('@{blue-base}', 7) `), @component-background, 25%);
@blue-3: mix(@blue-base, @component-background, 30%);
@blue-4: mix(@blue-base, @component-background, 45%);
@blue-5: mix(@blue-base, @component-background, 65%);
@blue-6: mix(@blue-base, @component-background, 85%);
@blue-7: mix(color(~`colorPalette('@{blue-base}', 5) `), @component-background, 90%);
@blue-8: mix(color(~`colorPalette('@{blue-base}', 4) `), @component-background, 95%);
@blue-9: mix(color(~`colorPalette('@{blue-base}', 3) `), @component-background, 97%);
@blue-10: mix(color(~`colorPalette('@{blue-base}', 2) `), @component-background, 98%);

@purple-1: mix(color(~`colorPalette('@{purple-base}', 8) `), @component-background, 15%);
@purple-2: mix(color(~`colorPalette('@{purple-base}', 7) `), @component-background, 25%);
@purple-3: mix(@purple-base, @component-background, 30%);
@purple-4: mix(@purple-base, @component-background, 45%);
@purple-5: mix(@purple-base, @component-background, 65%);
@purple-6: mix(@purple-base, @component-background, 85%);
@purple-7: mix(color(~`colorPalette('@{purple-base}', 5) `), @component-background, 90%);
@purple-8: mix(color(~`colorPalette('@{purple-base}', 4) `), @component-background, 95%);
@purple-9: mix(color(~`colorPalette('@{purple-base}', 3) `), @component-background, 97%);
@purple-10: mix(color(~`colorPalette('@{purple-base}', 2) `), @component-background, 98%);

@cyan-1: mix(color(~`colorPalette('@{cyan-base}', 8) `), @component-background, 15%);
@cyan-2: mix(color(~`colorPalette('@{cyan-base}', 7) `), @component-background, 25%);
@cyan-3: mix(@cyan-base, @component-background, 30%);
@cyan-4: mix(@cyan-base, @component-background, 45%);
@cyan-5: mix(@cyan-base, @component-background, 65%);
@cyan-6: mix(@cyan-base, @component-background, 85%);
@cyan-7: mix(color(~`colorPalette('@{cyan-base}', 5) `), @component-background, 90%);
@cyan-8: mix(color(~`colorPalette('@{cyan-base}', 4) `), @component-background, 95%);
@cyan-9: mix(color(~`colorPalette('@{cyan-base}', 3) `), @component-background, 97%);
@cyan-10: mix(color(~`colorPalette('@{cyan-base}', 2) `), @component-background, 98%);

@green-1: mix(color(~`colorPalette('@{green-base}', 8) `), @component-background, 15%);
@green-2: mix(color(~`colorPalette('@{green-base}', 7) `), @component-background, 25%);
@green-3: mix(@green-base, @component-background, 30%);
@green-4: mix(@green-base, @component-background, 45%);
@green-5: mix(@green-base, @component-background, 65%);
@green-6: mix(@green-base, @component-background, 85%);
@green-7: mix(color(~`colorPalette('@{green-base}', 5) `), @component-background, 90%);
@green-8: mix(color(~`colorPalette('@{green-base}', 4) `), @component-background, 95%);
@green-9: mix(color(~`colorPalette('@{green-base}', 3) `), @component-background, 97%);
@green-10: mix(color(~`colorPalette('@{green-base}', 2) `), @component-background, 98%);

@magenta-1: mix(color(~`colorPalette('@{magenta-base}', 8) `), @component-background, 15%);
@magenta-2: mix(color(~`colorPalette('@{magenta-base}', 7) `), @component-background, 25%);
@magenta-3: mix(@magenta-base, @component-background, 30%);
@magenta-4: mix(@magenta-base, @component-background, 45%);
@magenta-5: mix(@magenta-base, @component-background, 65%);
@magenta-6: mix(@magenta-base, @component-background, 85%);
@magenta-7: mix(color(~`colorPalette('@{magenta-base}', 5) `), @component-background, 90%);
@magenta-8: mix(color(~`colorPalette('@{magenta-base}', 4) `), @component-background, 95%);
@magenta-9: mix(color(~`colorPalette('@{magenta-base}', 3) `), @component-background, 97%);
@magenta-10: mix(color(~`colorPalette('@{magenta-base}', 2) `), @component-background, 98%);

@pink-1: mix(color(~`colorPalette('@{pink-base}', 8) `), @component-background, 15%);
@pink-2: mix(color(~`colorPalette('@{pink-base}', 7) `), @component-background, 25%);
@pink-3: mix(@pink-base, @component-background, 30%);
@pink-4: mix(@pink-base, @component-background, 45%);
@pink-5: mix(@pink-base, @component-background, 65%);
@pink-6: mix(@pink-base, @component-background, 85%);
@pink-7: mix(color(~`colorPalette('@{pink-base}', 5) `), @component-background, 90%);
@pink-8: mix(color(~`colorPalette('@{pink-base}', 4) `), @component-background, 95%);
@pink-9: mix(color(~`colorPalette('@{pink-base}', 3) `), @component-background, 97%);
@pink-10: mix(color(~`colorPalette('@{pink-base}', 2) `), @component-background, 98%);

@red-1: mix(color(~`colorPalette('@{red-base}', 8) `), @component-background, 15%);
@red-2: mix(color(~`colorPalette('@{red-base}', 7) `), @component-background, 25%);
@red-3: mix(@red-base, @component-background, 30%);
@red-4: mix(@red-base, @component-background, 45%);
@red-5: mix(@red-base, @component-background, 65%);
@red-6: mix(@red-base, @component-background, 85%);
@red-7: mix(color(~`colorPalette('@{red-base}', 5) `), @component-background, 90%);
@red-8: mix(color(~`colorPalette('@{red-base}', 4) `), @component-background, 95%);
@red-9: mix(color(~`colorPalette('@{red-base}', 3) `), @component-background, 97%);
@red-10: mix(color(~`colorPalette('@{red-base}', 2) `), @component-background, 98%);

@orange-1: mix(color(~`colorPalette('@{orange-base}', 8) `), @component-background, 15%);
@orange-2: mix(color(~`colorPalette('@{orange-base}', 7) `), @component-background, 25%);
@orange-3: mix(@orange-base, @component-background, 30%);
@orange-4: mix(@orange-base, @component-background, 45%);
@orange-5: mix(@orange-base, @component-background, 65%);
@orange-6: mix(@orange-base, @component-background, 85%);
@orange-7: mix(color(~`colorPalette('@{orange-base}', 5) `), @component-background, 90%);
@orange-8: mix(color(~`colorPalette('@{orange-base}', 4) `), @component-background, 95%);
@orange-9: mix(color(~`colorPalette('@{orange-base}', 3) `), @component-background, 97%);
@orange-10: mix(color(~`colorPalette('@{orange-base}', 2) `), @component-background, 98%);

@yellow-1: mix(color(~`colorPalette('@{yellow-base}', 8) `), @component-background, 15%);
@yellow-2: mix(color(~`colorPalette('@{yellow-base}', 7) `), @component-background, 25%);
@yellow-3: mix(@yellow-base, @component-background, 30%);
@yellow-4: mix(@yellow-base, @component-background, 45%);
@yellow-5: mix(@yellow-base, @component-background, 65%);
@yellow-6: mix(@yellow-base, @component-background, 85%);
@yellow-7: mix(color(~`colorPalette('@{yellow-base}', 5) `), @component-background, 90%);
@yellow-8: mix(color(~`colorPalette('@{yellow-base}', 4) `), @component-background, 95%);
@yellow-9: mix(color(~`colorPalette('@{yellow-base}', 3) `), @component-background, 97%);
@yellow-10: mix(color(~`colorPalette('@{yellow-base}', 2) `), @component-background, 98%);

@volcano-1: mix(color(~`colorPalette('@{volcano-base}', 8) `), @component-background, 15%);
@volcano-2: mix(color(~`colorPalette('@{volcano-base}', 7) `), @component-background, 25%);
@volcano-3: mix(@volcano-base, @component-background, 30%);
@volcano-4: mix(@volcano-base, @component-background, 45%);
@volcano-5: mix(@volcano-base, @component-background, 65%);
@volcano-6: mix(@volcano-base, @component-background, 85%);
@volcano-7: mix(color(~`colorPalette('@{volcano-base}', 5) `), @component-background, 90%);
@volcano-8: mix(color(~`colorPalette('@{volcano-base}', 4) `), @component-background, 95%);
@volcano-9: mix(color(~`colorPalette('@{volcano-base}', 3) `), @component-background, 97%);
@volcano-10: mix(color(~`colorPalette('@{volcano-base}', 2) `), @component-background, 98%);

@geekblue-1: mix(color(~`colorPalette('@{geekblue-base}', 8) `), @component-background, 15%);
@geekblue-2: mix(color(~`colorPalette('@{geekblue-base}', 7) `), @component-background, 25%);
@geekblue-3: mix(@geekblue-base, @component-background, 30%);
@geekblue-4: mix(@geekblue-base, @component-background, 45%);
@geekblue-5: mix(@geekblue-base, @component-background, 65%);
@geekblue-6: mix(@geekblue-base, @component-background, 85%);
@geekblue-7: mix(color(~`colorPalette('@{geekblue-base}', 5) `), @component-background, 90%);
@geekblue-8: mix(color(~`colorPalette('@{geekblue-base}', 4) `), @component-background, 95%);
@geekblue-9: mix(color(~`colorPalette('@{geekblue-base}', 3) `), @component-background, 97%);
@geekblue-10: mix(color(~`colorPalette('@{geekblue-base}', 2) `), @component-background, 98%);

@lime-1: mix(color(~`colorPalette('@{lime-base}', 8) `), @component-background, 15%);
@lime-2: mix(color(~`colorPalette('@{lime-base}', 7) `), @component-background, 25%);
@lime-3: mix(@lime-base, @component-background, 30%);
@lime-4: mix(@lime-base, @component-background, 45%);
@lime-5: mix(@lime-base, @component-background, 65%);
@lime-6: mix(@lime-base, @component-background, 85%);
@lime-7: mix(color(~`colorPalette('@{lime-base}', 5) `), @component-background, 90%);
@lime-8: mix(color(~`colorPalette('@{lime-base}', 4) `), @component-background, 95%);
@lime-9: mix(color(~`colorPalette('@{lime-base}', 3) `), @component-background, 97%);
@lime-10: mix(color(~`colorPalette('@{lime-base}', 2) `), @component-background, 98%);

@gold-1: mix(color(~`colorPalette('@{gold-base}', 8) `), @component-background, 15%);
@gold-2: mix(color(~`colorPalette('@{gold-base}', 7) `), @component-background, 25%);
@gold-3: mix(@gold-base, @component-background, 30%);
@gold-4: mix(@gold-base, @component-background, 45%);
@gold-5: mix(@gold-base, @component-background, 65%);
@gold-6: mix(@gold-base, @component-background, 85%);
@gold-7: mix(color(~`colorPalette('@{gold-base}', 5) `), @component-background, 90%);
@gold-8: mix(color(~`colorPalette('@{gold-base}', 4) `), @component-background, 95%);
@gold-9: mix(color(~`colorPalette('@{gold-base}', 3) `), @component-background, 97%);
@gold-10: mix(color(~`colorPalette('@{gold-base}', 2) `), @component-background, 98%);

// Color used by default to control hover and active backgrounds and for
// alert info backgrounds.
@primary-1: mix(color(~`colorPalette('@{primary-color}', 8) `), @component-background, 15%);
@primary-2: mix(color(~`colorPalette('@{primary-color}', 7) `), @component-background, 25%);
@primary-3: mix(@primary-color, @component-background, 30%);
@primary-4: mix(@primary-color, @component-background, 45%);
@primary-5: mix(@primary-color, @component-background, 65%);
@primary-6: @primary-color;
@primary-7: mix(color(~`colorPalette('@{primary-color}', 5) `), @component-background, 90%);
@primary-8: mix(color(~`colorPalette('@{primary-color}', 4) `), @component-background, 95%);
@primary-9: mix(color(~`colorPalette('@{primary-color}', 3) `), @component-background, 97%);
@primary-10: mix(color(~`colorPalette('@{primary-color}', 2) `), @component-background, 98%);

// Layer background
@popover-background: #1f1f1f;
@popover-customize-border-color: #3a3a3a;
@body-background: @black;
@component-background: #141414;

@text-color: @white;
@text-color-secondary: fade(@white, 45%);
@text-color-inverse: @white;
@icon-color-hover: fade(@white, 75%);
@heading-color: fade(@white, 85%);

// The background colors for active and hover states for things like
// list items or table cells.
@item-active-bg: @primary-1;
@item-hover-bg: fade(@white, 8%);

// Border color
@border-color-base: #484C55; // base border outline a component
@border-color-split: #484C55; // split border inside a component

@background-color-light: fade(@white, 4%); // background of header and selected item
@background-color-base: fade(@white, 8%); // Default grey background color

// Disabled states
@disabled-color: fade(@white, 30%);
@disabled-bg: @background-color-base;
@disabled-color-dark: fade(@white, 30%);

// Tree
// ---
@tree-bg: transparent;

// List
// ---
@list-customize-card-bg: transparent;

// Shadow
// ---
@shadow-color: rgba(0, 0, 0, 0.45);
@shadow-color-inverse: @component-background;
@box-shadow-base: @shadow-2;
@shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.32), 0 -9px 28px 0 rgba(0, 0, 0, 0.2),
  0 -12px 48px 16px rgba(0, 0, 0, 0.12);
@shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.32), 0 9px 28px 0 rgba(0, 0, 0, 0.2),
  0 12px 48px 16px rgba(0, 0, 0, 0.12);
@shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.32), 9px 0 28px 0 rgba(0, 0, 0, 0.2),
  12px 0 48px 16px rgba(0, 0, 0, 0.12);
@shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 6px 16px 0 rgba(0, 0, 0, 0.32),
  0 9px 28px 8px rgba(0, 0, 0, 0.2);

// Buttons
// ---
@btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
@btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
@btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);

@btn-default-bg: transparent;

@btn-default-ghost-color: @text-color;
@btn-default-ghost-border: fade(@white, 25%);

@btn-text-hover-bg: rgba(255, 255, 255, 0.03);

// Checkbox
// ---
@checkbox-check-bg: transparent;

// Descriptions
// ---
@descriptions-bg: @background-color-light;

// Divider
// ---
@divider-color: rgba(255, 255, 255, 12%);

// Modal
// ---
@modal-header-bg: @popover-background;
@modal-header-border-color-split: @border-color-split;
@modal-content-bg: @popover-background;
@modal-footer-border-color-split: @border-color-split;

// Radio
// ---
@radio-solid-checked-color: @white;
@radio-dot-disabled-color: fade(@white, 20%);

// Radio buttons
// ---
@radio-disabled-button-checked-bg: fade(@white, 20%);
@radio-disabled-button-checked-color: @disabled-color;

// Layout
// ---
@layout-body-background: @body-background;
@layout-header-background: @popover-background;
@layout-trigger-background: #262626;

// Input
// ---
@input-bg: transparent;
@input-placeholder-color: fade(@white, 30%);
@input-icon-color: fade(@white, 30%);
@input-number-handler-active-bg: @item-hover-bg;
@input-icon-hover-color: fade(@white, 85%);

// Select
// ---
@select-background: transparent;
@select-dropdown-bg: @popover-background;
@select-clear-background: @component-background;
@select-selection-item-bg: fade(@white, 8);
@select-selection-item-border-color: @border-color-split;
@select-multiple-disabled-background: @component-background;
@select-multiple-item-disabled-color: #595959;
@select-multiple-item-disabled-border-color: @popover-background;

// Cascader
// ---
@cascader-bg: transparent;
@cascader-menu-bg: @popover-background;
@cascader-menu-border-color-split: @border-color-split;

// Tooltip
// ---
// Tooltip background color
@tooltip-bg: #434343;

// Menu
// ---
// dark theme
@menu-dark-inline-submenu-bg: @component-background;
@menu-dark-bg: @popover-background;
@menu-popup-bg: @popover-background;

// Message
// ---
@message-notice-content-bg: @popover-background;

// Notification
@notification-bg: @popover-background;

// LINK
@link-hover-color: @primary-5;
@link-active-color: @primary-7;

// Table
// --
@table-header-bg: #1d1d1d;
@table-body-sort-bg: fade(@white, 1%);
@table-row-hover-bg: #262626;
@table-header-cell-split-color: fade(@white, 8%);
@table-header-sort-bg: #262626;
@table-header-filter-active-bg: #434343;
@table-header-sort-active-bg: #303030;
@table-fixed-header-sort-active-bg: #222;
@table-filter-btns-bg: @popover-background;
@table-expanded-row-bg: @table-header-bg;
@table-filter-dropdown-bg: @popover-background;
@table-expand-icon-bg: transparent;

// TimePicker
// ---
@picker-basic-cell-hover-with-range-color: darken(@primary-color, 35%);
@picker-basic-cell-disabled-bg: #303030;
@picker-border-color: @border-color-split;
@picker-bg: transparent;
@picker-date-hover-range-border-color: darken(@primary-color, 20%);

// Dropdown
// ---
@dropdown-menu-bg: @popover-background;
@dropdown-menu-submenu-disabled-bg: transparent;

// Steps
// ---
@steps-nav-arrow-color: fade(@white, 20%);
@steps-background: transparent;

// Avatar
// ---
@avatar-bg: fade(@white, 30%);

// Progress
// ---
@progress-steps-item-bg: fade(@white, 8%);

// Calendar
// ---
@calendar-bg: @popover-background;
@calendar-input-bg: @calendar-bg;
@calendar-border-color: transparent;
@calendar-full-bg: @component-background;

// Badge
// ---
@badge-text-color: @white;

// Popover
@popover-bg: @popover-background;

// Drawer
@drawer-bg: @popover-background;

// Card
// ---
@card-actions-background: @component-background;
@card-skeleton-bg: #303030;
@card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.64), 0 3px 6px 0 rgba(0, 0, 0, 0.48),
  0 5px 12px 4px rgba(0, 0, 0, 0.36);

// Transfer
// ---
@transfer-item-hover-bg: #262626;

// Comment
// ---
@comment-bg: transparent;
@comment-author-time-color: fade(@white, 30%);
@comment-action-hover-color: fade(@white, 65%);

// Rate
// ---
@rate-star-bg: fade(@white, 12%);

// Switch
// ---
@switch-bg: @white;

// Pagination
// ---
@pagination-item-bg: transparent;
@pagination-item-bg-active: transparent;
@pagination-item-link-bg: transparent;
@pagination-item-disabled-bg-active: fade(@white, 25%);
@pagination-item-disabled-color-active: @black;
@pagination-item-input-bg: @pagination-item-bg;

// PageHeader
// ---
@page-header-back-color: @icon-color;
@page-header-ghost-bg: transparent;

// Slider
// ---
@slider-rail-background-color: #262626;
@slider-rail-background-color-hover: @border-color-base;
@slider-dot-border-color: @border-color-split;
@slider-dot-border-color-active: @primary-4;

// Skeleton
// ---
@skeleton-to-color: fade(@white, 16%);

// Alert
// ---
@alert-success-border-color: @green-3;
@alert-success-bg-color: @green-1;
@alert-success-icon-color: @success-color;
@alert-info-border-color: @primary-3;
@alert-info-bg-color: @primary-1;
@alert-info-icon-color: @info-color;
@alert-warning-border-color: @gold-3;
@alert-warning-bg-color: @gold-1;
@alert-warning-icon-color: @warning-color;
@alert-error-border-color: @red-3;
@alert-error-bg-color: @red-1;
@alert-error-icon-color: @error-color;

// Timeline
// ---
@timeline-color: @border-color-split;
@timeline-dot-color: @primary-color;

// Mentions
// ---
@mentions-dropdown-bg: @popover-background;

// IB换肤-这边定义覆盖色
// @alert-info-border-color: @info-color;
// @alert-info-bg-color: @info-color;
// @alert-info-icon-color: @text-color;