}

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







/**
 * main.less规范
 *
 * 1、去除了IPC和IVSS中使用的不知含义的less变量，保留了个别几个必须的变量定义（比如@sdd-web/design中的变量textColorNo5）；
 * 2、变量名命名规范，有状态的必须带上N,A,D（分别代表 Normal， Active,  Disable）
 *    xxxBg[N,A,D]：背景色命名
 *    xxxBorder[N,A,D]：Border命名
 *    xxxSvg[N,A,D]：Icon命名
 *    xxxText[N,A,D]： 字体色命名
 *    xxxDivider： 分割线命名 *      
 * 3、采用4.0的变量归类方式，一种是组件类，一种是模块类；变量必须明确注释或明了每个变量实际控制的组件或具体业务地方 ；
 * 4、main.less中组件模块常见的颜色定义尽量采用less引用方式， 减少换肤时颜色的定义 ，关注定制的便捷性以及换肤速度；
 *
**/

/** 
 * 页面长度使用规则
 * 1.禁止使用px和rem作为单位，包括border的宽度
 * 2.使用 px/@px-unit 换算成rem：比如常规分辨率下是100px，在less中写100/@px-unit
 * 3.使用前先impot基础less变量：
 * 4.@px-unit的数值和@font-size-base的数值相同
*/

@base-rem-size-sm: 12px; // 1280以下默认大小
@base-rem-size: 14px; // 正常分辨率大小 3000px以上分辨率为2倍

@px-unit: 14rem; //字体大小（px）+单位,用于后面计算rem

/*换肤列表的相关颜色*/
@skin-light: #ebf1f5;
@skin-deep: #2a2e33;

/* 以下是调整后最新定义 */
//主体通用
@current: #009cff; //主色系
@pageTextN: #a6aab2; //1 常规文字颜色 (tbtext, label组件文字颜色,表格单元格默认文字,droplist下拉文字颜色 button组件默认字体) 2预览左侧通道列表默认字体
@pageTextA: #ffffff; // 悬浮文字， 表单输入框文字颜色
@pageTextD: #52545a; // 文字禁用颜色
@successColor: #29d67f; //成功的文字提示
@errorColor: #ff4f4f; // 失败的文字提示
@warningColor: #ffd304; //警告的文字提示
@anchorTextN: @pageTextN; //超链接字体颜色
@anchorTextA: @current; //超链接Hover字体颜色
@mainPageSvgN: @pageTextN; // 用于设置页面单色图标色 (图标的hover默认为@current， disabled通过opacity: .5处理)
@pageBorderN: rgba(
    255,
    255,
    255,
    0.15
); // 表格边框和类似于表格区域的边框颜色（1、视频码流主辅码流边框色、中间分割线背景色;2、panelBody页面panel增加边框时的背景色）
@pageBorderD: @pageBorderN;
@dropMenuBorder: #54575e; //菜单下拉的弹出框边框
@dividerColor: rgba(
    255,
    255,
    255,
    0.06
); //分割线的颜色，包括主页菜单底部分割线的颜色和弹框底部的分割线两个，设置边框线
@red: #ff0000;

/* svg 颜色控制 */
@pdEyeIconA: #00a8ff; // 登录框显示密码时的eyeIcon颜色
@iconColorN: @pageTextN; // 默认图标颜色
@iconColorD: #686c72; // 图标置灰颜色
@iconColorA: @current; // 页面hover的图标
@homeTaskIconColorA: #ffffff; // 任务栏上悬浮后的图标颜色
@iconLinearStartColorN: #ffffff; // 线性起始渐变色
@iconBgColor: #ffffff; // 图标背景色
@iconLinearStopColorN: #989898; // 线性起始渐变色
@iconLinearStartColorA: #52bcff; // 线性起始渐变色
@iconLinearStopColorA: @current; // 线性起始渐变色
@iconBgN: #32373c; // 图标的背景色 （智能方案需要自己增加背景色 .svgBg）
@iconBorderN: #666b74; // 图标的边框色（和@iconBgN配合起来使用 智能方案图标）
@iconActiveWifi: #0f0; // wifi信号激活颜色
@iconNolmal: #468429; // wifi信号激活颜色
@iconFail: #cd8b0f; // wifi信号激活颜色

// 结束颜色
@pageBodyBg: #2a2e33; //主体背景色
@maskBg: #090c0c; // 遮罩的背景色
@theme: 'deep'; //主题类型

/**组件类变量 start**/
// slider
@sliderBgN: #3e4648; //slider未拖动部分背景色
@sliderBgA: #3e4648; //slider未拖动部分悬停背景色
@sliderTrackN: @current; //slider已拖动部分背景色
@sliderTrackA: @current; //slider已拖动部分悬停的背景色

