}

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

._EmailConfig_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    width: 100%;
    .email-flex {
        display: flex;
        align-items: center;
        line-height: 28 / @font-size-normal;
        height: 28 / @font-size-normal;
    }
    .email-receiver {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        float: left;
        min-width: 220 / @font-size-normal;
    }
}



._FourGNetConfig_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    width: 100%;
    .behind-flex{
        display: inline-flex;
        line-height: 42/@px-unit;
        height: 42/@px-unit;
        align-items: center;
    }
    .flex-content{
        display: inline-flex;
    }
    .related-box {
        border: 1/@px-unit solid @dividerColorNo9;
        margin-bottom: 10/@px-unit;
        .sub-title{
            padding: 6/@px-unit 14/@px-unit;
            border-bottom: 1/@px-unit solid @dividerColorNo9;
            display: flex; 
            align-items: center;
            height: 48/@px-unit;
            background-color: @panelBackgroundColor;
        }
        .title {
            font-weight: bold;
            width: 100%;
        }
        .container {
            padding: 14/@px-unit 32/@px-unit 0;
            width: 100%;
        }
    }
}

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

._InfoPublish_ {
    width: 100%;
    @SINGLE: 24/@px-unit;  // 屏幕上每小格所占宽度px
    @FRONTSIZE: 12/@px-unit; //标注字体大小
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-top: inherit; //为了不eslint告警写一个
    .label-div-Container {
        .label-normal-container .label-normal-wrapper {
            .ant-input-number {
                width: 100%;
            }
        }
    }

    .osd_move .osd_delete {
        display: none;
    }

    .osd_move:hover .osd_delete {
        display: block;
    }

    .speedControlWrap{
        > div{
            display: inline-block;
            margin-right: 10/@px-unit;
            margin-bottom: 20 /@px-unit;
            vertical-align: middle;
        }
    }

    .ant-picker-midspan{
        display: inline-block;
        padding-top: 4/@px-unit;
        width: 20 / @px-unit;
        text-align: center;
    }

    //DrawArea.js
    ._DrawArea_{
        .screenContainer {
            position: relative;
            margin: 0;
            padding: 0;
        }
        table {
            border-right: 1/@px-unit solid #aaa;
            border-bottom: 1/@px-unit solid #aaa;
            box-sizing: border-box;
        }
    
        table td {
            height: @SINGLE;
            width: @SINGLE;
            border-top: 1/@px-unit solid #aaa;
            border-left: 1/@px-unit solid #aaa;
            box-sizing: border-box;
        }
    
        .oldframe,.newframe {
            position: absolute;
            box-sizing: border-box;
            background: rgba(255, 161, 55, 0.5);
            border: 1/@px-unit solid #FFA137;
            font-size: @FRONTSIZE;
            line-height: @SINGLE;
        }
        .oldframe{
            background: rgba(164,169,184,.5);
            border: 1/@px-unit solid #A8A0A0;
        }
        .newframe{
            background: rgba(255, 161, 55, 0.5);
            border: 1/@px-unit solid #FFA137;
        }
    
        .fn-left{
            float: left;
        }
    
        .start-coor, .end-coor {
            position: absolute;
            word-break: keep-all;    /* 不换行 */
            white-space: nowrap;  
        }
        .start-coor {
            left: 0;
            top: 0;
        }
        .end-coor {
            right: 0;
            bottom: 0;
        }
        .label{
            height: 45 /@px-unit;
            margin-bottom: 5 / @px-unit;
            line-height: 45 / @px-unit;
        }

    }

    .table-supportAdd{
        .ant-table-thead{
            .ant-table-cell{
                font-weight: bold;
                background-color: @panelBackgroundColor;
            }
        }
        .table-OperationIcon{
            color: #1c79f4;
            text-align: center;
            cursor: pointer;
        }
        .table-OperationIcon[disabled]{
            color: @disableColorNo7;
            cursor: auto;
        }
    }
   
   
}
._LXSJ_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-top: inherit; //为了不eslint告警写一个
}


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

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

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



