}

            .progress_red {
                background: @ai_progress_red;
            }

            .progress_orange {
                background: @ai_progress_orange;
            }

            .progress_blue {
                background: @ai_progress_blue;
            }

            .progress_label {
                position: absolute;
                right: 0;
                top: -4/@px-unit;
            }
        }

        .picData_smallImgContent {
            width: 268/@px-unit;
            height: 112/@px-unit;
            margin-bottom: 8/@px-unit;

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

        .picData_imgAndInfo {
            overflow: hidden;
            margin: 35/@px-unit 0px 22/@px-unit 0px;
        }

        .picData_smallImgContent {
            width: 132/@px-unit;
            float: left;
        }

        .picData_info {
            display: inline-block;

            .label-normal-container {
                height: 18/@px-unit;
                padding: 0px !important;
            }

            color: @buttonNormalTextN;
        }


        .picData_labelCheck {
            background: @ai_labelCheck_bg;
            height: 32/@px-unit;
            line-height: 32/@px-unit;
            padding: 5/@px-unit 10/@px-unit;
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            .ch_number {
                height: 20/@px-unit;
                line-height: 20/@px-unit ;
                color: @buttonNormalTextN;
            }

            .label-normal-container {
                height: 20/@px-unit;
                padding: 0px !important;
                color: @buttonNormalTextN;
            }

            .ant-checkbox {
                top: 0px;
            }
        }

    }

    /* 人体,非机动车搜索那的 */
    .human_detect {
        .compliantIcon{
            font-size: 150/@px-unit;
            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;
}
.label-normal-behind {
    .label-normal-container {
        padding-top: 0px !important;
    }
}

._OperateMonitorSearch_ {
    &line {
        display: flex;
    }   
}
.label-normal-behind {
    .label-normal-container {
        padding-top: 0px !important;
    }
}



.search_type {
    padding-left: 30/@px-unit;
}

.search_button {
    float: right;
    margin-top: -50/@px-unit;
}

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

._SoundMonitor_ {
    padding: 1rem;
    padding-top: 2rem;
    .search_type {
        padding-left: 30/@px-unit;
    }
    
    .search_button {
        float: right;
        margin-top: -50/@px-unit;
    }
    ._Table_ .ant-table-body {
        min-height: 380 / @px-unit;
    } 
}

.label-normal-behind {
    .label-normal-container {
        padding-top: 0px !important;
    }
}
.plateNoClass {
    padding-left: 0 !important;
}


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


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

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


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


._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;
    }
}


._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: #fff;
                justify-content: space-between;
                background-color: #393C41 !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;
}


._CompliantInfoModal_ {
    .ant-tabs-tab-active {
        .label-normal-container  {
            .label-normal  {
                color: @current;
            }
        }
    }
    &left {
        display: flex;
        align-items: center;
        height: 32/@px-unit;
        .label-div-Container{
            margin-left: 20/@px-unit;
        }
        span {
            color: @pageTextN;
        }
    }
    ._WorkClothes_ {
        .left-tip {
            visibility: hidden;
        }
        .warning-tip {
            color: @errorColor !important;
        }
    } 
    .ant-checkbox-wrapper + .ant-checkbox-wrapper {
        margin-left: 0px !important
    }

}



._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;
    }
}


._SMDConfig_ {
    .ant-divider-horizontal {
        margin: 12 / @px-unit 0;
    }
}



._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;
}