// 输入框表单的颜色
@formInputBgN: @pageBodyBg;
@formInputBgD: @pageBodyBg;
@formInputBgA: @current;
@formInputBoderN: @pageBorderN;
@formInputBoderD: @pageBorderD;
@formInputBorderA: @current;
@formInputTextN: #ffffff;
@formInputTextD: @pageTextD;
@formInputSvgN: #666b74;
@formInputSvgA: @current;
@formInputSvgD: @pageTextD;
@numberInPutHandleBgA: @pageBodyBg; //数字输入框右侧按钮的背景色
@numberInPutHandleBoderA: @formInputBoderN;
@formInputDropDownBgN: @formInputBgN; // 下拉框DropDown内容的背景色
@formInputDropDownTextN: @pageTextN; // 下拉框DropDown内容的文字色
@formInputDropDownBgA: #2a2e33; // 悬浮时候的背景色(同当前选中时候背景色)
@formRadioBorderN: #8a8e94; // Radio 常态时的边框色
@formCheckboxBorderD: #36393f; // Checkbox禁用时的颜色

//表格定义
@tableHeadTextN: #ffffff; //标题文字色(默认同标准文字色)
@tableBgN: @formInputDropDownBgN; //标题背景色 (与人脸特征信息背景色相同,2:视频码流主辅码流panel头部背景色, 3:区域参数头部背景色)
@tableTextN: @pageTextN; // 表格内容默认文字色
@tableTextA: @tableHeadTextN; // 选中时的文字颜色(默认同悬浮文字颜色)
@tableOddBgN: #2a2e33; ///奇数行背景色
@tableEvenBgN: #31353c; //偶数行背景色
@tableBgA: #52555a; //选中行背景色
@tableBgD: @tableOddBgN; //表格中选中行被禁用的下拉框的背景色,默认同奇数行背景色
@tableBorderN: @pageBorderN; //表格边框

//pagination  todo 待验证
@paginationTextN: @pageTextN;
@paginationTextA: @current;
@paginationInputTextN: @pageTextN;
@paginationBg: @pageBodyBg;
@paginationBorderA: @current;

//progress 已确认
@progressBg: #565965;
@progressText: @pageTextN;

//slider
@sliderBg: #3e4648;

//button todo 待验证
@buttonNormalBgN: #32373c;
@buttonNormalBgD: @buttonNormalBgN;
@buttonNormalTextN: @pageTextN;
@buttonNormalTextA: #c1c5cb;
@buttonNormalTextD: #414449;
@buttonNormalBorderN: @pageBorderN;
@buttonNormalBorderD: @buttonNormalTextD;
@buttonActiveBgN: @current;
@buttonActiveBgD: @buttonNormalBgD;
@buttonActiveTextN: @formInputTextN;
@buttonActiveTextD: @buttonNormalTextD;
@buttonActiveBorderN: @buttonActiveBgN;
@buttonActiveBorderD: @buttonActiveTextD;

@buttonTestBgN: #343840;
@buttonTestBgH: @buttonTestBgN;
@buttonTestBgA: #2a945b;
@buttonTestBgD: @buttonNormalBgN;
@buttonTestTextN: #29d67f;
@buttonTestTextH: #2ceebc;
@buttonTestTextA: #ffffff;
@buttonTestTextD: #414449;
@buttonTestBorderN: #2a945b;
@buttonTestBorderH: #2cee8c;
@buttonTestBorderA: @buttonTestBgA;
@buttonTestBorderD: @buttonNormalTextD;

@buttonDangerBgN: #343840;
@buttonDangerBgH: @buttonDangerBgN;
@buttonDangerBgA: @errorColor;
@buttonDangerBgD: @buttonNormalBgN;
@buttonDangerTextN: @errorColor;
@buttonDangerTextH: #ff6c6c;
@buttonDangerTextA: #ffffff;
@buttonDangerTextD: @buttonNormalTextD;
@buttonDangerBorderN: @errorColor;
@buttonDangerBorderH: #ff6c6c;
@buttonDangerBorderA: @buttonDangerBgA;
@buttonDangerBorderD: @buttonNormalBorderD;

//tab
@tabBgN: #313439;
@tabBgA: @current;
@tabTextN: @pageTextN;
@tabTextA: @pageTextA;
@tabBorder: #14171b;
@topTabBgN: #1b1e20;
@topTabBgA: #58595e;

//collapse
// @collapseText: @pageTextN;
// @collapseBorder: @pageTextN;
// @collapseBg: @setUpContentBg;

//modal
@modalBg: @setUpContentBg;
@modalBorder: @buttonNormalBorderN;
@modalContentText: @pageTextN;
@modalTitleBg: #4c4f54;
@modalTitleText: @formInputTextN;
@modalTitleBorder: @modalBorder;
@modalFooterBg: @modalBg;
@modalFooterBorder: @dividerColor;

//popover
@popover_TextN: @pageTextN;
@popover_BgN: #2d3238;
@popover_BorderN: @dropMenuBorder;

// LabelPasswordCheck
@passwordCheckBg: #1e1f1e;
@errorColor: #f5222d; // 失败色
@warnColor: #fcac15; // 警告色
@successColor: #52c41a; // 成功色

// alarmout弹出框
@subtitleColor: #ffffff; // 小标题颜色

/**组件类变量 end**/

/**模块类变量 start**/
//插件
@ocxBg: #000000; //插件背景色
@ocxHeaderBg: #414141; //插件工具条背景色
@ocxBorder: #4b515c; //插件Border
//智能规则线
@selRuleLineColor: #ffff00; //选中的颜色
@unSelRuleLineColor: #0000ff; //未选中颜色
@selFilterLineColor: #06c8f9; //目标过滤框选中时颜色
@unSelFilterLineColor: #06c8f9; //目标过滤框未选中时颜色
@pointRuleSelColor: #01ff01; //点测温的点规则的颜色

