background-position: -400px 0;
        }
        &theme4duty{
          background-position: -500px 0;
        }
        &template1{
          background-position: 0 -140px;
        }
        &template2{
          background-position: -100px -140px;
        }
        &template3{
          background-position: -200px -140px;
        }
        &template4{
          background-position: -300px -140px;
        }
        &horizontal_theme3{
          background-position:-400px -140px;
        }
        &horizontal_theme1{
          background-position:-555px -140px;
        }
      }
      .imgSelect-custom-grid1{
        background-image:url('/static/media/layout0.5d46031b.png');
        background-size: cover;
      }
      .imgSelect-custom-grid2{
          background-image:url('/static/media/layout1.70095606.png');
          background-size: cover;
      }
      .imgSelect-custom-grid3{
          background-image:url('/static/media/layout2.1680973c.png');
          background-size: cover;
      }

}
// 

.passwordCheck-light{
    width: 30%;
    display: inline-block;
    height: 5px;
    margin: 0;
    border-radius: 5px;
    margin-left: 3px;
    // background-color:@listBorderColorNo8;
    transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
}
.passwordCheck-tip{
    transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    color:#F5222D;
    margin: 0;
} 
.passwordCheck-label{
    line-height: 32px;
    text-align: right;
    padding-right:10px; 
    // color:@label-dark-Color;
}
.passwordCheck-vlight{
    width: 12%;
    display: inline-block;
    height: 5px;
    margin: 0;
    margin-bottom: 6px;
    // background-color:@listBorderColorNo8;
    transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
}

.passwordCheck-v-left{
    border-radius: 5px 0 0 5px
}
.passwordCheck-v-right{
    border-radius: 0 5px 5px 0
}
._FixedSizeListbox_ {
    border: 1px solid #d9d9d9;
    .ListItem {
        border-top: 1px solid rgb(240, 240, 240);
    }
    .ListItem:hover{
        background-color: rgb(250, 250, 250);
    }
    .table-header-wrap {
        width: 338px;
        height: 48px;
        font-weight: 500;
        background-color: rgb(250, 250, 250);
    }
    .text {
        width: 90%;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        vertical-align: top;
    }
    ::-webkit-scrollbar {
        width: 10px;
        min-width: 10px;
        border-color: '#e8e8e8';
        border-top: 0;
        border-right: 0;
        background-color: #efefef;
    }
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
        box-shadow: inset 0 0 6px rgba(0,0,0,0);
        border-radius: 0px;
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 0px;
        background: #8f8f8f;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
        box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
    }
    ::-webkit-scrollbar-thumb:hover{
        background: #272727;
    }
    ::-webkit-scrollbar-thumb:active{
        background: #8f8f8f;
    }
    ::-webkit-scrollbar-thumb:window-inactive {
        background: rgba(0, 0, 0, 0.2);
    }
}

@px-unit: 14rem;