._InfoPublishITSE_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    // padding-left: 20/@px-unit; //为了不eslint告警写一个
    width: 100%;
    @SINGLE: 24/@px-unit;  // 屏幕上每小格所占宽度px
    @FRONTSIZE: 12/@px-unit; //标注字体大小
    .label-div-Container {
        .label-normal-container .label-normal-wrapper {
            .ant-input-number {
                width: 100%;
            }
        }
    }
    .left-channel-container{
        width: 242 / @px-unit;
        border: solid 1px @inputBorderColorNo10;
        height: 290 / @px-unit;
        float: left;
        overflow-y: auto;
        .channel-list-li{
            display: inline-flex;
            align-items: center;
            padding-left: 24 / @px-unit;
            width: 100%;
            height: 40 / @px-unit;
            line-height: 40 / @px-unit;
            border-bottom: 1px solid @inputBorderColorNo10;
            user-select: none;
            cursor: pointer;
            .channel-list-icon{
                width: 10%;
            }
            .channel-list-content{
                width: 90%;
            }
        }
        .channel-list-li-selected {
            background-color: @secondNavHoverColorNo14;
        }
    }
    .channel-right-container{
        float: left;
        border-bottom: 1px solid @inputBorderColorNo10;
        border-top: 1px solid @inputBorderColorNo10;
        border-right: 1px solid @inputBorderColorNo10;
        height: 290 / @px-unit;
        width: 1343 / @px-unit;
        padding:  24/@px-unit 33/@px-unit;
    }

    .speedControlWrap{
        > div{
            display: inline-block;
            margin-right: 10/@px-unit;
            margin-bottom: 20 /@px-unit;
            vertical-align: middle;
        }
    }
    
    //DrawArea.js
    ._DrawArea_{
        .screenContainer {
            position: relative;
            margin: 0;
            padding: 0;
        }
        table {
            border-right: 1/@px-unit solid #aaa;
            border-bottom: 1/@px-unit solid #aaa;
            box-sizing: border-box;
        }
    
        table td {
            height: @SINGLE;
            width: @SINGLE;
            border-top: 1/@px-unit solid #aaa;
            border-left: 1/@px-unit solid #aaa;
            box-sizing: border-box;
        }
    
        .oldframe,.newframe {
            position: absolute;
            box-sizing: border-box;
            background: rgba(255, 161, 55, 0.5);
            border: 1/@px-unit solid #FFA137;
            font-size: @FRONTSIZE;
            line-height: @SINGLE;
        }
        .oldframe{
            background: rgba(164,169,184,.5);
            border: 1/@px-unit solid #A8A0A0;
        }
        .newframe{
            background: rgba(255, 161, 55, 0.5);
            border: 1/@px-unit solid #FFA137;
        }
    
        .fn-left{
            float: left;
        }
    
        .start-coor, .end-coor {
            position: absolute;
            word-break: keep-all;    /* 不换行 */
            white-space: nowrap;  
        }
        .start-coor {
            left: 0;
            top: 0;
        }
        .end-coor {
            right: 0;
            bottom: 0;
        }
        .label{
            height: 45 /@px-unit;
            margin-bottom: 5 / @px-unit;
            line-height: 45 / @px-unit;
        }
    }
    .area-line {
        width: 500 / @px-unit;
    }
    .global-content{
        height: 100%;
    }
}


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

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

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



._InfoPublishSceneITSE_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    // padding-left: 20/@px-unit; //为了不eslint告警写一个
    width: 100%;
    .info-screen-divider{
        margin: 10/@px-unit 0;
    }
    .label-div-Container {
        .label-normal-container .label-normal-wrapper {
            .ant-input-number {
                width: 100%;
            }
        }
    }
    .info-container{
        height: 714 / @px-unit;
        margin-bottom: 8/@px-unit;
        margin-top: 20/@px-unit;
    }
    .info-left-channel-container{
        width: 242 / @px-unit;
        border: solid 1px @inputBorderColorNo10;
        height: 714 / @px-unit;
        float: left;
        overflow-y: auto;
        .info-list-li{
            display: inline-flex;
            align-items: center;
            padding-left: 24 / @px-unit;
            width: 100%;
            height: 40 / @px-unit;
            line-height: 40 / @px-unit;
            border-bottom: 1px solid @inputBorderColorNo10;
            user-select: none;
            cursor: pointer;
            .info-list-icon{
                width: 10%;
            }
            .info-list-content{
                width: 80%;
            }
        }
        .info-list-li-selected {
            background-color: @secondNavHoverColorNo14;
        }
    }
    .info-left-channel-container::-webkit-scrollbar{
        width: 4 / @px-unit;
    }
    .info-left-channel-container::-webkit-scrollbar-thumb{
        border-radius:10 / @px-unit;
        background: @disableColorNo7;
    }
    .info-left-channel-container::-webkit-scrollbar-track{
        border-radius:0;
        background: @listBorderColorNo8;
    }

    .info-right-container{
        float: left;
        border-bottom: 1px solid @inputBorderColorNo10;
        border-top: 1px solid @inputBorderColorNo10;
        border-right: 1px solid @inputBorderColorNo10;
        height: 714 / @px-unit;
        width: 1343 / @px-unit;
        padding:  24/@px-unit 33/@px-unit;
    }
    .info-bottom-content{
        margin-bottom: 8/@px-unit;
    }
}
.info-itse-modal{
    .label-div-Container {
        .label-normal-container .label-normal-wrapper {
            .ant-input-number {
                width: 100%;
            }
        }
    }
    .resolution{
        overflow: hidden;
        .label-v4-version {
            float: left;
        }
    }
}