/*login 登录*/
@loginForgetPwdTextN: #8f939a; //登录忘记密码字体颜色
@loginForgetPwdTextA: @pageTextA; // 登录忘记密码hover字体颜色
@loginIconSvg: @current; // 登录图标颜色

/*导航*/
@navBg: #292b31; //头部导航背景色
@navDivider: #5c5d62; //头部竖直分割线颜色
@navMenuTextN: @pageTextN; // 头部导航栏未激活颜色
@navMenuTextA: @pageTextA; // 头部导航栏激活颜色
@navMenuIconSvgN: #999999; //头部箭头导航图标颜色
@navMenuIconSvgA: @current; //头部箭头导航图标hover颜色
@navMenuBorderN: @dividerColor; // 顶部导航边框色
@navMenuHeight: 38 / @px-unit; //导航整体高度
@navMenuLineHeight: calc(@navMenuHeight - 1px); //导航条lineHeight的高度

/**导航下拉菜单**/
@navDropdownMenuBg: @popover_BgN; //头部下拉框背景色
@navDropdownMenuTextN: @pageTextN; //头部下拉菜单未激活颜色
@navDropdownMenuTextA: @current; //头部下拉菜单激活颜色
// @navDrop

/*MenuView主页菜单*/
@MenuViewBg: transparent; //主页菜单背景色
@MenuViewItemTitleTextN: @pageTextN; //主页菜单标题字体颜色
@MenuViewItemTitleTextA: @pageTextA; //主页菜单标题Hover字体颜色
@MenuViewItemContentTextN: #7c828e; //主页菜单详情字体颜色
@MenuViewItemContentTextA: #a7adb7; //主页菜单详情Hover字体颜色
@MenuViewItemShadowA: @current; //主页菜单选中Shadow
@MenuViewPageSwiperSvgN: #ffffff; //主页底部的箭头
@MenuViewPageSwiperSvgD: #5b5c5f; // 主页底部的箭头 （禁用状态）
@MenuViewPageSwitchSvgN: #5b5c5f; //主页菜单下的非当前页圆圈背景色
@MenuViewPageSwitchSvgA: @homeTaskIconColorA; //主页菜单下的当前页的圆圈背景色
@MenuViewDivideLine: @dividerColor; //主页菜单底部分割线的颜色

/* 预览 */
@preview_Sider_Bg: #393d41; //预览左右背景色
@preview_Left_Bg: @preview_Sider_Bg; //预览左侧背景色
@preview_Right_Bg: @preview_Sider_Bg; //预览右侧背景色
@ocx_Border: #22252c; //预览左右两侧分割线颜色(同时关联回放右侧分割线)
@preview_ChnlTextN: @pageTextN; //预览左侧通道列表文字颜色

/*预览底部*/
@mutilPreview_Bg: @popover_BgN; //多画面预览弹出背景色
@mutilPreview_border: @popover_BorderN; //多画面预览弹出边框颜色

/** 预览-语音对讲 */
@talkAndSound_actBorder: @errorColor; // 边框激活颜色
@talkAndSound_defBorder: @buttonNormalBorderN; // 边框默认颜色
@talkAndSound_actBg: @errorColor; // 背景激活颜色
@talkAndSound_defBg: @buttonNormalBgN; // 背景默认颜色
@talkAndSound_actText: @pageTextA; // 文本激活颜色
@talkAndSound_defText: @pageTextN; // 文本默认颜色
/** 预览-紧急录影 */
@urgentRecord_actBorder: @errorColor; // 边框激活颜色
@urgentRecord_defBorder: @buttonNormalBorderN; // 边框默认颜色
@urgentRecord_actBg: @errorColor; // 背景激活颜色
@urgentRecord_defBg: @buttonNormalBgN; // 背景默认颜色
@urgentRecord_actText: @pageTextA; // 文本激活颜色
@urgentRecord_defText: @pageTextN; // 文本默认颜色
/** 预览-云台 */
@ptz_btnBorder: @buttonNormalBorderN; // 云台按钮边框颜色
@ptz_textColor: @buttonNormalTextA; // 云台按钮字体颜色
@ptz_btnBg: @buttonNormalBgN; // 鼠标滑入背景色

/** 预览-快捷预览 */
@fastPreview_btnActBg: #2a2e33; // 按钮默认色
@fastPreview_border: #54575e; // 边框默认色
@fastPreview_hoverText: @pageTextA; // hover 文本颜色
/** 预览-鱼眼 */
@fisheye_title: #4c4f54; // 鱼眼标题背景色
@fisheye_iconHover: #acb3be; // 鱼眼按钮移入背景色
@fisheye_actColor: #009cff; //鱼眼按钮点击后背景色
/** 预览-报警输出*/
@alramOut_actText: @pageTextA; // 报警输出选中文体颜色
@alramOut_actBorder: #009cff; // 报警输出选中边框颜色
@alramOut_defBorder: #8f939a; // 报警输出选中文体颜色