@schedule-dividerColor: rgba(0,0,0,0.06); //分割线颜色
@schedule-inputBorderColor: #d9d9d9; // 输入框边框
@schedule-listBorderColor: #e8e8e8; // 计划表边框颜色
@schedule-successColor: #52c41a; // 时间条颜色
@schedule-warnColor: #fcac15; // 警告条颜色
@schedule-errorColor: #f5222d; // 报警条颜色
@schedule-textColor: #272727; // 文本颜色
@transform-height: 2/@px-unit;
@transform-height1: 1/@px-unit;
@font-color: #fff;
._new_schedule_public_component_{
    color: #fff;
    padding: 16/@px-unit;
    padding-bottom: 32/@px-unit;
    user-select: none;
    .align-center {
        text-align: center
    }
    .mainBody{
        border: 1px solid #484C55;
    }
    .ant-card-body{
        padding: 15/@px-unit 24/@px-unit 15/@px-unit 24/@px-unit;
    }
    .slider-container{
        position: relative;
    }
    .btnContainer{
        float: right;
        button:nth-child(1) {
            margin-right: 10/@px-unit;
        }
    }
    .time-ruler-wrapper {
        // height: 64/@px-unit;
        padding-top: 50/@px-unit;
        background-color: #2d302d;
        // 时间尺的样式
        .timeplan-ruler {
            display: flex;
            align-items: flex-end;
            height: 14/@px-unit;
            position: relative;
            font-size: 12/@px-unit;
            .ruler-section {
                flex: 1;
            }
            div{
                display: inline-block;
                height: 5/@px-unit;
                border-left: 1/@px-unit solid #484C55;
            }
            div:last-child {
                border-right: 1/@px-unit solid #484C55;
                .ruler-text{
                    margin-left: 0/@px-unit;
                }
                
            }
            .ruler-text{
                position: absolute;
                bottom: 15/@px-unit;
                margin-left: -5/@px-unit;
                white-space: nowrap;
                font: 11/@px-unit/1 sans-serif; 
                color:#fff;
            }
            .hour{
                height: 10/@px-unit;
            }
        }
    }

    .main-container {
        box-sizing: border-box;
        margin: 0;
        overflow: hidden;
        height: 60/@px-unit;
        &:not(:last-of-type) {
            border-bottom: none;
            .label {
                border-bottom: 1/@px-unit solid #484C55;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .behind-operator-area {
                border-bottom: 1/@px-unit solid #484C55;
            }
        }
        .label{
            float: left;
            height: 100%;
            line-height: 59/@px-unit;
            padding-left: 10/@px-unit;
            padding-right: 10/@px-unit;
            text-align: right;
        }
        .slider-container {
            display: flex;
            flex-wrap: wrap;
            float: left;
            height: 100%;
        }
        .behind-operator-area {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            height: 100%;
        }
        .copyBtn{
            >span{
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-wrap: normal;
            }
            display: inline-block;
            width: 100%;
            overflow: hidden;
            flex-shrink: 1;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
            vertical-align: middle;
        }
    .dayplan {
        position: relative;
        width: 100%;
        border: 1/@px-unit solid #484C55; 
        //background-color: #fff;
        cursor: pointer;
        box-sizing: border-box;
        // &:first-of-type {
        //     border-top: none;
        // }
        &:last-of-type {
            border-bottom: none;
        }
        &:not(:last-of-type) {
            border-bottom: none;
        }
        .handle{
            position: absolute;
            width: 4/@px-unit;
            height: 80%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 999;
            // margin-top: -3/@px-unit;
            // margin-left: -7/@px-unit;
            background-color: #00A335;
            border: solid 1/@px-unit #00A335;
            // border-radius: 50%;
            -webkit-box-shadow: 0;
            box-shadow: 0;
            cursor: w-resize;
            -webkit-transition: border-color .3s,-webkit-box-shadow .6s,-webkit-transform .3s cubic-bezier(.18, .89, .32, 1.28);
            transition: border-color .3s,-webkit-box-shadow .6s,-webkit-transform .3s cubic-bezier(.18, .89, .32, 1.28);
            transition: border-color .3s,box-shadow .6s,transform .3s cubic-bezier(.18, .89, .32, 1.28);
            transition: border-color .3s,box-shadow .6s,transform .3s cubic-bezier(.18, .89, .32, 1.28),-webkit-box-shadow .6s,-webkit-transform .3s cubic-bezier(.18, .89, .32, 1.28);
            &:hover {
                border-color: #24B553;
            }
        }
        .track-wrapper {
            position: absolute;
            height: 100%;
            min-width: 2px;
            background-color: #00A335;
        }
        .track{
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 1;
            
            &.green  {
                background:@schedule-successColor;
            }
            &.yellow  {
                background:@schedule-warnColor;
            }
            &.red {
                background:@schedule-errorColor;
            }
			&.red-1 {
                background-color: #f54117;
            }
            &.green-2 {
                background-color: #00A335;
            }
            &.green-3 {
                background-color: #03aeac;
            }
            &.orange-1 {
                background-color: #ff7e16;
            }
            &.orange-2 {
                background-color: #fcac15;
            }
            &.orange-3 {
                background-color: #bc7c00;
            }
            &.blue-1 {
                background-color: #00A335;
            }
            &.blue-2 {
                background-color: #2238c7;
            }
            &.purple-1 {
                background-color: #ac0dce;
            }
            &.purple-2 {
                background-color: #6e52fe;
            }
            &.customcolor {
                z-index: 5;
            }
        }
        .track-selected {
            z-index: 2;
            &.customcolor {
                z-index: 5;
            }
        }

        .handler-wrapper {
            position: absolute;
            pointer-events: none;
            border: 1/@px-unit solid #00A335;
            width: 100%;
            height: 100%;
            z-index: 998;
        }
        :focus {
            outline: none;
        }
    }
    .grid-wrapper {
        display: flex;
        flex-wrap: nowrap;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 2;
        pointer-events: none;
        .slider-grid {
            height: 100%;
            flex: 1;
            border-right: 1/@px-unit solid #484C55;
            &:last-of-type {
                border-right: none;
            }
        }
    }
}
    .day-component-wrapper {
        position: relative;
        border: 1/@px-unit solid @schedule-dividerColor;
        .draw-rectangle {
            position: absolute;
            pointer-events: none;
            background-color: transparent;
            box-sizing: border-box;
            border: 1/@px-unit dashed #1890ff;
            z-index: 9999;
            width: 0;
            height: 0;
            left: 0;
            top: 0;
        }
        .vertical-ruler-mask {
            position: absolute;
            pointer-events: none;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            .mask-main-container {
                height: 100%;
            }
            .mask-main-content {
                position: relative;
                height: 100%;
                .cursor-icon {
                    position: absolute;
                    top: 0;
                    transform: translate(-48%, -100%);
                }
                .vertical-ruler {
                    height: 100%;
                    position: absolute;
                    border-left: 1/@px-unit solid #f7772c;
                }
                .ruler-time-string {
                    height: 32/@px-unit;
                    line-height: 32/@px-unit;
                    position: absolute;
                    font-size: 12/@px-unit;
                    color: #8c8c8c;
                    bottom: 0;
                    transform: translate(-50%, 100%);
                }
            }
        }
    }
    //事件类型头部的样式
    .header{
        // height: 50/@px-unit;
        line-height: 50/@px-unit;
        margin-bottom: 16/@px-unit;
        overflow: hidden;
        // margin-bottom: 20/@px-unit;
        // width: 880/@px-unit;
        .status-container{
            // margin-bottom: 20/@px-unit;
            // display: flex;
            float: left;
            .status-header {
                float: left;
                padding-right: 8/@px-unit;
            }
            .status-wrapper {
                float: left;
                padding-right: 10/@px-unit;
            }
            .compact-status-wrapper {
                float: left;
                cursor: pointer;
                padding-right: 10/@px-unit;
            }
            .compact-status-wrapper-selected {
                background-color: rgb(238, 238, 238);
            }
            .circle {
                content: '';
                height: 10/@px-unit;
                width: 10/@px-unit;
                display: inline-block;
                border-radius: 5/@px-unit;
                margin:0 10/@px-unit;
                &.green  {
                    background:@schedule-successColor;
                }
                &.yellow  {
                    background:@schedule-warnColor;
                }
                &.red {
                    background:@schedule-errorColor;
                }
            }
            p {
                display: inline;
            }
        }
        .button-container{
            float: right
        }
    }
    .customcolor {
        background-color: transparent;
        text-align: center;
        line-height: 59px;
    }
}

