._Ptz_ {
    position: relative;
    margin-bottom: 0 / @px-unit;
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;
    background-color: @preview_Right_Bg; 
    min-width: 170px;
    .ant-btn{
        padding:4/ @px-unit 0!important;;
    }
    .show{
        display: '';
    }
    .hidden{
        display: none;
    }
    &wrap{
        .ant-menu-item, .ant-menu-submenu-title{
            padding:0!important;
        }
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        margin-top: 10 / @px-unit;  
        border-bottom: 1 / @px-unit solid @preview_right_ptz_borderBottom_ColorN;      
        .ant-menu{
            background: @preview_right_tabTitle_Bg !important;
            color: @pageTextN;
            height: 35 / @px-unit;
            width: 100%;
        }
        .ant-menu-horizontal {
            border-bottom-color: @preview_right_tabTitle_Bg;
            
        }
        .ant-menu-horizontal:not(.ant-menu-dark) {
            .ant-menu-submenu{
                padding:0!important;
            }
            .ant-menu-item {
                height: 30 / @px-unit;
                margin-top: 2 / @px-unit;
                line-height: 30 / @px-unit;
                width: 49%;
                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;
            }
        } 
    }
    &content {
        margin-top: 15 /@px-unit;
        height:200 /@px-unit;
        background-color: @preview_Right_Bg;
    }   
    &font{
       >svg{
        font-size:30/ @px-unit!important;
        
       }
    }
   
    &icon{
        width:20 / @px-unit
    }
    &header_bg {
        width: 150 / @px-unit;
        height: 150 / @px-unit;
        margin: 25 / @px-unit 0 15 / @px-unit 25 / @px-unit;
        & &_icon {
            .svgFont(150);
        }
    }
    &header_el {
        width: 150 / @px-unit;
        height: 150 / @px-unit;
        display: flex;
        flex-wrap: wrap;
        margin: 25 / @px-unit 0 15 / @px-unit 25 / @px-unit;
        position: absolute;
        top: -25 / @px-unit;
        left: 0;
        & &_icon {
            .svgFont(40);
            width: 40 / @px-unit;
            height: 40 / @px-unit;
            margin: 5 / @px-unit 5 / @px-unit 5 / @px-unit 5 / @px-unit;
            &:hover {
                cursor: pointer;
            }
        }
    }
}



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



._QualityBtns_ {
    .popover_contain{
        .popover_icon:not(.disabled_icons):not(.noHover) svg path {
            fill: .color_N(@preview_center_bottom_Bg)[];
        }
        .popover_icon:hover:not(.disabled_icons):not(.noHover):hover svg path {
            fill: @--primary-5!important;
        }
    }
    }
  


._TalkAndSound_ {
    
    
    
    
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20/@px-unit 0;
    &box{
        width: 210/@px-unit;
        height:32/@px-unit;
        padding: 0!important;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    &default{
        border: 1px solid @talkAndSound_defBorder;
        background-color: @talkAndSound_defBg;
        color: @talkAndSound_defText;
    }
    .label-div-Container {
        width: 30/@px-unit;
        height:32/@px-unit;
        .label-normal-container {
            width: 30/@px-unit;
            height:32/@px-unit;
            padding-top: 0 !important;
            .label-normal-wrapper {
                width: 30/@px-unit !important;
                height:32/@px-unit !important;
            }
        }
    }
    &btn {
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        height: 30/@px-unit;
    }
    &down {
        width: 30/@px-unit;
        height: 30/@px-unit;
        border-left: 1px solid @talkAndSound_defBorder;
    }
    &start {
        width: 180/@px-unit;
        height: 100%;
        display: flex;
        justify-content: center;
        background-color: @talkAndSound_defBg;
        border-right: 1px solid @talkAndSound_defBorder;
    }
    &stop {
        width: 180/@px-unit;
        height: 100%;
        display: flex;
        justify-content: center;
        background-color: @talkAndSound_actBg;
        border-right: 1px solid @talkAndSound_defBorder;
        color: .color_A(@talkAndSound_actBg)[];
    }
    &text {
        line-height: 32/@px-unit;
        width: 64/@px-unit;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    &talk {
        display: flex;
        justify-content: center;
        width: 140/@px-unit;
        >span:nth-of-type(1){
            margin: 0 30/@px-unit 0  -10/@px-unit ;
        }
        .cus_icons {
            .svgHover(@iconColorN);
        }
    }
    &current {
        color: @current !important;
    }
}


._UrgentRecord_ {
    
    
    
    
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;
  
    &box{
        width: 210/@px-unit;
        height:32/@px-unit;
        padding: 0!important;
        display: flex;
        align-items: center;
        justify-content: flex-start;        
        cursor: pointer;
        >span:nth-of-type(1){
            margin: 0 30/@px-unit 0  10/@px-unit ;
        }
        .cus_icons {
            .svgHover(@iconColorN);
        }
    }
    &checked{
        border: 1px solid @urgentRecord_actBorder;
        background-color: @urgentRecord_actBg;
        color:.color_A(@urgentRecord_actBg)[];
    }
    &default{
        border: 1px solid @urgentRecord_defBorder;
        background-color: @urgentRecord_defBg;
        color:@urgentRecord_defText;
    }
    &text {
        width: 124/@px-unit;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}

._ViewSplit_ {
    
    
    
    padding-top: inherit; 
    
}



@textHighlightColor: #fff;
@icon-success-color: @iconNolmal; 
@icon-warning-color: @iconFail; 
@icon-fail-color: @iconFail; 
@icon-ignore-color: @iconColorD; 
@icon-list-color: @iconListColorN; 
.m-highlight-text {
    color: @textHighlightColor
}


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

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


._Aging_{
    .hdd-mode-swrap{
        margin-bottom: 10 /@px-unit;
        .hdd-mode {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }
}



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


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

._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;
            }
        }
    }
    .Channel{
        .label-normal{
            margin-top: 8 / @px-unit;
        }
    }
    .uploadChannel{
        display: flex;
        .label-div-Container:first-child  {
            margin-right: 109 / @px-unit;
        }
    }
}

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




