width: 100%;
}



@Length338: 337.5/@px-unit;
@Length450: 450/@px-unit;
@Length800: 800/@px-unit;
@Length600: 600/@px-unit;
@Length1320: 1320/@px-unit;
._OriginalDrawingOSD_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .m-p-16;
    width: 100%;

    .video-wrap {
        width: @Length600;
        height: @Length338;
        background: #1b1b1b;
    }
    .view-wrap-leave {
        width: calc(100vw - @Length1320);
        min-width: @Length600;
    }
}


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

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

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




._SnapCutoutConf_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .m-p-16;
    width: 100%;
    .ant-tabs {
        height: auto;
    }

    .face-swap {
        width: 85px;
        height: 85px;
    }
}


._ViewSettingComponent_ {
    .blackHeight-wrapped {
        .ant-input-number {
            width: 100%;
        }
    }
}




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

._DrawerContentComponent_ {
    // UI组件特有的CSS，
    padding-top: 0; //为了不eslint告警写一个
    .ant-collapse {
        .ant-collapse-item {
            .ant-collapse-header {
                padding: 16 / @px-unit;
            }
            .ant-collapse-content {
                fieldset {
                    border: 1/ @px-unit solid #d9d9d9;
                }
                .label-normal-wrapper {
                    .ant-input-number {
                        width: 100%;
                    }
                }
            }
        }
    }
}



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

    .ant-drawer {
        .ant-drawer-content-wrapper {
            .ant-drawer-content {
                .ant-drawer-wrapper-body {
                    .ant-drawer-header {
                        border-bottom: 0;
                        padding-left: 25/@px-unit;
                        padding-top: 40 / @px-unit;
                    }
                }
            }
        }
    }
}



._RS485Config_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .bg {
        background-color: @main_background_color;
    }
    .m-ml--16{
        margin-left: -16/@px-unit;
    }
    .dhrs-item{
        margin-top: 20/@px-unit;
        padding: 0/@px-unit 16/@px-unit 16/@px-unit 16/@px-unit;
        background-color: #FFF;
    }


    .dhrs-tab-style .ant-tabs-nav-list .ant-tabs-tab {
        height: 152/@px-unit;
        width: 124/@px-unit;
        margin-right: 40/@px-unit;
        padding: 0;
        border: 1/@px-unit solid rgba(0,0,0,0.15) !important;
        border-radius: 4/@px-unit;
    }
    .dhrs-tab-style .ant-tabs-nav-list .ant-tabs-tab-active{
        border-color: #1890ff !important;
    }

    .tab-style {
        width: 122/@px-unit;
        height: 150/@px-unit;
        div {
            width: 100%;
            height: 30/@px-unit;
            line-height: 30/@px-unit;
            text-align: center;
        }
        div.tab-img{
            margin-top: 16/@px-unit;
            margin-left: 23/@px-unit;
            width: 72/@px-unit;
            height: 72/@px-unit;
        }
        .icon{
            font-size: 72/@px-unit;
            color: rgba(0, 0, 0, 0.25);
        }
       
    }
    .dhrs-tab-style{
        .delete-icon{
            font-size: 16/@px-unit;
            font-weight: bold;
        }
    }
    
    .tab-style.tab-add{
        color: rgba(0, 0, 0, 0.45);
        .ant-dropdown-menu-item-active{
            background-color: @tab-active-color;
        }
    }
    .ant-tabs-nav .ant-tabs-tab .anticon {
        margin-right: 0;
    }

    .status::before{
        content: '';
        display: inline-block;
        margin-bottom: 1/@px-unit;
        margin-right: 4/@px-unit;
        width: 8/@px-unit;
        height: 8/@px-unit;
        background-color: #ffffff;
        border-radius: 5/@px-unit;
    }
    .status.status-normal::before{
        background-color: #71BA05;
    }
    .status.status-offline::before{
        background-color: red;
    }

    .ant-tabs-tab:hover .icon-tab-delete{
        opacity: 1;
    }

    .icon-tab-delete{
        opacity: 0;
        color: red;
        cursor: pointer;
        font-size: 16/@px-unit;
    }

    .labelText-label-Text {
        line-height: 48/@px-unit;
    }

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


}


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



._SnapSetTabPageConfig_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .m-p-16;
    width: 100%;

    .label-div-Container {
        .label-normal-container .label-normal-wrapper {
            .ant-input-number {
                width: 100%;
            }
        }
    }

    .important-tip {
        color: @errorColorNo17;
    }

    .behind-style {
        .label-div-Container {
            .label-normal-container {
                padding-top: 0 !important;
                padding-bottom: 0 !important;
            }
        }
    }
}



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

    .label-div-Container {
        .label-normal-container .label-normal-wrapper {
            .ant-input-number {
                width: 100%;
            }
        }
    }

    .important-tip {
        color: @errorColorNo17;
    }

    .sucess-tip {
        color: @successColorNo19;
    }
}


