@Length340: 340/@px-unit;
@Length300: 300/@px-unit;
._PreviewConfigTabs_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    background-color: @contentBgColorNo15;
    width: 50%;
    // .m-pl-12;
    height: @Length340;
    .ant-tabs-content-holder{
        height: @Length300;
        max-height: @Length300;
        overflow-y: auto;
    }
    .ant-tabs-nav {
        margin: 0;
        background-color: rgba(0, 0, 0, 0.03);
    }
    .ant-tabs-tab {
        margin-left: 16/@px-unit;
    }
    &.ItsePreview{
        &>.ant-tabs{
            width:100%
        }
    }
}



._InoutBaseConfig_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit; //为了不eslint告警写一个
    .leftFloat {
        float: left;
    }
}



._InoutGeneralConfig_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit; //为了不eslint告警写一个
    .ButtonGroup-space {
        .m-width-80;
        .m-text-ellipsis;
        margin-right: 10/@px-unit;
    }
    
    .important-tip {
        color: @errorColorNo17;
    }
}


._InoutLightConfig_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit; //为了不eslint告警写一个
    .leftFloat {
        float: left;
        // margin-right: 20/@px-unit;
    }
}


._InoutLineConfig_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit; //为了不eslint告警写一个
    
    .step-button-container {
        display: flex;
        justify-content: flex-end;
        padding-top: 2px;
    }
    .step-button {
        display: flex;
        justify-content: center;
        border: 1/@px-unit solid @listBorderColorNo8;
        line-height: 30/@px-unit;
    }
    .step-button-selected {
        border-color: @btnNormalColorNo1;
        color: @btnNormalColorNo1;
    }
}


._InoutPeripheralConfig_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit; //为了不eslint告警写一个
}


._LensAdjustment_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    // padding-left: 20/@px-unit; //为了不eslint告警写一个
    
    .step-button-container {
        display: flex;
        justify-content: flex-end;
        padding-top: 2px;
    }
    .step-button {
        display: flex;
        justify-content: center;
        border: 1/@px-unit solid @listBorderColorNo8;
        line-height: 30/@px-unit;
    }
    .step-button-selected {
        border-color: @btnNormalColorNo1;
        color: @btnNormalColorNo1;
    }
}



._PtzComp_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit; //为了不eslint告警写一个
    .label-div-Container {
        .label-normal-container .label-normal-wrapper {
            .ant-input-number {
                width: 100%;
            }
        }
    }
    .left-part{
        float: left;
        width: 400/@px-unit;
        margin-right: 20/@px-unit;
    }
    .right-part{
        float: left;
    }
}


._RelatedComposition_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit; //为了不eslint告警写一个
    .flex-content{
        display: flex;
        align-items: center;
    }

    .add-scheme-button{
        // width: 108 /@px-unit;
    }
    .add-import-content {
        justify-content: center;
        border-top:1px solid @dividerColorNo9;
        line-height: 48/@px-unit;
        cursor: pointer;
    }
    .related-box {
        border: 1/@px-unit solid @dividerColorNo9;
        margin-bottom: 10/@px-unit;
        .sub-title{
            padding: 6/@px-unit 14/@px-unit;
            border-bottom: 1/@px-unit solid @dividerColorNo9;
            display: flex; 
            align-items: center;
            height: 48/@px-unit;
            background-color: @panelBackgroundColor;
        }
        .title {
            font-weight: bold;
            width: 100%;
        }
        .container {
            padding: 14/@px-unit 32/@px-unit 0;
            width: 100%;
        }
        .sub-container {
            padding: 14/@px-unit;
            width: 100%;
            overflow-y: auto;
            max-height: 172/@px-unit;
            position: relative;
        }
    }
// 关联合成气泡样式
.ant-popover-inner{
    background-color: @firstNavBgColorNo12;
    color: @contentBgColorNo15;
}
.ant-popover-arrow-content{
    --antd-arrow-background-color: @firstNavBgColorNo12;
}
.ant-popover-inner-content{
    background-color: @firstNavBgColorNo12;
    color: @contentBgColorNo15;
    .related-pop-content{
        max-width: 520 /@px-unit;
    }
}
span.ant-radio + * {
    display: inline-flex;
}
}
.schemas-advance-modal{
    .ant-modal-title{
        font-weight: bolder;
    }
    .flex-content{
        display: flex;
        align-items: center;
    }
}



._RemoteDevice_ {
    background: @baseColor;
    padding-left: 20/@px-unit;
    padding-top: 20 / @px-unit;
    padding-right: 10 / @px-unit;
    width: 100%;
    min-height: 100%;

    .label-div-Container {
        .label-normal-container {
            padding-top: 0 !important;
            .label-normal-wrapper .ant-input-number {
                width: 100%;
            }
        }
    }
}


._DeviceSearch_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit; //为了不eslint告警写一个
    width: 100%;
    .remote-left {
        &:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }
    }
    .remote-label {
        .label-div-Container {
            float: left !important;
        }
    }
    .remote-label-ml {
        .label-div-Container {
            float: left !important;
            margin-left: 10/@px-unit;
        }
    }
    .fn-red {
        color: red;
    }
    .fn-green {
        color: green;
    }
}


