margin-top: -200/@px-unit;
            margin-left: 150/@px-unit;
            &:hover {
                svg {
                    & + {
                        path:first-child {
                            fill: @iconColorN !important;
                        }
                    }
                }
            }
        }
        .compliantIcon_operatemonitor{
            font-size: 120/@px-unit;
            position: absolute;
            bottom: 0;
            margin-left: 150/@px-unit;
            &:hover {
                svg {
                    & + {
                        path:first-child {
                            fill: @iconColorN !important;
                        }
                    }
                }
            }
        }
        .picData_human_detect_imgAndInfo {
            margin-top: 20/@px-unit;
            height: 156/@px-unit;

            display: flex;
            flex-direction: row;
            justify-content: center;

            .human_detect_width140 {
                width: 140/@px-unit
            }

            .human_detect_width268 {
                width: 268/@px-unit
            }

            .picData_imgContentByPic {
                height: 137/@px-unit;
                margin: 0;
                float: left;

                img {
                    display: inline-block;
                    height: 100%;
                    margin: 0 5/@px-unit 0 5/@px-unit;
                    max-width: 120/@px-unit;
                }

                .pic_humanImg {
                    height: 100%;
                    margin: 0;
                    width: 120/@px-unit;
                    float: left;
                    text-align: center;
                }

                .nonmoperson-face {
                    height: 60%;
                    width: 80/@px-unit;
                    float: right;
                }

                .face {
                    height: 137/@px-unit;
                    margin: 0;
                    float: right;
                    margin-left: 30/@px-unit;
                }
            }

            .pic_humanImg {
                height: 100%;
                margin: 0;
                width: 120/@px-unit;
                float: left;
                text-align: center;
            }

            .person {
                margin-left: 10/@px-unit;
                display: inline-block;
                height: 100%;
                max-width: 120/@px-unit;
                width: auto;
            }

            .nonmoperson-face {
                height: 60%;
                width: 80/@px-unit;
                float: right;
            }

            .face {
                height: 137/@px-unit;
                margin: 0;
                float: right;
                margin-left: 30/@px-unit;
            }
        }
    }

    //    车辆检测样式
    .vehicle_detact {
        .picData_vehicle_detect_imgAndInfo {
            margin-top: 10/@px-unit;
            height: 166/@px-unit;
            display: flex;
            flex-direction: row;
            justify-content: center;

            .picData_imgContentByPic {
                position: relative;
                width: 140/@px-unit;
                height: 155/@px-unit;
                margin: 0;
                float: left;

                img {
                    width: 120/@px-unit;
                    display: inline-block;
                    height: 100%;
                    margin: 0 5/@px-unit 0 5/@px-unit;
                }

                .vehicle {
                    width: 120/@px-unit;
                    height: 120/@px-unit;
                    display: block;
                    margin: 0 auto;
                    position: absolute;
                    top: 0/@px-unit;
                    left: 5/@px-unit;
                }

                .plate {
                    width: 120/@px-unit;
                    height: 32/@px-unit;
                    display: block;
                    margin: 0 auto;
                    position: absolute;
                    top: 121/@px-unit;
                    left: 5/@px-unit;
                }
            }

            .picData_info {
                height: 166/@px-unit;

                .plateWhiteListDB {
                    width: 120/@px-unit;
                    height: 30/@px-unit;
                    line-height: 30/@px-unit;
                    text-align: center;
                    margin-top: 54/@px-unit;
                    float: left;
                    border: 1/@px-unit solid @vehicle_whiteplate_borderColor;
                    background-color: @vehicle_whiteplate_bgColor;
                    color: @pageTextA;
                }

                .plateBlackListDB {
                    width: 120/@px-unit;
                    height: 30/@px-unit;
                    line-height: 30/@px-unit;
                    text-align: center;
                    margin-top: 54/@px-unit;
                    float: left;
                    background-color: @vehicle_blackplate_bgColor;
                    color: @pageTextA;
                    border: 1px solid @vehicle_blackplate_borderColor;
                }

                .plateNormalListDB {
                    display: none
                }

            }
        }
    }
}
.infotext{
    width: 115/@px-unit;
    display: flex;
}
.info_label{
    max-width: 70/@px-unit;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.info_val{
    max-width: 45/@px-unit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

._AIMode_ {
    height: calc(100% - 66px);
    overflow-y: auto;
}


._AnomalyDetection_ {
    .ivsParameterSet;
}
.AnomalyDetection_crowdModal {
    ._Table_ .ant-table-body {
        min-height: 200 / @px-unit;
    }
}


._AudioAnalyse_ {
    height: calc(100% - 66px);
    overflow-y: auto;
}


._CrowdDistriRuleConfig_ {
    * {
        font-family: "arial", "Microsoft YaHei UI", "Microsoft YaHei" !important;
    }
}


._CheckBoxGroupModal_ {
    max-height: calc(100vh - 50vh);
    height: auto;
    overflow-y:scroll;
    .check-box-group-container{
        width: 100% !important;
    }
    .check-box-group-wrapped{
        width: 100% !important;
    }
    .checkBoxRow{
        width: 100%;
        display: flex;
        justify-content: space-between;
        .checkBoxItem-all{
            display: flex;
            align-items: center;
        }
        .checkBoxItem{
            width: 46%;
        }
        .rightItem{
            display: flex;
            justify-content: center;
        }
    }
    .label-normal-behind{
        //ie11下checkbox和文字没有对齐
        line-height: 28 / @px-unit;
    }
}

._FaceDetection_ {
    .fd_right {
        width: 495 / @px-unit;
    }
    .channelSelect {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }
}



._FaceIdentify_ {
    width: 100%;
    height: calc(100% - 66px);
    .mainRow {
        height: 100%;
    }
    .form-container {
        height: 100%;
        display: flex;
        flex-direction: column;
        margin-left: 20px;
        overflow-y: auto;
        .channel {
            display: flex;
            .enable {
                width: 10.7143rem;
                padding-right: 0.57142857rem;
            }
        }
        .button-group{
            display: flex;
            .label-div-Container:last-child {
                margin-left: 20px;
            }
        }
        .normal-alarm {
            .add {
                svg {
                    path {
                        fill: @current;
                    }
                }
            }
            .delete {
                .svgHover(#f00);
            }
            svg {
                cursor: pointer;
            }
            .ant-table-body {
                min-height: 400 / @px-unit;
            }
        }
        fieldset {
            // overflow-y: auto;
            flex: 1;
            .event-handler {
                overflow-y: auto;
                height: 370 / @px-unit;
            }
        }
    }
}


._FrequencyAnalysis_ {
    .delete {
        .svgHover(#f00);
    }
    svg {
        cursor: pointer;
    }
}


._HeatMap_ {
    ._HeatMap_config{
        width: 495 / @px-unit;
    }
}


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

    // 下面是通用行为分析的特殊样式
    .objectSwitch {
        width: 200 / @px-unit !important;
    }
    .TrackTime {
        width: 200 / @px-unit !important;
    }

    .AlarmInput-channel-select {
        .label-normal-container {
            display: flex;
            align-items: center;
        }
    }
}


._IVSScheme_ {
    .cap-item-container {
        display: inline-block;
        width: 100px;
        height: 100px;
        border: 1px solid rgba(166, 170, 178, .5);
        margin-right: 10px;
    }
    .disabled-cap-item-container {
        border: 1px solid rgba(166, 170, 178, .2);
    }
    .cap-item {
        width: 100px;
        height: 100px;
        margin-right: 10px;
        font-size: 100px !important;
        cursor: pointer;
    }
    .active {
        svg {
            path:first-child {
                fill: @current !important; // 默认图标颜色
            }
            path:nth-child(2) {
                fill: @current !important; // 默认图标颜色
            }
            // 带渐变的默认图标颜色
            linearGradient {
                stop:first-child {
                    stop-color: @current !important; // 起始渐变色
                }
                stop:last-child {
                    stop-color: transparent !important; // 渐变停止色
                }
            }
        }
    }
    .disabled {
        svg {
            path:first-child {
                fill: #696969 !important;
            }
            path:nth-child(2) {
                fill: #696969 !important;
            }
            // 带渐变的默认图标颜色
            linearGradient {
                stop:first-child {
                    stop-color: @current !important; // 起始渐变色
                }
                stop:last-child {
                    stop-color: transparent !important; // 渐变停止色
                }
            }
        }
    }
    .active.disabled {
        .active;
        svg {
            opacity: 0.5; // 与UI确认透明度为50%
        }
    }
    .scene-container {
        max-height: 595px;
        overflow-y: scroll;
        .scene-box {
            width: '50%';
            margin-top: 15px;
            .scene-title {
                display: flex;
                padding: 9px;
                margin-bottom: 10px;
                font-size: 14px;
                font-weight: bolder;
                color: .color_N(@ai_scene_bg)[];
                justify-content: space-between;
                align-items: center;
                background-color: @ai_scene_bg !important;
                span:first-child {
                    cursor: default;
                    user-select: none;
                }
            }

            &:first-child {
                margin-top: 0;
            }
        }
    }
    .hide {
        display: none;
    }
}


._VehicleDetect_ {
    ._VehicleDetect-RuleConfig_ {
        .aiConfig {
            .between-divider {
                margin-top: 0;
                margin-bottom: 0;
            }
            .ant-tabs {
                .ant-tabs-nav {
                    &::before {
                        content: none;
                    }
                    .ant-tabs-tab:not(:first-of-type) {
                        margin-left: 20/@px-unit;
                    }
                    .ant-tabs-tab-btn {
                        height: 40/@px-unit;
                        line-height: 40/@px-unit;
                        padding: 0 8/@px-unit;
                        text-align: center;
                        min-width: 118/@px-unit;
                        width: auto;
                    }
                }
            }
            .vehicleDetect-eventHandler {
                border: @pageBorderD solid 1/@px-unit
            }
        }
    }
}

.AddModifyModalView {
    ._Table_ .ant-table-body {
        min-height: 220 / @px-unit;
    }
}
._MainSubLink_ {
    .MainSubGroupTable, .IPCTable {
        ._Table_ .ant-table-body {
            min-height: 220 / @px-unit;
        } 
    }
    
}
.CameralListModal {
    ._Table_ .ant-table-body {
        min-height: 200 / @px-unit;
    } 
    .ant-modal-body {
        padding: 0 !important;
    }
    ._Table_ {
        margin-top: 0 !important;
    }
    
}

.MainSubWarning {
    &.cus_icons:not(.disabled_icons) svg path:first-child,
    &.cus_icons:not(.disabled_icons):not(.noHover):hover svg path:first-child {
        fill: red;
    }
    &.cus_icons:not(.disabled_icons) svg path:last-child {
        fill: black;
    }
}
._calibrate_ocx {
    height: 337/@px-unit;
}
.CalibratePtzZoom {
    ._PtzZoom_part {
        width: 70/@px-unit;
        height: 70/@px-unit;
        background-color: transparent;
        border-bottom-color: transparent;
        border-right-color: transparent;
    }
}
.CalibrateTable {
    ._Table_ .ant-table-body {
        min-height: 200 / @px-unit;
    } 
}
.ptz_colorAlarm {
    width: 20/@px-unit;
    height: 20/@px-unit;
}
.ptz_colorAlarm_1 {
    background-color: @CalibrateSub1 !important;
}
.ptz_colorAlarm_2 {
    background-color: @CalibrateSub2 !important;
}
.ptz_colorAlarm_3 {
    background-color: @CalibrateSub3 !important;
}



._NumberStat_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .ivsParameterSet;
    height: calc(100% - 66px);
    .fieldsetCtn {
        overflow-y: auto;
    }
    .EventHandler {
        overflow-y: visible;
    }
}



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



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


._PeopleFlow_ {
    height: calc(100% - 66px);
    overflow-y: auto;
}


.CompliantInfoModal {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .ant-checkbox-wrapper + .ant-checkbox-wrapper {
        margin-left: 0px !important
    }
    .ant-checkbox-wrapper {
        width: 120 / @px-unit;
    }
}



._QueueDetection_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .ivsParameterSet;
    height: calc(100% - 66px);
    .fieldsetCtn {
        overflow-y: auto;
    }
    .EventHandler {
        overflow-y: visible;
    }
}


._MarkPlugin_ {
    width: 460/@px-unit;//AI插件组件宽度
    padding: 5/@px-unit;
    // UI组件特有的CSS，
    padding-top: inherit; //为了不eslint告警写一个
    &ocx {
        width: 450/@px-unit;//AI插件组件宽度
        height: 337/@px-unit;//AI插件组件宽度
    }
    &button, &divider {
        width: 450/@px-unit;
    }   
    &filter {
        div {
            display: inline-block;
        }
    }
    button {
        width: 100/@px-unit;
    }
    .left {
        float: left;
    }
    .right {
        float: right;
    }
    .ant-radio-wrapper {
        display: block;
    }
    .ant-radio-wrapper {
        margin-right: 0/@px-unit;
    }
    .ant-radio, span.ant-radio + * {
        vertical-align: top;
    }
}




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


._SMDConfig_ {
    .ant-divider-horizontal {
        margin: 12 / @px-unit 0;
    }
        .flex {
            display: flex;
            align-items: center;
        }

        .AlarmInput-channel-select {
            .label-normal-container {
                display: flex;
                align-items: center;
            }
        }
}



._StereoBehavior_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .ivsParameterSet;
    .ant-divider-horizontal {
        margin: 12 / @px-unit 0;
    }
}



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



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



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