@IEBrowerColor: @current;
._AlarmHub_ {
    width: 100%;
    ._AllDevice_ {
        .all-device-upper {
            display: flex;
            justify-content: space-between;
            .upper-left {
                display: flex;
                align-items: center;
                line-height: 48/@px-unit;
            }
            .upper-right {
                display: flex;
                align-items: center;
            }
        }
        .all-device-table {
            .table-header-bar {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .header-left {
                    flex-grow: 1;
                }
                .header-right {
                    flex-shrink: 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;
                        }
                    }
                }
            }
            .table-bottom-bar1 {
                display: flex;
                justify-content: space-between;
                line-height: 32/@px-unit;
                // padding: 8/@px-unit 0;
            }

            .table-bottom-bar2 {
                display: flex;
                line-height: 32/@px-unit;
                // padding: 8/@px-unit 0;
            }
        }
    }
    ._AddedDevice_ {
        .table-header-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 64/@px-unit;
            .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;
                    }
                }
            }
        }
        .blueIEBrowser {
            .svgOut(@IEBrowerColor);
        }
        .table-bottom-bar {
            display: flex;
            line-height: 48/@px-unit;
            // padding: 8/@px-unit 0;
        }
        .manage-table-icon-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        ._Table_ .ant-table-body {
            min-height: 180 / @px-unit;
        }
    }

    .remoteDevice-table {
        ._Table_ .ant-table-body {
            min-height: 180 / @px-unit;
        } 
    }
    .grid-successIcon {
        .svgOut(@successIcon);
    }
    .grid-wifiIcon {
        .svgOut(@current)
    }
    .grid-errorIcon {
        .svgOut(@errorIcon)
    }
    .grid-unInitIcon {
        .svgOut(@warningColor)
    }
    .manage-grid-unInitIcon {
        .svgOut(@warningColor);
        .svgFont(20);
    }
    .manage-grid-errorIcon {
        .svgOut(@errorIcon);
        .svgFont(20);
    }
    .manage-grid-successIcon {
        .svgOut(@successIcon);
        .svgFont(20);
    }
    .grid-deleteIcon {
        .svgHover(@errorColor)
    }
    .grid-previewIcon {
        cursor: pointer;
    }
    .table-hidden {
        height: 0;
        overflow: hidden;
    }
}
.deviceTip.ant-tooltip {
    max-width: 400 / @px-unit !important;
}
.__ModifyDeviceForm__ {
    .label-radio-wrapper {
        .ant-radio-wrapper {
            width: 150/@px-unit;
        }
    }
    ._Table_ .ant-table-body {
        min-height: 160 / @px-unit;
    } 
}
.addDevice-modal {
    .ant-form-item-has-error {
        .ant-input {
            border-color: @errorColor;
        }
    }
    .modify-labelInputNumber {
        .ant-input-number {
            width: 100%;
        }
    }
}
._ZDChannelGroupModal_ {
    display: flex;
    flex-wrap: wrap;
    .checkbox {
        display: inline-block;
    }
    .label {
        display: inline-block;
        height: 40px;
        line-height: 40px;
    }
    .chn_btn.ant-btn {
        color: @buttonNormalTextN;
        background-color: transparent;
        width: 30px;
        height: 30px;
        padding: 0;
        margin: 5px;
        text-align: center;
        &.selected {
            color: @buttonNormalTextA;
            border-color: @formInputBgA;
            &:focus {
                color: @buttonNormalTextA;
                border-color: @formInputBgA;
            }
        }
        &.allbtn {
            font-size: 10px;
        }
        &[disabled] {
            opacity: .5;
            &:hover,
            &:active,
            &.active{
                opacity: .5;
            }
        
        }
    }

}

._RemoteDevInit_ {
    .ant-modal-body {
        height: 600/@px-unit;
    }
    .step1-footer {
        display: flex;
        flex-direction: row-reverse;
    }
    .step2-footer {
        display: flex;
        justify-content: space-between;
        .step2-footer-right {
            display: flex;
        }
    }
    .step3-footer {
        display: flex;
        justify-content: space-between;
        .step3-footer-right {
            display: flex;
        }
    }
    .step4-footer {
        display: flex;
        flex-direction: row-reverse;
    }
    .initSuccess {
        color: green;
    }
    .initFailed {
        color: red;
    }
    .label-radio-wrapper {
        .ant-radio-wrapper {
            width: 150/@px-unit;
        }
    }
    ._Table_ .ant-table-body {
        min-height: 200 / @px-unit;
    } 
}

.__useModeErrorModal__ {
    .ant-modal-body {
        height: 260/@px-unit;
    }
}
.remote-init-failed-table {
    ._Table_ .ant-table-body {
        min-height: 200 / @px-unit;
    } 
}