._IPSet_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    width: 100%;
    .LabelIP-container {
        margin: 0;
    }
    .m-content > .ant-row {
        margin: 16/@px-unit 0;
    }
    .macInput-label {
        padding: 7/@px-unit 0/@px-unit;
    }
    .ant-form-item {
        margin-bottom: 10/@px-unit;
    }
    .Prefix {
        text-align: center;
    }
    .ant-form-explain {
        margin-left: 21%;
    }
    .mtu {
        padding-top: 10/@px-unit;
      //  border-top: @border-normal;
    }
    // .mac-box .ant-input-disabled {
    //     background-color: @disableInputBgColorNo11;
    // }
    .LabelIP-ip-input {
        transition: background-color 0.5s;
    }
}


._ITSAPI_ {
    .tips-info {
        color: red;
    }
}


._NETPROXY_ {
    ._Table_{
        margin-bottom: 10/@px-unit;
    }
}



._Port_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中

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

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

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


._SnmpConfig_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    width: 100%;
    .WarnColor {
        // 页面组件特有的CSS，
        // UI组件的样式在UI组件组内内部
        // 不同通用样式存放在 style/common.less中
        color: #f5222d; //为了不eslint告警写一个
    }
    .AddLength{
        width: 20rem;
        float: left;
    }
}




.ant-spin-nested-loading,
.ant-spin-container {
  height: 100% !important;
}
._Network_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    height: 100%;
    padding: 22/@font-size-normal;
    .nt-networkDisconn:before {
        // content: '';
        // display: inline-block;
        // width: 30/@font-size-normal;
        // height: 30/@font-size-normal;
        // vertical-align: top;
        // background: url('/static/media/icons-normal.29e57520.png') -1860/@font-size-normal 0;
        // overflow: hidden;
        cursor: pointer;
    }
    .nt-networkFine:before {
        // content: '';
        // display: inline-block;
        // width: 30/@font-size-normal;
        // height: 30/@font-size-normal;
        // vertical-align: top;
        // background: url('/static/media/icons-normal.29e57520.png') -1860/@font-size-normal -840/@font-size-normal;
        // overflow: hidden;
        cursor: pointer;
    }
    .nt-networkConflict:before {
        // content: '';
        // display: inline-block;
        // width: 30/@font-size-normal;
        // height: 30/@font-size-normal;
        // vertical-align: top;
        // background: url('/static/media/icons-normal.29e57520.png') -1860/@font-size-normal -480/@font-size-normal;
        // overflow: hidden;
        cursor: pointer;
    }
}




._NewAlysHalo_ {
    @videoWidth: 450px;
    @videoHeight: 337px;
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-top: inherit; //为了不eslint告警写一个
    .loadTip{
        padding: 20vh;
        width: 80%
    }
    height: 100%;
    .m-layout-content;
    .item-row {
        border: 1px solid @listBorderColorNo8;
        .m-mb-24; //距下栏24px
        .item-title {
            .m-fw-bold; //字体加粗
            .m-ml-16;  //左边距16px
            .m-layout-item; //高、行高：48px
        }
        .item-content {
            .m-layout-content;
            .ant-table-thead; //上边框线
        }
        .form-item {
            .m-mr-40;
        }
    }
    .ui-title {
        .m-fw-bold; //字体加粗
        .m-layout-item; //高、行高：48px
    }
    .selected-row {
        background-color: @secondNavHoverColorNo14;
    }
    .unselected-row {
        background-color: @contentBgColorNo15;
    }
    .second-textColor {
        color: @disableColorNo7;
    }
    height: 80vh;
    min-width: 960px;
    min-height: 600px;
    .video-container{
        .video-plugin{
            width: @videoWidth;
            height: @videoHeight;
            background-color: #000;
            display: inline-block;
        }
    }
}

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


@videoWidth: 450px;
@videoHeight: 337px;
@tabLeftMargin: 25px;
@tabTopMargin: 25px;

