height: 484/@px-unit !important;
}

.m-height-648 {
    height: 648/@px-unit !important;
}

.m-height-100p {
    height: 100%;
}


.m-p-0 {
    padding: 0 !important;
}

.m-p-5 {
    padding: 5/@px-unit !important;
}

.m-p-12 {
    padding: 12/@px-unit !important;
}

.m-p-15 {
    padding: 15/@px-unit !important;
}


.m-pl-0 {
    padding-left: 0 !important;
}

.m-pl-5 {
    padding-left: 5/@px-unit !important;
}

.m-pl-6 {
    padding-left: 6/@px-unit !important;
}

.m-pl-7 {
    padding-left: 7/@px-unit !important;
}

.m-pl-8 {
    padding-left: 8/@px-unit !important;
}

.m-pl-10 {
    padding-left: 10/@px-unit !important;
}

.m-pl-12 {
    padding-left: 12/@px-unit !important;
}

.m-pl-13 {
    padding-left: 13/@px-unit !important;
}

.m-pl-15 {
    padding-left: 15/@px-unit !important;
}

.m-pl-17 {
    padding-left: 17/@px-unit !important;
}

.m-pl-20 {
    padding-left: 20/@px-unit !important;
}

.m-pl-24 {
    padding-left: 24/@px-unit !important;
}

.m-pl-25 {
    padding-left: 25/@px-unit !important;
}

.m-pl-30 {
    padding-left: 30/@px-unit !important;
}

.m-pl-35 {
    padding-left: 35/@px-unit !important;
}

.m-pl-37 {
    padding-left: 37/@px-unit !important;
}

.m-pl-40 {
    padding-left: 40/@px-unit !important;
}

.m-pl-43 {
    padding-left: 43/@px-unit !important;
}

.m-pl-45 {
    padding-left: 45/@px-unit !important;
}

.m-pl-50 {
    padding-left: 50/@px-unit !important;
}

.m-pl-60 {
    padding-left: 60/@px-unit !important;
}

.m-pl-70 {
    padding-left: 70/@px-unit !important;
}


.m-pr-0 {
    padding-right: 0 !important;
}

.m-pr-5 {
    padding-right: 5/@px-unit !important;
}

.m-pr-6 {
    padding-right: 6/@px-unit !important;
}

.m-pr-8 {
    padding-right: 8/@px-unit !important;
}

.m-pr-10 {
    padding-right: 10/@px-unit !important;
}

.m-pr-12 {
    padding-right: 12/@px-unit !important;
}

.m-pr-15 {
    padding-right: 15/@px-unit !important;
}

.m-pr-20 {
    padding-right: 20/@px-unit !important;
}

.m-pr-30 {
    padding-right: 30/@px-unit !important;
}

.m-pr-40 {
    padding-right: 40/@px-unit !important;
}

.m-pr-84 {
    padding-right: 84/@px-unit !important;
}

.m-pr-114 {
    padding-right: 114/@px-unit !important;
}


.m-pt-0 {
    padding-top: 0;
}

.m-pt-12 {
    padding-top: 12/@px-unit !important;
}

.m-pt-24 {
    padding-top: 24/@px-unit !important;
}

.m-pt-1 {
    padding-top: 1/@px-unit !important;
}

.m-pt-3 {
    padding-top: 3/@px-unit !important;
}

.m-pt-5 {
    padding-top: 5/@px-unit !important;
}

.m-pt-8 {
    padding-top: 8/@px-unit !important;
}

.m-pt-10 {
    padding-top: 10/@px-unit !important;
}

.m-pt-15 {
    padding-top: 15/@px-unit !important;
}

.m-pt-20 {
    padding-top: 20/@px-unit !important;
}

.m-pt-35 {
    padding-top: 35/@px-unit !important;
}

.m-pt-48 {
    padding-top: 48/@px-unit !important;
}


.m-pb-0 {
    padding-bottom: 0 !important;
}

.m-pb-2 {
    padding-bottom: 2/@px-unit !important;
}

.m-pb-8 {
    padding-bottom: 8/@px-unit !important;
}

.m-pb-10 {
    padding-bottom: 10/@px-unit !important;
}

.m-pb-48 {
    padding-bottom: 48/@px-unit !important;
}

.m-pb-108 {
    padding-bottom: 108/@px-unit !important;
}


.m-pos-abs {
    position: absolute !important;
}

.m-pos-static {
    position: static !important;
}

.m-pos-r {
    position: relative !important;
}


.m-top-0 {
    top: 0 !important;
}

.m-top-10 {
    top: 10/@px-unit !important;
}

.m-top-72 {
    top: 72/@px-unit !important;
}

.m-top-90 {
    top: 90/@px-unit !important;
}

.m-top-130 {
    top: 130/@px-unit !important;
}


.m-bottom-0 {
    bottom: 0 !important;
}

.m-bottom-2-4 {
    bottom: 2.4/@px-unit !important;
}

.m-bottom-3 {
    bottom: 3/@px-unit !important;
}