/* 预览-左侧 */
@preview_ChnlBgA: #2a2e33; //通道悬浮背景色(如果不变色可以使用 inherit)

/* 预览-中间 */
@preview_center_plugin_Bg: #000000; // 视频窗口背景色
@preview_center_bottom_Bg: #4c5054; //画面分割底部工具栏背景色
@preview_center_popover_ColorA: @current; //按钮弹框中选项hover时的颜色
@preview_center_separator_ColorN: @pageTextD; //按钮弹框中竖分割线颜色

/* 预览-右侧 */
@preview_right_tabTitle_Bg: #4c4f54; //右侧tab标题的背景色
@preview_right_ptzStep_Bg: #252628; //右侧云台滑动条部分的背景色
@preview_right_ptzStepMask_ColorN: @pageTextN; //右侧云台滑动条部分的背景色
@preview_right_ptzZoom_Bg: #24252a; //右侧云台矩形按钮的背景色
@preview_right_ptzZoom_border_ColorN: #2d3236; //右侧云台矩形按钮之间的边框的颜色

/* AI预览面板样式 */
@aiPanel_title_bg_color: @preview_right_tabTitle_Bg; //Ai 面板标题的背景色
@aiPanel_box_color: #4c4f54; //AI面板每个事件容器的背景色
@aiPanel_box_bottom-color: #2d3238; //AI面板每个事件容器的底部背景色
@aiPanel_box_bordere_color: #36393d; //AI面板每个事件容器的边框色
@aiPanel_info_bg_color: #393c41; //AI面板显示通道时间信息的背景色
@aiPanel_bg_color: #293132; //AI面板整体的背景色
// @aiPanel_border_selected_color: @current;//AI面板整体的背景色

/*回放时间轴*/
@playbackUplineBgN: #2a2d32; //时间轴上方时间刻度的背景色
@playbackUplineOpacity: 1; //时间轴上方时间刻度的透明度
@playbackLineBgN: #393c41; // 时间轴主体背景色(不含分割线的颜色)
@playbackLineOpacity: 1; // 时间轴主体透明度(不含分割线的颜色)
@playbackCoordinateTextColorN: @pageTextN; //时间轴时间坐标字体颜色
@playbackCoordinateTextOpacity: 1; //时间轴时间坐标字体颜色透明度
@playbackFramePenColorN: #2a2d32; //时间轴分割线颜色
@playbackFramePenOpacity: 1; //时间轴分割线颜色透明度

/**回放勾选的边框与钩子颜色**/
@playbackBorder: #226894;

//设置界面
@setUpBodyBg: @pageBodyBg; //设置界面的主体背景色
@setUpContentBg: @setUpBodyBg; //设置界面的主体背景色
@setUpContentBorder: @dividerColor; // 设置页面的外边框
@setUpDivider: @dividerColor; // 设置页面内容分割线
@CalibrateSub1: #28DA83; //一鱼一球联动颜色
@CalibrateSub2: aqua; //一鱼二球联动颜色
@CalibrateSub3: #F2913E; //一鱼三球联动颜色

/*sideMenu二级导航*/
@SideMenuBg: @formInputDropDownBgN; //设置界面的菜单栏背景色
@SideMenuItemBg: #2a2d32; //二级导航选中色
@SideMenuBorder: @dividerColor; //右侧的border
@SideMenuTextN: @pageTextN; //设置界面的菜单栏字体颜色
@SideMenuTextA: @pageTextA; //设置界面的菜单栏Hover字体颜色
@SideMenuArrowSvgA: #ffffff; //设置界面的子菜单展开的向上箭头
@MenuViewSubItemSvgA: #ffffff; // 设置左侧展开菜单模块图标颜色
@SideMenuItemSelectSvgA: @current; // 设置左侧选中菜单项的> 图标

/**FixButton**/
@BottomBarBg: @formInputDropDownBgN; //设置界面底部按钮栏背景色
@BottomBarBorder: @dividerColor; //上测的border

/**表格单元格状态**/
@successIcon: #20d878;
@errorIcon: #ff514b;

/**spin**/
@SpinTextA: #ffffff;
@SpinBg: #2a2e33;
@SpinTextBg: #000;

/**录像类型颜色定义**/
@timePlanBorderN: #444444;
@general: #39d67f;
@alarm: #ff4f4f;
@detect: #e9d760;
@detectalarm: #f1910a;
@ivs: #39adf6;
@jpg: #3ae8f8;
@pos: #788ae3;
@card: #7debf7;
@smd:#0ebba9;
@faceRecognition:#ff4bdb;

/**录制计划悬浮颜色**/
@planGeneral: #2e784f;
@planDetect: #8a8a3d;
@planAlarm: #822c31;
@planDetectalarm: #906c29;
@planIvs: #3c7ea8;
@planPos: #50598a;
@planSmd:#0ebbaa81;
@planFaceRecognition:#ff4bdb81;

.sdd-checked-general {
    .ant-checkbox-inner {
        background-color: #39d67f !important;
    }
}

.sdd-checked-alarm {
    .ant-checkbox-inner {
        background-color: #ff4f4f !important;
    }
}