// @dividerColorNo9 @listBorderColorNo8 @secondNavHoverColorNo14 @btnNormalColorNo1 @linkColorNo20
// @disableColorNo7
._OsdVideo_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    height: 80vh;
    min-width: 1060px;
    min-height: 600px;
    margin: @tabTopMargin 0 0 @tabLeftMargin;
    .video-container{
        max-width: 500px;
        .video-plugin{
            width: @videoWidth;
            height: @videoHeight;
            background-color: #000;
            display: inline-block;
        }
    }
    .ant-checkbox-group{
        width: 100%;
        padding: 10px 0;
    }
    .ant-checkbox-group-item{
        .com-text-dot;
        line-height: 20px;
        width: 25%;
        padding: 8px 15px 8px 0px;
        margin: 0;
    }
    .ant-divider{
        background: @dividerColorNo9;
    }
    .LabelInput-behind-dark{
        padding: 0;
    }
    .ant-tabs-content{
        min-height: 300px;
    }
    .ant-tabs .ant-tabs-left-bar .ant-tabs-tab{
        text-align: left;
        padding: 8px 10px;
        min-width: 140px;
        margin: 0;
    }
    .ant-tabs-tab-arrow-show{
        height: 0 !important;
        display: none;
    }
    .ant-tabs-nav-animated{
        transform: none !important;
    }
    .ant-tabs-nav-container-scrolling{
        padding: 0 !important;
    }
    .ant-tabs-tab-active{
        background-color: @secondNavHoverColorNo14;
    }
    .custom-plus{
        color: @btnNormalColorNo1;
        cursor: pointer;
        padding-left: 10px;
        text-align: left;
    }
    .tip-text{
        color: @disableColorNo7;
        word-break: break-word;
    }
    // .ant-tabs-tab-active .icon-tab-delete, .ant-tabs-tab:hover .icon-tab-delete{
    //     opacity: 1; // 与 .icon-tab-delete 的 opacity配合，删除图标 hover再显示
    // }
    .icon-tab-delete{
        opacity: 1;
        color: red;
        cursor: pointer;
        font-size: 16px;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translate(0, -50%);
    }
    .tab-icon-align{
        width: 32px;
        height: 32px;
        display: inline-block;
        padding: 0 8px;
        border-radius: 4px;
        margin-right: 16px;
        border: 1px solid @listBorderColorNo8;
        cursor: pointer;
    }
    .icon-align-active{
        border: 1px solid @linkColorNo20;
        color: @linkColorNo20;
    }
}
._OsdVideoPickerColor_ {
    .ant-popover-inner-content{
        padding: 0;
    }
}
.com-text-dot{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.com-border{
    border: 1px solid #d9d9d9;
    border-radius: 4px;
}
.com-divider{
    height: 1px;
    background: @dividerColorNo9;
}

._PasswordReset_{
    .password-flex-div{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 620px;
        
        border: 1px solid #E7E8E9;
        width: 100%;
        background-color: @baseColor;
        padding: 30px 30px 30px 80px;
        .ant-input::-webkit-input-placeholder {
            color:#bfbfbf !important;
        }
        .ant-input:-ms-input-placeholder {
            color:#bfbfbf !important;
        }
        .ant-input::-moz-placeholder {
            color:#bfbfbf !important;
        }
        .ant-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color:#bfbfbf !important;
         }
    }
    .password-div{
        margin-Top: 35px;
        // width: 700px !important;
    }
    .header-height {
        height: 64px;
        color:@baseColor;
        background-color: @topBackColor;
        position: fixed;
        width: 100%;
        z-index: 100;
    }
    .clearfix {
        height: 64px;
        &::after {
          content: ".";            
          display: block;        
          height: 0;
          visibility: hidden;  
          clear: both;   
        }
      }
    .header-logo {
        line-height: 64px;
        margin-left: 20px;
    }
    .header-color{
        background-color: @tabDividerColor;
        margin-left: 10px;
    }
    .section-body{
        border: 1px solid #E7E8E9;
        width: 100%;
        background-color: @baseColor;
        padding: 30px 30px 30px 80px;
        .ant-input::-webkit-input-placeholder {
            color:#bfbfbf !important;
        }
        .ant-input:-ms-input-placeholder {
            color:#bfbfbf !important;
        }
        .ant-input::-moz-placeholder {
            color:#bfbfbf !important;
        }
        .ant-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color:#bfbfbf !important;
         }
    }
    .qrcode-message{
        float: left;
        width:calc(100% - 320px);
    }
    .qrcode-p{
        padding-left: 50px;
        color: #FF4505;
        word-break: break-word;
    }
    .qrcode {
        border: 1px solid #E6E6E6;
        padding: 5px;
        margin-top: 65px;
        margin-left: 30px;
    }
    .qrcode-title{
        text-align: center;
        font-size: 14px;
        color: #A4A4A4;
        margin:  0;
    }
    .last-alert{
        color: #A4A4A4;
    }
    .qrcode-content{
        width: 324px;
        margin: 0 auto;
    }
    .newqrcode {
        .qrcode-title {
            line-height: 32px;
            font-size: 16px;
            color:#272727;
        }
        .phoneChange {
            color: #A4A4A4;
            text-decoration: underline;
        }
        b {
            color: #1890ff;
        }
    }
    p {
        margin-top: 0;
        margin-bottom: 1em;
    }
} 
._Picture_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-top: inherit; //为了不eslint告警写一个
}

.DownloadAttribute {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .ant-form-item {
        padding-bottom: 20px;
    }
}