.m-left-0 {
    left: 0 !important;
}

.m-left-10p {
    left: 10% !important;
}


.m-right-16 {
    right: 16/@px-unit !important;
}

.m-right-84 {
    right: 84/@px-unit !important;
}

.m-right-124 {
    right: 124/@px-unit !important;
}

.m-topmax {
    z-index: 10004 !important;
}

.m-float-none {
    float: none !important;
}

.m-float-left {
    float: left;
}

.m-float-right {
    float: right !important;
}

.m-clear-both {
    clear: both;
}

.m-clearfix:after {
    content: '\20';
    display: block;
    height: 0;
    clear: both;
}

.m-hor-center {
    position: absolute;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    -webkit-transform: translate3d(-50%, 0, 0);
}

.m-ver-center {
    position: absolute;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    -webkit-transform: translate3d(0, -50%, 0);
}

.m-hor-ver-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    -webkit-transform: translate3d(-50%, -50%, 0);
}
.m-flex-ver-hor-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.m-display-flex {
    display: flex;
}

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



.m-fw-normal {
    font-weight: normal !important;
}

.m-fw-bold {
    font-weight: bold !important;
}

.m-fs-small {
    font-size: small;
}

.m-fs-15 {
    font-size: 15/@px-unit;
}

.m-fs-18 {
    font-size: 18/@px-unit;
}

.m-fs-24 {
    font-size: 24/@px-unit;
}

.m-fs-43 {
    font-size: 43/@px-unit;
}


.m-lh-24 {
    line-height: 24/@px-unit;
}

.m-lh-28 {
    line-height: 28/@px-unit;
}

.m-lh-30 {
    line-height: 30/@px-unit;
}

.m-lh-32 {
    line-height: 32/@px-unit;
}

.m-lh-35 {
    line-height: 35/@px-unit;
}

.m-lh-40 {
    line-height: 40/@px-unit !important;
}



.m-cursor-default {
    cursor: default !important;
}


.m-cursor-pointer {
    cursor: pointer !important;
}


.m-cursor-crosshair {
    cursor: crosshair !important;
}


.m-cursor-move {
    cursor: move !important;
}


.m-cursor-text {
    cursor: text !important;
}


.m-cursor-wait {
    cursor: wait !important;
}


.m-cursor-help {
    cursor: help !important;
}


.m-cursor-notAllowed {
    cursor: not-allowed !important;
}

.m-vertical-top {
    vertical-align: top !important;
}

.m-vertical-middle {
    vertical-align: middle !important;
}

.m-vertical-bottom {
    vertical-align: bottom !important;
}

.m-vertical-text-bottom {
    vertical-align: text-bottom !important;
}

.m-text-center {
    text-align: center;
}

.m-text-left {
    text-align: left;
}

.m-text-right {
    text-align: right;
}

.m-inline-block {
    display: inline-block;
}

.m-visibility-hidden {
    visibility: hidden !important;
}

.m-display-hidden {
    display: none !important;
}

.m-display-show {
    display: '' !important;
}

.m-overflow-hidden {
    overflow: hidden !important;
}

.m-overflow-initial {
    overflow: initial !important;
}

.m-opacity-0 {
    opacity: 0;
}

.m-ws-nowrap {
    white-space: nowrap;
}

.m-text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}





















@base-rem-size-sm: 12PX; 
@base-rem-size: 14PX; 

@px-unit: 14rem; 






@SddFontNormalColor:@neutral-fg-3-normal;
@SddNumberLimitRangeColor:@neutral-fg-3-normal;



@pageBodyBg: @neutral-bg-6-normal; 
@theme: 'deep'; 
@themeMainViewurlproject:'resource';




@errorColor: @status-error-stroke-1-normal; 



@navMenuFontN:14px;


@schedulePlanEvenBg: @neutral-bg-4-normal; 


@timePlanBorderN: @neutral-stroke-1-normal;
@planGeneral:.subColor(@general)[@deep];
@planDetect: .subColor(@detect)[@deep];
@planAlarm: .subColor(@alarm)[@deep];
@planDetectalarm: .subColor(@detectalarm)[@deep];
@planIvs: .subColor(@ivs)[@deep]; 
@planPos: .subColor(@pos)[@deep];
@planSmd:.subColor(@smd)[@deep]; 
@planFaceRecognition: .subColor(@faceRecognition)[@deep]; 







@font-size-body-s: 12px;
@font-size-body-m: 14px;
@font-size-body-m-strong:14px;
@font-size-title-s:16px;
@font-size-title-m:18px;
@font-size-headline-s:20px;
@font-size-digit-s:12px;
@font-size-digit-m:14px;
@font-size-digit-l:32px;
@font-size-digit-xl:36px;
@font-line-height:1.5;
@font-weight-regular:400;
@font-weight-bold:600;