._TrafficBlockListConfig_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .m-p-16;
    width: 100%;

    ._Table_ {
        .operate-labelIcon-Wrapper {
            .label-div-Container {
                display: inline-block;
                &:not(:first-child) {
                    margin-left: 10 / @px-unit;
                }
            }
        }
        .table-action-bar {
            clear: both;
        }
    }
    ._Table_ tbody {
        .ant-table-cell {
            padding: 0 !important;
        }
    }
    .table-header {
        .m-float-left {
            .ant-btn {
                &:not(:first-child) {
                    margin-left: 10 / @px-unit;
                }
            }
        }
        .m-float-right {
            .label-normal-container {
                padding-top: 0 !important;
            }
        }
    }
    .CareWord-behind {
        padding-left: 0;
        .label-div-Container {
            float: left;
            .label-normal-container  {
                padding-top: 0 !important;
                padding-right: 20/@px-unit;
                .ant-checkbox + span {
                    padding-left: 0;
                }
                .label-normal-behind {
                    padding-left: 0;
                    width: auto !important;
                }
            }
        }
    }

    .plateNo-content {
        .label-div-Container {
            float: left;
        }
    }

    .important-tip {
        color: @errorColorNo17;
    }

    .sucess-tip {
        color: @successColorNo19;
    }

    .ant-calendar-picker {
        width: 100%;
    }

    .upload-modal {
        .ant-modal-body {
            padding: 24/@px-unit 68/@px-unit;
            .upload-wrapper {
                width: 384/@px-unit;
                height: 192/@px-unit;
                background-color: #ffffff;
                border-radius: 4/@px-unit;
                border: solid 1px rgba(0, 0, 0, 0.15);
            }
        }
    }
}


._TrafficFuzzyMatchConfig_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .m-p-16;
    width: 100%;
}



._TrafficTrustListConfig_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .m-p-16;
    width: 100%;

    .ant-radio-wrapper{
        margin-right: 0;
    }

    ._Table_ {
        .operate-labelIcon-Wrapper {
            .label-div-Container {
                display: inline-block;
                &:not(:first-child) {
                    margin-left: 10 / @px-unit;
                }
            }
        }
        .table-action-bar {
            clear: both;
        }
    }
    ._Table_ tbody {
        .ant-table-cell {
            padding: 0 !important;
        }
    }
    .table-header {
        .m-float-left {
            .ant-btn {
                &:not(:first-child) {
                    margin-left: 10 / @px-unit;
                }
            }
        }
        .m-float-right {
            .label-normal-container {
                padding-top: 0 !important;
            }
        }
    }
    .CareWord-behind {
        padding-left: 0;
        .label-div-Container {
            float: left;
            .label-normal-container  {
                padding-top: 0 !important;
                padding-right: 20/@px-unit;
                .ant-checkbox + span {
                    padding-left: 0;
                }
                .label-normal-behind {
                    padding-left: 0;
                    width: auto !important;
                }
            }
        }
    }

    .plateNo-content {
        .label-div-Container {
            float: left;
        }
    }

    .important-tip {
        color: @errorColorNo17;
    }

    .sucess-tip {
        color: @successColorNo19;
    }

    .ant-calendar-picker {
        width: 100%;
    }

    .upload-modal {
        .ant-modal-body {
            padding: 24/@px-unit 68/@px-unit;
            .upload-wrapper {
                width: 384/@px-unit;
                height: 192/@px-unit;
                background-color: #ffffff;
                border-radius: 4/@px-unit;
                border: solid 1px rgba(0, 0, 0, 0.15);
            }
        }
    }

    .footContent-table-warpper {
        width: 396/@px-unit;
    }
}


._BroadcastContent_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .m-layout-content;
    width: 100%;
}


._OverlyingComponent_ {

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

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

    .important-tip {
        color: @errorColorNo17;
    }
}



._VoiceBroadcastEvent_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .m-layout-content;
    width: 100%;
}


._VolumeCodeSet_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .m-layout-content;
    width: 100%;
}






._Disting_ {
    padding-left: 20/@px-unit;
    padding-top: 20 / @px-unit;
    padding-right: 10 / @px-unit;
    width: 100%;
    .header {
        width:100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 10/@px-unit;
        .switch {
            margin-left: 20/@px-unit;
        }
    }
    .flex-item {
        display: flex;
        flex-wrap: wrap;
    }
}

.car-win-modal {
    .modal-switch {
        display: flex;
        flex-wrap: wrap;
        padding-left: 25/@px-unit;
    }
}