.ivsParameterSet {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    height: calc(100% - 66px);
    .ivsMainRow {
        height: 100%;
    }
    .ivsMainRight, .ivsMainRow > .ant-space,  .ivsMainRow > .ant-space > .ant-space-item{
        height: 100%;
        overflow-y: hidden;
    }
    .ivsMainRight {
        display: flex;
        flex-direction: column;
        overflow-y: hidden;
    }
    .fieldsetCtn {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
    fieldset {
        overflow-y: hidden;
    }
    fieldset, .EventHandler {
        flex: 1;
    }
    .fieldsetCtn {
        height: 95%;
    }
    .EventHandler {
        // overflow-y: scroll;
    }
    legend {
        width: auto;
        font-size: @font-size-base;
    }
    .AiRulePluginCtn {
        margin-right: 15 / @px-unit;
        &>.ant-space-item {
            overflow-x: hidden;
        }
        
    }
    .ant-divider-horizontal {
        margin: 12 / @px-unit 0;
    }
    .event-handler {
        width: 100%;
        height: 100%;// IE11下高度超出
    }
}
.ivsParameterSet {
@media screen and (max-height: 600 / @px-unit){
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .ivsMainRight, .ivsMainRow > .ant-space,  .ivsMainRow > .ant-space > .ant-space-item{
        overflow-y: auto;
        overflow-x: hidden;
    }
    .ivsMainRight, .fieldsetCtn {
        display: block;
        // flex-direction: column;
        overflow-y: auto;
    }
    fieldset {
        overflow-y: auto;
    }
    .EventHandler {
        overflow-y: hidden;
    }
}
@media screen and (-webkit-min-device-pixel-ratio: 1.25), (-ms-high-contrast: active), (-ms-high-contrast: none) {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .ivsMainRight, .ivsMainRow > .ant-space,  .ivsMainRow > .ant-space > .ant-space-item{
        overflow-y: auto;
        overflow-x: hidden;
    }
    .ivsMainRight, .fieldsetCtn {
        display: block;
        // flex-direction: column;
        overflow-y: auto;
    }
    fieldset {
        overflow-y: auto;
    }
    .EventHandler {
        overflow-y: hidden;
    }
}

}



/* 由于登录页面 输入框组件高度是样式控制， 宽度由 SddConfigProvider 控制，SddConfigProvider不支持rem 所以登录页面均使用px */

.login-container {
    height: 100%;
    width: 100%;

    .login-backgroundImage {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        background-size: cover;
        // 引用会成为相对路径，而实际编译后会在生成的静态资源路径下取
        background-image: url('/static/media/login_bg_@{theme}.jpg');
    }

    .login-box {
        background-color: transparent;
        position: absolute;
        left: 50%;
        top: 40%;
        margin-left: -190 / @px-unit;
        margin-top: -150 / @px-unit;

        .login-logo {
            height: 60 / @px-unit;
            width: 330 / @px-unit;
            background-size: contain;
            margin-bottom: 30 / @px-unit;
            background-repeat:no-repeat;
            background-position-x: center;
            background-image: url('/custom_logo/web_logo.png');
            background-repeat:no-repeat;
        }
        /* 方便定制处理主界面布局 */
        &.logo-left{
            display: flex;
            flex-direction: row;     
            .login-logo{
                margin-top: 20%;
            }
        }
        &.logo-right{            
            display: flex;
            flex-direction: row-reverse;     
            .login-logo{
                margin-top: 20%;
            }
        }
    }
}
.login-container .login-box .Login-Form,
.NamePwdInput {
    .pd-active>svg path:first-child{
        fill:@pdEyeIconA;
        opacity: 0.5;
    }
    .pd-default>svg path:first-child{
        fill:none; 
        opacity: 0.5;
    }
    .ant-input-affix-wrapper-focused {
        .pd-active>svg path:first-child{
            fill:@pdEyeIconA;
            opacity: 1;
        }
        .pd-default>svg path:first-child{
            fill:none; 
            opacity: 1;
        }
    }
    .label-normal-wrapper {
        width: 100%;
    }
    background-color: transparent;
    text-align: center;

    margin-top: 10 / @px-unit;
    /* 纯输入框 */
    .ant-input{
        &:not(:focus){
            &:hover{                    
                border-color: @formInputBoderN;
            }
        }
        &:focus{
            opacity: 1;
        }
    }
 
    .ant-input,
    .ant-select{
        background-color: transparent;
        color: @loginFormInputText;
        height: 100%;
        font-size: 18 / @px-unit;
        &:not(.ant-select-show-arrow){
            opacity: 0.5;
        }
        .ant-select-selection-item{
            opacity: 0.5;
        }
    }
    .ant-select{
        &.ant-select-open{
            opacity: 1;
            svg{
                fill:@formInputSvgA !important;
            }
            .ant-select-selection-item{
                opacity: 1;
            }
        }
    }
    .ant-select:not(.ant-select-customize-input) .ant-select-selector{
        background-color: @loginFormInputBg;
    }
    .ant-select-single.ant-select-open .ant-select-selection-item{
        color: @loginFormInputText;
    }    
    .ant-btn:not(.btn-link):not(.ant-btn-link).ant-btn-primary{
        background-color: @loginPrimaryBtnBg;
        border-color: @loginPrimaryBtnBorder;
    }
    .ant-btn:not(.btn-link):not(.ant-btn-link).ant-btn-primary:hover:not(:focus):not([disabled]) {
        background-color: @loginActiveBtnBg;
        border-color: @loginActiveBtnBorder;
    }
    .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector{
        box-shadow: none;
    }
    .ant-select-selector{
        border-color: @loginFormInputBorder;
    }    
    .ant-select:not(.ant-select-disabled):hover .ant-select-selector{
        border-color: @loginFormInputBorder;
    }
    .ant-select.ant-select-open:not(.ant-select-disabled):hover{
        .ant-select-selector{
            border-color: @formInputBorderA;
        }
    }
    .ant-select:not(.ant-select-disabled):hover{
        border-color: @loginFormInputBorder;
        svg{
            fill:@formInputSvgN;
        }
    }

    .ant-input-affix-wrapper,
    .label-normal-wrapper {
        display: flex;
        height: 40 / @px-unit;
        background-color: @loginFormInputBg;
        border-color: @loginFormInputBorder;
        color: @formInputTextN;
    }
    .ant-input-affix-wrapper-focused {
        box-shadow: 0 0 0 0;
        border-color: @formInputBorderA;
        .ant-input-prefix {
            .svgOut(@pdEyeIconA);
        }
        .ant-input {
            opacity: 1;
        }
    }

    .ant-input-suffix:hover {
        color: rgb(255, 96, 184);
    }

    .ant-input-suffix:focus {
        color: rgb(255, 96, 184);
    }

    .ant-input-suffix {
        color: yellow;
    }

    input::-webkit-input-placeholder {
        color: #616265   
    }
    input::-ms-input-placeholder {
        color: #616265      
    }

    .login-icon {
        color: @loginIconSvg;
    }

    .ant-row {
        /* margin-top: 0;
        margin-bottom: 15px; */
        .ant-col {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            // margin-bottom: 15px;
        }
    }
    .login-button {
        font-size: 20 / @px-unit; //按钮文字大小
        width: 100%;
        height: 40 / @px-unit;
    }

    .login-forget {
        font-size: 13 / @px-unit;
        margin: 5 / @px-unit 0 30 / @px-unit 0;
        // position: absolute;
        padding-left: 10 / @px-unit;
        float: right;
        cursor: pointer;
        color: @loginForgetPwdTextN;
        &:hover {
            color: @loginForgetPwdTextA;
        }
    }

    .ant-select-selector {
        height: 40 / @px-unit;
    }
}
.nextTag_current{
    path:first-child{
        fill: @current !important;
    }
}
.nextTag:hover{
    svg path{
        fill: @modalContentText !important;
    }
}
.modalContentContainer{
    height: 510 / @px-unit;
    overflow-y: auto;
    .modalHeader{
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1 / @px-unit solid @modalFooterBorder;
        padding-bottom: 18px;
        .headerText{
            text-align: center;
            width: 200 / @px-unit;
            font-size: 16px;
        }
        .headerText_current{
            text-align: center;
            width: 200 / @px-unit;
            color: @current;
            font-size: 16px;
        }
    }
    .resetTip{
        margin: 175 / @px-unit;
        width: 475 / @px-unit;/* 海外忘记密码宽屏下弹出框出现滚动条了 */
    }
    .ResetType{
        margin-left: 30 / @px-unit;
        .resetSelect{
            display: flex;
            .SerialNo{
                margin-left: 80 / @px-unit;
                align-items: center;
                display: flex;
            }
        }
        .resetContent{
            display: flex;
            .QR_background{
                width: 292 / @px-unit;
                height: 292 / @px-unit;
                padding: 12 / @px-unit;
                background-color: @formInputTextN;
            }
            .QRCodeTip{
                width: 250 / @px-unit;
                margin-left: 40 / @px-unit;
                margin-top: 124 / @px-unit;
                word-break: break-all;
            }
            .QRCodeTipEmail {
                width: 250 / @px-unit;
                margin-left: 40 / @px-unit;
                word-break: break-word;
            }
            .ForeignDevice{
                width: 250 / @px-unit;
                margin-left: 40 / @px-unit;
                word-break: break-all;
            }
        }
    }
    .CodeSend{
        color: @successColor;
    }
    .Safecode {
        width:100%;
        .label-normal-container  {
            width: 100%;
            .label-normal-wrapper {
                width:70% !important;
            }
        }
    }
    .PasswordPage{
        margin-left: 50 / @px-unit;
        margin-top: 40 / @px-unit;
        .PasswordItem{
            margin-bottom: 40 / @px-unit;
        }
        .PasswordConfirm{
            display: flex;
            .PasswordTip{
                width: 200 / @px-unit;
                margin-left: 12 / @px-unit;
            }
        }
        .PasswordInput{
            width: 260 / @px-unit;
        }
        .passwordCheck_Box{
            width: 260 / @px-unit;
        }
    }
}
.passwordSyncSuccess{
    color:@successColor;
}
.passwordSyncFail{
    color:@errorColor;
}
.DeviceInit{
    height: auto;
    // margin-left: 20 / @px-unit;
    // margin-top: 20 / @px-unit;
    .FlexLine{
        display: flex;
        margin-top: 30 / @px-unit;
        .PasswordTip{
            width: 260 / @px-unit;
            margin-left: 12 / @px-unit;
        }
    }
    .modalHeader{
        display: flex;
        align-items: center;
        padding-left: calc(50% - 1.097*@px-unit);
        border-bottom: 1 / @px-unit solid @modalFooterBorder;
        padding-bottom: 18px;
        .headerText{
            text-align: center;
            width: 200 / @px-unit;
        }
        .headerText_current{
            text-align: center;
            width: 200 / @px-unit;
            color: @current;
        }
    }
    .quick{
        justify-content:center;
        padding-left:0;
    }
    .InitItem{
        margin-left: 40 / @px-unit;
        margin-top: 40 / @px-unit;
        .quickInitLicenceNoted{
            white-space: nowrap;
            text-decoration: underline;
            cursor: pointer;
            display: inline-block;
        }
    }
    .IsInherit{
        border-bottom: 1 / @px-unit solid @modalFooterBorder;
        margin-top: 20 / @px-unit;
        margin-bottom: 20 / @px-unit;
    }
    .InitQuestion{
        margin-left: 120 / @px-unit;
    }
}
.InitGuide{
    height: auto;
    max-height: 680 / @px-unit;
    width: 80%;
    overflow-y: auto;
    overflow-x: hidden;
    margin-left: 90 / @px-unit;
    >div {
        width: 700 / @px-unit;
    }
    .startAndEndTimePicker,.label-normal-behind {
        padding: 0!important;
        .label-normal-container {
            padding: 0!important;
        }
    }
    .label-normal-wrapper > .ant-picker {
        width: 115 / @px-unit;
    }
    .label-date-picker > .ant-picker {
        width: 135 / @px-unit;
    }
    .autoCheckNote{
        width: 100%;
    }
}
.InitGuide_Law{
    height: 600 / @px-unit;
    .HeaderTab{
        display: flex;
        cursor: pointer;
        .Tab_Current{
            display: flex;
            width: 240 / @px-unit;
            text-align: center;
            height: 50 / @px-unit;
            background: @current;
            justify-content: center;
            align-items: center;
            border: 1px solid @tabBorder;
            color: @pageTextA;
        }
        .Tab{
            display: flex;
            width: 240 / @px-unit;
            text-align: center;
            height: 50 / @px-unit;
            background: @tabBgN;
            align-items: center;
            justify-content: center;
            border: 1px solid @tabBorder;
        }
    }
    .LegalText{
        height: 540 / @px-unit;
        padding: 20 / @px-unit;
        margin-top: 20 / @px-unit;
        overflow: auto;
    }
    .LicenceNoted{
        margin-top: 20 / @px-unit;
        margin-left: 20 / @px-unit;
    }
}




.syncinfo_modal {
    ._Table_ .ant-table-body {
        min-height: 200 / @px-unit;
    } 
}



._AlarmCenter_ {
    .divider {
        margin: 5 / @px-unit 0;
    }
}

._AutoRegister_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-top: inherit; //为了不eslint告警写一个
    //`_${_name_}_`
    .online_bg {
        color: @successColor;
    }
    .offline_bg {
        color: @errorColor;
    }
}



