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

.label-date-picker {
    .ant-picker {
        width: 100%;
    }
}

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




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

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







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

        .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;
                    display: flex;
                    flex-direction: column;
                    
                    

                    height: @preset-height;
                    margin-top: 4 / @px-unit;
                    width: @left-pane-width - 12 / @px-unit;
                    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;
                    }
                }
                
                
                
                
                
                
                
                
                
                
            }
        }

        .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  {
        padding-left: 12/@px-unit;
    }
}
.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;
  }



  
  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  .label-switch-content {
    margin-right: 10 / @px-unit;

    
    .ant-switch {
      .ant-switch-handle::before {
        background: url('/static/media/off.png') 0 / auto 100%;
      }
    }

    .ant-switch-checked .ant-switch-handle::before {
      background: url('/static/media/on.png') 0 / auto 100%;
    }

    display: flex;

    .label-normal-wrapper {
      width: auto !important;
    }

    .sdd-swtich-contianer {
      margin-right: 8 / @px-unit;
    }

    .alarm {
      .ant-switch-checked {
        background-color: @alarm !important;
      }
    }

    .general {
      .ant-switch-checked {
        background-color: @general !important;
      }
    }

    .detect {
      .ant-switch-checked {
        background-color: @detect !important;
      }
    }

    .ivs {
      .ant-switch-checked {
        background-color: @ivs !important;
      }
    }

    .pos {
      .ant-switch-checked {
        background-color: @pos !important;
      }
    }

    .card {
      .ant-switch-checked {
        background-color: @card !important;
      }
    }
  }
}

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




.ch-select-text-label1{
    color:@neutral-fg-3-normal;
    width: 110 / @px-unit !important;
}

.ch-select-text-label2{
    color:@neutral-fg-3-normal;
    width: 70 / @px-unit !important;
}

.ch-select-text-wrap{
    width: 180 / @px-unit !important;
}

.ch-select-text-label-container, .ch-select-text-label-container{
    padding-bottom: 0 !important;
}




._NewSchedule_Component_ {
    .main-container {
        .dayplan {
            background-color: @neutral-bg-4-normal;
            .track {
                &.whiteMode{
                    background: @status-yellow-fg-1-normal;
                }
            }
        }
        
        
        
        
        
        
        
        
        
    }
     
     .schedule-ruler-wrapper {
        .schedule-ruler-slot {
            .schedule-rule-slot-content {
                display: flex;
                justify-content: flex-start;
            }
        }
    }
    .button-container {
        .default-btn {
            margin-right: 20 / @px-unit;
        }
        
        .delete-btn {
            display: none;
        }
    }
    .header {
        .status-container {
            .circle {
                &.whiteMode{
                    background: @status-yellow-fg-1-normal;
                }
            }
            .status-wrapper {
                &.compact-status-wrapper-disabled {
                    color: @neutral-fg-disabled;
                }
            }
        }
    }
    
    .ant-btn-link[disabled],
    .ant-btn-link[disabled]:hover,
    .ant-btn-link[disabled]:focus,
    .ant-btn-link[disabled]:active {
        color: @neutral-fg-disabled;
    }
}


.schedule-week-iconstyle {
    display: flex;
    justify-content: left;
    align-items: center;
    & > span {
        margin-left: 10 / @px-unit;
    }
}


.track-time-popover {
    .ant-popover-content {
        .ant-popover-inner {
            padding: 0;
        }
    }
}

.track-time-hover-popover {
    .ant-popover-content {
        .ant-popover-inner {
            padding: 0;
        }
    }
}