._RemoteEquipment_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit; //为了不eslint告警写一个
}



._RemoteEquipmentCfg_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit; //为了不eslint告警写一个
    width: 100%;
    .remote {
        &:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }
        .label-div-Container {
            float: left !important;
        }
    }
    .badge-item-state{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: @baseColor;
        border-radius: 12px;
        background-color:gray;
        position: relative;
        left: 110/@px-unit;
        height: 20/@px-unit;
        width: 42/@px-unit;

    }
    .badge-item-state-online {
        background-color: @successColorNo19;
    }
}


._RemoteUpgrade_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit; //为了不eslint告警写一个
    width: 100%;
    .upgrade-left {
        &:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }
        .label-div-Container {
            float: left !important;
        }
    }
    .upgrade-ml {
        .label-div-Container:not(:first-child) {
            margin-left: 10/@px-unit;
        }
    }
}


._RFIDConfigSearch_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit; //为了不eslint告警写一个
    width: 100%;
    .flex-content{
        display: inline-flex;
        align-items: center;
    }
    .search-divider{
        margin: 10 / @px-unit 20 / @px-unit 20 / @px-unit 0;
    }
    .rfid-flow-ul::after {
        content: '';
        display: block;
        visibility: hidden;
        clear: both;
    }
    .rfid-flow-li {
        padding: 2px 0;
        float: left;
        width: 12.5%;
        line-height: 48 / @px-unit;
    }
    .rfid-detail-container{
        height: 250 / @px-unit;
        overflow-y: auto;
    }
}


._RFIDConfigStatic_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit; //为了不eslint告警写一个
    width: 100%;
    .flex-content{
        display: inline-flex;
        align-items: center;
    }
    .rfid-flow-ul::after {
        content: '';
        display: block;
        visibility: hidden;
        clear: both;
    }
    .rfid-flow-li {
        padding: 2px 0;
        float: left;
        width: 12.5%;
        line-height: 48 / @px-unit;
    }
    .rfid-detail-container{
        height: 250 / @px-unit;
        overflow-y: auto;
    }
}



.m-highlight-text {
    color: #272727;
}
.show-text-normal {
    word-break: normal;
    word-wrap: normal;
}

/** 安全状态页面样式覆盖 */
._SAFESecurityStatus_ {
    .show-text-normal();
    ._SAFESecurityStatus_title {
        background-color: unset;
    }
    ._SAFESecurityStatus_detect {
        height: 32/@px-unit;
        width: 100/@px-unit;
    }
    .item-icon-loading {
        &::after {
            border-bottom-color: #468429;
        }
    }
}

/** 系统服务 */
._SAFESystemService_ {
    .show-text-normal();
}

.safeopr-table-normal {
    .ant-table-placeholder{
        display: none;
    }
}
// .safeopr-configBar {
//     left: 275px;
//     bottom: 20px;
//     .right {
//         float: left;
//     }
// }

.safeopr-configBar {
    display: flex;
    left: 275px;
    bottom: 20px;
    .right {
        display: flex;
        order: 1;
        .footer-refresh-button {
            order: 2;
        }
        .footer-confirm-button {
            order: 1;
        }
    }
    .left {
        order: 2;
    }
}

.FireWall-tab {
    a {
        color: #a6aab2;
        &:hover {
            color: #009cff;
        }
    }
}

.Loading-wapper {
    .ant-spin-text {
        position: initial;
        transform: initial;
        white-space: nowrap;
    }
}

._SAFEAttackDefense_ {
    .show-text-normal();
    ._publicAccountLock_ {
        .m-highlight-text {
            color: #272727;
        }
    }
}

._SAFESafetyWarning_ {
    .show-text-normal();
    padding-left: 20/@px-unit;
}

._SAFEVideoEncryption_ {
    .show-text-normal();
    padding-left: 10/@px-unit;
    ._VideoTransmission_ {
        padding-top: 20/@px-unit;
        .safeopr-configBar {
            display: flex;
            position: relative;
            top: 10px;
            left: 0;
        }
    }
}

._SAFECACertificate_ {
    .show-text-normal();
    width: 100%;
    .Cert {
        .show-text-normal();
    }
}

.ant-modal-body {
    .install-cert-tips {
        .labelText {
            white-space: normal;
        }
    }
    .show-text-normal();
}

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


._AlarmRecordSearch_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit; //为了不eslint告警写一个
    ._AlarmRecordSearchComponent_ {
        .m-layout-content;
    }
    .flex-content{
        display: flex;
        align-items: center;
    }
    .table-action-bar{
        line-height: 40 / @font-size-normal;
        height: 40 / @font-size-normal;
        .left-bars{
            line-height: 40 / @font-size-normal;
            height: 40 / @font-size-normal;
            .button-groups{
                line-height: 40 / @font-size-normal;
                height: 40 / @font-size-normal;
            }
        }
    }
    .blue-icon-color {
        color: @btnNormalColorNo1;
    }
    // label样式
    .label-div-Container {
        margin-right: 50px !important;
    }
    // table样式
    .ant-table {
        .ant-table-cell {
            word-break: normal;
            word-wrap: normal;
        }
    }
}