@aiDisplayNumCheck:{
    green: #39d67f;
    red: #ff4f4f;
    yellow: #fdfc00;
};
@scroll_bar_base:.lumaColorSelect(@pageBodyBg,@scroll-bar,@scroll-bar-l)[];
@page_scroll_barH:fadeout(@scroll_bar_base, 50%);
@page_scroll_bar:fadeout(@scroll_bar_base, 75%);


@general: #39d67f;
@alarm: #ff4f4f;
@detect: #e9d760;
@detectalarm: #f1910a;
@ivs: #39adf6;
@jpg: #3ae8f8;
@pos: #788ae3;
@card: #7debf7;
@smd:#0ebba9;
@faceRecognition:#ff4bdb;
@whiteMode: #FFFF00;


@traPlaying: #FF4BDB;
@traPlayNormal: #1EE17F; 
@markerFinishi: #52C41A; 
@traLineNormal: @brand-bg-1-normal; 
@traLinePlaying: #52C41A;  
@traLineFinishi: #52C41A;  
@markerNomal: #FE6161; 
@markerNoTraHover: #F1910A; 
@markerNoTra: #5b5d63; 
@markerActive: @brand-bg-1-normal; 
@preview_Sider_Bg: @--bg;
@preview_Left_Bg: @preview_Sider_Bg; 
@preview_Right_Bg: @preview_Sider_Bg; 
@preview_ChnlBgA: @--bg;
@channelFontColor: @neutral-fg-2-normal;
@iconColorA: @--primary-5; 
@preview_ChnlTextN: .color_N(@preview_Left_Bg)[]; 



@ipv4Input-borderColor: @neutral-stroke-1-normal;
@ipv4Input-borderColor-hover: @brand-stroke-1-hover; 
@ipv4Input-borderColor-focus: @brand-stroke-1-active; 
@ipv4Input-borderColor-shadow: none; 
@ipv4Input-error-borderColor: @errorColor; 
@ipv4Input-error-borderColor-hover: @errorColor; 
@ipv4Input-error-borderColor-focus: @errorColor; 
@ipv4Input-error-borderColor-shadow: none; 

@macInput-borderColor: @ipv4Input-borderColor;
@macInput-borderColor-hover: @ipv4Input-borderColor-hover; 
@macInput-borderColor-focus: @ipv4Input-borderColor-focus; 
@macInput-borderColor-shadow: @ipv4Input-borderColor-shadow; 
@macInput-error-borderColor: @errorColor; 
@macInput-error-borderColor-hover: @errorColor; 
@macInput-error-borderColor-focus: @errorColor; 
@macInput-error-borderColor-shadow: none; 

@container-errorColor: @errorColor;



@mainPagebottomH:60 / @px-unit;


@channelTreeSearchHeight: 52 / @px-unit; 


@ocxBg: #080808; 
@ocxToolbarBg: #181818; 


@scrollbarHeight: 6 / @px-unit;


@navMenuHeight: 56 / @px-unit; 
@navMenuAddScrollHeight: @navMenuHeight + @scrollbarHeight; 
@navMenuLineHeight: 28 / @px-unit; 


@mainPagePadding: 24 / @px-unit; 


@tableOddBgN: @neutral-bg-4-normal; 
@tableEvenBgN: @neutral-bg-4-normal; 
@tableTheadThHeight: 44/ @px-unit; 
@tableRowTdHeight: 40/ @px-unit; 


@QRCodeBg: #fff;


@posCheckbox:{
    
    
    white: #ffffff, #000000BF, @neutral-stroke-accessible;
    black: #121212, @neutral-fg-on-color, @neutral-stroke-accessible; 
    red: #fb549c, @neutral-fg-on-color, @neutral-stroke-accessible;
    orange: #f35900, @neutral-fg-on-color, @neutral-stroke-accessible; 
    yellow: #fdfc00, #000000BF, @neutral-stroke-accessible; 
    green: #1ee17f, @neutral-fg-on-color, @neutral-stroke-accessible; 
    dodgerblue: #009cfd, @neutral-fg-on-color, @neutral-stroke-accessible; 
    pos: #5772ff, @neutral-fg-on-color, @neutral-stroke-accessible; 
    purple: #c46cf1, @neutral-fg-on-color, @neutral-stroke-accessible; 
};


@ai_progress_blue: #388EFF; 



@bit-schedule-font-color: @neutral-fg-2-normal;

@bit-schedule-grid-borderColor: @neutral-stroke-2-normal; 

@bit-schedule-time-ruler-bgColor: @neutral-bg-4-hover; 

@bit-schedule-drag-handler-bgColor: @brand-stroke-1-normal; 
@bit-schedule-drag-handler-borderColor: @brand-stroke-1-selected; 
@bit-schedule-drag-handler-hover-borderColor: @brand-stroke-1-normal; 

@bit-schedule-event-select-bgColor: @neutral-bg-1-selected-3; 

@bit-schedule-scale-text-color: @neutral-fg-3-normal; 

@bit-schedule-operator-color: @neutral-fg-2-normal; 
@bit-schedule-operator-hover-color: @neutral-fg-1-normal; 
@bit-schedule-operator-active-color: @neutral-fg-1-normal; 