._BPSLimit_{
    padding: 20 / @px-unit;
}

._DDNS_ {
    .label-text {
        width: 60rem;
        cursor: default;
        user-select: none;
    }
    p {
        margin: 0;
    }
    /* 链接状态的样式 */
    .netState_0{
        /* DDNSconnecttingTip */
        color: @pageTextN;
    }
    .netState_1{
        //Connected
        color: @successColor;
    }
    .netState_2{
        //Disconnect
        color: @errorColor;
    }
}

.modal-footer {
    display: flex;
    flex-direction: row-reverse;
    button {
        width: 100%;
    }
}

._Email_ {
    height: 90%;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-bottom: 75px !important;
    .Receiver {
        .svg {
            font-size: 20px;
            cursor: default;
        }
        .active {
            color: #fff;
            background-color: #52555a;
            cursor: pointer;
        }
        .receiver-box {
            width: 288px;
            .box {
                display: inline-block;
                width: 260px;
                height: 118px;
                margin-right: 8px;
                border: 1px solid #4b515c;
                font-size: 13px;
                font-weight: 400;
                vertical-align: top;
                .cell {
                    height: 35px;
                    line-height: 35px;
                    padding: 0 10px;
                    margin: 0;
                    font-size: 14px;
                    vertical-align: top;
                    overflow: hidden; //超出的文本隐藏
                    text-overflow: ellipsis; //溢出用省略号显示
                    white-space: nowrap; //溢出不换行
                    &:hover {
                        color: #fff;
                    }
                }
            }
            span {
                display: inline-block;
                vertical-align: top;
            }
        }
    }
    .ant-divider-horizontal {
        margin: 5px 0;
    }
}



