}
    }
    .closeBtn{
        float: right;
        margin-right: 20/@px-unit;
        border: 1/@px-unit solid @neutral-stroke-1-normal;
        background-color: @neutral-bg-2-normal;
        color: @neutral-fg-2-normal;
        border-radius: 4/@px-unit;
        padding: 4/@px-unit 10/@px-unit;
        cursor: pointer;
        &:hover{
            color: @brand-fg-1-hover;
            border-color: @brand-stroke-1-hover;
        }
    }
}

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

.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 @neutral-fg-3-normal;
        a{
            color: @neutral-fg-3-normal;
        }
        &:hover {
            border-bottom: 1/@px-unit dashed @brand-fg-1-normal;
            a{ 
                color: @brand-fg-1-normal;
            }
        }
    }
}



.colorLevel (@level, @color) {
      path:nth-child(@{level}) {
        fill: @color;
      }
  }
.cus_panel{
    .deviceStatus{
        width: 8 / @px-unit;
        height: 8 / @px-unit;
    }

    
    .suffixSearch{
        width: 20 / @px-unit;
        height: 20 / @px-unit;
    }
    
    .anpr, 
    .audioDetection,
    .camExternalAlarm,
    .crowdDistri, 
    .elevatorDetect, 
    .faceDetection, 
    .faceRecognition,
    .fisheye,
    .highTossDetection,
    .ivs,
    .objectDetection,
    .peopleCounting,
    .personnelDetection,
    .phoneCallDetection,
    .portraitDetection,
    .smartGate,
    .smartTrack,
    .smd,
    .smokeDetection,
    .soundDetection,
    .stereoBehavior,
    .videoMetadata {
        .colorLevel(1, @brand-stroke-1-normal);
        .colorLevel(2, @neutral-fg-3-normal);
    }

    
    .aiPlan,
    .accessControlAlarm,
    .ExactSearch,
    .ppeDetection, 
    .thermalAlarm, 
    .videoDetection,
    .videoTalk {
        .colorLevel(1, @neutral-fg-3-normal);
        .colorLevel(2, @brand-stroke-1-normal);
    }

    .camOffline {
        .colorLevel(1, @status-error-fg-1-normal);
        .colorLevel(2, @neutral-fg-3-normal);
    }
    
    .videoException {
        .colorLevel(1, @status-warning-fg-1-normal);
        .colorLevel(2, @neutral-fg-3-normal);
    }
    .subMap,
    .subMap_start,
    .subMap_end {
        .colorLevel(1, @white);
        .colorLevel(2, @brand-stroke-1-normal);
    }
    
    &.disabled_icons{
        .delete_icon{
            .colorLevel(1, @neutral-fg-disabled)
        }
    }
    &:not(.disabled_icons){
        .delete_icon{
            .colorLevel(1, @neutral-fg-2-normal)
        }
    }
}


.H5 {
    z-Index: 9999;
    position: relative;
    .h5player_elements {
        position: absolute;
        
        .cus_panel.bg-1:not(.disabled_icons):not(.noHover){
            &:hover{
                svg > rect:first-child {
                    fill: @neutral-bg-4-hover;
                }  
            }
            &:active{
                svg > rect:first-child {
                    fill: @neutral-bg-1-active-2;
                }  
            }
        }
    }
    .h5player {
        background-color: @ocxBg;
        .h5player_header {
            background-color: @ocxToolbarBg;
            color: @neutral-fg-on-color;
            height: 24/@px-unit;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .h5player_header_left {
            margin-left: 2/@px-unit;
            font-size: 16 / @px-unit;
            span {
                padding-right: 10/@px-unit;
                span {
                    padding-left: 10/@px-unit;
                }
            }
        }
        .h5player_header_right {
            display: flex;
            justify-content: flex-end;
            
            .cus_panel{
                margin-right: 4/@px-unit;
                margin-top: 4/@px-unit;
            }
        }
        .h5player_triggerHeader {
            background-color: transparent;
            height: 100%;
            width: 100%;
            position: absolute;
            z-index: 1;
            .h5player_floatingHeader {
                background-color: @ocxToolbarBg;
                color: @neutral-fg-on-color;
                height: 40/@px-unit;
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                opacity: 0.75;
                .h5player_floatingHeader_left,
                .h5player_floatingHeader_right {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                }
            }
        }  
        .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: @neutral-fg-on-color;
            top: 50%;
            margin-top: -40/@px-unit;
        }
        .h5player_center {
            position: absolute;
            top: 50%;
            width: 100%;
            text-align: center;
            .h5player_center_left,
            .h5player_center_right {
                display: flex;
                justify-content: center;
                .h5player_center_Icon {
                    line-height: 24/@px-unit;
                    padding-top: 4/@px-unit;
                }
                .label-normal-container  {
                    padding-top: 0/@px-unit !important;
                    padding-bottom: 0/@px-unit !important;
                    .h5player_center_Text {
                        color: @brand-fg-1-normal;
                        &:hover {
                            color: @brand-fg-1-hover;
                        }
                    }
                }
            }
        }     
        
        .openGate{
            width: 40 / @px-unit;
            height: 40 / @px-unit;
            background-repeat: no-repeat;
            background-image: url('/static/media/openGate_normal.png');
            &:hover{
                background-image: url('/static/media/openGate_hover.png');
            }
            &:active{
                background-image: url('/static/media/openGate_select.png');
            }
        }
    }
}