.sdd-checked-detect {
    .ant-checkbox-inner {
        background-color: #e9d760 !important;
    }
}

.sdd-checked-detectalarm {
    .ant-checkbox-inner {
        background-color: #f1910a !important;
    }
}

.sdd-checked-ivs {
    .ant-checkbox-inner {
        background-color: #39adf6 !important;
    }
}

.sdd-checked-jpg {
    .ant-checkbox-inner {
        background-color: #3ae8f8 !important;
    }
}

.sdd-checked-pos {
    .ant-checkbox-inner {
        background-color: #788ae3 !important;
    }
}

.sdd-checked-card {
    .ant-checkbox-inner {
        background-color: #7debf7 !important;
    }
}
/**模块类变量 end**/

/**@sdd-web/design**/
@textColorNo5: @pageTextN; // 正文文字颜色

/**三方库的变量需要如下用标签包裹起来**/
/**antd**/
@font-size-base: 14px;
@font-huge: 20px; //超大字体
// @text-color: @pageTextN;
// @primary-color: @current;
/**antd**/
// antd picker
@PickerHeaderBg: #4c4f54; //dataPicker头部背景颜色
@PickerHeaderTextN: @pageTextN; //dataPicker头部字体颜色
@PickerBodyBg: #393d41; //dataPicker主体背景颜色
@PickerBodyTextN: @pageTextN; //dataPicker主体字体颜色
@PickerHeaderButtonN: @pageTextN; //dataPicker头部按钮颜色

.wifi_sign {
    display: inline-block;
    width: 20px;
    height: 20px;
}

/*人脸搜索*展示搜索页面的弹窗组件*/
@ai_search_bg: @pageBodyBg; //人脸搜索数据弹窗整体图片数据背景色
@ai_DataItem_bd: #212529; //人脸搜索数据弹窗单个图片数据边框色
@ai_DataItem_bg: #4b515c; //人脸搜索数据弹窗单个图片数据背景色
@ai_progress_default: #22262c; //人脸搜索数据弹窗单个图片数据进度条背景色
@ai_progress_red: #c45453; //人脸搜索数据弹窗单个图片数据红色进度条颜色
@ai_progress_orange: #d08d42; //人脸搜索数据弹窗单个图片数据黄色进度条颜色
@ai_progress_blue: #3d88bd; //人脸搜索数据弹窗单个图片数据蓝色进度条颜色
@ai_labelCheck_bg: #393d41; //人脸搜索数据弹窗单个图片数据开始时间与checkbox背景色
@ai_rightPanel_bg: @ai_labelCheck_bg; //人脸搜索右侧窗口整体背景色
/*车辆检测变量*/
@vehicle_whiteplate_bgColor: #296331; //白名单框背景颜色
@vehicle_whiteplate_borderColor: #1f812b; //白名单框边框颜色
@vehicle_blackplate_bgColor: #940000; //黑名单框背景颜色
@vehicle_blackplate_borderColor: #e20607; //黑名单框边框颜色

@com_facesmallpics_border: @pageBorderN; //人脸小图集合组件边框
@com_detectsmallPic_bd: @pageBorderN; //人脸库检测小图组件边框
@com_detectsmallPic_select_bd: @current; //人脸库检测小图组件选中边框

@com_faceRegister_edit_bg: #000000; //人脸注册组件人脸图片编辑的背景(背景颜色
@files_upload_box_bg: #1d2025; //人脸图片批量上传：选择图片/选择文件夹box的背景色
@files_upload_box_border_color: #b5b8bd; //人脸图片批量上传：选择图片/选择文件夹box的边框色

/**回放勾选的边框与钩子颜色**/
@playbackBorder: #226894;