._ParamConfig_ {
    width:100%;
    .card-box {
        display: flex;
        margin-top: 10/@px-unit;
        .left {
            margin-right: 40/@px-unit;
        }
    }
    .chn-item{
        display: flex;
        padding: 10/@px-unit 0 ;
        .name {
            flex: 0 0 100/@px-unit;
            width: 100/@px-unit;
        }
        .box {
            width: 32px;
            height: 32px;
            line-height: 32px;
            box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
            text-align: center;
            border-radius: 2px;
            color: @titleColorNo4;
            border: 1px solid transparent;
            border-color: @inputBorderColorNo10;
            &:hover{
                cursor: pointer;
            }
        }
        .active {
            border-color: @btnHoverColorNo2;
            color: @btnHoverColorNo2;
        }
    }
    .ant-input-number {
        width:100%;
    }
    .sec-num {
        color: #d9d9d9;
    }
}




._PedestrianVolume_ {
  width: 100%;
  padding: 10/@px-unit;
}



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

}




._EventConfiguration_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    width: 100%;
    @bgColor: rgb(246, 247, 249);
    .label-normal-container  {
        padding-top: 0 !important;
        padding-bottom: 16/@px-unit !important;
    }
    .top-bar {
        display: flex;
        align-items: center;
    }
    .video-main {
        display: flex;
        &__right {
            flex:1;
        }
    }
    .after_comm {
        &:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }
    }
    .laneInfo-padding {
        >.label-div-Container, >.laneInfo-type {
            padding-left: 32/@px-unit;
        }
    }
    .laneInfo-width {
        width: 1400/@px-unit;
        padding-top: 16/@px-unit;
        .laneInfo-padding();
        .after_comm();
        .label-div-Container {
            float: left !important;
            width: 660/@px-unit;
        }
        .ant-checkbox-wrapper {
            width: 47/@px-unit !important;
            margin-bottom: 0 !important;
        }
    }
    .checkbox-left {
        .after_comm();
        .label-v4-version {
            float: left;
        }
    }
    .speed_limit > .label-div-Container {
        width: 660/@px-unit;
    }
    .ant-card-body {
        padding-left: 0 !important;
    }
    .hover-top {
        .ant-checkbox-wrapper {
            position: relative;
            width: 25/@px-unit !important;
            .labelCheckbox-content-wrapper {
                position: absolute;
                left: 1px;
                top: -18px;
            }
        }
    }

    .hover-top4 {
        .ant-checkbox-wrapper {
            position: relative;
            width: 25/@px-unit !important;
            .labelCheckbox-content-wrapper {
                position: absolute;
                left: 4px;
                top: -18px;
            }
        }
    }

    .hover-opacity {
        position: relative;
        .hover-icon {
            position: absolute;
            top: 0;
            right: 0;
            color: red;
            opacity: 0;
        }
        &:hover .hover-icon{
            opacity: 1;
        }
    }

    .lane-ml-f20 {
        .ant-menu-item:first-child {
            margin-left: -20px;
        }
    }
    .card {
        &:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }
        .ant-card-head, .ant-card-head-wrapper {
            height: 30/@px-unit !important;
        }
        .ant-card, .ant-divider {
            float: left;
            margin-right: 20/@px-unit;
        }
        .ant-card-body {
            padding: 0 0 0 16/@px-unit !important;
            margin-top: 15/@px-unit;
        }
    }
    .lane-card {
        > .ant-card-body {
            .ant-collapse-content-box, .ant-collapse-header {
                padding: 0 !important;
            }
            padding: 24/@px-unit !important;
        }
        box-shadow: 0 0 5/@px-unit 1/@px-unit @bgColor;
        border-radius: 10/@px-unit;
        .event-card {
            .ant-menu, .ant-layout-sider, .ant-layout-content, .ant-layout{
                background-color: @bgColor !important;
            }
            >.ant-card-body {
                padding: 0 !important;
            }
        }
        .ivs-icon {
            .ant-collapse-expand-icon {
                position: relative;
                top: 5/@px-unit;
            }
        }
    }
    .ivs-divider {
        height: 16/@px-unit;
        background-color: @bodyBgColorNo16;
        margin-left:  -16/@font-size-normal - 40/@px-unit; // 基于当前子元素距离父元素计算出来的距离
        margin-right: -16/@font-size-normal;
    }
    .laneInfo-type {
        background-color: @bgColor;
        margin-bottom: 16/@px-unit;
    }

    .btn-selected {
        color: #1b30e5;
        border-color: #1b30e5;
        outline: #1b30e5 solid 1px;
    }

    .btn-text {
        text-align: left;
        .m-text-ellipsis;
        .m-width-54;
    }
    .set-icon {
        cursor: pointer;
        font-size: 18/@px-unit;
        margin-top: 6/@px-unit;
    }
    .device-cfg-left {
        .after_comm();
        .label-v4-version {
            float: left;
            margin-right: 160/@px-unit;
        }
    }
    .outline-icon {
        svg [data-name=rectangle] {
            outline: 1/@px-unit solid rgb(167, 167, 167);
            outline-offset: 1/@px-unit;
        }
    }
    .collapse-custom {
        .ant-collapse-header {
            padding-top: 0 !important;
            padding-bottom: 8/@px-unit;
        }
        .ant-collapse-content-box {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }
    }
    .draw-line{
        display: flex;
        .line-label {
            flex: 0 0 108/@px-unit;
            word-break: keep-all;
        }
        .line-content {
            flex: 1;
            padding-left: 8/@px-unit;
            display: flex;
            &__left {
                width:276/@px-unit;
                flex: 0 0 276/@px-unit;
            }
            &__right {
                flex: 1;
            }
        }
    }
    .width-100 {
        width:100%;
    }
    .width-55 {
        width:55%
    }
}



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