.schedule-model-wrap {
    display: flex;
    .schedule-plan-list {
        width: 200 / @px-unit;
        border-right: 1px solid @neutral-stroke-2-normal;
        .title {
            height: 48 / @px-unit;
            display: flex;
            align-items: center;
            background-color: @neutral-bg-4-hover;
            border-bottom: 1px solid @neutral-stroke-2-normal;
        }

        .schedule-item {
            height: 36 / @px-unit;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .schedule-item:hover {
            background-color: @neutral-bg-1-hover-1;
        }
        .schedule-item-active {
            background-color: @brand-bg-2-selected;
        }
        .schedule-label {
            width: 160 / @px-unit;
            display: flex;
            align-items: center;
            padding: 0 16 / @px-unit;
        }
        .schedule-icon {
            width: 40 / @px-unit;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 4 / @px-unit;
        }
    }
    .schedule-panel {
        width: 100%;
    }
}



.sort-button-group {
    display: flex;

    &>* {
        margin: 0 !important;
    }

    &>:first-child button {
        border-top-left-radius: 4/ @px-unit;
        
        border-bottom-left-radius: 4/ @px-unit;
        
    }

    &>:last-child button {
        border-top-right-radius: 4/ @px-unit;
        
        border-bottom-right-radius: 4/ @px-unit;
        
    }

    &>:not(:first-child) {
        position: relative;
        margin-left: -1/ @px-unit !important;
    }

}


.GraphCanvas {
  display: inline-block;
  position: relative;
  
  
  
  
  width: 100%;
  height: 100%;

  .leftOcx {
    width: 100%;
    height: 100%;
  }

  .canvas-stage-wrap {
    position: relative;
    width: 100%;
    height: 100%;

    .canvas-lib-stage {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 999;
    }
  }
}


._LargeModelSearchFunction_ {
    
    
    
    .page-view{
        .same-line {
            display: flex;
            align-items: center;
            .label-div-Container {
                margin-right: 30/@px-unit !important;
            }
        } 
    }
      
    .Finder_icon {
        cursor: pointer; 
        svg {
          width: 22/ @px-unit;
          margin: 0 4/ @px-unit;
          height: 22/ @px-unit;
        }
    
        &.close-icon:hover svg g path {
          fill: @brand-fg-1-normal;
        }
    
        &.close-icon {
          position: relative;
          left: 32 / @px-unit;
          z-index: 1;
          height: 32px !important;
        }
      } 
     
}
.search-custom-modal-centered{
  vertical-align: top !important;
  margin-top:52 / @px-unit 
} 



  
.searchFunc-footer{
  display: flex;
  justify-content: center;  
  align-items: center;   
        .widget-empty{
          background: none;
        }
  & > div {
    width: 100%;
  }
}


.backup-progress-allInfo{
    display: flex;
    justify-content: flex-end;
    &>div{
        line-height: 32/@px-unit;
    }
    .backup-progress-precent{
        color: @neutral-fg-1-normal;
    }
}

.backup-all-process{
    height: 16 / @px-unit;
}

.backup-module-process-popover{
    width: 600/@px-unit;
}
.backup-progress-table{
    .ant-table-thead{
        &>tr>th{
            background-color: @neutral-bg-1-normal;
        }
    }
    .virtual-list{
        padding-left: 5/@px-unit;
        .virtual-table-cell {
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }
    }
    .virtual-list-right{
        display: none;
    }
}


.large-model-search {
    &:not(.searchFunc){
        max-width: 1240 / @px-unit;
        min-width: 1085 / @px-unit;
    }

    .input-container {
        display: flex;
        align-items: center;

        .border-container {
            position: relative;
            flex: 1;
            display: flex;
            margin: 1px;

            &::before {
                content: "";
                position: absolute;
                top: -1px;
                left: -1px;
                right: -1px;
                bottom: -1px;
                background: linear-gradient(-90deg, rgb(117, 244, 255) -1.897%,rgb(0, 147, 255) 7.543%,rgb(0, 111, 255) 29.1%,rgb(189, 89, 255) 98.918%);
                border-radius: 8 / @px-unit;
            }
        }

        .search-input {
            position: relative;
            flex: 1;
            width: 100%;
            background-color: @neutral-bg-5-normal;
            border-radius: 8 / @px-unit;

            input {
                flex: 1;
                border: none;
                outline: none;
                padding-left: 0;
                font-size: 20 / @px-unit;

                &:focus {
                    box-shadow: none;
                }
            }

            .label-div-Container {
                flex: none;

                button {
                    width: 160 / @px-unit;
                    height: 48 / @px-unit;
                    font-size: 24 / @px-unit;
                    background: linear-gradient(-36.51deg, rgb(189, 89, 255) 0%,rgb(0, 111, 255) 35%,rgb(0, 147, 255) 40%,rgb(117, 244, 255) 50%, rgb(0, 147, 255) 60%, rgb(0, 111, 255) 66%, rgb(189, 89, 255) 102%);
                    transition: 0.8s;
                    background-size: 280% auto;

                    &:hover {
                        background-position: right top;
                    }
                }
            }

            .search {
                display: flex;
                align-items: center;
                height: 72 / @px-unit;
                border-radius: 8 / @px-unit;
                padding: 8 / @px-unit 16 / @px-unit;

                .search-input-comp {
                    flex: 1;
                    text-align: left;

                    .label-normal-container {
                        width: 100%;
                    }
                }

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

                .search-btn {
                    position: relative;
                    height: 56 / @px-unit;
                    
                    .star {
                        position: absolute;
                        top: 12 / @px-unit;
                        right: 28 / @px-unit;
                        color: @neutral-fg-on-color;
                    }
                }

                .clear.cus_panel {
                    display: none;
                    color: @neutral-fg-3-normal;
                    cursor: pointer;
                }

                &:hover .clear.cus_panel {
                    display: flex;

                    &.hide {
                        display: none;
                    }
                }

                .input-before-icon {
                    display: flex;
                    align-items: center;
                    height: 32 / @px-unit;
                    width: 32 / @px-unit;
                    margin: 0 8 / @px-unit 0 4 / @px-unit;
                    border-radius: 4 / @px-unit;
                    background: linear-gradient(-36.51deg, rgb(189, 89, 255) 0%,rgb(0, 111, 255) 35%,rgb(0, 147, 255) 40%,rgb(117, 244, 255) 50%, rgb(0, 147, 255) 60%, rgb(0, 111, 255) 66%, rgb(189, 89, 255) 102%);
                    transition: 0.8s;
                    background-size: 280% auto;

                    span {
                        color: @neutral-fg-on-color;
                    }

                    &:hover {
                        cursor: pointer;
                        background-position: right top;
                    }
                }
            }
        }

        .addon-after {
            flex: none;
            height: 64 / @px-unit !important;
            margin-left: 12 / @px-unit;
            text-align: center;
            cursor: pointer;
        }
    }

    .top-container {
        display: flex;
        align-items: flex-end;

        .top-container-left {
            flex: 1;
        }

        .top-container-right {
            flex: none;

            .favorite {
                padding: 4 / @px-unit 12 / @px-unit;
                font-size: 18 / @px-unit;
                border-radius: 8 / @px-unit;
                background-color: @bm-bg-1-normal;
                margin-bottom: 10 / @px-unit;
                cursor: pointer;

                .favorite-icon {
                    display: inline-block;
                }

                &:hover {
                    background: @bm-bg-1-hover;
                }
            }
        }
    }

    &.index {
        .search-input {
            .search {
                border-radius: 0;
            }
        }
    }

    &.result {
        .search-input {
            padding: 8 / @px-unit;

            .search {
                height: 56 / @px-unit;
                padding: 8 / @px-unit 0;
            }
        }
    }

    .bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 16 / @px-unit;

        .bottom-left {
            display: flex;
            flex: none;

            .time-select {
                margin-right: 24 / @px-unit;
                cursor: pointer;

                &:hover {
                    color: @brand-fg-1-hover;

                    .cus_panel  {
                        color: @brand-fg-1-hover;
                    }
                }
            }

            .channel-select {
                display: flex;
                align-items: center;
                cursor: pointer;

                .cus_panel {
                    vertical-align: middle;
                }

                &:hover {
                    color: @brand-fg-1-hover;

                    .cus_panel  {
                        color: @brand-fg-1-hover;
                    }
                }
            }
        }
    }
}