.detailTime {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.errStatus {
    color: @errorColor;
}
.warnStatus {
    color: @warningColor;
}
.hdd_health_modal {
    ._Table_ .ant-table-body {
        min-height: 200 / @px-unit;
    } 
}

.hard-disk-management-table .ant-table-body{
    min-height: 230 / @px-unit !important;
}

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

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

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


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

}



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

}



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

}


._StreamCombine_ {
    @padding:20 / @px-unit;
    padding:@padding;
    box-sizing: content-box;
    width:calc(100% - 2 *  @padding);
    height:900 / @px-unit !important;

    .TitleBar{
        display: flex;
        height: 40 / @px-unit;
        justify-content: space-between;
        align-items: center;
        margin-top: 4 / @px-unit;

        .text{
            font-weight: bold;
            font-size: 16 / @px-unit;
        }
    }

    .ant-table-body{
        min-height: 150 / @px-unit !important;
        .table-input-select-wrapped,.table-input-select-container{
            width: 95% !important;
        }
    }
}


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

}


._Iscsi_ {
    width: 100%;
    padding:20 / @px-unit;
    .operation-btn {
        width: 100%;
        display: flex;
        .label-div-Container {
            margin-right: 10/@px-unit;
        }
    }
    .ant-col {
        .label-div-Container {
            margin-right: 10/@px-unit;
        }
    }
    ._Table_ .ant-table-body {
        min-height: 380 / @px-unit;
    } 
}
.storage-modal {
    .footer-btn {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .label-div-Container {
            margin-right: 15/@px-unit;
        }
    }
}


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

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

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

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



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


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


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



._SymServer_ {
    .gap-divider {
        margin-top: 0;
        margin-bottom: 0;
    }
}
.startAndEndTimePicker {
    .time-select-wrapper {
        display: flex;
        width: 100%;
        &>div {
            width: 100%;
            padding-top: 0rem !important;
            &>div {
                width: 100%;
    
            }
        }    
    }
}
._DateConfig_.MainPage {
    width: 100%;
    .label-normal-behind {
        height: 0;
        &.pl-0 {
            padding-left: 0rem !important;
        }

        .label-normal-container {
            padding-top: 0rem !important;
            button {
                margin-left: 1.5rem;
            }
        }
    }

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

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

._Holiday_ {
    ._Table_ .ant-table-body {
        min-height: 450 / @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;
    }
}
._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%;
        }
    }
}



._TimeBackup_{

    .line-block{
        display: flex;
    }

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

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


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



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

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



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

    .ant-tabs-nav .ant-tabs-tab-btn {
        width: 170/@px-unit !important;
   }
}