._GBCertManage_ {
    .delete-icon {
        cursor: pointer;
        font-size: 2.5rem;
        &:hover {
            svg {
                & + {
                    path:first-child {
                        fill: #f00 !important;
                    }
                }
            }
        }
    }
    .download-icon {
        cursor: pointer;
    }
    ._Table_ .ant-table-body {
        min-height: 350 / @px-unit;
    } 
}


._IPSpeakerCfgModal_{
    
}


._IPSpeakerCfgModal_{
    
}


@IEBrowerColor: @current;
._IPSpeaker_{
    padding: 20 / @px-unit;
    .blueIEBrowser {
        .svgOut(@IEBrowerColor);
    }
    .manage-grid-successIcon {
        .svgOut(@successIcon);
        .svgFont(20);
    }
    .manage-grid-errorIcon {
        .svgOut(@errorColor);
        .svgFont(20);
    }
}
._FourG_ {
    width: 100%;
}

._PhoneSetting_ {
    .container {
        display: flex;
        width: 100%;
    }
}



._Multicast_ {
    padding: 22 / @px-unit;
    .behindSpan {
        padding: 5 / @px-unit;
    }
}


._NetCloud_ {
    position: relative;
    .tip {
        width: 20rem;
        word-wrap:break-word;
        word-break:break-all;
    }
    .qrcodes {
        display: flex;
        width: 800px;
        height: 350px;
        margin-top: 30px;
        margin-left: 20px;
        .qrbox {
            display: flex;
            width: 300px;
            height: 250px;
            flex-direction: column;
            justify-content: space-between;
            .qrImg {
                width: 215px;
                height: 215px;
                padding: 5px;
                background-color: @QRCodeBg;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            p {
                margin: 0;
                font-size: 14px;
                font-weight: 400;
                color: .color_N(@pageBodyBg)[];
            }
        }
    }
    .step{
        height: 212px,
    }
    .wrap{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        .left_part{
            min-width: 40rem;
        }
    }
}

.modal-button {
    button {
        width: 100%;
    }
}



._P2P_ {
    position: relative;
    word-break: keep-all;
    .tip {
        width: 60rem;
    }
    .qrcodes {
        display: flex;
        width: 800px;
        height: 350px;
        margin-top: 30px;
        margin-left: 20px;
        .qrbox {
            display: flex;
            width: 300px;
            height: 350px;
            flex-direction: column;
            justify-content: space-between;
            .qrImg {
                width: 210px;
                padding: 5px;
                background-color: @QRCodeBg;
            }
            p {
                margin: 0;
                font-size: 14px;
                font-weight: 400;
                color: .color_N(@pageBodyBg)[];
            }
        }
    }
}

.modal-button {
    button {
        width: 100%;
    }
}


._Port_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-top: inherit; //为了不eslint告警写一个
    //`_${_name_}_`
}