@bit-schedule-draw-rect-borderColor: @brand-stroke-1-normal; 


@bit-schedule-event-green-color: @status-success-fg-1-normal; 
@bit-schedule-event-yellow-color: @status-yellow-fg-1-normal; 
@bit-schedule-event-red-color: @status-error-fg-1-normal; 
@bit-schedule-event-blue-color: @status-cyan-fg-1-normal; 
@bit-schedule-event-orange-color: @status-warning-fg-1-normal; 
@bit-schedule-event-purple-color: @status-purple-fg-1-normal; 



@colorPickerWrapperBorderColor: @neutral-stroke-1-normal;



@black: #000;
@white: #fff;
@blue: rgb(0, 64, 255);
@gray: rgb(128, 128, 128);
@green: rgb(0, 255, 9);
@red: rgb(255, 0, 0);
@pink: rgb(255, 41, 148);
@brown: rgb(166, 75, 0);
@purple: rgb(128, 0, 255);
@yellow: rgb(255, 255, 0);
@orange: rgb(255, 128, 0);


@theme: 'deep'; 

@--primary-6:#009CFF; 
@--primary-5:#33B0FF; 
@--primary-7:#007DCC; 



@--toolbar-bg:#4C5054; 








@--bg:#2A2E33; 


@--bottom-bg:#232529;






@--component-bg:#2a2e33; 
@--component-border: #606366; 

@--component-bg-disable:#32373C; 




@--option-bg-select: #55585D; 




@--menu-bg:#393c41;






@--navTitle-bg:#4c4f54; 


















@--split: #606366;


@--bg-card: #56585B;



@--block: #17181C;





@--title:#313439; 

@--font-l:#FFFFFF; 
@--font-r: #a6aab2; 
@--placeholder: #5d6263;
@--font-s: #7c8284; 

@--font-l-l:#000000; 
@--font-r-l: #262626; 
@--placeholder-l: #BFBFBF;
@--font-s-l: #8C8C8C; 


@--warning-6:#ffd304;
@--warning-border: #B59914; 
@--warning-bg: #44422D; 
@--warning-5:#ffdc38; 
@--warning-7:#cca903; 


@--success-6:#29d67d;
@--success-border: #299B64;
@--success-bg: #2A423C;
@--success-5:#4bd690; 
@--success-7:#21ab65; 


@--error-6:	#ff4f4f;
@--error-border: #B54345;
@--error-bg: #443136;
@--error-5: #ff7272; 
@--error-7: #cc3f3f; 


@scroll-bar:rgb(255, 255, 255);
@scroll-bar-l:rgb(0,0,0);


@brand-bg-1-normal: #1373F0;
@brand-bg-1-hover: #3A88F0;
@brand-bg-1-active: #1367D6;
@brand-bg-1-selected: #1372F0;
@brand-bg-1-disable: rgba(19, 115, 240, 0.4);
@brand-bg-2-normal: rgba(56, 142, 255, 0.15);
@brand-bg-2-selected: rgba(53, 134, 240, 0.3);
@brand-bg-comp-normal: #1373F0;
@brand-bg-comp-hover: #3A88F0;
@brand-bg-comp-active: #1367D6;
@brand-fg-1-normal: #388EFF;
@brand-fg-1-hover: #61A6FF;
@brand-fg-1-active: #317DE0;
@brand-fg-link-normal: #388EFF;
@brand-fg-link-hover: #61A6FF;
@brand-fg-link-active: #317DE0;
@brand-fg-comp-normal: #1373F0;
@brand-fg-comp-hover: #3A88F0;
@brand-fg-comp-active: #1367D6;
@brand-stroke-1-normal: #388EFF;
@brand-stroke-1-hover: #3A88F0;
@brand-stroke-1-active: #317DE0;
@brand-stroke-1-selected: #388EFF;
@brand-stroke-2-normal: rgba(56, 142, 255, 0.3);
@brand-stroke-3-normal: #388EFF;
@brand-stroke-comp-normal: #1373F0;
@brand-stroke-comp-hover: #3A88F0;
@brand-stroke-comp-active: #317DE0; 
@status-error-bg-1-normal: #C93435;
@status-error-bg-1-hover: #DE5E5A;
@status-error-bg-1-active: #A43334;
@status-error-bg-2-normal: #381C1D;
@status-error-fg-1-normal: #C93435;
@status-error-fg-1-hover: #DE5E5A;
@status-error-fg-1-active: #A43334;
@status-error-stroke-1-normal: #C93435;
@status-error-stroke-1-hover: #DE5E5A;
@status-error-stroke-1-active: #A43334;
@status-error-stroke-2-normal: rgba(201, 52, 53, 0.6);
@status-error-stroke-3-normal: rgba(201, 52, 53, 0.3);
@status-success-bg-1-normal: #28B854;
@status-success-bg-1-hover: #4BCD6E;
@status-success-bg-1-active: #28984C;
@status-success-bg-2-normal: #153020;
@status-success-fg-1-normal: #28B854;
@status-success-stroke-1-normal: #28B854;
@status-success-stroke-2-normal: rgba(40, 184, 84, 0.5);
@status-warning-bg-1-normal: #DF7D32;
@status-warning-bg-1-hover: #EA9C58;
@status-warning-bg-1-active: #B56B32;
@status-warning-bg-2-normal: #36261A;
@status-warning-fg-1-normal: #DF7D32;
@status-warning-stroke-1-normal: #DF7D32;
@status-warning-stroke-2-normal: rgba(248, 120, 45, 0.4);
@status-yellow-bg-1-normal: #DFA316;
@status-yellow-fg-1-normal: #DFA316;
@status-yellow-bg-2-normal: #362C15;
@status-yellow-stroke-1-normal: #DFA316;
@status-yellow-stroke-2-normal: rgba(223, 163, 22, 0.5);
@status-cyan-bg-1-normal: #06BCCF;
@status-cyan-bg-2-normal: #0F3135;
@status-cyan-fg-1-normal: #06BCCF;
@status-cyan-stroke-2-normal: rgba(6, 188, 207, 0.5);
@status-purple-bg-1-normal: #B06AF7;
@status-purple-bg-2-normal: #261B35;
@status-purple-fg-1-normal: #B06AF7;
@status-purple-stroke-2-normal: rgba(177, 100, 255, 0.6);
@neutral-bg-1-normal: #2E333A;
@neutral-bg-1-hover-1: #3A3E45;
@neutral-bg-1-active-1: #212328;
@neutral-bg-1-hover-2: #43474F;
@neutral-bg-1-active-2: #343A42;