.overflow_wrap{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}
._DataSearchUnified_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    // padding-left: 20/@px-unit; //为了不eslint告警写一个
    width: 200%;
    height: calc(100% - 32px);
    margin: 16px;
    min-height: 500 /@px-unit;
    transition: all 0.3s;
    transform: translate(0, 0, 0);
    -ms-transform: translate(0, 0);
    &.toRight {
        //margin-left: -100%;
        transform: translate3d(-50%, 0, 0);
        -ms-transform: translate(-50%, 0);
    }
    .search-play, .search-list {
        width: 50%;
        height: 100%;
        float: left;
        > div {
            height: 100%;
            background: @baseColor;
        }
    }

    .search-list{
        .operation {
            float: left;
            width: 230px;
            height: 100%;
            border-right: solid 1/@px-unit @grayBlackBorder;  
            overflow-x: hidden;
            .title{
                padding-left: 10px;
                line-height: 40px;
                height: 40px;
                font-weight: bold;
                border-bottom: 1px solid @listBorderColorNo8;
            }
            .content{
                padding: 0 10px;
            }
            .condition-btn{
                width: 200px;
                margin: 10px 0;
                border: solid 1/@px-unit @grayBlackBorder;
                border-radius: 2 /@px-unit;
            }
            .advancedOptions{
                border: none;
            }
            .ant-checkbox-wrapper + span {
                padding: 0 8px;
                color: @formContentColorNo6;
            }
        }
        .result {
            position: relative;
            float: left;
            width: calc(100% - 230px);
            height: 100%;
            overflow-x: hidden;
            // .result-list{
            //     min-height: 76vh;
            // }
            .result-list {
                width: 100%;
                height: calc(100% - 140px);
                overflow-y: auto;
                .ant-spin {
                    position: absolute;
                    left:  50%;
                    top: 50%;
                    margin-left: -10px;
                    margin-top: -12.5px;
                }
                .result-item {
                    position: relative;
                    margin-left: 16px;
                    margin-top: 16px;
                    float: left;
                    width: calc(14% - 20px);
                    // min-width: 128px;
                    .imgbox {
                        position: relative;
                        display: inline-block;
                        width: 100%;
                        min-height: 50px;
                        box-sizing: border-box;
                        img {
                            width: 100%;
                        }
                        .playtime {
                            position: absolute;
                            right: 10px;
                            bottom: 6px;
                            font-size: 12px;
                            color: #fff;
                            label {
                                vertical-align: 2px;
                            }
                        }
                    }
                    .imgbox.selected {
                        outline: 2px solid @linkColorNo20;
                    }
                    .type {
                        font-size: 0.8rem;
                        height: 21px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    .time {
                        color: @disableColorNo7;
                        font-size: 0.3rem;
                    }
                    .result-item-checkbox {
                        position: absolute;
                        left: 6px;
                        top: 3px;
                    }
                    .ant-checkbox-wrapper + span {
                        padding-right: 0px;
                        padding-left: 0px;
                    }
                    .lock {
                        position: absolute;
                        right: 10px;
                        top: 10px;
                        color: @warnColorNo18;
                        svg {
                            width: 16px;
                            height: 16px;
                        }
                    }
                    .playbtn {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        margin-top: -51px;
                        margin-left: -35px;
                        width: 70px;
                        height: 70px;
                        cursor: pointer;
                        span {
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            margin-left: -15px;
                            margin-top: -15px;
                            display: inline-block;
                            width: 30px;
                            height: 30px;
                            padding: 2px 0 0 4px;
                            background: @opaqueBalck;
                            border-radius: 50%;
                            line-height: 30px;
                            font-size: 14px;
                            text-align: center;
                            color: #fff;
                        }
                        // svg {
                        //     width: 14px;
                        //     height: 14px;
                        // }
                    }
    
                }
            }
        }
        .title {
            padding-left: 10px;
            line-height: 40px;
            border-bottom: 1px solid @listBorderColorNo8;
        }
    }
    .search-play{
        .play-list {
            width: 240px;
            height: 100%;
            line-height: 30px;
            float: left;
            .play-list-content {
                height: calc(100% - 40px);
                overflow-y: auto;
                > div {
                    height: 60px;
                    padding-left: 16px;
                    font-size: 13px;
                    cursor: pointer;
                    &:first-child {
                        margin-top: 10px;
                    }
                    &.active, &:hover {
                        background: @secondNavHoverColorNo14;
                        color: @btnPressedColorNo3;
                    }
                    .time {
                        font-size: 12px;
                        color: #8f8f8f;
                        margin-left: 12px;
                        margin-top: -5px;
                    }
                }
            }
           
            
        }
        .play-list-title {
            padding-left: 10px;
            line-height: 40px;
            height: 40px;
            color: @linkColorNo20;
            border-bottom: 1px solid @listBorderColorNo8;
        }
        .play-content{
            width: calc(100% - 240px);
            float: left;
            height: 100%;
            .playBack-video {
                height: calc(100% - 80px);
                min-height: calc(77vh - 80px);
                background:@btnHoverColorNo2;
                text-align: center;
                padding-top: 20%;
            }
            .touchbar {
                position: relative;
                height: 40px;
                line-height: 30px;
                padding:5px 10px;
                background: linear-gradient(#f8f8f6, #cccdcf);
                .touchbar-left {
                    span {
                        margin-left: 15px;
                    }
                }
                .touchbar-center {
                    text-align: center;
                    span {
                        margin-left:25px;
                    }
                    background: rgba(0, 0, 0, 0.1);
                    border-radius: 4px;
                }
                .touchbar-right {
                    text-align: right;
                    span {
                        margin-right: 15px;
                    }
                }
                .voice {
                    display: inline-block;
                    width: 110px;
                    margin: 0;
                    margin-left: 15px;
                    margin-bottom: 1px;
                }
                .ant-slider-track {
                    background: @linkColorNo20;
                }
                .touchbar-icon {
                    vertical-align: -0.3em;
                }
                .anticon{
                    margin-right: 16px;
                    font-size: 20px;
                    &:hover{
                        color: @btnNormalColorNo1;
                    }
                }
            }
        }
    }
  

    ._Table_ {
        // .table-action-bar{
        //     line-height: 32 / @font-size-normal;
        //     height: 32 / @font-size-normal;
        //     .left-bars{
        //         line-height: 32 / @font-size-normal;
        //         height: 32 / @font-size-normal;
        //         .button-groups{
        //             line-height: 32 / @font-size-normal;
        //             height: 32 / @font-size-normal;
        //         }
        //     }
        // }
    }

    .table-width {
        width: 564 / @px-unit;
    }
    .video-plugin{
        width: 1018 /  @px-unit;
        height: 739 / @px-unit;
        background-color: #000;
        display: inline-block;
    }

    .checkBox {
        .ant-checkbox-wrapper.sdd-checked-normal{
            width: 70 / @font-size-normal !important;
        }
    }
    .ant-pagination {
        float: right;
        margin-right: 20px;
    }

    .fn-center {
        margin-top: 200px;
    }
    
}


._DataSearchUnifiedRecord_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit; //为了不eslint告警写一个
    width: 100%;
    .flex-content {
        display: flex;
        align-items: center;
    }
    .flex-video {
        display: flex;
    }
    .table-button-bar-list {
        display: inline-flex;
        align-items: center;
    }
    // ._Table_ .table-action-bar .left-bars .button-groups {
    //     line-height: 40 / @font-size-normal;
    //     height: 40 / @font-size-normal;
    // }
    .table-width {
        width: 564 / @px-unit;
    }
    .video-plugin{
        width: 1018 /  @px-unit;
        height: 739 / @px-unit;
        background-color: #000;
        display: inline-block;
    }
}