._Pppoe_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-top: inherit; //为了不eslint告警写一个
    //`_${_name_}_`
}
._SNMP_ {
    .subform {
        display: flex;
        justify-content: space-between;
        .box {
            width: 50%;
        }
    }
}


._TCPIP_ {
    width: 100%;
    .table-item {
        margin: 0;
        text-align: center;
        .delete-icon {
            cursor: pointer;
            &:hover {
                svg {
                    & + {
                        path:first-child {
                            fill: #f00 !important;
                            opacity: 0.3 !important;
                        }
                    }
                }
            }
        }
    }

    .info-container {
        padding: 0 10px;
        margin-top: 10px;
        border: 1px solid #4b515c;
        .label-normal-wrapper {
            width: 150px !important;
        }
    }

    .input-enabled:hover:not(.ant-input-disabled) {
        // border-color: #4b515c !important;
    }

    ._Table_ {
        .ant-table-content {
            min-height: 260 / @px-unit;
        }
    }
}

._RouteTable_ {
    width: 100%;
    .table-header {
        user-select: none;
    }
    .delete-icon {
        cursor: pointer;
        &:hover {
            svg {
                & + {
                    path:first-child {
                        fill: #f00 !important;
                    }
                }
            }
        }
    }
}

.netCardMenber_checkbox .ant-checkbox-wrapper{
    margin-left: 0;
    margin-right: 6 / @px-unit;
}
.netCardMenber_checkbox .ant-checkbox-wrapper:last-child{
    margin-right: 0;
}
._UPnP_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-top: inherit; //为了不eslint告警写一个
    //`_${_name_}_`
}