@neutral-bg-1-hover-3: #3C4048;
@neutral-bg-1-selected-3: #4B4E56;
@neutral-bg-6-1-normal: #2B2F38;

@neutral-bg-2-normal: #343A42;
@neutral-bg-2-hover: #343A42;
@neutral-bg-2-active: #343A42;
@neutral-bg-3-normal: #292E34;
@neutral-bg-3-1-normal: #30353C;
@neutral-bg-4-normal: #25282E;
@neutral-bg-4-hover: #30353C;
@neutral-bg-5-normal: #18181A;
@neutral-bg-6-normal: #0D0D0E;
@neutral-bg-inverted: rgba(0, 0, 0, 0.9);
@neutral-bg-disabled: #15191F;
@neutral-bg-comp-normal: #4D515A;
@neutral-bg-comp-hover: #5D636E;
@neutral-bg-comp-active: #35355C;
@neutral-fg-1-normal: #FFFFFF;
@neutral-fg-2-normal: #FFFFFF;
@neutral-fg-3-normal: rgba(255, 255, 255, 0.6);
@neutral-fg-4-normal: rgba(255, 255, 255, 0.5);
@neutral-fg-5-normal: #5B636D;
@neutral-fg-inverted: #FFFFFF;
@neutral-fg-on-color: #FFFFFF;
@neutral-fg-on-1-normal: rgba(255, 255, 255, 0.8);
@neutral-fg-on-1-selected: #FFFFFF;
@neutral-fg-disabled: rgba(255, 255, 255, 0.3);
@neutral-stroke-1-normal: rgba(217, 227, 255, 0.2);
@neutral-stroke-2-normal: rgba(217, 227, 255, 0.16);
@neutral-stroke-3-normal: rgba(217, 227, 255, 0.16);
@neutral-stroke-accessible: rgba(217, 227, 255, 0.24);
@neutral-stroke-disabled: rgba(217, 227, 255, 0.16);
@neutral-focus-1: #FFFFFF;
@neutral-focus-2: #000000;



@neutral-bg-transparent-normal: #30353C;
@neutral-bg-transparent-hover: #3A3E45;
@neutral-bg-transparent-active: #070809;
@neutral-bg-transparent-disabled: #25282E;


@bm-bg-1-normal: #2E3345;
@bm-bg-1-hover: #3F434D;
@bm-bg-2-normal: #25282E;
@bm-bg-2-hover: #43474F;
@bm-bg-3-gradient: linear-gradient(135.00deg, rgb(30, 32, 35) 0%,rgb(28, 27, 43) 100%);
.svgFont(@fontSize: 30) {
  font-size: if((@fontSize =0), inherit, @fontSize / @px-unit);
}

.svgOut (@normalColor) {
  &:not(.disabled_icons) {
    color: @normalColor;
  }
}


.svgHover (@hoverColor: @--primary-5) {
  &:not(.disabled_icons):not(.noHover) {
    &.active,
    &:hover {
      color: @hoverColor;
    }
  }
}

.svgBgHover (@hoverColor: @--primary-5, @activeColor: @--primary-5) {
  &:not(.disabled_icons):not(.noHover) {
    &:hover {
      background-color: @hoverColor;
    }
    &.active {
      color: @activeColor;
    }
  }
}