._LogManage_ {
    .Type{
        display: flex;
        
        width: 100%;
        .TimeRange{
            display: flex;
            align-items: center;
            margin-left: 15 / @px-unit;
            height: 48 / @px-unit;
        }
        .Search{
            margin-left: auto;
            right: 20 / @px-unit;
        }
    }
    .DateRange{
        display: flex;
        justify-content: space-between;
        align-items:flex-end;
        height: 48 / @px-unit;
    }
    .Clear{
        display: flex;
        float: right;
        margin-top: 40 / @px-unit;
        .label-div-Container{
            margin-left: 10 / @px-unit;
        }
    }
}
.LogManage_detailModal{
    width: 650/@px-unit !important;
    .loginfo_Table{
        height: 291/@px-unit;
        
    }
    .ant-modal-footer{
        height: 53 / @px-unit;
        .LogManage_detailButton{
            display: flex;
            float: right;
            .label-div-Container{
                margin-left: 10 / @px-unit;
            }
        }
    }
    ._Table_ .ant-table {
        max-height: 290 / @px-unit;
        overflow-y: auto;
    }
}
.FileBackupEncrypt{
    width: 100 / @px-unit;
}


@ant-modal-height-height: 50/@px-unit;
@search-height: 160/@px-unit;
@filter-height: 64/@px-unit;

.large-model-container {
    position: relative;
    height: 100%;

    .main-page {
        height: 100%;
        overflow: hidden;
        background: url('/custom_logo/web_bg_largeModel_@{theme}.jpg') no-repeat center / 100% 100%;

        .page-container {
            margin: 140px auto;
            max-width: 1240 / @px-unit;
            text-align: center;
        }
    
        .title {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px 0;
            font-size: 48px;
            margin-bottom: 64px;
            .logo-placeholder {
                width: 400 / @px-unit;
                height: 80 / @px-unit;
                background: url('/custom_logo/web_logo_largeModel_@{theme}.png') no-repeat center / 100% 100%;;
            }
            & > .cus_panel {
                margin-right: 24 / @px-unit;
                font-size: 80 / @px-unit !important;
            }
        }

        .search {
            overflow-x: auto;
        }
    }
}