.timeSchedule-drawer{
    button:nth-child(1) {
        margin-right: 20/@px-unit;
    }
    .ant-drawer-body{
        .btnContainer{
            margin-top: 40/@px-unit;
            // text-align: right;
        }
    }
}
.timeSchedule-modal {
    .ant-modal-body {
        max-width: 100%;
    }
    .timeSchedule-checkboxGroup-wrapper {
        .ant-checkbox-wrapper {
            height: 32/@px-unit;
            padding: 4/@px-unit 4/@px-unit 4/@px-unit 0;
        }
        .ant-checkbox-wrapper + .ant-checkbox-wrapper {
            margin-left: 0;
        }
    }
}

.red-1-options {
    display: inline-block;
    width: 12/@px-unit;
    height: 12/@px-unit;
    margin-right: 5/@px-unit;
    border-radius: 2/@px-unit;
    background-color: #f54117;
}
.green-options {
    display: inline-block;
    width: 12/@px-unit;
    height: 12/@px-unit;
    margin-right: 5/@px-unit;
    border-radius: 2/@px-unit;
    background-color: @schedule-successColor;
}
.green-2-options {
    display: inline-block;
    width: 12/@px-unit;
    height: 12/@px-unit;
    margin-right: 5/@px-unit;
    border-radius: 2/@px-unit;
    background-color: #0a9c02;
}
.green-3-options {
    display: inline-block;
    width: 12/@px-unit;
    height: 12/@px-unit;
    margin-right: 5/@px-unit;
    border-radius: 2/@px-unit;
    background-color: #03aeac;
}

.orange-1-options {
    display: inline-block;
    width: 12/@px-unit;
    height: 12/@px-unit;
    margin-right: 5/@px-unit;
    border-radius: 2/@px-unit;
    background-color: #ff7e16;
}
.orange-2-options {
    display: inline-block;
    width: 12/@px-unit;
    height: 12/@px-unit;
    margin-right: 5/@px-unit;
    border-radius: 2/@px-unit;
    background-color: #fcac15;
}
.orange-3-options {
    display: inline-block;
    width: 12/@px-unit;
    height: 12/@px-unit;
    margin-right: 5/@px-unit;
    border-radius: 2/@px-unit;
    background-color: #bc7c00;
}

.blue-1-options {
    display: inline-block;
    width: 12/@px-unit;
    height: 12/@px-unit;
    margin-right: 5/@px-unit;
    border-radius: 2/@px-unit;
    background-color: #1890ff;
}

.blue-2-options {
    display: inline-block;
    width: 12/@px-unit;
    height: 12/@px-unit;
    margin-right: 5/@px-unit;
    border-radius: 2/@px-unit;
    background-color: #2238c7;
}

.purple-1-options {
    display: inline-block;
    width: 12/@px-unit;
    height: 12/@px-unit;
    margin-right: 5/@px-unit;
    border-radius: 2/@px-unit;
    background-color: #ac0dce;
}

.purple-2-options {
    display: inline-block;
    width: 12/@px-unit;
    height: 12/@px-unit;
    margin-right: 5/@px-unit;
    border-radius: 2/@px-unit;
    background-color: #6e52fe;
}
.modalOptions-header {
    margin-bottom: 10/@px-unit;
}
.modalOptions-badge-container {
    float: left;
    margin-left: 3/@px-unit;
    margin-right: 3/@px-unit;
}
.schedule-copy-popover {
    .ant-popover-content {
        width: 324/@px-unit;
        .ant-checkbox-wrapper {
            margin-left: 0;
            margin-top: 6/@px-unit;
            margin-bottom: 6/@px-unit;
        }
    }
    .timeSchedule-checkboxGroup-wrapper{
        .check-all {
            margin-bottom: 6/@px-unit;
        }
    }
    .popover-footer {
        display: flex;
        flex-direction: row-reverse;
        margin-top: 18/@px-unit;
        .apply-button {
            margin-left: 8/@px-unit;
        }
    }
}
.track-time-hover-popover {
    .ant-popover-inner-content {
        padding: 0;
        color: #fff;
    }
    .time-hover-content {
        box-sizing: border-box;
        padding: 12/@px-unit 16/@px-unit 12/@px-unit 16/@px-unit;
    }
    
}
.track-time-popover {
    color: #fff;
    .ant-time-picker ~ a {
        color: inherit;
        cursor: initial;
    }
    .ant-popover-inner-content {
        padding: 0/@px-unit;
    }
    .ant-time-picker-panel-addon {
        display: flex;
        flex-direction: row-reverse;
    }
    a {
        margin-left: 8/@px-unit;
        margin-right: 8/@px-unit;
    }
    .time-popover-content {
        display: flex;
        align-items: center;
        padding: 0;
        .confirm-icon {
            color: @font-color;
            margin-left: 14/@px-unit;
            font-size: 24/@px-unit;
            cursor: pointer;
        }
        .delete-icon {
            color: @font-color;
            margin-left: 8/@px-unit;
            font-size: 24/@px-unit;
            cursor: pointer;
        }
        .confirm-icon, .delete-icon {
            &:hover {
                color: #40A9FF;
            }
            &:active {
                color: #096DD9;
            }
        }
    }
    .start-timer-picker, .end-timer-picker {
        .ant-time-picker-panel-combobox {
            display: flex;
        }
    }
    .ant-popover-content .ant-popover-inner-content {
        overflow: visible;
        padding: 10px;
    }
    .methodLabel {
        display: inline-block;
        width: 108px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }
    .time-popover-actions {
        display: flex;
        justify-content: flex-end;
    }
    .labelText-wrapper {
        overflow: visible;
    }
}