._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
                    }
                }
                .label-normal-container  {
                    padding: 5/@px-unit 0 !important;
                }
            }
        }
    }
   .ant-tabs-nav .ant-tabs-tab-btn {
        width: 170/@px-unit !important;
   }
}



.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(.color_N(@ocxHeaderBg)[]);
                font-size: 12/@px-unit !important;
                margin-right: 2/@px-unit;
                display: flex;
                justify-content: flex-end;
                &:hover{
                    .svgHover(@homeTaskIconColorA);
                }
            }
        }
        .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;
        }
    }
   
}




.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)[];
        }
    }
}

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



@secondary:{    
    
    selRuleLineColor: #ffff00; 
    unSelRuleLineColor: #0000ff; 
    selFilterLineColor: #06c8f9; 
    unSelFilterLineColor: #06c8f9; 
    pointRuleSelColor: #01ff01; 
    testAA:fadeout(#01ff01,25%);
    
    hddDiskHealth:#009CFF;    
    
    playbackUplineBgN:@--bg; 
    playbackLineBgN: @--toolbar-bg; 
    playbackCoordinateTextColorN: .color_N(@--bg)[]; 
    playbackFramePenColorN: @--bg; 
    playbackNormalTypeColorN: #39D67F; 
    playbackMotionTypeColorN: #D9E612; 
    playbackIntellTypeColorN: #39ADF6; 
    playbackAlarmTypeColorN: #D51112; 
    
    faceTargetColor: rgb(0, 255, 0); 
    bodyTargetColor: rgb(0, 204, 255); 
    vehicleTargetColor: rgb(225, 216, 0); 
    customTargetClolor: rgb(255, 69, 0); 
};

html,
body {
    font-size: @base-rem-size;
}
#p_ocx {
    z-index: 1001;
}
@media screen and (max-width: 1280px) {
    html,
    body {
        font-size: @base-rem-size-sm;
    }
}

@media screen and (min-device-width: 3000px) {
    html,
    body {
        font-size: 2 * @base-rem-size;
    }
}

::-webkit-scrollbar-corner {
    background-color: @pageBodyBg;
}
* {
    font-family: arial, 'Microsoft YaHei' !important;
}
.iconDropitem_name {
    float: left;
}

.ant-pagination-total-text,
.ant-pagination-options-size-changer,
.ant-pagination-options {
    color: @paginationTextN;

    .ant-pagination-options-quick-jumper {
        input {
            background-color: @paginationBg;
            border-color: @mainPageSvgN;
            color: @paginationInputTextN;
            margin-left: -40px;
        }
    }
}

.ant-pagination-next,
.ant-pagination-prev {
    a {
        &:hover {
            border-color: @paginationBorderA !important;
            color: @paginationTextA !important;
        }

        background-color: @paginationBg !important;
        border-color: @mainPageSvgN !important;
        color: @paginationTextN !important;
    }

    svg {
        fill: @iconColorN;
    }
}

.ant-pagination-disabled:hover {
    a {
        color: @paginationTextN !important;
        border-color: @mainPageSvgN !important;
    }
}

.ant-pagination-item {
    background-color: @paginationBg;
    border-color: @mainPageSvgN;

    a {
        color: @paginationTextN;
    }
}

.ant-pagination-item-active {
    border-color: @paginationBorderA;

    a {
        color: @paginationTextA;
    }
}

.ant-pagination-item-ellipsis {
    color: @paginationTextN !important;
}

.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
    background-color: @paginationBg;
}

.ant-pagination-total-text {
    float: right;
}
.ant-pagination-simple .ant-pagination-simple-pager input:hover{
    border-color: @formInputBorderA;
}

.ant-pagination-simple-pager input {
    background-color: @pageBodyBg !important;
    border-color: @pageBorderN !important;
    &:focus{
        border-color: @formInputBorderA !important;
        box-shadow: 0 0 0 0 !important;
    }
    &:hover{
        border-color: @formInputBorderA !important;
    }
}

.ant-picker-range .ant-picker-active-bar{
    background-color: @formInputBorderA !important;
}

.ant-tree-checkbox-inner {
    background-color: @formInputBgN;
}

.ant-tree-checkbox-checked .ant-tree-checkbox-inner {
    background-color: @formInputBgA;
}


.ant-form {
    color: @formInputTextN;
}

.ant-form-item-label > label {
    color: @formInputTextN;
}

.ant-form-item {
    margin-bottom: 0px;
}