._AlarmHubSearch_ {
    .pageLine {
        float: none;
    }
    &detailButton {
        display: flex;
        justify-content: space-between;
    }
    &searchLine {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    &backupLine {
        display: flex;
        flex-direction: row-reverse;
    }
}



._HubDevice_ {

    .success_icon {
        .svgOut(@successIcon);
    }

    .error_icon {
        .svgOut(@errorIcon);
    }

    .setting-icon {
        cursor: pointer;
    }
}


.onlineIcon {
    .svgOut(@successColor) !important;
    .svgFont(20) !important;
}
.offlineIcon {
    .svgOut(@errorColor) !important;
    .svgFont(20) !important;
}
.ant-modal-footer {
    padding: 5/@px-unit 16/@px-unit 50/@px-unit 16/@px-unit;
    .label-normal-container {
        float: right;
        margin-left: 30/@px-unit;
    }
}

.content-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    .pagination-left, .pagination-right {
        display: flex;
        align-items: center;
        width: 50/@px-unit;
    }
    .header-titles {
        width: auto;
        max-width: 110/@px-unit;
        margin-right: 30 / @px-unit;
        .title-wrapper {
            display: flex;
            flex-direction: column;
            padding: 8/@px-unit 0;
            .header-title-item {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                line-height: 30/@px-unit;
            }
            .header-title-first {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                line-height: 32/@px-unit;
            }
        }
    }
    .channel-radios {
        width: auto;
        .sdd-radioGroup-container{
            height: auto;
        }
        .radio-group-wrapper {
            display: flex;
            .channel-radio-group {
                display: flex;
                flex-direction: column;
                .channel-one-radio-group {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    .ant-radio-group {
                        margin-top: 11/@px-unit;
                    }
                    .ant-radio-wrapper {
                        height: 30/@px-unit !important;
                        line-height: 16/@px-unit !important;
                    }
                }
            }    
        }    
    }    
}


.search_type {
    padding-left: 30 / @px-unit;
}

.search_button {
    float: right;
    margin-top: -50 / @px-unit;
}

.IOTSearch_fail {
    color: @errorColor;
}

.IOTSearch_Table {
    ._Table_ .ant-table-body {
        min-height: 450 / @px-unit;
    }
}
.IOTSearch_tablebottom {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-top: 10 / @px-unit;
    .pageLine {
        margin-right: 10 / @px-unit;
        margin-top: 0;
    }
    & > .label-div-Container > .label-normal-container {
        padding: 0 !important;
        & > .label-normal-wrapper {
            line-height: normal;
        }
    }
}


.echart_lengend_color{
    color: @pageTextN;
}
.echart_line{
    color: @pageBorderN;
}

._RealDisplay_{
    ._Table_ .ant-table-body{
        min-height: 240/@px-unit;
        .fail{
            color: @errorColor;
        }
        .ant-table-cell{
            word-break:break-all;
        }
    }
}


._TemperHumidity_wrapper{
    width:100%;
    padding:20/@px-unit;
     .ant-table-cell{
        word-break:break-all;
    }
}


/* 由于登录页面 输入框组件高度是样式控制， 宽度由 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-position-x: center;
            background-image: url('/custom_logo/web_logo.png');
        }
        
    }
}
.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: @formInputTextN;
        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-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector{
        box-shadow: none;
    }
    .ant-select-selector{
        border-color: @formInputBoderN;
    }    
    .ant-select:not(.ant-select-disabled):hover .ant-select-selector{
        border-color: @formInputBoderN;
    }
    .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: @formInputBoderN;
        svg{
            fill:@formInputSvgN;
        }
    }

    .ant-input-affix-wrapper,
    .label-normal-wrapper {
        display: flex;
        height: 40 / @px-unit;
        background-color: @formInputBgN;
        border-color: @formInputBoderN;
        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;
        margin-left: calc(50% - 1.69*@px-unit);
        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;
    }
}


._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_{
    
}


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


._IPSpeakerCfgModal_{
    
}
._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: #fff;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            p {
                margin: 0;
                font-size: 14px;
                font-weight: 400;
                color: rgb(166, 170, 178);
            }
        }
    }
}

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

._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: #fff;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            p {
                margin: 0;
                font-size: 14px;
                font-weight: 400;
                color: rgb(166, 170, 178);
            }
        }
    }
    .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: #fff;
            }
            p {
                margin: 0;
                font-size: 14px;
                font-weight: 400;
                color: rgb(166, 170, 178);
            }
        }
    }
}

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