._IntelligentScheme_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit; //为了不eslint告警写一个
    width: 100%;
    .ivs-fs {
        font-size: 20/@px-unit;
    }
    .video-wrap {
        width: 574/@px-unit;
        height: 420/@px-unit;
        background: #1b1b1b;
    }
    .card-style {
        .ant-card-body {
            padding: 0 !important;
            text-align: center;
        }
        .ant-menu-item:first-child {
            margin-left: -20/@px-unit;
        }
    }
    .content-style {
        background: @contentBgColorNo15;
    }
    .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-active:not(.ant-menu-item-selected)::after {
        border-bottom: transparent;
    }

    .row-selected {
        background-color: @secondNavHoverColorNo14;
    }
    .row-unselected {
        background-color: @contentBgColorNo15;
    }

    .ant-table-tbody > tr.ant-table-row-selected > td {
        background: none;
    }
    .dot_behind .label-normal-behind {
        padding: 0;
        .label-div-Container {
            float: left;
        }
    }
    .ant-steps {
        width: 904/@px-unit;
        min-width: 800/@px-unit;
        margin: 24/@px-unit auto;
    }
}



._SchemeSelect_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit; //为了不eslint告警写一个
    width: 100%;
    .ant-menu-item-selected {
        .ant-card {
            background-color: rgb(241, 249, 255);
            img {
                opacity: 1 !important;
            }
            .ant-card-meta-title {
                color: @btnNormalColorNo1;
            }
        }

    }
    .ant-layout-header {
        height: 230/@px-unit;
        .ant-card {
            margin: 0;
        }
        img {
            height: 200/@px-unit;
        }
    }
}



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

    .container-left {
        .label-div-Container {
            float: left !important;
            width: 115/@px-unit;
        }
    }

    .antBox_left {
        &:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }
        .label-v4-version {
            float: left;
        }
    }

}



._IntervalSpeed_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit; //为了不eslint告警写一个
    width: 100%;
    .general-style {
        border: 1px solid @listBorderColorNo8;
        .m-mb-15;
        .general-content {
            .ant-table-thead;//上边框线
            .m-pl-15;
        }
    }

    .general-title {
        background: #f9f9f9;
        .m-form-title;
        .m-fw-bold;
        .m-layout-item;
        .m-pl-15;
    }
    .interval {
        &:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }
        .label-div-Container {
            float: left !important;
            .m-mr-20
        }
    }
    .table-interval {
        text-align: center;
        .label-div-Container {
            float: left !important;
            .m-width-50p
        }
    }
    .advance-color {
        color: @primary-color;
    }
}


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

    height: 1200/@px-unit;

    .charts-style {
        float: left;
        width: 600/@px-unit;
        height: 400/@px-unit;
        margin-right: 100/@px-unit;
        margin-top: 50/@px-unit;
    }
}


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

    position: relative;

    .pie-doughnut {
        width: 100%;
        max-width: 640/@px-unit;
        min-height: 500/@px-unit;
    }
    #main-pie-doughnut {
        position: absolute;
        top: 100/@px-unit;
    }
    .manage-table{
        .ant-table-tbody{
            height: 500/@px-unit;
        }
    }
}