._DataSearchUnifiedVehicle_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    // padding-left: 20 / @px-unit; //为了不eslint告警写一个
    padding: 25px;
    .result-content{
        margin-top: 440px;
    }
    .oneline{
        .label-div-Container{
            display: inline-block;
            vertical-align: middle;
        }
     
    }
    .flex-content {
        display: flex;
        align-items: center;
        margin-top: 450px;
    }

    .show-content-button{
        position: absolute;
        width: 60/ @px-unit;
        height: 16/ @px-unit;
        background-color: #666666;
        border-radius: 0 0 4/ @px-unit 4/ @px-unit;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    .playStop-content{
        position: fixed;
        bottom: 32/ @px-unit;
        padding-left: 10/ @px-unit;
        span {
            margin-left: 25 / @px-unit;
        }
    }

    .show-content-button-bottom-div{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .show-content-button-top{
        top: 0;
    }

    .show-content-button-bottom{
        border-radius: 4/ @px-unit 4/ @px-unit 0 0;
        bottom: 0;
    }

    .advance-text {
        cursor: pointer;
        color: @btnNormalColorNo1;
    }
  
  
    .video-record{
        height: 440 / @px-unit;
        position: fixed;
        top: 100 / @px-unit;
        display: inline-flex;
    }
    .video-plugin {
        width: 1600 /  @px-unit;
        height: 440 / @px-unit;
        background-color: #000;
        display: inline-block;
    }
    .video-image-container{
        position: relative;
        // display: inline-flex;
    }
    .video-image{
        width: 791 /  @px-unit;
        height: 440 / @px-unit;
    }
    .video-image-plate{
        height: 88 / @px-unit;
        background-color: @imagePlate;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .video-image-number{
        width: 150 /  @px-unit;
        height: 44 / @px-unit;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
    }
    .Blue{
        background-color: @bluePlate;
        color: @contentBgColorNo15;
    }
    .Yellow{
        background-color: @yellowPlate;
        color: @opaqueBalck;
    }
    .White{
        background-color: @contentBgColorNo15;
        color: @opaqueBalck;
    }
    .Black{
        background-color: @opaqueBalck;
        color: @contentBgColorNo15;
    }
    .ShadowGreen{
        background: linear-gradient(to bottom, #fff, #00ff00);
        color: @opaqueBalck;
    }
    .YellowGreen{
        background: none;
        color: @opaqueBalck;
    }
    .Cyan{
        background: @CyanPlate;
        color: @contentBgColorNo15;
    }
    .Green{
        background: @GreenPlate;
        color: @opaqueBalck;
    }
    .itse-ygplate {
        width: 150 /  @px-unit;
        height: 44 / @px-unit;
        background: #0f0;
        top: 12 / @px-unit;
        bottom: 0;
        position: absolute;
     }
     .itse-ygplate div {
         width:28%;
         height:100%;
         background:#ff0;
         float:left;
     }
     .plate-none{
        display:none
     }
}
.advance-option-modal {
    .flex-content {
        display: flex;
        align-items: center;
    }
    .ant-modal-body {
        padding: 24 / @font-size-normal 0;
    }
    .padding-content {
        padding: 0 24 / @font-size-normal;
    }
    .advance-divider {
        margin: 10 / @font-size-normal 0 0 0;
    }
    .advance-left-title {
        width: 140 / @font-size-normal;
        border-right: 1px solid @dividerColorNo9;
        cursor: pointer;
        user-select: none;
    }
    .advance-item {
        width: 140 / @font-size-normal;
        line-height: 34 / @font-size-normal;
        padding-left: 24 / @font-size-normal;
    }
    .advance-item:hover {
        background-color: @MenuViewItemHoverColor;
    }
    .select-item {
        background-color: @MenuViewItemHoverColor;
        border-right: 3px solid @btnNormalColorNo1;
    }
    .advance-right-content {
        overflow-y: auto;
        max-height: 400 / @font-size-normal;
        min-height: 400 / @font-size-normal;
    }
    .ant-radio-wrapper {
        width: 140 / @font-size-normal;
        line-height: 40 / @font-size-normal;
    }
    .ant-checkbox-group-item {
        width: 140 / @font-size-normal;
        line-height: 40 / @font-size-normal;
    }
    .ant-select-dropdown {
        height: 300 / @font-size-normal;
    }
}
.advance-download-name-modal {
    .ant-modal-body{
        padding: 0 24 / @font-size-normal 24 / @font-size-normal;
    }
    .padding-content {
        padding: 0 24 / @font-size-normal;
    }
    .sort-region {
        width: 440 / @px-unit;
        height: 190 / @px-unit;
        padding: 10 / @px-unit;
        background: @grayBlack;
        overflow-y: auto;
        border-radius: 1 / @px-unit;
        border: solid 1 / @px-unit @grayBlackBorder;
        .OSDitem-move {
            width: 88 / @px-unit;
            height: 32 / @px-unit;
            border: solid 1 / @px-unit @grayBlackBorder;
            text-align: center;
            line-height: 27 / @px-unit;
            background: #fff;
            cursor: move;
            float: left;
            border-radius: 2 / @px-unit;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
        }
    }
    .download-button-list {
        width: 440 / @px-unit;
        height: 190 / @px-unit;
        padding: 10 / @px-unit;
        overflow-y: auto;
        border-radius: 1 / @px-unit;
        border: solid 1 / @px-unit @grayBlackBorder;
        .download-button-item {
            width: 88 / @px-unit;
            height: 32 / @px-unit;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
            background: #fff;
            border-radius: 2 / @px-unit;
            border: solid 1 / @px-unit @grayBlackBorder;
            span {
                display: inline;
            }
        }
    }
    .name-format-custom-input {
        width: 58 / @px-unit;
        height: 30 / @px-unit;
        padding: 0;
        margin: 0 15 / @px-unit;
        border: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        text-align: center;
    }
    .name-format-custom-input.ant-input:focus {
        box-shadow: none;
    }
    .name-border-content {
        color: #707b7c;
        width: 440 / @px-unit;
        max-height: 120 / @px-unit;
        overflow-y: auto;
        padding: 0 5 / @font-size-normal;
        margin-bottom: 5 / @font-size-normal;
    }
    .name-text {
        margin-left: 10 / @font-size-normal;
    }
    .tip-color {
        color: @errorColorNo17;
    }
    
}
.advance-download-modal{
    .ant-radio-wrapper {
        width: 80 / @px-unit;
    }
}
.progress-modal{
    .flex-content{
        display: flex;
        align-items: center;
        justify-content: center;
    }
}



._VspOsdComponent_ {
    // UI组件特有的CSS，
    padding-top: inherit; //为了不eslint告警写一个

    .sort-region {
        width: 440/@px-unit;
        height: 250/@px-unit;
        padding: 10/@px-unit;
        background: @grayBlack;
        overflow-y:auto;
        border-radius: 1/@px-unit;
        border: solid 1/@px-unit @grayBlackBorder;
        .OSDitem-move {
            width: 88/@px-unit;
            height: 32/@px-unit;
            border: solid 1/@px-unit @grayBlackBorder;
            text-align: center;
            line-height: 27/@px-unit;
            background: #fff;
            cursor: move;
            margin-left: 10/@px-unit;
            float: left;
            border-radius: 2/@px-unit;
            margin-top: 10/@px-unit;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
        }
    }

    .osdOption-region {
        width: 440/@px-unit;
        padding: 10/@px-unit;
        border-radius: 1/@px-unit;
	    border: solid 1/@px-unit @grayBlackBorder;
        overflow-y:auto;
        button {
            width: 88/@px-unit;
            height: 32/@px-unit;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
            background: #fff;
            border-radius: 2/@px-unit;
	        border: solid 1/@px-unit @grayBlackBorder;
            span {
                display: inline;
            }
        }
    }
}



@Length180: 180/@px-unit;
@Length46: 46/@px-unit;
@Length48: 48/@px-unit;
@Length68: 68/@px-unit;
@Length80: 80/@px-unit;
@Length100: 100/@px-unit;
@Length112: 112/@px-unit;
@Length120: 120/@px-unit;
@Length150: 150/@px-unit;
@Length280: 280/@px-unit;
@Length340: 340/@px-unit;
._LocalImage_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit; //为了不eslint告警写一个
    padding-top: 20/@px-unit; //为了不eslint告警写一个
    padding-right: 20/@px-unit; //为了不eslint告警写一个
    width: 100%;
    //车牌数字
    .detectImg {
        display: inline-block;
        width: 100%;
        height: @Length48;
        line-height: @Length48;
        text-align: center;
        background-color: @disableColorNo7;
        font-weight: bolder;
        span{
            display: inline-block;
            height: @Length48;
            line-height: 48/@px-unit;
            padding: 0 20/@px-unit;
            background: #fff;
            color: black;
            font-size: 20/@px-unit;
        }
    }

}



._MemoryCardPic_ {
    display: flex;
    width:100%;
    height: 100%;
    padding-right: 20/@px-unit;
    .left-bar {
        width: 256/@px-unit;
        flex: 0 0 256/@px-unit;
        .ant-collapse {
            border-top:0;
            border-left: 0;
        }
        .search-bar {
            .ant-input-number {
                width: 100%;
            }
            .speed-item {
                display: flex;
                align-items: center;
                &__ipt {
                    display: flex;
                    align-items: center;
                    margin-right: 3/@px-unit;
                }
                &__sperator {
                    margin-left: 3/@px-unit;
                    margin-right: 3/@px-unit;
                }
           }
        }
        .picture-name {
            .name-rule {
                line-height: 32px;
            }
            .name-rule__content {
                text-align: right;
            }
            .preview-name__content {
                color:#aeacac
            }
        }
       
    }
    .right-content {
        flex:1;
        width: 80%;
        min-width: 80%;
        padding-top: 10/@px-unit;
    }
    
    .table-list {
        padding: 0 10/@px-unit;
    }
    .button-groups {
        display: flex !important;
        // align-items: center;
        width: 800/@px-unit;
    }
    .progress-wrap {
        line-height: 32/@px-unit;
    }
}

.down-modal {
    .label-normal-wrapper{
        width: 280/@px-unit !important;
    }
    &__desc {
        font-weight: bolder;
    }
    .label-div-Container {
        padding-left: 10/@px-unit;
    }
}

.help-tip {
    .box-wrap {
        width: 480/@px-unit;
        margin-bottom: 10/@px-unit;
        .title {
            font-weight: 600;
            padding: 0 5/@px-unit;
        }
        .content {
            display: flex;
            flex-wrap: wrap;
            padding: 10/@px-unit;
            .item {
                width: 50%;
                padding: 5/@px-unit 0;
                display: flex;
                align-items: center;
                .name {
                    margin-right: 10/@px-unit;
                    width: 60/@px-unit;
                    padding-left: 10/@px-unit;
                    background-color: #f0f5ff;
                }
                .text {
                    flex: 1;

                }
            }
        }
        .tips {
            color: #f00;
        }
    }
}



._PedestrianFlow_ {
  width: 100%;
  padding: 0 10/@px-unit;
  .search-bar {
    margin: 10/@px-unit 0;
  }
}



._PictureLocal_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .m-layout-content;
    width: 100%;
    .table-action-bar{
        line-height: 40 / @font-size-normal;
        height: 40 / @font-size-normal;
        .left-bars{
            line-height: 40 / @font-size-normal;
            height: 40 / @font-size-normal;
            .button-groups{
                line-height: 40 / @font-size-normal;
                height: 40 / @font-size-normal;
            }
        }
    }
    // label样式
    .label-div-Container {
        margin-right: 50px !important;
    }
    // table样式
    .ant-table {
        .ant-table-cell {
            word-break: normal;
            word-wrap: normal;
        }
    }
}


._PictureSdCard_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .m-layout-content;
    width: 100%;
    .flex-content {
        display: flex;
        align-items: center;
    }
    .search-result-button-list {
        border-top: 1px solid @dividerColorNo9;
        margin-top: 10 / @font-size-normal;
        margin-right: 20 / @font-size-normal;
        padding-top: 10 / @font-size-normal;
    }
    .table-action-bar{
        line-height: 40 / @font-size-normal;
        height: 40 / @font-size-normal;
        .left-bars{
            line-height: 40 / @font-size-normal;
            height: 40 / @font-size-normal;
            .button-groups{
                line-height: 40 / @font-size-normal;
                height: 40 / @font-size-normal;
            }
        }
    }
    .blue-icon-color {
        color: @btnNormalColorNo1;
    }
    // label样式
    .label-div-Container {
        margin-right: 50px !important;
        .label-normal {
            min-width: 108px;
        }
    }
    // table样式
    .ant-table {
        .ant-table-cell {
            word-break: normal;
            word-wrap: normal;
        }
    }
    .behind-ipt {
        .label-normal-wrapper,.label-div-Container,.label-normal-container  {
            width:100% !important;
        }
    }
    
   .speed-item {
        display: flex;
        align-items: center;
        .speed-ipt {
            display: flex;
            align-items: center;
            margin-left: 5/@px-unit;
            .desc {
                flex: 1;
            }
            .ant-input {
                flex: 0 0 120/@px-unit;
            }
            .end {
                margin-right: 5 /@px-unit;
            }
        }
        .speed-sperator {
            margin-left: 3/@px-unit;
        }
   }
   .plate-item {
        display: flex;
        align-items: center;
        flex: 0 0 400/@px-unit;
        .desc {
            margin-left: 5/@px-unit;
            flex: 0 0 100/@px-unit;
        }
        .plate-select {
            flex: 0 0 80/@px-unit;
            margin-right: 5/@px-unit;
        }
        .plate-ipt {
            flex:1;
        }
   }
   .search-item {
    margin-left: 20 / @px-unit;
   }
}
.picture-modal {
    .extend-button {
        display: flex;
        align-items: center;
        justify-content: center;
        color: @btnNormalColorNo1;
        margin-top: 10px;
        cursor: pointer;
    }
    .name-border {
        margin-left: 90 / @font-size-normal;
        display: flex;
        align-items: center;
        // line-height: 40 / @font-size-normal;
    }
    .name-border-content {
        color: @disableColorNo7;
    }
    .name-text {
        margin-left: 10 / @font-size-normal;
    }
    .name-table-title-content{
        display: flex;
        justify-content: space-between;
    }
    .name-table-flex {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .name-table-title{
        border: 1px solid @listBorderColorNo8;
        background-color: @disableInputBgColorNo11;
        width: 100%;
        height: 40 / @font-size-normal;
        line-height: 40 / @font-size-normal;
    }
    .name-sub-title{
        width: 100%;
        border-bottom: 1px solid @listBorderColorNo8;
        border-right: 1px solid @listBorderColorNo8;
        border-left: 1px solid @listBorderColorNo8;
        line-height: 25 / @font-size-normal;
    }
    .name-table-content {
        line-height: 40 / @font-size-normal;
        width: 100%;
        height: 40 / @font-size-normal;

    }
    .name-table-text {
        border-bottom: 1px solid @listBorderColorNo8;
        border-right: 1px solid @listBorderColorNo8;
        border-left: 1px solid @listBorderColorNo8;
        width: 50%;
        line-height: 40 / @font-size-normal;
        height: 40 / @font-size-normal;


    }
    .name-table-text-sub{
        width: 50%;
        text-align: center;
        .m-text-ellipsis;
    }
    .ftp-format-name {
        color:rgba(0, 0, 0, 0.25);
        background-color: #f5f5f5;
        border: 1px solid #e8e8e8;
        box-shadow: none;
        cursor: pointer;
        opacity: 1;
        padding: 4px 11px;
        width: 770px;
        height: auto;
        margin-bottom: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}




._RecordSearch_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .m-layout-content;
    .video-plugin {
        width: 720 / @font-size-normal;
        height: 340 / @font-size-normal;
        background-color: #000;
        display: inline-block;
    }
    .video-slider-container {
        width: 720 / @font-size-normal;
    }
    .video-record-icon-container{
        display: flex;
        align-items: center;
        line-height: 40 / @font-size-normal;
        justify-content: space-between;
        background-color: #e8eaeb;
        margin-top: -6/@px-unit;
        padding: 0 5/@px-unit;
        
        .left{
            width:200/@px-unit;
        }
        .right{
            flex:1;
            display:flex;
            justify-content: flex-end;
            align-items: center;
            .touchbar-icon {
                font-size: 20/@px-unit;
            }
            .itemDetail {
                color: black;
                // background: @homePageNo1;
                border-radius: 10/@px-unit;
                padding: 1/@px-unit 12/@px-unit;
                margin: 0 8/@px-unit 0 -8/@px-unit;
                span {
                    margin-right: 20/@px-unit;
                    position: relative;
                    cursor: pointer;
                    .anticon {
                        margin: 0;
                    }
                }
            }
            .anticon{
                margin-right: 16/@px-unit;
                font-size:20/@px-unit;
                line-height: normal;
                &:hover{
                    color: @btnNormalColorNo1;
                }
            }
            .active{
                color: @btnNormalColorNo1;
            }
        }
    }
    // label样式
    .label-div-Container {
        margin-right: 50px !important;
        .label-normal {
            min-width: 150px;
        }
    }
}



._RecordWaterMark_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .m-layout-content;
    .record-water-content{
        display: flex;
    }
    // label样式
    .label-div-Container {
        margin-right: 50px !important;
        .label-normal {
            min-width: 150px;
        }
    }
}