.Ocx_download{
    position: fixed;
    text-align: center;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 0;
    border-top: 1px solid @dividerColorNo9;
    background: @homePageNo1;
    z-index: 10000;
    span{
        padding-top: 6px;
        display: inline-block;
    }
    a {
        text-decoration: underline;
    }
    .closeBtn{
        float: right;
        margin-right: 20px;
        border: 1px solid @dividerColorNo9;
        border-radius: 4px;
        padding: 4px 10px;
        cursor: pointer;
    }
}
.one-day-range-picker {
    padding: 0 18px 20px;
    
    .time-picker-wrap {
        margin-top: 16px;
        display: flex;
        justify-content: center;
        align-items: center;

        .time-picker {
            flex:1;
        }
    
        .time-picker-split {
            padding: 0 4px;
        }
    }
}


.passwordCheck-light{
    width: 30%;
    display: inline-block;
    height: 5px;
    margin: 0;
    border-radius: 5px;
    margin-left: 3px;
    background-color:@listBorderColorNo8;
    transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
}
.passwordCheck-tip{
    transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    color:#F5222D;
    margin: 0;
} 
.passwordCheck-label{
    line-height: 32px;
    text-align: right;
    padding-right:10px; 
    // color:@label-dark-Color;
}
.passwordCheck-vlight{
    width: 12%;
    display: inline-block;
    height: 5px;
    margin: 0;
    margin-bottom: 6px;
    background-color:@listBorderColorNo8;
    transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
}

.passwordCheck-v-left{
    border-radius: 5px 0 0 5px
}
.passwordCheck-v-right{
    border-radius: 0 5px 5px 0
}
.passwordInput-security {
    -webkit-text-security:disc;
    -moz-text-security:disc;
    -ms-text-security:disc;
}
._PureFileInput_ {
    // UI组件特有的CSS，
}

.reader-select {
    position: relative;

    .label-div-Container > .label-normal-container {
        padding: 8px 0 !important;
    }

    .custom-menu-box {
        width: auto;
        max-width: 240px;

        .custom-menu {
            width: auto;
            max-width: 240px;
            position: absolute;
            top: 42px;
            left: 108px;
            z-index: 1;
            box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
            .ant-menu-submenu, .ant-menu-item, .ant-menu-submenu-title {
                height: 32px;
                line-height: 32px;
            }
        }
    }
}

.FireWall-tab{
    .ant-table-header-column{
        font-weight: bold;
    }
    .padding15{
        padding: 14px;
        padding-top: 0;
    }
    .paddingLeft15{
        padding-left:15px;
    }
    .divider{
        padding:0 15px;    
    }
    .marginRight10{
        margin-right:10px;
    }
    .firewallTable{
        border: 1px solid #e8e8e8;
    }
    a {
        color:@text-color;
        &:hover{
            color:@primary-color;
        }
    }
    padding: 14px 14px 14px 29px;
    > .ant-row {
        > .ant-col {
            padding-bottom: 14px;
        }
    }
    .ant-popover-buttons .ant-btn:first-child{
        float: right;
    }
    .ant-modal-confirm-btns .ant-btn:first-child{
        float: right;
        margin-left: 10px;
    }
    .Firewall-radio-label{
        width:100px;
    }
}
.Firewall-modal{
    .ant-modal-body{
        padding-left: 60px;
    }
    .LabelIP-label-Col{
        text-align: left;
    }
    .LabelIP-container{
        margin: 0;
    }
    .ant-input.LabelIPinput {
        width:53px;
    }
    .ant-row{
        margin-bottom: 6px;
    }
    .mac-box .mac-input {
        width: 34.5px; 
        min-width: 34.5px; 
        padding: 0; 
    }
    .macInput-label {
        padding: 0;
        text-align: left;
    }
    .ant-input-number{
        width:100%;
    }
    
}
._publicAccountLock_{
    .labelText{
        line-height: 32px;
        font-weight: bold;
    }
    .padding15{
        padding: 15px;
    }
    .marginRight10{
        margin-right:10px;
    }
    .divider{
        padding:0 15px;    
    }
    padding: 14px 14px 14px 29px;
    > .ant-row {
        > .ant-col {
            padding-bottom: 14px;
        }
    }
    .ant-input-number{
        width:100%;
    }
}
._DOSAttack_{
   .alert{
       padding: 0px 20px 20px 20px;
   } 
}
.Cert-form .ant-form-item {
    margin-bottom: 8px !important;
}
.Cert{
    word-break: break-all;
    padding: 14px 14px 14px 29px;
    > .ant-row {
        > .ant-col {
            padding-bottom: 14px;
        }
    }
    // .ant-table-thead > tr:first-child > th:first-child {
    //     border-left: 1px solid #e8e8e8;
    // }
    // .ant-table-thead > tr:first-child > th:last-child {
    //     border-right: 1px solid #e8e8e8;
    // }
    .ant-table-tbody .ant-table-row{
        border-left: 1px solid #e8e8e8;
        border-right: 1px solid #e8e8e8;
    }
    .ant-table-placeholder{
        border-left: 1px solid #e8e8e8;
        border-right: 1px solid #e8e8e8;
    }
    .ant-table-header-column{
        font-weight: bold;
    }
    .ant-form-explain{
        margin-left:0px;
    }
    // .ant-modal-body{
    //     .Cert-form{
    //         .ant-form-item{
    //             position: relative;
    //             .ant-form-item-label{
    //                 text-align: left;
    //                 margin-left: 6%;
    //             }
    //             .ant-form-item-control-wrapper{
    //                 width: 50%;
    //             }
    //         }
    //     }
    // }

    .m-content {
        height: calc(100% - 53px);
        border-top: 1px solid #e8e8ee;
        border-right: 1px solid #e8e8ee;
        border-left: 1px solid #e8e8ee;
    }
}
.Cert_btn_disabled {
    color: #e8e8e8;
    cursor: not-allowed !important;
}
.Cert_tlsbtn_disabled{
    color: #8f8f8f;
    cursor: not-allowed !important;
}
.selectGetCert-radio-group {
    .ant-radio-wrapper {
        display: flex;
    }
    .info {
        padding: 10px 0;
        margin-left: 24px;
        color: #FF9900;
    }
}
.import-other-from {
    .ant-form-item {
        padding-bottom: 8px;
        .label-normal-container {
            padding-top:0 !important;
            padding-bottom: 0 !important;
            .label-normal-wrapper {
                line-height: 22px;
            }
            .key-password{
                width:200px;
            }
        }
    }
}