@Length20: 20/@px-unit;
@Length32: 32/@px-unit;
@Length38: 38/@px-unit;
@Length64: 64/@px-unit;
@Length190: 190/@px-unit;
@Length642: 642/@px-unit;
._IntelligentModeComponent_ {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height:100%;
    &[modeType="structuration"] [previewInfo] {
        float: right;
        width: 31.8%;
        height: 57%;
        background: rgb(240, 242, 245);
        & > div:first-child {
            width: 100%;
            height: 100%;
            border: 4/@px-unit solid #fff;
            border-bottom: none;
            background: #fff;
        }
        [infoWrapper] {
            height:46.8%;
            border-bottom: 4/@px-unit solid #fff;
            ._PreviewInfo_ {
                height: 100%;
                [detail] {
                    height: 100%;
                    background: #fff;
                    overflow: hidden;
                    & > div:first-child {
                        height: 100%;
                    }
                    [pic] {
                        float: left;
                        width: calc(100% - @Length190);
                        height: 100%;
                        position: relative;
                        background: rgb(232, 234, 235);
                        & > div {
                            background-repeat: no-repeat;
                            width: 100%;
                            background-position: center;
                            &.empty-pic {
                                background-size: auto 37%;
                            }
                        }
                    }
                    [pic="face"] {
                        & > div {
                            width: 100%;
                            height: 100%;
                            float: left;
                            background-size: auto 64%;
                        }
                    }
                    [attr] {
                        float: left;
                        width: @Length190;
                        height: 100%;
                        display: block;
                        overflow: hidden;
                        position: relative;
                        [attr_cell] {
                            display: block;
                            max-height: 100%;
                            width: 100%;
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            white-space: nowrap;
                            [line] {
                                font-size: 14/@px-unit;
                                font-family: 'Microsoft YaHei UI';
                                font-weight: normal;
                                font-stretch: normal;
                                line-height: 22/@px-unit;
                                letter-spacing: 0;
                                color: rgba(0, 0, 0, 0.85);
                                [attr_key] {
                                    display: inline-block;
                                    width: 50%;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    padding-left: 24/@px-unit;
                                }
                                [attr_val] {
                                    display: inline-block;
                                    width: 50%;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    padding-left: 4/@px-unit;
                                }
                            }
                        }
                    }
                }
            }
        }
        [infoTitle] {
            height: @Length32;
            line-height: 28/@px-unit;
            background: rgb(240, 242, 245);
            border-bottom: 4/@px-unit solid #fff;
            font-size: 14/@px-unit;
            font-family: 'Microsoft YaHei UI';
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0;
            color: rgba(0, 0, 0, 0.85);
            & > span {
                display: inline-block;
                font-size: 16/@px-unit;
                line-height: 28/@px-unit;
                vertical-align: middle;
            }
            & > span:first-child {
                width: 40%;
                padding-left: 0.2em;
            }
            & > span:last-child {
                width: 60%;
                text-align: right;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                padding-right: 0.2em;
            }
        }
    }
    &[modeType="structuration"] [previewPic] {
        clear: both;
        height: 50%;
        background-color: rgb(240, 242, 245);
        position: relative;
        overflow: hidden;
        [thumbnail_area] {
            width: 100%;
            position: absolute;
            top: 2/@px-unit;
            bottom: 0;
            padding-right: 66/@px-unit;
            overflow: hidden;
            [picList] {
                display: none;
                overflow: hidden;
                & > div {
                    float: right;
                    height: 100%;
                    width: calc((100vh - @Length64 - @Length20 - @Length38) * 0.5 * 0.23);
                    min-width: calc(@Length642 * 0.5 * 0.23);
                    background-position: center;
                    background-size: contain;
                    background-repeat: no-repeat;
                    background-color: rgb(232, 234, 235);
                    border: solid 2/@px-unit rgb(240, 242, 245);
                    cursor: pointer;
                    &.empty-pic {
                        background-size: 45% auto;
                    }
                }
            }
            [picList="structuration"]:nth-child(1) {
                display: block;
                height: 23%;
            }
            [picList="structuration"]:nth-child(2) {
                display: block;
                height: 46%;
            }
            [picList="structuration"]:nth-child(3) {
                display: block;
                height: 23%;
            }
            [picList="structuration"]:nth-child(4) {
                display: block;
                height: 8%;
            }
            [picList="structuration"]:nth-child(4) > div {
                border-bottom: none;
            }
        }
        [stat] {
            width: 64/@px-unit;
            position: absolute;
            right: 0;
            top: 2/@px-unit;
            bottom: 0;
            text-align: center;
            background-size: cover;
            overflow: hidden;
            [icon_wrap] {
                overflow: hidden;
                background: #fff;
                border-top: rgb(240, 242, 245) solid 2/@px-unit;
                border-bottom: rgb(240, 242, 245) solid 2/@px-unit;
                [icon_table] {
                    width: 100%;
                    height: 100%;
                    display: table;
                    table-layout: fixed;
                    [icon_cell] {
                        display: table-cell;
                        height: 100%;
                        vertical-align: middle;
                        .anticon {
                            width: 100%;
                            color: rgb(143, 143, 143);
                            cursor: auto;
                            svg {
                                width: 28/@px-unit;
                                height: 28/@px-unit;
                            }
                        }
                    }
                }
            }
            [popup_handle] {
                height: 32/@px-unit;
                padding: 3/@px-unit 0;
                border-top: rgb(240, 242, 245) solid 2/@px-unit;
                width: 100%;
                background: #fff;
                .anticon {
                    width: 100%;
                    cursor: auto;
                    &:hover{
                        color: #1890ff; 
                    }
                    svg {
                        width: 28/@px-unit;
                        height: 28/@px-unit;
                    }
                }
            }
            &._empty_ [icon_wrap] {
                background: rgb(232, 234, 235);
                [icon_table] [icon_cell] .anticon {
                    color: #cacdcf;
                }
            }
            &._empty_ [popup_handle] {
                background: rgb(232, 234, 235);
            }
        }
        [stat="structuration"] {
            [icon_wrap="face"] {
                height: 23%;
            }
            [icon_wrap="body"] {
                height: 23%;
            }
            [icon_wrap="nonmotor"] {
                height: 23%;
            }
            [icon_wrap="car"] {
                height: 23%;
            }
            [popup_handle] {
                height: 8%;
                padding: 4/@px-unit 0;
            }
        }
    }

    ._PreviewPicPopover_ {
        padding-right: 0;
        .ant-popover-content {
            .ant-popover-arrow {
                display: none;
            }
            .ant-popover-inner-content {
                padding: 0 2/@px-unit;

                ._AttrSetting_ {
                    width: 370/@px-unit;
                    [types] {
                        display: table;
                        [type_cell] {
                            display: table-cell;
                            vertical-align: top;
                            text-align: center;
                            cursor: pointer;
                            padding: 10/@px-unit 20/@px-unit;
                            .anticon {
                                width: 100%;
                                cursor: auto;
                                svg {
                                    width: 28/@px-unit;
                                    height: 28/@px-unit;
                                }
                            }
                        }
                        [type_cell].selected {
                            color: #1890ff;
                        }
                    }
                    [type] {
                        [setting_content] {
                            .ant-btn {
                                width: 80/@px-unit;
                                margin: 10/@px-unit 0 0 10/@px-unit;
                                padding: 0 4/@px-unit;
                                text-align: center;
                                border-color: #e8e8e8;
                                &:not(:disabled):hover,
                                &:not(:disabled):focus {
                                    color: #272727;
                                    border-color: #e8e8e8;
                                }
                                &.selected {
                                    color: #1890ff;
                                    border-color: #1890ff;
                                }
                                &.selected:hover,
                                &.selected:focus {
                                    color: #1890ff;
                                    border-color: #1890ff;
                                }
                                span {
                                    width: 100%;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    vertical-align: middle;
                                }
                            }
                            padding-bottom: 10/@px-unit;
                        }
                    }
                    [foot] {
                        padding: 10/@px-unit;
                        text-align: right;
                        .ant-btn {
                            margin-left: 10/@px-unit;
                            text-align: center;
                            border-color: #e8e8e8;
                            &:hover,
                            &:focus {
                                border-color: #1890ff;
                            }
                            &.ant-btn-primary {
                                border-color: #1890ff;
                            }
                        }
                    }
                    [setting_title] {
                        background: rgb(244, 244,244);
                        padding: 4/@px-unit 10/@px-unit;
                        [seleted_num] {
                            color: #1890ff;
                        }
                    }
                }
            }
        }
    }
}