._SnapShotRecordSearch_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit;
    ._SnapShotRecordSearchComponent_ {
        .m-layout-content;
    }
    width: 100%;
    .flex-content {
        display: flex;
        align-items: center;
    }
    .table-action-bar{
        line-height: 40 / @font-size-normal;
        height: 40 / @font-size-normal;
        .left-bars{
            line-height: 40 / @font-size-normal;
            height: 40 / @font-size-normal;
            .button-groups{
                line-height: 40 / @font-size-normal;
                height: 40 / @font-size-normal;
            }
        }
    }
    .blue-icon-color {
        color: @btnNormalColorNo1;
    }
    // label样式
    .label-div-Container {
        margin-right: 50px !important;
    }
    // table样式
    .ant-table {
        .ant-table-cell {
            word-break: normal;
            word-wrap: normal;
        }
    }
}


._StrobeRadarRecSearch_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit; //为了不eslint告警写一个
    .flex-content {
        display: flex;
        align-items: center;
    }
    .table-action-bar{
        line-height: 40 / @font-size-normal;
        height: 40 / @font-size-normal;
        .left-bars{
            line-height: 40 / @font-size-normal;
            height: 40 / @font-size-normal;
            .button-groups{
                line-height: 40 / @font-size-normal;
                height: 40 / @font-size-normal;
            }
        }
    }
    .blue-icon-color {
        color: @btnNormalColorNo1;
    }
    // label样式
    .label-div-Container {
        margin-right: 50px !important;
    }
    // table样式
    .ant-table {
        .ant-table-cell {
            word-break: normal;
            word-wrap: normal;
        }
    }
}


