border-bottom-color: @preview_right_tabTitle_Bg;
    }
    .ant-menu-horizontal:not(.ant-menu-dark) {
        .ant-menu-item {
            height: 30 / @px-unit;
            margin-top: 2 / @px-unit;
            line-height: 30 / @px-unit;
            width: 49%;
            padding: 0 10 / @px-unit;
            display: flex;
            justify-content: center;
            span {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
        .ant-menu-item:hover::after,
        .ant-menu-item-selected::after {
            border-bottom: 0px solid transparent;
        }
        .ant-menu-item-selected {
            background: @preview_right_ptzZoom_Bg !important;                
            border-radius: 5 /@px-unit;                
            span {                   
                background: @preview_right_ptzZoom_Bg;
                color: @pageTextA;
            }                
        }
        .ant-menu-item:hover {
            color: @pageTextN;
        }
    } 


}


._AcuPickIcon_{
    &.hide {
        display: none;
    }
    .active{
        svg path:nth-of-type(1){
            fill:@current!important;
        }
    }
    .close_icon, .search_icon {
        display: none !important;
    }
}

.acupick {
    &-region, &-canvas{
        width: 100%;
        height: 100%;
        position: absolute;
        &-hide {
            top: -10000 / @px-unit;
            z-index: 0;
        }
        &-show {
            z-index: 1001;
            top: 0;
            left: 0;
        }
    }
}


.Ocx_download_bottom{
    position: fixed;
    text-align: center;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10/@px-unit 0;
    border-top: 1/@px-unit solid @ocxBorder;
    background: @ocxDownloadBar;
    color: .color_N(@ocxDownloadBar)[];
    z-index: 10000;
    span{
        padding-top: 6/@px-unit;
        display: inline-block;
    }
    a {
        text-decoration: underline;
        color: @anchorTextN;
        &:hover {
            color: @anchorTextA;
        }
    }
    .closeBtn{
        float: right;
        margin-right: 20/@px-unit;
        border: 1/@px-unit solid @buttonNormalBorderN;
        background-color: @buttonNormalBgN;
        color: .color_N(@buttonNormalBgN)[];
        border-radius: 4/@px-unit;
        padding: 4/@px-unit 10/@px-unit;
        cursor: pointer;
        &:hover{
            color: .color_A(@buttonNormalBgN)[];
        }
    }
}

.plugin_confirm_mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.45);
}


._ManualPostion_{
    .content {
        padding: 5/@px-unit 10/@px-unit;
        box-sizing: border-box;
    }
}