.search-result-container {
    position: relative;
    display: flex;
    height: 100%;
    .container-top {
        height: 160/@px-unit;
    }
    .container-right {
        height: 100%;
        flex-shrink: 0;
        width: 600/@px-unit;
        flex: 0 1 598/@px-unit;
        padding: 10/@px-unit;
        background-color: @neutral-bg-4-normal;
        border-left: 1px solid @neutral-stroke-2-normal;
        .winPreviewPanel {
            height: 458/@px-unit;
        }
        .record-preview-panel {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .record-preview-header {
            height: 41/@px-unit;
            width: 100%;
            box-sizing: border-box;
            line-height: 40/@px-unit;
            border-bottom: 1/@px-unit solid @neutral-stroke-2-normal;
            padding-left: 20/@px-unit;
        }
    }
    .container-middle {
        background-color: @neutral-bg-5-normal;
        position: relative;
        height: 100%;
        overflow: hidden;
        flex: 1 1 958/@px-unit;
        .middle-empty, .middle-violation {
            width: 100%;
            height: calc(100% - @search-height - @filter-height);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .middle-layout-loading {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            height: calc(100% - @search-height - @filter-height);
        }
        .result-up-bar {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: nowrap;
            padding: 16/@px-unit;
            .label-normal-container {
                padding-top: 0 !important;
                padding-bottom: 0 !important;
            }
            .left-bar-wrapper {
                display: flex;
                align-items: center;
                .label-div-Container, .ant-dropdown-button {
                    margin-right: 12/@px-unit;
                }

                .allCheckWrap {
                    display: flex;
                }

                .allCheckBehind {
                    width: auto !important;
                    min-width: 50 / @px-unit;
                }
            }
            .right-bar-wrapper {
                display: flex;
                align-items: center;
                &>.label-div-Container {
                    .label-normal-container {
                        padding: 0 !important;
                    }
                    margin-right: 16/@px-unit;
                }
                .similar-sort-icon {
                    position: relative;
                    right: -9/@px-unit;
                }
            }
            .cursor-not-allowed {
                height: 32/@px-unit;
            }
        }
        .result-wrapper {
            display: flex;
            width: 100%;
            padding: 16/@px-unit 0 16/@px-unit 16/@px-unit;
            padding-top: 0;
            height: calc(100% - @search-height - @filter-height);
            flex-direction: column;
            .result-down-bar {
                display: flex;
                align-items: center;
                margin-top: 8/@px-unit;
                height: 36/@px-unit;
                padding-right: 8 / @px-unit;
            }
            .img-card-group {
                flex: 1;
                overflow-x: hidden;
                overflow-y: auto;    
                .card-group-wrapper {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 16/@px-unit;
                    padding: 8/@px-unit;
                    padding-right: 0/@px-unit;
                    padding-left: 0/@px-unit;
                    .pro-card {
                        &:hover {
                            .card-extendHeader{
                                .collect-icon {
                                    display: flex;
                                }
                            }
                        }
                        .card-extendHeader {
                            .collect-icon {
                                position: absolute;
                                right: 4 / @px-unit;
                                top:4 / @px-unit;
                                cursor: pointer;
                                display: none;
                                z-index: 9;
                            }
                            .collect-active-icon.collect-icon {
                                display: flex;
                                color: @status-yellow-fg-1-normal;
                            }
                        }
                    }
                }

                .searching-mask, .no-result-mask {
                    height: 100%;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
          

            }
            .card-wrapper-selected {
                border: 1/@px-unit solid  @brand-stroke-1-hover !important;
            }
        }
        
        .container-top {
            padding: 24 / @px-unit;
            display: flex;
            overflow-x: auto;
            background: @bm-bg-3-gradient;

            .back {
                width: 64 / @px-unit;
                height: 64 / @px-unit;
                margin: 4 / @px-unit 12 / @px-unit 0 0;
                background-color: @neutral-bg-4-hover;
                border-radius: 4 / @px-unit;
                text-align: center;
                line-height: 64 / @px-unit;
                cursor: pointer;

                .cus_panel {
                    vertical-align: middle;
                }

                &:hover {
                    background: @neutral-bg-1-hover-2;
                }
            }

            .large-model-search {
                flex: 1;
            }

            .text-layout-control {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 64 / @px-unit;
                height: 64 / @px-unit;
                border-radius: 8 / @px-unit;
                background: @neutral-bg-4-hover;
                cursor: pointer;

                &:hover {
                    background: @neutral-bg-1-hover-2;
                }
            }
        }
    }
    .middle-violation {
        .middle-empty {
            .widget-empty-image{
                background-image: url('/static/media/illegalWords_@{theme}.png');
                width: 160 /@px-unit;
                height: 160 /@px-unit;
                display: inline-block;
                background-repeat: no-repeat;
            }
        }
    }
}


@homeHeaderColor:@neutral-fg-on-1-normal;
.homeside-enter,
.homeside-appear {
    opacity: 0;
}
.homeside-enter-active,
.homeside-appear-active {
    opacity: 1;
    transition: opacity 200ms ease-in;
}
.homeside-enter-done {
    opacity: 1;
}
.homeside-exit {
    opacity: 1;
}

.homeside-exit-active {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

.homeside-exit-done {
    opacity: 0;
}
.clearfix {
    &::after {
        content: '.';
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }
}


.header-contain {
    padding: 14 / @px-unit  0;
    height: @navMenuHeight;
    background-color: @neutral-bg-6-1-normal;
    color: @homeHeaderColor;
    z-index: 1000;
    
    .iconDropBtn{
        span{
            color: @homeHeaderColor;
        }
    }
    
    .TaskBarAlarmInfo{
        .ant-badge{
            color: @homeHeaderColor;
        }
    }
    .ant-tabs-nav-list{
        .ant-tabs-tab {
            margin-left: 0 !important;
            padding: 0 12 / @px-unit !important;
            > div {
                margin: 0 !important;
            }
            .ant-tabs-tab-remove {
                padding: 0 !important;
                margin: 0 0 0 8 / @px-unit !important;
            }
        }
    }
    
    .ant-tabs-tab.ant-tabs-tab-with-remove{
        background-color: unset;
        color: @neutral-fg-on-1-normal;
        button{
            visibility: hidden;
        }
        
        &:hover{
            background-color: @neutral-bg-1-hover-3;
            color: @neutral-fg-on-1-normal;
            button{
                visibility: visible;
            }
        }
        &.ant-tabs-tab-active{
            
            background-color: @neutral-bg-1-selected-3;
            color: @neutral-fg-on-1-selected;
            button{
                visibility: visible;
            }
        }
    }

    .home_header_right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 16 / @px-unit;
        height: @navMenuLineHeight;
        > span.header-time {
            font-size: @font-size-digit-m;
            line-height: 24 / @px-unit;
            
            
        }
        .headerDivider {
            margin: 0 4 / @px-unit;
        }
    }
    .home_header_left {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: @navMenuLineHeight;
        > div:first-child {
            margin-left: 8px;
        }
        .headerDivider {
            margin: 0 12 / @px-unit;
        }
    }
    .headerDivider {
        height: 18 / @px-unit;
        top: 0;
        
    }
    .home-logo-img {
        height: 56 / @px-unit;
        width: 160 / @px-unit;
        background-size: contain;
        background-repeat:no-repeat;
        
        background-image: url('/custom_logo/web_home_logo.png');
        background-repeat:no-repeat;
    }

}
.header-time {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.homaMain-contain {
    height: calc(100vh - @navMenuHeight);
    position: absolute;
    width: 100%;
    overflow-x: auto;
}

.MainPageTip {
    text-align: center;
}

.PasswordExpired {
    .PasswordExpiredTip {
        display: flex;
        .cus_icons:not(.disabled_icons) svg path:first-child {
            fill: @status-warning-fg-1-normal;
        }
        .Tip {
            margin-left: 5 / @px-unit;
            margin-top: 5 / @px-unit;
        }
    }
    .PasswordNoTip {
        margin-left: 10 / @px-unit;
    }
}

.HomeQRCode {
    .ant-spin-container{
        display: flex;
        justify-content: space-around;
    }
    .QRCode {
        width: 212 / @px-unit;
        height: 212 / @px-unit;
        padding: 10 / @px-unit;
        background-color: @QRCodeBg;
        margin: 10 / @px-unit 20 / @px-unit;
    }
    .ImageCode {
        .ant-image {
            width: 212 / @px-unit;
            height: 212 / @px-unit;
            margin: 10 / @px-unit 20 / @px-unit;
        }
    }
    .DescribeText {
        text-align: center;
    }
}




._Backup_ {
    height: 100%;
    padding: 0 !important;
    overflow-x: auto;
    
    
    

    display: flex;
    flex-wrap: nowrap;
    border-left: 1/@px-unit solid @neutral-stroke-2-normal;

    .ant-layout {
        flex-direction: row;
    }

    .main-layout {
        height: 100%;

        .layout-sider {
            flex: none;
        }

        .middle-layout {
            flex: 1 1 958/@px-unit;
        }
        .middle-empty {
            flex: 1 1 958/@px-unit;
        }

        .video-layout {
            flex: 0 1 598 / @px-unit;
        }
    }

    .line-row {
        display: flex;
    }
}


.ClusterLog_detailModal{
    width: 650/@px-unit !important;
    .loginfo_Table{
        height: 290/@px-unit;
    }
    ._Table_ .ant-table-body {
        min-height: 290 / @px-unit;
    } 
    .ant-modal-footer{
        height: 53 / @px-unit;
        .ClusterLog_detailButton{
            display: flex;
            justify-content: space-between;
            .ClusterLog_btnLeft {
                display: flex;
                float: left;
            }
            .label-div-Container{
                margin-left: 10 / @px-unit;
            }
        }
    }
}
.ClusterLog_timePicker {
    display: flex;
    justify-content: space-between;
    .ClusterLog_datePicker {
        display: flex;
        .ClusterLog_right {
            margin-left: 20 / @px-unit;
        }
    }
}



._ClusterDevice_ {
    
    
    
    padding-top: inherit; 
    
}




._SAFESecurityStatus_ {
    ._SAFESecurityStatus_title {
        background-color: inherit;
    }
    ._SAFESecurityStatus_detect {
        height: 32/@px-unit;
        width: 100/@px-unit;
    }
    .item-list-btn {
        border-color: @neutral-stroke-1-normal;
    }
}

.safeopr-table-normal {
    .ant-table-placeholder{
        display: none;
    }
}
.safeopr-configBar {
    background-color: @neutral-bg-4-normal;
    border-top: 1px solid @neutral-stroke-2-normal;
    position: absolute;
    left: 0;
}

.FireWall-tab {
    a {
        color: @neutral-fg-3-normal;
        &:hover {
            color: @brand-fg-1-normal;
        }
    }
}

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

.Cert {
    .ant-input-number {
        width: 100%;
    }
}

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

._RecordBack_ {
    padding-top: inherit;
    .editable-cell-value-wrap {
        height: auto;
    }
    ._Table_ .ant-table-body {
        min-height: 600 / @px-unit;
    }
}
.recordinfo-footer-btn {
    display: inline-block;
    .label-div-Container {
        display: inline-block;
        &:first-child {
            margin-right: 10 /@px-unit;
        }
    }
}

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



._ParkingLot_ {
    background: @parkingBg;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    overflow: auto;
    .TaskBarAlarmInfo {
        .cus_panel {
            color: @neutral-fg-on-1-selected !important;
        }
    }
    .parking-lot-icon {
        color: @neutral-fg-on-1-selected !important;
    }
}


._EventConfig_ {
        
}


.clusterControl {
    display: flex;
    .open {
        padding-right: 20 / @px-unit !important;
    }
}


._AIOverView_ {
    
    
    
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;

    &.MainPage {
        min-height: 750 / @px-unit;
    }

    
    .main-page-loading {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .AIOverview_PageView {
        height: 100%;

        .AIOverview_Container {
            height: 100%;
            overflow-y: hidden;
            display: flex;
            flex-direction: column;

            
            .tab-menu {
                height: 100%;
                background-color: @neutral-bg-4-normal;
                overflow-y: hidden;

                .progress {
                    padding-right: 24/@px-unit;

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

                .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-top: 8/@px-unit;
                
                height: 100 / @px-unit;
                flex: 1;
                display: flex;
                flex-direction: column;

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

                .TableList-table {
                    
                    height: 100 / @px-unit;
                    flex: 1;

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

    
    ._PowerPanel_ {
        margin-top: 16 / @px-unit;
        border-radius: 4 / @px-unit;

        .layout-sider {
            .sider-content {
                overflow-y: hidden !important;
            }
        }

        .ant-card {
            height: 44 / @px-unit;
        }

        .ant-card-head {
            background-color: @neutral-bg-4-hover;

            .ant-card-head-title {
                font-size: @font-size-title-s;
                font-weight: 400;
                line-height: 44 / @px-unit;
                padding: 0;
            }
        }

        .ant-card-body {
            display: none;
        }

        .layout-sider {
            background-color: @neutral-bg-4-normal;

            .sider-content {
                padding-bottom: 16 / @px-unit;
                border-left: 1/@px-unit solid @neutral-bg-4-hover;
                border-right: 1/@px-unit solid @neutral-bg-4-hover;
                border-bottom: 1/@px-unit solid @neutral-bg-4-hover;
                display: flex;
                flex-wrap: wrap;

                ._IntellPanel_ {
                    width: 25%;
                    height: 50 / @px-unit;
                    margin-top: 16/@px-unit;
                    display: flex;
                    justify-content: center;

                    .panel_container {
                        width: 80%;
                        height: 50 / @px-unit;

                        .panel_content {
                            width: 100%;
                            height: 30 / @px-unit;
                            display: flex;
                            justify-content: space-between;
                            line-height: 30 / @px-unit;

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

                            .panel_content_percent {
                                width: 50 / @px-unit;
                                text-align: end;
                                white-space: nowrap;
                                
                            }

                            .panel_content_percent_inUse {
                                color: @brand-fg-1-normal;
                            }
                        }

                        .panel_progress {
                            width: 100%;
                            height: 8 / @px-unit;
                        }

                        .ant-progress-status-success .ant-progress-bg {
                            background-color: @brand-stroke-1-normal;
                        }
                    }
                }

                .intellDivider {
                    border-right: 1/@px-unit solid @neutral-bg-4-hover;
                }
            }
        }
    }

}

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


._PasswordReset_ {
    .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: @QRCodeBg;
        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;
}



._Backup_ {
    .video-layout {
        background-color: @neutral-bg-4-normal;
        .winPreviewPanel {
            height: 458/@px-unit;
        }
        .backup-videoLayout-picPanel{
            width: 100%;
            height: 458/@px-unit;
        }
        overflow: hidden;
    }
    .video-detail-panel{
        padding: 24 / @px-unit;
    }
    .detail-label-color{
        color: @neutral-fg-2-normal;
    }
}



.ui5_init-wrapper {

  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: @neutral-bg-1-normal;

  .init-nav {
    background: @neutral-bg-6-1-normal;
    color: @neutral-fg-2-normal;
    height: 56 / @px-unit;
    padding: 0 24/ @px-unit;
    line-height: 56 / @px-unit;
    font-size: 20/ @px-unit;
  }

  .init-content {
    @diffHeight: 158 / @px-unit;
    height: calc(100vh - @diffHeight);
      
    min-width: 768 / @px-unit;
    margin: 0 10%;

    .init-tab {
      @diffH: 250 / @px-unit;
      height: calc(100vh - @diffHeight - @diffH);
      
      overflow-y: auto;
    }

    .init-form-tab {
      width: 700 / @px-unit;
      margin: 0 auto;
      padding-top: 40 / @px-unit;

      .label-div-Container {
        .label-normal {
          width: 200 / @px-unit  !important;
        }

        
        
        
        
        

      }

      .time-select-wrapper {
        width: 480 / @px-unit;
        display: flex;
        >div:not(:last-child) {
          margin-right: 12 / @px-unit;
        }
        .label-normal-wrapper{
          width: 100% !important;
          .ant-picker {
            width: 100%;
          }
        }
      }
      .init-weak-password {
        margin-bottom: 8 / @px-unit ;
      }
    }
    .region-tab {
      @diffH: 220 / @px-unit;
      height: calc(100vh - @diffHeight - @diffH);  
    }

    .init-policy-tab {
      @diffH: 210 / @px-unit;
      height: calc(100vh - @diffHeight - @diffH);
      .InitGuide-Law {
        height: 100%;
        


        display: flex;
        flex-direction: column;

        .law-tabs {
          @diffW: 60 / @px-unit;
          flex: 1;
          height: calc(100% - @diffW);
          .ant-tabs-tab {
            margin: 0 10 / @px-unit;
          }
        }
        .LegalText {
          overflow-y: auto;
          margin: 24 / @px-unit;
          margin-bottom: 0;
          font-size: 14 / @px-unit;
        }

        .LicenceNoted {
          display: block;
          margin-left: 24 / @px-unit;
          &-title {
            color: @brand-fg-1-normal !important;
          }
        }
      }
    }
  }


}
.online-tip {
  .ant-tooltip-inner {
    width: 440 / @px-unit; 
  }
}
.country-modal {
 
  .ant-modal-body {
    padding: 16 / @px-unit; 
  }
  .warn-title-wrapper {

    .warn-title-header {
      font-size: 16 / @px-unit; 
      display: flex;
      align-items: center;
      .warn-title-text {   
        margin-left: 4 / @px-unit; 
        color: @neutral-fg-1-normal;
      }
    }
    .warn-title-content {
      padding-left: 36 / @px-unit; 
      font-size: 16 / @px-unit; 
      color: @neutral-fg-3-normal;
      margin-top: 8 / @px-unit; 
    }
    .warn-title-footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      >* {
        margin-left: 12 / @px-unit;
      }
    }
  }
}

    
.oversea_init-wrapper {
  @initBoxH: 735 / @px-unit;
  @initBoxW: 584 / @px-unit;
  width: @initBoxW;
  height: @initBoxH;
  padding: 40 / @px-unit;
  position: absolute;
  top: calc(50% - @initBoxH / 2);
  border-radius: 8 / @px-unit;
  background: @neutral-bg-4-normal;
  right: 120 / @px-unit;
  .InitGuide-Law {
    .LicenceNoted {
      .LicenceNoted-title {
        color: @brand-fg-1-normal !important;
        white-space: wrap;
      }
    }
  }
}

@lawModalBodyHeight: 700 / @px-unit;
@tabHeaderHeight: 50 / @px-unit;
@lawModalBodyBottomHeight: 50 / @px-unit;
.law_Policy_modal {
  .ant-modal-content {
    height: 100%;
  }
  .ant-modal-body {
    height: @lawModalBodyHeight;
    padding: 0 !important;
    .modal-body-content {
      position: relative;
      .ant-tabs {
        .ant-tabs-nav {
           width: 100%;
           height: @tabHeaderHeight;
        }
        .ant-tabs-content-holder {
          height: calc(@lawModalBodyHeight - @tabHeaderHeight - @lawModalBodyBottomHeight);
          .ant-tabs-content {
            height: 100%;
            overflow: auto;
            padding: 24 / @px-unit;
          }
        }
      }
      .modal-body-bottom {
        padding-left: 24 / @px-unit;
        height: @lawModalBodyBottomHeight;
        .LicenceNoted-title {
          color: @brand-fg-1-normal !important;
        }
      }
    }
  }
}



.record-device-info, .record-device-info {
    display: flex;
    .label-normal-wrapper {
        width: 150/@px-unit !important;
    }
}
.recordBackModal {
    ._Table_ .ant-table-body {
        min-height: 500 / @px-unit;
    }
}


.ui5_init-wrapper {

  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: @neutral-bg-1-normal;

  .init-nav {
    background: @neutral-bg-6-1-normal;
    color: @neutral-fg-2-normal;
    height: 56 / @px-unit;
    padding: 0 24/ @px-unit;
    line-height: 56 / @px-unit;
    font-size: 20/ @px-unit;
  }

  .init-content {
    @diffHeight: 158 / @px-unit;
    height: calc(100vh - @diffHeight);
      
    min-width: 768 / @px-unit;
    margin: 0 10%;

    .init-tab {
      @diffH: 250 / @px-unit;
      height: calc(100vh - @diffHeight - @diffH);
      
      overflow-y: auto;
    }

    .init-form-tab {
      width: 700 / @px-unit;
      margin: 0 auto;
      padding-top: 40 / @px-unit;

      .label-div-Container {
        .label-normal {
          width: 200 / @px-unit  !important;
        }

        
        
        
        
        

      }

      .time-select-wrapper {
        width: 480 / @px-unit;
        display: flex;
        >div:not(:last-child) {
          margin-right: 12 / @px-unit;
        }
        .label-normal-wrapper{
          width: 100% !important;
          .ant-picker {
            width: 100%;
          }
        }
      }
      .init-weak-password {
        margin-bottom: 8 / @px-unit ;
      }
    }
    .region-tab {
      @diffH: 220 / @px-unit;
      height: calc(100vh - @diffHeight - @diffH);  
    }

    .init-policy-tab {
      @diffH: 210 / @px-unit;
      height: calc(100vh - @diffHeight - @diffH);
      .InitGuide-Law {
        height: 100%;
        


        display: flex;
        flex-direction: column;

        .law-tabs {
          @diffW: 60 / @px-unit;
          flex: 1;
          height: calc(100% - @diffW);
          .ant-tabs-tab {
            margin: 0 10 / @px-unit;
          }
        }
        .LegalText {
          overflow-y: auto;
          margin: 24 / @px-unit;
          margin-bottom: 0;
          font-size: 14 / @px-unit;
        }

        .LicenceNoted {
          display: block;
          margin-left: 24 / @px-unit;
        }
      }
    }
  }


}
.online-tip {
  .ant-tooltip-inner {
    width: 440 / @px-unit; 
  }
}
.country-modal {
 
  .ant-modal-body {
    padding: 16 / @px-unit; 
  }
  .warn-title-wrapper {

    .warn-title-header {
      font-size: 16 / @px-unit; 
      display: flex;
      align-items: center;
      .warn-title-text {   
        margin-left: 4 / @px-unit; 
        color: @neutral-fg-1-normal;
      }
    }
    .warn-title-content {
      padding-left: 36 / @px-unit; 
      font-size: 16 / @px-unit; 
      color: @neutral-fg-3-normal;
      margin-top: 8/ @px-unit; 
    }
    .warn-title-footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      >* {
        margin-left: 12 / @px-unit;
      }
    }
  }
}


._ParkingLot_ {
    @pageHeaderHeight: 73 /@px-unit;
    @RecordListHeight: 226 /@px-unit;

    .main-page {
        display: flex;
        flex-direction: column;
        height: 100%;
        position: relative;
        min-width: 1280px;
        min-height: 720px;
        overflow: auto;
        
        .left-top-cover {
            position: absolute;
            left: 0;
            top: 0;
            width: 8/@px-unit;
            height: 8/@px-unit;
            background: url('/static/media/bgStroke_ul.png') no-repeat center / 100% 100%;
        }

        .left-line {
            position: absolute;
            left: 0;
            top: 8/@px-unit;
            bottom: 8/@px-unit;
            width: 8/@px-unit;
            background: url('/static/media/bgStroke_left.png') no-repeat center / 100% 100%;
        }

        .left-bottom-cover {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 8/@px-unit;
            height: 8/@px-unit;
            background: url('/static/media/bgStroke_br.png') no-repeat center / 100% 100%;
        }

        .right-line {
            position: absolute;
            right: 0;
            top: 8/@px-unit;
            bottom: 8/@px-unit;
            width: 8/@px-unit;
            background: url('/static/media/bgStroke_right.png') no-repeat center / 100% 100%;
        }

        .right-bottom-cover {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 8/@px-unit;
            height: 8/@px-unit;
            background: url('/static/media/bgStroke_bl.png') no-repeat center / 100% 100%;
        }

        .bottom-line {
            position: absolute;
            bottom: 0;
            left: 8/@px-unit;
            right: 8/@px-unit;
            height: 8/@px-unit;
            background: url('/static/media/bgStroke_bottom.png') no-repeat center / 100% 100%;
        }

        .top-right-cover {
            position: absolute;
            top: 0;
            right: 0;
            width: 8/@px-unit;
            height: 8/@px-unit;
            background: url('/static/media/bgStroke_ur.png') no-repeat center / 100% 100%;
        }
    }

    .page-content {
        display: flex;
        padding: 45 / @px-unit 8/@px-unit 8/@px-unit 8/@px-unit;
        position: relative;
        flex-direction: column;
        height: calc(100% - @pageHeaderHeight);


        .content-center {
            display: flex;
            width: 100%;
            height: calc(100% - @RecordListHeight);
            padding: 0 24 /@px-unit;

            .left-preview {
                height: 100%;
                flex: 1;
            }

            .right-info {
                height: 100%;
                width: 40%;
                max-width: 532 /@px-unit;
                min-width: 352 /@px-unit;
            }

            
            @media screen and (max-height: 800px) {
                .right-info {
                    width: 22%;
                }
            }
        }

    }
}


._User_ {
    padding-left: 20 / @px-unit;
    padding-top: 20 / @px-unit;
    padding-right: 10 / @px-unit;
    width: 100%;
    ._Table_ {
        .ant-table {
            .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;
            padding: 40/ @px-unit 24/ @px-unit;
            .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;
    }
    .ant-popover-content {
        width: 550 / @px-unit;
    }
    .tabText {
        overflow: hidden;
        white-space: nowrap;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }
}

.deviceInfoContainer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .device-info-modal{ 
        width: 374 / @px-unit;
        
        .device-info-buttons{
            display: flex;
            justify-content: space-evenly;
            .label-normal-wrapper  {
                width: 140 / @px-unit !important;
            }
        }
    }
    .QRCode-pagination{
        display: flex;
        justify-content: center;
    }
    .deviceRedPacket{
        border-left: 1 / @px-unit solid @neutral-stroke-2-normal;
    }
}

.HomeRedEnQRCode {
    .DescribeText {
        text-align: left;
        margin-left: 20 / @px-unit;
        margin-right: 10 / @px-unit;
        display: flex;
        justify-content: space-between;
        .ant-pagination{
            width: auto;
        }
        .label-normal-wrapper {
            
            width: auto !important;
        }
    }
    .descInfo{
        color: @neutral-fg-3-normal;
    }
    .serviceSpan{
        
        height: 25 /@px-unit;
        padding-top:0 !important;
        padding-bottom:0 !important;
    }
}



._EventConfig_ {
    & > .page-view {
        display: flex;
        background: @neutral-bg-6-normal;
        & > .page-content-wrapper{
            margin: 16 / @px-unit;
            flex: 1;
            overflow: hidden;
            position: relative;
            & >  .page-content{
                @ContentPadding: 16 / @px-unit;
                height: calc(100vh - @navMenuHeight - @ContentPadding * 2);
                padding-bottom: 60 /@px-unit;
                background: @neutral-bg-4-normal;
                overflow: auto;
                position: relative;
                .MainPage {
                    padding: 0 @mainPagePadding @mainPagePadding @mainPagePadding;
                    &.noTabPage {
                        padding-top: @mainPagePadding;
                    }
                    .ant-tabs.card-tabs {
                        padding-top: 16/@px-unit;
                    }
                    .intell-contant-main{
                        height: 95%;
                        overflow: auto;
                        padding-right: @mainPagePadding;
                    }
                    ._Table_ {
                        .operation-button {
                            .ui5-margin-wrapper-item {
                                .label-normal-container {
                                    padding-top: 0 !important;
                                    padding-bottom: 0 !important;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    
    .operate-menu-left{
        @menuHeadHeight: 45 / @px-unit;
        @menuContentMargin: 16 / @px-unit;
        @searchTreeMargin: 12 / @px-unit;
        @listHeight: 36 / @px-unit;
        width: 260 /  @px-unit;
        height: calc(100vh - @navMenuHeight);
        background: @neutral-bg-4-normal;    
        overflow: hidden;
        border-right: 1 / @px-unit solid @neutral-stroke-2-normal;

        .menu-header {
            height: @menuHeadHeight;
            box-sizing: content-box;
            font-size: @font-size-title-m;
            font-weight: 700;
            line-height: @menuHeadHeight;
            padding: 0 16 / @px-unit;
            border-bottom: 1 / @px-unit solid @neutral-stroke-2-normal;
            
        }
        .menu-content {
            margin: @menuContentMargin 0;
        }
        .channel-search {
            margin: 0 @menuContentMargin;
        }
        .menu-content-device {
            margin: 0 @searchTreeMargin;
        }