._PictureSearch_ {
    .search-width200{
      width:  200/@font-size-normal;
    }
    .search-width50{
        width:  50/@font-size-normal;
    }
    .search-width100{
        width:  100/@font-size-normal;
    }
    .search-behind{
        font-size: 13px;
    }
    .search-labelWrap .label-div-Container{
        display: inline-block;
        width: 50/@font-size-normal;
       
    }
    .search-labelWrap >div{
        height: 43/@font-size-normal;
    }
    .grid-search-nav {
        float: left;
        width: 230px;
        height: 100%;
        border-right: 1px solid @listBorderColorNo8;
    }
    .search-nav-name {
        box-sizing: border-box;
        height: 40px;
        line-height: 39px;
        border-bottom: 1px solid @listBorderColorNo8;
        cursor: pointer;
        padding: 0 16px;
        &.active {
            color: @btnNormalColorNo1;
        }
        .nav-icon {
            font-size: 10px;
        }
    }
    .search-nav-form {
        padding: 14px;
        border-bottom: 1px solid @listBorderColorNo8;
    }
    .grid-search-main {
        float: left;
        width: calc(100% - 230px);
        height: 100%;
        .search-main-name {
            box-sizing: border-box;
            height: 40px;
            line-height: 39px;
            border-bottom: 1px solid @listBorderColorNo8;
            padding: 0 16px;
        }
        .action-btn {
            width: 80px;
            max-height: 32px;
            box-sizing: border-box;
            .anticon + span {
                margin-left: 0;
            }
        }
        .normalBtn {
            color: @textColorNo5;
            &:hover {
                color: @textColorNo5;
            }
        }
        .greyBtn {
            color: @disableColorNo7;
        }
    }
}


._StorageSet_ {
    .service-content {
        margin: 10px 0;
        border: 1px solid @listBorderColorNo8;
    }
    .network-storage .ant-alert {
        padding-left: 11px;
    }
    .ant-form-item-control {
        line-height: 48px;
        .ant-form-explain {
            margin-left: inherit;
            font-size: 12px;
        }
    }
}

._ServiceConfig_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
}


._PlayBack_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-top: inherit; //为了不eslint告警写一个
    .ant-tabs-content > div {
        box-sizing: border-box;
        min-height: calc(100vh - 141px);
        background: @main_background_color;
        margin: 16px;
    }
}


._LocalVideo_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-top: inherit; //为了不eslint告警写一个
    .play-content{
        width: calc(100% - 240px);
        float: left;
        height: 100%;
        .video-content {
            height: calc(100% - 80px);
            min-height: calc(77vh - 80px);
            background:@btnHoverColorNo2;
            text-align: center;
            padding-top: 20%;
        }
        .touchbar {
            position: relative;
            height: 40px;
            line-height: 30px;
            padding:5px 0;
            background: linear-gradient(#f8f8f6, #cccdcf);
            .touchbar-center {
                text-align: center;
                span {
                    margin-left:25px;
                }
                background: rgba(0, 0, 0, 0.1);
            }
            .touchbar-right {
                text-align: right;
                span {
                    margin-right: 15px;
                }
            }
            .touchbar-btn{
                button{
                    float: right;
                }
            }
            i{
                margin-left:25px;
            }
        }
    }
   
}