._SAFEIdentityAuth_ {
    padding: 14px 14px 14px 29px;
    > .ant-row {
        > .ant-col {
            padding-bottom: 14px;
        }
    }
    .ant-table-body {
        border-left: 1px solid @border-color;
        border-right: 1px solid @border-color;
    }
    .ant-table-title {
        padding: 0 10px;
        border:1px solid #e8e8e8;
    }
}

@error-color: #f5222d; // 错误色
._SAFEKMSServices_{
    > .ant-row {
        padding-bottom: 14px;
    }
    .switchTab{
        border-bottom: 1px solid @border-color;
    }
    .paddingTop14{
        padding-top: 14px;
    }
    .info{
        padding-top: 14px;
    }
    .handleBar{
        button{
            margin-right: 10px;
        }
    }
    .LabelIPinput{
        width: 52px !important;
    }
    .LabelIP-label-Col{
        text-align: left !important;
    }
    .table-border{
        border-left: 1px solid @border-color;
        border-bottom: 1px solid @border-color;
        border-right: 1px solid @border-color;
    }
    .table-title{
        height: 40px;
        line-height: 40px;
        border-left: 1px solid @border-color;
        border-top: 1px solid @border-color;
        border-right: 1px solid @border-color;
        .table-title-name{
            padding-left: 30px;    
        }
        .table-cert-manage{
            float: right;
            padding-right:30px;    
            color: @export-color;
            cursor: pointer;
        }
    }
    .ant-table-tbody .CertSefialNum {
        word-break: break-all;
    }
    .row-list{
        margin: 10px 0 10px 0;
    }
    .LabelIP-container{
        margin: 0 !important;
    }
    ._SAFEKMSServices_Alert{
        margin:10px 0 10px 0;
    }
    ._SAFEKMSServices_Revoked{
        color:@error-color;
    }
    .ant-col-5{
        width:221px;
    }
    .ant-table-header-column{
        font-weight:bold;
    }
    .ant-input-number{
        width:100%
    }
}
._CoSignServer_{
    padding: 14px 14px 14px 29px;
    .paddingTop14{
        padding-top: 14px;
    }
    .handleBar{
        button {
            margin-right: 10px;
        }
    }
}
._SAFESafetyWarning_{
    padding:14px;
    overflow:'auto';
    height:'100%';
    .event-list{
        line-height: 30px;
       
    }
    ._SAFESafetyWarning_Alert{
        margin:14px 0;
    }
    .handleBar{
        button {
            margin-right: 10px;
        }
    }
    .alertMessage{
        display: inline-block;
        white-space: nowrap;
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        -ms-word-break: break-all; 
        line-height: 30px;
    }
}
._SAFESafetyWarning_Pop{
    .ant-popover-inner-content{
        overflow: hidden;
        .event-list{
            width:250px;
        }
    }
    .ant-popover-content{
        width:800px;
    }
}
._SAFESecurityStatus_{
    ._SAFESecurityStatus_title{
        background-color:#2D302D;
        padding:15px;
        position: relative;
    }
    ._SAFESecurityStatus_titleText{
        font-size:24px;
        margin-bottom:10px !important;
    }
    ._SAFESecurityStatus_titleTip{
        color:#a7adaf;
        margin-left:5%;
    }
    ._SAFESecurityStatus_detect{
        min-width: 116px;
        height: 40px;
        max-height: 40px;
        margin-top: 14px;
        position:absolute;
        transform: translateY(-240%);
        -ms-transform: translateY(-240%);
        -webkit-transform: translateY(-240%);
        -o-transform: translateY(-240%);
        -moz-transform: translateY(-240%);
        right:20px;
    }
    .icon_pr10{
        padding-right: 10px;
    }
    ._SAFESecurityStatus_list{
        border-top:1px solid #484C55;
    }
    ._SAFESecurityStatus_listTitle{
        border-bottom:1px solid #484C55;
        padding:15px 5px 10px 25px;
        // font-weight: bold;
    }
    ._SAFESecurityStatus_content{
        min-height:180px;
        padding:15px 60px;
    }
    ._SAFESecurityStatus_titleIcon{
        width: 45px;
        height: 45px;
        position: relative;
        top: 6px;
    }
    .securityStateBtn{
        width: 64px;
        height: 24px;
        margin: 6px 0 0 11px;
        line-height: 24px;
    }
    .cuttitle {
        overflow: hidden !important;
        white-space: nowrap;
        word-wrap: normal;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }
    .button_black {
        text-align: center;
        cursor: pointer;
        border: 1px solid #484C55 !important;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -ms-border-radius: 2px;
        -o-border-radius: 2px;
        border-radius: 2px;
    }
    .ant-modal-body{
        padding: 0px;
    }
    .detail-modal{
        .title{
            padding: 20px;
            border-bottom: 1px solid #484C55;
            .detail-opz-btn{
                margin-left: 10px;
                float: right;
            }
            button{
                margin-top: -3px;
            }
        }
        .container{
            
        }
    }
    .detail-title-warning {
        display: inline-block;
            width: calc(100% - 135px);
            vertical-align: middle;
    }
    .ant-progress-bg{
        background-color: #8fc6f8;
        background-image: linear-gradient(to right, rgb(16, 142, 233) 0%, rgb(135, 208, 104) 100%);
        background-size: 40px 40px;
        background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
        background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
        background-image: -ms-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
        -webkit-background-size: 40px 40px;
        background-size: 40px 40px;
    }
}
.item-icon-list{
    width: 64px;
    height: 64px;
    margin: 0 auto;
    display: block;
    font-size:64px;
}
.item-icon-loading{
    position: relative;
    top:-20px;
}
.item-list-name{
    text-align: center;
    height:30px;
    line-height:30px;
    margin-top: 5px;
}
.item-list-name-users {
    text-align: center;
    line-height:30px;
    margin-top: 5px;
}
.item-list-btn{
    display: inline-block;
    padding: 2px 5px;
    border: .5px solid #484C55;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 4px;
    min-width: 60px;
}
.detail-title-warning{
    margin-left: 6px;
    font-weight: bold;
}
.detail-optimize-btn{
    float: right;
    margin: 0 10px;
}
.detail-ignore-btn{
    float: right;
}
.detail-optimize-list{
    position: relative;
    padding: 20px 40px;
    padding-right: 30px;
    border-bottom: 1px solid #484C55;
}
.detail-optimize-btn{
    position: absolute;
    right: 10px;
    top: 10px;
    text-align:right;
    color:#6699FF;
    cursor: pointer;
}
.icon-desc-popover{
    max-width: 500px;
    .icon-desc-title{
        font-weight: bold;
        margin: 10px 0;
    }
}
.icon-status-success{
    svg path{
        fill:#52c41a;
    }
}
.icon-status-fail{
    svg path{
        fill:#fcac15;
    }
}
.icon-status-ignore{
    svg path{
        fill:#8f8f8f;
    }
}
.item-list-name-fail{
    color: #fcac15;
}
// .ant-progress-bg{
//     background-color: #8fc6f8;
//     background-image: linear-gradient(to right, rgb(16, 142, 233) 0%, rgb(135, 208, 104) 100%);
//     background-size: 40px 40px;
//     background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
//     background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
//     background-image: -ms-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
//     -webkit-background-size: 40px 40px;
//     background-size: 40px 40px;
// }
.marginTop20{
    margin-top: 20px;
}