._StrobeRecSearch_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit; //为了不eslint告警写一个
    .flex-content {
        display: flex;
        align-items: center;
    }
    .table-action-bar{
        line-height: 40 / @font-size-normal;
        height: 40 / @font-size-normal;
        .left-bars{
            line-height: 40 / @font-size-normal;
            height: 40 / @font-size-normal;
            .button-groups{
                line-height: 40 / @font-size-normal;
                height: 40 / @font-size-normal;
            }
        }
    }
    .blue-icon-color {
        color: @btnNormalColorNo1;
    }
    // label样式
    .label-div-Container {
        margin-right: 50px !important;
    }
    // table样式
    .ant-table {
        .ant-table-cell {
            word-break: normal;
            word-wrap: normal;
        }
    }
}


._TrafficFlowSearch_ {
  width: 100%;
  padding: 0 10/@px-unit;
  .search-bar {
    margin: 10/@px-unit 0;
  }

  .detail-info {
    width:100%;
    margin-top: 40/@px-unit;
    padding: 15/@px-unit;
    border: 1px solid @listBorderColorNo8;
    background: #eee;
    .title {
      font-weight: bold;
    }
  }
}



._SignalMachinePage_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit; //为了不eslint告警写一个
}


._SignalEffectEvaluate_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit; //为了不eslint告警写一个
    // background-color: @bodyBgColorNo16;
    // height: calc(100vh - 0);
    .ant-tag {
        width: 50/@px-unit;
        // height: 40/@px-unit;
    }
    .ant-tag-checkable {
        border: 2px/@px-unit solid @disableInputBgColorNo11;
        border-radius: 5/@px-unit;
    }
    ._SignalEffectEvaluateCharts_ {
        margin-top: 20/@px-unit;
        height: 200/@px-unit;
        .ant-row{
            margin-top: 20/@px-unit;
        }
        ._SignalEffectEvaluatePolar_, ._SignalEffectEvaluateLine_ {
            #polarBar1, #polarBar2, #polarBar3 {
                width: 100%;
                height: 200/@px-unit;
            }
            #line1, #line2, #line3 {
                width: 100%;
                height: 200/@px-unit;
            }
        }
    }
}
._SnapOSD_ {
    .fn-marr10 {
        margin-right: 10px;
    }
    .SnapOSDSortWrap {
        padding: 10px;
        margin-top:10px;
        background: #f0f2f5;
    }
    .suggestBtn {
        float: right;
        color: #1890ff;
        cursor: pointer
    }
    .fn-left {
        float: left;
    }
    .labelSelect-behind-dark {
        display: block;
        padding: 0px;
    }
    .osdTipButton [type="button"] {
        width: 100%;
        padding: 0px;
        span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
            display:block;
        }
    }
}
.sortableItems {
    overflow: hidden;
    zoom:1;
    min-height: 250px;
    margin-top: 10px;
    .osd_move {
        min-width: 80px;
        height: 30px;
        border: 1px #fff dashed;
        text-align: center;
        line-height: 27px;
        background: #5D6E7E;
        color: #fff;