.svgDisabled (@disableColor) {
  color: @disableColor;
  cursor: not-allowed;
}


.svgBoder (@borderColor , @bgColor) {
  .bg (@color) when (isColor(@color)) {
    background-color: @color;
  }

  .border (@color) when (isColor(@color)) {
    border: 1 / @px-unit solid @color;
  }

  .bg(@bgColor);
  .border(@borderColor);
}


.lumaValue(@bg) {
  @redV: red(@bg);
  @greenV: green(@bg);
  @blueV: blue(@bg);
  @lumaV: (@redV * 0.2126 + @greenV * 0.7152 + @blueV * 0.0722) / 255 * 100%;
}


.lumaColor(@bg: @--bg, @state) {
  
  @deepFont: @--font-l, @--font-r, @--placeholder, @--font-s;
  
  @lightFont: @--font-l-l, @--font-r-l, @--placeholder-l, @--font-s-l;
  
  @inverse: (if((.lumaValue(@bg)[] >=60%), extract(@deepFont, @state), extract(@lightFont, @state)));
  @result: (if((.lumaValue(@bg)[] >=60%), extract(@lightFont, @state), extract(@deepFont, @state)));
}


.lumaColorSelect(@bg: @--bg, @deepColor, @lightColor) {
  @result: (if((.lumaValue(@bg)[] >=60%), @lightColor, @deepColor));
}

.subColor(@base6) {
  @h: hue(@base6);
  @s: round(hsvsaturation(@base6));
  @v: round(hsvvalue(@base6));

  
  

  
  @s-5: round(@s - @s / 5);
  @v-5: round(@v + (100%- @v) / 5);

  
  @s-7: round(@s + (100% - @s) / 5);
  @v-7: round(@v - @v / 5);

  
  @s-8: round(@s + ((100% - @s) / 5) * 2);
  @v-8: round(@v - (@v / 5) * 2);

  
  @hover: hsv(@h, @s-5, @v-5);
  @click: hsv(@h, @s-7, @v-7);
  @deep: hsv(@h, @s-8 , @v-8);
}

.color_A(@bg: @--bg) {
  .lumaColor(@bg, 1);
}

.color_N(@bg: @--bg) {
  .lumaColor(@bg, 2);
}

.color_D(@bg: @--bg) {
  .lumaColor(@bg, 3);
}

.color_S(@bg: @--bg) {
  .lumaColor(@bg, 4);
}


.colorBox(@colorMap) {
  each(@colorMap, {
    @base: extract(@value , 1);
    
    @base_C: if(length(@value) >=2, extract(@value , 2), @neutral-fg-on-color);
    
    @base_H: if(length(@value) >=3, extract(@value , 3), @base);

    .sdd-checked-@{key} {
      &.ant-checkbox-wrapper:hover .ant-checkbox-inner {
        
        border-color: @base_H !important;
      }

      .ant-checkbox-inner {
        
        border-color: @base_H !important;
        background-color: @base !important;

        &:after {
          
          border-color: @base_C;
        }
      }

      .ant-checkbox-checked::after {
        border-color: @base_H !important;
      }
    }
  });
}

.colorLevel (@level, @color) {
  svg {
    path:nth-child(@{level}) {
      fill: @color;
    }
  }
}