.ant-progress-inner {
    background-color: @progressBg;
    .ant-progress-success-bg, .ant-progress-bg{
        background-color: @progressBgA;
    }
}

.ant-progress-text {
    color: @progressText;
}


.ant-layout {
    background-color: @setUpContentBg;
    color: @pageTextN;
}

.ant-layout-sider {
    background-color: @SideMenuBg;
    color: @pageTextN;
}

































.has-error {
    .ant-input {
        &:hover {
            border-color: @buttonDangerBorderA;
        }
        &:focus {
            border-color: @buttonDangerBorderA;
        }
        border-color: @buttonDangerBorderA;
        background-color: @formInputBgN;
    }
    .ant-input-affix-wrapper {
        &:hover {
            border-color: @buttonDangerBorderA !important;
        }
        border-color: @buttonDangerBorderA;
        background-color: @formInputBgN;
    }
    .ant-input-affix-wrapper-focused {
        border-color: @buttonDangerBorderA !important;
    }
}

.ant-input,
.ant-input-number {
    &:focus,
    &:hover {
        box-shadow: 0 0 0 0;
        border-color: @formInputBorderA;
    }
}

.ant-input[disabled] {
    color: @formInputTextD;
    background-color: @formInputBgD;
    border-color: @formInputBoderD;

    &:hover {
        border-color: @formInputBoderD;
    }
}

.ant-input[readonly] {
    color: @formInputTextN;
    background-color: @formInputBgD;
    border-color: @formInputBoderD !important;

    &:hover {
        border-color: @formInputBoderD;
    }
}

.ant-input,
.ant-input-number {
    background-color: @formInputBgN;
    border-color: @formInputBoderN;
    color: @formInputTextN;
}

.ant-input-number-disabled {
    color: @formInputTextD !important;
    background-color: @formInputBgD !important;
    opacity: 1;
}


.ant-input-number-handler-up,
.ant-input-number-handler-down {
    background-color: @numberInPutHandleBgA;
}

.ant-input-number-handler-up:active,
.ant-input-number-handler-down:active {
    background-color: @numberInPutHandleBgA;
}

.ant-input-number-handler-down {
    border-top: 1px solid @numberInPutHandleBgA;
}

.ant-input-number:hover:not(.ant-input-number-borderless) 
.ant-input-number-handler-up, 
.ant-input-number-focused:not(.ant-input-number-borderless) 
.ant-input-number-handler-up {
    border-bottom: 0.5px solid @numberInPutHandleBoderA;
}

.ant-input-number:hover:not(.ant-input-number-borderless) 
.ant-input-number-handler-down, 
.ant-input-number-focused:not(.ant-input-number-borderless) 
.ant-input-number-handler-down {
    border-top: 0.5px solid @numberInPutHandleBoderA;
}

.ant-input-number-handler-wrap {
    border-left: 1px solid @numberInPutHandleBgA;
    background-color: @numberInPutHandleBgA;
}

.ant-input-number-handler {
    border-left-color: @numberInPutHandleBoderA;
}

.ant-input-affix-wrapper {
    background-color: @formInputBgN;
    border-color: @formInputBoderN;

    &.ant-input-affix-wrapper-focused:not(.ant-input-affix-wrapper-disabled),
    &:hover:not(.ant-input-affix-wrapper-disabled) {
        box-shadow: 0 0 0 0;
        border-color: @formInputBorderA;
    }
}

.ant-form-item-has-error {
    input {
        background-color: transparent !important;
    }
}


.labelInput-check-info {
    .ant-col {
        margin-top: -10px;
        line-height: 16px;
    }

    span {
        color: @errorColor;
    }
}



li.ant-select-dropdown-menu-item.ant-select-dropdown-menu-item-selected,

div.ant-select.ant-select-enabled {
    color: @formInputTextN;
}

.ant-select,
.ant-input-number {
    outline: none;
    &:hover {
        border-color: @formInputBorderA;

        svg {
            fill: @formInputSvgA;
        }
    }

    svg {
        fill: @formInputSvgN;
    }

    .ant-input-number-handler-up-disabled,
    .ant-input-number-handler-down-disabled {
        svg {
            fill: @formInputSvgD;
        }
    }
}

.ant-input-number-disabled {
    &:hover {
        border-color: @formInputBoderD;
    }
}

.ant-input-number-focused,
.ant-select-open {
    svg {
        fill: @formInputSvgA;
    }
}

.ant-input-number-focused {
    border-color: @formInputBorderA;