.sdd-checked-orange {
    .ant-checkbox-inner {
        border-color: @playbackBorder !important;
        background-color: #f35900 !important;
    }

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

.sdd-checked-yellow {
    .ant-checkbox-inner {
        border-color: @playbackBorder !important;
        background-color: #fdfc00 !important;
    }

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

.sdd-checked-green {
    .ant-checkbox-inner {
        border-color: @playbackBorder !important;
        background-color: #39d67f !important;
    }

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

.sdd-checked-red {
    .ant-checkbox-inner {
        border-color: @playbackBorder !important;
        background-color: #FF4F4F !important;
    }

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

.sdd-checked-blue {
    .ant-checkbox-inner {
        border-color: @playbackBorder !important;
        background-color: #009cfd !important;

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

.report-icon {
    width: 100%;
    font-size: 200px !important;
    margin: auto;
}

/*info中的version页面*/
@achor_infoColor:#ff0000;//info页面是否有新版本字体颜色
@achor_infoHoverColor:#00ff00;//info页面是否有新版本悬浮时字体颜色



.svgFont(@fontSize:30) {
    font-size: if((@fontSize = 0), inherit, @fontSize / @px-unit);
}
/**
Icon组件增加svg 大小设置， 增加hover处理
*@normalColor 默认纯色颜色， 不需要指定为0
*@lineStart 渐变起始颜色
*@lineStop 渐变停止颜色
*/
.svgOut
    (@normalColor:@iconColorN , @lineStart:@iconLinearStartColorN , @lineStop:@iconLinearStopColorN) {
    &:not(.disabled_icons) {
        svg {
            & + {
                path:first-child {
                    fill: if((@normalColor = 0), @iconColorN, @normalColor); // 默认图标颜色
                }
            }
            // 带渐变的默认图标颜色
            & + {
                linearGradient {
                    stop:first-child {
                        stop-color: @lineStart; // 起始渐变色
                    }
                    stop:last-child {
                        stop-color: @lineStop; // 渐变停止色
                    }
                }
            }
        }
    }
}
/* 悬浮后图标样式 */
.svgHover
    (@hoverColor:@current , @lineHoverStart:@iconLinearStartColorA , @lineHoverStop:@iconLinearStopColorA) {
    &:not(.disabled_icons):not(.noHover) {
        &:hover {
            svg {
                & + {
                    path:first-child {
                        fill: if(
                            (@hoverColor = 0),
                            @current,
                            @hoverColor
                        ); // 纯色图标悬浮后的默认颜色
                    }
                }
                /* 悬浮后带渐变效果颜色 */
                linearGradient stop:first-child {
                    stop-color: @lineHoverStart; // 起始渐变色
                }
                linearGradient stop:last-child {
                    stop-color: @lineHoverStop; // 渐变停止色
                }
            }
        }
    }
}
/* 图标禁用颜色 */
.svgDisabled (@disableColor:@iconColorD) {
    svg {
        & + {
            path:first-child {
                fill: @disableColor;
            }
        }
    }
    cursor: not-allowed;
    // opacity: 0.5;
}
/* 设置图标的背景色和边框， 任何一项不需要则指定 0 */
.svgBoder (@borderColor:@iconBorderN , @bgColor:@iconBgN) {
    .bg (@color) when (isColor(@color)) {
        background-color: @color;
    }
    .border (@color) when (isColor(@color)) {
        border: 1 / @px-unit solid @color;
    }
    .bg(@bgColor);
    .border(@borderColor);
}
//设置透明度 (0-1)
.opacity (@opacity) {
    @IEOpacity: @opacity * 100;
    -moz-opacity: @opacity;
    opacity: @opacity;
    filter: alpha(opacity= @IEOpacity);
}

.colorSvg (@svgId, @hoverColor:@current) {
    &:not(.disabled_icons):not(.noHover) {
        &:hover {
            .@{svgId} {
                path {
                    fill: @hoverColor !important;
                }
            }
        }
    }
}
._PasswordCheck_ {
    // UI组件特有的CSS，
    padding-top: inherit; //为了不eslint告警写一个
}



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

.site-calendar-demo-card {
    // width: 290px;
    border: 1px solid @pageBorderN;
    border-radius: 2px;
    .calender-point {
      position: absolute;
      background-color: @pageTextN;
      width: 4px;
      height: 4px;
      border: 1px solid @pageTextN;
      border-radius: 100%;
      left: 46%;
      bottom: -1px;
      transform: translate(0, -50%);
    }
}
.ant-picker-calendar {
  background-color: @preview_center_bottom_Bg !important;
  .ant-picker-content {
    color: @pageTextN !important; 
  }
  .ant-picker-panel {
    border-top: 1px solid @pageBorderN;
    background-color: @formInputBgN !important;
  }
  .ant-picker-cell {
    color: @pageTextD !important;
  }
  .ant-picker-cell-in-view {
    color: @pageTextN !important;
  }
  .ant-picker-content th {
    color: @pageTextN;
  }
  // .ant-picker-calendar-date-content {
  //   position: absolute !important;
  //   top: 12px !important;
  //   left: 6px !important;
  // }
}

._ChannelGroup_ {
    display: flex;
    .ant-space{
        gap:0 !important
    }
    .checkbox {
        display: inline-block;
    }
    .label {
        display: inline-block;
        height: 40/@px-unit;
        line-height: 40/@px-unit;
    }
    .btn-link{
        padding-top: 10/@px-unit;
    }
    .chn_btn {
        color: @buttonNormalTextN;
        background-color: transparent;
        width: 35/@px-unit;
        height: 25/@px-unit;
        padding: 0;
        margin: 5/@px-unit;
        text-align: center;

        &.selected {
            color: @buttonNormalTextA;
            border-color: @formInputBgA;
            &:focus {
                color: @buttonNormalTextA;
                border-color: @formInputBgA;
            }
        }
        &.allbtn {
            width: 40/@px-unit !important;
            font-size: 10/@px-unit;
        }
        &[disabled] {
            opacity: .5;
            background-color: @buttonNormalBgN !important;
            color: @buttonNormalTextN !important;
            border: 1px solid @buttonNormalBorderN !important;

            &:hover,
            &:active,
            &.active{
                opacity: .5;
            }
        
        }
    }
}

._ChannelGroupModal_ {}
.ChannelGroupModal_textlabel{
    user-select: none
}


._ColorCheckGroup_ {
    display: flex;
    flex-direction: row;
    // align-items: center;
    .color_checkbox_all_box {
        height: 28px;
        line-height: 28px;
    }
    // 'normal', 'alarm', 'detect', 'ivs', 'pos', 'card'
    &alarm {
        .ant-checkbox-inner {
            background-color: @alarm !important;
        }
    }
    &general {
        .ant-checkbox-inner {
            background-color: @general !important;
        }
    }
    &detect {
        .ant-checkbox-inner {
            background-color: @detect !important;
        }
    }
    &ivs {
        .ant-checkbox-inner {
            background-color: @ivs !important;
        }
    }
    &pos {
        .ant-checkbox-inner {
            background-color: @pos !important;
        }
    }
    &card {
        .ant-checkbox-inner {
            background-color: @card !important;
        }
    }
}



._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: 36px 0 8px;
    font-weight: bold;
}
._HighDivider_{
    height: 28px;
    margin: 0 0;
}


.cus_icons {
    .svgFont();
    .svgOut();
    .svgHover();
    &.disabled_icons {
        .svgDisabled();
    }
    &.active_icons {
        .svgOut(@current, @iconLinearStartColorA, @iconLinearStopColorA);
    }

    .colorSvg(action_red, @errorColor);
}


@keyframes arcSlideUpIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.8;
    }
}
.iconDropBtn {
    background-color:@navBg;
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: @navMenuLineHeight;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    
    &:hover{
        color:@navMenuTextA;
    }
    .cus_icons{
        margin: 0 5/@px-unit;
    }
    span{
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}
.iconDropMenu {
    /* -webkit-animation-name: arcSlideUpIn;
    animation-name: arcSlideUpIn; */
    min-width: 200/@px-unit !important;
    border: 1px solid @dropMenuBorder;
    pointer-events:auto !important;
    .cus_icons{
        font-size: 30/@px-unit;
        vertical-align:middle;
        margin-right: 15/@px-unit;
    }
    .ant-dropdown-menu-item{
        padding:5/@px-unit 15/@px-unit;
    }
    .iconDropitem_name {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}
.iconDropitem {
    display: flex;
    align-items: center;
}
.centerItem{
    justify-content: center;
}



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


@ipv4InputContainerInputTop:5/@px-unit;
.ipv4-input {
    display: inline-block;
    .ipv4-input-container {
        color: @formInputTextN;
        display: inline-block;
        background-color: transparent;
        border: 1px solid @pageBorderN;
        border-radius: 4/@px-unit;
        padding: 4/@px-unit 0 4/@px-unit 10/@px-unit;
        transition: all 0.3s;
        line-height: 1.5;
        &:hover{
            border-color: @current;
        }
        &:hover.ipv4-input-error{
            border-color: red;
        }
        input {
            background-color: transparent;
            border: none;
            outline: none;
            text-align: center;
            display: inline-block;
            width: calc(25% - @ipv4InputContainerInputTop);
            height: 24px;
        }
        .ipv4-input-dot {
            line-height: 1;
            vertical-align: text-bottom;
        }
        .ipv4-input-item {
            display: inline;
        }
    }
    .ipv4-input-disabled {
        color: @formInputTextD;
        background-color: transparent;
        border-color: @pageBorderN;
        &:hover {
            border-color: @pageBorderN;
        }
    }
    .ipv4-input-error {
        border: 1px solid red;
    }
    .ipv4-input-container-focus{
        border-color: @current;
        outline: none;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2)
    }
    .ipv4-input-container-focus.ipv4-input-error{
        border-color: red;
        outline: none;
        box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.2)
    }
}
@labelIPv4Input-label-light-Color: @pageTextN; //todo 
@labelIPv4Input-label-dark-Color: @pageTextN;
.LabelIPv4Input-label-light{
    line-height: 32px;
    color: @labelIPv4Input-label-light-Color;
}

.LabelIPv4Input-label-dark{
    line-height: 32px;
    color: @labelIPv4Input-label-dark-Color;
}
.LabelIPv4Input-label-Col{
    text-align: right;
    padding-right:10px; 
}
.LabelIPv4Input-swtich{
    line-height: 32px;
}


.label-button {
    max-width: 150/@px-unit;
    min-width: 100/@px-unit;
    .ant-btn {
        padding: 4/@px-unit 4/@px-unit;
    }
}
.labelText-wrapper{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.label-date-picker {
    .ant-picker {
        width: 100%;
    }
}

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



.autoComplete {
    .ant-select-selector {
        &:hover {
            border-color: #009CFF !important;
        }
    }
}

.autoComplete-error {
    .ant-select-selector {
        border: 1px solid @errorColor;
    }
}

.error-text {
    color: @errorColor;
}


.pageLine {
    display: flex;
    float: left;
    margin-top: 10 / @px-unit;
    width: 100%;
    min-width: 600 / @px-unit;
    justify-content: space-between;
    align-items: center;
    .pageLineLeft {
        display: flex;
        .ant-pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            .ant-pagination-prev,
            .ant-pagination-next,
            .ant-pagination-disabled {
                padding: 4 / @px-unit 4 / @px-unit;
                border: 1 / @px-unit solid @iconBorderN;
                width: 32 / @px-unit;
                height: 32 / @px-unit;
                margin: 0 10 / @px-unit;
            }
            .ant-pagination-disabled {
                border: 1 / @px-unit solid @buttonNormalBorderD;
                background-color: @buttonNormalBgN;
                svg {
                    & + {
                        path:first-child {
                            fill: @buttonNormalBorderD; // 纯色图标悬浮后的默认颜色
                        }
                    }
                }
            }
        }
        .anticon-left,
        .ant-pagination-simple-pager,
        .anticon-right {
            color: @pageTextA;
        }
        .ant-pagination-simple-pager input {
            background-color: @pageBodyBg;
            border-color: @pageBorderN;
        }
        .ant-pagination-simple-pager {
            height: 32 / @px-unit;
        }
    }
    .pageLineRight {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}



.popover_list {
    display: flex;
    &_item {
        cursor: pointer;
        &:hover {
            color: @preview_center_popover_ColorA;
        }
        &_active {
            color: @preview_center_popover_ColorA;
        }
    }
    &_separator {
        margin: 0 5 / @px-unit;
        color: @preview_center_separator_ColorN;
    }
}
.popover_icon {
    cursor: pointer;
    &:hover {
        .svgHover(@current);
    }
}



.similarity-progress{
    display: flex;
    height: 100%;
    align-items: center;
    .temp-picData-progress{
        height: 18/@px-unit;
        width: 100%;
        padding: 0/@px-unit 15/@px-unit;
        display: flex;
        .temp-progress-bar-swrap{
            width: 67%;
            display: flex;
            align-items: center;
            padding: 0/@px-unit 5/@px-unit 0/@px-unit 0/@px-unit;
            .temp-progress-bar{
                background-color: @pageBodyBg;
                height: 8/@px-unit;
                width: 100%;
                border-radius: 5/@px-unit;
            }
        }

        .temp-progress-similar{
            display: flex;
            align-items: center;
            width: 33%;
        }
    }
    /* 人脸比对那的 */
    .picData-progress {
        // margin: 0 8/@px-unit 7/@px-unit 5/@px-unit;
        display: flex;
        width: 100%;
        align-items: center;
        background: @ai_progress_default;
        height: 14/@px-unit;
        position: relative;
        color: @pageTextA;

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

        .progress-red {
            background: @ai_progress_red;
        }

        .progress-orange {
            background: @ai_progress_orange;
        }

        .progress-blue {
            background: @ai_progress_blue;
        }

        .progress-label {
            position: absolute;
            right: 0;
            line-height: 14/@px-unit;
            top: 0;
        }
    }
}



.subtitle {
    margin: 0;
    font-weight: bold;
    color: @subtitleColor;
    width: 100%;
}
tr.drop-over-downward td {
    border-bottom: 2px dashed #1890ff !important;
}
tr.drop-over-upward td {
    border-top: 2px dashed #1890ff !important;
}


// 


.virtual-table {
    .ant-table-header {
        th{
            border-right: 1/@px-unit solid;
        }
    }
    .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: @tableOddBgN;
    }
    .ZD-showZebraPattern-odd {
        background-color: @tableEvenBgN;
    }
    .ZD-selected-row {
        background-color: @tableBgA;
    }
    .virtual-table-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        color: @tableTextN;
    }
    .center {
        text-align: center;
    }
}




.homeside-enter,
.homeside-appear {
    opacity: 0;
}
.homeside-enter-active,
.homeside-appear-active {
    opacity: 1;
    transition: opacity 200ms ease-in;
}
.homeside-enter-done {
    opacity: 1;
}
.homeside-exit {
    opacity: 1;
}

.homeside-exit-active {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

.homeside-exit-done {
    opacity: 0;
}
.clearfix {
    &::after {
        content: '.';
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }
}

//导航条头部Headez整体样式
.header-contain {
    height: @navMenuHeight;
    background-color: @navBg;
    color: @navMenuTextN;
    z-index: 1000;
    // min-width: 1280px;
    border-bottom: 1px solid @navMenuBorderN;
    .header-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 0.5rem;
        height: @navMenuLineHeight;
        > span:first-child {
            min-width: 220 / @px-unit;
        }
        .headerDivider {
            height: @navMenuLineHeight;
            top: 0;
            margin: 0 0.5rem;
        }
    }
}

// 桌面除了导航条部分的内容
.homaMain-contain {
    height: calc(100vh - @navMenuHeight);
    // min-width: 1280px;
    position: absolute;
    width: 100%;
    // min-height: 800px;
}

.MainPageTip {
    text-align: center;
}

.PasswordExpired {
    .PasswordExpiredTip {
        display: flex;
        .cus_icons:not(.disabled_icons) svg path:first-child {
            fill: @warningColor;
        }
        .Tip {
            margin-left: 5 / @px-unit;
            margin-top: 5 / @px-unit;
        }
    }
    .PasswordNoTip {
        margin-left: 10 / @px-unit;
    }
}

.HomeQRCode {
    display: flex;
    justify-content: space-around;
    .QRCode {
        width: 212 / @px-unit;
        height: 212 / @px-unit;
        padding: 10 / @px-unit;
        background-color: @formInputTextN;
        margin: 10 / @px-unit 20 / @px-unit;
    }
    .ImageCode {
        .ant-image {
            width: 212 / @px-unit;
            height: 212 / @px-unit;
            margin: 10 / @px-unit 20 / @px-unit;
        }
    }
    .DescribeText {
        text-align: center;
    }
}