.padding20{
    padding: 20px;
}
._BaseServe_ .ant-divider-horizontal{
    min-width: 95%;
    width: 95%;
}
._WlanAgree_ .ant-table-bordered .ant-table-thead > tr > th, 
._WlanAgree_ .ant-table-bordered .ant-table-tbody > tr > td,
._publicHttps_ .ant-table-bordered .ant-table-thead > tr > th, 
._publicHttps_ .ant-table-bordered .ant-table-tbody > tr > td  {
    border-right:none;
}

._WlanAgree_ .ant-table-bordered .ant-table-thead > tr, 
._WlanAgree_ .ant-table-bordered .ant-table-tbody > tr,
._publicHttps_ .ant-table-bordered .ant-table-thead > tr, 
._publicHttps_ .ant-table-bordered .ant-table-tbody > tr {
    border:1px solid #e8e8e8;
}
._WlanAgree_ .ant-table-bordered .ant-table-thead> tr > th,
._publicHttps_ .ant-table-bordered .ant-table-thead> tr > th{
    font-weight: bold;
}
._WlanAgree_ .ant-table-title,
._publicHttps_ .ant-table-title {
    padding: 5px 0;
}
.marginTop20{
    margin-top: 20px;
}

.padding20{
    padding: 20px;
}
._BaseServe_ .ant-divider-horizontal{
    min-width: 95%;
    width: 95%;
}
._WlanAgree_ .ant-table-bordered .ant-table-thead > tr > th, 
._WlanAgree_ .ant-table-bordered .ant-table-tbody > tr > td,
._publicHttps_ .ant-table-bordered .ant-table-thead > tr > th, 
._publicHttps_ .ant-table-bordered .ant-table-tbody > tr > td  {
    border-right:none;
}

._WlanAgree_ .ant-table-bordered .ant-table-thead > tr, 
._WlanAgree_ .ant-table-bordered .ant-table-tbody > tr,
._publicHttps_ .ant-table-bordered .ant-table-thead > tr, 
._publicHttps_ .ant-table-bordered .ant-table-tbody > tr {
    border:1px solid #e8e8e8;
}
._WlanAgree_ .ant-table-bordered .ant-table-thead> tr > th,
._publicHttps_ .ant-table-bordered .ant-table-thead> tr > th{
    font-weight: bold;
}
._WlanAgree_ .ant-table-title,
._publicHttps_ .ant-table-title {
    padding: 5px 0;
}
._WlanAgree_{
    padding: 14px 14px 14px 29px;
    .title{
        > .ant-col {
            padding-bottom: 14px;
        }
    }
    .netName{
        padding-bottom: 14px;
        border-bottom: 1px solid #e8e8e8;
    }
    .container{
        padding-top: 14px;
        >.ant-col{
            margin-bottom: 14px;
        }
    }
    .table{
        padding: 14px 0;
    }
    .handleBar{
        padding-top: 14px;
    }
    .ant-row{
        .ant-form-item{
            margin-bottom: 0px;
            .ant-form-explain{
                margin-left: 17%;
            }
        }
    }
}
._publicHttps_{
    padding: 14px 14px 14px 29px;
    .title{
        > .ant-col {
            padding-bottom: 14px;
        }
    }
    .padding14{
        padding-bottom: 14px;
    }

    .ant-popover-buttons .ant-btn:first-child{
        float: right;
    }
    ._publicHttps_row{
        width:100%;
        height: 40px;
        line-height: 40px;
        label{
            display: inline-block;
            width:172px;
        }
        .ant-switch{
            margin-left:8px;
            margin-top:10px
        }
    }
}