.H5 {
    z-Index: 9999;
    position: relative;
    .h5player {
        background-color: @ocxBg;
        .h5player_header {
            background-color: @ocxHeaderBg;
            color:.color_N(@ocxHeaderBg)[];
            height: 15/@px-unit;
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
        .h5player_header_left {
            height: 15/@px-unit;
            font-size: 12/@px-unit !important;
            margin-left: 2/@px-unit;
            span {
                padding-right: 10/@px-unit;
                span {
                    padding-left: 10/@px-unit;
                }
            }
        }
        .h5player_header_right {
            display: flex;
            justify-content: flex-end;
            height: 15/@px-unit;
            font-size: 12/@px-unit !important;
            
            .cus_icons{
                .svgOut(@ocxHeaderSvgColorN);
                font-size: 12/@px-unit !important;
                margin-right: 2/@px-unit;
                display: flex;
                justify-content: flex-end;
                &:hover{
                    .svgHover(@ocxHeaderSvgColorA);
                }
            }
            .active .cus_icons{
                .svgOut(.color_A(@ocxHeaderBg)[]);
            }
        }
        .h5playerProptip {
            width: 100%;
            height: 96/@px-unit;
            position: absolute;
            text-align: center;
            font-weight: 700/@px-unit !important;
            padding-top: 15/@px-unit;
            font-size: 30/@px-unit;
            
            color: .color_A(@ocxBg)[];
            top: 50%;
            margin-top: -40/@px-unit;
        }
    }
   
}




._ImageConfig_ {
    width: 100%;
    background-color: @preview_Left_Bg;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    ._ImageConfig_button{
        .label-div-Container{
            margin-left:50/@px-unit;
            .label-normal-wrapper {
                width:92/@px-unit!important;;
            }
        }
    }
  
    .label-normal-container {
        width:190/@px-unit!important;;
    }
    .label-normal-wrapper{
        width:160/@px-unit!important;
    }
    .label-normal {
        width:28/@px-unit!important;
    }
    .label-normal-behind {
        display: none;
    }
}

.Ocx_download_center{
    z-Index: 9999;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: @ocxBg;
    .pluginMsg {
        left: 50%;
        top: 50%;       
        transform: translateX(-50%);
        position: absolute;
        width: auto;
        max-width: 80%;
        border-bottom: 1/@px-unit dashed @pageTextN;
        a, svg{
            color: @pageTextN;
        }
        &:hover {
            border-bottom: 1/@px-unit dashed @current;
            a, svg{ 
                color: @current;
            }
        }
    }
}


._AlarmOut_ {
    &wrapper{
        width:100%;
        overflow: hidden;
    }
    &down{
        width:330 /@px-unit;
    }

}

._QuotaMain_ {
    .mode-changer {
        display: flex;
        button {
            width: 300/@px-unit;
            overflow: hidden;
            padding: 0 10/@px-unit;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    .scalstat-btn {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .MainPage {
        padding: 0 !important;
    }
}


.hard-disk-management-table .ant-table-body{
    min-height: 230 / @px-unit !important;
}
.hardDiskManagement_state{
  display: flex;
  justify-content: center;
  align-items: center;
  .grid-infoIcon {
    .svgOut(@warningColor)
  }
}


._PtzCtrl_ {
    
    
    
    padding-top: inherit; 
    position: relative;
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;
    &header_bg {
        width: 150 / @px-unit;
        height: 150 / @px-unit;
        margin: 25 / @px-unit 0 15 / @px-unit 25 / @px-unit;
        position: relative;
        & &_icon {
            .svgFont(150);
            svg {
                & + {
                    path{
                        fill: @preview_right_ptzBg; 
                    }
                }
            }
        }
    }
    &header_el {
        width: 151 / @px-unit;
        height: 151 / @px-unit;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        position: absolute;
        justify-content: flex-start;
        cursor: pointer;
        top: 0;
        left: 0;
        .anticon{
            font-size: 50 / @px-unit!important;
        }
    }
    .active{
        svg path:nth-of-type(1){
            fill:@current!important;
        } 
    }
}



._PtzMenu_ {
    
    
    
    padding-top: inherit; 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;
    &header_bg {
        position: relative;
        width: 120 / @px-unit;
        height: 120 / @px-unit;
        margin: 10 / @px-unit 0 30 / @px-unit 0;
        & &_icon {
            .svgFont(120);
            svg {
                & + {
                    path{
                        fill: @preview_right_ptzBg; 
                    }
                }
            }
        }
    }
    &header_el {
        width: 120 / @px-unit;
        height: 120 / @px-unit;
        display: flex;
        flex-wrap: wrap;
        position: absolute;
        top: 0;
        left: 0;
        .cus_icons:not(.disabled_icons):not(.noHover):hover svg path:nth-child(2) {
            fill:@current;
        }
        & &_icon {
            .svgFont(30);
            width: 30 / @px-unit;
            height: 30 / @px-unit;
            margin: 5 / @px-unit 5 / @px-unit 5 / @px-unit 5 / @px-unit;
            &:hover {
                cursor: pointer;
            }
         
        }
    }
    &btngroups{
        display: flex;
        justify-content: flex-start;
        color:@pageTextN;
        margin:-17/@px-unit 0 0 0;
        .btn3{
            width:60/ @px-unit!important;
        }
    }
}

._PtzSet_ {
    height:200/ @px-unit;
    padding-left: 15 / @px-unit;
    width: 100%;
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;
    .label-normal-container {
        padding-top: 0 !important;
    }
    .btnGroups{
      display: flex;
      width: 180/ @px-unit;
      flex-wrap: wrap;
    }
    .btn{
       width:87/ @px-unit !important;
   
    }
    .btn3{
        width:60/ @px-unit!important;
    }
    .inputWrap{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        >span{
          margin-left:10/ @px-unit;
          color:@pageTextN;
          font-size:14/ @px-unit
        }
    }
  .vertical{
    margin-top:40/ @px-unit;
  }
  .show{
      display: '';
  }
  .hidden{
      display: none;
  }
}


._PtzStep_ {
    width: 180 / @px-unit;
    height: 48 / @px-unit;
    margin: 0 0 0 7.5 / @px-unit;
    background-color: @preview_right_ptzStep_Bg;
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;
    .label-normal-container {
        display: flex;
        padding: 0 !important;
    }
    &label {
        width: 45 / @px-unit !important;
        height: 48 / @px-unit !important;
        line-height: 48 / @px-unit !important;
        margin-left: 4/ @px-unit;
        text-align: center !important;
        padding-right: 0;
    }
    &slider {
        width: 120 / @px-unit !important;
        line-height: 48 / @px-unit !important;
        .labelSlider-float-left,
        .labelSlider-float-right {
            width: 0 / @px-unit;
        }
        .labelSlider-center {
            margin: 0 / @px-unit;
            .ant-slider {
                margin-top: 9 / @px-unit !important;
                margin-bottom: 9 / @px-unit !important;
            }
            .ant-slider-mark-text,
            .ant-slider-mark-text-active {
                color: @preview_right_ptzStepMask_ColorN;
                font-size: 12 / @px-unit;
            }
            .ant-slider-step {
                .ant-slider-dot {
                    width: 0;
                    height: 0;
                    border: none;
                }
            }
        }
    }
}


._Quota_ {
    .quota-bleaSpace {
        display: flex;
        .warning-tip {
            color: @errorColor !important;
        }
    }
    .unquotad-warning-tip {
        width: 1000/@px-unit;
        color: @errorColor !important;
    }
    .hdd-mode {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #bitrate-container {
        .ant-select-disabled.ant-select-multiple .ant-select-selection-item {
            color: @pageTextD;
        }
        .ant-select-multiple.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector {
            background: @pageBodyBg;
        }
        .ant-select-disabled.ant-select-multiple .ant-select-selection-item {
            border-color: @pageBorderN;
        }
    }
}

.addoneModal{
    width: 800/@px-unit !important;
    height: 600/@px-unit !important;
    .ant-modal-body{
        height: 500/@px-unit !important;
        overflow-y:auto;
        .oneContent{
          display:flex;
          flex-direction:column;
          align-items: center;
        }
    }
}
.addoneModalStp2{
    width: 850/@px-unit !important;
    height: 600/@px-unit !important;
    .ant-modal-body{
        height: 550/@px-unit !important;
    }
}
.workPath{
    width: 300/@px-unit;
    height: 200/@px-unit;
    margin-top: 50/@px-unit;
    border: 1px dashed gray;
    position: relative;
    border: 1/@px-unit dashed @files_upload_box_border_color;
    cursor: pointer;
    color: @files_upload_box_font_N;
    text-align: center;
    .select_Icon{
        .svgOut(@files_upload_box_font_N);
        margin-top: 70/@px-unit;
    }
}
.workPath:hover {
    border: 1/@px-unit dashed @--primary-5;
    color: @--primary-5;
    .cus_icons{
        .svgOut(@--primary-5);
    }
}
.importImg{
    width: 300/@px-unit;
    height: 200/@px-unit;
    margin-left: 225/@px-unit;
    margin-top: 50/@px-unit;
    border: 1px dashed gray;
    position: relative;
    border: 1/@px-unit dashed @files_upload_box_border_color;
    cursor: pointer;
    color: @files_upload_box_font_N;
    text-align: center;
}
.importimgList{
    margin-top: 50/@px-unit;
    width: 700/@px-unit;
    height: 200/@px-unit;
    overflow-x: auto;
    white-space:nowrap;
    margin-left: 20/@px-unit;
    .importimgListInner{
        width: 100%;
        overflow-x: auto;
        height: 200/@px-unit;
    }
    img{
        width: 150/@px-unit;
        height: 150/@px-unit;
    }
}

.addonetip{
    margin-top: 10/@px-unit;
}
.addbatchModal {
    width: 800/@px-unit !important;
    height: 500/@px-unit !important;
    .ant-modal-body{
        height: 500/@px-unit !important;
        overflow-y:auto;
    }
    .batchContent{
        width: 100%;
    }
    .batchContent1{
        margin-left: 80/@px-unit;
    }
    .batchUpload {
        width: 100%;
        height: 180/@px-unit;
        display: flex;
        align-items: center;

        .upload_each,
        .upload_eachIE {
            margin-right: 30/@px-unit;
            width: 40%;
            height: 100%;
            border: 1/@px-unit dashed @files_upload_box_border_color;
            cursor: pointer;
            color: @files_upload_box_font_N;
            text-align: center;
            line-height: 152/@px-unit;
            .cus_icons{
                .svgOut(@files_upload_box_font_N);
            }
        }

        .upload_each:hover {
            border: 1/@px-unit dashed @--primary-5;
            color: @--primary-5;
            .cus_icons{
                .svgOut(@--primary-5);
            }
        }
        .selectTip{
            margin-top: -80/@px-unit;
            text-align: center;
        }
    }

    .uploadTips {
        width: 100%;
        margin-top: 15/@px-unit;
    }

}
.tag_BtnDiv {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.tag_RightBtnDiv {
    display: flex;
    flex-direction: row;
}
.save_Btn {
    margin-right: 10 / @px-unit;
}
.import_Result{
    display: flex;
    flex-direction: row;
}
.localtag_RightBtnDiv{
    display: flex;
    flex-direction: row;
    float: right;
}


._BaseConfig_ {
    overflow-y: auto;
    padding-left: 2%;
    width: 100%;
    padding-top: 30 / @px-unit;
    .fullTimeSelecion {
        margin-left: 20 / @px-unit;
        
    }
    .leftmargin {
        margin-left: 20 / @px-unit;
    }
    .label-normal-behind {
        margin-left: 20 / @px-unit;
    }
    .addCustomDays {
        margin-left: 20 / @px-unit;
        .check-box-group {
            .label-normal-wrapper {
                
                width: 700px !important;
                .labelCheckboxGroup {
                    display: flex;
                    .ant-checkbox-wrapper {
                        width: 200px;
                    }
                }
            }
        }
    }
    .DelExpiredFilesByChn {
        margin-left: 20 / @px-unit;
    }
    .AutoDelFaceDataSel {
        margin-left: 20 / @px-unit;
    }
}


.addCustomDays-modal {
    .ant-modal-content {
        .ant-modal-body {
            padding: 0 !important;
            padding-bottom: 30px !important;
            ._Holiday_ {
                position: relative !important;
                .ant-row {
                    .fixed-button {
                        position: absolute !important;
                        padding-top: 40px;
                        border-top: none !important;
                    }
                }
            }
        }
    }
}



@icon-success-color: @iconNolmal; 
@icon-warning-color: @iconFail; 
@icon-fail-color: @iconFail; 
@icon-ignore-color: @iconColorD; 
@icon-list-color: @iconListColorN; 


._SAFESecurityStatus_ {
    ._SAFESecurityStatus_title {
        background-color: inherit;
    }
    ._SAFESecurityStatus_detect {
        height: 32/@px-unit;
        width: 100/@px-unit;
    }
    .anticon.item-icon-list {
        svg .icon-cicrle-part {
            fill: @icon-list-color;
        }
    }
    .item-list-btn {
        border-color: @buttonNormalBorderN;
    }
    .item-icon-loading {
        &::after {
            border-bottom-color: @icon-success-color;
        }
    }
    .anticon.icon-status-success {
        svg .icon-cicrle-part {
            fill: @icon-success-color;
        }
    }
    .anticon.icon-status-fail {
        svg .icon-cicrle-part {
            fill: @icon-fail-color;
        }
    }
    .anticon.icon-status-ignore{
        svg .icon-cicrle-part{
            fill:@icon-ignore-color;
        }
    }
    .anticon._SAFESecurityStatus_titleIcon {
        svg .icon-cicrle-part {
            fill: @icon-success-color;
        }
    }
    .anticon.warningTips-icon {
        svg .icon-cicrle-part {
            fill: @icon-fail-color;
        }
    }
    .anticon.successTips-icon {
        svg .icon-cicrle-part {
            fill: @icon-success-color;
        }
    }
}

.safeopr-table-normal {
    .ant-table-placeholder{
        display: none;
    }
}
.safeopr-configBar {
    background-color: @BottomBarBg;
    border-top: 1px solid @BottomBarBorder;
    position: absolute;
    left: 0;
}

.FireWall-tab {
    a {
        color: @pageTextN;
        &:hover {
            color: @current;
        }
    }
}

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

._SAFESafetyWarning_ {
    .anticon.detail_icon {
        svg .icon-cicrle-part {
            fill: none;
        }
    }
}
.Cert {
    .anticon.detail_icon {
        svg .icon-cicrle-part {
            fill: none;
        }
    }
    .ant-input-number {
        width: 100%;
    }
    .anticon.default-select {
        svg .icon-cicrle-part {
            fill: @icon-success-color;
        }
    }
}

._VideoTransmission_, ._SAFESafetyWarning_, ._UserLock_, .FireWall-tab, ._publicAccountLock_, ._DOSAttack_, ._WlanAgree_, ._publicHttps_ {
    padding-bottom: 78/@px-unit;
}
._Whitelist_ {
    padding-bottom: 78/@px-unit !important;
}


@minModalConentWidth: 1800 / @px-unit; 
@modalFooterHeight: 60 / @px-unit; 
@preEmptyHeight: 140 / @px-unit; 
@modalPicContentHeight: calc(100vh - @navMenuHeight - @modalFooterHeight - @preEmptyHeight); 

.WorkDetail {
    width: 100vw !important;
    height: 100% !important;
    margin: 0 !important;
    max-width: 100% !important;
    top: 0;
    .ant-modal-header{
        width: 100%;
    }
    .ant-modal-body{
        width: 100%;
        max-width: 100%;
    }
    .ant-modal-content {
        border: none !important;
        width: 100vw;
        height: 100%;
        min-width: @minModalConentWidth;
        position: absolute;
        top: 0;
        left: 0;
        overflow-y:auto !important;
        overflow-x: auto !important;
    }
    .topView{
        display: flex;
        .label-div-Container{
            margin-right: 10px;
        }
    }
    .picContent {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        height: @modalPicContentHeight;
    }
    .pageLine {
        margin-top: 10/@px-unit;
        display: flex;
        justify-content: space-between;
    }
}
.picContent {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
    height: @modalPicContentHeight;
    padding-top: 0.5rem;
    padding-left: 0.5rem;
    overflow-y: auto;
    .picCardItem {
        width: calc(11.4vw - 15px);
        height: calc((11.4vw) * 1.5);
        margin-right: 1rem;
        margin-bottom: 1rem;
        margin-top: 1px; 
        margin-left: 1px;
        background-color: @aiPanel_cardBg;
        position: relative;
        float: left;
        cursor: pointer;

        .PersonPic {
            display: block;
            height: calc((11.4vw - 18px) * 1.5);
            width: 100%;
            float: left;
        }
    }
    .active {
        box-shadow: 0 0 3/@px-unit 2/@px-unit @current;
    }
}

._SymServer_ {
    .gap-divider {
        margin-top: 0;
        margin-bottom: 0;
    }
}

._MainStreamDisc_ {
    padding:20 / @px-unit;
    width: 100%;
}


._RecordPlan_ {
    .childLableContainer-d-inlineBlock {
        &>div {
            display: inline-block;
        }
    }  
    .labelCheckBox-behind-labelText {
        .label-normal-container {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }
    }  
}



.SyncProgress_LeftTime{
    padding-left: 10 / @px-unit;
}
.raidinfo_modal {
    ._Table_ .ant-table-body {
        min-height: 240 / @px-unit;
    } 
}
._RaidInfo_ {
    ._Table_ .ant-table-body {
        min-height: 450 / @px-unit;
    } 
}


.RaidHotSpare_FlexLine{
    display: flex;
    .AddTo{
        margin-left: 15 / @px-unit;
    }
}
._RaidHotSpare_ {
    ._Table_ .ant-table-body {
        min-height: 450 / @px-unit;
    } 
}

._SnapDisc_ {
    padding:20 / @px-unit;
    width: 100%;
}


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


._Pppoe_ {
    
    
    
    padding-top: inherit; 
    
}

._RemoteStorage_ {
    .ant-divider-horizontal{
        background-color: #090c0c !important;
        margin-top: 8 / @px-unit;
        margin-bottom: 8 / @px-unit;
    }
    .FTPEnable{
        display: flex;
        .FTPRadio{
            margin-left: 100 / @px-unit;
        }
    }
    .EventPreRecord {
        display: flex;
        .PerRecord{
            margin-left: 308 / @px-unit;
        }
        .StreamType {
            margin-left: 108 / @px-unit;
        }
    }
    .TimePicker{
        display: flex;
        .Connector{
            padding-top: 10 / @px-unit;
            margin-left: 5 / @px-unit;
            margin-right: 5 / @px-unit;
        }
        .ant-checkbox-group{
            margin-left: 20 / @px-unit;
            .ant-checkbox-wrapper{
                margin-left: 0;
            }
        }
        .ant-picker-disabled{
            svg{
                opacity: 0.5;
            }
        }
    }
    .Channel{
        .label-normal{
            margin-top: 8 / @px-unit;
        }
    }
    .uploadChannel{
        display: flex;
        .label-div-Container:first-child  {
            margin-right: 109 / @px-unit;
        }
    }
}

._MachineConfig_ {
    
    
    
    padding-top: inherit; 
    
    .ant-row .label-normal-container {
        min-width:550/@px-unit;
    }
    .syncRemoteCheckBox .label-normal-container>.label-normal-wrapper{
        width: auto !important;
    }
}
._UPnP_ {
    
    
    
    padding-top: inherit; 
    
}

._RaidManage_ {
    .FlexLine{
        display: flex;
        .WorkMode{
            margin-left: 15 / @px-unit;
        }
    }
    .fixed-button {
        .label-normal-wrapper {
            width: auto !important;
        }
        button {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            min-width: 100 / @px-unit;
            &#Create, &#Celerity {
                width: auto;
                padding: 4/@px-unit 5/@px-unit;
            }
        }
    }
    ._Table_ .ant-table-body {
        min-height: 600 / @px-unit;
    } 
}

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


._AIOverView_ {
    
    
    
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
    height: 100%;
    &>div {
        height: 100%;
    }
    
    
    .main-page-loading{
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .AIOverview_PageView {
        height: 100%;
        .progress{
            padding-right: 24/@px-unit;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            .progress-describe{
                display: flex;
                justify-content: flex-end;
                .suc-color{
                    color: @status-success-stroke-1-normal;
                }
                .warn-color{
                    color: @status-warning-stroke-1-normal;
                }
                .err-color{
                    color: @status-error-stroke-1-normal
                }
            }
            .progress-view{
                width: 240/@px-unit;
            }
            .suc-color{
                .ant-progress-bg{
                    background-color: @status-success-stroke-1-normal;
                }
            }
            .warn-color{
                .ant-progress-bg{
                    background-color: @status-warning-stroke-1-normal;
                }
            }
            .err-color{
                .ant-progress-bg{
                    background-color: @status-error-stroke-1-normal;
                }
            }
        }
        
        .tab-menu {
            height: 100%;
            
            overflow-y: hidden;
            &.tab-hide {
                visibility: hidden;
            }
            
            .ant-tabs-top {
                overflow-y: hidden;
                overflow-x: hidden;
            }
        }
        .tab-menu>.ant-col {
            position: static;
            height: 100%;
        }     
        
        .tab-menu>.ant-col>.ant-row:nth-child(2) {
        height: calc(100% - 50px);
        overflow-y: auto;
        }
    
        
        .AIOverview_PageContent {
            padding: @mainPagePadding;
            height: 100%;
            .same-line {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .right{
                    display: flex;
                    align-items: center;
                    .search-input{
                        margin-right: 12/@px-unit;
                    }
                }
            }
            .table-same-line {
                display: flex;
                align-items: center;
                justify-content: center;
                &>div{
                    height: 24/@px-unit;
                }
            }
            ._Table_ {
                .ant-table-cell-fix-left,.ant-table-cell-fix-right {
                    background-color: transparent !important;
                }
                .ant-table.ant-table-bordered > .ant-table-container {
                    .ant-table-header, .ant-table-body {
                        thead, tbody {
                            tr > .ant-table-cell-fix-right-first::after {
                                border: 0;
                            }
                        }
                    }
                }
                .ant-table-cell-row-hover {
                    background-color: transparent !important;
                }
                .ant-table-filter-column {
                    justify-content: flex-start;
                }
                .ant-table > .ant-table-container {
                    td, th {
                        padding: 0 12/@px-unit !important;
                    }
                }
                .success {
                    .svgOut(@successColor);
                }
                .disable {
                    .svgOut(@iconColorD);
                }
                svg {
                    width: 24/@px-unit;
                    height: 24/@px-unit;
                }
                .edit_icon {
                    svg {
                        width: 30/@px-unit;
                        height: 30/@px-unit;
                    }
                }
            }
        }

        .refresh_btn button{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .view-mode {
            .ant-row.tab-menu {
                width: 100%;
                .ant-tabs.ant-tabs-top {
                    width: 100%;
                }
            }
        }
        .route-modal {
            height: 100%;
            &-page {
                height: 100%;
            }
        }
    }
}

.aioverview_tooltip_icon{
    .ant-popover-inner{
        padding: 8/@px-unit 12/@px-unit;
        .table-icon-tooltip{
            div{
                display: flex;
                justify-content: center;
                &>span:first-child{
                    margin-right: 8/@px-unit;
                    color: @neutral-fg-3-normal
                }
            }
            .tooltip-left-green {
                color: @status-success-fg-1-normal
            }
        }
    }
}

.aioverview_process_popover {
    .ant-popover-inner{
        padding: 0 12/@px-unit 8/@px-unit 12/@px-unit;
        .pop-content{
            width: 300/@px-unit;
            line-height: 32/@px-unit;
            .pop-tab{
                padding-top: 8/@px-unit;
                border-bottom: 1/@px-unit solid @neutral-stroke-2-normal;
                display: flex;
                justify-content: space-between;
            }
            &>.pop-tab:last-child {
                border-bottom: 0;
            }
            .pop-right{
                text-align: end;
            }
        }
    }
}


._StreamDisc_ {
    
    .hdd-mode-swrap{
        margin-bottom: 10 /@px-unit;
        .hdd-mode {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }
    .table-item {
        margin: 0;
        text-align: center;
    }
    .table-input{
        width: 100% !important;
        .table-input-select-container{
            width: 100% !important;
        }
        .table-input-select-wrapped{
            width: 100% !important;
        }
    }
    
    
    
    ._Table_ .ant-table-body {
        min-height: 450 / @px-unit;
    } 

    .hddmanage-combine-table .ant-table-body {
        min-height: 150 / @px-unit;
    }

}



._Onvif_ {
    padding-left: 20 / @px-unit;
    padding-top: 20 / @px-unit;
    padding-right: 10 / @px-unit;
    width: 100%;
    ._Table_ {
        .ant-table {
            background-color: @pageBodyBg;
            .ant-table-content {
                height: 450 / @px-unit;
                overflow-y: auto;
            }
        }
        .not-show {
            display: none;
        }
    }
    .ant-modal {
        .ant-modal-body {
            min-height: 498 / @px-unit;
            overflow-y: auto;
        }
    }
 
}



._Group_ {
    padding-left: 20 / @px-unit;
    padding-top: 20 / @px-unit;
    padding-right: 10 / @px-unit;
    width: 100%;
    ._Table_ {
        .ant-table {
            background-color: @pageBodyBg;
            .ant-table-content {
                height: 450 / @px-unit;
                overflow-y: auto;
            }
        }
    }
    .ant-modal {
        .ant-modal-body {
            min-height: 498 / @px-unit;
            overflow-y: auto;
            .ant-tabs .ant-tabs-content {
                [id*="Auth"] {
                    .label-div-Container:not(:first-child) {
                        display: inline-block;
                        width: 190 / @px-unit
                    }
                }
                [id*="Monitor"] {
                    .label-div-Container:not(:first-child) {
                        display: inline-block;
                        width: 70 / @px-unit
                    }
                }
                [id*="Replay"] {
                    .label-div-Container:not(:first-child) {
                        display: inline-block;
                        width: 70 / @px-unit
                    }
                }
                [id*="Voice"] {
                    .label-div-Container:not(:first-child) {
                        display: inline-block;
                        width: 70 / @px-unit
                    }
                }
            }
        }
    }

    .ant-tabs-nav .ant-tabs-tab-btn {
        width: 150/@px-unit !important;
        min-width: 150 / @px-unit;
   }
   
   .tabText {
       overflow: hidden;
       white-space: nowrap;
       -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
   }
}



._User_ {
    padding-left: 20 / @px-unit;
    padding-top: 20 / @px-unit;
    padding-right: 10 / @px-unit;
    width: 100%;
    ._Table_ {
        .ant-table {
            background-color: @pageBodyBg;
            .ant-table-content {
                height: 450 / @px-unit;
                overflow-y: auto;
            }
        }
        .not-show {
            display: none;
        }
    }
    .ant-modal {
        .ant-modal-body {
            min-height: 498 / @px-unit;
            height: 580 / @px-unit;
            overflow-y: auto;
            .ant-tabs .ant-tabs-content {
                [id*="Auth"] {
                    .label-div-Container:not(:first-child) {
                        display: inline-block;
                        width: 190 / @px-unit
                    }
                }
                [id*="Monitor"] {
                    .label-div-Container:not(:first-child) {
                        display: inline-block;
                        width: 70 / @px-unit
                    }
                }
                [id*="Replay"] {
                    .label-div-Container:not(:first-child) {
                        display: inline-block;
                        width: 70 / @px-unit
                    }
                }
                [id*="Voice"] {
                    .label-div-Container:not(:first-child) {
                        display: inline-block;
                        width: 70 / @px-unit
                    }
                }
                .label-normal-container  {
                    padding: 5/@px-unit 0 !important;
                }
                .user_tab_container {
                    &>.label-div-Container {
                        margin-right: 4 / @px-unit;
                    }
                }
            }
        }
    }
    .ant-tabs-nav .ant-tabs-tab-btn {
        width: 150/@px-unit !important;
        min-width: 150 / @px-unit;
    }

    .tabText {
        overflow: hidden;
        white-space: nowrap;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }
}

.flexBetween(){
  display: flex;
  align-items: center;
  justify-content: space-between;
}
._ChanlDiscGroup_ {
  width: 100%;
  padding:20 / @px-unit;
  .hdd-mode {
    .flexBetween();
    margin-bottom: 10 /@px-unit;
  }
  ._Table_ .ant-table-body {
    min-height: 450 / @px-unit;
  }   
}
.hddmng-table .ant-table-body{
  min-height:192 / @px-unit !important;
}

._ExtraStreamDisc_ {
    padding:20 / @px-unit;
    width: 100%;
}

._RecordControl_ {
    .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;
                        }

                        .ant-checkbox-group{
                            margin-top: 14/@px-unit;
                            display: flex;
                            flex-direction: column;

                            .ant-checkbox-wrapper{
                                margin-left: 0;
                                margin-bottom: 4 / @px-unit;;
                            }
                        }
                    }
                }    
            }    
        }    
    }
}



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

.holidayRadioGroup{
    label{
        width: 45%;
    }
}


._PasswordReset_ {
    padding-left: 20 / @px-unit;
    padding-top: 20 / @px-unit;

    .ant-divider {
        background: inherit;
    }

    .ant-divider-horizontal.ant-divider-with-text-left:after {
        border-top: 1 / @px-unit solid #13161b;
    }
    .QR_background {
        width: 205 / @px-unit;
        height: 205 / @px-unit;
        padding: 10 / @px-unit;
        background-color: @formInputTextN;
        margin: 10 / @px-unit;
        img{
            width: 185 / @px-unit;
            height: 185 / @px-unit;
        }
    }
    
    .ant-select-single:not(.ant-select-customize-input) .ant-select-selector{
        height: 30 / @px-unit;
        .ant-select-selection-search-input {
            height: 28 / @px-unit;
        }
    }
}

.password-reset-modal {
    width:430 /@px-unit !important;
}



.SharedUsers{
    .flex{
        display: flex;
        .label-div-Container{
            margin-right:10/@px-unit;
        }
    }
}
._SNMP_ {
    .subform {
        display: flex;
        justify-content: space-between;
        .box {
            width: 50%;
        }
    }
}


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




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

._RecordInfo_{
    .recordTable{
        width: 80vw;
    }
    ._Table_ .ant-table-body {
        min-height: 360 / @px-unit;
    } 
}


._ChannelInfo_ {
    .FlexLine{
        display: flex;
        ._Table_{
            width: 40%;
        }
        ._Table_ .ant-table-body {
            min-height: 500 / @px-unit;
        } 
        .RightPane{
            margin-left: 40 / @px-unit;
        }
    }
    .channelState{
        .svgOut(@successIcon);
        .svgFont(20);
    }
}

._EncodeEnhancement_ {
    height: calc(100% - 66px);
    overflow-y: auto;
    .fullsize {
        span {
            color: @pageTextN;
        }
    }
    &table{
        width: 1000/@px-unit;
    }
    &tip{
        width: 1000/@px-unit;
        padding-bottom: 10/@px-unit;
    }
}

._Port_ {
    
    
    
    padding-top: inherit; 
    
}
._Email_ {
    height: 90%;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 75px !important;
    .ant-divider-horizontal {
        margin: 5px 0;
    }
}


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

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



._TimeBackup_{

    .line-block{
        display: flex;
    }

    .default-interval{
        margin-left: 30 / @px-unit;
    }

    .search-btn-list{
        justify-content:flex-end;
    }
}


._MainSubCalibrate_ {
    
    
    

    .line-row {
        display: flex;
    }
}

._DateConfig_.MainPage {
    .label-normal-behind {
        &.pl-0 {
            padding-left: 0rem !important;
        }

        .label-normal-container {
            padding-top: 0rem !important;

            button {
                margin-left: 1.5rem;
            }
        }
    }

    .holidayRadioGroup {
        label {
            width: 45%;
        }
    }
}


._VideoStream_ {
    width: 100%;

    .stream-content {
        display: flex;
    }
    .label-normal-container {
        padding-top:5 / @px-unit  !important;
        padding-bottom: 5  / @px-unit !important;
    }

    .form {
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }
   
}



._CoaxiaUpgrade_ {
    
    
    

    .line-row {
        display: flex;
    }
}


._DeveloperLog_ {
    .FlexLine{
        display: flex;
        .LogLevel{
            margin-left: 100 / @px-unit;
        }
        .log-tip {
          color: @errorColor;
        }
    }
    ._Table_ .ant-table-body {
        min-height: 500 / @px-unit;
    } 

}

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

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



._ChannelName_ {
    
    
    
    padding-top: inherit;