._VideoReplay_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-top: inherit; //为了不eslint告警写一个
    padding: 0 15px;
    height: calc(100vh - 140px);
    background: @contentBgColorNo15;
    .title {
        padding-left: 10px;
        line-height: 40px;
        border-bottom: 1px solid @listBorderColorNo8;
    }
    ._VideoSearch_ {
        float: left;
        width: 230px;
        height: 100%;
        min-height: 86vh;
        border-right:1px solid @listBorderColorNo8;
        .device-list {
            
            .channels {
                width: 230px;
                margin-top: 10px;
                height: 260px;
                border-bottom: 1px solid @listBorderColorNo8;
            }
            .channel-list {
                padding-left: 20px;
                line-height: 35px;
            }
            .myicon-boll {
                font-size: 16px;
            }
        }
        .condition {
            padding: 0 10px;
            .ant-select,
            .ant-calendar-picker,
            .ant-btn {
                width: 100%;
                margin-top:10px;
            }

        }
    }
    ._VideoList_ {
        float: left;
        width: calc(100% - 230px);
        height: 100%;
        overflow-x: hidden;
        .title {
            padding-left: 10px;
            line-height: 40px;
            border-bottom: 1px solid @listBorderColorNo8;
        }
        .ant-btn-link {
            color: @textColorNo5;
        }
    }
    .playbtn {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -51px;
        margin-left: -35px;
        width: 70px;
        height: 70px;
        cursor: pointer;
        span {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -15px;
            margin-top: -15px;
            display: inline-block;
            width: 30px;
            height: 30px;
            background: @opaqueBalck;
            border-radius: 50%;
            line-height: 30px;
            text-align: center;
            color: #fff;

        }
        // svg {
        //     width: 14px;
        //     height: 14px;
        // }
    }
    .result-list {
        width: 100%;
        height: calc(100% - 140px);
        overflow-y: auto;
        .ant-spin {
            position: absolute;
            left:  50%;
            top: 50%;
            margin-left: -10px;
            margin-top: -12.5px;
        }
        .result-item {
            position: relative;
            margin-left: 16px;
            margin-top: 16px;
            float: left;
            width: calc(14.29% - 18.65px);
            min-width: 128px;
            .imgbox {
                display: inline-block;
                width: 100%;
                min-height: 50px;
                box-sizing: border-box;
                &.selected {
                    outline: 2px solid @btnHoverColorNo2;
                }
                img {
                    width: 100%;
                }
            }
            .type {
                font-size: @font-size-base;
                height: 21px;
            }
            .playtime {
                position: absolute;
                right: 10px;
                top: 70px;
                font-size: 12px;
                color:#fff;
                label {
                    vertical-align: 2px;
                }
            }
            .time {
                color: @disableColorNo7;
                font-size: @font-size-base
            }
            .result-item-checkbox {
                position: absolute;
                left: 6px;
                top: 3px;
            }
            .ant-checkbox-wrapper + span {
                padding-right: 0px;
                padding-left: 0px;
            }

        }
    }
    .playBack-video {
        height: calc(100% - 80px);
        min-height: calc(77vh - 80px);
        background:@btnHoverColorNo2;
        text-align: center;
        padding-top: 20%;
    }
    .record-mark {
        margin-right: 5px;
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        &.Timing {
            background: #52c41a;
        }
        &.Event {
            background: #fcac15;
        }
        &.AlarmLocal {
            background: #f5222d;
        }
        &.Alarm {
            background: #f5222d;
        }
        &.Manual {
            background: #00FFF7;
        }
    }
    ._VideoPlay_ {
        height: 100%;
        .video-list {
            width: 240px;
            height: 100%;
            line-height: 30px;
            float: left;
            ul {
                height: calc(100% - 40px);
                overflow-y: auto;
            }
            li {
                margin-top: 8px;
                line-height: 26px;
                padding-left: 10px;
                .time {
                    font-size: 12px;
                    color: @disableColorNo7;
                    margin-left: 12px;
                }
                &.active, &:hover {
                    background:@secondNavHoverColorNo14;
                    color: @linkColorNo20;
                }
            }
        }
        .play-content{
            width: calc(100% - 240px);
            float: left;
            height: 100%;
            .touchbar {
                position: relative;
                height: 40px;
                line-height: 30px;
                padding:5px 10px;
                background: linear-gradient(#f8f8f6, #cccdcf);
                .touchbar-left {
                    span {
                        margin-left: 15px;
                    }
                }
                .touchbar-center {
                    text-align: center;
                    span {
                        margin-left:25px;
                    }
                    background: rgba(0, 0, 0, 0.1);
                    border-radius: 4px;
                }
                .touchbar-right {
                    text-align: right;
                    span {
                        margin-right: 15px;
                    }
                }
                .voice {
                    display: inline-block;
                    width: 110px;
                    margin: 0;
                    margin-left: 15px;
                    margin-bottom: 1px;
                }
                .ant-slider-track {
                    background: @linkColorNo20;
                }
                .touchbar-icon {
                    vertical-align: -0.3em;
                }
                .anticon{
                    margin-right: 16px;
                    font-size: 20px;
                    &:hover{
                        color: @btnNormalColorNo1;
                    }
                }
            }
        }
    }
}
.ant-calendar-markDate{
    position: relative;
    &:after {
        position: absolute;
        bottom: 5px;
        content: ' ';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: @btnHoverColorNo2;
        left:50%;
        top: 19px;
        margin-left: -3px;
    }
}
.videoSearch-select{
    .record-mark {
        margin-right: 5px;
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        &.Timing {
            background: #52c41a;
        }
        &.Event {
            background: #fcac15;
        }
        &.Alarm {
            background: #f5222d;
        }
        &.Manual {
            background: #00FFF7;
        }
    }
    .detail-event{
        padding-left: 35px;
    }
}