._WIFI_ {
    .header-btn-group {
        display: flex;
        justify-content: space-between;
        .btn {
            align-self: center;
        }
    }
    .wifi-info-container {
        padding: 0 20px;
        margin-top: 10px;
        border: 1px solid rgb(75, 81, 92);

        .boss {
            color: #fff;
            font-weight: bold;
        }

        p {
            margin-bottom: 5px;
        }
    }
    .table-body {
        margin: 0;
        text-align: center;
    }
    .ant-table-body {
        min-height: 150px;
    }
    .wifi {
        & + {
            path:second-child {
                fill: @iconActiveWifi; // 有信号的颜色
            }
        }
        &.s_05 {
            // 满格信号使用绿色
            .svgOut(@iconActiveWifi);
        }
    }
}


._LeCheng_ {
    position: relative;
    .tip {
        width: 60rem;
    }
    .qrcodes {
        display: flex;
        width: 800px;
        height: 350px;
        margin-top: 30px;
        margin-left: 20px;
        .qrbox {
            display: flex;
            width: 300px;
            height: 250px;
            flex-direction: column;
            justify-content: space-between;
            .qrImg {
                width: 215px;
                height: 215px;
                padding: 5px;
                background-color: @QRCodeBg;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            p {
                margin: 0;
                font-size: 14px;
                font-weight: 400;
                color: .color_N(@pageBodyBg)[];
            }
        }
    }
}

.modal-button {
    button {
        width: 100%;
    }
}




._Dsiplay_ {
    .page-swrap{
        width: 100%;
        display: flex;
        .ant-divider-horizontal {
            margin: 5 / @px-unit;
            width:85%;
            min-width:85%;
        }
        .main-screen-swrap{
            width: 50%;
        }
        .extra-screen-swrap{
            width: 50%;
        }
    }
}


._DisplayOriginalScaleWin_ {
    height: calc(100vh - 50vh);
    overflow-y:scroll;
    .check-box-group-container{
        width: 100% !important;
    }
    .check-box-group-wrapped{
        width: 100% !important;
    }
    .selectContainer{
        width: 100% !important;
        .selectWrapped{
            width: 100% !important; 
        }
    }
    .checkBoxRow{
        width: 100%;
        display: flex;
        justify-content: space-between;
        .checkBoxItem-all{
            display: flex;
            align-items: center;
        }
        .checkBoxItem{
            width: 50%;
            .label-normal-container {
                display: flex;
            }
        }
        .checkBoxItem-behind{
            width: 100%!important;
        }
        .rightItem{
            display: flex;
            justify-content: center;
        }
    }
}




._Dsiplay_ {
    .Main8KTip{
        .label-normal  {
            visibility: hidden;
        }
        .labelText-wrapper {
            overflow: visible;
        }  
    }
    .IntelRule{
        display: flex;
        >div:nth-of-type(1){
            margin-left: -8/@px-unit;
        }
        >div:nth-of-type(2){
            margin-left: 33/@px-unit; 
        }
    }
}

@groupChBox: 23 / @px-unit;
._MainScreen_, ._ExtraScreen_ {
    ._ChnSplit_ {
        clear: both;
        .ant-tag {
            margin: 1px;
            padding: 0;
            text-align: center;
            width: @groupChBox;
            height: @groupChBox;
            line-height: @groupChBox;
            color: @buttonNormalTextN;
            margin: 5 / @px-unit;
            background-color: @buttonNormalBgN;
            border-color: @buttonNormalBorderN;
        }
        .operationBtn {
            margin-right: 10px;
        }
        ._Table_{
            .table_td_chGroup{
                .tr_chGroup{
                    // 通道居左
                    text-align: left;
                    display: inline-block;
                }
            }
        }
        .ant-divider-vertical{
            top: -8 / @px-unit;
        }
    }
}
//操作按钮居中
.operationBtn_Div{
    display: inline-block;
    align-items: center;
}
.opraBtn{
    padding: 0 !important;
}


._RegionOfInterest_ {
    .form-head {
        display: flex;
        .form-head-right {
            margin-left: 30/@px-unit;
            margin-bottom: 20/@px-unit;
        }
    }
    .roi_ocx {
        // 以左上角为原点缩小
        transform-origin: left top;
    }
}

._SFSConfig_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-top: inherit; //为了不eslint告警写一个
    .sfs_ocx {
        width: 450 / @px-unit; //AI插件组件宽度
        height: 337 / @px-unit; //AI插件组件宽度
        background-color: @preview_center_plugin_Bg;
    }
    .colorBox(@posCheckbox);

    //覆盖antd样式
    .ant-checkbox + span {
        padding: 0;
    }
}

