}

  &.fg-4 {
    .svgOut(@neutral-fg-4-normal);
  }

  &.fg-5 {
    .svgOut(@neutral-fg-5-normal);
  }

  &.fg-i {
    .svgOut(@neutral-fg-inverted);
  }

  &.fg-on {
    .svgOut(@neutral-fg-on-color);
  }

  &.fg-disabled{
    .svgOut(@neutral-fg-disabled);
  }

  
  &.active,
  &.brand-1 {
    .svgOut(@brand-fg-1-normal);
  }

  &.at-brand-1 {
    .svgHover(@brand-fg-1-hover);
  }

  &.disabled_icons {
    color: @neutral-fg-disabled;
    cursor: not-allowed;
  }
}

.ant-spin-nested-loading {
    height: 100%;

    .ant-spin-container {
        height: 100%;
    }

    .ant-spin-container::after{
        
        background-color: @neutral-bg-2-normal;
    }
}



.fix-bottom-bar{
    position: fixed;
    bottom: 16/@px-unit;
    width: 100%!important;
    height: @mainPagebottomH;
    
    .fixed-button {
        position: fixed;    
        height: @mainPagebottomH;
        padding: 12 / @px-unit 18 / @px-unit;
        background-color: @neutral-bg-4-normal;
        border-top: 1px solid @neutral-stroke-2-normal;
        
        .label-normal-container {
            padding: 0 !important;
            margin: 0 6px;
        }
    }
    .fix-bottom-occlusion-bar {
        position: fixed;
        bottom: 0;
        height: 16 / @px-unit;
        background-color: @neutral-bg-6-normal;
    }
    .fixed-button {
        button {
            display: inline-block;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
    }
}


.intell-tab-component {
    position: relative;
    top: (0 - 10);
    height: 48 / @px-unit;
    .tab-menu{
        background-color: @neutral-bg-4-normal;
    }
    .ant-tabs-nav .ant-tabs-tab-btn {
        height: 48/@px-unit;
    }
    
}



.label-button {
    width: auto;
    max-width: 256/@px-unit;
    min-width: 80/@px-unit;
    .ant-btn {
        padding: 4/@px-unit 4/@px-unit;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
.labelText-wrapper{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


.icon-text-wrapper, .icon-btn-wrapper {
    width: auto;
    max-width: 256/@px-unit;
    .ant-btn {
        text-align: center;
        margin: 0;
        
        height: 100%;
        display: flex;
        align-items: center;
        svg {
            width: 20 / @px-unit;
            height: 20 / @px-unit;
            min-width: 20 / @px-unit;
            min-height: 20 / @px-unit;
            fill: currentColor;
        }
        .labelText  {
            line-height: 24 / @px-unit;
        }
    }
} 

.icon-text-wrapper {
    .ant-btn {
        padding : 3 / @px-unit 12 / @px-unit; 
    }
    svg {
        margin-right: 4 / @px-unit;
    }
}

.icon-btn-wrapper {
    min-width: auto;
    .ant-btn {
        padding : 5 / @px-unit ; 
    }
}



.label-block {
    visibility: hidden;
}


.tree-popover-wrap {
    .ant-tree{
        width: 240 / @px-unit;
        padding: 10px 5px;
        background: @neutral-bg-1-normal;
        .ant-tree-node-content-wrapper{
            padding: 0 15px 0 5px;
            user-select: none;
            max-width: 160 / @px-unit;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .ant-tree-node-content-wrapper:hover{
            background: @neutral-bg-4-normal;
        }
        .ant-tree-node-selected{
            background: @neutral-bg-4-normal;
            color: @--primary-6;
            svg{
                path {
                    
                }
            }
        }
    }
}

.icon-popover{
    .ant-tree{
        min-height: 44/ @px-unit;
    }
    .emap-tree-sub-svg{
        font-size: 24px;
    }
    .ant-popover-inner-content{
        padding: 0px !important;
    }

    .hasVideoSvg {
        svg > path:first-child {
            fill: transparent !important;
        }
        svg > g > path:first-child {
            fill: @brand-fg-1-normal;
        }
    }
}


@title-layout-title-height:54/@px-unit;

.title-layout{
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    z-index: 100;
    background-color: @neutral-bg-4-normal;
    .title-layout-title{
        height: @title-layout-title-height;
        border-bottom: 1/@px-unit solid @neutral-stroke-2-normal;
        
        padding-left: 16/@px-unit;
        display: flex;
        align-items: center;
        .title-layout-title-text {
            font-size: @font-size-title-s;
            font-weight: 400;
            color:@neutral-fg-2-normal;
            margin-top: 2/@px-unit;
        }
    }
    .title-layout-content{
        width: 100%;
        height: calc(100% - @title-layout-title-height);
        overflow-y: auto;
    }
}

.time-line-container, .time-line-default, .time-line-disabled {
    background-color: @neutral-bg-6-normal;
}
.search-input {
    .label-normal-wrapper {
        width: 100% !important;
    }
    .cus_panel {
      height:0!important;
    }
}

.ant-space {
  display: flex;
}


@supports (gap: 8px) {
  .ant-space {
    gap: var(--space-size, 8px); 
  }
  .ant-space .ant-space-item {
    margin: 0 !important; 
  }
}


@supports not (gap: 8px) {
  .ant-space {
    gap: 0 !important; 
  }
  .ant-space .ant-space-item {
    margin-right: var(--space-size, 8px); 
    margin-bottom: var(--space-size, 8px); 
  }
  .ant-space .ant-space-item:last-child {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }
}



.img-list {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-content: flex-start;
    flex-wrap: wrap;
    overflow: auto;
    .img-item {
        position: relative;

        .label-div-Container {
            position: absolute;
            top: -10 / @px-unit;
            left: 6 / @px-unit;
        }
    }
}

.dropdown-button {
    .ant-btn{
        height: 32 / @px-unit;
        border-radius: 4/@px-unit 0 0 4/@px-unit;
        font-size: 14 / @px-unit;
        & > .anticon {
            font-size: 14 / @px-unit;
        }
    }
    .ant-btn-compact-first-item{
        padding: 0 8/@px-unit;
        display: flex;
        align-items: center;
        svg {
            font-size: 20/@px-unit;
            margin:0 4/@px-unit;
            path {
                fill:currentColor;
            }
        }
        
        & > .anticon {
            font-size: 20 / @px-unit;
        }
    }
    .ant-dropdown-trigger {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 4/@px-unit 4/@px-unit 0;
        path {
            fill:currentColor;
        }
    }
    
    .ant-btn-icon-only {
        width: 32 / @px-unit;
        height: 32 / @px-unit;
    }
}

.list-options {
    .list-item {
        width: 100%;
        height: 36/@px-unit;
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 0 8 / @px-unit;

        &.active {
            background: @brand-bg-2-selected !important;
        }

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

        .cus_panel {
            &:first-child {
                margin-right: 8 / @px-unit;
            }
        }

        .list-item-title {
            color: @neutral-fg-2-normal;
            font-size: 14 / @px-unit;
            font-weight: 400;
            line-height: 24 / @px-unit;
            flex: 1;
        }
        .list-item-title-edit {
            border:1/@px-unit solid @neutral-stroke-1-normal;
            border-radius: 4/@px-unit;
            padding: 4/@px-unit 8/@px-unit;
        }
    }

    .list-group {
        .list-group-header {
            height: 40 / @px-unit;
            border-bottom: 1 / @px-unit solid @neutral-stroke-2-normal;
            display: flex;
            align-items: center;
            color: @neutral-fg-3-normal;
            font-size: 16/ @px-unit;
            font-weight: 400;
            line-height: 24/ @px-unit;
        }

        .list-group-content {
            padding: 16 / @px-unit 0 24 / @px-unit 0;
        }
    }

}
.ant-select-auto-complete{
    width: 100%;
}


.ui5-margin-wrapper {
    display: inline-flex;
    >div:not(:last-child) {
        margin-right: 12 / @px-unit;
    }
}


.layout-sider {
    background: @neutral-bg-6-normal;
    position: relative;
    transition: all 0.2s;
    .sider-children{
        overflow: visible!important;
        height: 100%;
    }
    .sider-content-wrapper{
        height: 100%;
        display: flex;
        position: relative;
    }
    .sider-content{
        overflow: hidden;
        transition: all 0.2s;
    }
    
    &.horizontal{
        & > .sider-children > .sider-content-wrapper {
            & > .sider-line{
                width: 1 / @px-unit;
                height: 100%;
                background: @neutral-stroke-2-normal; 
            }
            
            .siderBtn(){
                & > .sider-btn{
                    cursor: pointer;
                    width: 16 / @px-unit;
                    height: 65 / @px-unit;
                    border-top-right-radius: 30 / @px-unit;
                    border-bottom-right-radius: 30 / @px-unit;
                    background: @neutral-bg-1-hover-2; 
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    transform: rotate(-180deg);
                    &.close{
                        transform: rotate(0deg);
                    }
                }
            }
            
            & > .sider-btn-wrapper{
                width: 16 / @px-unit;
                height: auto;
                display: flex;
                align-items: center;
                justify-content: center;
                .siderBtn();
            }
            
            & > .sider-btn-wrapper-inside{
                height: 65 / @px-unit;
                position: absolute;
                right: 0;
                top: 50%;
                margin-top: -32.5 / @px-unit;
                z-index: 1000;
                &.close{
                    right: -16 / @px-unit;
                }
                .siderBtn();
            }
        }
    }

    
    &.vertical{

        & > .sider-children > .sider-content-wrapper {

            & > .sider-line{
                width: 100%;
                height: 1 / @px-unit;
                background: @neutral-stroke-2-normal; 
            }
            
            .sideBtn(){
                & > .sider-btn{
                    cursor: pointer;
                    width: 65 / @px-unit;
                    height: 16 / @px-unit;
                    border-top-left-radius: 30 / @px-unit;
                    border-top-right-radius: 30 / @px-unit;
                    background: @neutral-bg-1-hover-2; 
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    transform: rotate(0deg);
                    & > .cus_panel{
                        transform: rotate(-90deg);
                    }
                    &.close{
                        transform: rotate(180deg);
                        & > .cus_panel{
                            transform: rotate(-90deg);
                        }
                    }
                }
            }

             
            & > .sider-btn-wrapper{
                width: auto;
                height: 16 / @px-unit;
                display: flex;
                align-items: center;
                justify-content: center;
                .sideBtn();               
            }

            
            & > .sider-btn-wrapper-inside{
                width: 65 / @px-unit;
                height: 16 / @px-unit;
                position: absolute;
                bottom: 0;
                left: 50%;
                margin-left: -32.5 / @px-unit;
                z-index: 1000;
                &.close{
                    bottom: -16 / @px-unit;
                }
                .sideBtn(); 
            }
        }
    }
}



._text_container_{
    width: 100%;
    height: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
._text_ellipsis_ {
    white-space: nowrap; 
    position: absolute; 
    top: 0px; 
    visibility: hidden; 
    z-index: -10000; 
    width: auto;
    height: 0;
}



.widget-empty{
    width: 100%;
    height: 100%;
    background: @neutral-bg-5-normal;
    .middle-empty{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        justify-content: center;
        margin:0 !important;
        .widget-empty-image{
            width: 160 /@px-unit;
            height: 160 /@px-unit;
            display: inline-block;
            background-repeat: no-repeat;
        }
        .ant-empty-image {
            height: 160 / @px-unit;
        }
    }
    .result_empty {
        .widget-empty-image{
            background-image: url('/static/media/nonSearchResults_@{theme}.png');
        }
    }
    .data_empty {
        .widget-empty-image{
            background-image: url('/static/media/noData_s_@{theme}.png');
            width: 80 /@px-unit;
            height: 80 /@px-unit;
        }
        .ant-empty-image {
            height: 80 / @px-unit;
        }
        
    }
    .chart_empty{
        .widget-empty-image{
            background-image: url('/static/media/noChart.png');
        }
    }
}


.steps-form-wrapper { 
    @step-color: @neutral-fg-3-normal;
    @step-bg: @neutral-bg-4-normal;
    
    width: 100%;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;

    &-title {
        text-align: center;
        font-size: 24 / @px-unit;
        font-weight: 700;
        line-height: 32 / @px-unit;
        margin-bottom: 24 / @px-unit;
    }
    .step-wrapper {
        padding: 36 / @px-unit;

        .ant-steps-item-container {
            .ant-steps-item-content {
                height: 40 / @px-unit;
                line-height: 40 / @px-unit;
                display: inline-flex;
                align-items: center;
            }

            .ant-steps-item-icon {
                width: 40 / @px-unit;
                height: 40 / @px-unit;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                padding: 0;

                
                
                .ant-steps-icon {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    
                    color: @neutral-fg-1-normal;
                    svg {
                        fill: @neutral-fg-1-normal;
                    }
                }
            }
        }
        .ant-steps-item-active .ant-steps-item-title{
            color: @neutral-fg-1-normal;
            font-weight: 400;
        }
        .ant-steps-item-process {
            .ant-steps-item-icon {
                background-color: @brand-stroke-1-normal;
            }
        }

        .ant-steps-item-wait {
            .ant-steps-item-icon {
                background: @step-bg;
            }
        }

        .ant-steps-item-finish {
            .ant-steps-item-icon {
                border: 2px solid @brand-stroke-1-normal;
                background-color: transparent;

                .ant-steps-icon {
                    color: @brand-stroke-1-normal;
                    svg path {
                        fill: @brand-stroke-1-normal;
                    }
                }
            }
        }

        .ant-steps-item-wait .ant-steps-icon {
            color: @step-color;
            svg path {
                fill:@step-color !important;
            }
        }

        .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title {
            color: @step-color;
        }
    }

    .content-wrapper {
        
        background-color: @step-bg;
        flex: 1;
        overflow-y: auto;

        display: flex;
        flex-direction: column;

        .tabs-wrapper {
            flex: 1;
            overflow-y: auto;

            > .ant-tabs-nav {
                display: none !important;
            }

            .ant-tabs-content {
                height: 100%;

                .ant-tabs-tabpane {
                    height: 100%;
                    overflow-y: auto;
                }
            }
        }

        .btn-wrapper {
            margin: 0 auto;
            width: 480 / @px-unit;;
            display: flex;
            justify-content: center;
            padding-bottom: 40 / @px-unit;

            .label-div-Container {
                flex: 1;
                width: 100%;
                &:not(:last-child) {
                    margin-right: 12 / @px-unit;
                }

                .label-normal-container {
                    width: 100% !important;

                    .label-normal-wrapper,
                    button {
                        width: 100% !important;
                        max-width: 100% !important;
                    }
                }
            }
        }
    }
}


.label-input-list{
    
    line-height:0px !important;
    .input-list-item{
        display: flex;
        align-items: center;
        margin-bottom: 16 / @px-unit;
        &:last-child{
            margin-bottom: 0;
        }
        .ui5-margin-wrapper-item{
            display: flex;
        }
    }
}



.widget-popover-select{

    .popover-content {
        display: flex;
        height: 40 / @px-unit;
        align-items: center;
        background: @neutral-bg-1-normal;

        .popover-item {
            padding: 0 12 / @px-unit;
            cursor: pointer;
            color: @neutral-fg-2-normal;
            font-size: 16 / @px-unit;
            font-weight: 400;
            line-height: 24 / @px-unit;
            position: relative;
            max-width: 200 / @px-unit;
            overflow: hidden;
            text-wrap: nowrap;
            text-overflow: ellipsis;

            &::after {
                content: '';
                position: absolute;
                right: 0;
                top: 0;
                width: 1 / @px-unit;
                height: 100%;
                background: @neutral-stroke-2-normal;
            }

            &:last-child {
                &::after {
                    content: none;
                }
            }

            &.active {
                color: @brand-fg-1-normal;
            }
            &:hover{
                color: @brand-fg-1-hover;
            }
        }
    }

    .horizontal{

    }
    .vertical{

    }
}
.label-select-option-wrap {
    width: 100%;
    display: flex;

    .label-normal-behind {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.ant-select-dropdown {
    &.popupSelect {
        overflow-y: auto;
        max-height: 96vh;
        

        .multSelect {
            &.ant-menu-vertical {
                .ant-menu-item {
                    margin: 0;
                }
            }
        }
    }
}

.cmpLabelText{
    &.spaceBreak{
        
        white-space: pre-line;
    }
}


.DefaultImgClass{
    width: 100%;
    height: 100%;
    object-fit: fill;
}


._TopTitleDivider_{
    height: 22px;
    line-height: 22px;
    margin: 0 0 8px;
    font-weight: bold;
}
._FirstTitleDivider_{
    height: 22px;
    line-height: 22px;
    margin: 0 0 8px;
    font-weight: bold;
    font-size: 18px;
}
._MidTitleDivider_  {
    height: 22px;
    line-height: 22px;
    margin: 24px 0 8px;
    font-weight: bold;
    color: @neutral-fg-2-normal;
}
._HighDivider_{
    height: 40px;
    min-height: 40px;
    margin: 0 0;
    position: relative;
    &.line{
        &::after{
            content: '';
            width: 100%;
            height: 1px;
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -0.5px;
            background: @neutral-stroke-2-normal;
        }
    }
    &.bg-1{
        background: @neutral-bg-1-normal;
    }
}



.subtitle {
  margin: 0;
  font-weight: bold;
  width: 100%;
}


.popover-list-overlay{
    padding-left: 0;
    padding-right: 0;
    .ant-popover-arrow {
        display: none;
    }
    .ant-popover-inner {
        padding: 0;
        max-width: 100vw;
        min-width: 0;
        background: @neutral-bg-1-normal;
        border-color: @neutral-stroke-3-normal;
    }
    .ant-popover-inner-content {
        padding: 0 4 / @px-unit;
    }

    .popover-content {
        display: flex;
        height: 40 / @px-unit;
        align-items: center;
        padding: 0 8 / @px-unit;
    
        &-item {
            cursor: pointer;
            color: @neutral-fg-2-normal;
            font-size: 16 / @px-unit;
            line-height: 24 / @px-unit;
            &:hover {
                color: @brand-bg-1-active;
            }
            &-active {
                color: @brand-bg-1-active;
            }
        }
        &-separator {
            margin: 0 12 / @px-unit;
            color: @neutral-fg-disabled;
        }
    }
}



@keyframes arcSlideUpIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.8;
    }
}
.iconDropBtn {
    background-color:@neutral-bg-6-1-normal;
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: @navMenuLineHeight;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 4/@px-unit;
    padding: 1 / @px-unit 4 / @px-unit;

    &:hover{
        background-color: @neutral-bg-1-hover-2;
        
        
        
        
    }
    .cus_panel{
        margin-left: 0 !important;
        margin-right: 4 / @px-unit;
    }
    span{
        color: @neutral-fg-2-normal;
        
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}
.iconDropMenu {
    
    min-width: 200/@px-unit !important;
    border: 1px solid @neutral-stroke-2-normal;
    pointer-events:auto !important;
    .cus_icons{
        font-size: 30/@px-unit;
        vertical-align:middle;
        margin-right: 15/@px-unit;
    }
    .ant-dropdown-menu-item{
        padding: 0 ;
        
    }
    .iconDropitem_name {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        display: flex;
        align-items: center;
        width: 100%;
        &:hover {
           color:@neutral-fg-2-normal;
            svg{
                fill:@neutral-fg-2-normal;
            }
        }
    }
}
.iconDropitem {
    display: flex;
    align-items: center;
}
.centerItem{
    justify-content: center;
}



.site-calendar-demo-card {
  border-radius: 2px;
  position: relative;

  .mask_panel {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
  }

  .mask_panel_show {
    display: block;
  }

  .mask_panel_hide {
    display: none;
  }

  .calender-point {
    position: absolute;
    background-color: @neutral-fg-2-normal;
    width: 4px;
    height: 4px;
    border: 1px solid @neutral-fg-2-normal;
    border-radius: 100%;
    left: 46%;
    bottom: 7px;
    transform: translate(0, -50%);
  }

  .ant-picker-calendar {
    background-color: @neutral-bg-4-hover !important;

    .ant-picker-body {
      background-color: @neutral-bg-4-normal;
      padding: 16/@px-unit;
    }

    .ant-picker-content {
      color: @neutral-fg-2-normal !important;
       th {
        width: 35/@px-unit;
      }
    }

    .ant-picker-panel {
      background-color: @neutral-bg-4-hover !important;
      width: 100%;
    }

    .ant-picker-cell-selected {
      .calender-point {
        background-color: @neutral-fg-on-color;
        border-color: @neutral-fg-on-color;
      }
    }

    
    
    

    .ant-picker-cell-in-view {
      color: @neutral-fg-2-normal !important;
    }

    .ant-picker-content th {
      color: @neutral-fg-2-normal;
    }

    .ant-select {
      width: 100 / @px-unit !important;
    }

    .calender-day {
      width: 24px;
      height: 24px;
      z-index: 2;
      display: inline-block;
      min-width: 24px;
      line-height: 24px;
      transition: background 0.3s, border 0.3s;
      border-radius: 3.5 / @px-unit;
      user-select: none;
    }

    .ant-picker-cell:hover .calender-day {
      background: @neutral-bg-1-hover-1;
    }

    .ant-picker-cell-today .calender-day{
      border: 1/@px-unit solid @brand-stroke-1-selected;
    }

    .calender-day-selected {
      background-color: @brand-bg-1-selected !important;
      color:@neutral-fg-1-normal;
    }

    
    
    
    
    
  }

  .calender-hour-title {
    margin-left: 8px;
  }

  .calender-hour-panel {
    display: flex;
    flex-wrap: wrap;
    padding: 2px 0px 0px 8px;
    justify-content: space-between;
    .calender-hour-item {
      height: 34px;
      line-height: 34px;
      text-align: center;
      font-size: 16px;
      font-weight: 400;
      background-color: @neutral-bg-2-normal;
      border:1px solid @neutral-stroke-1-normal;
      user-select: none;
      cursor: pointer;
      flex: 0 0 calc(12.5% - 8px); 
      margin-right: 8px;
      margin-bottom: 8px;

      &:hover {
        background: @neutral-bg-1-hover-1;
      }
    }
    .calender-hour-selected {
      background-color: @brand-bg-1-selected !important;
      color:@neutral-fg-1-normal;
    }
  }

  .calender-hour-panel-disabled .calender-hour-item{
    cursor: not-allowed;
    background-color: @neutral-bg-disabled;
    &:hover {
      background: @neutral-bg-disabled;
    }
  }
}


.QrCode {
    .qr-code-box {
        margin: 10 / @px-unit 20 / @px-unit;
    }

    .content-code {
        padding: 10 / @px-unit;
        background-color: @QRCodeBg;
    }

    .DescribeText {
        text-align: center;
    }

    .mask-handle {
        position: relative;

        &:hover {
            .mask {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background-color: #fff;
                opacity: 0.6;
                cursor: pointer;
            }
        }
    }
}



.ChannelHubPartitionModal-wrap{
    width: 100%;
    display: flex;
    .left{
        width: 30%;
    }
    .right{
        width: 70%;
    }
    .armedStatus-icon{
        .svgOut(@status-success-fg-1-normal) !important;
    }
}


.similarity-progress{
    display: flex;
    height: 22 / @px-unit;
    width: 100%;
    align-items: center;
    .temp-picData-progress{
        height: 100%;
        width: 100%;
        padding: 0/@px-unit 8/@px-unit;
        display: flex;
        .temp-progress-bar-swrap{
            width: 70%;
            display: flex;
            align-items: center;
            padding: 0/@px-unit 5/@px-unit 0/@px-unit 0/@px-unit;
            .temp-progress-bar{
                background-color: @neutral-stroke-2-normal;
                height: 6/@px-unit;
                width: 100%;
            }
        }

        .temp-progress-similar{
            display: flex;
            align-items: center;
            width: 30%;
            color: @neutral-fg-3-normal;
            font-size: 14 / @px-unit;
        }
    }

    
    .picData-progress-wrapper{
        display: flex;
        align-items: center;
        flex: 1;
        height: 100%;
    }
    .picData-progress {
        display: flex;
        align-items: center;
        background: @neutral-stroke-2-normal;
        height: 6/@px-unit;
        position: relative;
        flex: 1;

        .progress-item {
            display: inline-block;
            height: 100%;
        }

        .progress-red {
            background: @status-error-stroke-1-normal;
        }

        .progress-orange {
            background: @status-warning-stroke-1-normal;
        }

        .progress-blue {
            background: @ai_progress_blue;
        }
    }

    .progress-label {
        font-size: 14/@px-unit;
        width: 40 / @px-unit;
        color: @neutral-fg-3-normal;
        text-align: right;
    }
}


.date-range-picker {
    .validity-picker {
        width: 350 / @px-unit;
    }
}




.silderbehind {
    margin-left: 10/@px-unit;
}


._Table_ {
    .normal-table-empty {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
        margin: auto;
        

        .empty-icon {
        background-image: url('/static/media/noData_s_deep.png');
            background-position: center;
            width: 80 / @px-unit;
            height: 80 / @px-unit;
        }

        .empty-text {
            width: 100%;
            text-align: center;
            margin: 4 / @px-unit 0;
        }

        .jump-text {
            color: @brand-fg-1-normal;
            cursor: pointer;
        }
    }
}
.label-date-picker {
    .ant-picker {
        width: 100%;
    }
}
.native-tooltip{
    display: inline;
}


.m-width-416 {
  width: 416/@px-unit !important;
}

.footer-space-conteiner {
  justify-content: flex-end;
}

.ant-modal-footer {
  .label-normal-container   {
    padding: 0 !important;
  }
}


.virtual-table {
    .ant-table-header {
        th{
            
            
        }
    }
    .ant-empty-normal {
        height: 180/@px-unit;
        margin: 0 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .ant-table-tbody {
        height: 180/@px-unit;
    }    
    .ZD-showZebraPattern-even{
        background-color: @tableEvenBgN;
    }
    .ZD-showZebraPattern-odd{
        background-color: @tableOddBgN;
    }
    .virtual-table-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        color: @neutral-fg-2-normal;
        border: 0px solid @neutral-stroke-2-normal;
        border-bottom-width: 1px;
        &.ZD-selected-row:not(.ZD-unselected-row), &.ZD-highlight-row {
            background-color: @neutral-bg-1-active-1;
           
            
            color: @neutral-fg-2-normal;
            
            
            
            
            
            
            
            
        }
        &.ZD-hover-row{
            background-color: @neutral-bg-1-hover-1;
        }
    }
    .center {
        text-align: center;
    }

    .ant-table-cell-fix-right{
        border-left: 1/@px-unit  solid @neutral-stroke-2-normal;
    }

    .virtual-list{
        display: flex;
        border-bottom: 0.1 / @px-unit solid rgba(217, 227, 255, 0.16);

        .virtual-list-right{
            position: absolute;
            right: 12px;
            top: @tableTheadThHeight;
            &:after {
                box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.15);
                position: absolute;
                top: 0;
                bottom: -1px;
                left: 0;
                width: 30px;
                transform: translateX(-100%);
                transition: box-shadow 0.3s;
                content: '';
                pointer-events: none;
            }
            .virtual-grid{
                scrollbar-width: none;
                &::-webkit-scrollbar { width: 0 !important }
                -ms-overflow-style: none;
                .virtual-table-cell {
                    position: relative;
                }
            }
        }

        .normal-table-empty {
            margin: auto;
        }
    }
}










.NewDateRangerPicker-Wrapper {
    @preset-width: 296 / @px-unit; 
    @left-pane-width: 120 / @px-unit; 
    @preset-height: 362 / @px-unit;
    @preset-noTime-height: 322 / @px-unit; 
    padding-top: 0;
    .ant-popover-inner {
        height: 0;
        border: none;
        background: transparent;
        box-shadow: none;
        .ant-popover-inner-content {
            top: -20 / @px-unit;
            position: relative;
        }
        padding-top: 0;
    }
    .NewDateRangerPicker {
        padding: 0;
        border: none;
        
        .ant-picker-input {
            display: none;
        }
        .ant-picker-dropdown {
            width: @preset-width;
            left: -2 / @px-unit;
            .ant-picker-header {
                width: @preset-width;
                height: 40 / @px-unit;
                padding: 0;
            }
            .ant-picker-date-panel {
                width: @preset-width !important; 
            }
            .ant-picker-panel-container {
                box-shadow: none;
            }
        }
        .NewDateRangerPicker-datePicker-wrapper-begin.ant-picker-dropdown {
            
            border-top: 1 / @px-unit solid @neutral-stroke-1-normal;
            border-left: 1 / @px-unit solid @neutral-stroke-1-normal;
            border-bottom: 1 / @px-unit solid @neutral-stroke-1-normal;
            height: @preset-height + 2 / @px-unit;
            
        }
        .NewDateRangerPicker-datePicker-wrapper-end.ant-picker-dropdown {
            border-top: 1 / @px-unit solid @neutral-stroke-1-normal;
            border-right: 1 / @px-unit solid @neutral-stroke-1-normal;
            border-bottom: 1 / @px-unit solid @neutral-stroke-1-normal;
        }
        .NewDateRangerPicker-datePicker-wrapper-end {
            position: relative;
        }
        .NewDateRangerPicker-datePicker-wrapper-end::before {
            content: '';
            background: @neutral-stroke-1-normal;
            height: 314 / @px-unit;
            position: absolute;
            top: 0 / @px-unit;
            left: 2 / @px-unit;
            width: 1 / @px-unit;
        }
        .end-time-extra,
        .begin-time-extra .ant-space-item {
            .ant-input-number {
                border-radius: 0;
                width: 60 / @px-unit;
                text-align: center;
                input {
                    height: 30 / @px-unit;
                    text-align: center;
                }
                margin: 8 / @px-unit 0;
            }
            
            .label-div-Container {
                
                .label-normal-container {
                    
                    
                    
                    height: 46 / @px-unit;
                    
                    
                    
                }
            }
        }
        .begin-time-extra {
            position: relative;
        }

        .begin-time-extra .ant-space-item{
            height: 46 / @px-unit;
        }
        .end-time-extra .ant-space-item{
            height: 46 / @px-unit;
        }

        .NewDateRangerPicker-datePicker-wrapper-begin {
            .ant-picker-panel-container {
                height: 100%;
            }
            .begin-time-extra {
                .ant-space-horizontal {
                    position: relative;
                }
                .ant-space-horizontal::before {
                    content: '';
                    background: @neutral-stroke-1-normal;
                    height: 1 / @px-unit;
                    position: absolute;
                    top: 0 / @px-unit;
                    left: -12 / @px-unit;
                    width: @preset-width;
                }
                .ant-space-horizontal::after {
                    content: '';
                    background: @neutral-stroke-1-normal;
                    height: 1 / @px-unit;
                    position: absolute;
                    bottom: 0 / @px-unit;
                    left: -12 / @px-unit;
                    width: @preset-width;
                }

                .quick-select-time-wrapper {
                    position: absolute;
                    top: -272 / @px-unit;
                    left: -@left-pane-width - 12 / @px-unit;
                    display: flex;
                    flex-direction: column;
                    
                    

                    height: @preset-height;
                    margin-top: 4 / @px-unit;
                    width: @left-pane-width;
                    margin-right: 0;
                    border-right: 1 / @px-unit solid @neutral-stroke-1-normal;

                    .quick-select-time {
                        height: 26 / @px-unit;
                        border-radius: 0;
                        padding: 1 / @px-unit 8 / @px-unit;
                        margin-right: 8 / @px-unit;
                        border: none;
                        background: transparent;
                        width: 100%;
                        overflow: hidden;
                    }
                }
                
                
                
                
                
                
                
                
                
                
            }
        }

        .NewDateRangerPicker-datePicker-wrapper-end {
            .end-time-extra {
                .ant-space-horizontal {
                    position: relative;
                }
                .ant-space-horizontal::before {
                    content: '';
                    background: @neutral-stroke-1-normal;
                    height: 1 / @px-unit;
                    position: absolute;
                    top: 0 / @px-unit;
                    left: -12 / @px-unit;
                    width: @preset-width;
                }
                .ant-space-horizontal::after {
                    content: '';
                    background: @neutral-stroke-1-normal;
                    height: 1 / @px-unit;
                    position: absolute;
                    bottom: 0 / @px-unit;
                    left: -12 / @px-unit;
                    width: @preset-width;
                }
                .end-time-extra-confirm {
                    float: right;
                    button {
                        background: @brand-bg-1-normal;
                        border-radius: 0;
                        margin: 8 / @px-unit 0 / @px-unit 8 / @px-unit 0;
                        width: 80 / @px-unit;
                        height: 32 / @px-unit;
                        color: @neutral-fg-on-color;
                    }
                }
            }
        }
        
        .NewDateRangerPicker-datePicker-wrapper-begin-noTime.ant-picker-dropdown,
        .NewDateRangerPicker-datePicker-wrapper-end-noTime.ant-picker-dropdown {
            height: @preset-noTime-height;
            .ant-space-horizontal {
                display: none;
            }
        }
        .NewDateRangerPicker-datePicker-wrapper-end-noTime::before {
            height: @preset-noTime-height;
        }
        .ant-picker-content th {
            color: @neutral-fg-2-normal;
        }
    }
    
    .NewDateRangerPicker-begin-presets{
        width: @preset-width + @left-pane-width;
        .ant-picker-dropdown {
            width: @preset-width + @left-pane-width;
            .ant-picker-panel {
                padding-left: @left-pane-width;
            }
        }
    }
    
    .NewDateRangerPicker-begin {
        width: @preset-width;
        .ant-picker-dropdown {
            width: @preset-width;
        }
    }
    
    .NewDateRangerPicker-end {
        width: @preset-width;
    }
}

.NewDateRangerPicker-time-text {
    display: flex;
    align-items: center;
}




._password {
  .ant-input-suffix {
    .cus_panel {
        background-color: transparent !important;
        width: 20 / @px-unit !important;
        height: 20 / @px-unit !important;
    }
    svg {
        fill: @neutral-fg-3-normal;
    }
    &:hover {
        svg {
            fill: @neutral-fg-1-normal;
        }
    }
  }
}

.under-wrapper {
  >div {
    border-radius: 0 !important;
  }
}

.passwordCheck-wrapper {
    border-top: 1px solid @neutral-stroke-2-normal;
    margin: 0 12 / @px-unit;
    padding: 12 / @px-unit 0;

    .strength-box {
        display: flex;
        justify-content: space-between;
        font-size: 16 / @px-unit;
        line-height: 24 / @px-unit;
        margin-bottom: 12 / @px-unit;
        
        .strength-label {
            color: @neutral-fg-2-normal;
        }
    }
}


.passwordCheck-tip-wrapper {
    display: flex;
    align-items: center;
    margin-top: 1 / @px-unit;

    > div {
        height: 24 / @px-unit;
        line-height: 24 / @px-unit;
    }

    .passwordCheck-tip {
        float: left;
        background-color: @neutral-stroke-2-normal;
        height: 6 / @px-unit;
        
        flex: 1;
        -webkit-transition: background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    .passwordCheck-tip:not(:last-child) {
        margin-right: 12 / @px-unit;
    }
}

.passwordCheck-weak {
    .strength-text {
        color: @status-error-stroke-1-normal;
    }

    .passwordCheck-tip-wrapper {
        > :nth-child(1) {
            background: @status-error-stroke-1-normal;
        }
    }
}

.passwordCheck-middle {
    .strength-text {
        color: @status-warning-stroke-1-normal;
    }

    .passwordCheck-tip-wrapper {
        > :nth-child(1),
        > :nth-child(2) {
            background: @status-warning-stroke-1-normal;
        }
    }
}

.passwordCheck-strong {
    .strength-text {
        color: @status-success-fg-1-normal;
    }

    .passwordCheck-tip-wrapper {
        > :nth-child(1),
        > :nth-child(2),
        > :nth-child(3) {
            background: @status-success-fg-1-normal;
        }
    }
}

.password-popover-overlay {
    .ant-popover-content {
        
        width: 480 / @px-unit;
        .ant-popover-inner,
        .ant-popover-inner-content {
            padding: 0;
        }


        

        .rule-popover-box {
            width: 100%;
            
        }
        .rule-popover-text {
          padding: 12 / @px-unit;
        }
        .regexp-tip-box {
            width: 100%;

            padding: 8 / @px-unit 14 / @px-unit;
            

            > div {
                display: flex;
                align-items: self-start;
                line-height: 24 / @px-unit;
                font-size: 16 / @px-unit;
                margin: 8 / @px-unit 0;

                svg {
                    flex: 0 0 24 / @px-unit;
                    
                    height: 24 / @px-unit;
                    margin-right: 8 / @px-unit;

                    path {
                        fill: @neutral-fg-disabled;
                    }
                }
            }

            .normal-rule {
                color: @neutral-fg-disabled;
            }

            .valid-rule {
                color: @neutral-fg-2-normal;

                svg {
                    path {
                        fill: @status-success-fg-1-normal;
                    }
                }
            }
        }
    }
}

.table_filter_dropDown {
    .label-normal-container  {
        display: flex;
        align-items: center;
        padding: 6 / @px-unit 12 / @px-unit !important;
    }
}
.ant-dropdown-trigger {
    .table-filter-icon {
        font-size: 18/@px-unit;
    }
    .table-filter-icon-active {
        svg{
            color: @--primary-5;
        }
    }
}



._ColorCheckGroup_ {
  display: flex;
  flex-direction: row;

  
  .color_checkbox_all_box {
    height: 28px;
    line-height: 28px;
  }

  .color-select-panel {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .color-select-item {
    width: 10 / @px-unit;
    height: 10 / @px-unit;
    background-color: red;
    margin-right: 4/ @px-unit;
  }

  .color-select-alarm {
    background-color: @alarm !important;
  }

  .color-select-general {
    background-color: @general !important;
  }

  .color-select-detect {
    background-color: @detect !important;
  }

  .color-select-ivs {
    background-color: @ivs !important;
  }

  .color-select-pos {
    background-color: @pos !important;
  }

  .color-select-card {
    background-color: @card !important;
  }