._VideoTransmission_ {
    padding: 14px;
    min-height: 80vh;

    .ant-table-header-column {
        font-weight: bold;
    }

    .box {
        width: 100%;
        margin-bottom: 10px;
        border: 1px solid @border-color;

        .title {
            padding: 6px 14px;
            font-weight: bold;
            border-bottom: 1px solid @border-color;
        }

        .conainer {
            width: 100%;
            padding: 14px 32px;

            >.ant-row {
                &:last-of-type {
                    .ant-col {
                        &:last-child {
                            padding-bottom: 0;
                        }
                    }
                }

                >.ant-col {
                    padding-bottom: 14px;
                }
            }
        }

        .ant-table-body {
            border-left: 1px solid @border-color;
            border-right: 1px solid @border-color;
        }
    }

    // .ant-table-thead > tr:first-child > th:first-child {
    //     border-left: 1px solid @border-color;
    // }
    //   .ant-table-thead > tr:first-child > th:last-child {
    //     border-right: 1px solid @border-color;
    // }
    //   .ant-table-tbody .ant-table-row{
    //     border-left: 1px solid @border-color;
    //     border-right: 1px solid @border-color;
    // }
    //   .ant-table-placeholder{
    //     border-left: 1px solid @border-color;
    //     border-right: 1px solid @border-color;
    // }
    //   .ant-table-header-column{
    //     font-weight: bold;
    // }
    .ant-table-title {
        padding: 0 10px;
        border-bottom: 1px solid #e8e8e8;
    }

    .ant-table-tbody .CertSefialNum {
        word-break: break-all;
    }
}

._VideoExport_ {
    min-height: 80vh;
    padding: 14px 14px 14px 29px;

    >.ant-row {
        >.ant-col {
            padding-bottom: 14px;
        }
    }

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

    .ant-form-explain {
        margin-left: 21%
    }
}

._VideoStorage_,
._GeneralConfig_ {
    min-height: 80vh;

    padding: 14px 14px 14px 29px;

    >.ant-row {
        >.ant-col {
            padding-bottom: 14px;
        }
    }
}

._VideoEncrypt_ {
    .ant-collapse {
        background: #fff;
    }

    .ant-collapse-content>.ant-collapse-content-box {
        padding: 0px;
    }

    .handle {
        margin-left: 20px;

        button {
            margin-right: 10px;
        }
    }
}
._custom_tooltip_ {
    position: absolute;
    width: 376px;
    top: -57px;
    margin-left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    &.has_methods {
        top: -105px;
    }
    svg {
        &:hover {
            color: #1890ff;
        }
    }
    .right svg {
        height: 20px;
        width: 20px;
    }
    .ant-tooltip-arrow {
        left: 50%;
        bottom: -14px;
        transform: translateX(-50%);
    }
    .ant-tooltip-arrow::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        width: 5px;
        height: 5px;
        margin: auto;
        background-color: #fff;
        content: '';
        pointer-events: auto;
        box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
        transform: translateY(-6.7px) rotate(45deg);
    }
    .ant-tooltip-inner {
        display: flex;
        align-items: center;
        background-color: #fff;
        border-radius: 5px;
        .right {
            margin-left: 5px;
            padding-left: 5px;
            border-left: 1px solid #e8e8e8;
        }
    }
    .ant-picker-range {
        padding-left: 0;
    }
    .ant-picker-active-bar {
        margin-left: 0;
    }
}
@btnNormalColorNo1: #1890ff; // primary 按钮正常状态颜色、图标/文字 Hover状态颜色
@btnHoverColorNo2: #40a9ff; // primary 按钮 hover颜色
@btnPressedColorNo3: #096dd9; //  primary 按钮 鼠标按下颜色
@titleColorNo4: #272727; // 二级导航文字颜色、表单/正文标题颜色、图标颜色
@textColorNo5: #272727; // 正文文字颜色
@formContentColorNo6: #565656; // 表单内容颜色（比如input输入内容的颜色）
@disableColorNo7: #8f8f8f; // 次要文字/提示性文字颜色、disabled的文字/图标颜色
@listBorderColorNo8: #e8e8e8; // 列表/表格 边框颜色、滑块等控件底色
@dividerColorNo9: #e8e8e8; // 分割线颜色
@inputBorderColorNo10: #d9d9d9; // 次按钮边框、输入框边框
@disableInputBgColorNo11: #f5f5f5; // 次按钮 disabled、input 的disabled 的背景色
@firstNavBgColorNo12: #001529; // 一级导航背景色
@secondNavBgColorNo13: #ffffff; // 二级导航背景色
@secondNavHoverColorNo14: #e6f7ff; // 表格的td的Hover、二级导航的hover
@contentBgColorNo15: #ffffff; // 内容背景色
@bodyBgColorNo16: #f0f2f5; // 最底层背景色
@homePageNo1: #ffffff; // 首页卡片颜色
@homePageNo2: #f0f2f5; // 首页背景颜色
@errorColorNo17: #f5222d; // 失败色
@warnColorNo18: #fcac15; // 警告色
@successColorNo19: #52c41a; // 成功色
@linkColorNo20: #1890ff; // 链接、其他提示颜色