.large-model-channel-select {
    max-height: 300 / @px-unit;
    overflow-y: auto;
}



.pro-card {
    position: relative;
    border-radius: 0;

    &.active {
        border-color: @brand-stroke-1-normal;
    }

    .ant-card-body {
        padding: 0;
        height: 100%;
        display: flex;
        flex-direction: column;

        .card-header {
            flex: none;
            height: 32/ @px-unit;
            padding: 0 8/@px-unit;
            width: 100%;
            background: @neutral-stroke-2-normal;
            border-bottom: 1/ @px-unit solid @neutral-stroke-2-normal;
        }

        .card-center {
            flex: auto;
            padding: 4 / @px-unit;
            display: flex;
            height: 0;

            .card-cover {
                flex: auto;
                height: 100%;
                width: 50%;
                min-width: 50%;
                background: @neutral-bg-5-normal;
                margin-right: 4 / @px-unit;
                position: relative;

                
                &-2 {
                    width: 100%;
                    display: flex;
                    .DefaultImgClass {
                        margin-left: 8 / @px-unit;
                    }
                }

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

                .cover-tag {
                    position: absolute;
                    left: 50%;
                    bottom: 0;
                    margin-left: -60/ @px-unit;
                    width: 120 / @px-unit;
                    height: 22 / @px-unit;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 14/ @px-unit;

                    &.AllowName {
                        background: url('/static/media/whitelistBg.png') no-repeat center / 100% 100%;
                        color: @status-success-fg-1-normal;
                    }

                    &.BlockList {
                        background: url('/static/media/blacklistBg.png') no-repeat center / 100% 100%;
                        color: @status-error-fg-1-normal;
                    }
                }
            }

            .card-content {
                flex: auto;
                width: 50%;

                .card-content-list {
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                }

                .content-list-item {
                    display: flex;
                    align-items: center;
                    @IconWidth: 32 / @px-unit;

                    .list-icon {
                        min-width: @IconWidth
                    }

                    .label-div-Container {
                        width: calc(100% - @IconWidth);
                    }
                }
            }
        }

        .similarity {
            height: 22/ @px-unit;
            margin: 0 8 / @px-unit;
        }

        .card-bottom {
            height: 32 / @px-unit;
            flex: none;
            width: 100%;
            background: @neutral-bg-4-hover;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 12 / @px-unit;

            &>div {
                color: @neutral-fg-2-normal;
                font-size: 14/ @px-unit;
            }
        }

        .card-actions {
            height: 32 / @px-unit;
            width: 100%;
            background: @neutral-bg-4-hover;
            justify-content: flex-end;
            align-items: center;
            padding: 0 12 / @px-unit;
            position: absolute;
            bottom: 0;
            left: 0;
            display: none;
        }

        .position-checkbox {
            position: absolute;
            line-height: 0;
            left: 8 /@px-unit;
            top: 8 /@px-unit;
            z-index: 9;
        }

        &:hover {
            .card-actions {
                display: flex;
            }
        }


    }


}