@secondary:{    
    
    selRuleLineColor: #ffff00; 
    unSelRuleLineColor: #0000ff; 
    selFilterLineColor: #06c8f9; 
    unSelFilterLineColor: #06c8f9; 
    pointRuleSelColor: #01ff01; 
    ruleSearchedColor: #ff974d; 
    
    hddDiskHealth:#FF0000;    
    
    playbackUplineBgN:@neutral-bg-6-normal; 
    playbackLineBgN: @neutral-bg-6-normal; 
    playbackCoordinateTextColorN: @neutral-fg-3-normal; 
    playbackFramePenColorN: @neutral-stroke-2-normal; 
    playbackNormalTypeColorN: @general; 
    playbackMotionTypeColorN: @detect; 
    playbackIntellTypeColorN: @ivs; 
    playbackAlarmTypeColorN: @alarm; 
    pos:@pos; 
    card:@card; 
    detectalarm:@detectalarm; 
    interet:#FF974D;
    aucpick:#FF974D;

    
    faceTargetColor: rgb(0, 255, 0); 
    bodyTargetColor: rgb(0, 204, 255); 
    vehicleTargetColor: rgb(225, 216, 0); 
    animalTargetColor:#7F00FF;
    customTargetClolor: rgb(255, 69, 0); 
    
    normalTempColor: #A6AAB2; 
    abnormalTempColor: #ff0000; 
    
    analyticsListLineColor: #606366; 
    analyticsListFontColor: #FFFFFF; 
    analyticsListBarColor: #FF9700; 
    closeBtnNormal: @neutral-bg-2-normal; 
    closeBtnActive: @status-error-fg-1-active; 
    searchBtnNormal: @neutral-fg-on-color;
    searchBtnActive: @brand-fg-1-hover;
    searchBtnBgNormal: @neutral-bg-inverted;
    searchBtnActiveBorder: @brand-stroke-1-hover;
    finderTextColorN: @brand-fg-1-normal;
    
    
    okNormalBKColor:@brand-bg-1-normal;
    okHoverBKColor:@brand-bg-1-hover;
    okDownBKColor:@brand-bg-1-active;
    okTextColor:@neutral-fg-on-color;
    okFrameColor:@brand-bg-1-normal;
    
    cancleNormalBKColor:@neutral-bg-2-normal;
    cancleHoverBKColor:@neutral-bg-2-hover;
    cancleDownBKColor:@neutral-bg-2-active;
    cancleTextColor:@neutral-fg-2-normal;
    cancleFrameColor:@neutral-stroke-1-normal;
    
    headNormalBKColor:@neutral-bg-3-normal;
    headTextColor:@neutral-fg-1-normal;

    
    infoNormalBKColor:@neutral-bg-3-normal;
    infoTextColor:@neutral-fg-3-normal;
    
    footerNormalBKColor:@neutral-bg-3-normal;

    ocxToolbarBg: @ocxToolbarBg; 

    
    traPlaying: @traPlaying; 
    traPlayNormal: @traPlayNormal; 

    traLineNormal: @traLineNormal; 
    traLineFinishi: @traLineFinishi; 
    traLinePlaying: @traLinePlaying; 

    
    passbyNumColor: #e9d760;

    
    neutral-fg-on-1-selected:@neutral-fg-on-1-selected;
    neutral-fg-2-normal:@neutral-fg-2-normal;
    neutral-fg-3-normal:@neutral-fg-2-normal;
    neutral-fg-4-normal:@neutral-fg-4-normal;
    neutral-stroke-2-normal:@neutral-stroke-2-normal;
    neutral-bg-5-normal:@neutral-bg-5-normal;
};
@secondaryOver:{}