@schedule-dividerColorNo9: @dividerColorNo9;
@schedule-inputBorderColorNo10: @inputBorderColorNo10;
@schedule-listBorderColorNo8: @listBorderColorNo8;
@schedule-successColorNo19: @successColorNo19;
@schedule-warnColorNo18: @warnColorNo18;
@schedule-errorColorNo17: @errorColorNo17;
@schedule-textColorNo5: @textColorNo5;

._ScheduleComponent_ {
    padding: 16px;
    user-select: none;
    .ant-card-body {
        padding: 15px 24px 15px 24px;
    }
    .slider-container {
        position: relative;
    }
    .ant-tooltip-inner {
        color: @schedule-textColorNo5;
        padding: 0 8px;
    }
    .btnContainer {
        float: right;
        button:nth-child(1) {
            margin-right: 10px;
        }
    }
    .main-container {
        border: 1px solid @schedule-dividerColorNo9;
        border-bottom: 0;
        box-sizing: border-box;
        margin: 0;
        padding: 9px 0 4px 0;
        overflow: visible;
        &:last-child {
            border-bottom: 1px solid @schedule-dividerColorNo9;
        }
    }
}
._ScheduleComponent_,
._DaySliderComponent_ {
    .rule-box {
        align-items: flex-end;
        height: 40px;
        background: @bodyBgColorNo16;
    }
    .copy-btn {
        margin-top: 5px;
        padding: 4px;
    }
    // 时间尺的样式
    .timeplan-ruler {
        height: 14px;
        position: relative;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        div {
            display: inline-block;
            height: 5px;
            border-left: 1px solid #555;
            box-sizing: border-box;
            &:last-child {
                border-right: 0;
                .ruler-text {
                    margin-left: -5px;
                }
            }
        }
        .ruler-text {
            position: absolute;
            bottom: 15px;
            margin-left: -5px;
            font: 11px/1 sans-serif;
            word-break: keep-all;
        }
        .hour {
            height: 10px;
        }
    }

    .main-container {
        .label {
            float: left;
            height: 100%;
            line-height: 45px;
            padding-left: 10px;
        }
        .dayName{
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .slider-container {
            float: left;
        }
        .copyBtn {
            float: left;
            height: 45px;
            line-height: 45px;
        }
        .dayplan {
            position: relative;
            height: 11px;
            margin-top: 16px;
            margin-bottom: 8px;
            border: 1px solid @schedule-inputBorderColorNo10;
            
            background-color: @schedule-listBorderColorNo8;
            cursor: pointer;
            box-sizing: border-box;
            .handle {
                position: absolute;
                width: 15px;
                height: 15px;
                margin-top: -3px;
                margin-left: -7px;
                background-color: #fff;
                border: solid 2px #91d5ff;
                border-radius: 50%;
                -webkit-box-shadow: 0;
                box-shadow: 0;
                cursor: pointer;
                z-index: 1;
                -webkit-transition: border-color 0.3s, -webkit-box-shadow 0.6s,
                    -webkit-transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
                transition: border-color 0.3s, -webkit-box-shadow 0.6s,
                    -webkit-transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
                transition: border-color 0.3s, box-shadow 0.6s,
                    transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
                transition: border-color 0.3s, box-shadow 0.6s,
                    transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28), -webkit-box-shadow 0.6s,
                    -webkit-transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
                &:hover {
                    border-color: #46a6ff;
                }
            }
          
            .track {
                position: absolute;
                height: 100%;
                &.green {
                    background: @schedule-successColorNo19;
                }
                &.yellow {
                    background: @schedule-warnColorNo18;
                }
                &.red {
                    background: @schedule-errorColorNo17;
                }
            }
        }
    }

    //事件类型头部的样式
    .header {
        height: 50px;
        line-height: 50px;
        margin-bottom: 20px;
        // width: 880px;
        .status-container {
            margin-bottom: 20px;
            float: left;
            .circle (...) {
                content: '';
                height: 10px;
                width: 10px;
                display: inline-block;
                border-radius: 5px;
                margin: 0 10px;
                background-color: @arguments;
            }
            span:nth-child(2) {
                &:before {
                    .circle(@schedule-successColorNo19);
                }
            }
            span:nth-child(3) {
                &:before {
                    .circle(@schedule-warnColorNo18);
                }
            }
            span:nth-child(4) {
                &:before {
                    .circle(@schedule-errorColorNo17);
                }
            }
        }
        .button-container {
            float: right;
        }
    }
    .onlyNormal-header {
        .status-container {
            display: none;
        }
    }
}
.timeSchedule-drawer {
    width: 100%;
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.timer-box {
    height: 30px;
    display: inline-block;
    .ant-input {
        padding: 4px 0px;
        background-color: transparent;
    }
    .timer-input {
        width: 20px;
        min-width: 10px;
        float: left;
        height: 30px;
        text-align: center;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border: none;
        color: #272727;
        // color: #fff;
        &:focus {
            border: transparent;
        }
    }
    .timer-point {
        float: left;
        vertical-align: baseline;
        margin: 0;
        padding: 3px;
        height: 30px;
        font-weight: bold;
    }
}


.z-sections {
    border: @border-normal;
    .z-sections-title {
        padding-left: 15px;
        padding-right: 15px;
        border-bottom: @border-normal;
        line-height: 30px;
        .title-left {
            float: left;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: bold;
        }
        .title-right {
            float: right;
        }
    }
    .z-sections-content {
        padding: 15px;
    }
    
    &.noline {
        border-top: none;
    }
    .row-lists > div {
        margin-bottom: 10px;
        &:last-child {
            margin-bottom: 0;
        }
    }
}

.MyTable{
    position: relative;
    .ant-table-thead {
        border-top:none
    }
    &.noAntPage{
        .ant-table-pagination:nth-child(2) {
            display: none