.route-modal{
    width: 100%;
    height: 100%;
    
    position: absolute;    
    left: 0;
    top: 0;
    z-index: 100;
    background-color: @neutral-bg-4-normal;
    .route-modal-tab{
        height: 50/@px-unit;
        border-bottom: 1/@px-unit solid @neutral-stroke-2-normal;
        line-height: 50/@px-unit;
        padding-left: 16/@px-unit;
    }
    .route-modal-page{
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        padding-bottom: 100/@px-unit;
    }
}


._Eptz_ {
    position: relative;
    margin-bottom: 0 / @px-unit;
    .eptz_switch{
        padding: 10/@px-unit;
        .label-normal-container {
            display: flex;
        }
    }
    &title{
        color: @neutral-fg-3-normal;
        font-size: 16 / @px-unit;
        font-weight: 400;
        line-height: 24 / @px-unit;
        text-align: left;
        -webkit-touch-callout: none; 
        -webkit-user-select: none; 
        -khtml-user-select: none; 
        -moz-user-select: none; 
        -ms-user-select: none; 
        user-select: none;
    }
    &wrap{
        width: 100%;
        padding: 8/@px-unit 0/@px-unit 16/@px-unit 0/@px-unit;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        .label-div-Container{
            width: 100%;
            .label-normal-container {
                width: 100%;
                .select{
                    width: 100% !important;
                }
            }
        }
    }
    &item{           
        margin: 6/@px-unit;
    }
    .item-disabled{
        cursor:not-allowed;
    }
    .range-content {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 100%;

        .ant-input-number-handler-wrap{
            display: none;
        }

        input {
            padding: 0 5px;
        }
    }
}


._WinSecAuth_ {
    width: 600/@px-unit !important;
    .ant-modal-footer {
        padding: 5/@px-unit 16/@px-unit 50/@px-unit 16/@px-unit;
        .label-normal-container {
            float: right;
            margin-left: 30/@px-unit;
        }
    }

    .pd-default > svg path:first-child{
        fill:none !important; 
    }
}