body{
    background: transparent;
}
#root, body {
    height: 100%;
    word-wrap:break-word; 
    overflow:hidden;
    background-color: @pageBodyBg;
    
    color:@neutral-fg-2-normal;
    
    .rc-virtual-list-scrollbar-thumb {
        &:hover {            
            background: @page_scroll_barH !important;
        }
        background: #8f8f8f !important;
    }
}
.cuttitle {
    overflow: hidden!important;
    white-space: nowrap;
    word-wrap: normal;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
.ant-tabs{
    color: .color_N(@--bg)[];
}

.ant-table{
    .ant-table-thead{
        th.ant-table-cell{
            word-break: normal;
        }
    }
    
    .table-operation {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
}
i {
    cursor: pointer;
}

.MainPage {
    width: 100%;
    height: 100%;
    padding: @mainPagePadding;
    &.noFixedButton{
        position: relative;
    }
}


.labelFlexContainer{
    display: flex;
    .labelFlexItem{
        margin-left: 80 / @px-unit;
    }
}


::-webkit-scrollbar-thumb {
    background-color: @neutral-stroke-2-normal;
}
::-webkit-scrollbar-thumb:hover {
    background-color: @neutral-stroke-accessible;
}
::-webkit-scrollbar-thumb:active {
    background-color: @neutral-stroke-accessible;
}

::-webkit-scrollbar-corner {
    background: transparent
}

.m-width-f10 {
    width: calc(~"100% - 10rem") !important;
}

.m-width-auto {
    width: auto !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.m-width-3p {
    width: 3% !important;
}

.m-width-9p {
    width: 9% !important;
}

.m-width-10p {
    width: 10% !important;
}

.m-width-12p {
    width: 12% !important;
}

.m-width-20p {
    width: 20% !important;
}

.m-width-25p {
    width: 25% !important;
}

.m-width-30p {
    width: 30% !important;
}

.m-width-33p {
    width: 33% !important;
}

.m-width-40p {
    width: 40% !important;
}

.m-width-50p {
    width: 50% !important;
}

.m-width-55p {
    width: 55% !important;
}

.m-width-58p {
    width: 58% !important;
}

.m-width-60p {
    width: 60% !important;
}

.m-width-65p {
    width: 65% !important;
}

.m-width-70p {
    width: 70% !important;
}

.m-width-80p {
    width: 80% !important;
}

.m-width-100p {
    width: 100% !important;
}

.m-width-200p {
    width: 200% !important;
}


.m-max-w-480 {
    max-width: 480/@px-unit !important;
}


.m-minw-50 {
    min-width: 50/@px-unit !important;
}

.m-minw-70 {
    min-width: 70/@px-unit !important;
}

.m-minw-90 {
    min-width: 90/@px-unit !important;
}


.m-height-0 {
    height: 0 !important;
}

.m-height-15 {
    height: 15/@px-unit !important;
}

.m-height-24 {
    height: 24/@px-unit !important;
}

.m-height-25 {
    height: 25/@px-unit !important;
}

.m-height-26 {
    height: 26/@px-unit !important;
}

.m-height-28 {
    height: 28/@px-unit !important;
}

.m-height-30 {
    height: 30/@px-unit !important;
}

.m-height-36 {
    height: 36/@px-unit !important;
}

.m-height-40 {
    height: 40/@px-unit !important;
}

.m-height-50 {
    height: 50/@px-unit !important;
}

.m-height-60 {
    height: 60/@px-unit !important;
}

.m-height-90 {
    height: 90/@px-unit !important;
}

.m-height-100 {
    height: 100/@px-unit !important;
}

.m-height-120 {
    height: 120/@px-unit !important;
}

.m-height-150 {
    height: 150/@px-unit !important;
}

.m-height-200 {
    height: 200/@px-unit !important;
}

.m-height-201 {
    height: 201/@px-unit !important;
}

.m-height-238 {
    height: 238/@px-unit !important;
}

.m-height-276 {
    height: 276/@px-unit !important;
}

.m-height-288 {
    height: 288/@px-unit !important;
}

.m-height-300 {
    height: 300/@px-unit !important;
}

.m-height-310 {
    height: 310/@px-unit !important;
}

.m-height-350 {
    height: 350/@px-unit !important;
}

.m-height-360 {
    height: 360/@px-unit !important;
}

.m-height-380 {
    height: 380/@px-unit !important;
}

.m-height-400 {
    height: 400/@px-unit !important;
}

.m-height-432 {
    height: 432/@px-unit !important;
}

.m-height-484 {
    height: 484/@px-unit !important;
}

.m-height-648 {
    height: 648/@px-unit !important;
}

.m-height-100p {
    height: 100%;
}



.m-m-a {
    margin: auto;
}

.m-m-0 {
    margin: 0 !important;
}

.m-m-20 {
    margin: 20/@px-unit !important;
}

.m-m-10 {
    margin: 10/@px-unit !important;
}


.m-mr-0 {
    margin-right: 0 !important;
}

.m-mr-5 {
    margin-right: 5/@px-unit !important;
}

.m-mr-6 {
    margin-right: 6/@px-unit !important;
}

.m-mr-10 {
    margin-right: 10/@px-unit !important;
}

.m-mr-12 {
    margin-right: 12/@px-unit !important;
}

.m-mr-15 {
    margin-right: 15/@px-unit !important;
}

.m-mr-20 {
    margin-right: 20/@px-unit !important;
}

.m-mr-24 {
    margin-right: 24/@px-unit !important;
}

.m-mr-30 {
    margin-right: 30/@px-unit !important;
}

.m-mr-36 {
    margin-right: 36/@px-unit !important;
}

.m-mr-40 {
    margin-right: 40/@px-unit !important;
}

.m-mr-100 {
    margin-right: 100/@px-unit !important;
}

.m-mr-140 {
    margin-right: 140/@px-unit !important;
}

.m-mr-186 {
    margin-right: 186/@px-unit !important;
}

.m-mr-200 {
    margin-right: 200/@px-unit !important;
}

.m-mr-250 {
    margin-right: 250/@px-unit !important;
}

.m-mr-f2 {
    margin-right: -2/@px-unit !important;
}

.m-mr-f6 {
    margin-right: -6/@px-unit !important;
}

.m-mr-f7 {
    margin-right: -7/@px-unit !important;
}

.m-mr-f10 {
    margin-right: -10/@px-unit !important;
}

.m-mr-f14 {
    margin-right: -14/@px-unit !important;
}

.m-mr-f15 {
    margin-right: -15/@px-unit !important;
}

.m-mr-f16 {
    margin-right: -16/@px-unit !important;
}

.m-mr-f17 {
    margin-right: -17/@px-unit !important;
}

.m-mr-f18 {
    margin-right: -18/@px-unit !important;
}

.m-mr-f23 {
    margin-right: -23/@px-unit !important;
}

.m-mr-f25 {
    margin-right: -25/@px-unit !important;
}

.m-mr-f27 {
    margin-right: -27/@px-unit !important;
}


.m-ml-0 {
    margin-left: 0 !important;
}

.m-ml-3 {
    margin-left: 3/@px-unit !important;
}

.m-ml-5 {
    margin-left: 5/@px-unit !important;
}

.m-ml-6 {
    margin-left: 6/@px-unit !important;
}

.m-ml-7 {
    margin-left: 7/@px-unit !important;
}

.m-ml-8 {
    margin-left: 8/@px-unit !important;
}

.m-ml-9 {
    margin-left: 9/@px-unit !important;
}

.m-ml-10 {
    margin-left: 10/@px-unit !important;
}

.m-ml-12 {
    margin-left: 12/@px-unit !important;
}

.m-ml-15 {
    margin-left: 15/@px-unit !important;
}

.m-ml-16 {
    margin-left: 16/@px-unit !important;
}

.m-ml-17 {
    margin-left: 17/@px-unit !important;
}

.m-ml-18 {