._PicInfoComponent_ {
    // UI组件特有的CSS，
    margin-left: 10/@px-unit;
}

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



@Lengthf20: -20/@px-unit;
@Lengthf10: -10/@px-unit;
@Lengthf8: -8/@px-unit;
@Lengthf1: -1/@px-unit;
@Length1: 1/@px-unit;
@Length2: 2/@px-unit;
@Length4: 4/@px-unit;
@Length5: 5/@px-unit;
@Length8: 8/@px-unit;
@Length10: 10/@px-unit;
@Length12: 12/@px-unit;
@Length14: 14/@px-unit;
@Length16: 16/@px-unit;
@Length18: 18/@px-unit;
@Length20: 20/@px-unit;
@Length24: 24/@px-unit;
@Length30: 30/@px-unit;
@Length36: 36/@px-unit;
@Length38: 38/@px-unit;
@Length40: 40/@px-unit;
@Length45: 45/@px-unit;
@Length48: 48/@px-unit;
@Length54: 54/@px-unit;
@Length60: 60/@px-unit;
@Length64: 64/@px-unit;
@Length100: 100/@px-unit;
@Length110: 110/@px-unit;
@Length120: 120/@px-unit;
@Length180: 180/@px-unit;
@Length200: 200/@px-unit;
@Length240: 240/@px-unit;
@Length340: 340/@px-unit;
._ItsePreview_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding: @Length10; //为了不eslint告警写一个
    overflow: hidden;
    .p-top{
        height: @Length38;
        box-sizing: border-box;
        .icon{
            text-align: right;
            .active{
                color: @btnNormalColorNo1;
            }
        }
        .p-recordType {
            float: right;
        }
    }
    .p-con{
        height: calc(100% - @Length38);
        .p-left{
            width: @Length240;
            height: 100%;
            float: left;
            position: relative;
            background-color: @secondNavBgColorNo13;
            .hideLeft{
                position: absolute;
                top: 50%;
                right: 0;
                width: @Length8;
                height: @Length40;
                display: none;
                cursor: pointer;
                margin-top: @Lengthf20;
                background: rgb(70, 70, 70);
                border-top-left-radius: @Length4;
                border-bottom-left-radius: @Length4;
                line-height: @Length36;
                text-align: center;
                color: #fff;
                .anticon-caret-left {
                    font-size: @Length8;
                    margin-left: @Lengthf1;
                }
            }
            &:hover .hideLeft{
                display: block;
            }
        }
        .showLeft{
            position: relative;
            top: 50%;
            left: 0;
            width: @Length8;
            height: @Length40;
            cursor: pointer;
            margin-top: @Lengthf20;
            margin-left: @Lengthf10;
            background:rgb(70, 70, 70);
            border-top-right-radius: @Length4;
            border-bottom-right-radius: @Length4;
            line-height: @Length36;
            text-align: center;
            color: #fff;
            .anticon-caret-right {
                font-size: @Length8;
                margin-left: @Lengthf1;
            }
        }
        .p-right{
            float: left;
            width: calc(100% - @Length240);
            height: 100%;
            position: relative;
            &[showLeftList=false] {
                width: calc(100% - @Length8);
            }
            .videoWrap {
                width: 100%;
                height: 100%;
                &[previewMode=traffic] {
                    width: 40%;
                    height:calc(100% - @Length200);
                }
                &[previewMode=videoPic] {
                    width: 50%;
                    // 匹配AIPreview模块的PanoPic高度；因为PanoPic高度是基于父组件AIPic高度，所以这里calc(100vh - @Length120)就是适配AIPic高度
                    height:calc(100vh - @Length120 - @Length340);
                }
                &[previewMode=structuration] {
                    width: 68%;
                    height: 57%;
                }
                .video{
                    width: 100%;
                    text-align: center;
                    height: calc(100% - @Length48);
                    background: #1b1b1b;
                    &[previewMode=videoPic] {
                        height: 100%;
                    }
                }
                .actionBar{
                    height: @Length45;
                    line-height: @Length45;
                    box-sizing: border-box;
                    position: relative;
                    z-index: 2;
                    background-color: #e8eaeb;
                    ._BottomBar_ {
                        padding-left: @Length14;
                        height: 100%;
                        overflow: hidden;
                        .anticon {
                            font-size: @Length24;
                            margin-top: @Length12;
                        }
                    }
                }
            }
        }
    }
    .actionBar{
        box-sizing: border-box;
        .active{
            color: @btnNormalColorNo1;
        }
        .anticon{
            margin-right: @Length16;
            font-size: @Length18;
            &:hover{
                color: @btnNormalColorNo1;
            }
            &.anticon-fullscreen{
                margin-right: 0;
            }
            &.anticon-down {
                margin-right: 0;
                font-size: inherit;
            }
        }
        .itemDetail {
            color: black;
            background: @homePageNo1;
            border-radius: @Length10;
            padding: @Length1 @Length12;
            margin: 0 @Length8 0 @Lengthf8;
            max-width: @Length200;
            span {
                margin-right: @Length20;
                position: relative;
                cursor: pointer;
                .anticon {
                    margin:0;
                }
            }
        }
    }
    ._TopBar_{
        > div {
            float: right;
        }
        > span {
            float: right;
        }
        .recordWrap {
            > span {
                float: left;
            }
            > div {
                float: left;
            }
        }
        & > span:first-child {
            margin-right: 0;
        }
        .anticon:not(.anticon-down){
            font-size: @Length24;
            line-height: @Length54;
        }
    }
    //左侧面板
    ._LeftBar_{
        position: relative;
        height: 100%;
        .ant-collapse-borderless {
            background-color: #ffffff;
        }
        ._PtzControl_{
            width: 100%;
            margin: 0 auto;
        }
    }
    .p-left-collapse{
        position: fixed;
        width: @Length240;
        bottom: 0;
        border-right: none;
        border-left: none;
        .ant-collapse-header{
            padding-left: @Length14;
            .ant-collapse-arrow {
                right: @Length14;
                text-align: right;
            }
        }
        .ant-collapse-content-box{
            padding:@Length14;
        }
        button {
            width: @Length100;
        }
        .min-button {
            width: @Length60;
            padding: 0;
        }

    }
    .p-channel-collapse {
        .ant-collapse-item:first-child {
            .ant-collapse-header {
                padding-right: @Length8;
                background-color: #fff;
            }
            .ant-collapse-content .ant-collapse-content-box{
                padding-bottom: 0;
                border: 0;
            }
        }
        .ant-collapse-header {
            border-top: @Length1 solid rgba(0, 0, 0, 0.06);
            border-bottom: @Length1 solid rgba(0, 0, 0, 0.06);
            background-color: rgba(0, 0, 0, 0.02);
        }
        .ant-collapse-item{
            border: none;
        }
        .ant-collapse-content .ant-collapse-content-box{
            padding: @Length8 0 @Length16 0;
            border-bottom: @Length1 solid rgba(0, 0, 0, 0.06);
            background-color: #fff;
        }
        .channelBottom {
            width: 100%;
	        height: @Length4;
	        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 100%);
            margin-top: -4/@px-unit;
        }
    }
    .p-zoomFoucs {
        display: flex;
        justify-content: space-between;
        .label-normal-container  {
            padding-top: 0 !important;
            padding-bottom: 16/@px-unit !important;
        }
        .focus-left {
            flex: 0 0 600/@px-unit;
        }
        .focus-right {
            flex:1;
            padding-left: 20/@px-unit;
            .empty {
                background-color: #F0F2F5;
                height: 212/@px-unit;
            }
        }
        .step{
            text-align: center;
            border: @Length1 solid @dividerColorNo9;
            border-radius: @Length4;
            cursor: pointer;
            >.ant-col{
                border-right: @Length1 solid @dividerColorNo9;
                &:first-child{
                    border-radius: @Length4 0 0 @Length4;
                }
                &:last-child{
                    border-radius: 0 @Length4 @Length4 0;
                }
            }
            .active{
                border: @Length1 solid @linkColorNo20;
                color: @linkColorNo20;
            }
            
        }
        .point{
            margin-top: @Length10;
        }
        
        .plate-check {
            padding: 5/@px-unit 10/@px-unit;
            box-sizing: border-box;
            .desc-item {
                display: flex;
                align-items: center;
                .label {
                    flex:0 0 @Length180;
                    text-overflow: ellipsis;
                    text-align: left;
                    display: inline-block;
                }
                .text {
                    flex: 1;
                }
            }
            
            .title {
                font-weight: bold;
            }
        }
        .with-bg {
            background-color: #F0F2F5;
        }
        .check-tip {
            color: @errorColorNo17;
        }
        
        .labelSlider-float-right,.labelSlider-float-right {
            font-size: 20px;
        }
    }
    .p-channels {
        overflow-y: auto;
        line-height: @Length40;
        .stream {
            float: right;
            width: @Length20;
            height: @Length20;
            text-align: center;
            border: @Length1 solid #1890ff;
            color: #1890ff;
            font-size: @Length12;
            border-radius: @Length2;
            margin-top: @Length10;
            line-height: @Length18;
        }
        .ant-tree-title {
            .stream {
                margin-top: @Length2;
            }
        } 
        .channel-item {
            cursor: pointer;
            padding: @Length5 @Length14;
            &:hover{
                background-color: @secondNavHoverColorNo14;
                color: @btnNormalColorNo1;
            }
            .anticon {
                font-size: @Length20;
                &.ant-dropdown-trigger {
                    font-size: @Length16;
                }
            }
        }
        .ant-tree.ant-tree-directory {
            .ant-tree-treenode {
                &.ant-tree-treenode-selected {
                    background-color:#fff;
                    color: #272727;
                    &::before {
                        background-color:#fff;
                        color: #272727;
                    }
                    .ant-tree-switcher {
                        color: #272727;
                    }
                }
                .ant-tree-node-selected{
                    background-color:#fff;
                    color: #272727;
                    &:hover{
                        background-color: @secondNavHoverColorNo14;
                    }
                }
                &:hover{
                    background-color: @secondNavHoverColorNo14;
                    color: @btnNormalColorNo1;
                    &::before {
                        background-color: @secondNavHoverColorNo14;
                    }
                    .ant-tree-node-selected{
                        background-color: @secondNavHoverColorNo14;
                        color: @btnNormalColorNo1;
                    }
                }
            }
        }
    }
    .p-actionButtons {
        position: absolute;
        bottom: 0;
        button {
            width: @Length180;
            margin: @Length5 @Length30;
        }
    }
}




._IvsAnalyse_ {