.ImportModal {
    .ant-modal-body {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    .ant-modal-footer{
        .ImportModalFooter{
            display: flex;
            justify-content: flex-end;
        }
    }
    ._ExperienceBaseImport_ {

        .stepListContainer {
            padding: 20 / @px-unit 410 / @px-unit;
            border-bottom: 1 / @px-unit solid @neutral-stroke-2-normal;

            .ant-steps-item-title {
                color: @neutral-fg-3-normal !important;
            }
            .ant-steps-item-active .ant-steps-item-title {
                color: @neutral-fg-2-normal !important;
            }

            .ant-steps-item-finish .ant-steps-item-icon {
                background-color: transparent !important;
            }
            .ant-steps-item-wait .ant-steps-item-icon {
                background-color: transparent !important;
                border-color: @neutral-stroke-2-normal !important;

                .ant-steps-icon {
                    color: @neutral-fg-3-normal !important;
                }
            }
        }

        .stepMain {
            position: relative;
            min-height: 600 / @px-unit;
            height: 600 / @px-unit;
        }

        .ImportModalFooter {
            display: flex;
            justify-content: flex-end;
        }
    }
}



.MaterialSelection {
    width: 100%;
    height: 100%;
    position: relative;
    &.hidden{
        height: 0;
        overflow: hidden;
    }


    
    .target-list{
        padding: 20 /@px-unit;
        height: 100%;
        overflow-y: auto;
        position: relative;
        .item-card{
            width: 290/@px-unit;
            height: 176/@px-unit;
            margin-bottom: 16/@px-unit;
            position: relative;
            margin-right: 16/@px-unit;
            border: 1/@px-unit solid @neutral-stroke-2-normal;
            float: left;
            &:hover{
                border-color: @brand-stroke-1-normal;
            }
            .item-card-img{
                width: 100%;
                height: 142/@px-unit;
                background: @neutral-bg-5-normal;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }
            .item-card-bottom{
                width: 100%;
                height: 32/@px-unit;
                background: @neutral-bg-4-hover;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding: 0 12/@px-unit;
            }
            .item-card-checkbox{
                position: absolute;
                left: 10/@px-unit;
                top: 10/@px-unit;
            }
        }
    }

    
    .gallery-list-wrapper{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        z-index: 1000;
        background: @neutral-bg-3-normal;
        .gallery-list-header{
            border-bottom: 1/@px-unit solid @neutral-stroke-2-normal;
            padding: 12/@px-unit 24/@px-unit;
        }
        .gallery-list-content{
            flex: 1;
            overflow-y: auto;
        }
    }
    .gallery-list{
        display: flex;
        flex-wrap: wrap;
        padding: 24 / @px-unit;
        .item-card{
            width: 290/@px-unit;
            height: 174/@px-unit;
            margin-bottom: 16/@px-unit;
            position: relative;
            margin-right: 16/@px-unit;
            border: 1/@px-unit solid @neutral-stroke-2-normal;
            &:hover{
                border-color: @brand-stroke-1-normal;
            }
            .item-card-checkbox{
                position: absolute;
                left: 10/@px-unit;
                top: 10/@px-unit;
            }
            .item-card-img{
                width: 100%;
                height: 100%;
                background: @neutral-bg-5-normal;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }
        }
    }
}




._ExactSearchIcon_{
    &.hide {
        display: none;
    }
    .close_icon, .target_search_icon, .area_search_icon, .search_icon {
        display: none !important;        
    }  
}

.exactSearch {
    &-region, &-canvas{
        width: 100%;
        height: 100%;
        position: absolute;
        &-hide {
            top: -10000 / @px-unit;
            z-index: 0;
        }
        &-show {
            z-index: 1001;
            top: 0;
            left: 0;
        }
    }
}


@expandContentOffset: 114 / @px-unit;

.mixin() {
    .label-normal-container {
        padding: 0 !important;
    }

    .label-normal {
        width: 100% !important;
    }
    .component-content{
        width: 100%;
        margin-bottom: 16 / @px-unit;
        .label-div-Container {
            width: 100%;
        }
        .labelContainer {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
    
            .label-content {
                width: 100% !important;
                flex: none;
                height: 22 / @px-unit;
                line-height: 22 / @px-unit;
            }
    
            .wrap-content {
                flex: 1 1 auto;
                width: 1/ @px-unit !important;
                min-width: 45%;
                max-width: 100%;
            }
        }
    }
    .half-width {
        flex: none;
        width: 45%;
        margin-right: 5%;
    }
    
}

._TypeSelector_ {
    width: 100%;
    position: relative;
    height: 100%;

    .content {
        .mixin();
        display: flex;
        flex-direction: column;
        padding: 16 / @px-unit;
        display: block;

        .item-list {
            
            flex:1;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            
            .label-div-Container {
                width:100%;
                .date-range-picker {
                    width:100%;
                    .dateRangePicker-content-wrapper{
                        width:100% !important;
                    }
                }
            }
        }
    }

    .expandBtn {
        height: 24 / @px-unit;
        color: @brand-fg-1-normal;
        line-height: 24 / @px-unit;
        margin-top: 16 / @px-unit;
        cursor: pointer;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .more-icon {
            .svgOut(@brand-fg-1-normal);
        }

        &:hover {
            color: @brand-fg-1-hover;
            .more-icon {
                .svgOut(@brand-fg-1-hover);
            }
        }
    }
}

._TypeSelector_popover {
    left: 369/ @px-unit !important;
    top: 0 !important;
    width: 0;
    z-index: 0;

    .ant-popover-arrow {
        display: none;
    }

    .ant-popover-inner {
        visibility: hidden;
    }

    .expand-content {
        .mixin();
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        visibility: visible;
        overflow-x: hidden;
        position: absolute;
        background-color: @neutral-bg-4-normal;
        
        overflow-y: auto;
        height: calc(100vh - @navMenuHeight);
        width: 304/ @px-unit;
        padding: 16 / @px-unit;
        left: 100%;
        
        top: @navMenuHeight;
    }
}


.finder {
  display: flex;
}

.finder-Cascader {
  width: 280 / @px-unit;

  .ant-select-selector {
    .ant-select-selection-search {
      left: 30/ @px-unit !important;
    }
  }

  .hightlight {
    color: @brand-fg-1-normal;
  }
  .ant-select-arrow {
      opacity: 1 !important;
  }
}
  
.Finder_icon {
  cursor: pointer;

  svg {
    width: 22/ @px-unit;
    margin: 0 4/ @px-unit;
    height: 22/ @px-unit;
  }

  &.close-icon:hover svg g path {
    fill: @brand-fg-1-normal;
  }

  &.close-icon {
    position: relative;
    left: 32 / @px-unit;
    z-index: 1;
    height: 32px !important;
  }
}

.finder-popup {
  min-width: 532 / @px-unit;
  height: 234 / @px-unit;
  
  

  .dropdown-content {
    height: 192/ @px-unit;
    min-width: 532 / @px-unit;
    .finder-search-item {
      font-weight: normal;
      cursor: pointer;
      height: 32/ @px-unit;
      line-height: 32/ @px-unit;
      display: flex;
      align-items: center;
      padding: 0 2/ @px-unit;
      color: @neutral-fg-2-normal;
 
      svg {
        width: 22 / @px-unit;
        margin-right: 4 / @px-unit ;
        height: 22/ @px-unit;

        &+ {
          path:first-child {
            fill: @neutral-fg-2-normal;
          }
        }
      }

      &:hover {
        background-color: @brand-bg-2-selected;
      }
    }

    .ant-cascader-menus {
      height: 100%;

      .ant-cascader-menu {
        height: 100%;
        width: 133 / @px-unit;
        min-width: 133 / @px-unit;
      }
    }

    .ant-cascader-menu-empty {
      .ant-cascader-menu-item {
        height: 180 / @px-unit;
        color: @neutral-fg-2-normal;
      }
    }
  }

  .inSearch .ant-cascader-menus .ant-cascader-menu {
    flex-grow: 1;
  }

  .footer {
    display: flex;
    align-items: center;
    height: 32/ @px-unit;
    padding: 0 4/ @px-unit;

    .hightlight {
      color: @brand-fg-1-normal;
      cursor: pointer;
      display: flex;
      align-items: center;
      margin-top: 2/ @px-unit;
      line-height: 30/ @px-unit;

      .back-text {
        margin-left: 2/ @px-unit;
      }

      svg {
        width: 22/ @px-unit;