@Length8: 8/@px-unit;
@Length10: 10/@px-unit;
@Length16: 16/@px-unit;
@Length20: 20/@px-unit;
@Length24: 24/@px-unit;
@Length40: 40/@px-unit;
@Length48: 48/@px-unit;
@Length64: 64/@px-unit;
@Length68: 68/@px-unit;
@Length100: 100/@px-unit;
@Length160: 160/@px-unit;
@Length240: 240/@px-unit;
@Length340: 340/@px-unit;
@Length360: 360/@px-unit;
@Length372: 372/@px-unit;
._Preview_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding: 0 @Length10;
    height: calc(100vh - @Length64);//menu栏
    //工具栏
    .p-top{
        height: @Length48;
        box-sizing: border-box;
        .icon{
            text-align: right;
            .active{
                color: @btnNormalColorNo1;
            }
        }
        //右上方工具栏
        .actionBar{
            box-sizing: border-box;
            .active{
                color: @btnNormalColorNo1;
            }
            .anticon{
                font-size: @Length24;
                display: inline-block;
                padding-top: 3/@px-unit;
                margin-right: 12/@px-unit;
                &:hover{
                    color: @btnNormalColorNo1;
                }
                &.anticon-fullscreen{
                    margin-right: 0;
                }
                &.anticon-down {
                    margin-right: 0;
                    font-size: inherit;
                }
            }
        }
    }
    //内容
    .p-con{
        height: calc(100% - @Length48);
        .p-left{
            width: @Length240;
            height: 100%;
            float: left;
            position: relative;
            background-color: @secondNavBgColorNo13;
        }
        .p-right{
            float: left;
            width: calc(100% - @Length240);
            &[supportLeftBar=false] {
                width: 100%;
            }
            height: 100%;
            position: relative;
            //视屏+工具栏
            .videoWrap {
                width: 100%;
                height: 100%;
                background-color: @gravel;
                //普通模式下
                &[previewMode=normal] {
                    width: 40%;
                    //出入口快速配置模式下视屏宽度占比50%
                    &[supportQuickConfig=true] {
                        width: 50%;
                    }
                    height:calc(100% - @Length340);//快速配置占用340高度
                }
                //智能模式下 视屏宽度右侧360用于详情展示 下方240用于走马灯展示
                &[previewMode=ivs] {
                    width: calc(100% - @Length360);
                    height: calc(100% - @Length240);
                }
                //视屏
                .video{
                    width: 100%;
                    text-align: center;
                    height: calc(100% - @Length68);//工具栏高度68
                }
                //工具栏
                .actionBar{
                    position: relative;
                    box-sizing: border-box;
                    z-index: 2;
                    ._BottomBar_ {
                        padding-left: @Length16;
                        background-color: @gravel;
                        color: white;
                        height: @Length68;
                        .anticon {
                            display: inline-block;
                        }
                        &[originSize=true] {
                            width: 100vw;
                        }
                    }
                    .ai-button {
                        top: 18/@px-unit;
                        margin-right: 14/@px-unit;
                        .anticon{
                            margin: 0;
                        }
                        span:nth-child(2) {
                            position: relative;
                            top: -4/@px-unit;
                        }
                    }
                    .active{
                        color: @btnNormalColorNo1;
                    }
                    .anticon{
                        font-size: @Length24;
                        margin-top: 22/@px-unit;
                        margin-right: 22/@px-unit;
                        &:hover{
                            color: @btnNormalColorNo1;
                        }
                        &.anticon-fullscreen{
                            margin-right: 0;
                        }
                    }
                    .itemDetail {
                        color: black;
                        background: @homePageNo1;
                        border-radius: @Length10;
                        padding: 4/@px-unit 12/@px-unit;
                        margin: 0 8/@px-unit 0 -8/@px-unit;
                        max-width: 200/@px-unit;
                        .anticon {
                            position: relative;
                            width: @Length24;
                            cursor: pointer;
                            margin: 0;
                        }
                        span:not(.anticon) {
                            margin-right: 8/@px-unit;
                            cursor: pointer;
                        }
                    }
                    ._AILineBar_ {
                        margin-top: @Length8;
                        .ant-row {
                            .label-div-Container {
                                margin-left: @Length48;
                            }
                            .label-normal {
                                font-size: 14/@px-unit;
                                font-weight: normal;
                                font-stretch: normal;
                                color: @loginForgetPasswordHoverColor;
                                max-width: 180/@px-unit;
                            }
                        }
                    }
                }
            }
        }
    }
    ._TopBar_{
        > div {
            float: right;
        }
        > span {
            float: right;
        }
        .recordWrap {
            > span {
                float: left;
            }
            > div {
                float: left;
            }
            margin-right: 0 !important;
        }
        .SnapSwitch {
            > div {
                float: left;
            }
            margin-right: 10/@px-unit !important;
        }
        & > span:first-child {
            margin-right: 0;
        }
        .anticon:not(.anticon-down){
            font-size: @Length24;
            line-height: @Length48;
        }
    }
    //左侧面板
    ._LeftBar_{
        position: relative;
        
    }
    .p-left-collapse{
        position: fixed;
        width: @Length240;
        bottom: 0;
        border-right: none;
        border-left: none;
        .ant-collapse-header{
            padding-left: @Length16;
            .ant-collapse-arrow {
                right: @Length16;
                text-align: right;
            }
        }
        .ant-collapse-content-box{
            padding: @Length16;
        }
        button {
            width: 100/@px-unit;
        }
        .min-button {
            width: 60/@px-unit;
            padding: 0;
        }

    }
    .p-channel-collapse {
        .ant-collapse-header {
            border-bottom: 1/@px-unit solid #d9d9d9;
            margin-bottom: 6/@px-unit;
        }
        .ant-collapse-item{
            border: none;
        }
        .ant-collapse-content-box{
            padding: 0;
        }
    }
    .p-zoomFoucs {
        
        .step{
            text-align: center;
            border: 1/@px-unit solid @dividerColorNo9;
            border-radius: 4/@px-unit;
            cursor: pointer;
            >.ant-col{
                border-right: 1px solid @dividerColorNo9;
                &:first-child{
                    border-radius: 4/@px-unit 0 0 4/@px-unit;
                }
                &:last-child{
                    border-radius: 0 4/@px-unit 4/@px-unit 0;
                }
            }
            .active{
                border: 1/@px-unit solid @linkColorNo20;
                color: @linkColorNo20;
            }
            
        }
        .point{
            margin-top: @Length10;
        }
        .plate-check {
            div {
                margin-bottom: @Length10;
            }
            
            label {
                width: 110/@px-unit;
                text-overflow: ellipsis;
                text-align: left;
                display: inline-block;
            }
        }
        .check-tip {
            color: @errorColorNo17;
        }
    }
    .p-channels {
        .stream {
            float: right;
            width: @Length20;
            height: @Length20;
            text-align: center;
            border: 1/@px-unit solid @btnNormalColorNo1;
            color: @btnNormalColorNo1;
            line-height: 18/@px-unit;
            font-size: 12/@px-unit;
            border-radius: 3/@px-unit;
        }
        .channel-item {
            cursor: pointer;
            padding: 5/@px-unit 0;
            &:hover{
                background-color: @secondNavHoverColorNo14;
                color: @btnNormalColorNo1;
            }
        }
    }
    ._CarouselPreview_ {
        background-color: @contentBgColorNo15;
        width: calc(100% - @Length372);
        height: @Length240;
        .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-nav-container {
            height: @Length240;
            .m-mr-12;
        }

        .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
            height: @Length240;
            width: @Length160;
            .m-mr-12;
        }
        .tab-style {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            height: @Length240;
            div {
                width: 100%;
                height: 30/@px-unit;
                line-height: 30/@px-unit;
                text-align: center;
                .m-mt-12;
            }
            .box-time {
                width: @Length160;
            }
            .box-Pic {
                width: @Length160;
                height: 100/@px-unit;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .box-PicPlate {
                width: @Length160;
                height: 60/@px-unit;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .ant-tabs-nav .ant-tabs-tab .anticon {
            margin-right: 0;
        }
        .ant-tabs-nav {
            height: 100%;
        }
        .ant-tabs-tab {
            height: @Length240;
            width: @Length160;
            .m-mr-12;
        }
        .ant-tabs-nav-operations {
            button {
                display: none;
            }
        }
        .ant-tabs-nav-operations:after {
            width: 14/@px-unit;
            margin: 110/@px-unit 8/@px-unit 0 8/@px-unit;
            content: "...";
        }
    }
    ._CarouselDetail_ {
        position: absolute;
        height: 100%;
        width: @Length360;
        left: calc(100% - @Length360);
        top: 0;
        background-color: @contentBgColorNo15;
        .PanoPic {
            width: 100%;
            height: 180/@px-unit;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .info-detail {
            width: 100%;
            height: 80/@px-unit;
        }
        .BlueWhiteColor {
            background: #00f,
        }
        .Yellow_Color {
            background: #f1cf47,
        }
        .White_Color {
            background: #fff,
        }
        .BlackWhiteColor {
            background: #000,
        }
        .GreenWhiteColor {
            background: #0c0,
        }
        .linear_gradient {
            background: linear-gradient(to bottom, #fff, #00ff00)
        }
        .emptyBlackColor {
            background: none,
        }
    }
    .Top48 {
        height: @Length48;
    }
    .MarginT8 {
        margin-top: @Length8;
    }
}



._CameraLightConifg_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20/@px-unit; //为了不eslint告警写一个
    .err{
        color: @errorColorNo17
    }
    .hover-top {
        .label-normal-container {
            height: 48/@px-unit !important;
        }
        .ant-checkbox-wrapper {
            position: relative;
            width: 25/@px-unit !important;
            .labelCheckbox-content-wrapper {
                position: absolute;
                left: 4px;
                top: -18px;
            }
        }
    }
}


// ._CameraPeripheralConfig_ {
//     // 页面组件特有的CSS，
//     // UI组件的样式在UI组件组内内部
//     // 不同通用样式存放在 style/common.less中
// }



._RadarComp_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    .err{
        color: @errorColorNo17
    }
    .hover-top {
        .label-normal-container {
            height: 48/@px-unit !important;
        }
        .ant-checkbox-wrapper {
            position: relative;
            width: 25/@px-unit !important;
            .labelCheckbox-content-wrapper {
                position: absolute;
                left: 4px;
                top: -18px;
            }
        }
    }
    .lane-box{
        display: inline-block;
        width: 32/@px-unit;
        height: 32/@px-unit;
        margin-right: 10/@px-unit;
        text-align: center;
        border: 1px solid #f5f5f5;
    }
    .enabled{
        color: @btnNormalColorNo1;
        border-color: @btnNormalColorNo1;
    }
}

._CameraPicParams_ {
    // 页面组件特有的CSS，
    // UI组件的样式在UI组件组内内部
    // 不同通用样式存放在 style/common.less中
    padding-left: 20 / @px-unit; //为了不eslint告警写一个
    .err {
        color: @errorColorNo17;
    }
    .inline {
        > div {
            float: left;
            vertical-align: middle;
        }
        .separator {
            float: left;
            margin-left: 8px;
            margin-right: 8px;
        }
        .label-div-Container {
            float: left !important;
        }
    }
}