.ChannelList-modal {
    height: 800/@px-unit;
    .ant-modal-body {
        max-height: 600/@px-unit;
        overflow-y: auto;
        .gutter-row {
            padding: 0 10/@px-unit;
            margin-right: 10/@px-unit;
        }
    }
}

._VideoFusion_windows {
    display: flex;
    width: 1000 / @px-unit;
    flex-wrap: wrap;
    > .label-div-Container {
        margin-right: 50 / @px-unit;
    }
}


._BottomPanel_bottom_select {
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .bottom_select_left {
        width: 180 / @px-unit;
        height: 50px;
        line-height: 50px;
        padding: 0 / @px-unit 16 / @px-unit;
    }
    .bottom_select_center {
        flex-grow: 1;
        height: 50px;
        line-height: 50px;
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
    }
    .bottom_select_right {
        width: 260 / @px-unit;
        height: 50px;
        line-height: 50px;
        padding: 16 / @px-unit;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .bottom_select_slider {
        width: 168 / @px-unit;
    }
    .mask_center {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 2;
        // background-color: @SideMenuArrowSvgA;
        // opacity: 0.1;
    }
    .mask_center_show {
        display: block;
    }
    .mask_center_hide {
        display: none;
    }
}


._BottomPanel_ {
    // height: 192px;
    display: flex;