@charset "UTF-8";
:root, :root *::after, :root *::before {
  --s-color-text-link: #0492eb;
  --s-color-text-hover: #04b0ff;
  --s-color-text-primary: #212121;
  --s-color-text-secondary: #7d7e80;
  --s-color-text-tertiary: #5e696f;
  --s-color-text-quaternary: #868e93;
  --s-color-text-disabled: #a0a5ad;
  --s-color-text-split: #ebeced;
  --s-color-success: #0dc901;
  --s-color-warning: #ff9500;
  --s-color-warning-hover: rgba(255, 149, 0, 0.7);
  --s-color-error: #ff2954;
  --s-color-mask: rgba(81, 81, 81, 0.3);
  --s-color-background-primary: rgb(255, 255, 255);
  --s-color-background-secondary: #f2f3f5;
  --s-color-background-warning: rgba(255, 149, 0, 0.1);
  --s-color-button-primary: #0492eb;
}

:root, :root *::after, :root *::before {
  --s-panel-map: #FFFFFF;
  --s-background-header: var(--s-color-background-primary);
  --s-color-background-menu: var(--s-color-background-primary);
  --s-background-side: var(--s-color-background-menu);
  --s-color-side: #363E4D;
  --s-background-main: var(--s-color-background-secondary);
  --s-background-panel: var(--s-color-background-primary);
  --s-background-panel-secondary: #F9F9FA;
  --s-color-sidebar-note: rgba(33, 33, 33, 0.5);
  --card-primary: var(--s-color-background-primary);
  --components-bg: #FFFFFF;
  --components-box-shadow: #909090;
  --components-border-primary: #BEC3C5;
  --svg-fill-primary: #AEB4B7;
  --svg-fill-table: #363E4D;
  --svg-fill-opacity: 1;
  --svg-fill-terminal: #9bd3f7;
  --icon-filter: none;
  --tag-port: #f1f2f3;
  --tag-highlight: #e6f4fd;
  --tag-root-bg: #EFEAFF;
  --tag-root-color: #6236FF;
  --tag-admin-bg: #E6F9E5;
  --tag-admin-color: #0DC901;
  --tag-viewer-bg: #E5F4FD;
  --tag-viewer-color: #0492EB;
  --tag-license-bg-pro: rgba(55, 79, 213, 0.1);
  --tag-license-color-pro: #374FD5;
  --tag-license-bg-adv: rgba(4, 146, 235, 0.1);
  --tag-license-color-adv: #0492EB;
  --tag-license-bg-off: #e5e5e5;
  --tag-license-color-off: #A7A9AC;
  --tag-license-bg-on: #CFF4CC;
  --tag-license-color-on: #0DC901;
  --tag-license-bg-notice: #FFEACC;
  --tag-license-color-notice: #FF9500;
  --tag-license-color-unassign: #0492eb;
  --tag-license-bg-unassign: #cee3fe;
  --tag-license-color-unassign: #0492eb;
  --tag-license-bg-unactivated: #cfcdce;
  --tag-license-color-unactivated: #414352;
  --s-color-background-license-trial: rgba(13, 201, 1, 0.1);
  --tag-license-color-on-hover: rgba(13, 201, 1, 0.7);
}

:root, :root *::after, :root *::before {
  --drawer-bg-primary: #F2F3F5;
  --drawer-menu-selected: #F2F3F5;
}

:root, :root *::after, :root *::before {
  --tab-background-active: #ebf6fd;
  --tab-background-primary: #ffffff;
  --tab-color-primary: #868e93;
  --tab-color-active: #0492eb;
}

:root, :root *::after, :root *::before {
  --table-background-primary: #ffffff;
  --table-background-even: #ffffff;
  --table-background-odd: #F8F9FB;
  --table-background-disabled: #ebeced;
  --table-color-primary: #363E4D;
  --table-color-border-top: #e5e5e5;
  --table-color-border-bottom: #e5e5e5;
  --pagination-color-text-primary: #363E4D;
  --pagination-background-disabled: rgba(242, 244, 247, 0.5);
  --pagination-color-text-secondary: #363E4D;
  --pagination-color-text-tertiary: #363E4D;
  --pagination-fill-disabled: #868E93;
  --pagination-icon-left-disabled: url(../img/svg/PaginationLeftDisabled.svg);
  --pagination-icon-right-disabled: url(../img/svg/PaginationRightDisabled.svg);
  --pagination-icon-left-normal: url(../img/svg/PaginationLeft.svg);
  --pagination-icon-right-normal: url(../img/svg/PaginationRight.svg);
  --pagination-icon-left-hover: url(../img/svg/PaginationLeftHover.svg);
  --pagination-icon-right-hover: url(../img/svg/PaginationRightHover.svg);
  --pagination-icon-left-active: url(../img/svg/PaginationLeftActive.svg);
  --pagination-icon-right-active: url(../img/svg/PaginationRightActive.svg);
  --pagination-icon-select-icon-down: url(../img/svg/PaginationIconUp.svg);
  --pagination-icon-select-icon-up: url(../img/svg/PaginationIconUp.svg);
}

:root, :root *::after, :root *::before {
  --tp-logo: url(../img/logo.png);
  --omada-logo: url(../img/svg/Omada.svg);
  --omada-pro-logo: url(../img/svg/OmadaPro.svg) ;
}

:root, :root *::after, :root *::before {
  --scrollbar-background-primary: #AEDCF8;
}

:root, :root *::after, :root *::before {
  --toast-background-primary: #ffffff;
}

:root, :root *::after, :root *::before {
  --msg-background-title: #F2F3F5;
  --msg-background-content: #FFFFFF;
  --msg-color-title: rgba(0, 0, 0, 0.85);
  --msg-color-content: #363E4D;
  --msg-box-shadow: 0 0 8px 0 rgba(54,62,77,0.20), 0 8px 8px 0 rgba(54,62,77,0.10);
  --msg-font-weight: bold;
  --msg-icon-close-normal: url(../img/svg/ModalIconClose.svg);
  --msg-icon-close-hover: url(../img/svg/ModalIconCloseHover.svg);
  --msg-icon-close-active: url(../img/svg/ModalIconCloseActive.svg);
}

:root, :root *::after, :root *::before {
  --select-background-primary: #FFFFFF;
  --select-background-hover: #F2F3F5;
  --select-background-disabled: #efefef;
  --select-color-disabled: #d8d8d8;
  --select-background-hover-map: #ebf7fe;
  --select-box-shadow: 0 0 2px 0 rgba(54,62,77,0.36), 0 2px 2px 0 rgba(54,62,77,0.18);
  --select-border-primary: #BEC3C5;
  --tag-background-primary: rgba(73, 84, 107, 0.08);
  --select-icon-tag: url(../img/svg/TagIconTag.svg);
  --select-icon-search: url(../img/svg/InputIconSearch.svg);
}

:root, :root *::after, :root *::before {
  --input-bg-suffix: rgba(242, 244, 247, 0.5);
  --input-color-suffix: #868E93;
}

:root, :root *::after, :root *::before {
  --checkbox-color-disabled: rgba(33, 33, 33, 0.4);
  --checkbox-background-primary: #ffffff;
}

:root, :root *::after, :root *::before {
  --datepicker-background-primary: #ffffff;
  --datepicker-background-content: #ffffff;
  --datepicker-background-disabled: rgba(242,244,247,0.50);
  --datepicker-color-disabled: #AEB4B7;
  --datepicker-background-hover: #F2F3F5;
  --datepicker-background-click: rgba(4,146,235,0.16);
  --datepicker-background-active: #0492EB;
}

:root, :root *::after, :root *::before {
  --form-background-unit: #ffffff;
  --tips-color: #868E93;
}

:root, :root *::after, :root *::before {
  --icon-hotspot: url(../img/svg/SelectIconHotspotManager.svg);
  --icon-about: url(../img/svg/About.svg);
  --icon-feedback: url(../img/svg/Feedback.svg);
  --icon-tutorial: url(../img/svg/Tutorial.svg);
  --icon-preferences: url(../img/svg/Preferences.svg);
  --icon-rescan: url("../../theme/img/rescan.gif");
  --icon-global-loading: url(../img/loading_apng.png);
  --icon-login-back: url(../img/svg/LoginIconBack.svg);
  --icon-about-hover: url(../img/svg/AboutHover.svg);
  --icon-feedback-hover: url(../img/svg/FeedbackHover.svg);
  --icon-tutorial-hover: url(../img/svg/TutorialHover.svg);
  --icon-preferences-hover: url(../img/svg/PreferencesHover.svg);
  --icon-pattern: url(../img/svg/BackGlobal.svg);
  --icon-select-down: url(../img/svg/SelectIconDownBlack.svg);
  --icon-select-up: url(../img/svg/SelectIconUpBlack.svg);
  --icon-loading: url(../img/adopt-doing.gif) no-repeat;
  --icon-loading-animation: none;
  --icon-click: url(../img/click-normal.png);
  --icon-drag: url(../img/drag-normal.png);
  --icon-menu-dashboard: url("../img/svg/SidebariconDashboardNormal.svg");
  --icon-menu-statistics: url("../img/svg/SidebariconStatisticsNormal.svg");
  --icon-menu-mapEntry: url("../img/svg/SidebariconMapNormal.svg");
  --icon-menu-accessPoints: url("../img/svg/SidebariconDevicesNormal.svg");
  --icon-menu-clients: url("../img/svg/SidebariconClientsNormal.svg");
  --icon-menu-insight: url("../img/svg/SidebariconInsightNormal.svg");
  --icon-menu-log: url("../img/svg/SidebariconLogNormal.svg");
  --icon-menu-report: url("../img/svg/NetworkReportNormal.svg");
  --icon-menu-cloud: url("../img/svg/SidebariconCloudNormal.svg");
  --icon-menu-license: url("../img/svg/LicenseManage.svg");
  --icon-menu-admin: url("../img/svg/Admin.svg");
  --icon-menu-settings: url("../img/svg/SidebariconSettingsNormal.svg");
  --icon-menu-performance: url("../img/svg/Performance.svg");
  --icon-menu-SwitchStats: url("../img/svg/SwitchStats.svg");
  --icon-menu-topology: url("../img/svg/SidebariconTopologyNormal.svg");
  --icon-menu-map: url("../img/svg/deviceMapNormal.svg");
  --icon-menu-internet: url("../img/svg/TabsIconInternet.svg");
  --icon-menu-profile: url("../img/svg/TabsIconProfiles.svg");
  --icon-menu-tools: url("../img/svg/SidebariconNetworkAnalyzeNormal.svg");
  --icon-menu-auditLogs: url("../img/svg/SidebariconAuditLogNormal.svg");
  --icon-menu-health: url("../img/svg/SidebariconHealthNormal.svg");
  --icon-menu-abnormal: url("../img/svg/SidebariconAbnormalNormal.svg");
  --icon-menu-siteNormal: url("../img/svg/SidebariconSiteNormal.svg");
  --icon-switches: url("../img/svg/Switches.svg");
  --icon-device-online: url("../img/svg/dashboard/deviceOnline.svg");
  --icon-speed-test: url("../img/svg/Speedtest Powered.svg");
  --icon-port: url("../img/svg/dashboard/portUtilization.svg");
  --icon-select-add: url("../img/svg/SelectIconAdd.svg");
  --icon-collapse-add: url("../img/svg/CollapseIcon.svg");
  --icon-collapse-minus: url("../img/svg/CollapseIcon-.svg");
  --icon-enable: url("../img/svg/TableIconEnabled.svg");
  --icon-pack-up: url("../img/svg/DrawerIconPackUp.svg");
  --icon-pack-down: url("../img/svg/DrawerIconSpread.svg");
  --icon-drag: url("../img/svg/TableIconDrag.svg");
  --icon-email: url(../img/Email.png);
  --icon-ports-png: url(../img/help/ports.png);
  --icon-switch-off: url(../img/help/switchOff.png);
  --icon-checkbox: url(../img/help/checkbox.png);
  --icon-checkbox-802: url(../img/help/checkbox-802.png);
  --icon-blocked: url(../img/svg/dashboard/fail-blocked.svg);
  --icon-timeout: url(../img/svg/dashboard/fail-timeout.svg);
  --icon-wpa: url(../img/svg/dashboard/fail-wpa.svg);
  --icon-advanced: url(../img/svg/advanced.svg);
  --icon-basic: url(../img/svg/basic.svg);
  --icon-mark-copy: url("../../theme/img/mark_copy.gif");
  --icon-log-clear: url("../img/svg/LogClearNormal.svg") ;
}

:root, :root *::after, :root *::before {
  --process-background: #e5e5e5;
  --port-background-disabled: #dbdbde;
}

:root, :root *::after, :root *::before {
  --tooltips-background-panel: #FFFFFF;
  --tooltips-box-shadow-panel: 0px 4px 40px 0px rgba(20,22,25,1);
  --tooltips-color-panel-primary: #000000;
  --tooltips-color-panel-secondary: rgba(73,84,107,0.90);
  --tooltips-color-panel-tertiary: #363E4D;
  --tooltips-background-primary: #57626E;
  --tooltips-box-shadow-primary: 0px 4px 40px 0px rgba(20,22,25,1);
}

:root, :root *::after, :root *::before {
  --step-color-process: #212121;
  --step-color-wait: #868E93;
  --step-background-wait: #FFF;
}

:root, :root *::after, :root *::before {
  --slider-track: rgba(4,146,235,0.16);
  --slider-primary: #0492EB;
  --slider-track-disabled: #EBECED;
  --slider-primary-disabled: #AFB2B8;
}

:root, :root *::after, :root *::before {
  --transfer-bg-header: rgba(242,244,247,0.50);
  --transfer-bg-primary: #FFFFFF;
  --transfer-color-header: #212121;
}

:root, :root *::after, :root *::before {
  --tree-bg-hover: #e6f7ff;
}

:root, :root *::after, :root *::before {
  --color-picker-bg-primary: #FFFFFF;
  --color-picker-color-primary: #363E4D;
  --color-picker-color-input: #212121;
  --color-picker-box-shadow: 0 0 2px 0 rgba(54, 62, 77, 0.36), 0 2px 2px 0 rgba(54, 62, 77, 0.18);
}

:root, :root *::after, :root *::before {
  --panel-bg-primary: #FFFFFF;
  --panel-color-primary: #363E4D;
  --panel-color-label: #868e93;
  --panel-color-title: #363E4D;
  --panel-color-value: #363E4D;
  --list-border-color: #ccd0d1;
  --charts-xlabel: var(--s-color-text-tertiary);
}

:root, :root *::after, :root *::before {
  --dropdown-bg-primary:#FFFFFF;
  --dropdown-bg-hover:#F2F3F5;
  --dropdown-color-hover:#0492eb;
  --dropdown-color-primary:#363e4d;
}

:root, :root *::after, :root *::before {
  --map-drawer-bg-primary: #f2f3f5;
  --map-drawer-color-primary: #ffffff;
}

:root, :root *::after, :root *::before {
  --map-button-bg-hover: rgba(0, 0, 0, .05);
  --map-split-color: #d8d8d8;
  --map-shadow-color: #363e4d21;
  --map-input-bg-primary: var(--s-color-background-primary);
  --map-border-color: #d8d8d8;
  --map-grid-bg: #f3f5f8;
}

.dark, .dark *::after, .dark *::before {
  --s-color-background-connect: var(--s-color-background-primary) ;
}

:root, :root *::after, :root *::before {
  --tutorial-color-title: #36444B;
  --tutorial-color-note: #8F96A2;
  --tutorial-color-content: #36444B;
  --tutorial-color-tips: #FFFFFF;
  --tutorial-bg-panel: #FFFFFF;
  --tutorial-bg-tips: #0492EB;
  --tutorial-bg-primary: #f2f3f5;
  --tutorial-bg-dots: #C5CAD1;
  --tutorial-color-border: rgba(194,197,201,1);
  --tutorial-box-shadow: 0 4px 10px 0 rgb(154 161 173 / 40%);
  --tutorial-img-box-shadow: 0 4px 10px 0 rgb(154 161 173 / 40%);
  --tutorial-img-global-overview: url(../img/tutorial/overview.jpg);
  --tutorial-img-site-overview: url(../img/tutorial/siteOverview.jpg);
  --tutorial-img-site-map: url(../img/tutorial/siteMap.jpg);
  --tutorial-img-settings: url(../img/tutorial/settings.jpg);
  --tutorial-icon-opacity: 0.3;
}

.dark, .dark *::after, .dark *::before {
  --s-color-text-link: #0492eb;
  --s-color-text-hover: #04b0ff;
  --s-color-text-primary: #ffffff;
  --s-color-text-secondary: rgba(255, 255, 255, 0.8);
  --s-color-text-tertiary: rgba(255, 255, 255, 0.64);
  --s-color-text-quaternary: rgba(255, 255, 255, 0.4);
  --s-color-text-disabled: #a0a5ad;
  --s-color-text-split: rgba(255, 255, 255, 0.24);
  --s-color-success: #0dc901;
  --s-color-warning: #ff9500;
  --s-color-warning-hover: rgba(255, 149, 0, 0.7);
  --s-color-error: #ff2954;
  --s-color-mask: rgba(0,0,0,0.40);
  --s-color-background-primary: #0c0d0f;
  --s-color-background-secondary: #1c2023;
  --s-color-background-warning: rgba(255, 149, 0, 0.1);
}

.dark, .dark *::after, .dark *::before {
  --input-bg-suffix: rgba(255,255,255,0.08);
  --input-color-suffix: rgba(255,255,255,0.64);
}

.dark, .dark *::after, .dark *::before {
  --s-panel-map: #F2F3F5;
  --s-color-sidebar-note: #FFFFFF;
  --s-background-header: var(--s-color-background-primary);
  --s-color-background-menu: var(--s-color-background-secondary);
  --s-background-side: var(--s-color-background-menu);
  --s-color-side: var(--s-color-text-tertiary);
  --s-background-main: var(--s-color-background-primary);
  --s-background-panel: var(--s-color-background-secondary);
  --s-background-panel-secondary: rgba(255, 255, 255, 0.24);
  --card-primary: var(--s-color-background-secondary);
  --components-bg: transparent;
  --components-box-shadow: #0C0D0F;
  --components-border-primary: rgba(255,255,255,0.4);
  --svg-fill-primary: #ffffff;
  --svg-fill-table: #ffffff;
  --svg-fill-opacity: 0.64;
  --svg-fill-terminal: #5c7b8e;
  --icon-filter: invert(1);
  --tag-port: rgba(174, 180, 183, 0.24);
  --tag-highlight: rgba(4,146,235,0.16);
  --tag-root-bg: rgba(98,54,255,0.50);
  --tag-root-color: #FFFFFF;
  --tag-admin-bg: rgba(13,201,1,0.50);
  --tag-admin-color: #FFFFFF;
  --tag-viewer-bg: rgba(4,146,235,0.50);
  --tag-viewer-color: #FFFFFF;
  --tag-license-bg-pro: #374FD5;
  --tag-license-color-pro: #FFFFFF;
  --tag-license-bg-adv: #0492EB;
  --tag-license-color-adv: #FFFFFF;
  --tag-license-bg-off: #6e6e6f;
  --tag-license-color-off: #FFFFFF;
  --tag-license-bg-on: #0DC901;
  --tag-license-color-on: #FFFFFF;
  --tag-license-bg-notice: #FF9500;
  --tag-license-color-notice: #FFFFFF;
  --tag-license-bg-unassign: #0492eb;
  --tag-license-color-unassign: #FFFFFF;
  --tag-license-bg-unactivated: #414352;
  --tag-license-color-unactivated: #FFFFFF;
  --s-color-background-license-trial: rgba(13, 201, 1, 0.1);
  --tag-license-color-on-hover: rgba(13, 201, 1, 0.7);
}

.dark, .dark *::after, .dark *::before {
  --tab-background-active: #0492eb;
  --tab-background-primary: #1c2023;
  --tab-color-primary: var(--s-color-text-tertiary);
  --tab-color-active: #ffffff;
}

.dark, .dark *::after, .dark *::before {
  --drawer-bg-primary: #000000;
  --drawer-menu-selected: #092031;
}

.dark, .dark *::after, .dark *::before {
  --table-background-primary: #1C2023;
  --table-background-even: #1C2023;
  --table-background-odd: #272C30;
  --table-background-disabled: rgba(255, 255, 255, 0.24);
  --table-color-primary: var(--s-color-text-secondary);
  --table-color-border-top: var(--s-color-text-quaternary);
  --table-expand-icon-background-color: #1C2023;
  --table-color-border-bottom: #525558;
  --table-expand-icon-background-color: #1C2023;
  --table-filter-icon-color: #BFBFBF;
  --table-filter-icon-background-color: #1C2023;
  --simple-table-hover-td: #1a2832;
  --pagination-background-primary: rgba(255, 255, 255, 0.24);
  --pagination-background-disabled: rgba(255, 255, 255, 0.24);
  --pagination-color-text-primary: var(--s-color-text-tertiary);
  --pagination-icon-left-disabled: url(../img/svg/PaginationLeftDarkDisabled.svg);
  --pagination-icon-right-disabled: url(../img/svg/PaginationRightDarkDisabled.svg);
  --pagination-icon-left-normal: url(../img/svg/PaginationLeftDark.svg);
  --pagination-icon-right-normal: url(../img/svg/PaginationRightDark.svg);
  --pagination-icon-left-hover: url(../img/svg/PaginationLeftHover.svg);
  --pagination-icon-right-hover: url(../img/svg/PaginationRightHover.svg);
  --pagination-icon-left-active: url(../img/svg/PaginationLeftActive.svg);
  --pagination-icon-right-active: url(../img/svg/PaginationRightActive.svg);
  --pagination-icon-select-icon-down: url(../img/svg/PaginationIconDownDark.svg);
  --pagination-icon-select-icon-up: url(../img/svg/PaginationIconUpDark.svg);
}

.dark, .dark *::after, .dark *::before {
  --tp-logo: url(../img/logoWhite.png);
  --omada-logo: url(../img/OmadaWhite.png);
  --omada-pro-logo: url(../img/svg/OmadaProWhite.svg) ;
}

.dark, .dark *::after, .dark *::before {
  --scrollbar-background-primary: #7A828B;
}

.dark, .dark *::after, .dark *::before {
  --toast-background-primary: #3D454E;
}

.dark, .dark *::after, .dark *::before {
  --msg-background-title: #4B535D;
  --msg-background-content: #3D454E;
  --msg-color-title: #FFFFFF;
  --msg-color-content: rgba(255,255,255,0.64);
  --msg-box-shadow: 0px 4px 40px 0px rgba(20,22,25,1);
  --msg-font-weight: bold;
  --msg-icon-close-normal: url(../img/svg/ModalIconCloseGrey.svg);
  --msg-icon-close-hover: url(../img/svg/ModalIconCloseHover.svg);
  --msg-icon-close-active: url(../img/svg/ModalIconCloseActive.svg);
}

.dark, .dark *::after, .dark *::before {
  --select-background-primary: #3D454E;
  --select-background-hover: rgba(255,255,255,0.24);
  --select-background-disabled: rgba(255,255,255,0.24);
  --select-color-disabled: rgba(255,255,255,0.40);
  --select-background-hover-map: #4c545c;
  --select-box-shadow: 0px 4px 20px 0px rgba(20,22,25,0.64);
  --select-border-primary: #3D454E;
  --tag-background-primary: rgba(255,255,255,0.24);
  --select-icon-tag: url(../img/svg/TagIconTagDark.svg);
  --select-icon-search: url(../img/svg/InputIconSearchDark.svg);
}

.dark, .dark *::after, .dark *::before {
  --checkbox-color-disabled: rgba(255,255,255,0.40);
  --checkbox-background-primary: transparent;
}

.dark, .dark *::after, .dark *::before {
  --datepicker-background-primary: transparent;
  --datepicker-background-content: #3D454E;
  --datepicker-background-disabled: rgba(255,255,255,0.24);
  --datepicker-color-disabled: rgba(255,255,255,0.4);
  --datepicker-background-hover: rgba(255,255,255,0.24);
  --datepicker-background-click: rgba(4,146,235,0.16);
  --datepicker-background-active: #0492EB;
}

.dark, .dark *::after, .dark *::before {
  --form-background-unit: transparent;
  --tips-color: rgba(255, 255, 255, 0.64);
}

.dark, .dark *::after, .dark *::before {
  --icon-hotspot: url(../img/svg/SelectIconHotspotManagerDark.svg);
  --icon-about: url(../img/svg/AboutDark.svg);
  --icon-feedback: url(../img/svg/FeedbackDark.svg);
  --icon-tutorial: url(../img/svg/TutorialDark.svg);
  --icon-preferences: url(../img/svg/PreferencesDark.svg);
  --icon-about-hover: url(../img/svg/AboutDark.svg);
  --icon-feedback-hover: url(../img/svg/FeedbackDark.svg);
  --icon-tutorial-hover: url(../img/svg/TutorialDark.svg);
  --icon-preferences-hover: url(../img/svg/PreferencesDark.svg);
  --icon-rescan: url("../../theme/img/rescan_dark.gif");
  --icon-global-loading: url(../img/loading_apng.png);
  --icon-login-back: url(../img/svg/LoginIconBackDark.svg);
  --icon-click: url(../img/svg/click-normal.svg);
  --icon-drag: url(../img/svg/drag-normal.svg);
  --icon-pattern: url(../img/svg/BackGlobalDark.svg);
  --icon-select-down: url(../img/svg/SelectIconDownWhite.svg);
  --icon-select-up: url(../img/svg/SelectIconUpWhite.svg);
  --icon-loading: url(../img/Loading.png) no-repeat center/80%;
  --icon-loading-animation: loadingCircle linear 4s infinite;
  --icon-menu-dashboard: url("../img/svg/SidebariconDashboardDark.svg");
  --icon-menu-statistics: url("../img/svg/SidebariconStatisticsDark.svg");
  --icon-menu-mapEntry: url("../img/svg/SidebariconMapDark.svg");
  --icon-menu-accessPoints: url("../img/svg/SidebariconDevicesDark.svg");
  --icon-menu-clients: url("../img/svg/SidebariconClientsDark.svg");
  --icon-menu-insight: url("../img/svg/SidebariconInsightDark.svg");
  --icon-menu-log: url("../img/svg/SidebariconLogDark.svg");
  --icon-menu-report: url("../img/svg/NetworkReportDark.svg");
  --icon-menu-cloud: url("../img/svg/SidebariconCloudDark.svg");
  --icon-menu-license: url("../img/svg/LicenseManageDark.svg");
  --icon-menu-admin: url("../img/svg/AdminDark.svg");
  --icon-menu-settings: url("../img/svg/SidebariconSettingsDark.svg");
  --icon-menu-performance: url("../img/svg/PerformanceDark.svg");
  --icon-menu-SwitchStats: url("../img/svg/SwitchStatsDark.svg");
  --icon-menu-topology: url("../img/svg/SidebariconTopologyDark.svg");
  --icon-menu-map: url("../img/svg/deviceMapDark.svg");
  --icon-menu-internet: url("../img/svg/TabsIconInternetDark.svg");
  --icon-menu-profile: url("../img/svg/TabsIconProfilesDark.svg");
  --icon-menu-tools: url("../img/svg/SidebariconNetworkAnalyzeDark.svg");
  --icon-menu-auditLogs: url("../img/svg/SidebariconAuditLogDark.svg");
  --icon-menu-health: url("../img/svg/SidebariconHealthDark.svg");
  --icon-menu-abnormal: url("../img/svg/SidebariconAbnormalDark.svg");
  --icon-menu-siteNormal: url("../img/svg/SidebariconSiteDark.svg");
  --icon-switches: url("../img/svg/SwitchesDark.svg");
  --icon-device-online: url("../img/svg/deviceOnlineDark.svg");
  --icon-speed-test: url("../img/svg/Speedtest Powered White.svg");
  --icon-port: url("../img/svg/dashboard/portUtilizationDark.svg");
  --icon-select-add: url("../img/svg/SelectIconAddDark.svg");
  --icon-collapse-add: url("../img/svg/CollapseIconDark.svg");
  --icon-collapse-minus: url("../img/svg/CollapseIconDarkMinus.svg");
  --icon-enable: url("../img/svg/TableIconEnabledDark.svg");
  --icon-pack-up: url("../img/svg/DrawerIconPackUpDark.svg");
  --icon-pack-down: url("../img/svg/DrawerIconPackDownDark.svg");
  --icon-drag: url("../img/svg/TableIconDragDark.svg");
  --icon-email: url(../img/EmailDark.png);
  --icon-ports-png: url(../img/help/ports-dark.png);
  --icon-switch-off: url(../img/help/switch-off.svg);
  --icon-checkbox: url(../img/help/checkbox.svg);
  --icon-checkbox-802: url(../img/help/checkbox-802.svg);
  --icon-blocked: url(../img/svg/dashboard/fail-blocked-dark.svg);
  --icon-timeout: url(../img/svg/dashboard/fail-timeout-dark.svg);
  --icon-wpa: url(../img/svg/dashboard/fail-wpa-dark.svg);
  --icon-advanced: url(../img/svg/advancedDark.svg);
  --icon-basic: url(../img/svg/basicDark.svg);
  --icon-mark-copy: url("../../theme/img/mark_copy_dark.png");
  --icon-log-clear: url("../img/svg/LogClearDark.svg") ;
}

.dark, .dark *::after, .dark *::before {
  --process-background: rgba(255,255,255,0.24);
  --port-background-disabled: rgba(255,255,255,0.12);
}

.dark, .dark *::after, .dark *::before {
  --tooltips-background-panel:#57626E;
  --tooltips-box-shadow-panel: 0px 4px 40px 0px rgba(20,22,25,1);
  --tooltips-color-panel-primary: #FFFFFF;
  --tooltips-color-panel-secondary: #FFFFFF;
  --tooltips-color-panel-tertiary: #FFFFFF;
  --tooltips-background-primary: #57626E;
  --tooltips-box-shadow-primary: 0px 4px 40px 0px rgba(20,22,25,1);
}

.dark, .dark *::after, .dark *::before {
  --step-color-process: #FFFFFF;
  --step-color-wait: rgba(255,255,255,0.40);
  --step-background-wait: transparent;
}

.dark, .dark *::after, .dark *::before {
  --slider-track: rgba(4,146,235,0.16);
  --slider-primary: #0492EB;
  --slider-track-disabled: rgba(255,255,255,0.4);
  --slider-primary-disabled: #AFB2B8;
}

.dark, .dark *::after, .dark *::before {
  --transfer-bg-header: #4B535D;
  --transfer-bg-primary: #3D454E;
  --transfer-color-header: #FFFFFF;
}

.dark, .dark *::after, .dark *::before {
  --tree-bg-hover: #3D454E;
}

.dark, .dark *::after, .dark *::before {
  --color-picker-bg-primary: #444C54;
  --color-picker-color-primary: rgba(255,255,255,0.80);
  --color-picker-color-input: #FFFFFF;
  --color-picker-box-shadow: 0px 4px 20px 0px rgba(20,22,25,0.64);
}

.dark, .dark *::after, .dark *::before {
  --panel-bg-primary: #57626E;
  --panel-color-primary: #FFFFFF;
  --panel-color-label: rgba(255,255,255,0.64);
  --panel-color-title: #FFFFFF;
  --panel-color-value: #FFFFFF;
  --list-border-color: rgba(255,255,255,0.24);
  --charts-xlabel: var(--s-color-text-tertiary, rgba(255,255,255,0.64));
}

.dark, .dark *::after, .dark *::before {
  --dropdown-bg-primary:#3D454E;
  --dropdown-bg-hover: rgba(255,255,255,0.08);
  --dropdown-color-hover:#FFFFFF;
  --dropdown-color-primary: rgba(255,255,255,0.80);
}

.dark, .dark *::after, .dark *::before {
  --map-drawer-bg-primary: var(--s-color-background-primary, #f2f3f5);
  --map-drawer-color-primary: var(--s-color-background-secondary, #ffffff);
}

.dark, .dark *::after, .dark *::before {
  --map-button-bg-hover: rgba(255, 255, 255, .05);
  --map-split-color: rgba(255, 255, 255, 0.4);
  --map-shadow-color: rgba(12, 13, 15, 0.4);
  --map-input-bg-primary: #3D454E;
  --map-border-color: rgba(255,255,255,0.24);
  --map-grid-bg: rgba(255,255,255,0.08);
}

.dark, .dark *::after, .dark *::before {
  --tag-icon-dark-color: #FFFFFF;
  --master-tag-background-color: rgba(3, 127, 205, 0.16);
  --master-tag-color: #037FCD;
}

.dark, .dark *::after, .dark *::before {
  --s-color-background-connect: var(--s-color-background-secondary) ;
}

.dark, .dark *::after, .dark *::before {
  --tutorial-color-title: #FFFFFF;
  --tutorial-color-note: rgba(255,255,255,0.80);
  --tutorial-color-content: rgba(255,255,255,0.64);
  --tutorial-color-tips: #FFFFFF;
  --tutorial-bg-panel: #0c0d0f;
  --tutorial-bg-tips: #0492EB;
  --tutorial-bg-primary: #0c0d0f;
  --tutorial-bg-dots: rgba(255,255,255,0.24);
  --tutorial-color-border: rgba(194,197,201,0.4);
  --tutorial-box-shadow: none;
  --tutorial-img-box-shadow: 0 4px 10px 0 #1F1F20;
  --tutorial-img-global-overview: url(../img/tutorial/overviewDark.jpg);
  --tutorial-img-site-overview: url(../img/tutorial/siteOverviewDark.jpg);
  --tutorial-img-site-map: url(../img/tutorial/siteMapDark.jpg);
  --tutorial-img-settings: url(../img/tutorial/settingsDark.jpg);
  --tutorial-icon-opacity: 1;
}

.combobox-list-wrap .loading-container {
  display: inline-block;
  text-align: center;
  width: 100%;
}

/* ==========================================================================
   Reboot
   ========================================================================== */
/*
   Remove clear icon and reveal icon in IE and Edge
   ========================================================================== */
::-ms-clear, ::-ms-reveal {
  display: none;
}

/*
   Document
   ========================================================================== */
html {
  box-sizing: border-box;
  line-height: 1.14;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* 
   Body
   ========================================================================== */
@font-face {
  font-family: "TP-LinkAktiv-Medium";
  src: url("../font/TP-LinkAktiv_Md.ttf");
}
body {
  margin: 0;
  font-family: Arial, Geneva, Verdana, sans-serif;
  font-size: 14px;
  color: var(--s-color-text-primary, #212121);
  background-color: var(--s-color-background-primary, #ffffff);
}

/* 
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  color: var(--s-color-text-primary, #212121);
}

h3, h4, p, dl {
  margin-top: 0;
  margin-bottom: 0;
}

ul {
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  list-style-type: none;
}

dd {
  margin-left: 0;
  /* Undo browser default */
}

/* 
   Links
   ========================================================================== */
a {
  color: inherit;
  text-decoration: none;
}

a.link {
  color: #0492eb;
  cursor: pointer;
}
a.link:hover {
  color: #04b0ff;
}

/* 
   Code
   ========================================================================== */
pre {
  margin-top: 0;
  margin-bottom: 0;
}

/* 
   Tables
   ========================================================================== */
table {
  table-layout: fixed;
}

th {
  text-align: left;
  /* Matches default `<td>` alignment */
}

/* 
   Forms
   ========================================================================== */
input {
  font-family: Arial, Geneva, Verdana, sans-serif;
  width: 100%;
  /* Override input's default width */
  padding: 0;
  /* Remove default vertical padding */
  font-size: inherit;
  border: 0;
  /* Input's border is replaced by its container's border */
  background-color: transparent;
  /* Prevent the input overlapping the container */
  caret-color: #0492EB;
}

input:focus {
  outline: none;
}

input:disabled {
  color: #c9c9c9;
  cursor: not-allowed;
}

textarea {
  font-family: Arial, Geneva, Verdana, sans-serif;
  width: 100%;
  height: 100%;
  border: 0;
  resize: none;
  background-color: transparent;
}

textarea:focus {
  outline: 0;
}

/* ==========================================================================
   Icon
   ========================================================================== */
/* 1. Compatible with non-BEM icon */
[class^=icon],
.sprite-ico {
  display: inline-block;
  overflow: hidden;
  text-indent: -999px;
  vertical-align: middle;
  /* vertical align middle in the container */
  background-repeat: no-repeat;
}

.widget-group {
  position: relative;
}

.widget-group__after {
  position: absolute;
  top: 0;
  left: 460px;
}
.widget-group__after .widget-fieldlabel-wrap {
  display: none;
}

.footer:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.widget-container {
  margin-bottom: 12px;
}
.widget-container.error:not(.empty-error) {
  margin-bottom: 0;
}

.widget-fieldlabel-wrap {
  margin-right: 10px;
  width: 200px;
  text-align: left;
  font-weight: normal;
}

.widget-container.tooltip-container,
.widget-container.file-button {
  margin-bottom: 0;
}

.widget-container_inline {
  display: inline-block;
  vertical-align: middle;
}

.widget-container.block {
  padding: 20px 30px;
  background: var(--s-background-panel, #FFFFFF);
  border: 0 solid var(--tab-color-primary, #868E93);
  box-shadow: 2px 2px 5px 0 rgba(54, 62, 77, 0.05);
  border-radius: 3px;
}

.widget-container.auto-wrap-outer {
  display: flex;
}
.widget-container.auto-wrap-outer .widget-wrap-outer {
  flex: 1;
}
.widget-container.auto-wrap-outer .widget-tips {
  display: block;
}
.widget-container.auto-wrap-outer .widget-fieldlabel-wrap {
  display: flex;
  align-items: center;
}

.widget-fieldlabel-wrap {
  display: inline-block;
  position: relative;
  top: 14px;
  transform: translateY(-50%);
}
.widget-fieldlabel-wrap .widget-fieldlabel,
.widget-fieldlabel-wrap .widget-separator {
  line-height: 13px;
}

.widget-wrap-outer {
  display: inline-block;
  vertical-align: top;
}

.sprite-ico {
  cursor: pointer;
}

.button-icon.link .icon {
  background-image: url("../img/File.png");
  width: 16px;
  height: 16px;
}

.accordion-icon {
  width: 16px;
  height: 16px;
  background: var(--icon-collapse-minus, url("../img/svg/CollapseIcon-.svg"));
}

.accordion-header:hover .accordion-icon {
  background: url(../img/svg/CollapseIcon-Hover.svg);
}

.accordion-header:active .accordion-icon {
  background: url(../img/svg/CollapseIcon-Active.svg);
}

.accordion-item.collapsed .accordion-icon {
  background: var(--icon-collapse-add, url("../img/svg/CollapseIcon.svg"));
}

.accordion-item.collapsed .accordion-header:hover .accordion-icon {
  background: url(../img/svg/CollapseIconAndHover.svg);
}

.accordion-item.collapsed .accordion-header:active .accordion-icon {
  background: url(../img/svg/CollapseIconAndActive.svg);
}

.accordion-container.accordion .accordion-icon {
  width: 24px;
  height: 24px;
  background: var(--icon-pack-up, url(../img/svg/DrawerIconPackUp.svg));
}
.accordion-container.accordion .accordion-header:hover .accordion-icon {
  background: url(../img/svg/DrawerIconPackUpHover.svg);
}
.accordion-container.accordion .accordion-header:active .accordion-icon {
  background: url(../img/svg/DrawerIconPackUpActive.svg);
}
.accordion-container.accordion .accordion-item.collapsed .accordion-icon {
  background: var(--icon-pack-down, url(../img/svg/DrawerIconSpread.svg));
}
.accordion-container.accordion .accordion-item.collapsed .accordion-header:hover .accordion-icon {
  background: url(../img/svg/DrawerIconSpreadHover.svg);
}
.accordion-container.accordion .accordion-item.collapsed .accordion-header:active .accordion-icon {
  background: url(../img/svg/DrawerIconSpreadActive.svg);
}

.tooltip-container .tooltip-icon {
  width: 18px;
  height: 18px;
  background: url("../img/svg/MessageIconInfo.svg") no-repeat;
  cursor: pointer;
}

.vlan-interface-manage-icon {
  display: inline-block;
  margin-left: 8px;
  width: 20px;
  height: 20px;
  background-image: url("../img/svg/Management-01.svg");
  vertical-align: middle;
}

.combobox-switch .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/SelectIconDown.svg) no-repeat;
}

.combobox-switch.arrow-up .icon {
  background: url(../img/svg/SelectIconUp.svg) no-repeat;
}

.combobox-text .multiple-item .close {
  width: 14px;
  height: 14px;
  background: url(../img/svg/SelectIconClose.svg) no-repeat;
}

.combobox-blue .combobox-switch .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/SidebariconDownBlue.svg) no-repeat;
}
.combobox-blue .combobox-switch.arrow-up .icon {
  background: url(../img/svg/SidebariconUpBlue.svg) no-repeat;
}

.search-switch .icon {
  width: 24px;
  height: 24px;
  background: var(--select-icon-search, url(../img/svg/InputIconSearch.svg)) no-repeat;
}
.search-switch.opt .icon {
  width: 20px;
  height: 20px;
  background: var(--select-icon-tag, url(../img/svg/TagIconTag.svg)) no-repeat;
}
.search-switch.clear .icon {
  width: 20px;
  height: 20px;
  background: url(../img/svg/DatePickerClose.svg) no-repeat;
}

.icon-user .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/LoginIconUsername.svg);
}

.icon-pwd .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/LoginIconPassword.svg);
}

.icon-back .icon {
  width: 24px;
  height: 24px;
  background: url(../img/iconsX.png) no-repeat -664px -78px;
}

.icon-email .icon {
  width: 24px;
  height: 22px;
  background: url(../img/svg/LoginIconEmail.svg);
}

.allow-visible-btn {
  width: 24px;
  height: 24px;
  background: url(../img/svg/InputIconInvisible.svg) no-repeat;
}

.allow-visible-btn.visible {
  background: url(../img/svg/InputIconVisible.svg) no-repeat;
}

.grid-content-tr.empty .content:before {
  content: "";
  height: 18px;
  width: 18px;
  background: url(../img/svg/MessageIconInfo.svg) no-repeat;
}

.grid-panel-tbar-container .btn-add.hidden {
  display: none;
}
.grid-panel-tbar-container .btn-add .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/OthersIconAdd.svg) no-repeat;
}
.grid-panel-tbar-container .btn-add:hover .icon, .grid-panel-tbar-container .btn-add.disabled .icon {
  background: url(../img/svg/OthersIconAddHover.svg) no-repeat;
}

.grid-panel-tbar-container .batch-add.hidden,
.operation-btn.batch-add-btn.hidden {
  display: none;
}
.grid-panel-tbar-container .batch-add .icon,
.operation-btn.batch-add-btn .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconBatchAdd.svg) no-repeat;
}
.grid-panel-tbar-container .batch-add:hover .icon, .grid-panel-tbar-container .batch-add.disabled .icon,
.operation-btn.batch-add-btn:hover .icon,
.operation-btn.batch-add-btn.disabled .icon {
  background: url(../img/svg/TableIconBatchAddHover.svg) no-repeat;
}

.grid-panel-tbar-container .btn-delete .icon,
.btn-delete .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconDelete.svg) no-repeat;
}

.btn-invite .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconInviteNormal.svg) no-repeat;
}

.btn-invite:hover .icon {
  background: url(../img/svg/TableIconInviteHover.svg) no-repeat;
}

.grid-panel-tbar-container .btn-delete:hover .icon,
.btn-delete:hover .icon {
  background: url(../img/svg/TableIconDeleteHover.svg);
}

.btn-delete.disabled .icon, .btn-delete.disabled:hover .icon {
  background: url(../img/svg/TableIconDeleteDisabled.svg);
  cursor: not-allowed;
}

.batch-delete .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconDelete.svg) no-repeat;
}

.batch-delete:hover .icon {
  background: url(../img/svg/TableIconDeleteHover.svg);
}

.enable-icon {
  width: 24px;
  height: 24px;
  background: var(--icon-enable, url(../img/svg/TableIconEnabled.svg)) no-repeat;
}

.btn-add .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/ButtonIconAdd.svg) no-repeat;
}

.tab-add .icon {
  width: 22px;
  height: 22px;
  background: url(../img/svg/ButtonIconAdd.svg) no-repeat;
}

.tab-add:hover .icon {
  background: url(../img/svg/ButtonIconAddHover.svg) no-repeat;
}

.btn-add-black {
  width: 22px;
  height: 22px;
  background: var(--icon-select-add, url(../img/svg/ButtonIconAdd.svg)) no-repeat;
}

.btn-refresh .icon {
  width: 20px;
  height: 20px;
  background: url(../img/svg/TableIconRefresh.svg) no-repeat;
}
.btn-refresh:hover .icon, .btn-refresh.disabled .icon {
  background: url(../img/svg/TableIconRefreshHover.svg) no-repeat;
}

.btn-clear .icon {
  width: 20px;
  height: 20px;
  background: url(../img/svg/TableIconClear.svg) no-repeat;
}
.btn-clear:hover .icon, .btn-clear.disabled .icon {
  background: url(../img/svg/TableIconClearHover.svg) no-repeat;
}

.button-button .btn-import .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/ButtonIconUpload.svg) no-repeat;
}
.button-button:hover .btn-import .icon {
  background: url(../img/svg/ButtonIconUploadHover.svg) no-repeat;
}
.button-button.disabled .btn-import .icon {
  background: url(../img/svg/ButtonIconUploadDisabled.svg) no-repeat;
}

.button-button .upgrade-icon .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/ButtonIconUpgrade.svg) no-repeat;
}
.button-button.disabled .upgrade-icon .icon {
  background: url(../img/svg/ButtonIconUpgradeDisabled.svg) no-repeat;
}
.button-button.loading .upgrade-icon .icon {
  background: url(../img/svg/ButtonIconUpgradeDisabled.svg) no-repeat;
}

#wlan-group-add-btn:hover .btn-add-black, #add-radius-profile-btn:hover .btn-add-black,
#create-new-schedule:hover .btn-add-black, #create-new-group:hover .btn-add-black,
.device-add-tag:hover .btn-add-black, #poe-add-schedule:hover .btn-add-black {
  background: url(../img/svg/ButtonIconAdd.svg) no-repeat;
}

.button-container:hover .btn-add .icon, .btn-add:hover .icon {
  background: url(../img/svg/ButtonIconAddHover.svg) no-repeat;
}

.btn-add-circle .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/OthersIconAdd.svg) no-repeat;
}
.btn-add-circle:hover .icon, .btn-add-circle.disabled .icon {
  background: url(../img/svg/OthersIconAddHover.svg) no-repeat;
}

.button-button:hover .btn-add-circle .icon {
  background: url(../img/svg/OthersIconAddHover.svg) no-repeat;
}

.grid-panel-tbar-container .btn-rescan .icon,
.btn-rescan .icon {
  width: 24px;
  height: 24px;
  background: url(../img/iconsX.png) no-repeat -583px -409px;
}

.grid-content-tr .grid-content-td-drag-column .icon {
  height: 16px;
  width: 16px;
  background: var(--icon-drag, url(../img/svg/TableIconDrag.svg)) no-repeat;
}
.grid-content-tr .grid-content-td-drag-column .icon:hover {
  background: url(../img/svg/TableIconDragHover.svg) no-repeat;
}
.grid-content-tr .grid-content-td-drag-column .icon:active {
  background: url(../img/svg/TableIconDragActive.svg) no-repeat;
}
.grid-content-tr.disabled .grid-content-td-drag-column .icon {
  background: url(../img/svg/TableIconDragDisabled.svg) no-repeat;
}
.grid-content-tr.dragable .grid-content-td-drag-column .icon {
  background: url(../img/svg/TableIconDragActive.svg) no-repeat;
}

.grid-panel-tbar-container .btn-rescan:hover .icon,
.btn-rescan:hover .icon {
  background-position: -549px -409px;
}

.grid-content-btn-delete, .action-delete {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconDelete.svg) no-repeat;
}

.grid-header.filter-column .filter-icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/NavigationBarIconMore.svg) no-repeat;
}
.grid-header.filter-column .filter-icon:hover {
  background: url(../img/svg/NavigationBarIconMoreHover.svg) no-repeat;
}
.grid-header.filter-column .filter-icon:active, .grid-header.filter-column .filter-icon.active {
  background: url(../img/svg/NavigationBarIconMoreActive.svg) no-repeat;
}

.grid-header .sort-asc {
  width: 8px;
  height: 5px;
  background: url(../img/svg/ListIconSortUp.svg) no-repeat;
}

.grid-header .sort-desc {
  width: 8px;
  height: 5px;
  background: url(../img/svg/ListIconSortDown.svg) no-repeat;
}

.grid-header.asc .sort-asc {
  background: url(../img/svg/ListIconSortUpActive.svg) no-repeat;
}

.grid-header.desc .sort-desc {
  background: url(../img/svg/ListIconSortDownActive.svg) no-repeat;
}

.search-bar-container .search-icon {
  width: 24px;
  height: 24px;
  background: var(--select-icon-search, url(../img/svg/InputIconSearch.svg)) no-repeat;
}

.search-bar-container .search-icon:hover {
  background: url(../img/svg/InputIconSearchHover.svg) no-repeat;
}

.search-bar-container .search-icon:active {
  background: url(../img/svg/InputIconSearchActive.svg) no-repeat;
}

.setup-data-empty .icon {
  width: 30px;
  height: 30px;
  background: url(../img/iconsX.png) no-repeat -241px -389px;
}

@keyframes loadingCircle {
  0% {
    transform: scale(0.6, 0.6) rotate(0deg);
  }
  100% {
    transform: scale(0.6, 0.6) rotate(360deg);
  }
}
.widget-container.grid-container.loading .grid-content-tr.empty td .icon {
  width: 24px;
  height: 24px;
  background: var(--icon-loading);
  animation: var(--icon-loading-animation);
}

.panel-header-btn-collapse {
  height: 24px;
  width: 24px;
  background: url(../img/iconsX.png) no-repeat -393px -8px;
}

.panel-header-btn-collapse.collapsed {
  background: url(../img/iconsX.png) no-repeat -410px -8px;
}

.msg-close {
  height: 16px;
  width: 16px;
  background: var(--msg-icon-close-normal, url(../img/svg/ModalIconClose.svg)) no-repeat;
}

.msg-close:hover {
  background: var(--msg-icon-close-hover, url(../img/svg/ModalIconCloseHover.svg)) no-repeat;
}

.msg-close:active {
  background: var(--msg-icon-close-active, url(../img/svg/ModalIconCloseActive.svg)) no-repeat;
}

.msg-container.success .msg-title-container:before {
  background: url(../img/svg/MessageIconSuccess.svg) no-repeat;
}

.msg-container.fail .msg-title-container:before {
  background: url(../img/svg/MessageIconFailed.svg) no-repeat;
}

.msg-container.alert .msg-title-container:before {
  background: url(../img/svg/MessageIconWarning.svg) no-repeat;
}

.msg-container.info .msg-title-container:before {
  background: url(../img/svg/MessageIconInfo.svg) no-repeat;
}

.msg-container.notify .msg-wrap::before {
  background-image: url(../img/Upgrade.png);
}

.toast-item.success .icon {
  height: 24px;
  width: 24px;
  background: url(../img/svg/MessageIconSuccess.svg) no-repeat;
}

.toast-item.fail .icon {
  height: 24px;
  width: 24px;
  background: url(../img/svg/MessageIconFailed.svg) no-repeat;
}

.toast-item.warning .icon {
  height: 24px;
  width: 24px;
  background: url(../img/svg/MessageIconWarning.svg) no-repeat;
}

.toast-item.info .icon {
  height: 24px;
  width: 24px;
  background: url(../img/svg/MessageIconInfo.svg) no-repeat;
}

.toast-item.visible .close {
  height: 16px;
  width: 16px;
  background: var(--msg-icon-close-normal, url(../img/svg/ModalIconClose.svg)) no-repeat;
}

.alert .icon-alert {
  height: 20px;
  width: 20px;
  background: url(../img/iconsX.png) no-repeat -722px -38px;
}

.alert .icon-close {
  height: 18px;
  width: 18px;
  background: url(../img/iconsX.png) no-repeat -42px -40px;
}

.icon-signal.level-0,
.icon-signal.level-1,
.icon-signal.level-2,
.icon-signal.level-3,
.icon-signal.level-4,
.icon-signal.level-5 {
  width: 30px;
  height: 25px;
}

.icon-signal.level-0 {
  background: url(../img/iconsX.png) no-repeat -254px -169px;
}

.icon-signal.level-1 {
  background: url(../img/iconsX.png) no-repeat -295px -169px;
}

.icon-signal.level-2 {
  background: url(../img/iconsX.png) no-repeat -332px -169px;
}

.icon-signal.level-3 {
  background: url(../img/iconsX.png) no-repeat -370px -169px;
}

.icon-signal.level-4 {
  background: url(../img/iconsX.png) no-repeat -409px -169px;
}

.icon-signal.level-5 {
  background: url(../img/iconsX.png) no-repeat -450px -169px;
}

.datepicker-display-container .date.icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/DatePickerDate.svg) no-repeat;
}

.datepicker-display-container .date.clear {
  background: url(../img/svg/DatePickerClose.svg) no-repeat;
}

.calendar-container .first-btn {
  background: url(../img/svg/DatePickerYear-Left.svg) no-repeat;
}
.calendar-container .first-btn:hover {
  background: url(../img/svg/DatePickerYear-LeftHover.svg) no-repeat;
}
.calendar-container .first-btn:active {
  background: url(../img/svg/DatePickerYear-LeftActive.svg) no-repeat;
}

.calendar-container .prev-btn {
  background: url(../img/svg/DatePickerLeft.svg) no-repeat;
}
.calendar-container .prev-btn:hover {
  background: url(../img/svg/DatePickerLeftHover.svg) no-repeat;
}
.calendar-container .prev-btn:active {
  background: url(../img/svg/DatePickerLeftActive.svg) no-repeat;
}

.calendar-container .next-btn {
  background: url(../img/svg/DatePickerRight.svg) no-repeat;
}
.calendar-container .next-btn:hover {
  background: url(../img/svg/DatePickerRightHover.svg) no-repeat;
}
.calendar-container .next-btn:active {
  background: url(../img/svg/DatePickerRightActive.svg) no-repeat;
}

.calendar-container .last-btn {
  background: url(../img/svg/DatePickerYear-Right.svg) no-repeat;
}
.calendar-container .last-btn:hover {
  background: url(../img/svg/DatePickerYear-RightHover.svg) no-repeat;
}
.calendar-container .last-btn:active {
  background: url(../img/svg/DatePickerYear-RightActive.svg) no-repeat;
}

.time-display-container .time.icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TimePickerIconTime.svg) no-repeat;
}

.time-display-container .time.clear {
  background: url(../img/svg/DatePickerClose.svg) no-repeat;
}

.devicesList-item-content .logo-container .icon {
  width: 15px;
  height: 15px;
  background: url(../img/iconsX.png) no-repeat -498px -173px;
}

.devicesList-item-content:hover .logo-container .icon {
  background-position: -525px -173px;
}

.button-button .file-icon .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/ButtonIconUpload.svg) no-repeat;
}
.button-button:hover .file-icon .icon {
  background: url(../img/svg/ButtonIconUploadHover.svg) no-repeat;
}

.file-text-wrap-before-icon {
  width: 16px;
  height: 16px;
  background: url(../img/svg/UploadIconFile.svg) no-repeat;
}

.file-container .text-list-wrap.failed .file-text-wrap-before-icon {
  width: 16px;
  height: 16px;
  background: url(../img/svg/UploadIconFileFailed.svg) no-repeat;
}

.file-text-wrap-after-icon {
  width: 20px;
  height: 20px;
  background: url(../img/svg/UploadIconClose.svg) no-repeat;
}

.note:before {
  background: url(../img/svg/MessageIconInfo.svg) no-repeat;
}

.note.warning-note:before {
  background: url(../img/svg/MessageIconWarning.svg) no-repeat;
}

.displaylabel-item:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  vertical-align: middle;
  background: url(../img/svg/TableIconCheckNormal.svg) no-repeat;
}

.forget-all .icon {
  width: 18px;
  height: 18px;
  background: url(../img/iconsX.png) no-repeat -721px -11px;
}

.forget-all:hover .icon {
  background-position: -696px -11px;
}

.btn-archiveAll .icon {
  width: 14px;
  height: 17px;
  background: url(../img/mark-read-normal.png) no-repeat;
}
.btn-archiveAll:hover .icon {
  background: url(../img/mark-read-hover.png) no-repeat;
}

.btn-create .icon {
  width: 23px;
  height: 17px;
  background: url(../img/iconsX.png) no-repeat -568px -239px;
}
.btn-create:hover .icon {
  background: url(../img/iconsX.png) no-repeat -280px -425px;
}

.btn-print .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconPrintNormal.svg) no-repeat;
}
.btn-print:hover .icon {
  background: url(../img/svg/TableIconPrintHover.svg) no-repeat;
}
.btn-print.disabled .icon {
  background: url(../img/svg/TableIconPrintDisabled.svg) no-repeat;
}

.btn-printAll .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconPrintNormal.svg) no-repeat;
}
.btn-printAll:hover .icon {
  background: url(../img/svg/TableIconPrintHover.svg) no-repeat;
}
.btn-printAll.disabled .icon {
  background: url(../img/svg/TableIconPrintDisabled.svg) no-repeat;
}

.btn-del .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconDeleteTheme.svg) no-repeat;
}
.btn-del:hover .icon {
  background: url(../img/svg/TableIconDeleteThemeHover.svg) no-repeat;
}
.btn-del.disabled .icon {
  background: url(../img/svg/TableIconDeleteThemeDisabled.svg) no-repeat;
}

.btn-adopt .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconAdopt.svg) no-repeat;
}
.btn-adopt:hover .icon, .btn-adopt .icon:hover {
  background: url(../img/svg/TableIconAdoptHover.svg) no-repeat;
}

.button-container.back-btn .btn-back .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/LoginIconBackNormal.svg) no-repeat;
}
.button-container.back-btn:hover .btn-back .icon {
  background: url(../img/svg/LoginIconBackHover.svg) no-repeat;
}

.combination-panel-container .batch-edit {
  width: 24px;
  height: 24px;
  background: url(../img/svg/OtherIconBatchEdit.svg) no-repeat;
}
.combination-panel-container .batch-edit:hover {
  background: url(../img/svg/OtherIconBatchEditHover.svg) no-repeat;
}
.combination-panel-container.focus .batch-edit {
  background: url(../img/svg/OtherIconBatchEditActive.svg) no-repeat;
}

.batch-edit-icon.icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/OtherIconBatchEdit.svg) no-repeat;
}
.batch-edit-icon.icon:hover {
  background: url(../img/svg/OtherIconBatchEditHover.svg) no-repeat;
}
.batch-edit-icon.icon:active {
  background: url(../img/svg/OtherIconBatchEditActive.svg) no-repeat;
}

.drawer-icon.icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/OtherIconDrawer.svg) no-repeat;
}
.drawer-icon.icon:hover {
  background: url(../img/svg/OtherIconDrawerHover.svg) no-repeat;
}
.drawer-icon.icon:active {
  background: url(../img/svg/OtherIconDrawerActive.svg) no-repeat;
}

.help-icon.icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/Help.svg) no-repeat;
}
.help-icon.icon:hover {
  background: url(../img/svg/HelpHover.svg) no-repeat;
}
.help-icon.icon:active {
  background: url(../img/svg/HelpHover.svg) no-repeat;
}

.exit-icon.icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/ExistBatchEdit.svg) no-repeat;
}
.exit-icon.icon:hover {
  background: url(../img/svg/ExistBatchEditHover.svg) no-repeat;
}
.exit-icon.icon:active {
  background: url(../img/svg/ExistBatchEdit.svg) no-repeat;
}

.btn-imp .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconImport.svg) no-repeat;
}
.btn-imp:hover .icon {
  background: url(../img/svg/TableIconImportHover.svg) no-repeat;
}
.btn-imp.disabled .icon {
  background: url(../img/svg/TableIconImportHover.svg) no-repeat;
}

.btn-exp .icon {
  width: 20px;
  height: 20px;
  background: url(../img/iconsX.png) no-repeat -311px -127px;
}
.btn-exp:hover .icon {
  background: url(../img/iconsX.png) no-repeat -279px -127px;
}
.btn-exp.disabled .icon {
  background: url(../img/iconsX.png) no-repeat -279px -127px;
}

.fake-add .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/OthersIconAdd.svg) no-repeat;
}
.fake-add:hover .icon {
  background: url(../img/svg/OthersIconAddHover.svg) no-repeat;
}
.fake-add.disabled .icon {
  background: url(../img/svg/OthersIconAddHover.svg) no-repeat;
}

.status-wrap .sprite-ico {
  width: 20px;
  height: 20px;
}
.status-wrap.normal .wireless-icon {
  background: url(../img/svg/StatusWirelessNormal.svg) no-repeat;
}
.status-wrap.normal .migrate-icon {
  background: url(../img/svg/StatusMigratingNormal.svg) no-repeat;
}
.status-wrap.done .wireless-icon {
  background: url(../img/svg/StatusWirelessDone.svg) no-repeat;
}
.status-wrap.done .migrate-icon {
  background: url(../img/svg/StatusMigratingDone.svg) no-repeat;
}
.status-wrap.fail .wireless-icon {
  background: url(../img/svg/StatusWirelessFail.svg) no-repeat;
}
.status-wrap.fail .migrate-icon {
  background: url(../img/svg/StatusMigratingFail.svg) no-repeat;
}
.status-wrap.warn .wireless-icon {
  background: url(../img/svg/StatusWirelessManaged.svg) no-repeat;
}
.status-wrap.warn .migrate-icon {
  background: url(../img/svg/StatusMigratingManaged.svg) no-repeat;
}

.version-wrap .upgrade-icon {
  width: 20px;
  height: 20px;
  background: url(../img/svg/StatusUpgrade.svg) no-repeat;
}

.action-detail {
  width: 18px;
  height: 18px;
  background: url(../img/info.png) no-repeat;
}
.action-detail:hover {
  background: url(../img/info-hover.png) no-repeat;
}

.action-attention {
  width: 18px;
  height: 18px;
  background: url(../img/attention-normal.png) no-repeat;
}
.action-attention:hover {
  background: url(../img/attention-normal.png) no-repeat;
}

.action-unlocate {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconStopLocating.svg) no-repeat;
}
.action-unlocate:hover {
  background: url(../img/svg/TableIconStopLocatingHover.svg) no-repeat;
}

.action-locate {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconLocate.svg) no-repeat;
}
.action-locate:hover {
  background: url(../img/svg/TableIconLocateHover.svg) no-repeat;
}

.action-reboot {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconReboot.svg) no-repeat;
}
.action-reboot:hover {
  background: url(../img/svg/TableIconRebootHover.svg) no-repeat;
}
.action-reboot.disabled {
  background: url(../img/svg/TableIconRebootDisabled.svg) no-repeat;
}

.action-restart {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconReboot.svg) no-repeat;
}
.action-restart:hover {
  background: url(../img/svg/TableIconRebootHover.svg) no-repeat;
}

.action-edit {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconEdit.svg) no-repeat;
}
.action-edit:hover {
  background: url(../img/svg/TableIconEditHover.svg) no-repeat;
}

.action-disconnect {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconDisconnect.svg) no-repeat;
}
.action-disconnect:hover {
  background: url(../img/svg/TableIconDisconnectHover.svg) no-repeat;
}

.action-unbind {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../img/svg/unBindToken.svg) no-repeat;
}
.action-unbind:hover {
  background: url(../img/svg/unBindTokenHover.svg) no-repeat;
}

.action-upgrade {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconUpgrade.svg) no-repeat;
}
.action-upgrade:hover {
  background: url(../img/svg/TableIconUpgradeHover.svg) no-repeat;
}
.action-upgrade.disabled {
  background: url(../img/svg/TableIconUpgradeDisabled.svg) no-repeat;
}

.action-move {
  width: 17px;
  height: 17px;
  background: url(../img/iconsX.png) no-repeat -417px -341px;
}
.action-move:hover {
  background: url(../img/iconsX.png) no-repeat -455px -341px;
}

#device-loading-msg .loading-container .icon {
  width: 72px;
  height: 72px;
  background: var(--icon-global-loading, url(../img/loading_apng.png));
}

.combobox-list-wrap .loading-container .icon {
  width: 20px;
  height: 20px;
  background: var(--icon-loading, url(../img/adopt-doing.gif) no-repeat);
  animation: var(--icon-loading-animation, none);
}

#device-summary-msg .summary-title .icon {
  width: 25px;
  height: 25px;
}
#device-summary-msg .summary-title .icon.success {
  background: url(../img/svg/MessageIconSuccess.svg);
}
#device-summary-msg .summary-title .icon.failed {
  background: url(../img/svg/MessageIconFailed.svg);
}
#device-summary-msg .summary-title .icon.loading {
  animation: circle 1s infinite linear;
  -webkit-animation: circle 1s infinite linear;
  background-image: url("../img/svg/Loading.svg");
}
#device-summary-msg .sum-status {
  width: 20px;
  height: 20px;
}
#device-summary-msg .sum-status.success {
  background: url(../img/svg/MessageIconSuccess.svg);
}
#device-summary-msg .sum-status.fail {
  background: url(../img/svg/MessageIconFailed.svg);
}

.linkAp-icon.doing {
  width: 20px;
  height: 20px;
  background: var(--icon-loading, url(../img/adopt-doing.gif) no-repeat);
  animation: var(--icon-loading-animation, none);
}

.icon-set-priority {
  width: 24px;
  height: 24px;
  background-image: url("../img/svg/Priority.svg");
  cursor: pointer;
}
.icon-set-priority:hover {
  background-image: url("../img/svg/Priority-hover.svg");
}

.icon-priority {
  margin-left: -1px;
  width: 12px;
  height: 12px;
  background-image: url("../img/svg/star.svg");
}
.icon-priority.disabled {
  background-image: url("../img/svg/starGrey.svg");
}
.icon-priority.failed {
  background-image: url("../img/svg/starRed.svg");
}

.icon-linked {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #17b400;
}

.compatible-icon {
  width: 18px;
  height: 18px;
  background: url(../img/svg/MessageIconWarnRed.svg) no-repeat;
}
.compatible-icon.incompatible {
  background: url(../img/svg/UploadIconClose.svg) no-repeat;
}

.nonsupport-health-icon {
  width: 18px;
  height: 18px;
  background: url(../img/svg/NonsupportHealth.svg) no-repeat;
}

.action-adopt:not(.fail) {
  width: 24px;
  height: 24px;
}
.action-adopt:not(.fail).ready {
  background: url(../img/svg/TableIconAdopt.svg) no-repeat;
}
.action-adopt:not(.fail).ready:hover {
  background: url(../img/svg/TableIconAdoptHover.svg) no-repeat;
}
.action-adopt:not(.fail).doing {
  background: url(../img/svg/TableIconAdoptDisabled.svg) no-repeat;
}
.action-adopt:not(.fail).done {
  background: url(../img/svg/TableIconAdoptDisabled.svg) no-repeat;
}

.action-reconnect {
  width: 24px;
  height: 24px;
  background: url(../img/svg/Reconnect.svg) no-repeat;
}

.action-launch {
  width: 24px;
  height: 24px;
  background: url(../img/svg/launch.svg) no-repeat;
}

.action-block,
.action-lock {
  width: 24px;
  height: 24px;
  background: url(../img/svg/Block.svg) no-repeat;
}

.action-terminate {
  width: 24px;
  height: 24px;
  background: url(../img/svg/Terminate.svg) no-repeat;
}

.action-unblock {
  width: 18px;
  height: 18px;
  background: url(../img/iconsX.png) no-repeat -419px -255px;
}
.action-unblock:hover {
  background: url(../img/iconsX.png) no-repeat -419px -284px;
}
.action-unblock.disabled {
  background: url(../img/iconsX.png) no-repeat -419px -284px;
  cursor: default;
}

.action-unauthorize {
  width: 24px;
  height: 24px;
  background: url(../img/svg/Unauthorize.svg) no-repeat;
}

.action-authorize {
  width: 24px;
  height: 24px;
  background: url(../img/svg/Authorize.svg) no-repeat;
}

.wifi-wrap .power-save-icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/PowerSave.svg) no-repeat;
}

.action-trust {
  width: 17px;
  height: 16px;
  background: url(../img/iconsX.png) no-repeat -599px -13px;
}
.action-trust:hover {
  background: url(../img/iconsX.png) no-repeat -621px -13px;
}

.action-untrust {
  width: 17px;
  height: 16px;
  background: url(../img/iconsX.png) no-repeat -644px -13px;
}
.action-untrust:hover {
  background: url(../img/iconsX.png) no-repeat -668px -13px;
}

.action-archive {
  width: 14px;
  height: 17px;
  background: url(../img/iconsX.png) no-repeat -602px -293px;
}
.action-archive:hover {
  background: url(../img/iconsX.png) no-repeat -572px -293px;
}

.action-remove {
  width: 24px;
  height: 24px;
  background: var(--msg-icon-close-active, url(../img/svg/ModalIconCloseActive.svg)) no-repeat;
}
.action-remove:hover {
  background: var(--msg-icon-close-hover, url(../img/svg/ModalIconCloseHover.svg)) no-repeat;
}

.local-remote-outer .local-remote-icon {
  width: 24px;
  height: 24px;
}
.local-remote-outer .local-remote-icon.up {
  background: url(../img/svg/ArrowsUp.svg) no-repeat;
}
.local-remote-outer .local-remote-icon.bottom {
  background: url(../img/svg/ArrowsDown.svg) no-repeat;
}

.total-traffic .download .icon {
  background: url(../img/svg/ChartIconDownlinkWan.svg) no-repeat;
}
.total-traffic .upload .icon {
  background: url(../img/svg/ChartIconUplink.svg) no-repeat;
}

.view-locked-out-users-tip:after {
  background: url(../img/svg/BreadcrumbIconNextLevel2Blue.svg) no-repeat;
}

.action-guest-disconnect {
  width: 20px;
  height: 20px;
  background: url(../img/iconsX.png) no-repeat -570px -211px;
}
.action-guest-disconnect:hover {
  background: url(../img/iconsX.png) no-repeat -173px -425px;
}

.action-guest-extend {
  width: 20px;
  height: 17px;
  background: url(../img/iconsX.png) no-repeat -627px -212px;
}
.action-guest-extend:hover {
  background: url(../img/iconsX.png) no-repeat -142px -425px;
}

.action-voucher-print {
  width: 20px;
  height: 20px;
  background: url(../img/iconsX.png) no-repeat -682px -213px;
}
.action-voucher-print:hover {
  background: url(../img/iconsX.png) no-repeat -206px -425px;
}

.action-enable {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconDisable.svg) no-repeat;
}
.action-enable:hover {
  background: url(../img/svg/TableIconDisableHover.svg) no-repeat;
}

.action-disable {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconDisable.svg) no-repeat;
}
.action-disable:hover {
  background: url(../img/svg/TableIconDisableHover.svg) no-repeat;
}

.action-restore {
  width: 21px;
  height: 19px;
  background: url("../img/iconsX.png") no-repeat -400px -424px;
}
.action-restore:hover {
  background: url("../img/iconsX.png") no-repeat -432px -424px;
}

.action-mark-read {
  width: 14px;
  height: 16px;
  background: url("../img/mark-read-normal.png") no-repeat;
}
.action-mark-read:hover {
  background: url("../img/mark-read-hover.png") no-repeat;
}

.action-mark-unread {
  width: 14px;
  height: 16px;
  background: url("../img/mark-unread-normal.png") no-repeat;
}
.action-mark-unread:hover {
  background: url("../img/mark-unread-hover.png") no-repeat;
}

.content-edit-save {
  width: 20px;
  height: 20px;
  background: url(../img/iconsX.png) no-repeat -512px -128px;
}

.content-edit-cancel {
  width: 20px;
  height: 20px;
  background: url(../img/iconsX.png) no-repeat -428px -128px;
}

.action-batch_upgrade {
  width: 18px;
  height: 18px;
  background: url(../img/batch_upgrade-normal.png) no-repeat;
}
.action-batch_upgrade:hover {
  background: url(../img/batch_upgrade-hover.png) no-repeat;
}
.action-batch_upgrade.disabled {
  background: url(../img/batch_upgrade-disabled.png) no-repeat;
  cursor: default;
}

.action-manually_upgrade {
  width: 18px;
  height: 18px;
  background: url(../img/manually_upgrade-normal.png) no-repeat;
}
.action-manually_upgrade:hover {
  background: url(../img/manually_upgrade-hover.png) no-repeat;
}
.action-manually_upgrade.disabled {
  background: url(../img/manually_upgrade-disabled.png) no-repeat;
  cursor: default;
}

.paging-container .pageing-btn-prev .icon {
  width: 28px;
  height: 28px;
  background: var(--pagination-icon-left-normal, url(../img/svg/PaginationLeft.svg)) no-repeat;
}
.paging-container .pageing-btn-prev:hover .icon {
  background: var(--pagination-icon-left-hover, url(../img/svg/PaginationLeftHover.svg)) no-repeat;
}
.paging-container .pageing-btn-prev:active .icon {
  background: var(--pagination-icon-left-active, url(../img/svg/PaginationLeftActive.svg)) no-repeat;
}
.paging-container .pageing-btn-prev.disabled .icon {
  background: var(--pagination-icon-left-disabled, url(../img/svg/PaginationLeftDisabled.svg)) no-repeat;
}

.paging-container .pageing-btn-next .icon {
  width: 28px;
  height: 28px;
  background: var(--pagination-icon-right-normal, url(../img/svg/PaginationRight.svg)) no-repeat;
}
.paging-container .pageing-btn-next:hover .icon {
  background: var(--pagination-icon-right-hover, url(../img/svg/PaginationRightHover.svg)) no-repeat;
}
.paging-container .pageing-btn-next:active .icon {
  background: var(--pagination-icon-right-active, url(../img/svg/PaginationRightActive.svg)) no-repeat;
}
.paging-container .pageing-btn-next.disabled .icon {
  background: var(--pagination-icon-right-disabled, url(../img/svg/PaginationRightDisabled.svg)) no-repeat;
}

.paging-container .dots {
  background: url(../img/svg/PaginationMore.svg) no-repeat;
}

.paging-container .btn-more-left {
  background: url(../img/svg/PaginationMoreLeftHover.svg) no-repeat;
}
.paging-container .btn-more-left:active {
  background: url(../img/svg/PaginationMoreLeftActive.svg) no-repeat;
}

.paging-container .btn-more-right {
  background: url(../img/svg/PaginationMoreRightHover.svg) no-repeat;
}
.paging-container .btn-more-right:active {
  background: url(../img/svg/PaginationMoreRightActive.svg) no-repeat;
}

.paging-select .combobox-switch .icon {
  background: var(--pagination-icon-select-icon-down, url(../img/svg/PaginationIconDown.svg)) no-repeat;
}
.paging-select .combobox-switch.arrow-up .icon {
  background: var(--pagination-icon-select-icon-up, url(../img/svg/PaginationIconUp.svg)) no-repeat;
}

.paging-container .paging-separator .icon {
  width: 16px;
  height: 16px;
  background: url(../img/svg/PaginationNext.svg) no-repeat;
}

.paragraph-container.alert .paragraph-wrap-outer:before {
  width: 24px;
  height: 24px;
  background: url(../img/svg/MessageIconWarning.svg) no-repeat;
}

.paragraph-container.warn .paragraph-wrap-outer:before {
  width: 24px;
  height: 24px;
  background: url(../img/svg/MessageIconWarnRed.svg) no-repeat;
}

.paragraph-container.info .paragraph-wrap-outer:before {
  width: 24px;
  height: 24px;
  background: url(../img/svg/MessageIconInfo.svg) no-repeat;
}

.modal-icon .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/DrawerIconSwitchWindow.svg) no-repeat;
}

.close-icon .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/DrawerIconClose.svg) no-repeat;
}

.collapse-inside .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/BreadcrumbIconNextLevel2.svg);
}

.collapse-inside-left .icon {
  width: 24px;
  height: 24px;
  transform: scaleX(-1);
  background: url(../img/svg/BreadcrumbIconNextLevel2.svg);
}

.collapse-outside-icon {
  width: 32px;
  height: 32px;
  background: url(../img/svg/SidebarRightIconMeanNormal.svg);
}

.msg-container.msg_settings .msg-close,
.msg-container.msg_settings .msg-close:hover {
  width: 22px;
  height: 22px;
  background-position: -450px -9px;
}

.msg_settings.collapsed .msg-close,
.msg_settings.collapsed .msg-close:hover {
  background-position: -431px -10px;
}

.msg-content-wrap:before {
  width: 28px;
  height: 28px;
  background: url(../img/iconsX.png) no-repeat -241px -389px;
}

.msg-title-container .disconnected:before,
.msg-title-container .isolated:before {
  width: 19px;
  height: 19px;
  background: url(../img/iconsX.png) no-repeat -428px -128px;
}

.msg-title-container .connected:before {
  width: 19px;
  height: 19px;
  background: url(../img/iconsX.png) no-repeat -399px -128px;
}

.msg-title-container .pending:before {
  width: 21px;
  height: 17px;
  background: url(../img/iconsX.png) no-repeat -455px -128px;
}

#map-spliter {
  width: 27px;
  height: 27px;
  background: url(../img/svg/ListSpread.svg) no-repeat;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
#map-spliter.close {
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
}

.header__refresh {
  background: url(../img/iconsX.png) no-repeat -13px -119px;
}
.header__refresh:hover {
  background: url(../img/iconsX.png) no-repeat -56px -119px;
}

.header__tools {
  background: url(../img/iconsX.png) no-repeat -100px -119px;
}
.header__tools:hover {
  background: url(../img/iconsX.png) no-repeat -143px -119px;
}

.header__logout {
  background: url(../img/iconsX.png) no-repeat -186px -119px;
}
.header__logout:hover {
  background: url(../img/iconsX.png) no-repeat -229px -119px;
}

.toggleController {
  width: 12px;
  height: 12px;
  background: url(../img/collapsed.png);
}
.toggleController.opened {
  background: url(../img/extended.png);
}

.btn-stop {
  width: 18px;
  height: 18px;
  background: url(../img/iconsX.png) no-repeat -721px -11px;
}
.btn-stop:hover {
  background: url(../img/iconsX.png) no-repeat -696px -11px;
}

.btn-edit .icon, .grid-content-btn-edit .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconEdit.svg) no-repeat;
}
.btn-edit:hover .icon, .grid-content-btn-edit:hover .icon {
  background: url(../img/svg/TableIconEditHover.svg) no-repeat;
}

.tab-edit .icon {
  width: 22px;
  height: 22px;
  background: url(../img/svg/TableIconEdit.svg) no-repeat;
}
.tab-edit:hover .icon {
  background: url(../img/svg/TableIconEditHover.svg) no-repeat;
}

.btn-export .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconExport.svg) no-repeat;
}

.btn-export:hover .icon {
  background: url(../img/svg/TableIconExportHover.svg) no-repeat;
}

.btn-restore .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/restore.svg) no-repeat;
}

.btn-restore:hover .icon {
  background: url(../img/svg/restoreHover.svg) no-repeat;
}

.btn-view {
  width: 24px;
  height: 24px;
  background-image: url("../img/svg/InputIconVisible.svg");
}

.btn-tick {
  width: 24px;
  height: 24px;
  background: var(--icon-enable, url(../img/svg/TableIconEnabled.svg)) no-repeat;
}

.btn-status-on {
  width: 8px;
  height: 8px;
  background-color: #0dc901;
  border-radius: 50%;
}

.btn-status-off {
  width: 8px;
  height: 8px;
  background-color: #afb2b8;
  border-radius: 50%;
}

.btn-copy .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconCopyNormal.svg) no-repeat;
}
.btn-copy:hover .icon {
  background: url(../img/svg/TableIconCopyHover.svg) no-repeat;
}
.btn-copy.disabled .icon {
  background: url(../img/svg/TableIconCopyHover.svg) no-repeat;
}

.btn-details .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconCopyNormal.svg) no-repeat;
}
.btn-details:hover .icon {
  background: url(../img/svg/TableIconCopyHover.svg) no-repeat;
}
.btn-details.disabled .icon {
  background: url(../img/svg/TableIconCopyHover.svg) no-repeat;
}

.btn-user-lan .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconUsersWiredLight.svg) no-repeat;
}
.btn-user-lan .text {
  vertical-align: middle;
}
.btn-user-lan:hover .icon {
  background: url(../img/svg/TableIconUsersWiredHover.svg) no-repeat;
}
.btn-user-lan.disabled .icon {
  background: url(../img/svg/TableIconUsersWiredHover.svg) no-repeat;
}

.btn-user-wlan .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconUsersWirelessLight.svg) no-repeat;
}
.btn-user-wlan .text {
  vertical-align: middle;
}
.btn-user-wlan:hover .icon {
  background: url(../img/svg/TableIconUsersWirelessHover.svg) no-repeat;
}
.btn-user-wlan.disabled .icon {
  background: url(../img/svg/TableIconUsersWirelessHover.svg) no-repeat;
}

.btn-guest-lan .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconGuestsWiredLight.svg) no-repeat;
}
.btn-guest-lan .text {
  vertical-align: middle;
}
.btn-guest-lan:hover .icon {
  background: url(../img/svg/TableIconGuestsWiredHover.svg) no-repeat;
}
.btn-guest-lan.disabled .icon {
  background: url(../img/svg/TableIconGuestsWiredHover.svg) no-repeat;
}

.btn-guest-wlan .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconGuestsWirelessLight.svg) no-repeat;
}
.btn-guest-wlan .text {
  vertical-align: middle;
}
.btn-guest-wlan:hover .icon {
  background: url(../img/svg/TableIconGuestsWirelessHover.svg) no-repeat;
}
.btn-guest-wlan.disabled .icon {
  background: url(../img/svg/TableIconGuestsWirelessHover.svg) no-repeat;
}

.btn-device-remove .icon {
  height: 24px;
  width: 24px;
  background: var(--msg-icon-close-hover, url(../img/svg/ModalIconCloseHover.svg)) no-repeat;
}

#password_view .icon {
  width: 25px;
  height: 20px;
  background: url(../../theme/img/iconsX.png) no-repeat -667px -128px;
}

#username_view .icon {
  width: 25px;
  height: 20px;
  background: url(../../theme/img/iconsX.png) no-repeat -618px -128px;
}

#voucher_view .icon {
  width: 29px;
  height: 20px;
  background: url(../../theme/img/iconsX.png) no-repeat -567px -237px;
}

.cloud-user-delete.loading .icon {
  background-position: -189px -41px;
}

#mesh-scanning-area.scanning .gif-container, .rf-scanning-container .icon {
  width: 100px;
  height: 100px;
  background: var(--icon-rescan, url("../../theme/img/rescan.gif")) no-repeat;
}

#global-info-panel .info-panel-value .inf-type {
  width: 16px;
  height: 16px;
}
#global-info-panel .info-panel-value .inf-type.mwo {
  background: url(../img/svg/MicrowaveOven.svg) no-repeat;
}
#global-info-panel .info-panel-value .inf-type.cw {
  background: url(../img/svg/ContinuousWave.svg) no-repeat;
}
#global-info-panel .info-panel-value .inf-type.wlan {
  background: url(../img/svg/RFwifi.svg) no-repeat;
}
#global-info-panel .info-panel-value .inf-type.fhss {
  background: url(../img/svg/FHSS.svg) no-repeat;
}

.switch-icon {
  width: 18px;
  height: 18px;
  background: url(../img/change-normal.png) no-repeat;
}
.switch-icon:hover {
  background: url(../img/change-light.png) no-repeat;
}

#global-loading .loading-waiting-icon {
  background: var(--icon-global-loading, url(../img/loading_apng.png)) center top no-repeat;
}

.launch-fail-icon {
  background: url(../img/launch-fail.png) center top no-repeat;
}

.no-device-container .img {
  width: 180px;
  height: 180px;
  background: url(../img/NoDate.png) no-repeat;
}
.no-device-container .img.gateway {
  background: url(../img/NoGateway.png) no-repeat;
}

#global-combobox-options[data-shown=switch-tags] li.combobox-list .icon,
#global-combobox-options[data-shown=batch-sw-tags] li.combobox-list .icon, #global-combobox-options[data-shown=ap-tags] li.combobox-list .icon,
#global-combobox-options[data-shown=batch-ap-tags] li.combobox-list .icon {
  width: 18px;
  height: 18px;
  background: var(--select-icon-tag, url(../img/svg/TagIconTag.svg)) no-repeat;
}
#global-combobox-options[data-shown=switch-tags] li.combobox-list.selected .icon,
#global-combobox-options[data-shown=batch-sw-tags] li.combobox-list.selected .icon, #global-combobox-options[data-shown=ap-tags] li.combobox-list.selected .icon,
#global-combobox-options[data-shown=batch-ap-tags] li.combobox-list.selected .icon {
  background: url(../img/svg/TagIconTagSelected.svg) no-repeat;
}

#devices-search li.search-list .icon {
  width: 18px;
  height: 18px;
  background: var(--select-icon-tag, url(../img/svg/TagIconTag.svg)) no-repeat;
}
#devices-search li.search-list.selected .icon {
  background: url(../img/svg/TagIconTagSelected.svg) no-repeat;
}

#devices-grid .grid-header.manual-check-header .manual-check {
  width: 24px;
  height: 24px;
}
#devices-grid .grid-header.manual-check-header .manual-check.check {
  background: url(../img/svg/Update.svg) no-repeat;
}
#devices-grid .grid-header.manual-check-header .manual-check.checking {
  background: url(../img/Updating.png) no-repeat;
}

.license-change-icon .arrowhead-icon {
  width: 32px;
  height: 16px;
  background: url(../img/svg/arrowhead.svg) no-repeat;
}

#license-changing .license-changing-img {
  width: 120px;
  height: 120px;
  background-size: 120px 120px;
  background: url(../img/changeLicense.png) no-repeat;
}
#license-changing .license-changing-img.success {
  background: url(../img/changeSuccess.png) no-repeat;
}
#license-changing .license-changing-img.fail {
  background: url(../img/changeFail.png) no-repeat;
}

#license-panel .license-header .refresh-icon {
  width: 20px;
  height: 20px;
  background: url(../img/svg/TableIconRefresh.svg) no-repeat;
}
#license-panel .license-header .refresh-icon:hover {
  background: url(../img/svg/TableIconRefreshHover.svg) no-repeat;
}
#license-panel .license-header .refresh-icon.disabled {
  background: url(../img/svg/TableIconRefreshNormal.svg) no-repeat;
}
#license-panel .no-license-wrap .img {
  width: 80px;
  height: 80px;
  background: url(../img/NoData.png) no-repeat;
}
#license-panel .loading-wrap .img {
  width: 72px;
  height: 72px;
  background: var(--icon-global-loading, url(../img/loading_apng.png)) no-repeat;
}

.used-license-wrap .used-license-item .time-icon,
.used-license-list .repeat-list-item .time-icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/HistoryNomal.svg) no-repeat;
}
.used-license-wrap .used-license-item:not(.disabled):not(.max-disabled):hover .time-icon,
.used-license-list .repeat-list-item:not(.disabled):not(.max-disabled):hover .time-icon {
  background: url(../img/svg/HistoryHover.svg) no-repeat;
}
.used-license-wrap .used-license-item:not(.disabled):not(.max-disabled).active .time-icon,
.used-license-list .repeat-list-item:not(.disabled):not(.max-disabled).active .time-icon {
  background: url(../img/svg/HistoryActive.svg) no-repeat;
}

#offline-import-msg .loading-container .icon,
#online-import-msg .loading-container .icon {
  width: 20px;
  height: 20px;
  background: var(--icon-loading, url(../img/adopt-doing.gif) no-repeat);
  animation: var(--icon-loading-animation, none);
}

#get-trial-license-msg .img {
  width: 300px;
  height: 200px;
  background: url(../img/trial.png) no-repeat;
}

.unbind-btn .btn-unbind .icon {
  width: 24px;
  height: 24px;
  background: url(../img/Unbind.png) no-repeat;
}
.unbind-btn:hover .btn-unbind .icon {
  background: url(../img/UnbindHover.png) no-repeat;
}

.tip-close .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/LoginIconClose.svg) no-repeat;
}
.tip-close .icon:hover {
  background: url(../img/svg/LoginIconCloseHover.svg) no-repeat;
}

.qr-code {
  display: inline-block;
}
.qr-code .icon {
  width: 88px;
  height: 88px;
  background: url(../img/QRCode.png) no-repeat;
}

.app-store {
  display: inline-block;
}
.app-store .icon {
  width: 134px;
  height: 38px;
  background: url(../img/AppStore.png) no-repeat;
}

.google-play {
  display: inline-block;
}
.google-play .icon {
  width: 134px;
  height: 38px;
  background: url(../img/GooglePlay.png) no-repeat;
}

.grid-content-wan.light .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconWANLight.svg) no-repeat;
}
.grid-content-wan.fair .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconWANFair.svg) no-repeat;
}
.grid-content-wan.poor .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconWANPoor.svg) no-repeat;
}
.grid-content-wan.no-data .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconWANNoData.svg) no-repeat;
}
.grid-content-wan.offline .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconWANOffline.svg) no-repeat;
}
.grid-content-wan .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconWAN.svg) no-repeat;
}

.grid-content-lan.light .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconLANLight.svg) no-repeat;
}
.grid-content-lan .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconLAN.svg) no-repeat;
}

.grid-content-wlan.wlan-good .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconWLANGood.svg) no-repeat;
}
.grid-content-wlan.wlan-normal .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconWLANNormal.svg) no-repeat;
}
.grid-content-wlan.wlan-fail .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconWLANFail.svg) no-repeat;
}
.grid-content-wlan.wlan-poor .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconWLANPoor.svg) no-repeat;
}
.grid-content-wlan .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconWLAN.svg) no-repeat;
}

.grid-content-alert {
  display: inline-block;
  width: auto;
  padding: 0 5px;
  line-height: 16px;
  text-align: center;
  height: 16px;
  font-size: 12px;
  border-radius: 8px;
  color: #FFFFFF;
  background-color: #FF2954;
}
.grid-content-alert.none {
  background-color: #AEB4B7;
}

.drawer-container.shown .tab-btn.gateway .icon,
.drawer-container.shown .device-type.gateway .icon,
.drawer-container.shown .drawer-title-container.gateway .icon, .device-icon .tab-btn.gateway .icon,
.device-icon .device-type.gateway .icon,
.device-icon .drawer-title-container.gateway .icon, .client-icon .tab-btn.gateway .icon,
.client-icon .device-type.gateway .icon,
.client-icon .drawer-title-container.gateway .icon,
#global-combobox-options .tab-btn.gateway .icon,
#global-combobox-options .device-type.gateway .icon,
#global-combobox-options .drawer-title-container.gateway .icon, #customer-combobox-options .tab-btn.gateway .icon,
#customer-combobox-options .device-type.gateway .icon,
#customer-combobox-options .drawer-title-container.gateway .icon, .statistics-charts-container .tab-btn.gateway .icon,
.statistics-charts-container .device-type.gateway .icon,
.statistics-charts-container .drawer-title-container.gateway .icon, .devicesList-item-device-icon .tab-btn.gateway .icon,
.devicesList-item-device-icon .device-type.gateway .icon,
.devicesList-item-device-icon .drawer-title-container.gateway .icon, .detect-aps-list-container .tab-btn.gateway .icon,
.detect-aps-list-container .device-type.gateway .icon,
.detect-aps-list-container .drawer-title-container.gateway .icon {
  width: 40px;
  height: 40px;
  background: url(../img/deviceIcon/Gateway.png) no-repeat;
  background-size: contain;
}
.drawer-container.shown .tab-btn.gateway.TL-ER7206 .icon,
.drawer-container.shown .device-type.gateway.TL-ER7206 .icon,
.drawer-container.shown .drawer-title-container.gateway.TL-ER7206 .icon, .device-icon .tab-btn.gateway.TL-ER7206 .icon,
.device-icon .device-type.gateway.TL-ER7206 .icon,
.device-icon .drawer-title-container.gateway.TL-ER7206 .icon, .client-icon .tab-btn.gateway.TL-ER7206 .icon,
.client-icon .device-type.gateway.TL-ER7206 .icon,
.client-icon .drawer-title-container.gateway.TL-ER7206 .icon,
#global-combobox-options .tab-btn.gateway.TL-ER7206 .icon,
#global-combobox-options .device-type.gateway.TL-ER7206 .icon,
#global-combobox-options .drawer-title-container.gateway.TL-ER7206 .icon, #customer-combobox-options .tab-btn.gateway.TL-ER7206 .icon,
#customer-combobox-options .device-type.gateway.TL-ER7206 .icon,
#customer-combobox-options .drawer-title-container.gateway.TL-ER7206 .icon, .statistics-charts-container .tab-btn.gateway.TL-ER7206 .icon,
.statistics-charts-container .device-type.gateway.TL-ER7206 .icon,
.statistics-charts-container .drawer-title-container.gateway.TL-ER7206 .icon, .devicesList-item-device-icon .tab-btn.gateway.TL-ER7206 .icon,
.devicesList-item-device-icon .device-type.gateway.TL-ER7206 .icon,
.devicesList-item-device-icon .drawer-title-container.gateway.TL-ER7206 .icon, .detect-aps-list-container .tab-btn.gateway.TL-ER7206 .icon,
.detect-aps-list-container .device-type.gateway.TL-ER7206 .icon,
.detect-aps-list-container .drawer-title-container.gateway.TL-ER7206 .icon {
  background: url(../img/deviceIcon/TL-ER7206.png) no-repeat;
  background-size: contain;
}
.drawer-container.shown .tab-btn.gateway.TL-ER8411 .icon,
.drawer-container.shown .device-type.gateway.TL-ER8411 .icon,
.drawer-container.shown .drawer-title-container.gateway.TL-ER8411 .icon, .device-icon .tab-btn.gateway.TL-ER8411 .icon,
.device-icon .device-type.gateway.TL-ER8411 .icon,
.device-icon .drawer-title-container.gateway.TL-ER8411 .icon, .client-icon .tab-btn.gateway.TL-ER8411 .icon,
.client-icon .device-type.gateway.TL-ER8411 .icon,
.client-icon .drawer-title-container.gateway.TL-ER8411 .icon,
#global-combobox-options .tab-btn.gateway.TL-ER8411 .icon,
#global-combobox-options .device-type.gateway.TL-ER8411 .icon,
#global-combobox-options .drawer-title-container.gateway.TL-ER8411 .icon, #customer-combobox-options .tab-btn.gateway.TL-ER8411 .icon,
#customer-combobox-options .device-type.gateway.TL-ER8411 .icon,
#customer-combobox-options .drawer-title-container.gateway.TL-ER8411 .icon, .statistics-charts-container .tab-btn.gateway.TL-ER8411 .icon,
.statistics-charts-container .device-type.gateway.TL-ER8411 .icon,
.statistics-charts-container .drawer-title-container.gateway.TL-ER8411 .icon, .devicesList-item-device-icon .tab-btn.gateway.TL-ER8411 .icon,
.devicesList-item-device-icon .device-type.gateway.TL-ER8411 .icon,
.devicesList-item-device-icon .drawer-title-container.gateway.TL-ER8411 .icon, .detect-aps-list-container .tab-btn.gateway.TL-ER8411 .icon,
.detect-aps-list-container .device-type.gateway.TL-ER8411 .icon,
.detect-aps-list-container .drawer-title-container.gateway.TL-ER8411 .icon {
  background: url(../img/deviceIcon/TL-ER8411.png) no-repeat;
  background-size: contain;
}
.drawer-container.shown .tab-btn.gateway.ER7212PC .icon,
.drawer-container.shown .device-type.gateway.ER7212PC .icon,
.drawer-container.shown .drawer-title-container.gateway.ER7212PC .icon, .device-icon .tab-btn.gateway.ER7212PC .icon,
.device-icon .device-type.gateway.ER7212PC .icon,
.device-icon .drawer-title-container.gateway.ER7212PC .icon, .client-icon .tab-btn.gateway.ER7212PC .icon,
.client-icon .device-type.gateway.ER7212PC .icon,
.client-icon .drawer-title-container.gateway.ER7212PC .icon,
#global-combobox-options .tab-btn.gateway.ER7212PC .icon,
#global-combobox-options .device-type.gateway.ER7212PC .icon,
#global-combobox-options .drawer-title-container.gateway.ER7212PC .icon, #customer-combobox-options .tab-btn.gateway.ER7212PC .icon,
#customer-combobox-options .device-type.gateway.ER7212PC .icon,
#customer-combobox-options .drawer-title-container.gateway.ER7212PC .icon, .statistics-charts-container .tab-btn.gateway.ER7212PC .icon,
.statistics-charts-container .device-type.gateway.ER7212PC .icon,
.statistics-charts-container .drawer-title-container.gateway.ER7212PC .icon, .devicesList-item-device-icon .tab-btn.gateway.ER7212PC .icon,
.devicesList-item-device-icon .device-type.gateway.ER7212PC .icon,
.devicesList-item-device-icon .drawer-title-container.gateway.ER7212PC .icon, .detect-aps-list-container .tab-btn.gateway.ER7212PC .icon,
.detect-aps-list-container .device-type.gateway.ER7212PC .icon,
.detect-aps-list-container .drawer-title-container.gateway.ER7212PC .icon {
  background: url(../img/deviceIcon/ER7212PC.png) no-repeat;
  background-size: contain;
}
.drawer-container.shown .combobox-list.gateway .icon, .device-icon .combobox-list.gateway .icon, .client-icon .combobox-list.gateway .icon,
#global-combobox-options .combobox-list.gateway .icon, #customer-combobox-options .combobox-list.gateway .icon, .statistics-charts-container .combobox-list.gateway .icon, .devicesList-item-device-icon .combobox-list.gateway .icon, .detect-aps-list-container .combobox-list.gateway .icon {
  width: 30px;
  height: 30px;
  background: url(../img/deviceIcon/Gateway.png) no-repeat;
  background-size: contain;
}
.drawer-container.shown .combobox-list.gateway.TL-ER7206 .icon, .device-icon .combobox-list.gateway.TL-ER7206 .icon, .client-icon .combobox-list.gateway.TL-ER7206 .icon,
#global-combobox-options .combobox-list.gateway.TL-ER7206 .icon, #customer-combobox-options .combobox-list.gateway.TL-ER7206 .icon, .statistics-charts-container .combobox-list.gateway.TL-ER7206 .icon, .devicesList-item-device-icon .combobox-list.gateway.TL-ER7206 .icon, .detect-aps-list-container .combobox-list.gateway.TL-ER7206 .icon {
  background: url(../img/deviceIcon/TL-ER7206.png) no-repeat;
  background-size: contain;
}
.drawer-container.shown .combobox-list.gateway.TL-ER8411 .icon, .device-icon .combobox-list.gateway.TL-ER8411 .icon, .client-icon .combobox-list.gateway.TL-ER8411 .icon,
#global-combobox-options .combobox-list.gateway.TL-ER8411 .icon, #customer-combobox-options .combobox-list.gateway.TL-ER8411 .icon, .statistics-charts-container .combobox-list.gateway.TL-ER8411 .icon, .devicesList-item-device-icon .combobox-list.gateway.TL-ER8411 .icon, .detect-aps-list-container .combobox-list.gateway.TL-ER8411 .icon {
  background: url(../img/deviceIcon/TL-ER8411.png) no-repeat;
  background-size: contain;
}
.drawer-container.shown .combobox-list.gateway.ER7212PC .icon, .device-icon .combobox-list.gateway.ER7212PC .icon, .client-icon .combobox-list.gateway.ER7212PC .icon,
#global-combobox-options .combobox-list.gateway.ER7212PC .icon, #customer-combobox-options .combobox-list.gateway.ER7212PC .icon, .statistics-charts-container .combobox-list.gateway.ER7212PC .icon, .devicesList-item-device-icon .combobox-list.gateway.ER7212PC .icon, .detect-aps-list-container .combobox-list.gateway.ER7212PC .icon {
  background: url(../img/deviceIcon/ER7212PC.png) no-repeat;
  background-size: contain;
}
.drawer-container.shown .tab-btn.switch .icon,
.drawer-container.shown .tab-btn[data-name=batch-switch] .icon,
.drawer-container.shown .device-type.switch .icon,
.drawer-container.shown .drawer-title-container.switch .icon, .device-icon .tab-btn.switch .icon,
.device-icon .tab-btn[data-name=batch-switch] .icon,
.device-icon .device-type.switch .icon,
.device-icon .drawer-title-container.switch .icon, .client-icon .tab-btn.switch .icon,
.client-icon .tab-btn[data-name=batch-switch] .icon,
.client-icon .device-type.switch .icon,
.client-icon .drawer-title-container.switch .icon,
#global-combobox-options .tab-btn.switch .icon,
#global-combobox-options .tab-btn[data-name=batch-switch] .icon,
#global-combobox-options .device-type.switch .icon,
#global-combobox-options .drawer-title-container.switch .icon, #customer-combobox-options .tab-btn.switch .icon,
#customer-combobox-options .tab-btn[data-name=batch-switch] .icon,
#customer-combobox-options .device-type.switch .icon,
#customer-combobox-options .drawer-title-container.switch .icon, .statistics-charts-container .tab-btn.switch .icon,
.statistics-charts-container .tab-btn[data-name=batch-switch] .icon,
.statistics-charts-container .device-type.switch .icon,
.statistics-charts-container .drawer-title-container.switch .icon, .devicesList-item-device-icon .tab-btn.switch .icon,
.devicesList-item-device-icon .tab-btn[data-name=batch-switch] .icon,
.devicesList-item-device-icon .device-type.switch .icon,
.devicesList-item-device-icon .drawer-title-container.switch .icon, .detect-aps-list-container .tab-btn.switch .icon,
.detect-aps-list-container .tab-btn[data-name=batch-switch] .icon,
.detect-aps-list-container .device-type.switch .icon,
.detect-aps-list-container .drawer-title-container.switch .icon {
  width: 40px;
  height: 40px;
  background: url(../img/deviceIcon/Gateway.png) no-repeat;
}
.drawer-container.shown .tab-btn.switch.TL-SG2428P .icon,
.drawer-container.shown .tab-btn[data-name=batch-switch].TL-SG2428P .icon,
.drawer-container.shown .device-type.switch.TL-SG2428P .icon,
.drawer-container.shown .drawer-title-container.switch.TL-SG2428P .icon, .device-icon .tab-btn.switch.TL-SG2428P .icon,
.device-icon .tab-btn[data-name=batch-switch].TL-SG2428P .icon,
.device-icon .device-type.switch.TL-SG2428P .icon,
.device-icon .drawer-title-container.switch.TL-SG2428P .icon, .client-icon .tab-btn.switch.TL-SG2428P .icon,
.client-icon .tab-btn[data-name=batch-switch].TL-SG2428P .icon,
.client-icon .device-type.switch.TL-SG2428P .icon,
.client-icon .drawer-title-container.switch.TL-SG2428P .icon,
#global-combobox-options .tab-btn.switch.TL-SG2428P .icon,
#global-combobox-options .tab-btn[data-name=batch-switch].TL-SG2428P .icon,
#global-combobox-options .device-type.switch.TL-SG2428P .icon,
#global-combobox-options .drawer-title-container.switch.TL-SG2428P .icon, #customer-combobox-options .tab-btn.switch.TL-SG2428P .icon,
#customer-combobox-options .tab-btn[data-name=batch-switch].TL-SG2428P .icon,
#customer-combobox-options .device-type.switch.TL-SG2428P .icon,
#customer-combobox-options .drawer-title-container.switch.TL-SG2428P .icon, .statistics-charts-container .tab-btn.switch.TL-SG2428P .icon,
.statistics-charts-container .tab-btn[data-name=batch-switch].TL-SG2428P .icon,
.statistics-charts-container .device-type.switch.TL-SG2428P .icon,
.statistics-charts-container .drawer-title-container.switch.TL-SG2428P .icon, .devicesList-item-device-icon .tab-btn.switch.TL-SG2428P .icon,
.devicesList-item-device-icon .tab-btn[data-name=batch-switch].TL-SG2428P .icon,
.devicesList-item-device-icon .device-type.switch.TL-SG2428P .icon,
.devicesList-item-device-icon .drawer-title-container.switch.TL-SG2428P .icon, .detect-aps-list-container .tab-btn.switch.TL-SG2428P .icon,
.detect-aps-list-container .tab-btn[data-name=batch-switch].TL-SG2428P .icon,
.detect-aps-list-container .device-type.switch.TL-SG2428P .icon,
.detect-aps-list-container .drawer-title-container.switch.TL-SG2428P .icon {
  background: url(../img/deviceIcon/TL-SG2428P.png) no-repeat;
  background-size: contain;
}
.drawer-container.shown .tab-btn.switch.TL-SG2008P .icon,
.drawer-container.shown .tab-btn[data-name=batch-switch].TL-SG2008P .icon,
.drawer-container.shown .device-type.switch.TL-SG2008P .icon,
.drawer-container.shown .drawer-title-container.switch.TL-SG2008P .icon, .device-icon .tab-btn.switch.TL-SG2008P .icon,
.device-icon .tab-btn[data-name=batch-switch].TL-SG2008P .icon,
.device-icon .device-type.switch.TL-SG2008P .icon,
.device-icon .drawer-title-container.switch.TL-SG2008P .icon, .client-icon .tab-btn.switch.TL-SG2008P .icon,
.client-icon .tab-btn[data-name=batch-switch].TL-SG2008P .icon,
.client-icon .device-type.switch.TL-SG2008P .icon,
.client-icon .drawer-title-container.switch.TL-SG2008P .icon,
#global-combobox-options .tab-btn.switch.TL-SG2008P .icon,
#global-combobox-options .tab-btn[data-name=batch-switch].TL-SG2008P .icon,
#global-combobox-options .device-type.switch.TL-SG2008P .icon,
#global-combobox-options .drawer-title-container.switch.TL-SG2008P .icon, #customer-combobox-options .tab-btn.switch.TL-SG2008P .icon,
#customer-combobox-options .tab-btn[data-name=batch-switch].TL-SG2008P .icon,
#customer-combobox-options .device-type.switch.TL-SG2008P .icon,
#customer-combobox-options .drawer-title-container.switch.TL-SG2008P .icon, .statistics-charts-container .tab-btn.switch.TL-SG2008P .icon,
.statistics-charts-container .tab-btn[data-name=batch-switch].TL-SG2008P .icon,
.statistics-charts-container .device-type.switch.TL-SG2008P .icon,
.statistics-charts-container .drawer-title-container.switch.TL-SG2008P .icon, .devicesList-item-device-icon .tab-btn.switch.TL-SG2008P .icon,
.devicesList-item-device-icon .tab-btn[data-name=batch-switch].TL-SG2008P .icon,
.devicesList-item-device-icon .device-type.switch.TL-SG2008P .icon,
.devicesList-item-device-icon .drawer-title-container.switch.TL-SG2008P .icon, .detect-aps-list-container .tab-btn.switch.TL-SG2008P .icon,
.detect-aps-list-container .tab-btn[data-name=batch-switch].TL-SG2008P .icon,
.detect-aps-list-container .device-type.switch.TL-SG2008P .icon,
.detect-aps-list-container .drawer-title-container.switch.TL-SG2008P .icon {
  background: url(../img/deviceIcon/TL-SG2008P.png) no-repeat;
  background-size: contain;
}
.drawer-container.shown .tab-btn.switch.TL-SG2218P .icon,
.drawer-container.shown .tab-btn[data-name=batch-switch].TL-SG2218P .icon,
.drawer-container.shown .device-type.switch.TL-SG2218P .icon,
.drawer-container.shown .drawer-title-container.switch.TL-SG2218P .icon, .device-icon .tab-btn.switch.TL-SG2218P .icon,
.device-icon .tab-btn[data-name=batch-switch].TL-SG2218P .icon,
.device-icon .device-type.switch.TL-SG2218P .icon,
.device-icon .drawer-title-container.switch.TL-SG2218P .icon, .client-icon .tab-btn.switch.TL-SG2218P .icon,
.client-icon .tab-btn[data-name=batch-switch].TL-SG2218P .icon,
.client-icon .device-type.switch.TL-SG2218P .icon,
.client-icon .drawer-title-container.switch.TL-SG2218P .icon,
#global-combobox-options .tab-btn.switch.TL-SG2218P .icon,
#global-combobox-options .tab-btn[data-name=batch-switch].TL-SG2218P .icon,
#global-combobox-options .device-type.switch.TL-SG2218P .icon,
#global-combobox-options .drawer-title-container.switch.TL-SG2218P .icon, #customer-combobox-options .tab-btn.switch.TL-SG2218P .icon,
#customer-combobox-options .tab-btn[data-name=batch-switch].TL-SG2218P .icon,
#customer-combobox-options .device-type.switch.TL-SG2218P .icon,
#customer-combobox-options .drawer-title-container.switch.TL-SG2218P .icon, .statistics-charts-container .tab-btn.switch.TL-SG2218P .icon,
.statistics-charts-container .tab-btn[data-name=batch-switch].TL-SG2218P .icon,
.statistics-charts-container .device-type.switch.TL-SG2218P .icon,
.statistics-charts-container .drawer-title-container.switch.TL-SG2218P .icon, .devicesList-item-device-icon .tab-btn.switch.TL-SG2218P .icon,
.devicesList-item-device-icon .tab-btn[data-name=batch-switch].TL-SG2218P .icon,
.devicesList-item-device-icon .device-type.switch.TL-SG2218P .icon,
.devicesList-item-device-icon .drawer-title-container.switch.TL-SG2218P .icon, .detect-aps-list-container .tab-btn.switch.TL-SG2218P .icon,
.detect-aps-list-container .tab-btn[data-name=batch-switch].TL-SG2218P .icon,
.detect-aps-list-container .device-type.switch.TL-SG2218P .icon,
.detect-aps-list-container .drawer-title-container.switch.TL-SG2218P .icon {
  background: url(../img/deviceIcon/TL-SG2218P.png) no-repeat;
  background-size: contain;
}
.drawer-container.shown .tab-btn.switch.TL-SG3452X .icon,
.drawer-container.shown .tab-btn[data-name=batch-switch].TL-SG3452X .icon,
.drawer-container.shown .device-type.switch.TL-SG3452X .icon,
.drawer-container.shown .drawer-title-container.switch.TL-SG3452X .icon, .device-icon .tab-btn.switch.TL-SG3452X .icon,
.device-icon .tab-btn[data-name=batch-switch].TL-SG3452X .icon,
.device-icon .device-type.switch.TL-SG3452X .icon,
.device-icon .drawer-title-container.switch.TL-SG3452X .icon, .client-icon .tab-btn.switch.TL-SG3452X .icon,
.client-icon .tab-btn[data-name=batch-switch].TL-SG3452X .icon,
.client-icon .device-type.switch.TL-SG3452X .icon,
.client-icon .drawer-title-container.switch.TL-SG3452X .icon,
#global-combobox-options .tab-btn.switch.TL-SG3452X .icon,
#global-combobox-options .tab-btn[data-name=batch-switch].TL-SG3452X .icon,
#global-combobox-options .device-type.switch.TL-SG3452X .icon,
#global-combobox-options .drawer-title-container.switch.TL-SG3452X .icon, #customer-combobox-options .tab-btn.switch.TL-SG3452X .icon,
#customer-combobox-options .tab-btn[data-name=batch-switch].TL-SG3452X .icon,
#customer-combobox-options .device-type.switch.TL-SG3452X .icon,
#customer-combobox-options .drawer-title-container.switch.TL-SG3452X .icon, .statistics-charts-container .tab-btn.switch.TL-SG3452X .icon,
.statistics-charts-container .tab-btn[data-name=batch-switch].TL-SG3452X .icon,
.statistics-charts-container .device-type.switch.TL-SG3452X .icon,
.statistics-charts-container .drawer-title-container.switch.TL-SG3452X .icon, .devicesList-item-device-icon .tab-btn.switch.TL-SG3452X .icon,
.devicesList-item-device-icon .tab-btn[data-name=batch-switch].TL-SG3452X .icon,
.devicesList-item-device-icon .device-type.switch.TL-SG3452X .icon,
.devicesList-item-device-icon .drawer-title-container.switch.TL-SG3452X .icon, .detect-aps-list-container .tab-btn.switch.TL-SG3452X .icon,
.detect-aps-list-container .tab-btn[data-name=batch-switch].TL-SG3452X .icon,
.detect-aps-list-container .device-type.switch.TL-SG3452X .icon,
.detect-aps-list-container .drawer-title-container.switch.TL-SG3452X .icon {
  background: url(../img/deviceIcon/TL-SG3452X.png) no-repeat;
  background-size: contain;
}
.drawer-container.shown .tab-btn.switch.TL-SG3452XP .icon,
.drawer-container.shown .tab-btn[data-name=batch-switch].TL-SG3452XP .icon,
.drawer-container.shown .device-type.switch.TL-SG3452XP .icon,
.drawer-container.shown .drawer-title-container.switch.TL-SG3452XP .icon, .device-icon .tab-btn.switch.TL-SG3452XP .icon,
.device-icon .tab-btn[data-name=batch-switch].TL-SG3452XP .icon,
.device-icon .device-type.switch.TL-SG3452XP .icon,
.device-icon .drawer-title-container.switch.TL-SG3452XP .icon, .client-icon .tab-btn.switch.TL-SG3452XP .icon,
.client-icon .tab-btn[data-name=batch-switch].TL-SG3452XP .icon,
.client-icon .device-type.switch.TL-SG3452XP .icon,
.client-icon .drawer-title-container.switch.TL-SG3452XP .icon,
#global-combobox-options .tab-btn.switch.TL-SG3452XP .icon,
#global-combobox-options .tab-btn[data-name=batch-switch].TL-SG3452XP .icon,
#global-combobox-options .device-type.switch.TL-SG3452XP .icon,
#global-combobox-options .drawer-title-container.switch.TL-SG3452XP .icon, #customer-combobox-options .tab-btn.switch.TL-SG3452XP .icon,
#customer-combobox-options .tab-btn[data-name=batch-switch].TL-SG3452XP .icon,
#customer-combobox-options .device-type.switch.TL-SG3452XP .icon,
#customer-combobox-options .drawer-title-container.switch.TL-SG3452XP .icon, .statistics-charts-container .tab-btn.switch.TL-SG3452XP .icon,
.statistics-charts-container .tab-btn[data-name=batch-switch].TL-SG3452XP .icon,
.statistics-charts-container .device-type.switch.TL-SG3452XP .icon,
.statistics-charts-container .drawer-title-container.switch.TL-SG3452XP .icon, .devicesList-item-device-icon .tab-btn.switch.TL-SG3452XP .icon,
.devicesList-item-device-icon .tab-btn[data-name=batch-switch].TL-SG3452XP .icon,
.devicesList-item-device-icon .device-type.switch.TL-SG3452XP .icon,
.devicesList-item-device-icon .drawer-title-container.switch.TL-SG3452XP .icon, .detect-aps-list-container .tab-btn.switch.TL-SG3452XP .icon,
.detect-aps-list-container .tab-btn[data-name=batch-switch].TL-SG3452XP .icon,
.detect-aps-list-container .device-type.switch.TL-SG3452XP .icon,
.detect-aps-list-container .drawer-title-container.switch.TL-SG3452XP .icon {
  background: url(../img/deviceIcon/TL-SG3452XP.png) no-repeat;
  background-size: contain;
}
.drawer-container.shown .tab-btn.switch.TL-SG3452P .icon,
.drawer-container.shown .tab-btn[data-name=batch-switch].TL-SG3452P .icon,
.drawer-container.shown .device-type.switch.TL-SG3452P .icon,
.drawer-container.shown .drawer-title-container.switch.TL-SG3452P .icon, .device-icon .tab-btn.switch.TL-SG3452P .icon,
.device-icon .tab-btn[data-name=batch-switch].TL-SG3452P .icon,
.device-icon .device-type.switch.TL-SG3452P .icon,
.device-icon .drawer-title-container.switch.TL-SG3452P .icon, .client-icon .tab-btn.switch.TL-SG3452P .icon,
.client-icon .tab-btn[data-name=batch-switch].TL-SG3452P .icon,
.client-icon .device-type.switch.TL-SG3452P .icon,
.client-icon .drawer-title-container.switch.TL-SG3452P .icon,
#global-combobox-options .tab-btn.switch.TL-SG3452P .icon,
#global-combobox-options .tab-btn[data-name=batch-switch].TL-SG3452P .icon,
#global-combobox-options .device-type.switch.TL-SG3452P .icon,
#global-combobox-options .drawer-title-container.switch.TL-SG3452P .icon, #customer-combobox-options .tab-btn.switch.TL-SG3452P .icon,
#customer-combobox-options .tab-btn[data-name=batch-switch].TL-SG3452P .icon,
#customer-combobox-options .device-type.switch.TL-SG3452P .icon,
#customer-combobox-options .drawer-title-container.switch.TL-SG3452P .icon, .statistics-charts-container .tab-btn.switch.TL-SG3452P .icon,
.statistics-charts-container .tab-btn[data-name=batch-switch].TL-SG3452P .icon,
.statistics-charts-container .device-type.switch.TL-SG3452P .icon,
.statistics-charts-container .drawer-title-container.switch.TL-SG3452P .icon, .devicesList-item-device-icon .tab-btn.switch.TL-SG3452P .icon,
.devicesList-item-device-icon .tab-btn[data-name=batch-switch].TL-SG3452P .icon,
.devicesList-item-device-icon .device-type.switch.TL-SG3452P .icon,
.devicesList-item-device-icon .drawer-title-container.switch.TL-SG3452P .icon, .detect-aps-list-container .tab-btn.switch.TL-SG3452P .icon,
.detect-aps-list-container .tab-btn[data-name=batch-switch].TL-SG3452P .icon,
.detect-aps-list-container .device-type.switch.TL-SG3452P .icon,
.detect-aps-list-container .drawer-title-container.switch.TL-SG3452P .icon {
  background: url(../img/deviceIcon/TL-SG3452P.png) no-repeat;
  background-size: contain;
}
.drawer-container.shown .combobox-list.stack .icon, .device-icon .combobox-list.stack .icon, .client-icon .combobox-list.stack .icon,
#global-combobox-options .combobox-list.stack .icon, #customer-combobox-options .combobox-list.stack .icon, .statistics-charts-container .combobox-list.stack .icon, .devicesList-item-device-icon .combobox-list.stack .icon, .detect-aps-list-container .combobox-list.stack .icon {
  width: 30px;
  height: 30px;
  background: url(../img/topology/Switch.png) center no-repeat;
  background-size: 25px;
}
.drawer-container.shown .tab-btn.switch_stack .icon,
.drawer-container.shown .device-type.switch_stack .icon,
.drawer-container.shown .drawer-title-container.switch_stack .icon, .device-icon .tab-btn.switch_stack .icon,
.device-icon .device-type.switch_stack .icon,
.device-icon .drawer-title-container.switch_stack .icon, .client-icon .tab-btn.switch_stack .icon,
.client-icon .device-type.switch_stack .icon,
.client-icon .drawer-title-container.switch_stack .icon,
#global-combobox-options .tab-btn.switch_stack .icon,
#global-combobox-options .device-type.switch_stack .icon,
#global-combobox-options .drawer-title-container.switch_stack .icon, #customer-combobox-options .tab-btn.switch_stack .icon,
#customer-combobox-options .device-type.switch_stack .icon,
#customer-combobox-options .drawer-title-container.switch_stack .icon, .statistics-charts-container .tab-btn.switch_stack .icon,
.statistics-charts-container .device-type.switch_stack .icon,
.statistics-charts-container .drawer-title-container.switch_stack .icon, .devicesList-item-device-icon .tab-btn.switch_stack .icon,
.devicesList-item-device-icon .device-type.switch_stack .icon,
.devicesList-item-device-icon .drawer-title-container.switch_stack .icon, .detect-aps-list-container .tab-btn.switch_stack .icon,
.detect-aps-list-container .device-type.switch_stack .icon,
.detect-aps-list-container .drawer-title-container.switch_stack .icon {
  width: 40px;
  height: 40px;
  background: url(../img/deviceIcon/Switch.png) no-repeat;
  background-size: 40px 40px;
}
.drawer-container.shown .combobox-list.switch .icon, .device-icon .combobox-list.switch .icon, .client-icon .combobox-list.switch .icon,
#global-combobox-options .combobox-list.switch .icon, #customer-combobox-options .combobox-list.switch .icon, .statistics-charts-container .combobox-list.switch .icon, .devicesList-item-device-icon .combobox-list.switch .icon, .detect-aps-list-container .combobox-list.switch .icon {
  width: 30px;
  height: 30px;
  background: url(../img/deviceIcon/Gateway.png) no-repeat;
  background-size: contain;
}
.drawer-container.shown .combobox-list.switch.TL-SG2428P .icon, .device-icon .combobox-list.switch.TL-SG2428P .icon, .client-icon .combobox-list.switch.TL-SG2428P .icon,
#global-combobox-options .combobox-list.switch.TL-SG2428P .icon, #customer-combobox-options .combobox-list.switch.TL-SG2428P .icon, .statistics-charts-container .combobox-list.switch.TL-SG2428P .icon, .devicesList-item-device-icon .combobox-list.switch.TL-SG2428P .icon, .detect-aps-list-container .combobox-list.switch.TL-SG2428P .icon {
  background: url(../img/deviceIcon/TL-SG2428P.png) no-repeat;
  background-size: contain;
}
.drawer-container.shown .combobox-list.switch.TL-SG2008P .icon, .device-icon .combobox-list.switch.TL-SG2008P .icon, .client-icon .combobox-list.switch.TL-SG2008P .icon,
#global-combobox-options .combobox-list.switch.TL-SG2008P .icon, #customer-combobox-options .combobox-list.switch.TL-SG2008P .icon, .statistics-charts-container .combobox-list.switch.TL-SG2008P .icon, .devicesList-item-device-icon .combobox-list.switch.TL-SG2008P .icon, .detect-aps-list-container .combobox-list.switch.TL-SG2008P .icon {
  background: url(../img/deviceIcon/TL-SG2008P.png) no-repeat;
  background-size: contain;
}
.drawer-container.shown .combobox-list.switch.TL-SG2218P .icon, .device-icon .combobox-list.switch.TL-SG2218P .icon, .client-icon .combobox-list.switch.TL-SG2218P .icon,
#global-combobox-options .combobox-list.switch.TL-SG2218P .icon, #customer-combobox-options .combobox-list.switch.TL-SG2218P .icon, .statistics-charts-container .combobox-list.switch.TL-SG2218P .icon, .devicesList-item-device-icon .combobox-list.switch.TL-SG2218P .icon, .detect-aps-list-container .combobox-list.switch.TL-SG2218P .icon {
  background: url(../img/deviceIcon/TL-SG2218P.png) no-repeat;
  background-size: contain;
}
.drawer-container.shown .combobox-list.switch.TL-SG3452X .icon, .device-icon .combobox-list.switch.TL-SG3452X .icon, .client-icon .combobox-list.switch.TL-SG3452X .icon,
#global-combobox-options .combobox-list.switch.TL-SG3452X .icon, #customer-combobox-options .combobox-list.switch.TL-SG3452X .icon, .statistics-charts-container .combobox-list.switch.TL-SG3452X .icon, .devicesList-item-device-icon .combobox-list.switch.TL-SG3452X .icon, .detect-aps-list-container .combobox-list.switch.TL-SG3452X .icon {
  background: url(../img/deviceIcon/TL-SG3452X.png) no-repeat;
  background-size: contain;
}
.drawer-container.shown .combobox-list.switch.TL-SG3452XP .icon, .device-icon .combobox-list.switch.TL-SG3452XP .icon, .client-icon .combobox-list.switch.TL-SG3452XP .icon,
#global-combobox-options .combobox-list.switch.TL-SG3452XP .icon, #customer-combobox-options .combobox-list.switch.TL-SG3452XP .icon, .statistics-charts-container .combobox-list.switch.TL-SG3452XP .icon, .devicesList-item-device-icon .combobox-list.switch.TL-SG3452XP .icon, .detect-aps-list-container .combobox-list.switch.TL-SG3452XP .icon {
  background: url(../img/deviceIcon/TL-SG3452XP.png) no-repeat;
  background-size: contain;
}
.drawer-container.shown .combobox-list.switch.TL-SG3452P .icon, .device-icon .combobox-list.switch.TL-SG3452P .icon, .client-icon .combobox-list.switch.TL-SG3452P .icon,
#global-combobox-options .combobox-list.switch.TL-SG3452P .icon, #customer-combobox-options .combobox-list.switch.TL-SG3452P .icon, .statistics-charts-container .combobox-list.switch.TL-SG3452P .icon, .devicesList-item-device-icon .combobox-list.switch.TL-SG3452P .icon, .detect-aps-list-container .combobox-list.switch.TL-SG3452P .icon {
  background: url(../img/deviceIcon/TL-SG3452P.png) no-repeat;
  background-size: contain;
}
.drawer-container.shown .tab-btn.ap .icon, .drawer-container.shown .tab-btn[data-name=batch-ap] .icon, .drawer-container.shown .tab-btn[data-name=batch-active] .icon, .drawer-container.shown .combobox-list.ap .icon,
.drawer-container.shown .drawer-title-container.ap .icon, .drawer-container.shown .device-type.ap .icon, .device-icon .tab-btn.ap .icon, .device-icon .tab-btn[data-name=batch-ap] .icon, .device-icon .tab-btn[data-name=batch-active] .icon, .device-icon .combobox-list.ap .icon,
.device-icon .drawer-title-container.ap .icon, .device-icon .device-type.ap .icon, .client-icon .tab-btn.ap .icon, .client-icon .tab-btn[data-name=batch-ap] .icon, .client-icon .tab-btn[data-name=batch-active] .icon, .client-icon .combobox-list.ap .icon,
.client-icon .drawer-title-container.ap .icon, .client-icon .device-type.ap .icon,
#global-combobox-options .tab-btn.ap .icon,
#global-combobox-options .tab-btn[data-name=batch-ap] .icon,
#global-combobox-options .tab-btn[data-name=batch-active] .icon,
#global-combobox-options .combobox-list.ap .icon,
#global-combobox-options .drawer-title-container.ap .icon,
#global-combobox-options .device-type.ap .icon, #customer-combobox-options .tab-btn.ap .icon, #customer-combobox-options .tab-btn[data-name=batch-ap] .icon, #customer-combobox-options .tab-btn[data-name=batch-active] .icon, #customer-combobox-options .combobox-list.ap .icon,
#customer-combobox-options .drawer-title-container.ap .icon, #customer-combobox-options .device-type.ap .icon, .statistics-charts-container .tab-btn.ap .icon, .statistics-charts-container .tab-btn[data-name=batch-ap] .icon, .statistics-charts-container .tab-btn[data-name=batch-active] .icon, .statistics-charts-container .combobox-list.ap .icon,
.statistics-charts-container .drawer-title-container.ap .icon, .statistics-charts-container .device-type.ap .icon, .devicesList-item-device-icon .tab-btn.ap .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-ap] .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-active] .icon, .devicesList-item-device-icon .combobox-list.ap .icon,
.devicesList-item-device-icon .drawer-title-container.ap .icon, .devicesList-item-device-icon .device-type.ap .icon, .detect-aps-list-container .tab-btn.ap .icon, .detect-aps-list-container .tab-btn[data-name=batch-ap] .icon, .detect-aps-list-container .tab-btn[data-name=batch-active] .icon, .detect-aps-list-container .combobox-list.ap .icon,
.detect-aps-list-container .drawer-title-container.ap .icon, .detect-aps-list-container .device-type.ap .icon {
  width: 40px;
  height: 40px;
}
.drawer-container.shown .tab-btn.ap.combobox-list.ap .icon, .drawer-container.shown .tab-btn[data-name=batch-ap].combobox-list.ap .icon, .drawer-container.shown .tab-btn[data-name=batch-active].combobox-list.ap .icon, .drawer-container.shown .combobox-list.ap.combobox-list.ap .icon,
.drawer-container.shown .drawer-title-container.ap.combobox-list.ap .icon, .drawer-container.shown .device-type.ap.combobox-list.ap .icon, .device-icon .tab-btn.ap.combobox-list.ap .icon, .device-icon .tab-btn[data-name=batch-ap].combobox-list.ap .icon, .device-icon .tab-btn[data-name=batch-active].combobox-list.ap .icon, .device-icon .combobox-list.ap.combobox-list.ap .icon,
.device-icon .drawer-title-container.ap.combobox-list.ap .icon, .device-icon .device-type.ap.combobox-list.ap .icon, .client-icon .tab-btn.ap.combobox-list.ap .icon, .client-icon .tab-btn[data-name=batch-ap].combobox-list.ap .icon, .client-icon .tab-btn[data-name=batch-active].combobox-list.ap .icon, .client-icon .combobox-list.ap.combobox-list.ap .icon,
.client-icon .drawer-title-container.ap.combobox-list.ap .icon, .client-icon .device-type.ap.combobox-list.ap .icon,
#global-combobox-options .tab-btn.ap.combobox-list.ap .icon,
#global-combobox-options .tab-btn[data-name=batch-ap].combobox-list.ap .icon,
#global-combobox-options .tab-btn[data-name=batch-active].combobox-list.ap .icon,
#global-combobox-options .combobox-list.ap.combobox-list.ap .icon,
#global-combobox-options .drawer-title-container.ap.combobox-list.ap .icon,
#global-combobox-options .device-type.ap.combobox-list.ap .icon, #customer-combobox-options .tab-btn.ap.combobox-list.ap .icon, #customer-combobox-options .tab-btn[data-name=batch-ap].combobox-list.ap .icon, #customer-combobox-options .tab-btn[data-name=batch-active].combobox-list.ap .icon, #customer-combobox-options .combobox-list.ap.combobox-list.ap .icon,
#customer-combobox-options .drawer-title-container.ap.combobox-list.ap .icon, #customer-combobox-options .device-type.ap.combobox-list.ap .icon, .statistics-charts-container .tab-btn.ap.combobox-list.ap .icon, .statistics-charts-container .tab-btn[data-name=batch-ap].combobox-list.ap .icon, .statistics-charts-container .tab-btn[data-name=batch-active].combobox-list.ap .icon, .statistics-charts-container .combobox-list.ap.combobox-list.ap .icon,
.statistics-charts-container .drawer-title-container.ap.combobox-list.ap .icon, .statistics-charts-container .device-type.ap.combobox-list.ap .icon, .devicesList-item-device-icon .tab-btn.ap.combobox-list.ap .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-ap].combobox-list.ap .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-active].combobox-list.ap .icon, .devicesList-item-device-icon .combobox-list.ap.combobox-list.ap .icon,
.devicesList-item-device-icon .drawer-title-container.ap.combobox-list.ap .icon, .devicesList-item-device-icon .device-type.ap.combobox-list.ap .icon, .detect-aps-list-container .tab-btn.ap.combobox-list.ap .icon, .detect-aps-list-container .tab-btn[data-name=batch-ap].combobox-list.ap .icon, .detect-aps-list-container .tab-btn[data-name=batch-active].combobox-list.ap .icon, .detect-aps-list-container .combobox-list.ap.combobox-list.ap .icon,
.detect-aps-list-container .drawer-title-container.ap.combobox-list.ap .icon, .detect-aps-list-container .device-type.ap.combobox-list.ap .icon {
  width: 30px;
  height: 30px;
  background-size: contain;
}
.drawer-container.shown .tab-btn.ap.Wave .icon, .drawer-container.shown .tab-btn[data-name=batch-ap].Wave .icon, .drawer-container.shown .tab-btn[data-name=batch-active].Wave .icon, .drawer-container.shown .combobox-list.ap.Wave .icon,
.drawer-container.shown .drawer-title-container.ap.Wave .icon, .drawer-container.shown .device-type.ap.Wave .icon, .device-icon .tab-btn.ap.Wave .icon, .device-icon .tab-btn[data-name=batch-ap].Wave .icon, .device-icon .tab-btn[data-name=batch-active].Wave .icon, .device-icon .combobox-list.ap.Wave .icon,
.device-icon .drawer-title-container.ap.Wave .icon, .device-icon .device-type.ap.Wave .icon, .client-icon .tab-btn.ap.Wave .icon, .client-icon .tab-btn[data-name=batch-ap].Wave .icon, .client-icon .tab-btn[data-name=batch-active].Wave .icon, .client-icon .combobox-list.ap.Wave .icon,
.client-icon .drawer-title-container.ap.Wave .icon, .client-icon .device-type.ap.Wave .icon,
#global-combobox-options .tab-btn.ap.Wave .icon,
#global-combobox-options .tab-btn[data-name=batch-ap].Wave .icon,
#global-combobox-options .tab-btn[data-name=batch-active].Wave .icon,
#global-combobox-options .combobox-list.ap.Wave .icon,
#global-combobox-options .drawer-title-container.ap.Wave .icon,
#global-combobox-options .device-type.ap.Wave .icon, #customer-combobox-options .tab-btn.ap.Wave .icon, #customer-combobox-options .tab-btn[data-name=batch-ap].Wave .icon, #customer-combobox-options .tab-btn[data-name=batch-active].Wave .icon, #customer-combobox-options .combobox-list.ap.Wave .icon,
#customer-combobox-options .drawer-title-container.ap.Wave .icon, #customer-combobox-options .device-type.ap.Wave .icon, .statistics-charts-container .tab-btn.ap.Wave .icon, .statistics-charts-container .tab-btn[data-name=batch-ap].Wave .icon, .statistics-charts-container .tab-btn[data-name=batch-active].Wave .icon, .statistics-charts-container .combobox-list.ap.Wave .icon,
.statistics-charts-container .drawer-title-container.ap.Wave .icon, .statistics-charts-container .device-type.ap.Wave .icon, .devicesList-item-device-icon .tab-btn.ap.Wave .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-ap].Wave .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-active].Wave .icon, .devicesList-item-device-icon .combobox-list.ap.Wave .icon,
.devicesList-item-device-icon .drawer-title-container.ap.Wave .icon, .devicesList-item-device-icon .device-type.ap.Wave .icon, .detect-aps-list-container .tab-btn.ap.Wave .icon, .detect-aps-list-container .tab-btn[data-name=batch-ap].Wave .icon, .detect-aps-list-container .tab-btn[data-name=batch-active].Wave .icon, .detect-aps-list-container .combobox-list.ap.Wave .icon,
.detect-aps-list-container .drawer-title-container.ap.Wave .icon, .detect-aps-list-container .device-type.ap.Wave .icon {
  background: url(../img/deviceIcon/wave.png) no-repeat;
}
.drawer-container.shown .tab-btn.ap.Cloud-Square .icon, .drawer-container.shown .tab-btn[data-name=batch-ap].Cloud-Square .icon, .drawer-container.shown .tab-btn[data-name=batch-active].Cloud-Square .icon, .drawer-container.shown .combobox-list.ap.Cloud-Square .icon,
.drawer-container.shown .drawer-title-container.ap.Cloud-Square .icon, .drawer-container.shown .device-type.ap.Cloud-Square .icon, .device-icon .tab-btn.ap.Cloud-Square .icon, .device-icon .tab-btn[data-name=batch-ap].Cloud-Square .icon, .device-icon .tab-btn[data-name=batch-active].Cloud-Square .icon, .device-icon .combobox-list.ap.Cloud-Square .icon,
.device-icon .drawer-title-container.ap.Cloud-Square .icon, .device-icon .device-type.ap.Cloud-Square .icon, .client-icon .tab-btn.ap.Cloud-Square .icon, .client-icon .tab-btn[data-name=batch-ap].Cloud-Square .icon, .client-icon .tab-btn[data-name=batch-active].Cloud-Square .icon, .client-icon .combobox-list.ap.Cloud-Square .icon,
.client-icon .drawer-title-container.ap.Cloud-Square .icon, .client-icon .device-type.ap.Cloud-Square .icon,
#global-combobox-options .tab-btn.ap.Cloud-Square .icon,
#global-combobox-options .tab-btn[data-name=batch-ap].Cloud-Square .icon,
#global-combobox-options .tab-btn[data-name=batch-active].Cloud-Square .icon,
#global-combobox-options .combobox-list.ap.Cloud-Square .icon,
#global-combobox-options .drawer-title-container.ap.Cloud-Square .icon,
#global-combobox-options .device-type.ap.Cloud-Square .icon, #customer-combobox-options .tab-btn.ap.Cloud-Square .icon, #customer-combobox-options .tab-btn[data-name=batch-ap].Cloud-Square .icon, #customer-combobox-options .tab-btn[data-name=batch-active].Cloud-Square .icon, #customer-combobox-options .combobox-list.ap.Cloud-Square .icon,
#customer-combobox-options .drawer-title-container.ap.Cloud-Square .icon, #customer-combobox-options .device-type.ap.Cloud-Square .icon, .statistics-charts-container .tab-btn.ap.Cloud-Square .icon, .statistics-charts-container .tab-btn[data-name=batch-ap].Cloud-Square .icon, .statistics-charts-container .tab-btn[data-name=batch-active].Cloud-Square .icon, .statistics-charts-container .combobox-list.ap.Cloud-Square .icon,
.statistics-charts-container .drawer-title-container.ap.Cloud-Square .icon, .statistics-charts-container .device-type.ap.Cloud-Square .icon, .devicesList-item-device-icon .tab-btn.ap.Cloud-Square .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-ap].Cloud-Square .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-active].Cloud-Square .icon, .devicesList-item-device-icon .combobox-list.ap.Cloud-Square .icon,
.devicesList-item-device-icon .drawer-title-container.ap.Cloud-Square .icon, .devicesList-item-device-icon .device-type.ap.Cloud-Square .icon, .detect-aps-list-container .tab-btn.ap.Cloud-Square .icon, .detect-aps-list-container .tab-btn[data-name=batch-ap].Cloud-Square .icon, .detect-aps-list-container .tab-btn[data-name=batch-active].Cloud-Square .icon, .detect-aps-list-container .combobox-list.ap.Cloud-Square .icon,
.detect-aps-list-container .drawer-title-container.ap.Cloud-Square .icon, .detect-aps-list-container .device-type.ap.Cloud-Square .icon {
  background: url(../img/deviceIcon/cloudSquare.png) no-repeat;
}
.drawer-container.shown .tab-btn.ap.Outdoor-Old .icon, .drawer-container.shown .tab-btn[data-name=batch-ap].Outdoor-Old .icon, .drawer-container.shown .tab-btn[data-name=batch-active].Outdoor-Old .icon, .drawer-container.shown .combobox-list.ap.Outdoor-Old .icon,
.drawer-container.shown .drawer-title-container.ap.Outdoor-Old .icon, .drawer-container.shown .device-type.ap.Outdoor-Old .icon, .device-icon .tab-btn.ap.Outdoor-Old .icon, .device-icon .tab-btn[data-name=batch-ap].Outdoor-Old .icon, .device-icon .tab-btn[data-name=batch-active].Outdoor-Old .icon, .device-icon .combobox-list.ap.Outdoor-Old .icon,
.device-icon .drawer-title-container.ap.Outdoor-Old .icon, .device-icon .device-type.ap.Outdoor-Old .icon, .client-icon .tab-btn.ap.Outdoor-Old .icon, .client-icon .tab-btn[data-name=batch-ap].Outdoor-Old .icon, .client-icon .tab-btn[data-name=batch-active].Outdoor-Old .icon, .client-icon .combobox-list.ap.Outdoor-Old .icon,
.client-icon .drawer-title-container.ap.Outdoor-Old .icon, .client-icon .device-type.ap.Outdoor-Old .icon,
#global-combobox-options .tab-btn.ap.Outdoor-Old .icon,
#global-combobox-options .tab-btn[data-name=batch-ap].Outdoor-Old .icon,
#global-combobox-options .tab-btn[data-name=batch-active].Outdoor-Old .icon,
#global-combobox-options .combobox-list.ap.Outdoor-Old .icon,
#global-combobox-options .drawer-title-container.ap.Outdoor-Old .icon,
#global-combobox-options .device-type.ap.Outdoor-Old .icon, #customer-combobox-options .tab-btn.ap.Outdoor-Old .icon, #customer-combobox-options .tab-btn[data-name=batch-ap].Outdoor-Old .icon, #customer-combobox-options .tab-btn[data-name=batch-active].Outdoor-Old .icon, #customer-combobox-options .combobox-list.ap.Outdoor-Old .icon,
#customer-combobox-options .drawer-title-container.ap.Outdoor-Old .icon, #customer-combobox-options .device-type.ap.Outdoor-Old .icon, .statistics-charts-container .tab-btn.ap.Outdoor-Old .icon, .statistics-charts-container .tab-btn[data-name=batch-ap].Outdoor-Old .icon, .statistics-charts-container .tab-btn[data-name=batch-active].Outdoor-Old .icon, .statistics-charts-container .combobox-list.ap.Outdoor-Old .icon,
.statistics-charts-container .drawer-title-container.ap.Outdoor-Old .icon, .statistics-charts-container .device-type.ap.Outdoor-Old .icon, .devicesList-item-device-icon .tab-btn.ap.Outdoor-Old .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-ap].Outdoor-Old .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-active].Outdoor-Old .icon, .devicesList-item-device-icon .combobox-list.ap.Outdoor-Old .icon,
.devicesList-item-device-icon .drawer-title-container.ap.Outdoor-Old .icon, .devicesList-item-device-icon .device-type.ap.Outdoor-Old .icon, .detect-aps-list-container .tab-btn.ap.Outdoor-Old .icon, .detect-aps-list-container .tab-btn[data-name=batch-ap].Outdoor-Old .icon, .detect-aps-list-container .tab-btn[data-name=batch-active].Outdoor-Old .icon, .detect-aps-list-container .combobox-list.ap.Outdoor-Old .icon,
.detect-aps-list-container .drawer-title-container.ap.Outdoor-Old .icon, .detect-aps-list-container .device-type.ap.Outdoor-Old .icon {
  background: url(../img/deviceIcon/outdoorOld.png) no-repeat;
}
.drawer-container.shown .tab-btn.ap.Outdoor-New .icon, .drawer-container.shown .tab-btn[data-name=batch-ap].Outdoor-New .icon, .drawer-container.shown .tab-btn[data-name=batch-active].Outdoor-New .icon, .drawer-container.shown .combobox-list.ap.Outdoor-New .icon,
.drawer-container.shown .drawer-title-container.ap.Outdoor-New .icon, .drawer-container.shown .device-type.ap.Outdoor-New .icon, .device-icon .tab-btn.ap.Outdoor-New .icon, .device-icon .tab-btn[data-name=batch-ap].Outdoor-New .icon, .device-icon .tab-btn[data-name=batch-active].Outdoor-New .icon, .device-icon .combobox-list.ap.Outdoor-New .icon,
.device-icon .drawer-title-container.ap.Outdoor-New .icon, .device-icon .device-type.ap.Outdoor-New .icon, .client-icon .tab-btn.ap.Outdoor-New .icon, .client-icon .tab-btn[data-name=batch-ap].Outdoor-New .icon, .client-icon .tab-btn[data-name=batch-active].Outdoor-New .icon, .client-icon .combobox-list.ap.Outdoor-New .icon,
.client-icon .drawer-title-container.ap.Outdoor-New .icon, .client-icon .device-type.ap.Outdoor-New .icon,
#global-combobox-options .tab-btn.ap.Outdoor-New .icon,
#global-combobox-options .tab-btn[data-name=batch-ap].Outdoor-New .icon,
#global-combobox-options .tab-btn[data-name=batch-active].Outdoor-New .icon,
#global-combobox-options .combobox-list.ap.Outdoor-New .icon,
#global-combobox-options .drawer-title-container.ap.Outdoor-New .icon,
#global-combobox-options .device-type.ap.Outdoor-New .icon, #customer-combobox-options .tab-btn.ap.Outdoor-New .icon, #customer-combobox-options .tab-btn[data-name=batch-ap].Outdoor-New .icon, #customer-combobox-options .tab-btn[data-name=batch-active].Outdoor-New .icon, #customer-combobox-options .combobox-list.ap.Outdoor-New .icon,
#customer-combobox-options .drawer-title-container.ap.Outdoor-New .icon, #customer-combobox-options .device-type.ap.Outdoor-New .icon, .statistics-charts-container .tab-btn.ap.Outdoor-New .icon, .statistics-charts-container .tab-btn[data-name=batch-ap].Outdoor-New .icon, .statistics-charts-container .tab-btn[data-name=batch-active].Outdoor-New .icon, .statistics-charts-container .combobox-list.ap.Outdoor-New .icon,
.statistics-charts-container .drawer-title-container.ap.Outdoor-New .icon, .statistics-charts-container .device-type.ap.Outdoor-New .icon, .devicesList-item-device-icon .tab-btn.ap.Outdoor-New .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-ap].Outdoor-New .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-active].Outdoor-New .icon, .devicesList-item-device-icon .combobox-list.ap.Outdoor-New .icon,
.devicesList-item-device-icon .drawer-title-container.ap.Outdoor-New .icon, .devicesList-item-device-icon .device-type.ap.Outdoor-New .icon, .detect-aps-list-container .tab-btn.ap.Outdoor-New .icon, .detect-aps-list-container .tab-btn[data-name=batch-ap].Outdoor-New .icon, .detect-aps-list-container .tab-btn[data-name=batch-active].Outdoor-New .icon, .detect-aps-list-container .combobox-list.ap.Outdoor-New .icon,
.detect-aps-list-container .drawer-title-container.ap.Outdoor-New .icon, .detect-aps-list-container .device-type.ap.Outdoor-New .icon {
  background: url(../img/deviceIcon/outdoorNew.png) no-repeat;
}
.drawer-container.shown .tab-btn.ap.n11-UK .icon, .drawer-container.shown .tab-btn[data-name=batch-ap].n11-UK .icon, .drawer-container.shown .tab-btn[data-name=batch-active].n11-UK .icon, .drawer-container.shown .combobox-list.ap.n11-UK .icon,
.drawer-container.shown .drawer-title-container.ap.n11-UK .icon, .drawer-container.shown .device-type.ap.n11-UK .icon, .device-icon .tab-btn.ap.n11-UK .icon, .device-icon .tab-btn[data-name=batch-ap].n11-UK .icon, .device-icon .tab-btn[data-name=batch-active].n11-UK .icon, .device-icon .combobox-list.ap.n11-UK .icon,
.device-icon .drawer-title-container.ap.n11-UK .icon, .device-icon .device-type.ap.n11-UK .icon, .client-icon .tab-btn.ap.n11-UK .icon, .client-icon .tab-btn[data-name=batch-ap].n11-UK .icon, .client-icon .tab-btn[data-name=batch-active].n11-UK .icon, .client-icon .combobox-list.ap.n11-UK .icon,
.client-icon .drawer-title-container.ap.n11-UK .icon, .client-icon .device-type.ap.n11-UK .icon,
#global-combobox-options .tab-btn.ap.n11-UK .icon,
#global-combobox-options .tab-btn[data-name=batch-ap].n11-UK .icon,
#global-combobox-options .tab-btn[data-name=batch-active].n11-UK .icon,
#global-combobox-options .combobox-list.ap.n11-UK .icon,
#global-combobox-options .drawer-title-container.ap.n11-UK .icon,
#global-combobox-options .device-type.ap.n11-UK .icon, #customer-combobox-options .tab-btn.ap.n11-UK .icon, #customer-combobox-options .tab-btn[data-name=batch-ap].n11-UK .icon, #customer-combobox-options .tab-btn[data-name=batch-active].n11-UK .icon, #customer-combobox-options .combobox-list.ap.n11-UK .icon,
#customer-combobox-options .drawer-title-container.ap.n11-UK .icon, #customer-combobox-options .device-type.ap.n11-UK .icon, .statistics-charts-container .tab-btn.ap.n11-UK .icon, .statistics-charts-container .tab-btn[data-name=batch-ap].n11-UK .icon, .statistics-charts-container .tab-btn[data-name=batch-active].n11-UK .icon, .statistics-charts-container .combobox-list.ap.n11-UK .icon,
.statistics-charts-container .drawer-title-container.ap.n11-UK .icon, .statistics-charts-container .device-type.ap.n11-UK .icon, .devicesList-item-device-icon .tab-btn.ap.n11-UK .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-ap].n11-UK .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-active].n11-UK .icon, .devicesList-item-device-icon .combobox-list.ap.n11-UK .icon,
.devicesList-item-device-icon .drawer-title-container.ap.n11-UK .icon, .devicesList-item-device-icon .device-type.ap.n11-UK .icon, .detect-aps-list-container .tab-btn.ap.n11-UK .icon, .detect-aps-list-container .tab-btn[data-name=batch-ap].n11-UK .icon, .detect-aps-list-container .tab-btn[data-name=batch-active].n11-UK .icon, .detect-aps-list-container .combobox-list.ap.n11-UK .icon,
.detect-aps-list-container .drawer-title-container.ap.n11-UK .icon, .detect-aps-list-container .device-type.ap.n11-UK .icon {
  background: url(../img/deviceIcon/n11uk.png) no-repeat;
}
.drawer-container.shown .tab-btn.ap.ac11-Compatible .icon, .drawer-container.shown .tab-btn[data-name=batch-ap].ac11-Compatible .icon, .drawer-container.shown .tab-btn[data-name=batch-active].ac11-Compatible .icon, .drawer-container.shown .combobox-list.ap.ac11-Compatible .icon,
.drawer-container.shown .drawer-title-container.ap.ac11-Compatible .icon, .drawer-container.shown .device-type.ap.ac11-Compatible .icon, .device-icon .tab-btn.ap.ac11-Compatible .icon, .device-icon .tab-btn[data-name=batch-ap].ac11-Compatible .icon, .device-icon .tab-btn[data-name=batch-active].ac11-Compatible .icon, .device-icon .combobox-list.ap.ac11-Compatible .icon,
.device-icon .drawer-title-container.ap.ac11-Compatible .icon, .device-icon .device-type.ap.ac11-Compatible .icon, .client-icon .tab-btn.ap.ac11-Compatible .icon, .client-icon .tab-btn[data-name=batch-ap].ac11-Compatible .icon, .client-icon .tab-btn[data-name=batch-active].ac11-Compatible .icon, .client-icon .combobox-list.ap.ac11-Compatible .icon,
.client-icon .drawer-title-container.ap.ac11-Compatible .icon, .client-icon .device-type.ap.ac11-Compatible .icon,
#global-combobox-options .tab-btn.ap.ac11-Compatible .icon,
#global-combobox-options .tab-btn[data-name=batch-ap].ac11-Compatible .icon,
#global-combobox-options .tab-btn[data-name=batch-active].ac11-Compatible .icon,
#global-combobox-options .combobox-list.ap.ac11-Compatible .icon,
#global-combobox-options .drawer-title-container.ap.ac11-Compatible .icon,
#global-combobox-options .device-type.ap.ac11-Compatible .icon, #customer-combobox-options .tab-btn.ap.ac11-Compatible .icon, #customer-combobox-options .tab-btn[data-name=batch-ap].ac11-Compatible .icon, #customer-combobox-options .tab-btn[data-name=batch-active].ac11-Compatible .icon, #customer-combobox-options .combobox-list.ap.ac11-Compatible .icon,
#customer-combobox-options .drawer-title-container.ap.ac11-Compatible .icon, #customer-combobox-options .device-type.ap.ac11-Compatible .icon, .statistics-charts-container .tab-btn.ap.ac11-Compatible .icon, .statistics-charts-container .tab-btn[data-name=batch-ap].ac11-Compatible .icon, .statistics-charts-container .tab-btn[data-name=batch-active].ac11-Compatible .icon, .statistics-charts-container .combobox-list.ap.ac11-Compatible .icon,
.statistics-charts-container .drawer-title-container.ap.ac11-Compatible .icon, .statistics-charts-container .device-type.ap.ac11-Compatible .icon, .devicesList-item-device-icon .tab-btn.ap.ac11-Compatible .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-ap].ac11-Compatible .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-active].ac11-Compatible .icon, .devicesList-item-device-icon .combobox-list.ap.ac11-Compatible .icon,
.devicesList-item-device-icon .drawer-title-container.ap.ac11-Compatible .icon, .devicesList-item-device-icon .device-type.ap.ac11-Compatible .icon, .detect-aps-list-container .tab-btn.ap.ac11-Compatible .icon, .detect-aps-list-container .tab-btn[data-name=batch-ap].ac11-Compatible .icon, .detect-aps-list-container .tab-btn[data-name=batch-active].ac11-Compatible .icon, .detect-aps-list-container .combobox-list.ap.ac11-Compatible .icon,
.detect-aps-list-container .drawer-title-container.ap.ac11-Compatible .icon, .detect-aps-list-container .device-type.ap.ac11-Compatible .icon {
  background: url(../img/deviceIcon/ac11.png) no-repeat;
}
.drawer-container.shown .tab-btn.ap.hd620 .icon, .drawer-container.shown .tab-btn[data-name=batch-ap].hd620 .icon, .drawer-container.shown .tab-btn[data-name=batch-active].hd620 .icon, .drawer-container.shown .combobox-list.ap.hd620 .icon,
.drawer-container.shown .drawer-title-container.ap.hd620 .icon, .drawer-container.shown .device-type.ap.hd620 .icon, .device-icon .tab-btn.ap.hd620 .icon, .device-icon .tab-btn[data-name=batch-ap].hd620 .icon, .device-icon .tab-btn[data-name=batch-active].hd620 .icon, .device-icon .combobox-list.ap.hd620 .icon,
.device-icon .drawer-title-container.ap.hd620 .icon, .device-icon .device-type.ap.hd620 .icon, .client-icon .tab-btn.ap.hd620 .icon, .client-icon .tab-btn[data-name=batch-ap].hd620 .icon, .client-icon .tab-btn[data-name=batch-active].hd620 .icon, .client-icon .combobox-list.ap.hd620 .icon,
.client-icon .drawer-title-container.ap.hd620 .icon, .client-icon .device-type.ap.hd620 .icon,
#global-combobox-options .tab-btn.ap.hd620 .icon,
#global-combobox-options .tab-btn[data-name=batch-ap].hd620 .icon,
#global-combobox-options .tab-btn[data-name=batch-active].hd620 .icon,
#global-combobox-options .combobox-list.ap.hd620 .icon,
#global-combobox-options .drawer-title-container.ap.hd620 .icon,
#global-combobox-options .device-type.ap.hd620 .icon, #customer-combobox-options .tab-btn.ap.hd620 .icon, #customer-combobox-options .tab-btn[data-name=batch-ap].hd620 .icon, #customer-combobox-options .tab-btn[data-name=batch-active].hd620 .icon, #customer-combobox-options .combobox-list.ap.hd620 .icon,
#customer-combobox-options .drawer-title-container.ap.hd620 .icon, #customer-combobox-options .device-type.ap.hd620 .icon, .statistics-charts-container .tab-btn.ap.hd620 .icon, .statistics-charts-container .tab-btn[data-name=batch-ap].hd620 .icon, .statistics-charts-container .tab-btn[data-name=batch-active].hd620 .icon, .statistics-charts-container .combobox-list.ap.hd620 .icon,
.statistics-charts-container .drawer-title-container.ap.hd620 .icon, .statistics-charts-container .device-type.ap.hd620 .icon, .devicesList-item-device-icon .tab-btn.ap.hd620 .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-ap].hd620 .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-active].hd620 .icon, .devicesList-item-device-icon .combobox-list.ap.hd620 .icon,
.devicesList-item-device-icon .drawer-title-container.ap.hd620 .icon, .devicesList-item-device-icon .device-type.ap.hd620 .icon, .detect-aps-list-container .tab-btn.ap.hd620 .icon, .detect-aps-list-container .tab-btn[data-name=batch-ap].hd620 .icon, .detect-aps-list-container .tab-btn[data-name=batch-active].hd620 .icon, .detect-aps-list-container .combobox-list.ap.hd620 .icon,
.detect-aps-list-container .drawer-title-container.ap.hd620 .icon, .detect-aps-list-container .device-type.ap.hd620 .icon {
  background: url(../img/deviceIcon/EAP650.png) no-repeat;
}
.drawer-container.shown .tab-btn.ap.hd620-outdoor .icon, .drawer-container.shown .tab-btn[data-name=batch-ap].hd620-outdoor .icon, .drawer-container.shown .tab-btn[data-name=batch-active].hd620-outdoor .icon, .drawer-container.shown .combobox-list.ap.hd620-outdoor .icon,
.drawer-container.shown .drawer-title-container.ap.hd620-outdoor .icon, .drawer-container.shown .device-type.ap.hd620-outdoor .icon, .device-icon .tab-btn.ap.hd620-outdoor .icon, .device-icon .tab-btn[data-name=batch-ap].hd620-outdoor .icon, .device-icon .tab-btn[data-name=batch-active].hd620-outdoor .icon, .device-icon .combobox-list.ap.hd620-outdoor .icon,
.device-icon .drawer-title-container.ap.hd620-outdoor .icon, .device-icon .device-type.ap.hd620-outdoor .icon, .client-icon .tab-btn.ap.hd620-outdoor .icon, .client-icon .tab-btn[data-name=batch-ap].hd620-outdoor .icon, .client-icon .tab-btn[data-name=batch-active].hd620-outdoor .icon, .client-icon .combobox-list.ap.hd620-outdoor .icon,
.client-icon .drawer-title-container.ap.hd620-outdoor .icon, .client-icon .device-type.ap.hd620-outdoor .icon,
#global-combobox-options .tab-btn.ap.hd620-outdoor .icon,
#global-combobox-options .tab-btn[data-name=batch-ap].hd620-outdoor .icon,
#global-combobox-options .tab-btn[data-name=batch-active].hd620-outdoor .icon,
#global-combobox-options .combobox-list.ap.hd620-outdoor .icon,
#global-combobox-options .drawer-title-container.ap.hd620-outdoor .icon,
#global-combobox-options .device-type.ap.hd620-outdoor .icon, #customer-combobox-options .tab-btn.ap.hd620-outdoor .icon, #customer-combobox-options .tab-btn[data-name=batch-ap].hd620-outdoor .icon, #customer-combobox-options .tab-btn[data-name=batch-active].hd620-outdoor .icon, #customer-combobox-options .combobox-list.ap.hd620-outdoor .icon,
#customer-combobox-options .drawer-title-container.ap.hd620-outdoor .icon, #customer-combobox-options .device-type.ap.hd620-outdoor .icon, .statistics-charts-container .tab-btn.ap.hd620-outdoor .icon, .statistics-charts-container .tab-btn[data-name=batch-ap].hd620-outdoor .icon, .statistics-charts-container .tab-btn[data-name=batch-active].hd620-outdoor .icon, .statistics-charts-container .combobox-list.ap.hd620-outdoor .icon,
.statistics-charts-container .drawer-title-container.ap.hd620-outdoor .icon, .statistics-charts-container .device-type.ap.hd620-outdoor .icon, .devicesList-item-device-icon .tab-btn.ap.hd620-outdoor .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-ap].hd620-outdoor .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-active].hd620-outdoor .icon, .devicesList-item-device-icon .combobox-list.ap.hd620-outdoor .icon,
.devicesList-item-device-icon .drawer-title-container.ap.hd620-outdoor .icon, .devicesList-item-device-icon .device-type.ap.hd620-outdoor .icon, .detect-aps-list-container .tab-btn.ap.hd620-outdoor .icon, .detect-aps-list-container .tab-btn[data-name=batch-ap].hd620-outdoor .icon, .detect-aps-list-container .tab-btn[data-name=batch-active].hd620-outdoor .icon, .detect-aps-list-container .combobox-list.ap.hd620-outdoor .icon,
.detect-aps-list-container .drawer-title-container.ap.hd620-outdoor .icon, .detect-aps-list-container .device-type.ap.hd620-outdoor .icon {
  background: url(../img/deviceIcon/EAP620-Outdoor_HD.png) no-repeat;
}
.drawer-container.shown .tab-btn.ap.eap650-wall .icon, .drawer-container.shown .tab-btn[data-name=batch-ap].eap650-wall .icon, .drawer-container.shown .tab-btn[data-name=batch-active].eap650-wall .icon, .drawer-container.shown .combobox-list.ap.eap650-wall .icon,
.drawer-container.shown .drawer-title-container.ap.eap650-wall .icon, .drawer-container.shown .device-type.ap.eap650-wall .icon, .device-icon .tab-btn.ap.eap650-wall .icon, .device-icon .tab-btn[data-name=batch-ap].eap650-wall .icon, .device-icon .tab-btn[data-name=batch-active].eap650-wall .icon, .device-icon .combobox-list.ap.eap650-wall .icon,
.device-icon .drawer-title-container.ap.eap650-wall .icon, .device-icon .device-type.ap.eap650-wall .icon, .client-icon .tab-btn.ap.eap650-wall .icon, .client-icon .tab-btn[data-name=batch-ap].eap650-wall .icon, .client-icon .tab-btn[data-name=batch-active].eap650-wall .icon, .client-icon .combobox-list.ap.eap650-wall .icon,
.client-icon .drawer-title-container.ap.eap650-wall .icon, .client-icon .device-type.ap.eap650-wall .icon,
#global-combobox-options .tab-btn.ap.eap650-wall .icon,
#global-combobox-options .tab-btn[data-name=batch-ap].eap650-wall .icon,
#global-combobox-options .tab-btn[data-name=batch-active].eap650-wall .icon,
#global-combobox-options .combobox-list.ap.eap650-wall .icon,
#global-combobox-options .drawer-title-container.ap.eap650-wall .icon,
#global-combobox-options .device-type.ap.eap650-wall .icon, #customer-combobox-options .tab-btn.ap.eap650-wall .icon, #customer-combobox-options .tab-btn[data-name=batch-ap].eap650-wall .icon, #customer-combobox-options .tab-btn[data-name=batch-active].eap650-wall .icon, #customer-combobox-options .combobox-list.ap.eap650-wall .icon,
#customer-combobox-options .drawer-title-container.ap.eap650-wall .icon, #customer-combobox-options .device-type.ap.eap650-wall .icon, .statistics-charts-container .tab-btn.ap.eap650-wall .icon, .statistics-charts-container .tab-btn[data-name=batch-ap].eap650-wall .icon, .statistics-charts-container .tab-btn[data-name=batch-active].eap650-wall .icon, .statistics-charts-container .combobox-list.ap.eap650-wall .icon,
.statistics-charts-container .drawer-title-container.ap.eap650-wall .icon, .statistics-charts-container .device-type.ap.eap650-wall .icon, .devicesList-item-device-icon .tab-btn.ap.eap650-wall .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-ap].eap650-wall .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-active].eap650-wall .icon, .devicesList-item-device-icon .combobox-list.ap.eap650-wall .icon,
.devicesList-item-device-icon .drawer-title-container.ap.eap650-wall .icon, .devicesList-item-device-icon .device-type.ap.eap650-wall .icon, .detect-aps-list-container .tab-btn.ap.eap650-wall .icon, .detect-aps-list-container .tab-btn[data-name=batch-ap].eap650-wall .icon, .detect-aps-list-container .tab-btn[data-name=batch-active].eap650-wall .icon, .detect-aps-list-container .combobox-list.ap.eap650-wall .icon,
.detect-aps-list-container .drawer-title-container.ap.eap650-wall .icon, .detect-aps-list-container .device-type.ap.eap650-wall .icon {
  background: url(../img/deviceIcon/EAP650-Wall.png) no-repeat;
}
.drawer-container.shown .tab-btn.ap.eap655-wall .icon, .drawer-container.shown .tab-btn[data-name=batch-ap].eap655-wall .icon, .drawer-container.shown .tab-btn[data-name=batch-active].eap655-wall .icon, .drawer-container.shown .combobox-list.ap.eap655-wall .icon,
.drawer-container.shown .drawer-title-container.ap.eap655-wall .icon, .drawer-container.shown .device-type.ap.eap655-wall .icon, .device-icon .tab-btn.ap.eap655-wall .icon, .device-icon .tab-btn[data-name=batch-ap].eap655-wall .icon, .device-icon .tab-btn[data-name=batch-active].eap655-wall .icon, .device-icon .combobox-list.ap.eap655-wall .icon,
.device-icon .drawer-title-container.ap.eap655-wall .icon, .device-icon .device-type.ap.eap655-wall .icon, .client-icon .tab-btn.ap.eap655-wall .icon, .client-icon .tab-btn[data-name=batch-ap].eap655-wall .icon, .client-icon .tab-btn[data-name=batch-active].eap655-wall .icon, .client-icon .combobox-list.ap.eap655-wall .icon,
.client-icon .drawer-title-container.ap.eap655-wall .icon, .client-icon .device-type.ap.eap655-wall .icon,
#global-combobox-options .tab-btn.ap.eap655-wall .icon,
#global-combobox-options .tab-btn[data-name=batch-ap].eap655-wall .icon,
#global-combobox-options .tab-btn[data-name=batch-active].eap655-wall .icon,
#global-combobox-options .combobox-list.ap.eap655-wall .icon,
#global-combobox-options .drawer-title-container.ap.eap655-wall .icon,
#global-combobox-options .device-type.ap.eap655-wall .icon, #customer-combobox-options .tab-btn.ap.eap655-wall .icon, #customer-combobox-options .tab-btn[data-name=batch-ap].eap655-wall .icon, #customer-combobox-options .tab-btn[data-name=batch-active].eap655-wall .icon, #customer-combobox-options .combobox-list.ap.eap655-wall .icon,
#customer-combobox-options .drawer-title-container.ap.eap655-wall .icon, #customer-combobox-options .device-type.ap.eap655-wall .icon, .statistics-charts-container .tab-btn.ap.eap655-wall .icon, .statistics-charts-container .tab-btn[data-name=batch-ap].eap655-wall .icon, .statistics-charts-container .tab-btn[data-name=batch-active].eap655-wall .icon, .statistics-charts-container .combobox-list.ap.eap655-wall .icon,
.statistics-charts-container .drawer-title-container.ap.eap655-wall .icon, .statistics-charts-container .device-type.ap.eap655-wall .icon, .devicesList-item-device-icon .tab-btn.ap.eap655-wall .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-ap].eap655-wall .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-active].eap655-wall .icon, .devicesList-item-device-icon .combobox-list.ap.eap655-wall .icon,
.devicesList-item-device-icon .drawer-title-container.ap.eap655-wall .icon, .devicesList-item-device-icon .device-type.ap.eap655-wall .icon, .detect-aps-list-container .tab-btn.ap.eap655-wall .icon, .detect-aps-list-container .tab-btn[data-name=batch-ap].eap655-wall .icon, .detect-aps-list-container .tab-btn[data-name=batch-active].eap655-wall .icon, .detect-aps-list-container .combobox-list.ap.eap655-wall .icon,
.detect-aps-list-container .drawer-title-container.ap.eap655-wall .icon, .detect-aps-list-container .device-type.ap.eap655-wall .icon {
  background: url(../img/deviceIcon/EAP655-Wall.png) no-repeat;
}
.drawer-container.shown .tab-btn.clients .icon, .drawer-container.shown .tab-btn[data-name=batch-clients] .icon,
.drawer-container.shown .drawer-title-container.clients .icon, .drawer-container.shown .client-type .icon, .drawer-container.shown .charts-icons.client .icon, .device-icon .tab-btn.clients .icon, .device-icon .tab-btn[data-name=batch-clients] .icon,
.device-icon .drawer-title-container.clients .icon, .device-icon .client-type .icon, .device-icon .charts-icons.client .icon, .client-icon .tab-btn.clients .icon, .client-icon .tab-btn[data-name=batch-clients] .icon,
.client-icon .drawer-title-container.clients .icon, .client-icon .client-type .icon, .client-icon .charts-icons.client .icon,
#global-combobox-options .tab-btn.clients .icon,
#global-combobox-options .tab-btn[data-name=batch-clients] .icon,
#global-combobox-options .drawer-title-container.clients .icon,
#global-combobox-options .client-type .icon,
#global-combobox-options .charts-icons.client .icon, #customer-combobox-options .tab-btn.clients .icon, #customer-combobox-options .tab-btn[data-name=batch-clients] .icon,
#customer-combobox-options .drawer-title-container.clients .icon, #customer-combobox-options .client-type .icon, #customer-combobox-options .charts-icons.client .icon, .statistics-charts-container .tab-btn.clients .icon, .statistics-charts-container .tab-btn[data-name=batch-clients] .icon,
.statistics-charts-container .drawer-title-container.clients .icon, .statistics-charts-container .client-type .icon, .statistics-charts-container .charts-icons.client .icon, .devicesList-item-device-icon .tab-btn.clients .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-clients] .icon,
.devicesList-item-device-icon .drawer-title-container.clients .icon, .devicesList-item-device-icon .client-type .icon, .devicesList-item-device-icon .charts-icons.client .icon, .detect-aps-list-container .tab-btn.clients .icon, .detect-aps-list-container .tab-btn[data-name=batch-clients] .icon,
.detect-aps-list-container .drawer-title-container.clients .icon, .detect-aps-list-container .client-type .icon, .detect-aps-list-container .charts-icons.client .icon {
  width: 40px;
  height: 40px;
}
.drawer-container.shown .tab-btn.clients.charts-icons.client .icon, .drawer-container.shown .tab-btn[data-name=batch-clients].charts-icons.client .icon,
.drawer-container.shown .drawer-title-container.clients.charts-icons.client .icon, .drawer-container.shown .client-type.charts-icons.client .icon, .drawer-container.shown .charts-icons.client.charts-icons.client .icon, .device-icon .tab-btn.clients.charts-icons.client .icon, .device-icon .tab-btn[data-name=batch-clients].charts-icons.client .icon,
.device-icon .drawer-title-container.clients.charts-icons.client .icon, .device-icon .client-type.charts-icons.client .icon, .device-icon .charts-icons.client.charts-icons.client .icon, .client-icon .tab-btn.clients.charts-icons.client .icon, .client-icon .tab-btn[data-name=batch-clients].charts-icons.client .icon,
.client-icon .drawer-title-container.clients.charts-icons.client .icon, .client-icon .client-type.charts-icons.client .icon, .client-icon .charts-icons.client.charts-icons.client .icon,
#global-combobox-options .tab-btn.clients.charts-icons.client .icon,
#global-combobox-options .tab-btn[data-name=batch-clients].charts-icons.client .icon,
#global-combobox-options .drawer-title-container.clients.charts-icons.client .icon,
#global-combobox-options .client-type.charts-icons.client .icon,
#global-combobox-options .charts-icons.client.charts-icons.client .icon, #customer-combobox-options .tab-btn.clients.charts-icons.client .icon, #customer-combobox-options .tab-btn[data-name=batch-clients].charts-icons.client .icon,
#customer-combobox-options .drawer-title-container.clients.charts-icons.client .icon, #customer-combobox-options .client-type.charts-icons.client .icon, #customer-combobox-options .charts-icons.client.charts-icons.client .icon, .statistics-charts-container .tab-btn.clients.charts-icons.client .icon, .statistics-charts-container .tab-btn[data-name=batch-clients].charts-icons.client .icon,
.statistics-charts-container .drawer-title-container.clients.charts-icons.client .icon, .statistics-charts-container .client-type.charts-icons.client .icon, .statistics-charts-container .charts-icons.client.charts-icons.client .icon, .devicesList-item-device-icon .tab-btn.clients.charts-icons.client .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-clients].charts-icons.client .icon,
.devicesList-item-device-icon .drawer-title-container.clients.charts-icons.client .icon, .devicesList-item-device-icon .client-type.charts-icons.client .icon, .devicesList-item-device-icon .charts-icons.client.charts-icons.client .icon, .detect-aps-list-container .tab-btn.clients.charts-icons.client .icon, .detect-aps-list-container .tab-btn[data-name=batch-clients].charts-icons.client .icon,
.detect-aps-list-container .drawer-title-container.clients.charts-icons.client .icon, .detect-aps-list-container .client-type.charts-icons.client .icon, .detect-aps-list-container .charts-icons.client.charts-icons.client .icon {
  width: 30px;
  height: 30px;
  background-size: contain;
}
.drawer-container.shown .tab-btn.clients.manager:before, .drawer-container.shown .tab-btn[data-name=batch-clients].manager:before,
.drawer-container.shown .drawer-title-container.clients.manager:before, .drawer-container.shown .client-type.manager:before, .drawer-container.shown .charts-icons.client.manager:before, .device-icon .tab-btn.clients.manager:before, .device-icon .tab-btn[data-name=batch-clients].manager:before,
.device-icon .drawer-title-container.clients.manager:before, .device-icon .client-type.manager:before, .device-icon .charts-icons.client.manager:before, .client-icon .tab-btn.clients.manager:before, .client-icon .tab-btn[data-name=batch-clients].manager:before,
.client-icon .drawer-title-container.clients.manager:before, .client-icon .client-type.manager:before, .client-icon .charts-icons.client.manager:before,
#global-combobox-options .tab-btn.clients.manager:before,
#global-combobox-options .tab-btn[data-name=batch-clients].manager:before,
#global-combobox-options .drawer-title-container.clients.manager:before,
#global-combobox-options .client-type.manager:before,
#global-combobox-options .charts-icons.client.manager:before, #customer-combobox-options .tab-btn.clients.manager:before, #customer-combobox-options .tab-btn[data-name=batch-clients].manager:before,
#customer-combobox-options .drawer-title-container.clients.manager:before, #customer-combobox-options .client-type.manager:before, #customer-combobox-options .charts-icons.client.manager:before, .statistics-charts-container .tab-btn.clients.manager:before, .statistics-charts-container .tab-btn[data-name=batch-clients].manager:before,
.statistics-charts-container .drawer-title-container.clients.manager:before, .statistics-charts-container .client-type.manager:before, .statistics-charts-container .charts-icons.client.manager:before, .devicesList-item-device-icon .tab-btn.clients.manager:before, .devicesList-item-device-icon .tab-btn[data-name=batch-clients].manager:before,
.devicesList-item-device-icon .drawer-title-container.clients.manager:before, .devicesList-item-device-icon .client-type.manager:before, .devicesList-item-device-icon .charts-icons.client.manager:before, .detect-aps-list-container .tab-btn.clients.manager:before, .detect-aps-list-container .tab-btn[data-name=batch-clients].manager:before,
.detect-aps-list-container .drawer-title-container.clients.manager:before, .detect-aps-list-container .client-type.manager:before, .detect-aps-list-container .charts-icons.client.manager:before {
  width: 16px;
  height: 16px;
  background: url(../img/clientIcon/manager.png) no-repeat;
}
.drawer-container.shown .tab-btn.clients.charts-icons.client.manager:before, .drawer-container.shown .tab-btn[data-name=batch-clients].charts-icons.client.manager:before,
.drawer-container.shown .drawer-title-container.clients.charts-icons.client.manager:before, .drawer-container.shown .client-type.charts-icons.client.manager:before, .drawer-container.shown .charts-icons.client.charts-icons.client.manager:before, .device-icon .tab-btn.clients.charts-icons.client.manager:before, .device-icon .tab-btn[data-name=batch-clients].charts-icons.client.manager:before,
.device-icon .drawer-title-container.clients.charts-icons.client.manager:before, .device-icon .client-type.charts-icons.client.manager:before, .device-icon .charts-icons.client.charts-icons.client.manager:before, .client-icon .tab-btn.clients.charts-icons.client.manager:before, .client-icon .tab-btn[data-name=batch-clients].charts-icons.client.manager:before,
.client-icon .drawer-title-container.clients.charts-icons.client.manager:before, .client-icon .client-type.charts-icons.client.manager:before, .client-icon .charts-icons.client.charts-icons.client.manager:before,
#global-combobox-options .tab-btn.clients.charts-icons.client.manager:before,
#global-combobox-options .tab-btn[data-name=batch-clients].charts-icons.client.manager:before,
#global-combobox-options .drawer-title-container.clients.charts-icons.client.manager:before,
#global-combobox-options .client-type.charts-icons.client.manager:before,
#global-combobox-options .charts-icons.client.charts-icons.client.manager:before, #customer-combobox-options .tab-btn.clients.charts-icons.client.manager:before, #customer-combobox-options .tab-btn[data-name=batch-clients].charts-icons.client.manager:before,
#customer-combobox-options .drawer-title-container.clients.charts-icons.client.manager:before, #customer-combobox-options .client-type.charts-icons.client.manager:before, #customer-combobox-options .charts-icons.client.charts-icons.client.manager:before, .statistics-charts-container .tab-btn.clients.charts-icons.client.manager:before, .statistics-charts-container .tab-btn[data-name=batch-clients].charts-icons.client.manager:before,
.statistics-charts-container .drawer-title-container.clients.charts-icons.client.manager:before, .statistics-charts-container .client-type.charts-icons.client.manager:before, .statistics-charts-container .charts-icons.client.charts-icons.client.manager:before, .devicesList-item-device-icon .tab-btn.clients.charts-icons.client.manager:before, .devicesList-item-device-icon .tab-btn[data-name=batch-clients].charts-icons.client.manager:before,
.devicesList-item-device-icon .drawer-title-container.clients.charts-icons.client.manager:before, .devicesList-item-device-icon .client-type.charts-icons.client.manager:before, .devicesList-item-device-icon .charts-icons.client.charts-icons.client.manager:before, .detect-aps-list-container .tab-btn.clients.charts-icons.client.manager:before, .detect-aps-list-container .tab-btn[data-name=batch-clients].charts-icons.client.manager:before,
.detect-aps-list-container .drawer-title-container.clients.charts-icons.client.manager:before, .detect-aps-list-container .client-type.charts-icons.client.manager:before, .detect-aps-list-container .charts-icons.client.charts-icons.client.manager:before {
  width: 12px;
  height: 12px;
  background-size: contain;
}
.drawer-container.shown .tab-btn.clients.android .icon, .drawer-container.shown .tab-btn[data-name=batch-clients].android .icon,
.drawer-container.shown .drawer-title-container.clients.android .icon, .drawer-container.shown .client-type.android .icon, .drawer-container.shown .charts-icons.client.android .icon, .device-icon .tab-btn.clients.android .icon, .device-icon .tab-btn[data-name=batch-clients].android .icon,
.device-icon .drawer-title-container.clients.android .icon, .device-icon .client-type.android .icon, .device-icon .charts-icons.client.android .icon, .client-icon .tab-btn.clients.android .icon, .client-icon .tab-btn[data-name=batch-clients].android .icon,
.client-icon .drawer-title-container.clients.android .icon, .client-icon .client-type.android .icon, .client-icon .charts-icons.client.android .icon,
#global-combobox-options .tab-btn.clients.android .icon,
#global-combobox-options .tab-btn[data-name=batch-clients].android .icon,
#global-combobox-options .drawer-title-container.clients.android .icon,
#global-combobox-options .client-type.android .icon,
#global-combobox-options .charts-icons.client.android .icon, #customer-combobox-options .tab-btn.clients.android .icon, #customer-combobox-options .tab-btn[data-name=batch-clients].android .icon,
#customer-combobox-options .drawer-title-container.clients.android .icon, #customer-combobox-options .client-type.android .icon, #customer-combobox-options .charts-icons.client.android .icon, .statistics-charts-container .tab-btn.clients.android .icon, .statistics-charts-container .tab-btn[data-name=batch-clients].android .icon,
.statistics-charts-container .drawer-title-container.clients.android .icon, .statistics-charts-container .client-type.android .icon, .statistics-charts-container .charts-icons.client.android .icon, .devicesList-item-device-icon .tab-btn.clients.android .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-clients].android .icon,
.devicesList-item-device-icon .drawer-title-container.clients.android .icon, .devicesList-item-device-icon .client-type.android .icon, .devicesList-item-device-icon .charts-icons.client.android .icon, .detect-aps-list-container .tab-btn.clients.android .icon, .detect-aps-list-container .tab-btn[data-name=batch-clients].android .icon,
.detect-aps-list-container .drawer-title-container.clients.android .icon, .detect-aps-list-container .client-type.android .icon, .detect-aps-list-container .charts-icons.client.android .icon {
  background: url(../img/clientIcon/android.png) no-repeat;
}
.drawer-container.shown .tab-btn.clients.harddisk .icon, .drawer-container.shown .tab-btn[data-name=batch-clients].harddisk .icon,
.drawer-container.shown .drawer-title-container.clients.harddisk .icon, .drawer-container.shown .client-type.harddisk .icon, .drawer-container.shown .charts-icons.client.harddisk .icon, .device-icon .tab-btn.clients.harddisk .icon, .device-icon .tab-btn[data-name=batch-clients].harddisk .icon,
.device-icon .drawer-title-container.clients.harddisk .icon, .device-icon .client-type.harddisk .icon, .device-icon .charts-icons.client.harddisk .icon, .client-icon .tab-btn.clients.harddisk .icon, .client-icon .tab-btn[data-name=batch-clients].harddisk .icon,
.client-icon .drawer-title-container.clients.harddisk .icon, .client-icon .client-type.harddisk .icon, .client-icon .charts-icons.client.harddisk .icon,
#global-combobox-options .tab-btn.clients.harddisk .icon,
#global-combobox-options .tab-btn[data-name=batch-clients].harddisk .icon,
#global-combobox-options .drawer-title-container.clients.harddisk .icon,
#global-combobox-options .client-type.harddisk .icon,
#global-combobox-options .charts-icons.client.harddisk .icon, #customer-combobox-options .tab-btn.clients.harddisk .icon, #customer-combobox-options .tab-btn[data-name=batch-clients].harddisk .icon,
#customer-combobox-options .drawer-title-container.clients.harddisk .icon, #customer-combobox-options .client-type.harddisk .icon, #customer-combobox-options .charts-icons.client.harddisk .icon, .statistics-charts-container .tab-btn.clients.harddisk .icon, .statistics-charts-container .tab-btn[data-name=batch-clients].harddisk .icon,
.statistics-charts-container .drawer-title-container.clients.harddisk .icon, .statistics-charts-container .client-type.harddisk .icon, .statistics-charts-container .charts-icons.client.harddisk .icon, .devicesList-item-device-icon .tab-btn.clients.harddisk .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-clients].harddisk .icon,
.devicesList-item-device-icon .drawer-title-container.clients.harddisk .icon, .devicesList-item-device-icon .client-type.harddisk .icon, .devicesList-item-device-icon .charts-icons.client.harddisk .icon, .detect-aps-list-container .tab-btn.clients.harddisk .icon, .detect-aps-list-container .tab-btn[data-name=batch-clients].harddisk .icon,
.detect-aps-list-container .drawer-title-container.clients.harddisk .icon, .detect-aps-list-container .client-type.harddisk .icon, .detect-aps-list-container .charts-icons.client.harddisk .icon {
  background: url(../img/clientIcon/harddisk.png) no-repeat;
}
.drawer-container.shown .tab-btn.clients.ipad .icon, .drawer-container.shown .tab-btn[data-name=batch-clients].ipad .icon,
.drawer-container.shown .drawer-title-container.clients.ipad .icon, .drawer-container.shown .client-type.ipad .icon, .drawer-container.shown .charts-icons.client.ipad .icon, .device-icon .tab-btn.clients.ipad .icon, .device-icon .tab-btn[data-name=batch-clients].ipad .icon,
.device-icon .drawer-title-container.clients.ipad .icon, .device-icon .client-type.ipad .icon, .device-icon .charts-icons.client.ipad .icon, .client-icon .tab-btn.clients.ipad .icon, .client-icon .tab-btn[data-name=batch-clients].ipad .icon,
.client-icon .drawer-title-container.clients.ipad .icon, .client-icon .client-type.ipad .icon, .client-icon .charts-icons.client.ipad .icon,
#global-combobox-options .tab-btn.clients.ipad .icon,
#global-combobox-options .tab-btn[data-name=batch-clients].ipad .icon,
#global-combobox-options .drawer-title-container.clients.ipad .icon,
#global-combobox-options .client-type.ipad .icon,
#global-combobox-options .charts-icons.client.ipad .icon, #customer-combobox-options .tab-btn.clients.ipad .icon, #customer-combobox-options .tab-btn[data-name=batch-clients].ipad .icon,
#customer-combobox-options .drawer-title-container.clients.ipad .icon, #customer-combobox-options .client-type.ipad .icon, #customer-combobox-options .charts-icons.client.ipad .icon, .statistics-charts-container .tab-btn.clients.ipad .icon, .statistics-charts-container .tab-btn[data-name=batch-clients].ipad .icon,
.statistics-charts-container .drawer-title-container.clients.ipad .icon, .statistics-charts-container .client-type.ipad .icon, .statistics-charts-container .charts-icons.client.ipad .icon, .devicesList-item-device-icon .tab-btn.clients.ipad .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-clients].ipad .icon,
.devicesList-item-device-icon .drawer-title-container.clients.ipad .icon, .devicesList-item-device-icon .client-type.ipad .icon, .devicesList-item-device-icon .charts-icons.client.ipad .icon, .detect-aps-list-container .tab-btn.clients.ipad .icon, .detect-aps-list-container .tab-btn[data-name=batch-clients].ipad .icon,
.detect-aps-list-container .drawer-title-container.clients.ipad .icon, .detect-aps-list-container .client-type.ipad .icon, .detect-aps-list-container .charts-icons.client.ipad .icon {
  background: url(../img/clientIcon/iPad.png) no-repeat;
}
.drawer-container.shown .tab-btn.clients.iphone .icon, .drawer-container.shown .tab-btn[data-name=batch-clients].iphone .icon,
.drawer-container.shown .drawer-title-container.clients.iphone .icon, .drawer-container.shown .client-type.iphone .icon, .drawer-container.shown .charts-icons.client.iphone .icon, .device-icon .tab-btn.clients.iphone .icon, .device-icon .tab-btn[data-name=batch-clients].iphone .icon,
.device-icon .drawer-title-container.clients.iphone .icon, .device-icon .client-type.iphone .icon, .device-icon .charts-icons.client.iphone .icon, .client-icon .tab-btn.clients.iphone .icon, .client-icon .tab-btn[data-name=batch-clients].iphone .icon,
.client-icon .drawer-title-container.clients.iphone .icon, .client-icon .client-type.iphone .icon, .client-icon .charts-icons.client.iphone .icon,
#global-combobox-options .tab-btn.clients.iphone .icon,
#global-combobox-options .tab-btn[data-name=batch-clients].iphone .icon,
#global-combobox-options .drawer-title-container.clients.iphone .icon,
#global-combobox-options .client-type.iphone .icon,
#global-combobox-options .charts-icons.client.iphone .icon, #customer-combobox-options .tab-btn.clients.iphone .icon, #customer-combobox-options .tab-btn[data-name=batch-clients].iphone .icon,
#customer-combobox-options .drawer-title-container.clients.iphone .icon, #customer-combobox-options .client-type.iphone .icon, #customer-combobox-options .charts-icons.client.iphone .icon, .statistics-charts-container .tab-btn.clients.iphone .icon, .statistics-charts-container .tab-btn[data-name=batch-clients].iphone .icon,
.statistics-charts-container .drawer-title-container.clients.iphone .icon, .statistics-charts-container .client-type.iphone .icon, .statistics-charts-container .charts-icons.client.iphone .icon, .devicesList-item-device-icon .tab-btn.clients.iphone .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-clients].iphone .icon,
.devicesList-item-device-icon .drawer-title-container.clients.iphone .icon, .devicesList-item-device-icon .client-type.iphone .icon, .devicesList-item-device-icon .charts-icons.client.iphone .icon, .detect-aps-list-container .tab-btn.clients.iphone .icon, .detect-aps-list-container .tab-btn[data-name=batch-clients].iphone .icon,
.detect-aps-list-container .drawer-title-container.clients.iphone .icon, .detect-aps-list-container .client-type.iphone .icon, .detect-aps-list-container .charts-icons.client.iphone .icon {
  background: url(../img/clientIcon/iPhone.png) no-repeat;
}
.drawer-container.shown .tab-btn.clients.ipod .icon, .drawer-container.shown .tab-btn[data-name=batch-clients].ipod .icon,
.drawer-container.shown .drawer-title-container.clients.ipod .icon, .drawer-container.shown .client-type.ipod .icon, .drawer-container.shown .charts-icons.client.ipod .icon, .device-icon .tab-btn.clients.ipod .icon, .device-icon .tab-btn[data-name=batch-clients].ipod .icon,
.device-icon .drawer-title-container.clients.ipod .icon, .device-icon .client-type.ipod .icon, .device-icon .charts-icons.client.ipod .icon, .client-icon .tab-btn.clients.ipod .icon, .client-icon .tab-btn[data-name=batch-clients].ipod .icon,
.client-icon .drawer-title-container.clients.ipod .icon, .client-icon .client-type.ipod .icon, .client-icon .charts-icons.client.ipod .icon,
#global-combobox-options .tab-btn.clients.ipod .icon,
#global-combobox-options .tab-btn[data-name=batch-clients].ipod .icon,
#global-combobox-options .drawer-title-container.clients.ipod .icon,
#global-combobox-options .client-type.ipod .icon,
#global-combobox-options .charts-icons.client.ipod .icon, #customer-combobox-options .tab-btn.clients.ipod .icon, #customer-combobox-options .tab-btn[data-name=batch-clients].ipod .icon,
#customer-combobox-options .drawer-title-container.clients.ipod .icon, #customer-combobox-options .client-type.ipod .icon, #customer-combobox-options .charts-icons.client.ipod .icon, .statistics-charts-container .tab-btn.clients.ipod .icon, .statistics-charts-container .tab-btn[data-name=batch-clients].ipod .icon,
.statistics-charts-container .drawer-title-container.clients.ipod .icon, .statistics-charts-container .client-type.ipod .icon, .statistics-charts-container .charts-icons.client.ipod .icon, .devicesList-item-device-icon .tab-btn.clients.ipod .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-clients].ipod .icon,
.devicesList-item-device-icon .drawer-title-container.clients.ipod .icon, .devicesList-item-device-icon .client-type.ipod .icon, .devicesList-item-device-icon .charts-icons.client.ipod .icon, .detect-aps-list-container .tab-btn.clients.ipod .icon, .detect-aps-list-container .tab-btn[data-name=batch-clients].ipod .icon,
.detect-aps-list-container .drawer-title-container.clients.ipod .icon, .detect-aps-list-container .client-type.ipod .icon, .detect-aps-list-container .charts-icons.client.ipod .icon {
  background: url(../img/clientIcon/iPod.png) no-repeat;
}
.drawer-container.shown .tab-btn.clients.notebook .icon, .drawer-container.shown .tab-btn[data-name=batch-clients].notebook .icon,
.drawer-container.shown .drawer-title-container.clients.notebook .icon, .drawer-container.shown .client-type.notebook .icon, .drawer-container.shown .charts-icons.client.notebook .icon, .device-icon .tab-btn.clients.notebook .icon, .device-icon .tab-btn[data-name=batch-clients].notebook .icon,
.device-icon .drawer-title-container.clients.notebook .icon, .device-icon .client-type.notebook .icon, .device-icon .charts-icons.client.notebook .icon, .client-icon .tab-btn.clients.notebook .icon, .client-icon .tab-btn[data-name=batch-clients].notebook .icon,
.client-icon .drawer-title-container.clients.notebook .icon, .client-icon .client-type.notebook .icon, .client-icon .charts-icons.client.notebook .icon,
#global-combobox-options .tab-btn.clients.notebook .icon,
#global-combobox-options .tab-btn[data-name=batch-clients].notebook .icon,
#global-combobox-options .drawer-title-container.clients.notebook .icon,
#global-combobox-options .client-type.notebook .icon,
#global-combobox-options .charts-icons.client.notebook .icon, #customer-combobox-options .tab-btn.clients.notebook .icon, #customer-combobox-options .tab-btn[data-name=batch-clients].notebook .icon,
#customer-combobox-options .drawer-title-container.clients.notebook .icon, #customer-combobox-options .client-type.notebook .icon, #customer-combobox-options .charts-icons.client.notebook .icon, .statistics-charts-container .tab-btn.clients.notebook .icon, .statistics-charts-container .tab-btn[data-name=batch-clients].notebook .icon,
.statistics-charts-container .drawer-title-container.clients.notebook .icon, .statistics-charts-container .client-type.notebook .icon, .statistics-charts-container .charts-icons.client.notebook .icon, .devicesList-item-device-icon .tab-btn.clients.notebook .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-clients].notebook .icon,
.devicesList-item-device-icon .drawer-title-container.clients.notebook .icon, .devicesList-item-device-icon .client-type.notebook .icon, .devicesList-item-device-icon .charts-icons.client.notebook .icon, .detect-aps-list-container .tab-btn.clients.notebook .icon, .detect-aps-list-container .tab-btn[data-name=batch-clients].notebook .icon,
.detect-aps-list-container .drawer-title-container.clients.notebook .icon, .detect-aps-list-container .client-type.notebook .icon, .detect-aps-list-container .charts-icons.client.notebook .icon {
  background: url(../img/clientIcon/notebook.png) no-repeat;
}
.drawer-container.shown .tab-btn.clients.pc .icon, .drawer-container.shown .tab-btn[data-name=batch-clients].pc .icon,
.drawer-container.shown .drawer-title-container.clients.pc .icon, .drawer-container.shown .client-type.pc .icon, .drawer-container.shown .charts-icons.client.pc .icon, .device-icon .tab-btn.clients.pc .icon, .device-icon .tab-btn[data-name=batch-clients].pc .icon,
.device-icon .drawer-title-container.clients.pc .icon, .device-icon .client-type.pc .icon, .device-icon .charts-icons.client.pc .icon, .client-icon .tab-btn.clients.pc .icon, .client-icon .tab-btn[data-name=batch-clients].pc .icon,
.client-icon .drawer-title-container.clients.pc .icon, .client-icon .client-type.pc .icon, .client-icon .charts-icons.client.pc .icon,
#global-combobox-options .tab-btn.clients.pc .icon,
#global-combobox-options .tab-btn[data-name=batch-clients].pc .icon,
#global-combobox-options .drawer-title-container.clients.pc .icon,
#global-combobox-options .client-type.pc .icon,
#global-combobox-options .charts-icons.client.pc .icon, #customer-combobox-options .tab-btn.clients.pc .icon, #customer-combobox-options .tab-btn[data-name=batch-clients].pc .icon,
#customer-combobox-options .drawer-title-container.clients.pc .icon, #customer-combobox-options .client-type.pc .icon, #customer-combobox-options .charts-icons.client.pc .icon, .statistics-charts-container .tab-btn.clients.pc .icon, .statistics-charts-container .tab-btn[data-name=batch-clients].pc .icon,
.statistics-charts-container .drawer-title-container.clients.pc .icon, .statistics-charts-container .client-type.pc .icon, .statistics-charts-container .charts-icons.client.pc .icon, .devicesList-item-device-icon .tab-btn.clients.pc .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-clients].pc .icon,
.devicesList-item-device-icon .drawer-title-container.clients.pc .icon, .devicesList-item-device-icon .client-type.pc .icon, .devicesList-item-device-icon .charts-icons.client.pc .icon, .detect-aps-list-container .tab-btn.clients.pc .icon, .detect-aps-list-container .tab-btn[data-name=batch-clients].pc .icon,
.detect-aps-list-container .drawer-title-container.clients.pc .icon, .detect-aps-list-container .client-type.pc .icon, .detect-aps-list-container .charts-icons.client.pc .icon {
  background: url(../img/clientIcon/pc.png) no-repeat;
}
.drawer-container.shown .tab-btn.clients.printer .icon, .drawer-container.shown .tab-btn[data-name=batch-clients].printer .icon,
.drawer-container.shown .drawer-title-container.clients.printer .icon, .drawer-container.shown .client-type.printer .icon, .drawer-container.shown .charts-icons.client.printer .icon, .device-icon .tab-btn.clients.printer .icon, .device-icon .tab-btn[data-name=batch-clients].printer .icon,
.device-icon .drawer-title-container.clients.printer .icon, .device-icon .client-type.printer .icon, .device-icon .charts-icons.client.printer .icon, .client-icon .tab-btn.clients.printer .icon, .client-icon .tab-btn[data-name=batch-clients].printer .icon,
.client-icon .drawer-title-container.clients.printer .icon, .client-icon .client-type.printer .icon, .client-icon .charts-icons.client.printer .icon,
#global-combobox-options .tab-btn.clients.printer .icon,
#global-combobox-options .tab-btn[data-name=batch-clients].printer .icon,
#global-combobox-options .drawer-title-container.clients.printer .icon,
#global-combobox-options .client-type.printer .icon,
#global-combobox-options .charts-icons.client.printer .icon, #customer-combobox-options .tab-btn.clients.printer .icon, #customer-combobox-options .tab-btn[data-name=batch-clients].printer .icon,
#customer-combobox-options .drawer-title-container.clients.printer .icon, #customer-combobox-options .client-type.printer .icon, #customer-combobox-options .charts-icons.client.printer .icon, .statistics-charts-container .tab-btn.clients.printer .icon, .statistics-charts-container .tab-btn[data-name=batch-clients].printer .icon,
.statistics-charts-container .drawer-title-container.clients.printer .icon, .statistics-charts-container .client-type.printer .icon, .statistics-charts-container .charts-icons.client.printer .icon, .devicesList-item-device-icon .tab-btn.clients.printer .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-clients].printer .icon,
.devicesList-item-device-icon .drawer-title-container.clients.printer .icon, .devicesList-item-device-icon .client-type.printer .icon, .devicesList-item-device-icon .charts-icons.client.printer .icon, .detect-aps-list-container .tab-btn.clients.printer .icon, .detect-aps-list-container .tab-btn[data-name=batch-clients].printer .icon,
.detect-aps-list-container .drawer-title-container.clients.printer .icon, .detect-aps-list-container .client-type.printer .icon, .detect-aps-list-container .charts-icons.client.printer .icon {
  background: url(../img/clientIcon/printer.png) no-repeat;
}
.drawer-container.shown .tab-btn.clients.router .icon, .drawer-container.shown .tab-btn[data-name=batch-clients].router .icon,
.drawer-container.shown .drawer-title-container.clients.router .icon, .drawer-container.shown .client-type.router .icon, .drawer-container.shown .charts-icons.client.router .icon, .device-icon .tab-btn.clients.router .icon, .device-icon .tab-btn[data-name=batch-clients].router .icon,
.device-icon .drawer-title-container.clients.router .icon, .device-icon .client-type.router .icon, .device-icon .charts-icons.client.router .icon, .client-icon .tab-btn.clients.router .icon, .client-icon .tab-btn[data-name=batch-clients].router .icon,
.client-icon .drawer-title-container.clients.router .icon, .client-icon .client-type.router .icon, .client-icon .charts-icons.client.router .icon,
#global-combobox-options .tab-btn.clients.router .icon,
#global-combobox-options .tab-btn[data-name=batch-clients].router .icon,
#global-combobox-options .drawer-title-container.clients.router .icon,
#global-combobox-options .client-type.router .icon,
#global-combobox-options .charts-icons.client.router .icon, #customer-combobox-options .tab-btn.clients.router .icon, #customer-combobox-options .tab-btn[data-name=batch-clients].router .icon,
#customer-combobox-options .drawer-title-container.clients.router .icon, #customer-combobox-options .client-type.router .icon, #customer-combobox-options .charts-icons.client.router .icon, .statistics-charts-container .tab-btn.clients.router .icon, .statistics-charts-container .tab-btn[data-name=batch-clients].router .icon,
.statistics-charts-container .drawer-title-container.clients.router .icon, .statistics-charts-container .client-type.router .icon, .statistics-charts-container .charts-icons.client.router .icon, .devicesList-item-device-icon .tab-btn.clients.router .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-clients].router .icon,
.devicesList-item-device-icon .drawer-title-container.clients.router .icon, .devicesList-item-device-icon .client-type.router .icon, .devicesList-item-device-icon .charts-icons.client.router .icon, .detect-aps-list-container .tab-btn.clients.router .icon, .detect-aps-list-container .tab-btn[data-name=batch-clients].router .icon,
.detect-aps-list-container .drawer-title-container.clients.router .icon, .detect-aps-list-container .client-type.router .icon, .detect-aps-list-container .charts-icons.client.router .icon {
  background: url(../img/clientIcon/router.png) no-repeat;
}
.drawer-container.shown .tab-btn.clients.tv .icon, .drawer-container.shown .tab-btn[data-name=batch-clients].tv .icon,
.drawer-container.shown .drawer-title-container.clients.tv .icon, .drawer-container.shown .client-type.tv .icon, .drawer-container.shown .charts-icons.client.tv .icon, .device-icon .tab-btn.clients.tv .icon, .device-icon .tab-btn[data-name=batch-clients].tv .icon,
.device-icon .drawer-title-container.clients.tv .icon, .device-icon .client-type.tv .icon, .device-icon .charts-icons.client.tv .icon, .client-icon .tab-btn.clients.tv .icon, .client-icon .tab-btn[data-name=batch-clients].tv .icon,
.client-icon .drawer-title-container.clients.tv .icon, .client-icon .client-type.tv .icon, .client-icon .charts-icons.client.tv .icon,
#global-combobox-options .tab-btn.clients.tv .icon,
#global-combobox-options .tab-btn[data-name=batch-clients].tv .icon,
#global-combobox-options .drawer-title-container.clients.tv .icon,
#global-combobox-options .client-type.tv .icon,
#global-combobox-options .charts-icons.client.tv .icon, #customer-combobox-options .tab-btn.clients.tv .icon, #customer-combobox-options .tab-btn[data-name=batch-clients].tv .icon,
#customer-combobox-options .drawer-title-container.clients.tv .icon, #customer-combobox-options .client-type.tv .icon, #customer-combobox-options .charts-icons.client.tv .icon, .statistics-charts-container .tab-btn.clients.tv .icon, .statistics-charts-container .tab-btn[data-name=batch-clients].tv .icon,
.statistics-charts-container .drawer-title-container.clients.tv .icon, .statistics-charts-container .client-type.tv .icon, .statistics-charts-container .charts-icons.client.tv .icon, .devicesList-item-device-icon .tab-btn.clients.tv .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-clients].tv .icon,
.devicesList-item-device-icon .drawer-title-container.clients.tv .icon, .devicesList-item-device-icon .client-type.tv .icon, .devicesList-item-device-icon .charts-icons.client.tv .icon, .detect-aps-list-container .tab-btn.clients.tv .icon, .detect-aps-list-container .tab-btn[data-name=batch-clients].tv .icon,
.detect-aps-list-container .drawer-title-container.clients.tv .icon, .detect-aps-list-container .client-type.tv .icon, .detect-aps-list-container .charts-icons.client.tv .icon {
  background: url(../img/clientIcon/tv.png) no-repeat;
}
.drawer-container.shown .tab-btn.clients.unknown .icon, .drawer-container.shown .tab-btn[data-name=batch-clients].unknown .icon,
.drawer-container.shown .drawer-title-container.clients.unknown .icon, .drawer-container.shown .client-type.unknown .icon, .drawer-container.shown .charts-icons.client.unknown .icon, .device-icon .tab-btn.clients.unknown .icon, .device-icon .tab-btn[data-name=batch-clients].unknown .icon,
.device-icon .drawer-title-container.clients.unknown .icon, .device-icon .client-type.unknown .icon, .device-icon .charts-icons.client.unknown .icon, .client-icon .tab-btn.clients.unknown .icon, .client-icon .tab-btn[data-name=batch-clients].unknown .icon,
.client-icon .drawer-title-container.clients.unknown .icon, .client-icon .client-type.unknown .icon, .client-icon .charts-icons.client.unknown .icon,
#global-combobox-options .tab-btn.clients.unknown .icon,
#global-combobox-options .tab-btn[data-name=batch-clients].unknown .icon,
#global-combobox-options .drawer-title-container.clients.unknown .icon,
#global-combobox-options .client-type.unknown .icon,
#global-combobox-options .charts-icons.client.unknown .icon, #customer-combobox-options .tab-btn.clients.unknown .icon, #customer-combobox-options .tab-btn[data-name=batch-clients].unknown .icon,
#customer-combobox-options .drawer-title-container.clients.unknown .icon, #customer-combobox-options .client-type.unknown .icon, #customer-combobox-options .charts-icons.client.unknown .icon, .statistics-charts-container .tab-btn.clients.unknown .icon, .statistics-charts-container .tab-btn[data-name=batch-clients].unknown .icon,
.statistics-charts-container .drawer-title-container.clients.unknown .icon, .statistics-charts-container .client-type.unknown .icon, .statistics-charts-container .charts-icons.client.unknown .icon, .devicesList-item-device-icon .tab-btn.clients.unknown .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-clients].unknown .icon,
.devicesList-item-device-icon .drawer-title-container.clients.unknown .icon, .devicesList-item-device-icon .client-type.unknown .icon, .devicesList-item-device-icon .charts-icons.client.unknown .icon, .detect-aps-list-container .tab-btn.clients.unknown .icon, .detect-aps-list-container .tab-btn[data-name=batch-clients].unknown .icon,
.detect-aps-list-container .drawer-title-container.clients.unknown .icon, .detect-aps-list-container .client-type.unknown .icon, .detect-aps-list-container .charts-icons.client.unknown .icon {
  background: url(../img/clientIcon/unknown.png) no-repeat;
}
.drawer-container.shown .tab-btn.clients.usb .icon, .drawer-container.shown .tab-btn[data-name=batch-clients].usb .icon,
.drawer-container.shown .drawer-title-container.clients.usb .icon, .drawer-container.shown .client-type.usb .icon, .drawer-container.shown .charts-icons.client.usb .icon, .device-icon .tab-btn.clients.usb .icon, .device-icon .tab-btn[data-name=batch-clients].usb .icon,
.device-icon .drawer-title-container.clients.usb .icon, .device-icon .client-type.usb .icon, .device-icon .charts-icons.client.usb .icon, .client-icon .tab-btn.clients.usb .icon, .client-icon .tab-btn[data-name=batch-clients].usb .icon,
.client-icon .drawer-title-container.clients.usb .icon, .client-icon .client-type.usb .icon, .client-icon .charts-icons.client.usb .icon,
#global-combobox-options .tab-btn.clients.usb .icon,
#global-combobox-options .tab-btn[data-name=batch-clients].usb .icon,
#global-combobox-options .drawer-title-container.clients.usb .icon,
#global-combobox-options .client-type.usb .icon,
#global-combobox-options .charts-icons.client.usb .icon, #customer-combobox-options .tab-btn.clients.usb .icon, #customer-combobox-options .tab-btn[data-name=batch-clients].usb .icon,
#customer-combobox-options .drawer-title-container.clients.usb .icon, #customer-combobox-options .client-type.usb .icon, #customer-combobox-options .charts-icons.client.usb .icon, .statistics-charts-container .tab-btn.clients.usb .icon, .statistics-charts-container .tab-btn[data-name=batch-clients].usb .icon,
.statistics-charts-container .drawer-title-container.clients.usb .icon, .statistics-charts-container .client-type.usb .icon, .statistics-charts-container .charts-icons.client.usb .icon, .devicesList-item-device-icon .tab-btn.clients.usb .icon, .devicesList-item-device-icon .tab-btn[data-name=batch-clients].usb .icon,
.devicesList-item-device-icon .drawer-title-container.clients.usb .icon, .devicesList-item-device-icon .client-type.usb .icon, .devicesList-item-device-icon .charts-icons.client.usb .icon, .detect-aps-list-container .tab-btn.clients.usb .icon, .detect-aps-list-container .tab-btn[data-name=batch-clients].usb .icon,
.detect-aps-list-container .drawer-title-container.clients.usb .icon, .detect-aps-list-container .client-type.usb .icon, .detect-aps-list-container .charts-icons.client.usb .icon {
  background: url(../img/clientIcon/usb.png) no-repeat;
}

.topology-container .node-info-container .device-basic-info .client-icon .device-type.ap .icon,
.topology-container .node-info-container .device-basic-info .client-icon .device-type .icon,
.topology-container .node-info-container .device-basic-info .client-icon .client-type .icon,
.topology-container .node-info-container .device-basic-info .device-icon .device-type.ap .icon,
.topology-container .node-info-container .device-basic-info .device-icon .device-type .icon,
.topology-container .node-info-container .device-basic-info .device-icon .client-type .icon {
  width: 66px;
  height: 66px;
  background-size: contain;
}

.topology-container .connection-info .connection-ssid:before {
  width: 14px;
  height: 14px;
  background: url(../img/svg/wifi.svg) no-repeat;
}

.virtual-eap-list .td-content .device-type.ap.virtual .icon,
.virtual-eap-list .td-content .tab-btn.ap.virtual .icon,
.aps-grid .td-content .device-type.ap.virtual .icon,
.aps-grid .td-content .tab-btn.ap.virtual .icon,
.drawer-container.shown .device-type.ap.virtual .icon,
.drawer-container.shown .tab-btn.ap.virtual .icon {
  width: 40px;
  height: 40px;
}
.virtual-eap-list .td-content .device-type.ap.virtual.combobox-list.ap .icon,
.virtual-eap-list .td-content .tab-btn.ap.virtual.combobox-list.ap .icon,
.aps-grid .td-content .device-type.ap.virtual.combobox-list.ap .icon,
.aps-grid .td-content .tab-btn.ap.virtual.combobox-list.ap .icon,
.drawer-container.shown .device-type.ap.virtual.combobox-list.ap .icon,
.drawer-container.shown .tab-btn.ap.virtual.combobox-list.ap .icon {
  width: 30px;
  height: 30px;
  background-size: contain;
}
.virtual-eap-list .td-content .device-type.ap.virtual.Wave .icon,
.virtual-eap-list .td-content .tab-btn.ap.virtual.Wave .icon,
.aps-grid .td-content .device-type.ap.virtual.Wave .icon,
.aps-grid .td-content .tab-btn.ap.virtual.Wave .icon,
.drawer-container.shown .device-type.ap.virtual.Wave .icon,
.drawer-container.shown .tab-btn.ap.virtual.Wave .icon {
  background: url(../img/virtualDeviceIcon/wave.png) no-repeat;
}
.virtual-eap-list .td-content .device-type.ap.virtual.Cloud-Square .icon,
.virtual-eap-list .td-content .tab-btn.ap.virtual.Cloud-Square .icon,
.aps-grid .td-content .device-type.ap.virtual.Cloud-Square .icon,
.aps-grid .td-content .tab-btn.ap.virtual.Cloud-Square .icon,
.drawer-container.shown .device-type.ap.virtual.Cloud-Square .icon,
.drawer-container.shown .tab-btn.ap.virtual.Cloud-Square .icon {
  background: url(../img/virtualDeviceIcon/cloudSquare.png) no-repeat;
}
.virtual-eap-list .td-content .device-type.ap.virtual.Outdoor-Old .icon,
.virtual-eap-list .td-content .tab-btn.ap.virtual.Outdoor-Old .icon,
.aps-grid .td-content .device-type.ap.virtual.Outdoor-Old .icon,
.aps-grid .td-content .tab-btn.ap.virtual.Outdoor-Old .icon,
.drawer-container.shown .device-type.ap.virtual.Outdoor-Old .icon,
.drawer-container.shown .tab-btn.ap.virtual.Outdoor-Old .icon {
  background: url(../img/virtualDeviceIcon/outdoorOld.png) no-repeat;
}
.virtual-eap-list .td-content .device-type.ap.virtual.Outdoor-New .icon,
.virtual-eap-list .td-content .tab-btn.ap.virtual.Outdoor-New .icon,
.aps-grid .td-content .device-type.ap.virtual.Outdoor-New .icon,
.aps-grid .td-content .tab-btn.ap.virtual.Outdoor-New .icon,
.drawer-container.shown .device-type.ap.virtual.Outdoor-New .icon,
.drawer-container.shown .tab-btn.ap.virtual.Outdoor-New .icon {
  background: url(../img/virtualDeviceIcon/outdoorNew.png) no-repeat;
}
.virtual-eap-list .td-content .device-type.ap.virtual.n11-UK .icon,
.virtual-eap-list .td-content .tab-btn.ap.virtual.n11-UK .icon,
.aps-grid .td-content .device-type.ap.virtual.n11-UK .icon,
.aps-grid .td-content .tab-btn.ap.virtual.n11-UK .icon,
.drawer-container.shown .device-type.ap.virtual.n11-UK .icon,
.drawer-container.shown .tab-btn.ap.virtual.n11-UK .icon {
  background: url(../img/virtualDeviceIcon/n11uk.png) no-repeat;
}
.virtual-eap-list .td-content .device-type.ap.virtual.ac11-Compatible .icon,
.virtual-eap-list .td-content .tab-btn.ap.virtual.ac11-Compatible .icon,
.aps-grid .td-content .device-type.ap.virtual.ac11-Compatible .icon,
.aps-grid .td-content .tab-btn.ap.virtual.ac11-Compatible .icon,
.drawer-container.shown .device-type.ap.virtual.ac11-Compatible .icon,
.drawer-container.shown .tab-btn.ap.virtual.ac11-Compatible .icon {
  background: url(../img/virtualDeviceIcon/ac11.png) no-repeat;
}
.virtual-eap-list .td-content .device-type.ap.virtual.hd620 .icon,
.virtual-eap-list .td-content .tab-btn.ap.virtual.hd620 .icon,
.aps-grid .td-content .device-type.ap.virtual.hd620 .icon,
.aps-grid .td-content .tab-btn.ap.virtual.hd620 .icon,
.drawer-container.shown .device-type.ap.virtual.hd620 .icon,
.drawer-container.shown .tab-btn.ap.virtual.hd620 .icon {
  background: url(../img/virtualDeviceIcon/EAP650.png) no-repeat;
}
.virtual-eap-list .td-content .device-type.ap.virtual.hd620-outdoor .icon,
.virtual-eap-list .td-content .tab-btn.ap.virtual.hd620-outdoor .icon,
.aps-grid .td-content .device-type.ap.virtual.hd620-outdoor .icon,
.aps-grid .td-content .tab-btn.ap.virtual.hd620-outdoor .icon,
.drawer-container.shown .device-type.ap.virtual.hd620-outdoor .icon,
.drawer-container.shown .tab-btn.ap.virtual.hd620-outdoor .icon {
  background: url(../img/virtualDeviceIcon/EAP620-Outdoor_HD.png) no-repeat;
}
.virtual-eap-list .td-content .device-type.ap.virtual.eap650-wall .icon,
.virtual-eap-list .td-content .tab-btn.ap.virtual.eap650-wall .icon,
.aps-grid .td-content .device-type.ap.virtual.eap650-wall .icon,
.aps-grid .td-content .tab-btn.ap.virtual.eap650-wall .icon,
.drawer-container.shown .device-type.ap.virtual.eap650-wall .icon,
.drawer-container.shown .tab-btn.ap.virtual.eap650-wall .icon {
  background: url(../img/virtualDeviceIcon/EAP650-Wall.png) no-repeat;
}
.virtual-eap-list .td-content .device-type.ap.virtual.eap655-wall .icon,
.virtual-eap-list .td-content .tab-btn.ap.virtual.eap655-wall .icon,
.aps-grid .td-content .device-type.ap.virtual.eap655-wall .icon,
.aps-grid .td-content .tab-btn.ap.virtual.eap655-wall .icon,
.drawer-container.shown .device-type.ap.virtual.eap655-wall .icon,
.drawer-container.shown .tab-btn.ap.virtual.eap655-wall .icon {
  background: url(../img/virtualDeviceIcon/EAP655-Wall.png) no-repeat;
}

.port-status-container .info-item-container.wan .icon-outer, .grid-status-container .info-item-container.wan .icon-outer {
  background-image: url(../img/svg/PortIconWANBlack.svg);
  background-repeat: no-repeat;
  background-position: center;
}
.port-status-container .info-item-container.lan .icon-outer, .grid-status-container .info-item-container.lan .icon-outer {
  background-image: url(../img/svg/PortIconLANBlack.svg);
  background-repeat: no-repeat;
  background-position: center;
}
.port-status-container .info-item-container.poe .icon-outer, .grid-status-container .info-item-container.poe .icon-outer {
  background-image: url(../img/svg/PortIconLightningBlack.svg);
  background-repeat: no-repeat;
  background-position: center;
}
.port-status-container .info-item-container.mirror .icon-outer, .grid-status-container .info-item-container.mirror .icon-outer {
  background-image: url(../img/svg/PortIconMirrorBlack.svg);
  background-repeat: no-repeat;
  background-position: center;
}
.port-status-container .info-item-container.uplink .icon-outer, .grid-status-container .info-item-container.uplink .icon-outer {
  background-image: url(../img/svg/PortIconUplinkBlack.svg);
  background-repeat: no-repeat;
  background-position: center;
}
.port-status-container .info-item-container.stp .icon-outer, .grid-status-container .info-item-container.stp .icon-outer {
  background-image: url(../img/svg/PortIconSTPDiscardingBlack.svg);
  background-repeat: no-repeat;
  background-position: center;
}
.port-status-container .port-item.wan .icon-outer, .port-status-container .grid-status.wan .icon-outer, .grid-status-container .port-item.wan .icon-outer, .grid-status-container .grid-status.wan .icon-outer {
  background-image: url(../img/svg/PortIconWAN.svg);
  background-repeat: no-repeat;
  background-position: center;
}
.port-status-container .port-item.lan .icon-outer, .port-status-container .grid-status.lan .icon-outer, .grid-status-container .port-item.lan .icon-outer, .grid-status-container .grid-status.lan .icon-outer {
  background-image: url(../img/svg/PortIconLAN.svg);
  background-repeat: no-repeat;
  background-position: center;
}
.port-status-container .port-item.enabled.poe .icon-outer, .port-status-container .grid-status.enabled.poe .icon-outer, .grid-status-container .port-item.enabled.poe .icon-outer, .grid-status-container .grid-status.enabled.poe .icon-outer {
  background-image: url(../img/svg/PortIconLightning.svg);
  background-repeat: no-repeat;
  background-position: center;
}
.port-status-container .port-item.enabled.mirror .icon-outer, .port-status-container .grid-status.enabled.mirror .icon-outer, .grid-status-container .port-item.enabled.mirror .icon-outer, .grid-status-container .grid-status.enabled.mirror .icon-outer {
  background-image: url(../img/svg/PortIconMirror.svg);
  background-repeat: no-repeat;
  background-position: center;
}
.port-status-container .port-item.enabled.uplink .icon-outer, .port-status-container .grid-status.enabled.uplink .icon-outer, .grid-status-container .port-item.enabled.uplink .icon-outer, .grid-status-container .grid-status.enabled.uplink .icon-outer {
  background-image: url(../img/svg/PortIconUplink.svg);
  background-repeat: no-repeat;
  background-position: center;
}
.port-status-container .port-item.enabled.stp .icon-outer, .port-status-container .grid-status.enabled.stp .icon-outer, .grid-status-container .port-item.enabled.stp .icon-outer, .grid-status-container .grid-status.enabled.stp .icon-outer {
  background-image: url(../img/svg/PortIconSTPDiscarding.svg);
  background-repeat: no-repeat;
  background-position: center;
}

.ip-type-outer .no-ipv6-container .img {
  width: 80px;
  height: 80px;
  background: url(../img/NoData.png) no-repeat;
}

.user-type .icon {
  width: 28px;
  height: 28px;
  background-size: contain;
}
.user-type.wireless.guest .icon {
  background: url(../img/svg/TableIconGuestsWirelessLight.svg) no-repeat;
}
.user-type.wireless.user .icon {
  background: url(../img/svg/TableIconUsersWirelessLight.svg) no-repeat;
}
.user-type.wired.user .icon {
  background: url(../img/svg/TableIconUsersWiredLight.svg) no-repeat;
}

.keywords-container .keywords-add:before {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/OthersIconAdd.svg) no-repeat;
  content: "";
}
.keywords-container .keywords-add:hover:before {
  background: url(../img/svg/OthersIconAddHover.svg) no-repeat;
}
.keywords-container .keywords-add.disabled:hover:before {
  background: url(../img/svg/OthersIconAdd.svg) no-repeat;
}
.keywords-container .keywords-delete:before {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconDelete.svg) no-repeat;
  content: "";
}
.keywords-container .keywords-delete:hover:before {
  background: url(../img/svg/TableIconDeleteHover.svg) no-repeat;
}

.tree-select-selector-switch .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/SelectIconDown.svg) no-repeat;
}

.tree-select-selector-switch.arrow-up .icon {
  background: url(../img/svg/SelectIconUp.svg) no-repeat;
}

.tree-select-container .selector-text .multiple-item .close {
  width: 14px;
  height: 14px;
  background: url(../img/svg/SelectIconClose.svg) no-repeat;
}

.btn-full-screen {
  display: block;
}
.btn-full-screen .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/FullScreenIcon.svg) no-repeat;
}

.btn-zoom-in {
  display: block;
}
.btn-zoom-in .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/ZoomInIcon.svg) no-repeat;
}

.btn-zoom-out {
  display: block;
}
.btn-zoom-out .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/ZoomOutIcon.svg) no-repeat;
}

.btn-zoom-detail {
  display: block;
}
.btn-zoom-detail .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/InfoIcon.svg) no-repeat;
}
.btn-zoom-detail.active .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/InfoIconActive.svg) no-repeat;
}

.btn-gripper {
  display: block;
}
.btn-gripper .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/Gripper.svg) no-repeat;
}
.btn-gripper:hover .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/GripperHover.svg) no-repeat;
}

.map-view .btn-setting,
.import-cad-msg .btn-setting {
  display: block;
}
.map-view .btn-setting .icon,
.import-cad-msg .btn-setting .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TabsIconSettingsSelected.svg);
}
.map-view .btn-setting:hover .icon,
.import-cad-msg .btn-setting:hover .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TabsIconSettingsSelected.svg);
}
.map-view .btn-show-aps-btn,
.import-cad-msg .btn-show-aps-btn {
  display: block;
}
.map-view .btn-show-aps-btn .icon,
.import-cad-msg .btn-show-aps-btn .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/Detail.svg);
}
.map-view .btn-show-aps-btn:hover .icon,
.import-cad-msg .btn-show-aps-btn:hover .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/DetailHover.svg);
}
.map-view .btn-show-aps-list,
.import-cad-msg .btn-show-aps-list {
  display: block;
}
.map-view .btn-show-aps-list .icon,
.import-cad-msg .btn-show-aps-list .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/Devices.svg);
}
.map-view .btn-show-aps-list:hover .icon,
.import-cad-msg .btn-show-aps-list:hover .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/DevicesHover.svg);
}
.map-view .btn-show-walls-list,
.import-cad-msg .btn-show-walls-list {
  display: block;
}
.map-view .btn-show-walls-list .icon,
.import-cad-msg .btn-show-walls-list .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/Wall.svg);
}
.map-view .btn-show-walls-list:hover .icon,
.import-cad-msg .btn-show-walls-list:hover .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/WallHover.svg);
}
.map-view .btn-arrows,
.import-cad-msg .btn-arrows {
  display: block;
}
.map-view .btn-arrows .icon,
.import-cad-msg .btn-arrows .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/Select.svg) no-repeat;
}
.map-view .btn-arrows:hover .icon,
.import-cad-msg .btn-arrows:hover .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/SelectHover.svg) no-repeat;
}
.map-view .btn-arrows.disabled .icon,
.import-cad-msg .btn-arrows.disabled .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/SelectDisable.svg) no-repeat;
}
.map-view .btn-ruler,
.import-cad-msg .btn-ruler {
  display: block;
}
.map-view .btn-ruler .icon,
.import-cad-msg .btn-ruler .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/RulerBtn.svg) no-repeat;
}
.map-view .btn-ruler:hover .icon,
.import-cad-msg .btn-ruler:hover .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/RulerHover.svg);
}
.map-view .btn-ruler.disabled .icon,
.import-cad-msg .btn-ruler.disabled .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/RulerDisable.svg) no-repeat;
}
.map-view .btn-coverage,
.import-cad-msg .btn-coverage {
  display: block;
}
.map-view .btn-coverage .icon,
.import-cad-msg .btn-coverage .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/Coverage.svg) no-repeat;
}
.map-view .btn-coverage:hover .icon,
.import-cad-msg .btn-coverage:hover .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/CoverageHover.svg) no-repeat;
}

#map-eap-config-view .arrow-img {
  background: url(../img/svg/arrow.svg) no-repeat;
  background-position: 29px 26px;
}

#coverage-shape-msg .radio-group-list-wrap:first-child .text {
  background: url(../img/Rectangle.png);
  width: 80px;
  height: 80px;
}
#coverage-shape-msg .radio-group-list-wrap:nth-child(2) .text {
  background: url(../img/IrregularShape.png);
  width: 80px;
  height: 80px;
}

#choose-export-type-msg .radio-group-list-wrap:first-child .text {
  background: url(../img/svg/csv.svg);
  width: 60px;
  height: 60px;
}
#choose-export-type-msg .radio-group-list-wrap:nth-child(2) .text {
  background: url(../img/svg/xlsx.svg);
  width: 60px;
  height: 60px;
}

.dashboard-config {
  display: block;
}
.dashboard-config .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/SidebariconSettingsWhite.svg) no-repeat;
}

.action-disconnect .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconDisconnectNormal.svg) no-repeat;
}

.action-extend .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconExtendTime.svg) no-repeat;
}

.btn-page-right .icon {
  width: 24px;
  height: 24px;
  background: var(--pagination-icon-right-normal, url(../img/svg/PaginationRight.svg)) no-repeat;
}
.btn-page-right:hover .icon {
  background: var(--pagination-icon-right-hover, url(../img/svg/PaginationRightHover.svg)) no-repeat;
}
.btn-page-right:active .icon {
  background: var(--pagination-icon-right-active, url(../img/svg/PaginationRightActive.svg)) no-repeat;
}
.btn-page-right.disabled .icon {
  background: var(--pagination-icon-right-disabled, url(../img/svg/PaginationRightDisabled.svg)) no-repeat;
}

.btn-page-left .icon {
  width: 24px;
  height: 24px;
  background: var(--pagintion-icon-left-normal, url(../img/svg/PaginationLeft.svg)) no-repeat;
}
.btn-page-left:hover .icon {
  background: var(--pagination-icon-left-hover, url(../img/svg/PaginationLeftHover.svg)) no-repeat;
}
.btn-page-left:active .icon {
  background: var(--pagination-icon-left-active, url(../img/svg/PaginationLeftActive.svg)) no-repeat;
}
.btn-page-left.disabled .icon {
  background: var(--pagination-icon-left-disabled, url(../img/svg/PaginationLeftDisabled.svg)) no-repeat;
}

.list .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/ListNormal.svg) no-repeat;
}
.list:hover .icon {
  background: url(../img/svg/ListBlue.svg) no-repeat;
}

.calendar-day .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/CalendarDay.svg) no-repeat;
}
.calendar-day:hover .icon {
  background: url(../img/svg/CalendarDayHover.svg) no-repeat;
}

.calendar-week .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/CalendarWeek.svg) no-repeat;
}
.calendar-week:hover .icon {
  background: url(../img/svg/CalendarWeekHover.svg) no-repeat;
}

.calendar-month .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/CalendarMonth.svg) no-repeat;
}
.calendar-month:hover .icon {
  background: url(../img/svg/CalendarMonthHover.svg) no-repeat;
}

.detail-icon .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/OtherIconDrawer.svg) no-repeat;
}
.detail-icon .icon:hover {
  background: url(../img/svg/OtherIconDrawerActive.svg) no-repeat;
}

.date-page-left .icon {
  width: 28px;
  height: 28px;
  background: var(--pagination-icon-left, url(../img/svg/PaginationLeftDisabled.svg)) no-repeat;
}

.date-page-right .icon {
  width: 28px;
  height: 28px;
  background: var(--pagination-icon-right, url(../img/svg/PaginationRightDisabled.svg)) no-repeat;
}

.archive .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/Archive.svg) no-repeat;
}

#statistics-tab .tab-btn[data-name=trafficStats]:before {
  width: 20px;
  height: 20px;
  background: url(../img/svg/TrafficStats.svg) no-repeat;
}
#statistics-tab .tab-btn[data-name=trafficStats]:hover:before {
  background: url(../img/svg/TrafficStatsHover.svg) no-repeat;
}
#statistics-tab .tab-btn[data-name=trafficStats].selected:before {
  background: url(../img/svg/TrafficStatsActive.svg) no-repeat;
}
#statistics-tab .tab-btn[data-name=performance]:before {
  width: 24px;
  height: 24px;
  background: var(--icon-menu-performance, url(../img/svg/Performance.svg)) no-repeat;
}
#statistics-tab .tab-btn[data-name=performance]:hover:before {
  background: url(../img/svg/PerformanceHover.svg) no-repeat;
}
#statistics-tab .tab-btn[data-name=performance].selected:before {
  background: url(../img/svg/PerformanceActive.svg) no-repeat;
}
#statistics-tab .tab-btn[data-name=switchStats]:before {
  width: 20px;
  height: 20px;
  background: url(../img/svg/SwitchStats.svg) no-repeat;
}
#statistics-tab .tab-btn[data-name=switchStats]:hover:before {
  background: url(../img/svg/SwitchStatsHover.svg) no-repeat;
}
#statistics-tab .tab-btn[data-name=switchStats].selected:before {
  background: url(../img/svg/SwitchStatsActive.svg) no-repeat;
}
#statistics-tab .tab-btn[data-name=speedTestStats]:before {
  width: 24px;
  height: 24px;
  background: url(../img/svg/SpeedTestStats.svg) no-repeat;
}
#statistics-tab .tab-btn[data-name=speedTestStats]:hover:before {
  background: url(../img/svg/SpeedTestStatsHover.svg) no-repeat;
}
#statistics-tab .tab-btn[data-name=speedTestStats].selected:before {
  background: url(../img/svg/SpeedTestStatsActive.svg) no-repeat;
}

.statistics-device-combo .combobox-text.gateway:before {
  background: url(../img/deviceIcon/Gateway.png) no-repeat;
  background-size: contain;
}
.statistics-device-combo .combobox-text.gateway.TL-ER7206:before {
  background: url(../img/deviceIcon/TL-ER7206.png) no-repeat;
  background-size: contain;
}
.statistics-device-combo .combobox-text.gateway.TL-ER8411:before {
  background: url(../img/deviceIcon/TL-ER8411.png) no-repeat;
  background-size: contain;
}
.statistics-device-combo .combobox-text.gateway.ER7212PC:before {
  background: url(../img/deviceIcon/ER7212PC.png) no-repeat;
  background-size: contain;
}
.statistics-device-combo .combobox-text.stack:before {
  background: url(../img/topology/Switch.png) no-repeat;
  background-size: contain;
}
.statistics-device-combo .combobox-text.switch:before {
  background: url(../img/deviceIcon/Gateway.png) no-repeat;
  background-size: contain;
}
.statistics-device-combo .combobox-text.switch.TL-SG2428P:before {
  background: url(../img/deviceIcon/TL-SG2428P.png) no-repeat;
  background-size: contain;
}
.statistics-device-combo .combobox-text.switch.TL-SG2008P:before {
  background: url(../img/deviceIcon/TL-SG2008P.png) no-repeat;
  background-size: contain;
}
.statistics-device-combo .combobox-text.switch.TL-SG2218P:before {
  background: url(../img/deviceIcon/TL-SG2218P.png) no-repeat;
  background-size: contain;
}
.statistics-device-combo .combobox-text.switch.TL-SG3452X:before {
  background: url(../img/deviceIcon/TL-SG3452X.png) no-repeat;
  background-size: contain;
}
.statistics-device-combo .combobox-text.switch.TL-SG3452XP:before {
  background: url(../img/deviceIcon/TL-SG3452XP.png) no-repeat;
  background-size: contain;
}
.statistics-device-combo .combobox-text.switch.TL-SG3452P:before {
  background: url(../img/deviceIcon/TL-SG3452P.png) no-repeat;
  background-size: contain;
}
.statistics-device-combo .combobox-text.ap:before {
  background-size: contain;
}
.statistics-device-combo .combobox-text.ap.Wave:before {
  background-image: url(../img/deviceIcon/wave.png);
}
.statistics-device-combo .combobox-text.ap.Cloud-Square:before {
  background-image: url(../img/deviceIcon/cloudSquare.png);
}
.statistics-device-combo .combobox-text.ap.Outdoor-Old:before {
  background-image: url(../img/deviceIcon/outdoorOld.png);
}
.statistics-device-combo .combobox-text.ap.Outdoor-New:before {
  background-image: url(../img/deviceIcon/outdoorNew.png);
}
.statistics-device-combo .combobox-text.ap.n11-UK:before {
  background-image: url(../img/deviceIcon/n11uk.png);
}
.statistics-device-combo .combobox-text.ap.ac11-Compatible:before {
  background-image: url(../img/deviceIcon/ac11.png);
}
.statistics-device-combo .combobox-text.ap.hd620:before {
  background-image: url(../img/deviceIcon/EAP650.png);
}
.statistics-device-combo .combobox-text.ap.hd620-outdoor:before {
  background-image: url(../img/deviceIcon/EAP620-Outdoor_HD.png);
}
.statistics-device-combo .combobox-text.ap.eap650-wall:before {
  background-image: url(../img/deviceIcon/EAP650-Wall.png);
}
.statistics-device-combo .combobox-text.ap.eap655-wall:before {
  background-image: url(../img/deviceIcon/EAP655-Wall.png);
}

.statistics-legend-container .legend-item .icon {
  width: 22px;
  height: 22px;
  background-size: contain;
}
.statistics-legend-container .legend-item.clients .icon {
  background-image: url(../img/svg/ChartIconClients.svg);
}
.statistics-legend-container .legend-item.cpu .icon {
  background-image: url(../img/svg/ChartIconCPU.svg);
}
.statistics-legend-container .legend-item.memory .icon {
  background-image: url(../img/svg/ChartIconMemory.svg);
}
.statistics-legend-container .legend-item.transmitted .icon {
  background-image: url(../img/svg/ChartIconTransmitted.svg);
}
.statistics-legend-container .legend-item.received .icon, .statistics-legend-container .legend-item.upload .icon {
  background-image: url(../img/svg/ChartIconReceived.svg);
}
.statistics-legend-container .legend-item.latency .icon {
  background-image: url(../img/svg/ChartIconLatencyLegend.svg);
}
.statistics-legend-container .legend-item.download .icon {
  background-image: url(../img/svg/ChartIconDownload.svg);
}

.statistics-charts-container .charts-icons.gateway {
  background: url(../img/deviceIcon/Gateway.png) no-repeat;
  background-size: contain;
}
.statistics-charts-container .charts-icons.gateway.TL-ER7206 {
  background: url(../img/deviceIcon/TL-ER7206.png) no-repeat;
  background-size: contain;
}
.statistics-charts-container .charts-icons.gateway.TL-ER8411 {
  background: url(../img/deviceIcon/TL-ER8411.png) no-repeat;
  background-size: contain;
}
.statistics-charts-container .charts-icons.gateway.ER7212PC {
  background: url(../img/deviceIcon/ER7212PC.png) no-repeat;
  background-size: contain;
}
.statistics-charts-container .charts-icons.switch {
  background: url(../img/deviceIcon/Gateway.png) no-repeat;
  background-size: contain;
}
.statistics-charts-container .charts-icons.switch.TL-SG2428P {
  background: url(../img/deviceIcon/TL-SG2428P.png) no-repeat;
  background-size: contain;
}
.statistics-charts-container .charts-icons.switch.TL-SG2008P {
  background: url(../img/deviceIcon/TL-SG2008P.png) no-repeat;
  background-size: contain;
}
.statistics-charts-container .charts-icons.switch.TL-SG2218P {
  background: url(../img/deviceIcon/TL-SG2218P.png) no-repeat;
  background-size: contain;
}
.statistics-charts-container .charts-icons.switch.TL-SG3452X {
  background: url(../img/deviceIcon/TL-SG3452X.png) no-repeat;
  background-size: contain;
}
.statistics-charts-container .charts-icons.switch.TL-SG3452XP {
  background: url(../img/deviceIcon/TL-SG3452XP.png) no-repeat;
  background-size: contain;
}
.statistics-charts-container .charts-icons.switch.TL-SG3452P {
  background: url(../img/deviceIcon/TL-SG3452P.png) no-repeat;
  background-size: contain;
}
.statistics-charts-container .charts-icons.ap .icon {
  background-size: contain;
}
.statistics-charts-container .charts-icons.ap.Wave .icon {
  background-image: url(../img/deviceIcon/wave.png);
}
.statistics-charts-container .charts-icons.ap.Cloud-Square .icon {
  background-image: url(../img/deviceIcon/cloudSquare.png);
}
.statistics-charts-container .charts-icons.ap.Outdoor-Old .icon {
  background-image: url(../img/deviceIcon/outdoorOld.png);
}
.statistics-charts-container .charts-icons.ap.Outdoor-New .icon {
  background-image: url(../img/deviceIcon/outdoorNew.png);
}
.statistics-charts-container .charts-icons.ap.n11-UK .icon {
  background-image: url(../img/deviceIcon/n11uk.png);
}
.statistics-charts-container .charts-icons.ap.ac11-Compatible .icon {
  background-image: url(../img/deviceIcon/ac11.png);
}
.statistics-charts-container .charts-icons.ap.hd620 .icon {
  background-image: url(../img/deviceIcon/EAP650.png);
}
.statistics-charts-container .charts-icons.ap.hd620-outdoor .icon {
  background-image: url(../img/deviceIcon/EAP620-Outdoor_HD.png);
}
.statistics-charts-container .charts-icons.ap.eap650-wall .icon {
  background-image: url(../img/deviceIcon/EAP650-Wall.png);
}
.statistics-charts-container .charts-icons.ap.eap655-wall .icon {
  background-image: url(../img/deviceIcon/EAP655-Wall.png);
}

.icon-network,
.icon-ip-group {
  display: inline-block;
  margin-right: 4px;
  width: 24px;
  height: 24px;
}

.icon-network {
  background-image: url("../img/svg/Network-01.svg");
}

.icon-ip-group {
  background-image: url("../img/svg/IP Group-01.svg");
}

.ssh-loading .icon, .facebook-loading .icon {
  width: 20px;
  height: 20px;
  background: var(--icon-loading, url(../img/adopt-doing.gif) no-repeat);
  animation: var(--icon-loading-animation, none);
}

.drop-icon {
  width: 24px;
  height: 24px;
  background: url("../img/drop-down.png");
}
.drop-icon.expand {
  background: url("../img/drop-up.png");
}

a.icon.star-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
a.icon.star-icon.star {
  background: url(../img/svg/star.svg) no-repeat;
}
a.icon.star-icon.unstar {
  background: url(../img/svg/unstar.svg) no-repeat;
}

.empty-chart-content .empty-icon,
.empty-license-content .empty-icon {
  width: 80px;
  height: 80px;
  background: url(../img/NoData.png) no-repeat;
}

.export-light .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconExportWhite.svg) no-repeat;
}

.email-light .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconInviteNormalWhite.svg) no-repeat;
}

.export-type-radio .radio-radio[name=pdf] ~ .text {
  width: 60px;
  height: 60px;
  background: url(../img/pdf.svg) no-repeat;
  background-size: contain;
}
.export-type-radio .radio-radio[name=csv] ~ .text {
  width: 60px;
  height: 60px;
  background: url(../img/CSV.svg) no-repeat;
  background-size: contain;
}
.export-type-radio .radio-radio[name=xlsx] ~ .text {
  width: 60px;
  height: 60px;
  background: url(../img/xlsx.svg) no-repeat;
  background-size: contain;
}

.network-report-container .summary-overview .icon {
  width: 36px;
  height: 36px;
}
.network-report-container .summary-overview .icon.gateway {
  background: url(../img/svg/dashboard/device.svg) no-repeat;
}
.network-report-container .summary-overview .icon.switch {
  background: var(--icon-switches, url(../img/svg/Switches.svg)) no-repeat;
}
.network-report-container .summary-overview .icon.ap {
  background: url(../img/svg/EAPs.svg) no-repeat;
}
.network-report-container .summary-overview .icon.client {
  background: url(../img/svg/dashboard/clientGroup.svg) no-repeat;
}
.network-report-container .summary-overview .icon.traffic {
  background: url(../img/svg/dashboard/traffic.svg) no-repeat;
}

.health-overview-card .device-icon {
  width: 72px;
  height: 72px;
}
.health-overview-card .gateway-icon {
  background: url(../img/svg/Gateway.svg);
}
.health-overview-card .switch-icon {
  background: url(../img/svg/Switch.svg);
}
.health-overview-card .eap-icon {
  background: url(../img/svg/AP.svg);
}

.health-overview-tab .tab-icon {
  width: 28px;
  height: 28px;
  background-size: cover;
}
.health-overview-tab .current {
  background: url(../img/svg/currentIcon.svg) no-repeat;
}
.health-overview-tab .history {
  background: url(../img/svg/historyIcon.svg) no-repeat;
}
.health-overview-tab .tab-btn.selected {
  background-color: #0492EB;
}
.health-overview-tab .tab-btn.selected .current {
  background: url(../img/svg/currentIconActive.svg) no-repeat;
}
.health-overview-tab .tab-btn.selected .history {
  background: url(../img/svg/historyIconActive.svg) no-repeat;
}

.health-icon-container .device {
  width: 60px;
  height: 60px;
  background: url(../img/svg/ChartIconDownload.svg) no-repeat;
}
.health-icon-container .wired-clients {
  width: 60px;
  height: 60px;
  background: url(../img/svg/PerformanceActive.svg) no-repeat;
}
.health-icon-container .wireless-clients {
  width: 60px;
  height: 60px;
  background: url(../img/svg/ChartIconTransmitted.svg) no-repeat;
}
.health-icon-container .client-health-wire-icon {
  width: 60px;
  height: 60px;
}

.btn-resolve .icon,
.action-resolve {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconResolve.svg) no-repeat;
}

.btn-resolve.disabled .icon {
  background: url(../img/svg/TableIconResolveDisabled.svg) no-repeat;
}

.btn-ignore .icon,
.action-ignore {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconIgnore.svg) no-repeat;
}

.btn-ignore.disabled .icon {
  background: url(../img/svg/TableIconIgnoreDisabled.svg) no-repeat;
}

.btn-open .icon,
.action-open {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconOpen.svg) no-repeat;
}

.btn-open.disabled .icon {
  background: url(../img/svg/TableIconOpenDisabled.svg) no-repeat;
}

.resolve-action-icon .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconResolve.svg) no-repeat;
}

.ignore-action-icon .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconIgnore.svg) no-repeat;
}

.open-action-icon .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconOpen.svg) no-repeat;
}

.delete-action-icon .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconDelete.svg) no-repeat;
}

.incident-list-container .time-icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/DatePickerDate.svg) no-repeat;
}

.incident-timeline-container .resolve-btn {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconResolve.svg) no-repeat;
}
.incident-timeline-container .ignore-btn {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconIgnore.svg) no-repeat;
}
.incident-timeline-container .open-btn {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconOpen.svg) no-repeat;
}
.incident-timeline-container .delete-btn {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconDelete.svg) no-repeat;
}
.incident-timeline-container .btns-info.disabled .resolve-btn {
  background: url(../img/svg/TableIconResolveDisabled.svg) no-repeat;
}
.incident-timeline-container .btns-info.disabled .ignore-btn {
  background: url(../img/svg/TableIconIgnoreDisabled.svg) no-repeat;
}
.incident-timeline-container .btns-info.disabled .open-btn {
  background: url(../img/svg/TableIconOpenDisabled.svg) no-repeat;
}
.incident-timeline-container .btns-info.disabled .delete-btn {
  background: url(../img/svg/TableIconDeleteDisabled.svg) no-repeat;
}

.protocol-replay-container .tab-btn.success {
  position: relative;
  padding-left: 25px;
}
.protocol-replay-container .tab-btn.success::before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 7px;
  top: 5px;
  width: 14px;
  height: 15px;
}
.protocol-replay-container .tab-btn.success::before {
  background: url(../img/protocolSuccess.png) no-repeat;
}
.protocol-replay-container .tab-btn.warning {
  position: relative;
  padding-left: 25px;
}
.protocol-replay-container .tab-btn.warning::before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 7px;
  top: 5px;
  width: 14px;
  height: 15px;
}
.protocol-replay-container .tab-btn.warning::before {
  background: url(../img/protocolWarning.png) no-repeat;
}
.protocol-replay-container .tab-btn.error {
  position: relative;
  padding-left: 25px;
}
.protocol-replay-container .tab-btn.error::before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 7px;
  top: 5px;
  width: 14px;
  height: 15px;
}
.protocol-replay-container .tab-btn.error::before {
  background: url(../img/protocolError.png) no-repeat;
}

#incident-detail-cause-msg .loading-icon {
  width: 72px;
  height: 72px;
  background: url(../img/loading.gif);
}

.clients-settings .client-health-data-rate .tx-rate:before {
  background: url(../img/svg/NoCircleUplink.svg) no-repeat;
  background-size: contain;
}
.clients-settings .client-health-data-rate .rx-rate:before {
  background: url(../img/svg/NoCircleDownlink.svg) no-repeat;
  background-size: contain;
}

.clients-settings .summary-item .legend-icon.blue-line {
  background: url(../img/svg/PerformanceActive.svg) no-repeat;
}
.clients-settings .summary-item .legend-icon.purple-line {
  background: url(../img/svg/ChartIconTransmitted.svg) no-repeat;
}

.offline-detail .icon {
  background: url("../img/svg/MessageIconInfo.svg") no-repeat;
  width: 18px;
  height: 18px;
}

.wan-health .rx-uplink .icon {
  width: 24px;
  height: 24px;
  background: url("../img/svg/ChartIconUplink.svg") no-repeat;
}
.wan-health .rx-downlink .icon {
  width: 24px;
  height: 24px;
  background: url("../img/svg/ChartIconDownlinkWan.svg") no-repeat;
}
.wan-health .rxRate-uplink .icon {
  width: 24px;
  height: 24px;
  background: url("../img/svg/NoCircleUplink.svg") no-repeat;
}
.wan-health .rxRate-downlink .icon {
  width: 24px;
  height: 24px;
  background: url("../img/svg/NoCircleDownlink.svg") no-repeat;
}
.wan-health .loading-wrapper .icon {
  width: 180px;
  height: 180px;
  background: url("../img/svg/Loading.svg") no-repeat;
}

.client-empty-icon {
  width: 60px;
  height: 60px;
  background: url(../img/svg/NoClient.svg) no-repeat;
}

.cause-container .cause-icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/DrawerIconSpread.svg);
}
.cause-container .cause-header:hover .cause-icon {
  background: url(../img/svg/DrawerIconSpreadHover.svg);
}
.cause-container .cause-header:active .cause-icon {
  background: url(../img/svg/DrawerIconSpreadActive.svg);
}
.cause-container .cause-item.expand .cause-icon {
  background: url(../img/svg/DrawerIconPackUp.svg);
}
.cause-container .cause-item.expand .cause-header:hover .cause-icon {
  background: url(../img/svg/DrawerIconPackUpHover.svg);
}
.cause-container .cause-item.expand .cause-header:active .cause-icon {
  background: url(../img/svg/DrawerIconPackUpActive.svg);
}
.cause-container .operation-useful .icon {
  width: 20px;
  height: 20px;
  background: url(../img/svg/useful.svg) no-repeat;
}
.cause-container .operation-useful.highlight .icon {
  background: url(../img/svg/usefulHighlight.svg) no-repeat;
}
.cause-container .operation-useless .icon {
  width: 20px;
  height: 20px;
  background: url(../img/svg/useless.svg) no-repeat;
}
.cause-container .operation-useless.highlight .icon {
  background: url(../img/svg/uselessHighlight.svg) no-repeat;
}

.journey-tip .tooltip-icon {
  width: 20px;
  height: 20px;
  background: url(../../theme/img/stormSuppression.png) no-repeat;
  background-size: 20px 20px;
}

.license-type-icon-container .license-icon {
  margin-top: 2px;
  height: 16px;
  width: 16px;
  vertical-align: -3px;
}
.license-type-icon-container.cloud-based .license-icon {
  background-image: var(--icon-basic, url(../img/svg/basic.svg));
}
.license-type-icon-container.cloud-based-pro .license-icon {
  background-image: var(--icon-advanced, url(../img/svg/advanced.svg));
}

.setup-language .combobox-switch .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/SelectIconDownBlue.svg) no-repeat;
  background-position: center;
}
.setup-language .combobox-switch.arrow-up .icon {
  background: url(../img/svg/SelectIconUpBlue.svg) no-repeat;
  background-position: center;
}

.maintain-tip-container .maintain-close-icon {
  width: 12px;
  height: 12px;
  background: url(../img/svg/Close-White.svg) no-repeat;
  cursor: pointer;
}

.icon-up {
  width: 24px;
  height: 24px;
  background-image: url(../img/svg/up.svg);
}

.icon-down {
  width: 24px;
  height: 24px;
  background-image: url(../img/svg/down.svg);
}

#global-combobox-options .supplement-btn, .search-container .supplement-btn,
#customer-combobox-options .supplement-btn {
  width: 18px;
  height: 18px;
}
#global-combobox-options .supplement-btn.delete, .search-container .supplement-btn.delete,
#customer-combobox-options .supplement-btn.delete {
  background: url(../img/svg/TableIconDelete.svg) no-repeat;
}
#global-combobox-options .supplement-btn.delete:hover, .search-container .supplement-btn.delete:hover,
#customer-combobox-options .supplement-btn.delete:hover {
  background: url(../img/svg/TableIconDeleteHover.svg) no-repeat;
}
#global-combobox-options .supplement-btn.edit, .search-container .supplement-btn.edit,
#customer-combobox-options .supplement-btn.edit {
  background: url(../img/svg/TableIconEdit.svg) no-repeat;
}
#global-combobox-options .supplement-btn.edit:hover, .search-container .supplement-btn.edit:hover,
#customer-combobox-options .supplement-btn.edit:hover {
  background: url(../img/svg/TableIconEditHover.svg) no-repeat;
}

.ap-settings .accordion-item .insufficient-power-note .insufficient-power-icon {
  background: url(../img/lackOfElectricity.png) no-repeat;
  background-size: contain;
}

.dhcp-option-custom-container .add-btn {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/OthersIconAdd.svg) no-repeat;
}
.dhcp-option-custom-container .delete-btn {
  display: inline-block;
  margin-top: 2px;
  margin-left: 6px;
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconDelete.svg) no-repeat;
}

#add-ipv6subnet-btn .button-button {
  border: none;
  padding: 0;
}
#add-ipv6subnet-btn .button-button:active {
  background-color: transparent;
}
#add-ipv6subnet-btn .button-button:hover {
  background-color: transparent;
}
#add-ipv6subnet-btn .icon {
  background: url(../img/svg/OthersIconAdd.svg) no-repeat;
}
#add-ipv6subnet-btn:hover .icon {
  background: url(../img/svg/OthersIconAddHover.svg) no-repeat;
}

.table-opts-btn .log-delete-alert {
  width: 20px;
  height: 20px;
  cursor: pointer;
  background: var(--icon-log-clear, url(../img/svg/LogClearNormal.svg));
}
.table-opts-btn .log-delete-alert:hover {
  background: url(../img/svg/LogClearHover.svg);
}

.img-loading-icon {
  width: 25px;
  height: 25px;
  animation: circle 1s infinite linear;
  -webkit-animation: circle 1s infinite linear;
  background-image: url("../img/svg/Loading.svg");
}

.change-verify-code-icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/restore.svg) no-repeat;
}

#customer-combobox-options[data-shown=userCustomersSites] li.combobox-list.star span.icon {
  background: url(../img/svg/star.svg) no-repeat;
}
#customer-combobox-options[data-shown=userCustomersSites] li.combobox-list.unstar span.icon {
  background: url(../img/svg/unstar.svg) no-repeat;
}
#customer-combobox-options[data-shown=userCustomersSites] .combobox-list-editor-wrap li.favorite-customers label span.icon {
  cursor: pointer;
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 16px;
  background: url(../img/svg/star.svg) no-repeat;
  top: 50%;
  transform: translate(0, -50%);
}

.site-pro-icon {
  width: 32px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  background-image: url(../img/pro-site.svg);
}

.tab-container.tab_menu_top > .tab-btns .tab-btn, .tab-container.tab_menu_left > .tab-btns .tab-btn,
.tab-container.tab_menu_right > .tab-btns .tab-btn, .tab-container.tab_menu_bottom > .tab-btns .tab-btn,
.tab-container.tab_spliter > .tab-btns .tab-btn {
  border: none;
  background: white;
  line-height: 28px;
  padding: 0;
}
.tab-container.tab_menu_top > .tab-btns .tab-btn:hover, .tab-container.tab_menu_left > .tab-btns .tab-btn:hover,
.tab-container.tab_menu_right > .tab-btns .tab-btn:hover, .tab-container.tab_menu_bottom > .tab-btns .tab-btn:hover,
.tab-container.tab_spliter > .tab-btns .tab-btn:hover {
  color: #04B0FF;
}
.tab-container.tab_menu_top > .tab-btns .tab-btn:active, .tab-container.tab_menu_left > .tab-btns .tab-btn:active,
.tab-container.tab_menu_right > .tab-btns .tab-btn:active, .tab-container.tab_menu_bottom > .tab-btns .tab-btn:active,
.tab-container.tab_spliter > .tab-btns .tab-btn:active {
  color: #0492EB;
}
.tab-container.tab_menu_top > .tab-btns .tab-btn.selected, .tab-container.tab_menu_left > .tab-btns .tab-btn.selected,
.tab-container.tab_menu_right > .tab-btns .tab-btn.selected, .tab-container.tab_menu_bottom > .tab-btns .tab-btn.selected,
.tab-container.tab_spliter > .tab-btns .tab-btn.selected {
  color: #0492EB;
}

.tab-container.tab_menu_top > .tab-btns, .tab-container.tab_menu_left > .tab-btns,
.tab-container.tab_menu_right > .tab-btns, .tab-container.tab_menu_bottom > .tab-btns {
  position: relative;
}
.tab-container.tab_menu_top > .tab-btns .tab-btn, .tab-container.tab_menu_left > .tab-btns .tab-btn,
.tab-container.tab_menu_right > .tab-btns .tab-btn, .tab-container.tab_menu_bottom > .tab-btns .tab-btn {
  background: transparent;
  margin-right: 20px;
}
.tab-container.tab_menu_top > .tab-btns .tab-btn:last-child, .tab-container.tab_menu_left > .tab-btns .tab-btn:last-child,
.tab-container.tab_menu_right > .tab-btns .tab-btn:last-child, .tab-container.tab_menu_bottom > .tab-btns .tab-btn:last-child {
  margin-right: 0;
}
.tab-container.tab_menu_top > .tab-btns .tab-btn.selected:after, .tab-container.tab_menu_left > .tab-btns .tab-btn.selected:after,
.tab-container.tab_menu_right > .tab-btns .tab-btn.selected:after, .tab-container.tab_menu_bottom > .tab-btns .tab-btn.selected:after {
  content: "";
  display: inline-block;
  background: #0492EB;
  position: absolute;
}
.tab-container.tab_menu_top > .tab-btns:after, .tab-container.tab_menu_left > .tab-btns:after,
.tab-container.tab_menu_right > .tab-btns:after, .tab-container.tab_menu_bottom > .tab-btns:after {
  content: "";
  display: inline-block;
  background: var(--s-color-text-split, #EBECED);
  position: absolute;
}

.tab-container.tab_menu_top {
  visibility: hidden;
}
.tab-container.tab_menu_top > .tab-btns:after {
  height: 1px;
  width: 100%;
  bottom: 0;
  left: 0;
}
.tab-container.tab_menu_top > .tab-btns .tab-btn.selected:after {
  height: 2px;
  width: 100%;
  bottom: 0;
  left: 0;
}

.tab-container.tab_menu_bottom > .tab-btns:after {
  height: 1px;
  width: 100%;
  top: 0;
  left: 0;
}
.tab-container.tab_menu_bottom > .tab-btns .tab-btn.selected:after {
  height: 2px;
  width: 100%;
  top: 0;
  left: 0;
}

.tab-container.tab_menu_left > .tab-btns:after {
  height: 100%;
  width: 1px;
  right: 0;
  top: 0;
}
.tab-container.tab_menu_left > .tab-btns .tab-btn {
  text-align: right;
  display: block;
  margin-right: 0;
  padding-right: 7px;
}
.tab-container.tab_menu_left > .tab-btns .tab-btn.selected:after {
  width: 2px;
  height: 100%;
  right: 0;
  top: 0;
}

.tab-container.tab_menu_right > .tab-btns:after {
  height: 100%;
  width: 1px;
  left: 0;
  top: 0;
}
.tab-container.tab_menu_right > .tab-btns .tab-btn {
  text-align: left;
  display: block;
  margin-right: 0;
  padding-left: 7px;
}
.tab-container.tab_menu_right > .tab-btns .tab-btn.selected:after {
  width: 2px;
  height: 100%;
  left: 0;
  top: 0;
}

.tab-container.tab_spliter > .tab-btns .tab-spliter {
  font-size: 12px;
  display: inline-block !important;
  width: 1px;
  height: 1em;
  margin-left: 10px;
  margin-right: 10px;
  vertical-align: middle;
  background: #AEB4B7;
}

.note {
  position: relative;
  width: 622px;
  margin-bottom: 16px;
  padding: 12px 10px 10px 56px;
  background-color: rgba(4, 146, 235, 0.08);
  border: 0.5px solid #0492eb;
  border-radius: 3px;
}
.note.warning-note {
  background-color: rgba(255, 149, 0, 0.1);
  border: 0.5px solid #FF9500;
}
.note .note__ul {
  padding-left: 15px;
  list-style-type: disc;
}
.note .note__p {
  line-height: 18px;
}
.note .note__p a {
  color: #0492EB;
  text-decoration: underline;
  cursor: pointer;
}
.note .note__p a:hover {
  color: #04B0FF;
}
.note .note__a {
  text-decoration: underline;
  font-weight: bold;
}
.note:before {
  content: "";
  position: absolute;
  top: 12px;
  left: 20px;
  width: 24px;
  height: 24px;
}
.note.single-line:before {
  top: 8px;
}
.note.single-line {
  margin-bottom: 0px;
}
.note.note__width_auto {
  width: auto !important;
}
.note--long {
  width: 1098px;
}

.label-gap .widget-fieldlabel-wrap {
  margin-bottom: 12px;
}

/* ==========================================================================
   Menu
   ========================================================================== */
#menu-widget {
  position: relative;
  /* Lift menu on top of scroll layer */
  z-index: 990;
  overflow: auto;
}

.ml1 > a,
.ml2 > a {
  display: inline-block;
  width: 100%;
}

.ml1 > a > .icon-menu-arrow {
  float: right;
  vertical-align: middle;
}

.accordion-header {
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: inline-block;
  line-height: 24px;
}

.accordion-wrap > .accordion-item {
  margin-bottom: 10px;
  border-radius: 2px;
  background: var(--s-background-panel, #ffffff);
}

.accordion-icon, .accordion-title {
  display: inline-block;
  vertical-align: middle;
}

.accordion-icon {
  margin-right: 10px;
}

.accordion-header:hover {
  color: #04B0FF;
}

.accordion-header:active {
  color: #0492EB;
}

.accordion-item.collapsed .accordion-body {
  display: none;
}

.accordion-body .accordion-item {
  margin: 20px 0;
}

.accordion-container.accordion .accordion-item-wrap {
  padding: 10px 16px;
}
.accordion-container.accordion .accordion-header {
  display: block;
  position: relative;
}
.accordion-container.accordion .accordion-header:after {
  content: "";
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, #CCD0D1, transparent);
  position: absolute;
  bottom: -8px;
  left: 0;
}
.accordion-container.accordion .accordion-icon {
  position: absolute;
  right: 0;
  margin-right: 0;
}
.accordion-container.accordion .accordion-item.collapsed .accordion-header {
  color: var(--tab-color-primary, #868E93);
}
.accordion-container.accordion .accordion-item.collapsed .accordion-header:hover {
  color: #04B0FF;
}
.accordion-container.accordion .accordion-item.collapsed .accordion-header:active {
  color: #0492EB;
}
.accordion-container.accordion .accordion-item.collapsed .accordion-header:after {
  display: none;
}

.tab-accordion.accordion-container {
  margin-bottom: 0;
}
.tab-accordion.accordion-container .accordion-item-wrap:first-child {
  margin-top: 0;
}
.tab-accordion.accordion-container .accordion-item-wrap:last-child {
  margin-bottom: 0;
}
.tab-accordion.accordion-container .accordion-body {
  padding-bottom: 10px;
}
.tab-accordion.accordion-container .accordion-body .accordion-item {
  margin-bottom: 0;
}
.tab-accordion.accordion-container .accordion-body .opt-btns {
  margin-bottom: 0;
}
.tab-accordion.accordion-container .accordion-body .opt-btns > .button-container {
  margin-bottom: 0;
}

.accordion-container.accordion-no-header .accordion-header {
  display: none;
}

/*
 * Container style
 */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
  position: relative;
}

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0.7;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y {
  display: none;
  opacity: 0;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.7;
}
.ps:hover > .ps__rail-x .ps__thumb-x,
.ps:hover > .ps__rail-y .ps__thumb-x,
.ps--focus > .ps__rail-x .ps__thumb-x,
.ps--focus > .ps__rail-y .ps__thumb-x,
.ps--scrolling-x > .ps__rail-x .ps__thumb-x,
.ps--scrolling-y > .ps__rail-y .ps__thumb-x {
  height: 8px;
}

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: var(--scrollbar-background-primary, #AEDCF8);
  border-radius: 6px;
  transition: background-color 0.2s linear, height 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;
  height: 4px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 0;
  /* please don't change 'position' */
  position: absolute;
}

.ps__thumb-y {
  background-color: var(--scrollbar-background-primary, #AEDCF8);
  border-radius: 6px;
  transition: background-color 0.2s linear, width 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;
  width: 4px;
  /* there must be 'right' for ps__thumb-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
  min-height: 25px !important;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  height: 8px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  width: 8px;
}

.ps .ps__rail-x:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:hover,
.ps .ps__rail-y:focus {
  opacity: 1;
}

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}
/* ==========================================================================
   Navigator / Tab
   ========================================================================== */
.tab-container .navigator-container {
  margin-bottom: 0;
}

.tab_horizontal_center {
  text-align: center;
}

[navi-value=dashboard] .sub-navigator-icon,
[navi-value=dashboardGlobal] .sub-navigator-icon,
[navi-value=dashboardMsp] .sub-navigator-icon {
  background: var(--icon-menu-dashboard, url("../img/svg/SidebariconDashboardNormal.svg")) no-repeat;
}
[navi-value=dashboard].selected .sub-navigator-icon,
[navi-value=dashboardGlobal].selected .sub-navigator-icon,
[navi-value=dashboardMsp].selected .sub-navigator-icon {
  background: url("../img/svg/SidebariconDashboardBlue.svg") no-repeat;
}

[navi-value=sites] .sub-navigator-icon {
  background: var(--icon-menu-siteNormal, url("../img/svg/SidebariconSiteNormal.svg")) no-repeat;
}
[navi-value=sites].selected .sub-navigator-icon {
  background: url("../img/svg/SidebariconSiteBlue.svg") no-repeat;
}

[navi-value=statistics] .sub-navigator-icon {
  background: var(--icon-menu-statistics, url("../img/svg/SidebariconStatisticsNormal.svg")) no-repeat;
}
[navi-value=statistics].selected .sub-navigator-icon {
  background: url("../img/svg/SidebariconStatisticsBlue.svg") no-repeat;
}

[navi-value=mapEntry] .sub-navigator-icon {
  background: var(--icon-menu-mapEntry, url("../img/svg/SidebariconMapNormal.svg")) no-repeat;
}
[navi-value=mapEntry].selected .sub-navigator-icon {
  background: url("../img/svg/SidebariconMapBlue.svg") no-repeat;
}

[navi-value=devices] .sub-navigator-icon,
[navi-value=accessPoints] .sub-navigator-icon {
  background: var(--icon-menu-accessPoints, url("../img/svg/SidebariconDevicesNormal.svg")) no-repeat;
}
[navi-value=devices].selected .sub-navigator-icon,
[navi-value=accessPoints].selected .sub-navigator-icon {
  background: url("../img/svg/SidebariconDevicesBlue.svg") no-repeat;
}

[navi-value=clients] .sub-navigator-icon {
  background: var(--icon-menu-clients, url("../img/svg/SidebariconClientsNormal.svg")) no-repeat;
}
[navi-value=clients].selected .sub-navigator-icon {
  background: url("../img/svg/SidebariconClientsBlue.svg") no-repeat;
}

[navi-value=insight] .sub-navigator-icon {
  background: var(--icon-menu-insight, url("../img/svg/SidebariconInsightNormal.svg")) no-repeat;
}
[navi-value=insight].selected .sub-navigator-icon {
  background: url("../img/svg/SidebariconInsightBlue.svg") no-repeat;
}

[navi-value=log] .sub-navigator-icon {
  background: var(--icon-menu-log, url("../img/svg/SidebariconLogNormal.svg")) no-repeat;
}
[navi-value=log].selected .sub-navigator-icon {
  background: url("../img/svg/SidebariconLogBlue.svg") no-repeat;
}

[navi-value=auditLogs] .sub-navigator-icon {
  background: var(--icon-menu-auditLogs, url("../img/svg/SidebariconAuditLogNormal.svg")) no-repeat;
}
[navi-value=auditLogs].selected .sub-navigator-icon {
  background: url("../img/svg/SidebariconAuditLogBlue.svg") no-repeat;
}

[navi-value=health] .sub-navigator-icon {
  background: var(--icon-menu-health, url("../img/svg/SidebariconHealthNormal.svg")) no-repeat;
}
[navi-value=health].selected .sub-navigator-icon {
  background: url("../img/svg/SidebariconHealthBlue.svg") no-repeat;
}

[navi-value=abnormal] .sub-navigator-icon {
  background: var(--icon-menu-abnormal, url("../img/svg/SidebariconAbnormalNormal.svg")) no-repeat;
}
[navi-value=abnormal].selected .sub-navigator-icon {
  background: url("../img/svg/SidebariconAbnormalBlue.svg") no-repeat;
}

[navi-value=networkAnalyze] .sub-navigator-icon {
  background: var(--icon-menu-tools, url("../img/svg/SidebariconNetworkAnalyzeNormal.svg")) no-repeat;
}
[navi-value=networkAnalyze].selected .sub-navigator-icon {
  background: url("../img/svg/SidebariconNetworkAnalyzeBlue.svg") no-repeat;
}

[navi-value=networkReport] .sub-navigator-icon {
  background: var(--icon-menu-report, url("../img/svg/NetworkReportNormal.svg")) no-repeat;
}
[navi-value=networkReport].selected .sub-navigator-icon {
  background: url("../img/svg/NetworkReportBlue.svg") no-repeat;
}

[navi-value=cloud] .sub-navigator-icon {
  background: var(--icon-menu-cloud, url("../img/svg/SidebariconCloudNormal.svg")) no-repeat;
}
[navi-value=cloud].selected .sub-navigator-icon {
  background: url("../img/svg/SidebariconCloudBlue.svg") no-repeat;
}

[navi-value=license] .sub-navigator-icon {
  background: var(--icon-menu-license, url("../img/svg/LicenseManage.svg")) no-repeat;
}
[navi-value=license].selected .sub-navigator-icon {
  background: url("../img/svg/LicenseManageHover.svg") no-repeat;
}

[navi-value=admin] .sub-navigator-icon {
  background: var(--icon-menu-admin, url("../img/svg/Admin.svg")) no-repeat;
}
[navi-value=admin].selected .sub-navigator-icon {
  background: url("../img/svg/AdminHover.svg") no-repeat;
}

[navi-value=settings] .sub-navigator-icon {
  background: var(--icon-menu-settings, url("../img/svg/SidebariconSettingsNormal.svg")) no-repeat;
}
[navi-value=settings].selected .sub-navigator-icon {
  background: url("../img/svg/SidebariconSettingsBlue.svg") no-repeat;
}

[navi-value=siteCLI] .sub-navigator-text::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  width: 39px;
  height: 20px;
  vertical-align: middle;
  background: url("../img/BETA.png") no-repeat;
}

[navi-value=deviceCLI] .sub-navigator-text::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  width: 39px;
  height: 20px;
  vertical-align: middle;
  background: url("../img/BETA.png") no-repeat;
}

#menu .has-sub-navi ul {
  display: none;
}

.navigator-container {
  margin-bottom: 0;
  height: 100%;
}
.navigator-container .navigator-li-level1 > a {
  width: 160px;
  height: 48px;
}
.navigator-container .navigator-li-level2 > a {
  width: 160px;
  height: 48px;
}

.navigator-li-level1 {
  position: relative;
}

.navigator-li-level1 > a,
.navigator-li-level2 > a {
  color: var(--s-color-side, #363E4D);
}

.navigator-li-level1.selected {
  background-color: rgba(4, 146, 235, 0.08);
}
.navigator-li-level1.selected > a {
  color: #0492EB;
}

#secondMenu .navigator-li-level1 .sub-navigator-text {
  margin-left: 0 !important;
}
#secondMenu .navigator-li-level1.has-sub-navi > a > .sub-navigator-icon-after {
  position: absolute;
  top: 12px;
  right: 10px;
  display: inline-block;
  width: 24px;
  height: 24px;
  background: var(--icon-select-down, url("../img/svg/SidebariconDownNormal.svg")) no-repeat;
}
#secondMenu .navigator-li-level1.has-sub-navi ul.navigator-ul-sub {
  display: none;
}
#secondMenu .navigator-li-level1.has-sub-navi.expand > a {
  color: #0492EB;
  background: rgba(4, 146, 235, 0.08);
  border-right: 4px solid #0492EB;
}
#secondMenu .navigator-li-level1.has-sub-navi.expand > a > .sub-navigator-icon-after {
  background: url("../img/svg/SidebariconUpBlue.svg") no-repeat;
}
#secondMenu .navigator-li-level1.has-sub-navi.expand ul.navigator-ul-sub {
  display: block;
}
#secondMenu .navigator-li-level1.has-sub-navi.selected > a > .sub-navigator-icon-after {
  background: url("../img/svg/SidebariconDownBlue.svg") no-repeat;
}
#secondMenu .navigator-li-level2 .sub-navigator-text {
  font-size: 14px;
  margin-left: 14px !important;
}
#secondMenu .navigator-li-level2.selected > a {
  color: #0492EB;
}
#secondMenu .navigator-li-level2 > a {
  width: 200px;
}

.navigator-li-level1 a {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 15px;
  cursor: pointer;
}

.navigator-bottom {
  position: absolute;
  bottom: 10px;
  width: 100%;
}

.navigator-li-level1.notice .sub-navigator-icon-after {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #c11c66;
  opacity: 0.9;
}

/* ==========================================================================
   Checkbox
   ========================================================================== */
/* checkbox list wrapper */
.checkbox-group-wrap {
  display: inline-block;
  vertical-align: top;
}

/* Use custom checbox */
.checkbox-checkbox {
  display: none;
}

.checkbox-label {
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
}

.checkbox-label .checkbox-icon {
  box-sizing: border-box;
  margin-right: 6px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.checkbox-label .checkbox-icon-inner {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 16px;
  height: 16px;
  background-color: var(--checkbox-background-primary, #ffffff);
  border: 1px solid var(--components-border-primary, #AEB4B7);
  border-radius: 2px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.checkbox-label .checkbox-icon-inner:after {
  content: " ";
  position: absolute;
  top: 43%;
  left: 24%;
  display: table;
  width: 5px;
  height: 9px;
  border: 2px solid #ffffff;
  border-top: 0;
  border-left: 0;
  -webkit-transform: rotate(45deg) scale(0) translate(-50%, -50%);
  -ms-transform: rotate(45deg) scale(0) translate(-50%, -50%);
  transform: rotate(45deg) scale(0) translate(-50%, -50%);
  opacity: 0;
  -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
  transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
}

.checkbox-label:hover .checkbox-icon-inner {
  border-color: #04B0FF;
}

.checkbox-label.checked .checkbox-icon:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #0492EB;
  border-radius: 2px;
  animation: spreadBorder 0.36s ease-in-out;
  -webkit-animation: spreadBorder 0.36s ease-in-out;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}

@keyframes spreadBorder {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1.6);
    transform: scale(1.6);
    opacity: 0;
  }
}
.checkbox-label.checked .checkbox-icon-inner {
  background-color: var(--checkbox-background-primary, #ffffff);
  border-color: #0492EB;
}

.checkbox-label.checked .checkbox-icon-inner:after {
  content: " ";
  position: absolute;
  display: block;
  border: 2px solid #0492EB;
  border-top: 0;
  border-left: 0;
  -webkit-transform: rotate(45deg) scale(1) translate(-50%, -50%);
  -ms-transform: rotate(45deg) scale(1) translate(-50%, -50%);
  transform: rotate(45deg) scale(1) translate(-50%, -50%);
  opacity: 1;
  -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
}

.checkbox-label.imperfect .checkbox-icon-inner {
  background-color: var(--checkbox-background-primary, #ffffff);
  border-color: #AEB4B7;
}

.checkbox-label.imperfect .checkbox-icon-inner:after {
  content: " ";
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: #0492EB;
  border: 0;
  -webkit-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.checkbox-label.disabled {
  cursor: not-allowed;
}
.checkbox-label.disabled .text {
  color: var(--checkbox-color-disabled, rgba(33, 33, 33, 0.4));
}

.checkbox-label.disabled .checkbox-icon-inner {
  border-color: rgba(174, 180, 183, 0.4);
  background: rgba(174, 180, 183, 0.2);
}

.checkbox-label.disabled.checked .checkbox-icon:after {
  border-color: transparent;
  -webkit-animation-name: none;
  animation-name: none;
}

.checkbox-label.disabled.checked .checkbox-icon-inner {
  background: var(--checkbox-background-primary, #ffffff);
  border-color: rgba(4, 146, 235, 0.4);
}

.checkbox-label.disabled.checked .checkbox-icon-inner:after {
  border-color: rgba(4, 146, 235, 0.4);
  -webkit-animation-name: none;
  animation-name: none;
}

.checkbox-group-container.error .checkbox-label:not(.disabled) .checkbox-icon-inner {
  border-color: red;
}

/* single checbox */
.checkbox-container .widget-tips-wrap {
  line-height: 24px;
}
.checkbox-container .checkbox-group-wrap-outer {
  height: 28px;
  line-height: 28px;
}
.checkbox-container .checkbox-label .text {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  vertical-align: middle;
  white-space: normal;
}
.checkbox-container .tips-content {
  margin-left: 0;
}

/* checbox in grid */
.grid-container .scroll-x-container .checkbox-label.checked .checkbox-icon-inner, .grid-container .grid-fixed-container .checkbox-label.checked .checkbox-icon-inner,
.incident-timeline-container .checkbox-label.checked .checkbox-icon-inner {
  background-color: var(--checkbox-background-primary, #0492EB);
}
.grid-container .scroll-x-container .checkbox-label.checked .checkbox-icon-inner:after, .grid-container .grid-fixed-container .checkbox-label.checked .checkbox-icon-inner:after,
.incident-timeline-container .checkbox-label.checked .checkbox-icon-inner:after {
  border-color: #0492EB;
}
.grid-container .scroll-x-container .grid-content-tr.disabled .checkbox-label, .grid-container .scroll-x-container .grid-content-tr.select-disabled .checkbox-label, .grid-container .grid-fixed-container .grid-content-tr.disabled .checkbox-label, .grid-container .grid-fixed-container .grid-content-tr.select-disabled .checkbox-label,
.incident-timeline-container .grid-content-tr.disabled .checkbox-label,
.incident-timeline-container .grid-content-tr.select-disabled .checkbox-label {
  cursor: not-allowed;
}
.grid-container .scroll-x-container .grid-content-tr.disabled .checkbox-label .checkbox-icon-inner, .grid-container .scroll-x-container .grid-content-tr.select-disabled .checkbox-label .checkbox-icon-inner, .grid-container .grid-fixed-container .grid-content-tr.disabled .checkbox-label .checkbox-icon-inner, .grid-container .grid-fixed-container .grid-content-tr.select-disabled .checkbox-label .checkbox-icon-inner,
.incident-timeline-container .grid-content-tr.disabled .checkbox-label .checkbox-icon-inner,
.incident-timeline-container .grid-content-tr.select-disabled .checkbox-label .checkbox-icon-inner {
  border-color: rgba(174, 180, 183, 0.4);
}
.grid-container .scroll-x-container .grid-content-tr.disabled .checkbox-label.checked .checkbox-icon-inner, .grid-container .scroll-x-container .grid-content-tr.select-disabled .checkbox-label.checked .checkbox-icon-inner, .grid-container .grid-fixed-container .grid-content-tr.disabled .checkbox-label.checked .checkbox-icon-inner, .grid-container .grid-fixed-container .grid-content-tr.select-disabled .checkbox-label.checked .checkbox-icon-inner,
.incident-timeline-container .grid-content-tr.disabled .checkbox-label.checked .checkbox-icon-inner,
.incident-timeline-container .grid-content-tr.select-disabled .checkbox-label.checked .checkbox-icon-inner {
  background: rgba(4, 146, 235, 0.4);
}

/* ==========================================================================
   Checkbox-group
   ========================================================================== */
.checkbox-group-container .checkbox-label {
  white-space: nowrap;
}
.checkbox-group-container .checkbox-label > span {
  vertical-align: middle;
}
.checkbox-group-container .checkbox-group-wrap-outer {
  line-height: 28px;
}
.checkbox-group-container .checkbox-group-wrap-outer .no-data-tip,
.checkbox-group-container .checkbox-group-wrap-outer .search-empty-tip {
  display: none;
}
.checkbox-group-container .checkbox-group-wrap-outer.empty .checkbox-group-search-box {
  display: none;
}
.checkbox-group-container .checkbox-group-wrap-outer.empty .no-data-tip {
  display: block;
}
.checkbox-group-container .checkbox-group-wrap-outer.empty-search .search-empty-tip {
  display: block;
}
.checkbox-group-container .checkbox-list {
  margin-right: 10px;
}
.checkbox-group-container .checkbox-list:last-child {
  margin-right: 0;
}

.checkbox-group-container .checkbox-list {
  display: inline-block;
}

.checkbox-group-container.auto-width .checkbox-list {
  width: auto;
}

.checkbox-group-container.checkbox_vertical .checkbox-list {
  display: block;
  margin-bottom: 12px;
  width: auto;
}
.checkbox-group-container.checkbox_vertical .checkbox-list:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Textbox
   ========================================================================== */
.text-wrap,
.textbox-tips {
  display: inline-block;
  vertical-align: middle;
}

.text-container input {
  display: inline-block;
  height: 26px;
  line-height: 14px;
  padding-bottom: 5px;
  padding-top: 5px;
}

.text-container .text-wrap {
  position: relative;
  max-width: 240px;
  height: 28px;
  width: 240px;
  line-height: 28px;
  padding: 0 10px;
  line-height: 26px;
}

.text-container .text-wrap-outer .text-wrap {
  border: 1px solid var(--components-border-primary, #BEC3C5);
  border-radius: 3px;
}

.textbox-prefix-text {
  margin-right: 10px;
  line-height: 28px;
  vertical-align: top;
}

#setupView .widget-tips .tips-content {
  max-width: 470px;
}

.msg-content-container .widget-tips .tips-content {
  max-width: 182px;
}
.msg-content-container .widget-tips .widget-tips-wrap a {
  color: #0492EB;
  text-decoration: underline;
  cursor: pointer;
}

.long-tips .tips-content {
  margin-left: 0;
}

.tips-content {
  margin-left: 10px;
}

.text-container.hover .text-wrap-outer .text-wrap {
  border-color: #04B0FF;
}
.text-container.focus .text-wrap-outer .text-wrap {
  border-color: #0492EB;
}
.text-container.error .text-wrap {
  background-color: var(--components-bg, #ffffff);
}
.text-container.error .text-wrap-outer .text-wrap {
  border-color: #FF2954;
}

.text-container.disabled .text-wrap-outer .text-wrap {
  background-color: var(--select-background-disabled, #EBECED);
  border-color: var(--components-border-primary, #BEC3C5);
}
.text-container.disabled .text-wrap-outer .text-wrap .text-wrap-unit {
  background: var(--select-background-disabled, #EBECED);
}
.text-container.disabled .text-wrap-outer .text-wrap input {
  color: var(--tab-color-primary, #868E93);
}
.text-container.disabled .text-wrap-outer .text-wrap:hover {
  cursor: not-allowed;
}

.text-container.has-prefix .text-wrap {
  padding: 0 10px 0 0;
}
.text-container.has-prefix span.text-wrap-before {
  padding: 0 10px;
  cursor: default;
  color: var(--tab-color-primary, #868E93);
  background: rgba(242, 244, 247, 0.5);
  border-right: 1px solid var(--components-border-primary, #BEC3C5);
  position: absolute;
}
.text-container.has-prefix input {
  padding-left: 76px;
}
.text-container.has-prefix.phone-number .text-wrap-before {
  background: #ffffff;
  border-right: none;
}
.text-container.has-prefix.phone-number input {
  padding-left: 30px;
}
.text-container.has-prefix.disabled .text-wrap-before {
  background: var(--select-background-disabled, #EBECED);
}

.widget-addon {
  margin-top: 8px;
}

.text-wrap-unit {
  position: absolute;
  right: 10px;
  top: 0;
  line-height: 26px;
  color: var(--tab-color-primary, #868E93);
  background: var(--form-background-unit, #ffffff);
}

.text-container .hint {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 8px;
}
.text-container .hint .text-hint {
  font-size: 13px;
  color: var(--tab-color-primary, #868E93);
  cursor: text;
}

.text-container.text_s .text-wrap {
  width: 70px;
}

.text-container.text_m .text-wrap {
  width: 120px;
}

.text-container.text_m_p .text-wrap {
  width: 160px;
}

.text-container.text_l .text-wrap {
  width: 210px;
}

.search-box.text-container .text-wrap {
  padding-right: 25px;
}
.search-box.text-container .text-wrap-after {
  position: absolute;
  top: 1px;
  right: 2px;
  display: inline-block;
  width: 24px;
  height: 24px;
  background: var(--select-icon-search, url(../img/svg/InputIconSearch.svg)) no-repeat;
  cursor: pointer;
  z-index: 2;
}
.search-box.text-container .text-wrap-after:hover {
  background: url(../img/svg/InputIconSearchHover.svg) no-repeat;
}
.search-box.text-container .hint {
  padding-right: 24px;
}

.text-container.prefix {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
}
.text-container.prefix .text-wrap {
  width: 160px;
  border-radius: 3px 0 0 3px;
}
.text-container.prefix.error:not(.empty-error) .widget-wrap-outer {
  margin-bottom: 20px;
}
.text-container.prefix.error:not(.empty-error) .widget-error-tips {
  position: absolute;
  white-space: nowrap;
}
.text-container.prefix.hover, .text-container.prefix.focus, .text-container.prefix.error {
  z-index: 2;
}
.text-container.prefix.hover .text-wrap, .text-container.prefix.focus .text-wrap, .text-container.prefix.error .text-wrap {
  border-right-width: 1px;
}

.text-container.suffix {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
}
.text-container.suffix .text-wrap {
  width: 160px;
  border-radius: 0 3px 3px 0;
}
.text-container.suffix.hover, .text-container.suffix.focus, .text-container.suffix.error {
  z-index: 2;
}
.text-container.suffix.hover .text-wrap, .text-container.suffix.focus .text-wrap, .text-container.suffix.error .text-wrap {
  border-left-width: 1px;
}

/* ==========================================================================
   TextboxEditor
   ========================================================================== */
.text-editor-container.title {
  font-weight: bold;
  font-size: 16px;
}
.text-editor-container .text-container {
  background: var(--select-background-hover, #F2F3F5);
}
.text-editor-container .text-container .text-wrap-outer {
  width: 100%;
}
.text-editor-container .text-container .widget-wrap {
  height: 36px;
  padding: 0 20px;
  width: 100%;
  max-width: 100%;
  border-color: var(--select-background-hover, #F2F3F5) !important;
}
.text-editor-container .text-container input {
  height: 36px;
  padding: 10px 0;
}
.text-editor-container .text-editor-wrap-outer {
  width: 100%;
}
.text-editor-container .title-text-container {
  height: 36px;
  cursor: pointer;
  padding: 10px 20px;
  line-height: 14px;
  border: 1px dashed transparent;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.text-editor-container .title-text-container:hover {
  border: 1px dashed #BEC3C5;
}
.text-editor-container .title-text-container.error {
  border: 1px solid #FF2954;
}
.text-editor-container .widget-error-tips {
  padding: 0 20px;
}
.text-editor-container.error .text-wrap {
  background-color: var(--select-background-hover, #F2F3F5);
}
.text-editor-container.error .text-wrap-outer .text-wrap {
  border-color: #FF2954;
}
.text-editor-container.error .widget-error-tips {
  font-weight: normal;
  font-size: 13px;
}

/* ==========================================================================
   questionEditor
   ========================================================================== */
.question-card-container {
  position: relative;
}
.question-card-container .question-card-wrap-outer, .question-card-container .question-card-wrap, .question-card-container .question-card-container {
  width: 100%;
}
.question-card-container .question-card-index {
  position: absolute;
  left: -16px;
  top: 11px;
  font-weight: bold;
}
.question-card-container .card-title {
  width: 100%;
  padding-right: 100px;
  position: relative;
}
.question-card-container .card-title .question-card-title {
  font-weight: bold;
  font-size: 14px;
}
.question-card-container .card-title .question-card-operator {
  width: 80px;
  text-align: center;
  top: 50%;
  transform: translate(0, -50%);
  position: absolute;
  right: 0;
}
.question-card-container .card-footer {
  margin-top: 22px;
  position: relative;
}
.question-card-container .card-footer .question-card-required {
  float: right;
}
.question-card-container .card-footer .card-item-limit-note {
  margin-top: 12px;
}
.question-card-container .choice-input {
  vertical-align: middle;
  width: 200px;
  border: 1px solid var(--components-border-primary, #bec3c5);
  border-radius: 3px;
  height: 36px;
  display: inline-block;
  padding: 10px 20px;
  line-height: 14px;
  cursor: text;
}
.question-card-container .choice-input:focus {
  border: 1px solid #0492EB;
}
.question-card-container .operation-btn {
  color: #0492EB;
  margin-right: 100px;
}
.question-card-container .operation-btn:hover {
  color: rgba(4, 146, 235, 0.6);
}
.question-card-container .operation-btn.disabled {
  color: rgba(4, 146, 235, 0.6);
  cursor: not-allowed;
}
.question-card-container .operation-btn span.icon {
  margin-right: 8px;
}
.question-card-container .btn-drag {
  margin-right: 12px;
  cursor: move;
}
.question-card-container .btn-drag .icon {
  width: 22px;
  height: 22px;
  background: var(--icon-drag, url(../img/svg/TableIconDrag.svg)) no-repeat;
}
.question-card-container .btn-drag:hover .icon {
  background: url(../img/svg/TableIconDragActive.svg) no-repeat;
}
.question-card-container .btn-drag.disabled .icon {
  background: url(../img/svg/TableIconDragDisabled.svg) no-repeat;
}
.question-card-container .btn-add {
  cursor: pointer;
}
.question-card-container .btn-add:hover .icon {
  background: url(../img/svg/buttoniconaddhover.svg) no-repeat;
}
.question-card-container .btn-add.disabled {
  opacity: 0.4;
}
.question-card-container .btn-remove-item {
  cursor: pointer;
  display: inline-block;
  width: 25px;
  height: 25px;
  background: url(../img/svg/DatePickerClose.svg) no-repeat;
}
.question-card-container .choice-item-container {
  position: relative;
  padding-right: 99px;
  padding-left: 28px;
}
.question-card-container .choice-item-container .choice-type-icon {
  width: 16px;
  height: 16px;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  position: absolute;
}
.question-card-container .choice-item-container .btn-remove-item {
  position: absolute;
  right: 68px;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.question-card-container .choice-item-container .choice-item {
  height: 36px;
}
.question-card-container .choice-item-container.others .choice-item {
  vertical-align: middle;
  display: inline-block;
  width: 240px;
  margin-right: 12px;
  margin-bottom: 0;
}
.question-card-container .choice-item-container .choice-others-input {
  vertical-align: middle;
  width: 200px;
  border: 1px solid var(--components-border-primary, #bec3c5);
  border-radius: 3px;
  height: 36px;
  display: inline-block;
  padding: 10px 20px;
  line-height: 14px;
  cursor: text;
}
.question-card-container.single-card .choice-type-icon {
  border: 1px solid #AEB4B7;
  border-radius: 50%;
}
.question-card-container.multiple-card .choice-type-icon {
  border: 1px solid #AEB4B7;
}
.question-card-container.combobox-card .choice-type-icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/SelectIconDown.svg) no-repeat;
}

.batch-add-msg.msg-container .batch-add-title {
  font-size: 14px;
  font-weight: bold;
}
.batch-add-msg.msg-container .text-wrap-outer, .batch-add-msg.msg-container .widget-wrap {
  width: 100%;
}
.batch-add-msg.msg-container .batch-add-textarea .text-wrap {
  width: 100%;
  max-width: 100%;
}
.batch-add-msg.msg-container .batch-add-textarea .widget-tips {
  display: none;
}

.edit-score-msg.msg-container .scrore-in-msg-wrap {
  position: relative;
}
.edit-score-msg.msg-container .score-in-msg {
  text-align: center;
}
.edit-score-msg.msg-container .score-in-msg .score-comment {
  margin-top: 45px;
}
.edit-score-msg.msg-container .score-tip-container {
  border: 1px solid var(--components-border-primary, #bec3c5);
  z-index: 1;
  position: relative;
  top: -1px;
  padding: 16px 20px;
}
.edit-score-msg.msg-container .score-tip-container .widget-fieldlabel-wrap {
  margin-bottom: 12px;
}
.edit-score-msg.msg-container .score-tips-content {
  color: #FF8800;
  text-align: center;
  height: 30px;
  width: 100%;
  position: absolute;
  top: 50px;
  left: 0;
}
.edit-score-msg.msg-container .point-text-input {
  width: 100%;
}
.edit-score-msg.msg-container .point-text-input .widget-fieldlabel-wrap span {
  color: var(--tab-color-primary, #868E93);
}
.edit-score-msg.msg-container .point-text-input .text-wrap-outer, .edit-score-msg.msg-container .point-text-input .text-wrap {
  width: 100%;
  max-width: 100%;
  height: 36px;
  line-height: 36px;
}
.edit-score-msg.msg-container .tab-in-score-msg {
  margin-top: 40px;
  z-index: 2;
  margin-bottom: 0;
}
.edit-score-msg.msg-container .tab-in-score-msg .tab-btn {
  background-color: rgba(242, 243, 245, 0.4);
  border: 1px solid var(--components-border-primary, #bec3c5);
  padding: 0 24px;
  line-height: 32px;
}
.edit-score-msg.msg-container .tab-in-score-msg .tab-btn.first {
  border-radius: 3px 0 0 0;
}
.edit-score-msg.msg-container .tab-in-score-msg .tab-btn.last {
  border-radius: 0 3px 0 0;
}
.edit-score-msg.msg-container .tab-in-score-msg .tab-btn.selected {
  color: #0492EB;
  border-top: 1px solid #0492EB;
  background: #ffffff;
  border-bottom: 1px solid transparent;
}
.edit-score-msg.msg-container .tab-in-score-msg .tab-btn.selected:before {
  content: "";
  border-top: 3px solid #0492EB;
  height: 0;
  width: calc(100% + 2px);
  position: absolute;
  top: -1px;
  left: -1px;
}

.score-container .score-icon {
  cursor: pointer;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 24px;
  background-image: url("../img/star_grey@3x.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.score-container .score-icon.active {
  background-image: url("../img/star_yellow@3x.png");
}
.score-container .score-icon:last-child {
  margin-right: 0;
}
.score-container .score-tip {
  color: #FF8800;
  text-align: center;
  margin-top: 10px;
}
.score-container .score-comment .comment-icon-outer {
  display: inline-block;
  margin-bottom: 12px;
  color: #AEB4B7;
}
.score-container .score-comment .comment-icon-outer .icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  background: url("../img/svg/Edit.svg") no-repeat;
}
.score-container .score-comment .textarea-container {
  display: none;
}
.score-container .score-comment .textarea-container .text-wrap {
  border-color: #0492EB;
}
.score-container .score-comment .text-wrap-outer, .score-container .score-comment .widget-wrap, .score-container .score-comment .text-wrap {
  max-width: unset;
  width: 100%;
}
.score-container .score-comment .textarea-tip {
  float: right;
  display: none;
}
.score-container .score-comment.active .comment-icon-outer {
  color: #0492EB;
}
.score-container .score-comment.active .comment-icon-outer .icon {
  background: url("../img/svg/EditActive.svg") no-repeat;
}
.score-container .score-comment.active .textarea-container {
  display: block;
}
.score-container .score-comment.active .textarea-tip {
  display: inline;
}

/* ==========================================================================
   Radio
   ========================================================================== */
.radio-group-container .radio-group-wrap-outer {
  line-height: 28px;
}
.radio-group-container .radio-group-wrap-outer, .radio-group-container .radio-label > span {
  vertical-align: middle;
}
.radio-group-container .widget-fieldlabel-wrap {
  vertical-align: top;
}

.radio-group-wrap {
  display: inline-block;
}

/* Use custom radio */
.radio-radio {
  display: none;
}

.radio-label {
  cursor: pointer;
}

.radio-label .text {
  margin-left: 6px;
  display: inline-block;
}
.radio-label .icon {
  box-sizing: border-box;
  overflow: visible;
  position: relative;
  display: inline-block;
}
.radio-label .icon-inner {
  display: block;
  top: 0px;
  left: 0px;
  position: relative;
  background-color: var(--checkbox-background-primary, #fff);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #AEB4B7;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.radio-label:hover .icon-inner {
  border-color: #04B0FF;
}
.radio-label .icon-inner:after {
  position: absolute;
  top: 3px;
  left: 3px;
  display: table;
  width: 8px;
  height: 8px;
  background-color: #0492EB;
  border-radius: 8px;
  opacity: 0;
  -webkit-transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  content: " ";
}
.radio-label.checked .icon-inner {
  border-color: #0492EB;
}
.radio-label.checked .icon-inner:after {
  opacity: 1;
}
.radio-label.checked .icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border: 1px solid #0492EB;
  border-radius: 50%;
  -webkit-animation: antRadioEffect 0.36s ease-in-out;
  animation: antRadioEffect 0.36s ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@keyframes antRadioEffect {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1.6);
    transform: scale(1.6);
    opacity: 0;
  }
}
.radio-label.disabled {
  cursor: not-allowed;
}
.radio-label.disabled .icon-inner {
  border-color: rgba(174, 180, 183, 0.4);
  background: rgba(174, 180, 183, 0.2);
}
.radio-label.disabled .text {
  color: #c9c9c9;
}
.radio-label.disabled.checked .icon-inner {
  border-color: #0492EB;
  opacity: 0.4;
}

li.radio-list.disabled .disable-icon[data-tip] {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: inline-block;
  cursor: not-allowed;
  width: 100%;
  height: 100%;
}

.radio_inline .radio-list {
  display: inline-block;
  margin-right: 40px;
}
.radio_inline .radio-list:last-child {
  margin-right: 0;
}

.radio-group-list-wrap {
  display: block;
  position: relative;
}

.radio-content-inline li.radio-list > .widget-wrap {
  display: inline-block;
  margin-right: 20px;
}
.radio-content-inline .radio-content-wrap {
  display: inline-block;
}

.radio-group-container.error .radio-label .icon-inner {
  border-color: #FF2954;
}

.radio-has-tooltip .widget-wrap,
.radio-has-tooltip .radio-content-wrap {
  display: inline-block;
}
.radio-has-tooltip .tooltip-container {
  top: 8px;
}

.search-container .search-wrap.widget-wrap {
  max-width: 240px;
  height: 28px;
  line-height: 28px;
  padding-left: 10px;
  padding-right: 24px;
  width: 240px;
  display: inline-block;
  border: 1px solid var(--components-border-primary, #BEC3C5);
  border-radius: 3px;
}
.search-container .search-text {
  display: block;
  height: 26px;
  line-height: 26px;
  cursor: default;
}
.search-container .search-wrap-outer {
  position: relative;
}
.search-container .search-switch {
  position: absolute;
  width: 28px;
  top: 0;
  right: 0;
  text-align: center;
}
.search-container .search-switch.opt {
  cursor: default;
}
.search-container .search-switch.opt.clear {
  cursor: pointer;
}
.search-container .search-lists {
  position: absolute;
  text-align: left;
}
.search-container .search-lists.hidden {
  display: none !important;
}
.search-container .search-lists .search-list-wrap {
  padding: 10px 0;
  background: var(--select-background-primary, #ffffff);
  border: 1px solid var(--select-border-primary, var(--components-border-primary, #BEC3C5));
  border-radius: 3px;
}
.search-container .search-lists .search-list-content-wrap {
  overflow: hidden;
  overflow-y: auto;
  line-height: 28px;
  max-height: 200px;
}
.search-container .search-lists li.search-list {
  background-color: var(--select-background-primary, #ffffff);
}
.search-container .search-lists li.search-list:hover {
  background-color: var(--select-background-hover, #F2F3F5);
}
.search-container .search-lists li.search-list.selected {
  color: #0492EB;
}
.search-container .search-lists li.search-list.disabled .search-label {
  cursor: default;
}
.search-container .search-lists .search-label {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  word-break: break-all;
  display: block;
  padding-left: 16px;
  padding-right: 24px;
  padding-top: 8px;
  padding-bottom: 7px;
  line-height: 1.14;
  white-space: nowrap;
}
.search-container .search-lists .search-label .text {
  word-break: break-all;
  white-space: normal;
}
.search-container .search-lists .search-checkbox {
  display: none;
}
.search-container .search-tips .tips-content {
  display: inline-block;
  margin-left: 10px;
}
.search-container.hover .search-wrap.widget-wrap {
  border-color: #04B0FF;
}
.search-container.focus .search-wrap.widget-wrap {
  border-color: #0492EB;
}
.search-container.disabled .search-wrap.widget-wrap {
  background-color: var(--select-background-disabled, #EBECED);
  border-color: var(--select-color-disabled, var(--components-border-primary, #BEC3C5));
}
.search-container .supplement-btn {
  display: none;
  margin-right: 8px;
  min-width: 18px;
  vertical-align: middle;
}
.search-container li.search-list:hover .supplement-btn {
  display: inline-block;
}
.search-container.show-supplement-btn li.search-list {
  display: flex;
  align-items: center;
}
.search-container.show-supplement-btn li.search-list .search-label {
  flex-grow: 1;
}

.combobox-wrap-outer {
  font-size: 0;
  white-space: nowrap;
  position: relative;
}
.combobox-wrap-outer > div {
  font-size: 14px;
}

.combobox-switch {
  position: absolute;
  top: 0;
  right: 1px;
  padding: 0 0;
  font-size: 0;
}

.combobox-wrap.widget-wrap {
  max-width: 240px;
  height: 28px;
  line-height: 28px;
  padding-left: 10px;
  padding-right: 24px;
  width: 240px;
}

.combobox-wrap.widget-wrap {
  display: inline-block;
  border: 1px solid var(--components-border-primary, #BEC3C5);
  position: relative;
  vertical-align: middle;
  border-radius: 3px;
}

.combobox-container {
  font-size: 0;
}
.combobox-container .widget-fieldlabel-wrap {
  font-size: 14px;
}
.combobox-container.hover .combobox-wrap.widget-wrap {
  border-color: #04B0FF;
}
.combobox-container.focus .combobox-wrap.widget-wrap {
  border-color: #0492EB;
}

.combobox-container.disabled .combobox-wrap.widget-wrap {
  background-color: var(--select-background-disabled, #EBECED);
  border-color: var(--select-color-disabled, var(--components-border-primary, #BEC3C5));
}
.combobox-container.disabled .combobox-wrap.widget-wrap .combobox-text {
  color: var(--tab-color-primary, #868E93);
}

.combobox-container.error .combobox-wrap.widget-wrap {
  border-color: #FF2954;
}

.combobox-text {
  word-break: break-all;
  overflow: hidden;
  display: block;
  height: 26px;
  line-height: 26px;
  cursor: default;
}
.combobox-text.no-selected {
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
}

.combobox-lists.hidden {
  display: none;
}

.bottom-slots.hidden {
  display: none;
}

.top-slots.hidden {
  display: none;
}

#global-combobox-options,
#customer-combobox-options {
  position: absolute;
  z-index: 600;
}
#global-combobox-options .combobox-list-2, #global-combobox-options .combobox-list-3,
#customer-combobox-options .combobox-list-2,
#customer-combobox-options .combobox-list-3 {
  display: none;
}
#global-combobox-options .combobox-search-box,
#customer-combobox-options .combobox-search-box {
  margin-bottom: 4px;
  text-align: center;
}
#global-combobox-options .combobox-search-box .widget-wrap,
#customer-combobox-options .combobox-search-box .widget-wrap {
  width: 208px;
  padding: 0 26px 0 10px;
}
#global-combobox-options div.combobox-search-box-icon,
#customer-combobox-options div.combobox-search-box-icon {
  position: absolute;
  right: 18px;
  top: 12px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  background: var(--select-icon-search, url(../img/svg/InputIconSearch.svg)) no-repeat;
}
#global-combobox-options div.combobox-empty-tip, #global-combobox-options div.combobox-no-search-result-tip,
#customer-combobox-options div.combobox-empty-tip,
#customer-combobox-options div.combobox-no-search-result-tip {
  opacity: 0.6;
  padding: 8px 24px 7px 16px;
  line-height: 1.14;
  white-space: nowrap;
  position: relative;
  display: none;
  margin-bottom: 6px;
}
#global-combobox-options.none-items div.combobox-empty-tip,
#customer-combobox-options.none-items div.combobox-empty-tip {
  display: block;
  padding: 8px;
}
#global-combobox-options.none-search-result div.combobox-no-search-result-tip,
#customer-combobox-options.none-search-result div.combobox-no-search-result-tip {
  display: block;
}
#global-combobox-options .supplement-btn,
#customer-combobox-options .supplement-btn {
  display: none;
  margin-right: 8px;
  min-width: 18px;
  vertical-align: middle;
}
#global-combobox-options li.combobox-list:not(.disabled):hover .supplement-btn,
#customer-combobox-options li.combobox-list:not(.disabled):hover .supplement-btn {
  display: inline-block;
}

.combobox-list-wrap {
  position: absolute;
  width: 100%;
}

.combobox-list-content-wrap-outer {
  padding: 10px 0;
  border: 0 solid #EBECED;
  box-shadow: var(--select-box-shadow, 0 0 2px 0 rgba(54, 62, 77, 0.36), 0 2px 2px 0 rgba(54, 62, 77, 0.18));
  border-radius: 3px;
  background: var(--select-background-primary, white);
}

.combobox-list-content-wrap ul {
  overflow: hidden;
  overflow-y: auto;
  line-height: 28px;
  max-height: 200px;
}

.combobox-label {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  word-break: break-all;
}

.combobox-checkbox {
  display: none;
}

li.combobox-list {
  background-color: var(--select-background-primary, #ffffff);
}
li.combobox-list:hover {
  background-color: var(--select-background-hover, #F2F3F5);
}
li.combobox-list:active {
  background-color: rgba(4, 146, 235, 0.08);
}
li.combobox-list.selected {
  color: #0492EB;
}
li.combobox-list.disabled .combobox-label {
  cursor: not-allowed;
  opacity: 0.4;
}
li.combobox-list.disabled:hover, li.combobox-list.disabled:active {
  background-color: var(--select-background-primary, #ffffff);
}

.combobox-label {
  display: block;
  padding-left: 16px;
  padding-right: 24px;
  padding-top: 8px;
  padding-bottom: 7px;
  line-height: 1.14;
  white-space: nowrap;
  position: relative;
}
.combobox-label .text {
  word-break: break-all;
  white-space: normal;
  vertical-align: middle;
}

.combobox-tips {
  display: inline-block;
  vertical-align: middle;
}

.grid-content-td .combobox-wrap.widget-wrap {
  width: 100%;
}
.grid-content-td .combobox-switch {
  left: auto;
  right: 10px;
}

#global-combobox-options[data-shown=_hidden_],
#customer-combobox-options[data-shown=_hidden_] {
  display: none !important;
}

.combobox-container.none-selected .combobox-text {
  color: var(--tab-color-primary, #868E93);
}

.combobox-container.multiple .multiple-items-container {
  font-size: 0;
  vertical-align: middle;
}
.combobox-container.multiple .multiple-item {
  font-size: 12px;
  margin-right: 4px;
  padding: 2px 4px;
  background: var(--select-background-hover, #F2F3F5);
  border-radius: 2px;
  cursor: pointer;
  vertical-align: middle;
  display: inline-block;
  line-height: 18px;
  vertical-align: middle;
}
.combobox-container.multiple .multiple-item .text {
  vertical-align: middle;
}
.combobox-container.multiple .multiple-item .close {
  display: inline-block;
  margin-left: 3px;
  vertical-align: middle;
}
.combobox-container.multiple .combobox-wrap.widget-wrap {
  height: auto;
}
.combobox-container.multiple .combobox-text {
  word-break: break-word;
  height: auto;
  min-height: 26px;
}

#global-combobox-options.multiple .combobox-multiple-select-all,
#customer-combobox-options.multiple .combobox-multiple-select-all {
  margin-top: 4px;
  border-top: solid 1px #EBECED;
  background-color: var(--checkbox-background-primary, #ffffff);
}
#global-combobox-options.multiple .combobox-multiple-select-all:hover,
#customer-combobox-options.multiple .combobox-multiple-select-all:hover {
  background: var(--select-background-hover, #F2F3F5);
}
#global-combobox-options.multiple .combobox-multiple-select-all:active,
#customer-combobox-options.multiple .combobox-multiple-select-all:active {
  background-color: rgba(4, 146, 235, 0.08);
}
#global-combobox-options.multiple .combobox-multiple-select-all.selected,
#customer-combobox-options.multiple .combobox-multiple-select-all.selected {
  color: #0492EB;
}
#global-combobox-options.multiple .combobox-multiple-select-all.disabled .combobox-label,
#customer-combobox-options.multiple .combobox-multiple-select-all.disabled .combobox-label {
  cursor: default;
  opacity: 0.4;
}
#global-combobox-options.multiple .combobox-multiple-select-all.disabled:hover, #global-combobox-options.multiple .combobox-multiple-select-all.disabled:active,
#customer-combobox-options.multiple .combobox-multiple-select-all.disabled:hover,
#customer-combobox-options.multiple .combobox-multiple-select-all.disabled:active {
  background-color: var(--checkbox-background-primary, #ffffff);
}
#global-combobox-options.multiple .combobox-list .text,
#customer-combobox-options.multiple .combobox-list .text {
  vertical-align: -1px;
}
#global-combobox-options.multiple .combobox-label .icon,
#customer-combobox-options.multiple .combobox-label .icon {
  display: inline-block;
  box-sizing: border-box;
  margin-right: 6px;
  vertical-align: middle;
  position: relative;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  background-color: var(--checkbox-background-primary, #ffffff);
  border: 1px solid #AEB4B7;
  border-radius: 2px;
}
#global-combobox-options.multiple .combobox-label .icon:after,
#customer-combobox-options.multiple .combobox-label .icon:after {
  content: " ";
  position: absolute;
  top: 43%;
  left: 24%;
  display: table;
  width: 5px;
  height: 9px;
  border: 2px solid #ffffff;
  border-top: 0;
  border-left: 0;
  opacity: 0;
}
#global-combobox-options.multiple .combobox-label:hover .icon,
#customer-combobox-options.multiple .combobox-label:hover .icon {
  border-color: #04B0FF;
}
#global-combobox-options.multiple .combobox-list.selected .icon,
#customer-combobox-options.multiple .combobox-list.selected .icon {
  background-color: var(--checkbox-background-primary, #ffffff);
  border-color: #0492EB;
}
#global-combobox-options.multiple .combobox-list.selected .icon:after,
#customer-combobox-options.multiple .combobox-list.selected .icon:after {
  content: " ";
  position: absolute;
  display: table;
  border: 2px solid #0492EB;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg) scale(1) translate(-50%, -50%);
  opacity: 1;
}
#global-combobox-options.multiple .combobox-list.imperfect .icon,
#customer-combobox-options.multiple .combobox-list.imperfect .icon {
  background-color: var(--checkbox-background-primary, #ffffff);
  border-color: #AEB4B7;
}
#global-combobox-options.multiple .combobox-list.imperfect .icon:after,
#customer-combobox-options.multiple .combobox-list.imperfect .icon:after {
  content: " ";
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: #0492EB;
  border: 0;
  -webkit-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
#global-combobox-options.multiple .combobox-list.disabled,
#customer-combobox-options.multiple .combobox-list.disabled {
  cursor: not-allowed;
}
#global-combobox-options.multiple .combobox-list.disabled .text,
#customer-combobox-options.multiple .combobox-list.disabled .text {
  color: var(--checkbox-color-disabled, rgba(33, 33, 33, 0.4));
}
#global-combobox-options.multiple .combobox-list.disabled .icon,
#customer-combobox-options.multiple .combobox-list.disabled .icon {
  border-color: rgba(174, 180, 183, 0.4);
  background: rgba(174, 180, 183, 0.2);
}
#global-combobox-options.multiple .combobox-list.disabled.selected .icon,
#customer-combobox-options.multiple .combobox-list.disabled.selected .icon {
  background: var(--checkbox-background-primary, #ffffff);
  border-color: rgba(4, 146, 235, 0.4);
}
#global-combobox-options.multiple .combobox-list.disabled.selected .icon:after,
#customer-combobox-options.multiple .combobox-list.disabled.selected .icon:after {
  border-color: rgba(4, 146, 235, 0.4);
}

#global-combobox-options.dimension .combobox-list-content-wrap.column-1 .combobox-multiple-select-all .column,
#global-combobox-options.dimension .combobox-list-content-wrap.column-1 li.combobox-list .text,
#customer-combobox-options.dimension .combobox-list-content-wrap.column-1 .combobox-multiple-select-all .column,
#customer-combobox-options.dimension .combobox-list-content-wrap.column-1 li.combobox-list .text {
  display: inline-block;
  width: calc(100% / 1);
}
#global-combobox-options.dimension .combobox-list-content-wrap.column-2 .combobox-multiple-select-all .column,
#global-combobox-options.dimension .combobox-list-content-wrap.column-2 li.combobox-list .text,
#customer-combobox-options.dimension .combobox-list-content-wrap.column-2 .combobox-multiple-select-all .column,
#customer-combobox-options.dimension .combobox-list-content-wrap.column-2 li.combobox-list .text {
  display: inline-block;
  width: calc(100% / 2);
}
#global-combobox-options.dimension .combobox-multiple-select-all,
#customer-combobox-options.dimension .combobox-multiple-select-all {
  font-weight: bold;
}

.combobox-container.cascader .combobox-switch span.icon.clear {
  background: url(../img/svg/DatePickerClose.svg) no-repeat;
}

#global-combobox-options.cascader .u-d-none,
#customer-combobox-options.cascader .u-d-none {
  display: none !important;
}
#global-combobox-options.cascader .combobox-list-editor-wrap,
#customer-combobox-options.cascader .combobox-list-editor-wrap {
  display: none;
}
#global-combobox-options.cascader ul.combobox-list, #global-combobox-options.cascader ul.combobox-list-2,
#customer-combobox-options.cascader ul.combobox-list,
#customer-combobox-options.cascader ul.combobox-list-2 {
  border-right: 1px solid #EBECED;
}
#global-combobox-options.cascader ul.combobox-list, #global-combobox-options.cascader ul.combobox-list-2, #global-combobox-options.cascader ul.combobox-list-3,
#customer-combobox-options.cascader ul.combobox-list,
#customer-combobox-options.cascader ul.combobox-list-2,
#customer-combobox-options.cascader ul.combobox-list-3 {
  width: 120px;
  vertical-align: top;
  display: inline-block;
}
#global-combobox-options.cascader span.has-sub-icon,
#customer-combobox-options.cascader span.has-sub-icon {
  position: absolute;
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/CascaderIconNext.svg);
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
#global-combobox-options.cascader li.combobox-list:hover,
#customer-combobox-options.cascader li.combobox-list:hover {
  background-color: var(--select-background-hover, #F2F3F5);
}
#global-combobox-options.cascader li.combobox-list:active,
#customer-combobox-options.cascader li.combobox-list:active {
  background-color: rgba(4, 146, 235, 0.08);
}
#global-combobox-options.cascader li.combobox-list.selected,
#customer-combobox-options.cascader li.combobox-list.selected {
  color: var(--s-color-text-primary, #212121);
  font-weight: bold;
  background-color: rgba(4, 146, 235, 0.08);
}

.combobox-container.combobox_s .combobox-wrap.widget-wrap {
  width: 80px;
}

#global-combobox-options .combobox-list-wrap.combobox_s .combobox-search-box .widget-wrap,
#customer-combobox-options .combobox-list-wrap.combobox_s .combobox-search-box .widget-wrap {
  width: 60px;
  max-width: 60px;
}

.combobox-container.combobox_sp .combobox-wrap.widget-wrap {
  width: 100px;
}

#global-combobox-options .combobox-list-wrap.combobox_sp .combobox-search-box .widget-wrap,
#customer-combobox-options .combobox-list-wrap.combobox_sp .combobox-search-box .widget-wrap {
  width: 80px;
  max-width: 80px;
}

.combobox-container.combobox_m .combobox-wrap.widget-wrap {
  width: 120px;
}

#global-combobox-options .combobox-list-wrap.combobox_m .combobox-search-box .widget-wrap,
#customer-combobox-options .combobox-list-wrap.combobox_m .combobox-search-box .widget-wrap {
  width: 100px;
  max-width: 100px;
}

.combobox-container.combobox_mp .combobox-wrap.widget-wrap {
  width: 160px;
}

#global-combobox-options .combobox-list-wrap.combobox_mp .combobox-search-box .widget-wrap,
#customer-combobox-options .combobox-list-wrap.combobox_mp .combobox-search-box .widget-wrap {
  width: 140px;
  max-width: 140px;
}

.combobox-container.combobox_l .combobox-wrap.widget-wrap {
  width: 210px;
}

#global-combobox-options .combobox-list-wrap.combobox_l .combobox-search-box .widget-wrap,
#customer-combobox-options .combobox-list-wrap.combobox_l .combobox-search-box .widget-wrap {
  width: 190px;
  max-width: 190px;
}

.combobox-container.combobox_xl .combobox-wrap.widget-wrap {
  width: 330px;
}

#global-combobox-options .combobox-list-wrap.combobox_xl .combobox-search-box .widget-wrap,
#customer-combobox-options .combobox-list-wrap.combobox_xl .combobox-search-box .widget-wrap {
  width: 310px;
  max-width: 310px;
}

.combobox-container.combobox_xl .combobox-wrap.widget-wrap {
  max-width: 330px;
}

.combobox-container.combobox_msg .combobox-wrap.widget-wrap {
  width: 160px;
  border: 0 none;
}

.timezone-select .combobox-wrap, .timezone-select .text-wrap {
  max-width: 440px;
  width: 440px;
}

.combobox-container.prefix {
  position: relative;
  left: 1px;
  display: inline-block;
  vertical-align: top;
}
.combobox-container.prefix:hover, .combobox-container.prefix.error, .combobox-container.prefix.focus {
  z-index: 2;
}
.combobox-container.prefix .combobox-wrap-outer {
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
}
.combobox-container.prefix .widget-wrap {
  border-radius: 3px 0 0 3px;
  width: 80px;
}
.combobox-container.prefix .combobox-wrap {
  background: var(--input-bg-suffix, rgba(242, 244, 247, 0.5));
  color: var(--input-color-suffix, #868E93);
}

.combobox-container.suffix {
  position: relative;
  left: -1px;
  display: inline-block;
  vertical-align: top;
}
.combobox-container.suffix:hover, .combobox-container.suffix.error, .combobox-container.suffix.focus {
  z-index: 2;
}
.combobox-container.suffix .combobox-wrap-outer {
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
}
.combobox-container.suffix .widget-wrap {
  border-radius: 0 3px 3px 0;
  width: 80px;
}
.combobox-container.suffix .combobox-wrap {
  background: var(--input-bg-suffix, rgba(242, 244, 247, 0.5));
  color: var(--input-color-suffix, #868E93);
}

#global-combobox-options.show-supplement-btn li.combobox-list,
#customer-combobox-options.show-supplement-btn li.combobox-list {
  display: flex;
  align-items: center;
}
#global-combobox-options.show-supplement-btn li.combobox-list .combobox-label,
#customer-combobox-options.show-supplement-btn li.combobox-list .combobox-label {
  flex-grow: 1;
}

.devicesList-container .paging-go {
  width: 100%;
  margin-left: 0;
  text-align: right;
}
.devicesList-container .paging-go .widget-fieldlabel-wrap {
  width: auto;
}
.devicesList-container .paging-go .button-container {
  vertical-align: middle;
}
.devicesList-container .paging-go .widget-container {
  margin-bottom: 0;
}

.devicesList-item,
.devicesList-item-content .logo-container,
.devicesList-item-label,
.devicesList-item-label .content-label {
  display: inline-block;
}

.devicesList-item-container {
  padding-left: 8px;
  padding-right: 8px;
  line-height: 32px;
  cursor: pointer;
}

.devicesList-item-container.selected {
  background-color: var(--select-background-hover, #e5e5e5);
}

.devicesList-item-label .content-label,
.devicesList-item-label .content {
  vertical-align: middle;
}

.devicesList-item-content {
  white-space: nowrap;
}
.devicesList-item-content .devicesList-item-label {
  padding-right: 5px;
}
.devicesList-item-content .logo-container {
  margin-right: 15px;
}

/* ==========================================================================
   Displaylabel
   ========================================================================== */
/*.progressbar-container + .displaylabel-container .widget-fieldlabel-wrap {
	display: none;
}
*/
.displaylabel-container {
  word-break: break-word;
}

.displaylabel_label_empty .widget-fieldlabel-wrap,
.displaylabel_outer_empty .widget-wrap-outer {
  display: none;
}

.displaylabel_label_auto .widget-fieldlabel-wrap {
  width: auto;
}

.displaylabel-container .text-wrap-outer {
  line-height: 28px;
}

.displaylabel-container.displaylabel_tagged .text-wrap-display {
  padding: 2.5px 4px;
  border: 1px solid;
  border-radius: 2px;
}
.displaylabel-container.displaylabel_disabled .text-wrap-display {
  color: #aeb4b7;
}
.displaylabel-container.displaylabel_connected .text-wrap-display {
  color: #0dc901;
}
.displaylabel-container.displaylabel_disconnected .text-wrap-display {
  color: #ff2954;
}

.displaylabel-container.displaylabel-link .text-wrap-display {
  color: #0492EB;
  cursor: pointer;
}

/* -------------------------------------------------------------------------- */
/*                                  Modifier                                  */
/* -------------------------------------------------------------------------- */
.displaylabel-container.icon .text-wrap-before {
  display: inline-block;
  margin-top: 2px;
  margin-right: 10px;
  width: 20px;
  height: 20px;
  vertical-align: text-bottom;
}
.displaylabel-container.icon .text-wrap-display {
  display: inline-block;
  vertical-align: text-top;
}
.displaylabel-container.icon.correct .text-wrap-before {
  background-image: url("../img/svg/MessageIconSuccess.svg");
}
.displaylabel-container.icon.correct .text-wrap-display {
  display: none;
}
.displaylabel-container.icon.error {
  color: #ff2954;
}
.displaylabel-container.icon.error .text-wrap-before {
  background-image: url("../img/svg/MessageIconFailed.svg");
}
.displaylabel-container.icon.loading .text-wrap-before {
  width: 22px;
  height: 22px;
  animation: circle 1s infinite linear;
  -webkit-animation: circle 1s infinite linear;
  background-image: url("../img/svg/Loading.svg");
}
.displaylabel-container.icon.loading .text-wrap-display {
  display: none;
}
.displaylabel-container.icon.empty .text-wrap-display {
  display: none;
}

.calendar-container .hidden {
  display: none !important;
}

.calendar-container .calendar-wrap {
  width: 238px;
  font-size: 12px;
  background: var(--datepicker-background-content, #ffffff);
}
.calendar-container .calendar-wrap a {
  cursor: pointer;
  width: 100%;
  display: inline-block;
}

.calendar-container .ym-container {
  text-align: center;
  height: 40px;
  line-height: 40px;
  border-top: 1px solid var(--s-color-text-split, #EBECED);
  border-bottom: 1px solid var(--s-color-text-split, #EBECED);
  font-size: 14px;
  position: relative;
}
.calendar-container .ym-container > div {
  display: inline-block;
}
.calendar-container .ym-container .tool-item:not(.year-slot-container):hover {
  color: #04B0FF;
}
.calendar-container .ym-container .tool-item:not(.year-slot-container):active {
  color: #0492EB;
}
.calendar-container .ym-container .month-container {
  margin-right: 5px;
}
.calendar-container .ym-container .paging-btns-container {
  position: absolute;
}
.calendar-container .ym-container .paging-btns-container a {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
.calendar-container .ym-container .prev-btns-container {
  left: 10px;
}
.calendar-container .ym-container .next-btns-container {
  right: 10px;
}

.calendar-container .calendar-area {
  padding: 0 10px;
}
.calendar-container .calendar-area table, .calendar-container .calendar-area th {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
.calendar-container .calendar-area th {
  font-weight: normal;
}
.calendar-container .calendar-area .date-calendar .week-info-container tr {
  border-bottom: 1px solid var(--s-color-text-split, #EBECED);
  color: #AEB4B7;
}
.calendar-container .calendar-area .date-calendar .week-info-container tr .week-day {
  padding: 8px 0;
}
.calendar-container .calendar-area .calendar-cell a {
  border: 1px solid transparent;
  border-radius: 100%;
}
.calendar-container .calendar-area .calendar-cell a:hover {
  background: var(--datepicker-background-hover, #F2F3F5);
}
.calendar-container .calendar-area .calendar-cell a:active {
  background: rgba(4, 146, 235, 0.08);
}
.calendar-container .calendar-area .calendar-cell.selected a {
  background: #0492EB;
  color: white;
}
.calendar-container .calendar-area .date-calendar .calendar-body .calendar-row:first-child .calendar-cell {
  padding-top: 5px;
}
.calendar-container .calendar-area .date-calendar .calendar-body .calendar-row:last-child .calendar-cell {
  padding-bottom: 5px;
}
.calendar-container .calendar-area .date-calendar .calendar-cell a {
  width: 28px;
  height: 28px;
  line-height: 28px;
}
.calendar-container .calendar-area .date-calendar .other-month-date {
  color: #AEB4B7;
}
.calendar-container .calendar-area .date-calendar .calendar-cell {
  padding-top: 2px;
  padding-bottom: 2px;
}
.calendar-container .calendar-area .date-calendar .calendar-cell.today a {
  background: rgba(4, 146, 235, 0.08);
  border-color: #0492EB;
}
.calendar-container .calendar-area .date-calendar .calendar-cell.current-month-date.today a {
  color: #0492EB;
}
.calendar-container .calendar-area .date-calendar .calendar-cell.selected a, .calendar-container .calendar-area .date-calendar .calendar-cell.current-month-date.selected a {
  background: #0492EB;
  color: white;
}
.calendar-container .calendar-area .date-calendar .calendar-cell.selected a:hover, .calendar-container .calendar-area .date-calendar .calendar-cell.current-month-date.selected a:hover {
  background: #0492EB;
}
.calendar-container .calendar-area .date-calendar .calendar-cell.disabled a {
  color: var(--tab-color-primary, #868E93);
  border: 1px dashed var(--tab-color-primary, #868E93);
  cursor: not-allowed;
}
.calendar-container .calendar-area .date-calendar .calendar-cell.disabled a:hover {
  background: transparent;
}
.calendar-container .calendar-area .month-calendar-container, .calendar-container .calendar-area .year-calendar-container {
  padding-top: 20px;
  padding-bottom: 30px;
}
.calendar-container .calendar-area .month-calendar-container .calendar-cell, .calendar-container .calendar-area .year-calendar-container .calendar-cell {
  padding-top: 10px;
  padding-bottom: 10px;
}
.calendar-container .calendar-area .month-calendar .calendar-cell a {
  width: 36px;
  height: 36px;
  line-height: 36px;
}
.calendar-container .calendar-area .year-calendar .calendar-cell a {
  width: 40px;
  height: 40px;
  line-height: 40px;
}
.calendar-container .calendar-area .year-calendar .calendar-cell.prev-slot-year, .calendar-container .calendar-area .year-calendar .calendar-cell.next-slot-year {
  color: #AEB4B7;
}

.datepicker-container .hidden {
  display: none !important;
}
.datepicker-container .datepicker-display-container {
  width: 240px;
  border: 1px solid var(--components-border-primary, #BEC3C5);
  border-radius: 3px;
  height: 28px;
  line-height: 28px;
  padding: 0 30px 0 10px;
  background: var(--datepicker-background-primary, #ffffff);
  font-size: 0;
}
.datepicker-container .datepicker-display-container:hover {
  border-color: #04B0FF;
}
.datepicker-container .datepicker-display-container:active {
  border-color: #0492EB;
}
.datepicker-container .datepicker-display-container .separator {
  font-size: 14px;
  vertical-align: middle;
}
.datepicker-container .datepicker-display-container .datepicker-display {
  height: 26px;
  vertical-align: middle;
  font-size: 14px;
  line-height: 26px;
  color: var(--s-color-text-primary, #212121);
}
.datepicker-container .datepicker-display-container .date {
  position: absolute;
  top: 1px;
  right: 1px;
  cursor: pointer;
}
.datepicker-container .datepicker {
  position: relative;
}
.datepicker-container .datepicker-calendar-container {
  position: absolute;
  top: 0;
  background: var(--datepicker-background-content, #FFFFFF);
  border: 0 solid #EBECED;
  box-shadow: 0 0 2px 0 rgba(54, 62, 77, 0.36), 0 2px 2px 0 rgba(54, 62, 77, 0.18);
  border-radius: 3px;
  z-index: 99;
}
.datepicker-container .datepicker-calendar-container.left {
  left: -316px;
}
.datepicker-container .datepicker-input-container {
  height: 28px;
  line-height: 28px;
  padding: 0 10px;
}
.datepicker-container .datepicker-input-container .datepicker-input {
  color: var(--s-color-text-primary, #212121);
}
.datepicker-container .datepicker-calendar-container .widget-container.calendar-container {
  margin: 0;
}
.datepicker-container .datepicker-calendar-container .calendar-cell.selected a {
  background: #0492EB;
}
.datepicker-container .datepicker-calendar-container .calendar-cell.pre-selected a {
  background: rgba(4, 146, 235, 0.08);
}
.datepicker-container .datepicker-calendar-container .today-btn-container {
  text-align: center;
  border-top: 1px solid var(--s-color-text-split, #EBECED);
}
.datepicker-container .datepicker-calendar-container .today-btn-container a {
  line-height: 28px;
  font-size: 14px;
  padding: 0 10px;
  width: auto;
  color: #0492EB;
}
.datepicker-container .datepicker-calendar-container .today-btn-container a:hover {
  color: #04B0FF;
}

.datepicker-container.error .datepicker-display-container {
  border-color: #FF2954;
}
.datepicker-container.disabled .datepicker-wrap-outer {
  cursor: not-allowed;
}
.datepicker-container.disabled .datepicker-display-container {
  background: #EBECED;
  border-color: #BEC3C5;
  color: var(--tab-color-primary, #868E93);
}
.datepicker-container.disabled .datepicker-display-container input, .datepicker-container.disabled .datepicker-display-container .icon {
  cursor: not-allowed;
  color: var(--tab-color-primary, #868E93);
}

.rangepicker-container {
  font-size: 0;
}
.rangepicker-container .datepicker-wrap-outer {
  font-size: 14px;
}
.rangepicker-container .separator {
  padding-right: 12px;
  color: var(--tab-color-primary, #868E93);
  height: 26px;
}
.rangepicker-container .datepicker-display-container {
  position: relative;
  line-height: 26px;
}
.rangepicker-container .datepicker-display-container .datepicker-display {
  width: 105px;
}
.rangepicker-container .datepicker-input-container {
  width: 480px;
}
.rangepicker-container .datepicker-input-container .datepicker-input-inner {
  width: 200px;
}
.rangepicker-container .datepicker-input-container .datepicker-input {
  width: 90px;
}
.rangepicker-container .calendar-container .ym-container {
  border-top: none;
}
.rangepicker-container .datepicker-calendar-container {
  width: max-content;
  top: 28px;
}
.rangepicker-container .datepicker-calendar-container.input-enable {
  top: 0;
}
.rangepicker-container .datepicker-calendar-container > div, .rangepicker-container .datepicker-calendar-container > ul {
  vertical-align: top;
  height: 280px;
}
.rangepicker-container .datepicker-calendar-container .month-calendar-container, .rangepicker-container .datepicker-calendar-container .year-calendar-container {
  height: 240px;
  padding: 5px 0;
}
.rangepicker-container .datepicker-calendar-container .month-calendar-container .calendar-cell a, .rangepicker-container .datepicker-calendar-container .year-calendar-container .calendar-cell a {
  width: 36px;
  height: 36px;
  line-height: 36px;
  white-space: nowrap;
}
.rangepicker-container .datepicker-calendar-container .start-calendar .ym-container.tool-month .last-btn,
.rangepicker-container .datepicker-calendar-container .end-calendar .ym-container.tool-month .first-btn,
.rangepicker-container .datepicker-calendar-container .start-calendar .ym-container.adjacent .next-btn,
.rangepicker-container .datepicker-calendar-container .end-calendar .ym-container.adjacent .prev-btn {
  display: none !important;
}
.rangepicker-container .datepicker-calendar-container .covered:not(.selected) {
  background: rgba(4, 146, 235, 0.08);
}
.rangepicker-container .datepicker-calendar-container .calendar-cell.covered a:hover {
  background: none;
}
.rangepicker-container .datepicker-calendar-container .calendar-area .calendar-cell.disabled a {
  color: var(--datepicker-color-disabled);
  background: var(--datepicker-background-disabled);
  cursor: not-allowed;
}
.rangepicker-container .datepicker-calendar-container .calendar-cell.hover:not(.disabled) a, .rangepicker-container .datepicker-calendar-container .calendar-cell.hover:not(.disabled) a:hover {
  background: #0492EB;
  color: #ffffff;
}
.rangepicker-container .datepicker-calendar-container .date-calendar .calendar-cell.disabled a, .rangepicker-container .datepicker-calendar-container .date-calendar .calendar-cell.disabled a:hover {
  border: none;
  background: var(--datepicker-background-disabled);
}
.rangepicker-container .datepicker-calendar-inner {
  border-right: 1px solid var(--s-color-text-split, #EBECED);
}
.rangepicker-container .datepicker-date-select {
  padding: 22px 5px;
  width: auto;
}
.rangepicker-container .datepicker-date-select .date-item {
  padding-left: 10px;
  list-style: none;
  height: 30px;
  line-height: 30px;
}
.rangepicker-container .datepicker-date-select .date-item:hover {
  cursor: pointer;
  background: var(--select-background-hover, #EBF7FE);
}
.rangepicker-container .datepicker-button-container {
  border-top: 1px solid var(--s-color-text-split, #EBECED);
  padding: 15px;
}
.rangepicker-container .datepicker-button-container .button-container {
  margin-bottom: 0;
}
.rangepicker-container .datepicker-button-container .cancel-button {
  margin-left: 15px;
}

/* ==========================================================================
   ColorPicker
   ========================================================================== */
div[widget=colorpicker] .text-wrap {
  width: 100px;
}
div[widget=colorpicker] > .widget-wrap-outer {
  position: relative;
}
div[widget=colorpicker] .widget-colorpicker-wrap {
  position: absolute;
}
div[widget=colorpicker] .color-display {
  cursor: pointer;
  margin-right: 12px;
  vertical-align: middle;
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #AEB4B7;
}
div[widget=colorpicker] .colorpicker-hex-container {
  vertical-align: middle;
  border: 1px solid var(--components-border-primary, #bec3c5);
  border-radius: 3px;
  display: inline-block;
  line-height: 26px;
  padding: 0 10px;
  width: 98px;
}
div[widget=colorpicker] .colorpicker-hex-container:hover {
  border-color: #04B0FF;
}
div[widget=colorpicker] .colorpicker-opacity-container {
  vertical-align: middle;
  border: 1px solid var(--components-border-primary, #bec3c5);
  border-radius: 3px;
  display: inline-block;
  margin-left: 10px;
  position: relative;
  height: 28px;
  width: 84px;
  padding: 0 30px 0 10px;
  line-height: 26px;
}
div[widget=colorpicker] .colorpicker-opacity-container:hover {
  border-color: #04B0FF;
}
div[widget=colorpicker] .colorpicker-opacity-container.focus {
  border-color: #04B0FF;
}
div[widget=colorpicker] .colorpicker-opacity-container div.text-wrap-after {
  position: absolute;
  top: 0;
  right: 0;
  border-left: 1px solid var(--components-border-primary, #BEC3C5);
}
div[widget=colorpicker] .colorpicker-opacity-container span.opacity-button {
  cursor: pointer;
  background-color: #F2F4F7;
  display: block;
  width: 24px;
  height: 13px;
}
div[widget=colorpicker] .colorpicker-opacity-container span.opacity-button:active {
  background-color: #FFFFFF;
}
div[widget=colorpicker] .colorpicker-opacity-container span.opacity-button.up {
  position: relative;
  border-bottom: 1px solid var(--components-border-primary, #BEC3C5);
}
div[widget=colorpicker] .colorpicker-opacity-container span.opacity-button.up:after {
  top: -1px;
  left: 6px;
  position: absolute;
  content: " ";
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #AEB4B7 transparent;
}
div[widget=colorpicker] .colorpicker-opacity-container span.opacity-button.down {
  position: relative;
}
div[widget=colorpicker] .colorpicker-opacity-container span.opacity-button.down:after {
  top: 5px;
  left: 6px;
  position: absolute;
  content: " ";
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 5px;
  border-style: solid;
  border-color: #AEB4B7 transparent transparent transparent;
}

.widget-error-tips {
  color: #FF2954;
  line-height: 18px;
}

.widget-error-tips-wrap {
  padding: 1px 0;
}

.tooltip-container,
.tooltip-wrap-outer,
.text-wrap,
.tooltip-icon-container,
.tooltip-icon {
  display: inline-block;
}

.tooltip-container {
  margin-left: 10px;
  vertical-align: top;
  position: relative;
  top: 5px;
  font-size: 0;
}

.tip-text-container {
  display: none;
}

.tip-text-container.show {
  display: inline-block;
}

.global-tips-text {
  position: absolute;
  z-index: 950;
}
.global-tips-text .tip-text-container {
  display: block;
}
.global-tips-text ul {
  padding-left: 20px;
  list-style-type: disc;
}

.tip-text-container {
  position: relative;
  margin-left: 12px;
  color: #ffffff;
}
.tip-text-container .tip-text {
  line-height: 16px;
}

.tip-text-box {
  max-width: 232px;
  padding: 8px 10px;
  font-size: 14px;
  background-color: #49546B;
  box-shadow: 0 0 4px 0 rgba(54, 62, 77, 0.24), 0 4px 4px 0 rgba(54, 62, 77, 0.12);
  border-radius: 4px;
}

.tip-text-delta-container {
  position: absolute;
  width: 8px;
  height: 12px;
}
.tip-text-delta-container.left .icon-delta {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid #49546B;
}
.tip-text-delta-container.right .icon-delta {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #49546B;
}

@keyframes circle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
.button-container .widget-fieldlabel-wrap {
  display: none;
}

.u-label-inline-block .widget-fieldlabel-wrap {
  vertical-align: middle;
  color: var(--s-color-text-primary, #212121);
}

.button-wrap {
  display: inline-block;
  vertical-align: middle;
}

.button-container .button-wrap-outer {
  color: #ffffff;
  font-size: 15px;
  font-weight: bold;
}
.button-container .button-button {
  min-width: 0;
  padding-left: 20px;
  padding-right: 20px;
  height: 32px;
}
.button-container .button-button {
  display: inline-block;
  text-align: center;
  background-color: #0492EB;
  border-radius: 3px;
}
.button-container .button-button .button-text {
  line-height: 32px;
}
.button-container .button-button:hover {
  background-color: #04B0FF;
}
.button-container .button-button:active {
  background-color: #04B0FF;
}

.button-container.disabled:not(.loading) .button-button {
  background-color: #0492EB;
  opacity: 0.3;
  cursor: no-drop;
}

.button-container.alert-button.disabled .button-button {
  background-color: #ffffff;
  cursor: no-drop;
}
.button-container.alert-button.disabled .button-button, .button-container.alert-button.disabled .button-button:hover, .button-container.alert-button.disabled .button-button:active {
  color: #FF2954;
  opacity: 0.3;
}

.button-container.loading .button-wrap {
  position: relative;
}
.button-container.loading .button-wrap-outer {
  position: relative;
}
.button-container.loading .button-icon, .button-container.loading .button-text {
  visibility: hidden;
}
.button-container.loading .button-loading {
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  width: 24px;
  height: 24px;
  display: inline-block;
  animation: circle 1s infinite linear;
  -webkit-animation: circle 1s infinite linear;
  /* Safari,Chrome */
  background: url(../img/svg/LoadingWhite.svg);
}

.button_link {
  color: #0492EB;
}
.button_link .icon + .button-wrap {
  margin-left: 6px;
}
.button_link .button-wrap-outer {
  font-weight: normal;
}
.button_link .button-button {
  color: #0492EB;
  height: 28px;
  padding-left: 0;
  padding-right: 0;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
}
.button_link .button-button:hover {
  color: #04B0FF;
  background-color: transparent;
}
.button_link.icon-button .button-button {
  padding-left: 0;
}

.button_long .widget-wrap-outer {
  width: 240px;
}
.button_long .button-wrap,
.button_long .button-button {
  width: 100%;
}

.button_shrink.button-container .button-button {
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  height: inherit;
}

.button_label.button-container .widget-fieldlabel-wrap {
  display: inline-block;
}

.button_block .widget-wrap-outer,
.button_block .button-wrap,
.button_block .button-button {
  width: 100%;
}

.icon-button .button-button {
  padding-left: 16px;
  vertical-align: middle;
  font-size: 0;
}
.icon-button .button-button:hover, .icon-button .button-button:active {
  background-color: transparent;
}
.icon-button .button-button .button-icon {
  margin-right: 6px;
  vertical-align: middle;
}
.icon-button .button-button .button-text {
  vertical-align: middle;
  font-size: 15px;
}

.secondary-button .button-button {
  border: 1px solid;
}
.secondary-button .button-button:hover, .secondary-button .button-button:active {
  background-color: rgba(4, 146, 235, 0.08);
}
.secondary-button .button-button .button-text {
  line-height: 30px;
}

.skip-button .button-button, .secondary-button .button-button, .icon-button .button-button {
  background-color: transparent;
  color: #0492EB;
}
.skip-button .button-button:hover, .secondary-button .button-button:hover, .icon-button .button-button:hover {
  color: #04B0FF;
}
.skip-button .button-button:active, .secondary-button .button-button:active, .icon-button .button-button:active {
  color: #04B0FF;
}
.skip-button.disabled, .skip-button.disabled:not(.loading), .secondary-button.disabled, .secondary-button.disabled:not(.loading), .icon-button.disabled, .icon-button.disabled:not(.loading) {
  color: #0492EB;
}
.skip-button.disabled .button-button, .skip-button.disabled:not(.loading) .button-button, .secondary-button.disabled .button-button, .secondary-button.disabled:not(.loading) .button-button, .icon-button.disabled .button-button, .icon-button.disabled:not(.loading) .button-button {
  background-color: transparent;
}
.skip-button.loading .button-loading, .secondary-button.loading .button-loading, .icon-button.loading .button-loading {
  background: url(../img/svg/Loading.svg);
}

.skip-button .button-button:hover {
  background-color: transparent;
}
.skip-button .button-button:active {
  color: #0492EB;
  background-color: transparent;
}

.publish-button .button-button {
  color: #FFFFFF;
  border: 1px solid #0DC901;
  background: #0DC901;
}
.publish-button .button-button:hover, .publish-button .button-button:active {
  background: rgba(13, 201, 1, 0.7);
  border-color: rgba(13, 201, 1, 0.7);
}
.publish-button.loading .button-loading {
  border-top-color: #0DC901;
  border-left-color: #0DC901;
  border-bottom-color: #0DC901;
}

.alert-button .button-button {
  color: #FF2954;
  border: 1px solid;
  background: transparent;
}
.alert-button .button-button:hover, .alert-button .button-button:active {
  background: rgba(255, 41, 84, 0.06);
  border-color: #FF5178;
  color: #FF7997;
}
.alert-button.loading .button-loading {
  border-top-color: #FF2954;
  border-left-color: #FF2954;
  border-bottom-color: #FF2954;
}

.facebook .button-button {
  background: #3B579D;
}
.facebook .button-button:hover, .facebook .button-button:active {
  background: #3B579D;
  opacity: 0.7;
}

.button-container.button_readonly .button-wrap-outer {
  font-size: 14px;
}
.button-container.button_readonly .button-button {
  height: 28px;
  cursor: default;
}
.button-container.button_readonly .button-button:hover {
  color: #0492EB;
  background-color: transparent;
}

.button-container.btn_sm .button-wrap-outer {
  font-size: 14px;
}
.button-container.btn_sm .button-button {
  padding: 0 6px;
}

/* ==========================================================================
   Slider
   ========================================================================== */
.slider-value {
  position: relative;
}

div.slider-container .display-value-container {
  display: inline-block;
  vertical-align: middle;
}
div.slider-container .slider-wrap-outer {
  margin-right: 15px;
}
div.slider-container .slider-wrap {
  position: relative;
  display: inline-block;
  height: 28px;
  line-height: 28px;
}
div.slider-container .pole-tips-container {
  font-size: 12px;
  color: var(--tab-color-primary, #868E93);
  line-height: 15px;
}
div.slider-container .pole-tips-container .pole-tips {
  display: inline-block;
}
div.slider-container .pole-tips-container .pole-tips.left-tip {
  width: 50%;
}
div.slider-container .pole-tips-container .pole-tips.right-tip {
  width: 50%;
  text-align: right;
}
div.slider-container.range .slider-wrap {
  margin: 0 15px;
}
div.slider-container div[widget=textbox] {
  display: inline-block;
}
div.slider-container div[widget=textbox] .text-wrap {
  width: 80px;
}
div.slider-container div.slider-content-left {
  position: relative;
  display: inline-block;
}
div.slider-container div.slider-content-right {
  padding-right: 6px;
}
div.slider-container .ruler-container {
  display: flex;
  justify-content: space-between;
  color: #aeb4b7;
  user-select: none;
}
div.slider-container.disabled div.slider-content {
  background: #EBECED;
}
div.slider-container.disabled div.slider-content:hover {
  background: #e1e1e1;
}
div.slider-container.disabled div.slider-content:hover div.slider-value {
  background: #AFB2B8;
}
div.slider-container.disabled div.slider-content:hover div.slider-value-outer {
  border: 2px solid #AFB2B8;
}
div.slider-container.disabled div.slider-content div.slider-value {
  background: #AFB2B8;
}
div.slider-container.disabled div.slider-content div.slider-value-outer {
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 12px;
  width: 12px;
  margin: auto auto auto -6px;
  background: #FFFFFF;
  border-radius: 6px;
  border: 2px solid #AFB2B8;
}
div.slider-container.disabled div.slider-content div.slider-value-outer:hover {
  box-shadow: none;
  -webkit-box-shadow: none;
}
div.slider-container.disabled div.slider-content div.slider-value-outer:active {
  box-shadow: none;
  -webkit-box-shadow: none;
}
div.slider-container div.slider-content {
  background: #f5f5f5;
  border-radius: 1.5px;
  height: 3px;
}
div.slider-container div.slider-content:hover {
  background: #e1e1e1;
}
div.slider-container div.slider-content:hover div.slider-value {
  background: #69c0ff;
}
div.slider-container div.slider-content:hover div.slider-value-outer {
  border: 2px solid #69c0ff;
}
div.slider-container div.slider-content div.slider-value-outer {
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 12px;
  width: 12px;
  margin: auto auto auto -6px;
  background: #FFFFFF;
  border-radius: 6px;
  border: 2px solid #91d5ff;
  -webkit-transition: -webkit-box-shadow 0.4s, -webkit-transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition: -webkit-box-shadow 0.4s, -webkit-transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition: box-shadow 0.4s, transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28), -webkit-box-shadow 0.4s, -webkit-transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
div.slider-container div.slider-content div.slider-value-outer:hover {
  box-shadow: 0 0 0 4px rgba(4, 146, 235, 0.15);
  -webkit-box-shadow: 0 0 0 4px rgba(4, 146, 235, 0.15);
  border: 2px solid #1890ff;
}
div.slider-container div.slider-content div.slider-value-outer:active {
  box-shadow: 0 0 0 8px rgba(4, 146, 235, 0.15);
  -webkit-box-shadow: 0 0 0 8px rgba(4, 146, 235, 0.15);
}
div.slider-container div.slider-content div.slider-value {
  background: #91d5ff;
  border-radius: 1.5px;
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
}

.file-container {
  white-space: nowrap;
}
.file-container .widget-fieldlabel-wrap {
  white-space: pre-wrap;
}

.file-container .widget-fieldlabel-wrap,
.file-container .text-wrap.widget-wrap {
  vertical-align: middle;
}

.file-container .widget-tips {
  vertical-align: top;
  margin-top: 8px;
}

/* Fake input */
.file-text, .file-list-text {
  display: inline-block;
  max-width: 218px;
  white-space: nowrap;
}

.file-list-text {
  margin-left: 6px;
  padding-right: 18px;
}

.file-text {
  text-overflow: ellipsis;
  overflow: hidden;
}

.file-container .file-wrap {
  position: relative;
}

.file-container form {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  filter: alpha(opacity=0);
}

.file-container .text-wrap.widget-wrap {
  max-width: 240px;
  height: 28px;
  width: 240px;
  line-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--components-border-primary, #BEC3C5);
  color: #7d7e80;
  border-radius: 3px;
}

.file-container .text-list-wrap {
  max-width: 270px;
  min-width: 240px;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #7d7e80;
}

.file-container .file-button-container {
  margin-right: 8px;
}
.file-container .file-button-container .file-button {
  font-weight: bold;
}

.file_inline .file-button-container {
  display: inline-block;
  vertical-align: middle;
}
.file_inline .text-wrap.widget-wrap {
  margin-right: 8px;
}
.file_inline .file-button .button-button {
  height: 28px;
  line-height: 28px;
}

.file_block .file-wrap {
  padding-bottom: 44px;
}
.file_block .file-button-container {
  position: absolute;
  width: 100%;
}
.file_block .button-wrap-outer,
.file_block .button-wrap {
  width: 100%;
}
.file_block .button-button {
  margin-top: 12px;
  width: 100%;
}

.file-container .file-progress {
  position: relative;
}
.file-container .file-progress .widget-fieldlabel-wrap {
  display: none;
}
.file-container .file-progress .progressbar-wrap {
  position: static;
}
.file-container .file-progress .progressbar-content {
  width: auto;
  position: absolute;
  left: 23px;
  right: 0px;
  top: -2px;
  height: 3px;
}
.file-container .file-progress .progressbar-text {
  position: absolute;
  top: -20px;
  right: 0px;
  background: transparent;
  padding-left: 2px;
}
.file-container .widget-fieldlabel-wrap {
  vertical-align: top;
}
.file-container .text-list-wrap.failed {
  color: #FF2954;
}
.file-container .text-list-wrap {
  font-size: 14px;
  position: relative;
  display: block;
  margin-top: 10px;
  padding: 0;
  line-height: 28px;
}
.file-container .text-list-wrap:hover {
  background-color: var(--select-background-hover, #F2F3F5);
}
.file-container .file-text-wrap-before-icon {
  display: inline-block;
  vertical-align: middle;
}
.file-container .file-text-wrap-after-icon {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  right: 0px;
  top: 0;
  bottom: 0;
  margin: auto;
}
.file-container .file-text-wrap-after-icon.loading {
  display: none;
}
.file-container .button-button.disabled, .file-container .button-button.loading {
  cursor: not-allowed;
  background-color: transparent;
}

.file-container.no-input .widget-wrap.text-wrap {
  display: none !important;
}

.file-container.no-icon .button-button span.icon {
  display: none;
}

.file-container.disabled a.button-button {
  opacity: 0.3;
  cursor: no-drop;
}

.grid-container .hidden {
  display: none !important;
}

.grid-container .filter.active .hidden {
  display: inline-block !important;
}

.grid-container table {
  width: 100%;
}

.grid-container .widget-container {
  margin-bottom: 0;
}
.grid-container .widget-container.switch-container {
  margin-bottom: 0;
}
.grid-container .widget-fieldlabel-wrap {
  width: auto;
}
.grid-container tbody {
  padding-left: 9px;
}

.grid-panel-content-container {
  margin-bottom: 16px;
  border-radius: 5px;
}
.grid-panel-content-container .widget-fieldlabel-wrap {
  display: none;
}

.grid-table {
  border-top: 1px solid var(--table-color-border-top, #e5e5e5);
  border-bottom: 1px solid var(--table-color-border-bottom, #e5e5e5);
  word-wrap: break-word;
  border-collapse: collapse;
}

.grid-panel-tbar-container {
  margin-bottom: 12px;
}
.grid-panel-tbar-container:before, .grid-panel-tbar-container:after {
  content: " ";
  display: table;
}
.grid-panel-tbar-container:after {
  clear: both;
}

.grid-panel-tbar-container .search-bar-container {
  float: left;
  position: relative;
}
.grid-panel-tbar-container .search-bar-container .text-wrap {
  width: 220px;
  border-radius: 3px;
}
.grid-panel-tbar-container .search-bar-container .text-wrap-inner > input {
  padding-right: 25px;
}
.grid-panel-tbar-container .search-bar-container .search-icon {
  position: absolute;
  right: 8px;
  top: 2px;
  cursor: pointer;
}

.grid-panel-tbar-container .operation-container {
  float: right;
  line-height: 28px;
  text-align: right;
}

.left-tbar.grid-container .grid-panel-tbar-container .operation-container {
  float: left;
  position: relative;
  top: -4px;
  left: 10px;
}
.left-tbar.grid-container .grid-panel-tbar-container .operation-btn + .operation-btn {
  margin-left: 4px;
}

.grid-panel-tbar-container .icon {
  margin-right: 6px;
}

.grid-panel-tbar-container .operation-btn + .operation-btn {
  margin-left: 14px;
}

.operation-btn .text {
  vertical-align: middle;
}

.operation-btn:hover {
  color: #04B0FF;
}

.operation-btn {
  color: #0492EB;
}
.operation-btn.tbar-button-primary {
  display: inline-block;
  height: 32px;
  padding-left: 20px;
  padding-right: 20px;
  color: #fff;
  background-color: #0492EB;
  font-size: 15px;
  font-weight: 700;
  line-height: 32px;
  border-radius: 3px;
}
.operation-btn.tbar-button-primary.u-d-none {
  display: none;
}
.operation-btn.tbar-button-primary .icon {
  width: 18px;
  height: 18px;
  background-image: url("../img/svg/ButtonIconAddWhite.svg");
}
.operation-btn.tbar-button-primary:hover {
  background-color: #04B0FF;
}
.operation-btn.tbar-button-primary:hover .icon {
  background-image: url("../img/svg/ButtonIconAddWhite.svg");
}
.operation-btn.tbar-button-primary.disabled {
  color: #fff;
  opacity: 0.3;
  cursor: no-drop;
}
.operation-btn.tbar-button-primary.disabled .icon {
  background-image: url("../img/svg/ButtonIconAddWhite.svg");
}
.operation-btn.tbar-button-primary.disabled:hover {
  background-color: #0492EB;
}

.operation-btn.disabled {
  color: #A7A9AC;
  cursor: default;
}

.grid-header-container {
  padding-left: 0;
  padding-right: 0;
  background-color: var(--table-background-primary, #ffffff);
}

.grid-header-container .grid-table {
  border-bottom: 0;
  background-color: var(--table-background-primary, #ffffff);
}

.grid-header-tr .grid-header {
  padding: 14px 15px;
  font-weight: bold;
  text-align: left;
}
.grid-header-tr .grid-header .content {
  vertical-align: middle;
  line-height: 16px;
  height: 16px;
}
.grid-header-tr .grid-header.grid-header-actioncolumn {
  text-align: center;
}
.grid-header-tr .grid-header.actionheader .content {
  cursor: pointer;
  color: #0492EB;
}
.grid-header-tr .grid-header.actionheader .content:hover {
  color: #04B0FF;
}
.grid-header-tr .grid-header.actionheader .content:active {
  color: #04B0FF;
}
.grid-header-tr .grid-header .info-icon-tip {
  position: absolute;
  width: 18px;
  height: 18px;
  margin-left: 16px;
  margin-top: -1px;
  background: url(../img/svg/MessageIconInfo.svg) no-repeat;
  cursor: pointer;
}

.grid-header.sort {
  cursor: pointer;
}
.grid-header .sortable {
  vertical-align: middle;
  margin-left: 4px;
  display: inline-block;
}
.grid-header .sort-asc {
  margin-bottom: 2px;
}
.grid-header .sort-asc.hidden,
.grid-header .sort-desc.hidden {
  visibility: hidden;
}
.grid-header:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.grid-header .filter-icon {
  display: inline-block;
  margin-left: 4px;
  width: 16px;
  height: 16px;
  background-image: url("../img/filter-gray.png");
  vertical-align: middle;
  cursor: pointer;
}
.grid-header.active .filter-icon {
  background-image: url("../img/svg/filter.svg");
}

.grid-content-container .checkbox-group-container ~ .content,
.td-label {
  display: none;
}

.grid-content-container-outer {
  padding-left: 0;
  padding-right: 0;
}

.grid-content-container .grid-table {
  border-top: 1px solid var(--table-color-border-bottom, #e5e5e5);
}

.grid-content-data {
  background: var(--table-background-primary, #ffffff);
}

.grid-content-tr:nth-child(even) {
  background: var(--table-background-even, #ffffff);
}

.grid-content-tr:nth-child(odd) {
  background: var(--table-background-odd, #F8F9FB);
}

.grid-content-tr.hover {
  background-color: rgba(4, 146, 235, 0.08);
}

.grid-content-tr.allow-drag .grid-content-td:not(.grid-content-td-action-column) {
  cursor: move;
}

.grid-content-tr.hidden {
  display: none;
}

.grid-content-tr.empty td {
  padding: 12px 20px;
}
.grid-content-tr.empty td .content:before {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

.grid-container.nested-grid .grid-content-tr:hover {
  background: #e5e5e5;
}
.grid-container.nested-grid .editor-container .grid-content-tr:hover,
.grid-container.nested-grid .grid-content-tr.empty:hover {
  background: #ffffff;
}

.grid-content-td {
  color: var(--table-color-primary, #363E4D);
  padding: 18px 15px;
  text-align: left;
  font-size: 14px;
}
.grid-content-td .grid-btn-placeholder {
  display: inline-block;
  width: 24px;
  height: 24px;
}
.grid-content-td.grid-content-td-action-column, .grid-content-td.grid-content-td-settings-column {
  text-align: center;
}
.grid-content-td .grid-content-btn,
.grid-content-td .sprite-ico {
  margin: 3px 5px;
}
.grid-content-td .grid-content-btn.btn-export,
.grid-content-td .sprite-ico.btn-export {
  position: absolute;
  left: 50%;
  margin-left: -66px;
}
.grid-content-td span.grid-content-td-after {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #4acbd6;
  opacity: 0.9;
  margin-top: -2px;
}
.grid-content-td span.grid-content-td-before {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #c11c66;
  opacity: 0.9;
  left: 0;
  margin: 2px 10px;
}
.grid-content-td .content {
  white-space: pre-wrap;
}

.grid-content-btn-edit,
.grid-content-btn-delete,
.grid-content-btn-view,
.grid-btn-placeholder {
  display: inline-block;
  vertical-align: middle;
}

.grid-content-tr:not(.disabled) .grid-content-td-drag-column .icon {
  cursor: pointer;
}

.grid-content-tr.draggable {
  background: rgba(4, 146, 235, 0.08);
}

.widget-container.grid-container.hover .scroll-x-container .ps__rail-x {
  opacity: 0.7;
}

.grid-panel-content-container .grid-container {
  position: relative;
}

.grid-container .scroll-x-container {
  background: var(--table-background-odd, #F8F9FB);
  overflow: auto;
}
.grid-container .scroll-x-container .ps__rail-x {
  z-index: 1;
}
.grid-container .scroll-x-container .filter-column .content,
.grid-container .scroll-x-container .filter-column .filter-icon {
  visibility: hidden;
}

.msg-container .grid-container .scroll-x-container {
  background: var(--table-background-odd, #F8F9FB);
}

.grid-fixed-container {
  position: absolute;
  top: 0;
  font-size: 0;
  z-index: 3\0 ;
}
.grid-fixed-container.fixed-left {
  left: 0;
}
.grid-fixed-container.fixed-right {
  right: 0;
}
.grid-fixed-container table {
  width: auto;
}

.scroll-x-container.ps--active-x ~ .grid-fixed-container {
  transition: box-shadow 0.4s ease;
}
.scroll-x-container.ps--active-x ~ .grid-fixed-container.fixed-left {
  box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);
}
.scroll-x-container.ps--active-x ~ .grid-fixed-container.fixed-right {
  box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);
}
.scroll-x-container.ps--active-x ~ .grid-fixed-container.reached {
  box-shadow: none;
}

.grid-panel-selected-container {
  color: var(--pagination-color-text-primary, #363E4D);
  margin-right: 20px;
}
.grid-panel-selected-container .selected-all-page {
  color: #0492EB;
  font-weight: bold;
  margin-left: 10px;
}
.grid-panel-selected-container .selected-all-page:hover {
  color: #04B0FF;
  cursor: pointer;
}

.grid-panel-selected-container + div {
  display: inline-block;
}

.paging-container {
  color: var(--pagination-color-text-primary, #868E93);
}

.paging-wrap-inner {
  vertical-align: middle;
}
.paging-wrap-inner > div {
  vertical-align: middle;
  margin-right: 20px;
}

.paging-info-container {
  color: var(--pagination-color-text-primary, #363E4D);
}

.paging-btn {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}

.pageing-btn-first,
.pageing-btn-prev,
.pageing-btn-next,
.pageing-btn-last {
  margin-left: 6px;
  width: 28px;
  height: 28px;
  line-height: 28px;
  background-color: var(--pagination-background-primary, rgba(242, 244, 247, 0.5));
  border-radius: 4px;
  color: var(--pagination-color-text-primary, #363E4D);
}
.pageing-btn-first:hover,
.pageing-btn-prev:hover,
.pageing-btn-next:hover,
.pageing-btn-last:hover {
  color: #04B0FF;
  background: rgba(4, 146, 235, 0.08);
}
.pageing-btn-first:active,
.pageing-btn-prev:active,
.pageing-btn-next:active,
.pageing-btn-last:active {
  color: #0492EB;
  background: rgba(4, 146, 235, 0.08);
}
.pageing-btn-first.disabled,
.pageing-btn-prev.disabled,
.pageing-btn-next.disabled,
.pageing-btn-last.disabled {
  background: var(--pagination-background-disabled, rgba(242, 244, 247, 0.5));
  color: #AEB4B7;
  cursor: default;
}

.pageing-btn-prev {
  margin-left: 0;
}

.num-buttons-container {
  display: inline-block;
  margin-right: 0;
}
.num-buttons-container .dots,
.num-buttons-container .btn-more {
  margin-left: 6px;
  font-size: 14px;
  font-family: ArialMT;
  width: 28px;
  line-height: 28px;
  height: 28px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
}
.num-buttons-container .btn-more {
  color: #0492EB;
}
.num-buttons-container .dots.hidden,
.num-buttons-container .btn-more.hidden {
  display: none;
}

.paging-btn-num {
  margin-left: 6px;
  min-width: 28px;
  height: 28px;
  font-size: 14px;
  background-color: var(--pagination-background-primary, rgba(242, 244, 247, 0.5));
  border-radius: 4px;
}
.paging-btn-num .text {
  position: relative;
  left: 1px;
  line-height: 28px;
  color: var(--pagination-color-text-primary, var(--tab-color-primary, #868E93));
  padding: 0 3px;
}
.paging-btn-num:hover {
  background: rgba(4, 146, 235, 0.08);
}
.paging-btn-num:hover .text {
  color: #04B0FF;
}
.paging-btn-num:active {
  background: rgba(4, 146, 235, 0.08);
}
.paging-btn-num:active .text {
  color: #0492EB;
}
.paging-btn-num.current {
  background: rgba(4, 146, 235, 0.08);
}
.paging-btn-num.current .text {
  color: #0492EB;
}
.paging-btn-num.hidden {
  display: none;
}

.paging-options .combobox-wrap {
  width: 135px;
  height: 28px;
  line-height: 28px;
}
.paging-options .combobox-text {
  color: var(--pagination-color-text-primary, #363E4D);
  height: 28px;
  line-height: 28px;
}

.paging-go .text-container {
  display: inline-block;
  vertical-align: middle;
  color: var(--pagination-color-text-primary, #363E4D);
}
.paging-go .text-container input {
  color: var(--pagination-color-text-primary, #363E4D);
}
.paging-go .text-container .text-wrap {
  width: 50px;
}
.paging-go .button-container {
  display: inline-block;
  vertical-align: middle;
}
.paging-go .button-container .button-button {
  min-width: 36px;
  height: 28px;
  line-height: 28px;
  margin-left: 10px;
}

.paging-total .content {
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
}

.paging-container.minimalism .paging-info-container,
.paging-container.minimalism .num-buttons-container,
.paging-container.minimalism .paging-options,
.paging-container.minimalism .paging-go .widget-fieldlabel-wrap {
  display: none !important;
}
.paging-container.minimalism .paging-total,
.paging-container.minimalism .paging-separator {
  display: inline-block !important;
}
.paging-container.minimalism .paging-total .content {
  width: 16px;
  color: #363E4D;
}
.paging-container.minimalism .paging-wrap-inner {
  position: relative;
}
.paging-container.minimalism .paging-wrap-inner > div {
  margin-right: 6px;
}
.paging-container.minimalism .paging-btns .pageing-btn-next {
  position: absolute;
  right: -28px;
}

.mini-paging.grid-container .grid-panel-selected-container {
  margin-right: 10px;
  vertical-align: middle;
}
.mini-paging.grid-container .paging-container {
  vertical-align: middle;
}
.mini-paging.grid-container .paging-container .paging-options {
  display: none !important;
}
.mini-paging.grid-container .paging-container .paging-info-container {
  margin-right: 10px !important;
}
.mini-paging.grid-container .paging-container .paging-btn,
.mini-paging.grid-container .paging-container .pageing-btn-prev .icon,
.mini-paging.grid-container .paging-container .pageing-btn-next .icon,
.mini-paging.grid-container .paging-container .paging-btn-num .text,
.mini-paging.grid-container .paging-container .num-buttons-container .dots,
.mini-paging.grid-container .paging-container .num-buttons-container .btn-more {
  min-width: 16px;
  height: 16px;
  line-height: 16px;
}
.mini-paging.grid-container .paging-container .paging-btn-num,
.mini-paging.grid-container .paging-container .pageing-btn-first.disabled,
.mini-paging.grid-container .paging-container .pageing-btn-prev.disabled,
.mini-paging.grid-container .paging-container .pageing-btn-next.disabled,
.mini-paging.grid-container .paging-container .pageing-btn-last.disabled,
.mini-paging.grid-container .paging-container .pageing-btn-first,
.mini-paging.grid-container .paging-container .pageing-btn-prev,
.mini-paging.grid-container .paging-container .pageing-btn-next,
.mini-paging.grid-container .paging-container .pageing-btn-last {
  background: transparent;
}
.mini-paging.grid-container .paging-container .pageing-btn-prev,
.mini-paging.grid-container .paging-container .pageing-btn-next,
.mini-paging.grid-container .paging-container .dots,
.mini-paging.grid-container .paging-container .btn-more {
  width: 18px;
  font-size: 0;
}
.mini-paging.grid-container .paging-container .pageing-btn-prev .icon,
.mini-paging.grid-container .paging-container .pageing-btn-next .icon,
.mini-paging.grid-container .paging-container .dots .icon,
.mini-paging.grid-container .paging-container .btn-more .icon {
  min-width: 18px;
  width: 18px;
}
.mini-paging.grid-container .paging-container .paging-btn-num {
  min-width: 16px;
  margin-left: 2px;
}
.mini-paging.grid-container .paging-container .paging-go {
  margin-left: 10px;
}
.mini-paging.grid-container .paging-container .paging-go .widget-fieldlabel-wrap,
.mini-paging.grid-container .paging-container .paging-go .text-wrap-inner,
.mini-paging.grid-container .paging-container .paging-go .text-container input,
.mini-paging.grid-container .paging-container .paging-go .text-container .text-wrap {
  height: 20px;
  line-height: 20px;
}
.mini-paging.grid-container .paging-container .paging-go .text-container .text-wrap {
  width: 36px;
  padding: 0 6px;
  border-color: #E8EAED;
  background: #ffffff;
}
.mini-paging.grid-container .paging-container .paging-go .text-container.hover .text-wrap-outer .text-wrap {
  border-color: #04B0FF;
}
.mini-paging.grid-container .paging-container .paging-go .text-container.focus .text-wrap-outer .text-wrap {
  border-color: #0492EB;
}
.mini-paging.grid-container .paging-container .paging-go .text-container input {
  padding: 2px 0;
}
.mini-paging.grid-container .paging-container .paging-go .button-container .button-button {
  padding-left: 10px;
  padding-right: 10px;
  height: 20px;
  line-height: 20px;
}
.mini-paging.grid-container .paging-container .paging-go .button-container .button-button .button-text {
  line-height: 16px;
}
.mini-paging.grid-container .paging-container .paging-wrap-inner {
  position: relative;
}
.mini-paging.grid-container .paging-container .paging-wrap-inner > div {
  margin-right: 0px;
}

.paging-container.minimalism.mini .paging-wrap-inner > div {
  margin-right: 2px;
}
.paging-container.minimalism.mini .paging-total .content {
  height: 16px;
  line-height: 16px;
}
.paging-container.minimalism.mini .paging-btns .pageing-btn-next {
  right: -18px;
}

.widget-container.grid-container.loading .grid-content-tr.empty td .content {
  display: none;
}
.widget-container.grid-container.loading .grid-content-tr.empty td .loading-container {
  display: block;
  text-align: center;
}
.widget-container.grid-container.loading .grid-content-tr.empty td .icon {
  display: inline-block;
}

.widget-container.grid-container .grid-content-tr.empty td .content {
  display: inline;
}
.widget-container.grid-container .grid-content-tr.empty td .loading-container {
  display: none;
}

.filter-panel-container {
  position: absolute;
  z-index: 3;
  top: 0;
  background: var(--select-background-primary, #FFFFFF);
  box-shadow: 0 0 4px 0 rgba(54, 62, 77, 0.36), 0 4px 4px 0 rgba(54, 62, 77, 0.18);
  border-radius: 3px;
  padding: 16px 0;
  min-width: 220px;
}
.filter-panel-container .filter-type {
  padding: 0 16px 16px 16px;
}
.filter-panel-container .filter-type .radio-label .text {
  width: auto;
}
.filter-panel-container .filter-columns-container {
  padding: 16px 16px 7px 16px;
  border-top: 1px solid #EBECED;
}
.filter-panel-container .filter-columns-container .filter-columns-inner {
  max-height: 350px;
  overflow: auto;
}
.filter-panel-container .filter-columns-container .checkbox-list {
  width: auto;
  display: block;
}

.grid-header.filter-column {
  position: relative;
}
.grid-header.filter-column .filter-icon {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -12px;
}

.grid-container .filter-container {
  position: absolute;
  z-index: 2;
  top: 44px;
  padding-top: 4px;
  padding-left: 8px;
  padding-bottom: 17px;
  background-color: var(--select-background-primary, #fff);
  border-radius: 3px;
  box-shadow: 0 0 4px 0 rgba(54, 62, 77, 0.36), 0 4px 4px 0 rgba(54, 62, 77, 0.18);
}
.grid-container .filter-container .tree-select-container .tree-select-wrap-outer {
  width: 212px;
}
.grid-container .filter-container .tree-select-container .tree-select-wrap-outer .tree-select-dropdown ul.tree-select-dropdown-children-ul {
  max-height: none;
}
.grid-container .filter-container .tree-select-without-children {
  padding-right: 8px;
}
.grid-container .filter-container .tree-select-without-children .tree-select-wrap-outer {
  width: auto;
}
.grid-container .filter-container .tree-select-without-children .tree-select-wrap-outer .tree-select-dropdown .tree-select-dropdown-children-ul .tree-select-node-container .tree-select-node-row .text-node .tree-select-node-text {
  height: 24px;
  line-height: 24px;
}
.grid-container .filter-container .tree-select-without-children .tree-select-wrap-outer .tree-select-dropdown .tree-select-dropdown-children-ul .tree-select-node-container .tree-select-node-indent {
  display: none;
}
.grid-container .filter-container .filter-separator {
  height: 1px;
  margin-bottom: 15.5px;
  margin-left: -8px;
  background-color: #EBECED;
}
.grid-container .filter-container .grid-filter-btn {
  margin-left: 8px;
}
.grid-container .filter-container .grid-filter-btn .button-wrap-outer {
  font-weight: normal;
}
.grid-container .filter-container .grid-filter-btn.apply .button-button {
  padding-left: 14px;
  padding-right: 14px;
}
.grid-container .filter-container .grid-filter-btn.tree-select-without-children-btn {
  float: right;
}
.grid-container .filter-container .grid-filter-btn.tree-select-without-children-btn.apply .button-button {
  padding-left: 14px;
  padding-right: 14px;
  margin-right: 16px;
}

/* ==========================================================================
   Progressbar
   ========================================================================== */
.progressbar-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.progressbar-content {
  width: 120px;
  height: 6px;
  background-color: var(--process-background, #e5e5e5);
  border-radius: 4px;
}

.progressbar-value {
  width: 0;
  height: 100%;
  font-size: 0;
  overflow: hidden;
  background-color: #0492EB;
  border-radius: 4px;
}

div.progressbar-text {
  position: absolute;
  top: -4px;
  right: -39px;
  line-height: 15px;
}

.progressbar-wrap-outer {
  padding-right: 50px;
}
.progressbar-wrap-outer .widget-tips {
  margin-left: 40px;
}

.progressbar-xl .progressbar-content {
  width: 500px;
  height: 10px;
}
.progressbar-xl .progressbar-content, .progressbar-xl .progressbar-content .progressbar-value {
  border-radius: 5px;
}

.progressbar-container.loading .progressbar-loading {
  width: 20px;
  height: 20px;
  background: var(--icon-loading);
  animation: var(--icon-loading-animation);
  margin-left: 46px;
}

.progressbar-plus .progressbar-content {
  width: 300px;
  height: 10px;
}
.progressbar-plus .progressbar-content, .progressbar-plus .progressbar-content .progressbar-value {
  border-radius: 5px;
}

.progressbar-container.progress-block .progressbar-wrap-outer, .progressbar-container.progress-block .progressbar-wrap {
  width: 100%;
}
.progressbar-container.progress-block .progressbar-content {
  width: 100%;
}

.multi-section .progressbar-value {
  background: inherit;
}
.multi-section .progressbar-value .sub-section {
  display: inline-block;
  height: 100%;
}

.upgrade-progress .progressbar-wrap-outer {
  display: block;
}

/* ==========================================================================
   Help
   ========================================================================== */
.help-container {
  position: absolute;
  z-index: 700;
}

.msg-container {
  position: absolute;
  z-index: 900;
  overflow: hidden;
  margin-bottom: 0;
  background-color: var(--msg-background-content, var(--msg-background-content, #ffffff));
  box-shadow: var(--msg-box-shadow, 0 0 8px 0 rgba(54, 62, 77, 0.2), 0 8px 8px 0 rgba(54, 62, 77, 0.1));
  border-radius: 3px;
  word-wrap: break-word;
}

.msg-container .msg-wrap {
  width: 670px;
}

.msg-close {
  position: absolute;
  top: 14px;
  right: 24px;
}

.msg-title {
  background-color: var(--msg-background-title, #F2F3F5);
  padding-left: 24px;
  cursor: move;
  height: 44px;
  font-size: 16px;
  line-height: 44px;
  color: var(--msg-color-title, rgba(0, 0, 0, 0.85));
  font-weight: var(--msg-font-weight, bold);
}
.msg-title.immobile {
  cursor: default;
}
.msg-title .msg-title-tool-tip {
  top: 9px;
}

.msg-content-container {
  overflow: hidden;
  padding: 30px 24px;
  font-size: 14px;
  max-height: calc(100vh - 104px);
}

.msg-btn-container {
  margin-bottom: 40px;
  text-align: left;
  padding: 0 24px;
}

.msg-container .button-container + .button-container {
  margin-left: 10px;
}

.msg-container.confirm,
.msg-container.notify {
  color: var(--msg-color-content, #363E4D);
}
.msg-container.confirm .msg-wrap,
.msg-container.notify .msg-wrap {
  width: 540px;
}
.msg-container.confirm .msg-close,
.msg-container.notify .msg-close {
  right: 16px;
}
.msg-container.confirm .msg-title,
.msg-container.notify .msg-title {
  background: var(--msg-background-content, var(--msg-background-content, #ffffff));
  height: 52px;
  line-height: 22px;
  padding-top: 30px;
  padding-left: 30px;
}
.msg-container.confirm .msg-content-container,
.msg-container.notify .msg-content-container {
  line-height: 20px;
  padding: 10px 30px 30px 30px;
}
.msg-container.confirm .msg-btn-container,
.msg-container.notify .msg-btn-container {
  padding-left: 30px;
  padding-right: 30px;
}

.msg-container.success,
.msg-container.fail,
.msg-container.info,
.msg-container.alert {
  color: var(--msg-color-content, #363E4D);
}
.msg-container.success .msg-wrap,
.msg-container.fail .msg-wrap,
.msg-container.info .msg-wrap,
.msg-container.alert .msg-wrap {
  width: 540px;
}
.msg-container.success .msg-title,
.msg-container.fail .msg-title,
.msg-container.info .msg-title,
.msg-container.alert .msg-title {
  background: var(--msg-background-content, var(--msg-background-content, #ffffff));
  height: 52px;
  line-height: 22px;
  padding-top: 30px;
  padding-left: 70px;
}
.msg-container.success .msg-title-container,
.msg-container.fail .msg-title-container,
.msg-container.info .msg-title-container,
.msg-container.alert .msg-title-container {
  position: relative;
  display: inline-block;
  line-height: 22px;
}
.msg-container.success .msg-title-container:before,
.msg-container.fail .msg-title-container:before,
.msg-container.info .msg-title-container:before,
.msg-container.alert .msg-title-container:before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  position: absolute;
  left: -40px;
  top: 0;
}
.msg-container.success .msg-content-container,
.msg-container.fail .msg-content-container,
.msg-container.info .msg-content-container,
.msg-container.alert .msg-content-container {
  padding: 10px 30px 30px 70px;
  line-height: 20px;
}
.msg-container.success .msg-btn-container,
.msg-container.fail .msg-btn-container,
.msg-container.info .msg-btn-container,
.msg-container.alert .msg-btn-container {
  margin-bottom: 30px;
  padding: 0 70px;
}

.msg-container.window .msg-content-container {
  padding-bottom: 40px;
}

.msg-container.prompt .msg-content-container {
  max-height: calc(100vh - 176px);
}

.msg-container.msg_s_xs .msg-wrap {
  width: 390px;
}

.msg-container.msg_s_sm .msg-wrap {
  width: 670px;
}

.msg-container.msg_s_md .msg-wrap {
  width: 800px;
}

.msg-container.msg_s_lg .msg-wrap {
  width: 900px;
}

.msg-container.msg_s_xl .msg-wrap {
  width: 1154px;
}

.msg-container.notify {
  top: 30px;
  right: 30px;
}
.msg-container.notify .msg-title-container::before {
  display: none;
}
.msg-container.notify .msg-title {
  padding-left: 0;
  padding-top: 24px;
  padding-right: 30px;
}
.msg-container.notify .msg-content-container {
  padding-left: 0;
  padding-bottom: 16px;
}
.msg-container.notify .msg-wrap::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 20px;
  width: 80px;
  height: 80px;
}
.msg-container.notify .msg-content-wrap,
.msg-container.notify .msg-btn-container {
  padding-left: 120px;
}
.msg-container.notify .msg-btn-container {
  margin-bottom: 24px;
}
.msg-container.notify .combobox-container.combobox_msg .combobox-wrap.widget-wrap {
  width: 158px;
}
.msg-container.notify .combobox-container.none-selected .combobox-text {
  color: #0492eb;
}
.msg-container.notify .combobox-switch {
  left: 60px;
  right: auto;
}
.msg-container.notify .combobox-switch .icon {
  background-image: url(../img/svg/SidebariconDownBlue.svg);
}
.msg-container.notify .combobox-switch.arrow-up .icon {
  background-image: url(../img/svg/SidebariconUpBlue.svg);
}

/* ==========================================================================
   Ports
   ========================================================================== */
.ports-widget-container {
  user-select: none;
  /* IE10+ */
  cursor: pointer;
}

.port-interface {
  position: relative;
  /* Position reference for hover border, link icon and detail info */
  float: left;
  text-align: center;
}

.port-interface.disabled {
  cursor: default;
}

.port-interface.empty-port,
.port-interface.empty-SFP {
  background: transparent;
}

/* Hover border */
.port-interface:hover:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
}

.port-interface.empty-port:hover:after,
.port-interface.empty-SFP:hover:after {
  display: none;
}

/* Link icon */
.port-interface .link-icon {
  position: absolute;
}

.port-interface.disabled .link-icon {
  display: none;
}

/* Detail info */
.ports-detail-info {
  display: none;
  position: absolute;
  z-index: 400;
}

.ports-detail-info:before {
  content: "";
  display: block;
  position: absolute;
}

.port-interface:hover .ports-detail-info {
  display: block;
}

.ports-detail-info .label {
  display: inline-block;
}

/* ==========================================================================
   Mask
   ========================================================================== */
.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 800;
  background-color: rgba(33, 33, 33, 0.3);
}

/* ==========================================================================
   Toast
   ========================================================================== */
.eap-toast {
  position: fixed;
  width: 100%;
  top: 30px;
  z-index: 1000;
  text-align: center;
  margin-bottom: 0;
  height: 0;
}

.toast-item {
  font-size: 14px;
  text-align: left;
  padding: 16px 30px 16px 60px;
  max-width: 500px;
  min-width: 280px;
  background: var(--toast-background-primary, #ffffff);
  border-radius: 3px;
  box-shadow: 0 0 8px 0 rgba(54, 62, 77, 0.2), 0 8px 8px 0 rgba(54, 62, 77, 0.1);
  position: relative;
  margin-bottom: 20px;
}
.toast-item.visible {
  width: 400px;
  padding: 16px 30px;
  position: absolute;
  top: 30px;
  right: 30px;
}
.toast-item.visible .close-wrap {
  position: relative;
  height: 15px;
}
.toast-item.visible .close {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
}
.toast-item.visible .title {
  font-size: 16px;
  margin-bottom: 20px;
}
.toast-item.visible .text {
  font-size: 14px;
}
.toast-item .img-wrap {
  position: absolute;
  top: 50%;
  left: 20px;
  margin-top: -12px;
  cursor: pointer;
}
.toast-item .text-wrap {
  word-break: break-word;
  word-wrap: break-word;
  line-height: 16px;
}

.panel-header {
  padding-bottom: 8px;
  border-bottom: 1px solid #c9c9c9;
  text-align: right;
}

.panel-title-text {
  float: left;
  margin-bottom: 0;
  font-size: 16px;
  color: var(--s-color-text-primary, #212121);
  font-weight: bold;
}

.panel-tip {
  float: left;
  margin-top: -5px;
}

.panel-header-btn-collapse,
.panel-header-btn-container {
  display: inline-block;
  cursor: pointer;
}

.panel-title-instruction {
  font-size: 14px;
  font-weight: normal;
  color: #bdbdbd;
}

.panel-content {
  position: relative;
  padding-top: 20px;
  padding-bottom: 0;
}

div[widget=panel].collapsible > .panel-wrap > .panel-header {
  cursor: pointer;
}

div[widget=panel].block {
  padding: 20px 30px;
  background: var(--s-background-panel);
  border: 0 solid var(--tab-color-primary, #868E93);
  box-shadow: 2px 2px 5px 0 rgba(54, 62, 77, 0.05);
  border-radius: 3px;
}
div[widget=panel].block > .panel-wrap > .panel-header {
  border-bottom: none;
}

div[widget=panel].layout {
  min-height: 754px;
}

div[widget=panel].secondary-panel {
  margin-bottom: 30px;
}
div[widget=panel].secondary-panel > .panel-wrap > .panel-header .panel-title-text {
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  letter-spacing: 0;
}

div[widget=panel].no-title > .panel-wrap > .panel-header {
  display: none;
}
div[widget=panel].no-title > .panel-wrap > .panel-content {
  padding-top: 0 !important;
}

.panel-container.panel_pure .panel-header {
  border-bottom: 0;
}

.ip-container .text-wrap {
  padding: 0;
}

.ip-input {
  display: inline-block;
  width: 25%;
}
.ip-input input {
  padding: 6px 2px;
  text-align: center;
  text-transform: uppercase;
}

.ip-dot {
  position: relative;
  left: -3px;
  display: inline-block;
  line-height: 26px;
  width: 0;
  font-weight: bold;
}

.ip-container.error .mask-wrap-inner {
  border-color: #ff2954;
}

.ip-container.disabled .ip-dot {
  color: #AEB4B7;
}
.ip-container.disabled .mask-wrap-inner, .ip-container.disabled .port-wrap-inner {
  cursor: not-allowed;
  background-color: var(--select-background-disabled, #EBECED);
  border-color: var(--components-border-primary, #BEC3C5);
}
.ip-container.disabled .mask-wrap-inner:hover, .ip-container.disabled .port-wrap-inner:hover {
  border-color: var(--components-border-primary, #BEC3C5);
}
.ip-container.disabled .mask-wrap-inner:active, .ip-container.disabled .port-wrap-inner:active {
  border-color: var(--components-border-primary, #BEC3C5);
}
.ip-container.disabled .mask-wrap-inner input, .ip-container.disabled .port-wrap-inner input {
  color: var(--tab-color-primary, #868E93);
}

.text-wrap-outer {
  position: relative;
}

.mask-wrap, .port-wrap {
  position: absolute;
  top: 0;
  right: -83px;
}
.mask-wrap .separator, .port-wrap .separator {
  width: 12px;
  text-align: center;
  margin: 0;
}
.mask-wrap .tip-wrap, .port-wrap .tip-wrap {
  padding: 5px 0 5px 12px;
  color: var(--tab-color-primary, #868E93);
}
.mask-wrap .mask-wrap-inner, .mask-wrap .port-wrap-inner, .port-wrap .mask-wrap-inner, .port-wrap .port-wrap-inner {
  border: 1px solid var(--components-border-primary, #BEC3C5);
  border-radius: 3px;
  padding: 0 10px;
}
.mask-wrap .mask-wrap-inner:hover, .mask-wrap .port-wrap-inner:hover, .port-wrap .mask-wrap-inner:hover, .port-wrap .port-wrap-inner:hover {
  border-color: #04B0FF;
}
.mask-wrap .mask-wrap-inner:active, .mask-wrap .port-wrap-inner:active, .port-wrap .mask-wrap-inner:active, .port-wrap .port-wrap-inner:active {
  border-color: #0492EB;
}
.mask-wrap .mask-wrap-inner input, .mask-wrap .port-wrap-inner input, .port-wrap .mask-wrap-inner input, .port-wrap .port-wrap-inner input {
  width: 50px;
}

.port-wrap {
  position: absolute;
  top: 0;
  right: -83px;
}

.auth-container.text-container .widget-wrap.text-wrap {
  max-width: 300px;
  width: 300px;
  height: 46px;
  padding: 0;
}
.auth-container.text-container .widget-wrap.text-wrap .text-wrap-inner {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.auth-container.text-container .widget-wrap.text-wrap .text-wrap-inner .code-input {
  display: inline-block;
  width: 16.3%;
  line-height: 20px;
}
.auth-container.text-container .widget-wrap.text-wrap .text-wrap-inner .code-input input {
  font-size: 20px;
  color: #1D2529;
  text-align: center;
  text-transform: uppercase;
}
.auth-container.text-container .widget-wrap.text-wrap .text-wrap-inner .code-separator {
  display: inline-block;
  width: 1px;
  height: 30px;
  background: rgba(190, 195, 197, 0.5);
}

.mac-container .text-wrap {
  padding: 0;
}

.mac-input {
  display: inline-block;
  width: 16.6%;
}
.mac-input input {
  padding: 6px 2px;
  text-align: center;
  text-transform: uppercase;
}

.mac-dot {
  position: relative;
  left: -3px;
  display: inline-block;
  line-height: 26px;
  width: 0;
  color: #AEB4B7;
}

.mac-container.disabled .mac-dot {
  color: #AEB4B7;
}

.widget-container .switch-container {
  margin-bottom: 16px;
}

.switch-container .widget-tips {
  display: none;
}

.switch-container .widget-fieldlabel-wrap {
  line-height: 24px;
  width: 198px;
  margin-right: 10px;
}

.switch-wrap-outer {
  line-height: 24px;
  font-size: 12px;
}

.switch-label {
  display: inline-block;
  margin-right: 11px;
  cursor: pointer;
  position: relative;
}
.switch-label .icon-bg {
  display: inline-block;
  width: 34px;
  height: 14px;
  background-color: #CCD0D1;
  border-radius: 6px;
}
.switch-label .icon-ball {
  position: absolute;
  top: 2.7px;
  left: -6px;
  display: inline-block;
  width: 20px;
  height: 20px;
  transition: left 0.4s;
  -moz-transition: left 0.4s;
  /* Firefox 4 */
  -webkit-transition: left 0.4s;
  -o-transition: left 0.4s;
  /* Opera */
  background-color: #FCFEFF;
  border-radius: 50%;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
}
.switch-label:hover .icon-ball {
  background-color: #EBECED;
}
.switch-label.checked:hover .icon-ball {
  background-color: #04B0FF;
}
.switch-label:active .icon-ball {
  box-shadow: 0 0 0 6px rgba(204, 208, 209, 0.3);
  border: 0.5px solid rgba(0, 0, 0, 0.18);
}
.switch-label.checked:active .icon-ball {
  box-shadow: 0 0 0 6px rgba(4, 146, 235, 0.1);
  border: 0.5px solid rgba(0, 0, 0, 0.18);
}
.switch-label.checked .icon-ball {
  left: 20px;
  background-color: #0492EB;
}
.switch-label.checked .icon-bg {
  background-color: #0492EB;
  opacity: 0.3;
}
.switch-label.disabled {
  cursor: not-allowed;
}
.switch-label.disabled .icon-bg {
  opacity: 0.4;
}
.switch-label.disabled.checked .icon-bg {
  opacity: 0.2;
}
.switch-label.disabled .icon-ball {
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
}
.switch-label.disabled.checked .icon-ball {
  background-color: #aedcf8;
}
.switch-label.disabled:hover .icon-ball {
  background-color: #FCFEFF;
}
.switch-label.disabled.checked:hover .icon-ball {
  background-color: #aedcf8;
}
.switch-label.disabled:active .icon-ball {
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
  border: none;
}
.switch-label.disabled.checked:active .icon-ball {
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
  border: none;
}

.switch-container.loading .switch-label .icon-ball::after {
  content: "";
  left: 2px;
  top: 2px;
  position: absolute;
  width: 16px;
  height: 16px;
  animation: circle 1s infinite linear;
  -webkit-animation: circle 1s infinite linear;
  /* Safari,Chrome */
  background: url(../img/svg/Loading.svg);
}
.switch-container.loading .switch-label.checked .icon-ball {
  background-color: #9bd4f7;
}
.switch-container.loading .switch-label.checked .icon-ball::after {
  background: url(../img/svg/LoadingWhite.svg);
}

.password-wrap-outer {
  position: relative;
}

.password-wrap-outer > .text-wrap {
  padding-right: 30px;
}

.password-container.level .password-wrap {
  margin-bottom: 24px;
}

.password-level {
  position: relative;
  margin-top: 5px;
  margin-left: -11px;
  margin-right: -31px;
  height: 3px;
  background-color: rgba(204, 208, 209, 0.6);
}
.password-level:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}
.password-level.level-1:after {
  width: 33.33%;
  background-color: #FF2954;
}
.password-level.level-2:after {
  width: 66.67%;
  background-color: #FFBB00;
}
.password-level.level-3:after {
  width: 100%;
  background-color: #15E813;
}

.password-level .level {
  line-height: 1.5;
  display: none;
}
.password-level.level-1 .level.low {
  display: inline-block;
  color: #FF2954;
}
.password-level.level-2 .level.middle {
  display: inline-block;
  color: #FFBB00;
}
.password-level.level-3 .level.high {
  display: inline-block;
  color: #15E813;
}

.allow-visible-wrapper {
  font-size: 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  padding: 0 5px;
}
.allow-visible-wrapper:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}

.allow-visible-btn {
  cursor: pointer;
  vertical-align: middle;
}

.allow-visible-text {
  display: none;
}

.paragraph-container a {
  color: #0492EB;
  text-decoration: underline;
  cursor: pointer;
}
.paragraph-container a:hover {
  color: #04B0FF;
}

.fail-tip {
  font-size: 16px;
  color: #c11c66;
}

.paragraph-help .paragraph-wrap-outer {
  display: inline-block;
  position: relative;
  padding: 12px 20px 12px 56px;
  border-radius: 3px;
  background: rgba(255, 149, 0, 0.1);
  border: 1px solid #FF9500;
  line-height: 18px;
}
.paragraph-help .paragraph-wrap-outer:before {
  position: absolute;
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  left: 16px;
  top: 8px;
  background: url(../img/svg/MessageIconWarning.svg) no-repeat;
}

.paragraph-tip .paragraph-wrap-outer {
  display: inline-block;
  position: relative;
  padding: 12px 20px 12px 56px;
  border-radius: 3px;
  background: rgba(4, 146, 235, 0.08);
  border: 1px solid #0492EB;
  line-height: 18px;
}
.paragraph-tip .paragraph-wrap-outer:before {
  position: absolute;
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  left: 16px;
  top: 8px;
  background: url(../img/svg/MessageIconInfo.svg) no-repeat;
}

.internet-required-tip {
  display: inline-block;
  margin-left: 20px;
}
.internet-required-tip .paragraph-wrap-outer {
  display: inline-block;
  position: relative;
  padding: 4px 15px 4px 30px;
  border-radius: 3px;
  background-color: rgba(255, 215, 1, 0.08);
  border: 1px solid #ffbb00;
  line-height: 18px;
}
.internet-required-tip .paragraph-wrap-outer:before {
  position: absolute;
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  left: 6px;
  top: 4px;
  background: url(../img/Info2.png) no-repeat;
}

.device-setting-required-tip {
  position: static;
  margin-left: 210px;
}

.with-label.paragraph-container .paragraph-wrap-outer {
  line-height: 28px;
}

.no-wan-ports {
  margin-top: -28px;
}

.tab-btns {
  font-size: 0;
  display: inline-block;
}

.tab-btn {
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  width: auto;
  line-height: 26px;
  text-align: center;
  padding: 0 10px;
  border: 1px solid #AEB4B7;
  margin-left: -1px;
}
.tab-btn.first {
  border-radius: 3px 0 0 3px;
  margin-left: 0;
}
.tab-btn.last {
  border-radius: 0 3px 3px 0;
}
.tab-btn:hover {
  color: #04B0FF;
}
.tab-btn:active {
  color: #0492EB;
}
.tab-btn.selected {
  background: rgba(4, 146, 235, 0.08);
  color: #0492EB;
  position: relative;
  z-index: 1;
  border-color: #0492EB;
  font-weight: bold;
}
.tab-btn.notice:after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #c11c66;
  opacity: 0.9;
}

.tab-spliter {
  display: none !important;
}

.tab-content {
  padding: 20px 0;
}

.tab-editor a {
  cursor: pointer;
}

.tab-container.tab_wrap .tab-btns:after {
  content: "";
  display: inline-block;
  height: 1px;
  width: 100%;
  background: #EBECED;
  position: absolute;
  bottom: 0;
  left: 0;
}
.tab-container.tab_wrap .tab-btn {
  border-color: #EBECED;
  background: rgba(242, 244, 247, 0.5);
  margin-right: 2px;
  border-radius: 3px 3px 0px 0px;
  border-bottom-color: transparent;
}
.tab-container.tab_wrap .tab-btn:last-child {
  margin-right: 0;
}
.tab-container.tab_wrap .tab-btn.selected {
  background: var(--dropdown-bg-primary, #ffffff);
}

.tab-container.tab_menu {
  border-radius: 3px;
  background-color: var(--dropdown-bg-primary);
  box-shadow: 0 0 4px 0 rgba(54, 62, 77, 0.36), 0 4px 4px 0 rgba(54, 62, 77, 0.18);
}
.tab-container.tab_menu .tab-btn {
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 14px;
  border: 0;
  line-height: 40px;
  text-align: left;
  white-space: nowrap;
  background-color: var(--dropdown-bg-primary);
  color: var(--dropdown-color-primary, #363e4d);
}
.tab-container.tab_menu .tab-btn:hover {
  background-color: var(--dropdown-bg-hover, #F2F3F5);
}
.tab-container.tab_menu .tab-btn.selected {
  font-weight: normal;
  background: var(--dropdown-bg-primary, #ffffff);
  color: var(--dropdown-color-primary, #363e4d);
}
.tab-container.tab_menu .tab-btn.selected:hover {
  background-color: var(--dropdown-bg-hover, #F2F3F5);
}
.tab-container.tab_menu .tab-btn.first {
  padding-top: 10px;
}
.tab-container.tab_menu .tab-btn.readonly {
  line-height: 13px;
  cursor: default;
}
.tab-container.tab_menu .tab-btn.readonly:hover {
  background-color: var(--dropdown-bg-hover, #F2F3F5);
}
.tab-container.tab_menu .tab-btn.readonly + .tab-spliter {
  display: block !important;
  height: 1px;
  margin-top: 5px;
  margin-left: 16px;
  margin-right: 16px;
  background-color: var(--tab-color-primary, #868E93);
}

.tab-container.widget-container .tab-btn.hidden,
.tab-container.widget-container .tab-spliter.hidden {
  display: none !important;
}

.tab-container.disabled {
  opacity: 0.6;
}
.tab-container.disabled .tab-btn:hover {
  cursor: not-allowed;
}

.tab-btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.tab-btn.disabled:hover {
  color: var(--tab-color-primary, #868E93);
}

.title-tip {
  position: absolute;
  display: none;
  z-index: 1001;
  padding: 8px 10px;
  color: #ffffff;
  font-size: 14px;
  background: #475066;
  box-shadow: 0 0 4px 0 rgba(54, 62, 77, 0.24), 0 4px 4px 0 rgba(54, 62, 77, 0.12);
  border-radius: 4px;
}
.title-tip.bottom .tip-pointer {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-bottom: 5px solid #475066;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: -5px;
  left: 50%;
  margin-left: -5px;
}
.title-tip.top .tip-pointer {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-top: 5px solid #475066;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  left: 50%;
  bottom: -5px;
  margin-left: -5px;
}
.title-tip.left .tip-pointer {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #475066;
  top: 50%;
  right: -5px;
  margin-top: -5px;
}
.title-tip.right .tip-pointer {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid #475066;
  top: 50%;
  left: -5px;
  margin-top: -5px;
}

[widget=tip] {
  word-break: break-word;
}
[widget=tip].break-word-tip {
  word-break: normal;
  word-wrap: break-word;
}

/* ==========================================================================
	 Time
	 ========================================================================== */
.time-container .hidden {
  display: none !important;
}

.time-container .time-display-container {
  width: 240px;
  border: 1px solid var(--components-border-primary, #BEC3C5);
  border-radius: 3px;
  height: 28px;
  line-height: 28px;
  padding: 0 30px 0 10px;
  background-color: var(--components-bg, #ffffff);
  position: relative;
}
.time-container .time-display-container:hover {
  border-color: #04B0FF;
}
.time-container .time-display-container:active {
  border-color: #0492EB;
}
.time-container .time-display-container .time-display {
  line-height: 26px;
  height: 26px;
  vertical-align: top;
  color: var(--s-color-text-primary, #212121);
}
.time-container .time-display-container .time {
  position: absolute;
  top: 1px;
  right: 1px;
  cursor: pointer;
}
.time-container .time-wrap-outer {
  position: relative;
}
.time-container .time-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--select-background-primary, #FFFFFF);
  border: 0 solid #EBECED;
  box-shadow: 0 0 2px 0 rgba(54, 62, 77, 0.36), 0 2px 2px 0 rgba(54, 62, 77, 0.18);
  border-radius: 3px;
}
.time-container .time-wrap .time-input-container {
  width: 240px;
  height: 28px;
  line-height: 28px;
  padding: 0 10px;
  border-bottom: 1px solid #EBECED;
}
.time-container .time-wrap .time-input-container .datepicker-input {
  color: var(--s-color-text-primary, #212121);
}
.time-container .time-wrap .time-lists-container {
  width: 100%;
}
.time-container .time-wrap .time-list-wrap-outer {
  width: 33%;
  border-right: 1px solid #EBECED;
  padding: 4px 0;
}
.time-container .time-wrap .time-list-wrap-outer:last-child {
  border-right-color: transparent;
}
.time-container .time-wrap .time-list-wrap {
  text-align: center;
  height: 270px;
  overflow: auto;
  padding-bottom: 240px;
}
.time-container .time-wrap .time-list-item {
  height: 30px;
  line-height: 30px;
  cursor: pointer;
}
.time-container .time-wrap .time-list-item:hover {
  background: var(--select-background-hover, #F2F3F5);
}
.time-container .time-wrap .time-list-item:active {
  background: rgba(4, 146, 235, 0.08);
}
.time-container .time-wrap .time-list-item.selected {
  background: rgba(4, 146, 235, 0.08);
}

.time-container.hour-12 .time-wrap .time-list-wrap-outer {
  width: 25%;
}

.time-container.disabled .time-wrap-outer {
  cursor: not-allowed;
}
.time-container.disabled .time-display-container {
  background: #EBECED;
  border-color: var(--components-border-primary, #BEC3C5);
  color: var(--tab-color-primary, #868E93);
}
.time-container.disabled .time-display-container input, .time-container.disabled .time-display-container .icon {
  cursor: not-allowed;
  color: var(--tab-color-primary, #868E93);
}

.time-container.error .time-display-container {
  border-color: #FF2954;
}

.time-container.time_m .time-display-container, .time-container.time_m .time-wrap .time-input-container {
  width: 135px;
}

.time-container.time_mp .time-display-container, .time-container.time_mp .time-wrap .time-input-container {
  width: 160px;
}

.granularity-picker-container .granularity-picker-wrap-outer {
  padding: 0px;
}
.granularity-picker-container .time-range-display-container {
  vertical-align: middle;
  font-size: 13px;
  color: var(--s-color-text-primary, #212121);
  letter-spacing: 0;
  text-align: left;
  font-weight: 600;
}
.granularity-picker-container .range-tab {
  vertical-align: middle;
}
.granularity-picker-container .granularity-picker-separator {
  display: inline-block;
  width: 1px;
  height: 28px;
  margin: 0 12px;
  vertical-align: middle;
  background: #E1E2E6;
}
.granularity-picker-container .range-combobox {
  vertical-align: middle;
}
.granularity-picker-container .range-combobox .widget-fieldlabel-wrap {
  display: none;
}
.granularity-picker-container .range-combobox .combobox-wrap {
  width: 100px;
  margin-left: -10px;
  border: 1px solid transparent;
  cursor: pointer;
}
.granularity-picker-container .range-combobox .combobox-text {
  color: #0492EB;
  cursor: pointer;
}
.granularity-picker-container .combobox-container.hover .combobox-wrap.widget-wrap {
  border-color: transparent;
}
.granularity-picker-container .combobox-container.focus .combobox-wrap.widget-wrap {
  border-color: transparent;
}

.topology-container {
  overflow-x: auto;
  white-space: nowrap;
  padding: 20px 0;
  text-align: center;
}
.topology-container .node-info-container {
  display: inline-block;
}
.topology-container .device-basic-info {
  display: inline-block;
  width: 160px;
  vertical-align: middle;
  text-align: center;
}
.topology-container .device-basic-info .client-type {
  width: 66px;
  height: 66px;
}
.topology-container .device-basic-info .device-Name {
  font-size: 14px;
  height: 19px;
  line-height: 19px;
  color: var(--s-color-text-primary, #212121);
  letter-spacing: 0;
  text-align: center;
  font-weight: bold;
}
.topology-container .device-basic-info .health-status {
  margin-top: 4px;
  height: 16px;
  line-height: 16px;
  font-size: 13px;
  color: #bdbdbd;
}
.topology-container .device-basic-info .health-status::before {
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 50%;
  content: "";
  display: inline-block;
}
.topology-container .device-basic-info .health-status.health-level-0::before {
  background: #22B819;
}
.topology-container .device-basic-info .health-status.health-level-1::before {
  background: #FFBB00;
}
.topology-container .device-basic-info .health-status.health-level-2::before {
  background: #FF2954;
}
.topology-container .device-basic-info .health-status.health-level-3::before {
  background: #BFC3C9;
}
.topology-container .connection-info {
  display: inline-block;
  vertical-align: middle;
}
.topology-container .connection-info .connection-channel,
.topology-container .connection-info .connection-tx-rate,
.topology-container .connection-info .connection-rx-rate {
  height: 15px;
  width: 80px;
  line-height: 15px;
  padding: 0 4px;
  margin-bottom: 2px;
  border-bottom: 1px dashed #a0a0a0;
  text-align: right;
  font-size: 12px;
  color: var(--tab-color-primary, #868E93);
}
.topology-container .connection-info .connection-rx-rate {
  border-bottom: 0px;
}
.topology-container .connection-info .connection-radio {
  text-align: right;
}
.topology-container .connection-info .connection-radio .radio-text {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  padding: 0 4px;
  border: 1px solid #a0a0a0;
  border-radius: 2px;
  font-size: 12px;
  color: var(--tab-color-primary, #868E93);
}
.topology-container .connection-info .connection-ssid,
.topology-container .connection-info .connection-rssi {
  margin-top: 4px;
  text-align: right;
  font-size: 12px;
  color: var(--tab-color-primary, #868E93);
}
.topology-container .connection-info .connection-ssid {
  vertical-align: top;
  height: 14px;
}
.topology-container .connection-info .connection-ssid:before {
  margin-right: 4px;
  content: "";
  display: inline-block;
}
.topology-container .connection-info .connection-ssid span {
  vertical-align: top;
  display: inline-block;
  height: 14px;
  line-height: 14px;
}
.topology-container .connection-link {
  position: relative;
}
.topology-container .connection-link:before {
  margin-right: 4px;
  content: " ";
  display: inline-block;
  vertical-align: middle;
  width: 80px;
  height: 2px;
  border-bottom: 2px solid #a0a0a0;
}
.topology-container .connection-link .connection-link-port {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 18px;
  padding: 0 2px;
  border-radius: 3px;
  line-height: 18px;
  font-size: 8px;
  background: var(--s-color-background-connect, #ffffff);
}
.topology-container .connection-link-speed {
  margin-top: 2px;
  display: inline-block;
  height: 14px;
  line-height: 14px;
  width: 100%;
  text-align: center;
}
.topology-container .connection-info.wire.mbps10 {
  color: #f8a717;
}
.topology-container .connection-info.wire.mbps10 .connection-link:before {
  border-bottom: 2px solid #f8a717;
}
.topology-container .connection-info.wire.mbps10 .connection-link-port {
  border: 1px solid #f8a717;
}
.topology-container .connection-info.wire.mbps100 {
  color: #f8a717;
}
.topology-container .connection-info.wire.mbps100 .connection-link:before {
  border-bottom: 2px solid #f8a717;
}
.topology-container .connection-info.wire.mbps100 .connection-link-port {
  border: 1px solid #f8a717;
}
.topology-container .connection-info.wire.mbps1000 {
  color: #40b54d;
}
.topology-container .connection-info.wire.mbps1000 .connection-link:before {
  border-bottom: 2px solid #40b54d;
}
.topology-container .connection-info.wire.mbps1000 .connection-link-port {
  border: 1px solid #40b54d;
}
.topology-container .connection-info.wire.gb25 {
  color: #00cfd9;
}
.topology-container .connection-info.wire.gb25 .connection-link:before {
  border-bottom: 2px solid #00cfd9;
}
.topology-container .connection-info.wire.gb25 .connection-link-port {
  border: 1px solid #00cfd9;
}
.topology-container .connection-info.wire.gb5 {
  color: #00C5FF;
}
.topology-container .connection-info.wire.gb5 .connection-link:before {
  border-bottom: 2px solid #00C5FF;
}
.topology-container .connection-info.wire.gb5 .connection-link-port {
  border: 1px solid #00C5FF;
}
.topology-container .connection-info.wire.gb10 {
  color: #0492EB;
}
.topology-container .connection-info.wire.gb10 .connection-link:before {
  border-bottom: 2px solid #0492EB;
}
.topology-container .connection-info.wire.gb10 .connection-link-port {
  border: 1px solid #0492EB;
}

.journey-container {
  position: relative;
}

.journey-style-container {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
}
.journey-style-container .journey-style-container-inner {
  position: relative;
}
.journey-style-container .journey-title {
  position: absolute;
  left: 0;
  height: 18px;
  font-size: 13px;
  color: var(--s-color-side, #363E4D);
  letter-spacing: 0;
  text-align: left;
  font-weight: 400;
}
.journey-style-container .uptime-title {
  top: 0;
}
.journey-style-container .roaming-title {
  top: 87px;
}
.journey-style-container.hide-up-time .roaming-title {
  top: 0px;
}
.journey-style-container .journey-background {
  position: absolute;
  width: 100%;
  height: 27px;
  opacity: 0.5;
  background: #EBECED;
  border-radius: 5px;
}
.journey-style-container .uptime-background {
  top: 36px;
}
.journey-style-container.hide-up-time .uptime-title,
.journey-style-container.hide-up-time .uptime-background {
  display: none;
}
.journey-style-container .roaming-background {
  top: 117px;
}
.journey-style-container.hide-up-time .roaming-background {
  top: 36px;
}
.journey-style-container.hide-scatter .roaming-title,
.journey-style-container.hide-scatter .roaming-background {
  display: none;
}
.journey-style-container .data-zoom-backgroud {
  background: #EBECED;
  width: 100%;
  border-radius: 8px;
  height: 16px;
  position: absolute;
  top: 192px;
}
.journey-style-container.hide-scatter .data-zoom-backgroud {
  top: 111px;
}
.journey-style-container.hide-up-time .data-zoom-backgroud {
  top: 111px;
}
.journey-style-container.hide-up-time.hide-scatter .data-zoom-backgroud {
  top: 84px;
}
.journey-style-container.hide-scroll .data-zoom-backgroud {
  display: none;
}
.journey-style-container .tip-wrapper {
  position: absolute;
  top: 12px;
  z-index: 1;
}
.journey-style-container .journey-tip {
  position: relative;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  margin: 0;
}
.journey-style-container .tip-line {
  border-bottom: 3px solid #FFAA00;
}

.imageEditor-container .widget-wrap.text-wrap,
.imageEditor-container .file-button-container {
  display: inline-block;
}

.imageEditor-container .widget-fieldlabel-wrap {
  margin-bottom: 12px;
}

.jcrop-wrap {
  display: none;
  max-width: 276px;
  margin-bottom: 12px;
}

.img-editor-button-wrap {
  display: none;
}

.img-editor-confirm-btn,
.img-editor-change-btn {
  display: inline-block;
}

.canvas-bgd {
  display: none;
}

.textarea-container .widget-wrap {
  display: inline-block;
  vertical-align: middle;
}

.upgrade-info .text-wrap {
  width: 590px !important;
  max-width: 590px !important;
}

.textarea-container .text-wrap {
  max-width: 240px;
  height: 100px;
  width: 240px;
  line-height: 100px;
  padding: 0 0;
}

.textarea-container textarea {
  padding: 8px 10px;
  white-space: pre-wrap;
  line-height: 100%;
  resize: none;
}

.textarea-container .textbox-tips {
  vertical-align: middle;
}

.textarea-container.editable .contenteditable {
  height: 100%;
  padding: 10px;
  line-height: 1;
  overflow: auto;
}
.textarea-container.editable .contenteditable:focus {
  outline: none;
}
.textarea-container.editable .contenteditable a,
.textarea-container.editable .contenteditable [href] {
  color: #0492eb;
  text-decoration: underline;
}

.textarea_block.textarea-container .widget-wrap-outer.text-wrap-outer,
.textarea_block.textarea-container .widget-wrap.hover-errortip {
  display: block;
}
.textarea_block.textarea-container .text-wrap {
  width: 100%;
  max-width: none;
}

/* ==========================================================================
   infoPanel
   ========================================================================== */
[data-info-panel] {
  cursor: pointer;
}

[widget=infoPanel] {
  position: absolute;
  z-index: 950;
  border: 1px solid #475066;
  padding: 10px;
  background: #475066;
  box-shadow: 0 0 4px 0 #A7A9AC;
  border-radius: 4px;
  color: #ffffff;
}
[widget=infoPanel] .info-split {
  margin-bottom: 10px;
  height: 1px;
  opacity: 0.5;
  border: 1px solid #BDBDBD;
}
[widget=infoPanel] .info-panel-dataset-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
}
[widget=infoPanel] .info-panel-dataset-wrapper .dataset-item {
  text-align: center;
}
[widget=infoPanel] .info-panel-dataset-wrapper .dataset-item .dataset-top {
  height: 28px;
  line-height: 28px;
  font-size: 22px;
  font-weight: 700;
}
[widget=infoPanel] .info-panel-dataset-wrapper .dataset-item .dataset-bottom {
  height: 18px;
  line-height: 18px;
  font-size: 14px;
  font-weight: 400;
}
[widget=infoPanel] .info-panel-name {
  color: #AFB2B8;
  vertical-align: top;
}
[widget=infoPanel] .info-panel-row.white .info-panel-name {
  color: #fff;
}
[widget=infoPanel] .info-panel-value {
  vertical-align: top;
  word-break: break-word;
}
[widget=infoPanel] .tip-pointer.right {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid #475066;
}
[widget=infoPanel] .tip-pointer.right:after {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid #475066;
  top: -6px;
  left: 2px;
}
[widget=infoPanel] .tip-pointer.left {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #475066;
}
[widget=infoPanel] .tip-pointer.left:after {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #475066;
  top: -6px;
  right: 2px;
}
[widget=infoPanel] .tip-pointer.bottom {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-bottom: 8px solid #475066;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
[widget=infoPanel] .tip-pointer.bottom:after {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-bottom: 8px solid #475066;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  top: 2px;
  right: -6px;
}
[widget=infoPanel] .tip-pointer.top {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-top: 8px solid #475066;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
[widget=infoPanel] .tip-pointer.top:after {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-top: 8px solid #475066;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  top: 2px;
  right: -6px;
}
[widget=infoPanel] .info-row-title {
  margin-bottom: 12px;
}
[widget=infoPanel] .info-panel-name, [widget=infoPanel] .info-panel-value, [widget=infoPanel] .info-panel-title {
  padding: 8px;
}
[widget=infoPanel] .info-panel-title {
  font-weight: bold;
  font-size: 16px;
}
[widget=infoPanel].shrink {
  padding: 0;
}

[widget=infoPanel].dashboard-overview-info-panel,
[widget=infoPanel].header-dst-status,
[widget=infoPanel].health-overview-info-panel {
  background: var(--tooltips-background-panel, #FFFFFF);
  border: none;
  box-shadow: 0 0 4px 0 rgba(54, 62, 77, 0.24), 0 4px 4px 0 rgba(54, 62, 77, 0.12);
  color: var(--tooltips-color-panel-tertiary, #363E4D);
  font-weight: bold;
  line-height: 16px;
}
[widget=infoPanel].dashboard-overview-info-panel a,
[widget=infoPanel].header-dst-status a,
[widget=infoPanel].health-overview-info-panel a {
  cursor: pointer;
  color: #0492EB;
  font-size: 14px;
  font-weight: normal;
  text-decoration: underline;
}
[widget=infoPanel].dashboard-overview-info-panel .info-panel-title,
[widget=infoPanel].header-dst-status .info-panel-title,
[widget=infoPanel].health-overview-info-panel .info-panel-title {
  display: inline-block;
  padding: 5px 0;
  font-size: 14px;
  color: var(--tooltips-color-panel-primary, #000000);
}
[widget=infoPanel].dashboard-overview-info-panel .info-panel-name,
[widget=infoPanel].header-dst-status .info-panel-name,
[widget=infoPanel].health-overview-info-panel .info-panel-name {
  font-weight: normal;
  color: var(--tooltips-color-panel-secondary, #49546B);
  vertical-align: top;
  width: 120px;
  text-align: left;
  white-space: nowrap;
}
[widget=infoPanel].dashboard-overview-info-panel .offline-detail,
[widget=infoPanel].header-dst-status .offline-detail,
[widget=infoPanel].health-overview-info-panel .offline-detail {
  display: inline-block;
  vertical-align: bottom;
  margin-left: 10px;
}
[widget=infoPanel].dashboard-overview-info-panel .info-panel-status, [widget=infoPanel].dashboard-overview-info-panel .info-panel-name-shrink,
[widget=infoPanel].header-dst-status .info-panel-status,
[widget=infoPanel].header-dst-status .info-panel-name-shrink,
[widget=infoPanel].health-overview-info-panel .info-panel-status,
[widget=infoPanel].health-overview-info-panel .info-panel-name-shrink {
  width: 60px;
  vertical-align: top;
  text-align: left;
  white-space: nowrap;
}
[widget=infoPanel].dashboard-overview-info-panel .info-panel-value,
[widget=infoPanel].header-dst-status .info-panel-value,
[widget=infoPanel].health-overview-info-panel .info-panel-value {
  text-align: right;
  width: 80px;
}
[widget=infoPanel].dashboard-overview-info-panel .info-panel-value .channel-usage-bar,
[widget=infoPanel].header-dst-status .info-panel-value .channel-usage-bar,
[widget=infoPanel].health-overview-info-panel .info-panel-value .channel-usage-bar {
  margin-bottom: 5px;
}
[widget=infoPanel].dashboard-overview-info-panel .info-panel-name, [widget=infoPanel].dashboard-overview-info-panel .info-panel-value, [widget=infoPanel].dashboard-overview-info-panel .info-panel-title,
[widget=infoPanel].header-dst-status .info-panel-name,
[widget=infoPanel].header-dst-status .info-panel-value,
[widget=infoPanel].header-dst-status .info-panel-title,
[widget=infoPanel].health-overview-info-panel .info-panel-name,
[widget=infoPanel].health-overview-info-panel .info-panel-value,
[widget=infoPanel].health-overview-info-panel .info-panel-title {
  padding: 2px 0;
}
[widget=infoPanel].dashboard-overview-info-panel .title-item .info-panel-name,
[widget=infoPanel].header-dst-status .title-item .info-panel-name,
[widget=infoPanel].health-overview-info-panel .title-item .info-panel-name {
  color: var(--tooltips-color-panel-primary, #000000);
  font-weight: bold;
}
[widget=infoPanel].dashboard-overview-info-panel .title-item .info-panel-value,
[widget=infoPanel].header-dst-status .title-item .info-panel-value,
[widget=infoPanel].health-overview-info-panel .title-item .info-panel-value {
  color: var(--tooltips-color-panel-primary, #000000);
}
[widget=infoPanel].dashboard-overview-info-panel .h-30,
[widget=infoPanel].header-dst-status .h-30,
[widget=infoPanel].health-overview-info-panel .h-30 {
  height: 30px;
}
[widget=infoPanel].dashboard-overview-info-panel .red .info-panel-name,
[widget=infoPanel].header-dst-status .red .info-panel-name,
[widget=infoPanel].health-overview-info-panel .red .info-panel-name {
  color: #FF2954;
}
[widget=infoPanel].dashboard-overview-info-panel .red .info-panel-value,
[widget=infoPanel].header-dst-status .red .info-panel-value,
[widget=infoPanel].health-overview-info-panel .red .info-panel-value {
  color: #FF2954;
}
[widget=infoPanel].dashboard-overview-info-panel .underline .info-panel-name,
[widget=infoPanel].header-dst-status .underline .info-panel-name,
[widget=infoPanel].health-overview-info-panel .underline .info-panel-name {
  text-decoration: underline;
}
[widget=infoPanel].dashboard-overview-info-panel .tip-pointer.right,
[widget=infoPanel].header-dst-status .tip-pointer.right,
[widget=infoPanel].health-overview-info-panel .tip-pointer.right {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid #475066;
}
[widget=infoPanel].dashboard-overview-info-panel .tip-pointer.right:after,
[widget=infoPanel].header-dst-status .tip-pointer.right:after,
[widget=infoPanel].health-overview-info-panel .tip-pointer.right:after {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid #475066;
  top: -6px;
  left: 2px;
}
[widget=infoPanel].dashboard-overview-info-panel .tip-pointer.left,
[widget=infoPanel].header-dst-status .tip-pointer.left,
[widget=infoPanel].health-overview-info-panel .tip-pointer.left {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid var(--tooltips-background-panel, #FFFFFF);
}
[widget=infoPanel].dashboard-overview-info-panel .tip-pointer.left:after,
[widget=infoPanel].header-dst-status .tip-pointer.left:after,
[widget=infoPanel].health-overview-info-panel .tip-pointer.left:after {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid var(--tooltips-background-panel, #FFFFFF);
}
[widget=infoPanel].dashboard-overview-info-panel .tip-pointer.bottom,
[widget=infoPanel].header-dst-status .tip-pointer.bottom,
[widget=infoPanel].health-overview-info-panel .tip-pointer.bottom {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-bottom: 8px solid var(--tooltips-background-panel, #FFFFFF);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
[widget=infoPanel].dashboard-overview-info-panel .tip-pointer.bottom:after,
[widget=infoPanel].header-dst-status .tip-pointer.bottom:after,
[widget=infoPanel].health-overview-info-panel .tip-pointer.bottom:after {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-bottom: 8px solid var(--tooltips-background-panel, #FFFFFF);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
[widget=infoPanel].dashboard-overview-info-panel .tip-pointer.top,
[widget=infoPanel].header-dst-status .tip-pointer.top,
[widget=infoPanel].health-overview-info-panel .tip-pointer.top {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-top: 8px solid var(--tooltips-background-panel, #FFFFFF);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
[widget=infoPanel].dashboard-overview-info-panel .tip-pointer.top:after,
[widget=infoPanel].header-dst-status .tip-pointer.top:after,
[widget=infoPanel].health-overview-info-panel .tip-pointer.top:after {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-top: 8px solid var(--tooltips-background-panel, #FFFFFF);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

[widget=infoPanel].header-dst-status {
  padding: 0;
  line-height: 16px;
  font-weight: normal;
  box-shadow: 0 0 6px 0 rgba(54, 62, 77, 0.15), 0 6px 6px 0 rgba(54, 62, 77, 0.15);
}
[widget=infoPanel].header-dst-status .time-display {
  border-radius: 4px;
  padding: 3px 6px 4px;
  margin-left: 8px;
  color: #ffffff;
  background: #0492EB;
}
[widget=infoPanel].header-dst-status .time-display.inactive {
  background: #BFC3C9;
}

/* ==========================================================================
   ReleaseLog
   ========================================================================== */
div.release-log-wrap {
  text-align: left;
  overflow: hidden;
}

[widget=releaseLog] {
  position: relative;
}
[widget=releaseLog] .widget-fieldlabel-wrap {
  position: absolute;
}
[widget=releaseLog] .widget-wrap-outer {
  padding-left: 210px;
  width: 100%;
}
[widget=releaseLog].in-msg div.release-log-wrap {
  width: 100%;
}

.release-log-item {
  word-break: keep-all;
  word-wrap: break-word;
  white-space: pre-wrap;
  line-height: 25px;
}

.release-log-wrap-after {
  margin: 10px 0;
  color: #0492EB;
  font-size: 14px;
}
.release-log-wrap-after span {
  cursor: pointer;
}

div.msg-in-release-log {
  padding-bottom: 28px;
}
div.msg-in-release-log .msg-content-wrap .msg-content-container {
  max-height: 300px;
  overflow: auto;
}

.keywords-add,
.keywords-delete {
  vertical-align: top;
  cursor: pointer;
  display: inline-block;
  color: #0492EB;
  text-align: center;
  border-radius: 3px;
  height: 24px;
  width: auto;
  line-height: 24px;
}
.keywords-add span,
.keywords-delete span {
  vertical-align: middle;
  font-size: 15px;
  font-weight: bold;
}
.keywords-add:before,
.keywords-delete:before {
  margin-right: 6px;
  vertical-align: middle;
}
.keywords-add:hover,
.keywords-delete:hover {
  color: #04B0FF;
}
.keywords-add:active,
.keywords-delete:active {
  color: #04B0FF;
}

.keywords-delete {
  margin-left: 10px;
}
.keywords-delete span {
  display: none;
}

.keywords-container .textboxs-wrap {
  position: relative;
}

.keywords-add.disabled, .keywords-delete.disabled {
  color: #0492EB;
  opacity: 0.3;
  cursor: no-drop;
}

.keywords-wrap {
  display: block;
}

.keywords-wrap-outer {
  position: relative;
}
.keywords-wrap-outer .combinations-wrap {
  position: relative;
}

.keywords-container.keywords_s .text-container .text-wrap {
  width: 160px;
}
.keywords-container.keywords_s .text-container.text_s .text-wrap {
  width: 70px;
}

.router-path-content {
  display: inline-block;
  padding: 0 30px;
  line-height: 28px;
  font-size: 14px;
}
.router-path-content .node-path {
  vertical-align: middle;
  cursor: pointer;
  color: var(--tab-color-primary, #868E93);
}
.router-path-content .node-path:hover {
  color: #04B0FF;
}
.router-path-content .node-path.selected {
  color: #0492EB;
}
.router-path-content .node-path.height-light {
  color: #363E4D;
}
.router-path-content .node-separator {
  margin: 0 6px;
  text-align: center;
  display: inline-block;
  height: 16px;
  width: 16px;
  background: url(../img/svg/BreadcrumbIconNextLevel2.svg);
  vertical-align: middle;
}

/* ==========================================================================
   Steps
   ========================================================================== */
.setup-field .step-count {
  margin-bottom: 35px;
}
.setup-field .step-list .step-item {
  position: relative;
}
.setup-field .step-list .step-item .step-tip {
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  position: absolute;
  top: 25px;
  left: 30px;
  width: 170px;
  text-align: left;
}
.setup-field .step-list .step-line {
  background: var(--tab-color-primary, #868E93);
}
.setup-field .step-list .step-text {
  vertical-align: middle;
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
}
.setup-field .step-list .step-text.done {
  color: var(--s-color-text-primary, #212121);
}
.setup-field .step-list .step-text.current {
  font-weight: bold;
  color: var(--s-color-text-primary, #212121);
}
.setup-field .step-item.done .step-line {
  background: #0492EB;
}
.setup-field .step-graph {
  display: inline-block;
  z-index: 5;
}
.setup-field .step-circle {
  font-size: 14px;
  margin-right: 5px;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  display: inline-block;
  text-align: center;
  color: var(--step-color-process, #868E93);
  line-height: 23px;
  border: 1px solid var(--step-color-process);
  border-radius: 24px;
  background-color: transparent;
  -webkit-transition: background-color 0.3s, border-color 0.3s;
  transition: background-color 0.3s, border-color 0.3s;
}
.setup-field .step-circle.done {
  border: none;
  background: url(../img/svg/StepperIconDone.svg);
}
.setup-field .step-circle.done span {
  display: none;
}
.setup-field .step-circle.current {
  background: #1890ff !important;
  border-color: #1890ff;
  color: #ffffff;
}
.setup-field .step-text {
  margin-right: 18px;
}
.setup-field .step-line {
  margin-right: 18px;
  vertical-align: middle;
  display: inline-block;
  width: 97px;
  height: 1px;
  z-index: 4;
}
.setup-field .setup-form {
  position: relative;
}
.setup-field .setup-form .back-group {
  position: absolute;
  left: 0;
}
.setup-field .setup-form .next-group {
  position: absolute;
  right: 0;
}
.setup-field .form-group {
  height: 300px;
}

.affix-container {
  height: 100%;
  padding-top: 56px;
  position: fixed;
  right: -470px;
  top: 0;
  z-index: 2;
}
.affix-container .affix-title {
  cursor: default;
  position: relative;
  line-height: 50px;
  font-size: 16px;
}
.affix-container .affix-title .msg-affix-container {
  padding-right: 120px;
  white-space: nowrap;
}
.affix-container .affix-title .content {
  margin: 4px;
}
.affix-container.shown .collapse-outside {
  display: none;
}
.affix-container.widget-container {
  margin-bottom: 0;
}
.affix-container .operation-bar-container {
  position: absolute;
  top: 0;
  right: 0;
  margin-right: -10px;
}
.affix-container .operation-bar-container > span {
  cursor: pointer;
  display: inline-block;
  margin-right: 10px;
}
.affix-container .collapse-outside {
  cursor: pointer;
  border: 0 solid #AEB4B7;
  box-shadow: 0 0 3px 0 rgba(174, 180, 183, 0.7);
  position: fixed;
  right: 0;
  display: inline-block;
  background-color: #F0F2F5;
}
.affix-container .collapse-outside .collapse-outside-icon {
  display: inline-block;
}
.affix-container .affix-wrap {
  background: #F2F3F5;
  box-shadow: 0 0 8px #909090;
  height: 100%;
}
.affix-container .affix-wrap .affix-content-wrap {
  width: 450px;
  height: 100%;
  padding: 0 20px 30px 20px;
}
.affix-container .affix-wrap .affix-content-outer {
  overflow: auto;
}

.drawer-container {
  height: 100%;
  position: fixed;
  right: -470px;
  top: 0;
  z-index: 5;
}
.drawer-container .drawer-title {
  cursor: default;
  position: relative;
  line-height: 50px;
  font-size: 16px;
}
.drawer-container .drawer-title .msg-drawer-container {
  padding-right: 120px;
  white-space: nowrap;
}
.drawer-container.shown .collapse-outside {
  display: none;
}
.drawer-container.widget-container {
  margin-bottom: 0;
}
.drawer-container .operation-bar-container {
  position: absolute;
  top: 0;
  right: 16px;
  margin-right: -10px;
}
.drawer-container .operation-bar-container > span {
  cursor: pointer;
  display: inline-block;
  margin-right: 10px;
}
.drawer-container .collapse-outside {
  cursor: pointer;
  border: 0 solid #AEB4B7;
  box-shadow: 0 0 3px 0 rgba(174, 180, 183, 0.7);
  position: fixed;
  right: 0;
  display: inline-block;
  background-color: #F0F2F5;
}
.drawer-container .collapse-outside .collapse-outside-icon {
  display: inline-block;
}
.drawer-container .drawer-wrap-outer {
  background: var(--s-background-main, #F2F3F5);
  box-shadow: 0 0 8px var(--components-box-shadow, #909090);
  height: 100%;
}
.drawer-container .drawer-wrap-outer .drawer-wrap {
  width: 450px;
  height: 100%;
  padding: 0 0 30px 20px;
  background-color: var(--drawer-bg-primary, #FFFFFF);
}
.drawer-container .drawer-wrap-outer .drawer-content-outer {
  padding-right: 20px;
  overflow: auto;
}

.drawer-container.drawer_upper .drawer-wrap-outer {
  background-color: #fff;
}
.drawer-container.drawer_upper .drawer-wrap {
  padding-top: 30px;
  padding-left: 0;
  padding-right: 0;
}
.drawer-container.drawer_upper .drawer-title-container,
.drawer-container.drawer_upper .collapse-inside {
  display: none;
}
.drawer-container.drawer_upper .operation-bar-container {
  z-index: 1;
  top: -13px;
  right: 30px;
}
.drawer-container.drawer_upper.shown .drawer-tab {
  display: none;
}

.drawer-container.high-z-index .drawer-wrap-outer {
  box-shadow: 0 8px 8px var(--tab-color-primary, #868E93);
}

.transfer-container.disabled .transfer-button.disabled {
  cursor: default !important;
  background: #F2F3F5 !important;
}
.transfer-container.disabled .transfer-button.disabled:hover {
  background: #F2F3F5 !important;
}
.transfer-container.disabled .transfer-bottom .simple-bottom-text {
  cursor: default !important;
  color: var(--checkbox-color-disabled, rgba(33, 33, 33, 0.4)) !important;
}
.transfer-container.disabled .transfer-bottom .simple-bottom-text:hover {
  color: var(--checkbox-color-disabled, rgba(33, 33, 33, 0.4)) !important;
}
.transfer-container.disabled .transfer-bottom .simple-bottom-text:active {
  color: var(--checkbox-color-disabled, rgba(33, 33, 33, 0.4)) !important;
}

.transfer-wrap .transfer-container-left, .transfer-wrap .transfer-container-right {
  vertical-align: top;
  width: 200px;
  height: 230px;
  border: 1px solid #EBECED;
  border-radius: 3px;
}
.transfer-wrap .transfer-container-left .transfer-search-container, .transfer-wrap .transfer-container-right .transfer-search-container {
  display: none;
  padding: 10px 12px 10px 12px;
}
.transfer-wrap .transfer-container-left.with-search-bar, .transfer-wrap .transfer-container-right.with-search-bar {
  height: 276px;
}
.transfer-wrap .transfer-container-left.with-search-bar .transfer-search-container, .transfer-wrap .transfer-container-right.with-search-bar .transfer-search-container {
  display: block;
}
.transfer-wrap .transfer-container-left .transfer-title, .transfer-wrap .transfer-container-right .transfer-title {
  line-height: 27px;
  height: 27px;
  padding: 0 12px;
  background: rgba(242, 244, 247, 0.5);
  border-bottom: 1px solid #EBECED;
  font-family: TP-LinkAktiv-Regular;
  font-size: 14px;
  color: var(--s-color-text-primary, #212121);
  letter-spacing: 0;
}
.transfer-wrap .transfer-container-left .transfer-search-container, .transfer-wrap .transfer-container-right .transfer-search-container {
  position: relative;
}
.transfer-wrap .transfer-container-left .transfer-search-container .widget-container, .transfer-wrap .transfer-container-right .transfer-search-container .widget-container {
  margin-bottom: 0;
}
.transfer-wrap .transfer-container-left .transfer-search-container .text-container .text-wrap, .transfer-wrap .transfer-container-right .transfer-search-container .text-container .text-wrap {
  width: 174px;
}
.transfer-wrap .transfer-container-left .transfer-search-container .text-container .text-wrap input, .transfer-wrap .transfer-container-right .transfer-search-container .text-container .text-wrap input {
  padding-right: 15px;
}
.transfer-wrap .transfer-container-left .transfer-search-container .search-icon-left, .transfer-wrap .transfer-container-left .transfer-search-container .search-icon-right, .transfer-wrap .transfer-container-right .transfer-search-container .search-icon-left, .transfer-wrap .transfer-container-right .transfer-search-container .search-icon-right {
  position: absolute;
  left: 160px;
  top: 12px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  background: var(--select-icon-search, url(../img/svg/InputIconSearch.svg)) no-repeat;
}
.transfer-wrap .transfer-container-left .transfer-search-container .search-icon-left.clear, .transfer-wrap .transfer-container-left .transfer-search-container .search-icon-right.clear, .transfer-wrap .transfer-container-right .transfer-search-container .search-icon-left.clear, .transfer-wrap .transfer-container-right .transfer-search-container .search-icon-right.clear {
  background: url(../img/svg/DatePickerClose.svg) no-repeat;
}
.transfer-wrap .transfer-container-left .transfer-content, .transfer-wrap .transfer-container-right .transfer-content {
  padding: 0 16px 10px 16px;
  overflow: hidden;
  overflow-y: auto;
  height: 164px;
}
.transfer-wrap .transfer-container-left .transfer-content.no-data, .transfer-wrap .transfer-container-right .transfer-content.no-data {
  background: url(../img/NoData.png) 50% 25% no-repeat;
}
.transfer-wrap .transfer-container-left .transfer-content.no-data div.no-data-tip, .transfer-wrap .transfer-container-right .transfer-content.no-data div.no-data-tip {
  margin: auto;
  position: relative;
  top: 107px;
  text-align: center;
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  letter-spacing: 0;
}
.transfer-wrap .transfer-container-left .transfer-content .checkbox-group-container, .transfer-wrap .transfer-container-right .transfer-content .checkbox-group-container {
  margin-bottom: 0;
}
.transfer-wrap .transfer-container-left .transfer-content .checkbox-group-container li.checkbox-list, .transfer-wrap .transfer-container-right .transfer-content .checkbox-group-container li.checkbox-list {
  display: block;
}
.transfer-wrap .transfer-container-left .transfer-bottom, .transfer-wrap .transfer-container-right .transfer-bottom {
  height: 36px;
  line-height: 36px;
  border-top: 1px solid #EBECED;
  padding: 0 12px;
}
.transfer-wrap .transfer-container-left .transfer-bottom .simple-bottom-text, .transfer-wrap .transfer-container-right .transfer-bottom .simple-bottom-text {
  font-size: 14px;
  color: #0492EB;
  cursor: pointer;
}
.transfer-wrap .transfer-container-left .transfer-bottom .simple-bottom-text:hover, .transfer-wrap .transfer-container-right .transfer-bottom .simple-bottom-text:hover {
  color: #04B0FF;
}
.transfer-wrap .transfer-container-left .transfer-bottom .simple-bottom-text:active, .transfer-wrap .transfer-container-right .transfer-bottom .simple-bottom-text:active {
  color: #0492EB;
}
.transfer-wrap .transfer-button-container {
  height: 230px;
  width: 69px;
  position: relative;
}
.transfer-wrap .transfer-button-container .transfer-button {
  cursor: pointer;
  width: 36px;
  height: 28px;
  border: 0 solid #EBECED;
  border-radius: 3px;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  text-align: center;
}
.transfer-wrap .transfer-button-container .transfer-button.simple {
  cursor: default;
  top: 0;
  bottom: 0;
}
.transfer-wrap .transfer-button-container .transfer-button.simple span.icon-simple {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: url(../img/svg/TransferIconExchange.svg) no-repeat;
}
.transfer-wrap .transfer-button-container .transfer-button.simple:hover {
  background-color: transparent;
}
.transfer-wrap .transfer-button-container .transfer-button.disabled {
  cursor: default;
  background: #F2F3F5;
}
.transfer-wrap .transfer-button-container .transfer-button.disabled:hover {
  background: #F2F3F5;
}
.transfer-wrap .transfer-button-container .transfer-button.disabled:hover.right span.icon-right {
  background: url(../img/svg/TransferIconRight.svg) no-repeat;
}
.transfer-wrap .transfer-button-container .transfer-button.disabled:hover.left span.icon-left {
  background: url(../img/svg/TransferIconLeft.svg) no-repeat;
}
.transfer-wrap .transfer-button-container .transfer-button.active {
  background: #0492EB;
}
.transfer-wrap .transfer-button-container .transfer-button.active.right span.icon-right {
  background: url(../img/svg/TransferIconRightActive.svg) no-repeat;
}
.transfer-wrap .transfer-button-container .transfer-button.active.left span.icon-left {
  background: url(../img/svg/TransferIconLeftActive.svg) no-repeat;
}
.transfer-wrap .transfer-button-container .transfer-button:hover {
  background: #04B0FF;
}
.transfer-wrap .transfer-button-container .transfer-button:hover.right span.icon-right {
  background: url(../img/svg/TransferIconRightActive.svg) no-repeat;
}
.transfer-wrap .transfer-button-container .transfer-button:hover.left span.icon-left {
  background: url(../img/svg/TransferIconLeftActive.svg) no-repeat;
}
.transfer-wrap .transfer-button-container .transfer-button.right {
  top: 82px;
}
.transfer-wrap .transfer-button-container .transfer-button.right span.icon-right {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: url(../img/svg/TransferIconRight.svg) no-repeat;
}
.transfer-wrap .transfer-button-container .transfer-button.left {
  bottom: 82px;
}
.transfer-wrap .transfer-button-container .transfer-button.left span.icon-left {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: url(../img/svg/TransferIconLeft.svg) no-repeat;
}

.combination-container .separator {
  line-height: 28px;
  vertical-align: top;
}
.combination-container .separator {
  margin-left: 3px;
  margin-right: 3px;
}
.combination-container.error .text-wrap-outer .text-wrap {
  border-color: #FF2954;
}

.combination-container.no-separator span.separator {
  display: none !important;
}

.combination-item {
  margin-bottom: 0;
}
.combination-item.error:not(.empty-error) .widget-wrap-outer {
  margin-bottom: 20px;
}
.combination-item.error:not(.empty-error) .widget-error-tips {
  position: absolute;
  white-space: nowrap;
}

.combination-group .widget-container:first-child .widget-wrap {
  border-radius: 3px 0 0 3px;
}
.combination-group .widget-container:last-child .widget-wrap {
  border-radius: 0 3px 3px 0;
}

.combination-panel-container .combination-panel-wrap {
  position: absolute;
  z-index: 2;
  background: #FFFFFF;
  box-shadow: 0 0 4px 0 rgba(54, 62, 77, 0.36), 0 4px 4px 0 rgba(54, 62, 77, 0.18);
  border-radius: 3px;
}
.combination-panel-container .combination-item {
  padding: 16px;
}
.combination-panel-container .item-spliter {
  height: 1px;
  background: #EBECED;
}

.chart-canvas {
  position: relative;
}

.chart-layer {
  position: absolute;
  top: 0;
}

.chart-info {
  position: absolute;
  top: 200px;
  left: 0;
  right: 0;
  margin: auto;
  width: 200px;
  text-align: center;
}
.chart-info .chart-title {
  font-size: 12px;
  color: #363E4D;
  margin-right: 4px;
}
.chart-info .chart-unit {
  font-size: 12px;
  color: #AEB4B7;
}

.tree-select-container.error .tree-select-wrap-outer .tree-select-selector-wrap {
  border: 1px solid #FF2954;
}
.tree-select-container .tree-select-wrap-outer {
  text-align: left;
  max-width: 100%;
  overflow: auto;
  width: 240px;
  border-radius: 3px;
}
.tree-select-container .tree-select-wrap-outer:hover {
  border-color: #04B0FF;
}
.tree-select-container .tree-select-wrap-outer .tree-select-selector-switch .icon {
  margin-top: 2px;
}
.tree-select-container .tree-select-wrap-outer .tree-select-selector-wrap {
  border: 1px solid var(--components-border-primary, #BEC3C5);
}
.tree-select-container .tree-select-wrap-outer .selector-wrap-text {
  display: inline-block;
  min-height: 24px;
  width: calc(100% - 25px);
  vertical-align: top;
  padding-left: 10px;
}
.tree-select-container .tree-select-wrap-outer .selector-wrap-text .selector-text {
  word-break: break-all;
  overflow: hidden;
  display: block;
  line-height: 26px;
  cursor: default;
}
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown {
  position: absolute;
  z-index: 1000;
  width: inherit;
  background-color: var(--select-background-primary, #fff);
  border: 1px solid #dcdcdc;
}
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown.hidden {
  display: none;
}
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown ul.tree-select-dropdown-children-ul {
  max-height: 164px;
  padding: 12px 0;
}
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node-text-empty {
  display: none;
  padding-left: 8px;
  padding-right: 8px;
  color: var(--tab-color-primary, #868E93);
}
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all {
  margin-bottom: 4px;
}
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-all-row, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-node-row, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row {
  white-space: nowrap;
}
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row a, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-all-row a, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-node-row a, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row a {
  display: inline-block;
  cursor: pointer;
}
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row span, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-all-row span, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-node-row span, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row span {
  vertical-align: middle;
}
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row span.tree-select-node-select-icon, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-all-row span.tree-select-node-select-icon, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-node-row span.tree-select-node-select-icon, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row span.tree-select-node-select-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row span.tree-select-node-select-icon.hidden, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-all-row span.tree-select-node-select-icon.hidden, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-node-row span.tree-select-node-select-icon.hidden, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row span.tree-select-node-select-icon.hidden {
  visibility: hidden;
}
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row span.tree-select-node-open-icon,
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row span.tree-select-node-indent, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-all-row span.tree-select-node-open-icon,
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-all-row span.tree-select-node-indent, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-node-row span.tree-select-node-open-icon,
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-node-row span.tree-select-node-indent, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row span.tree-select-node-open-icon,
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row span.tree-select-node-indent {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 4px;
}
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row span.tree-select-node-open-icon, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-all-row span.tree-select-node-open-icon, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-node-row span.tree-select-node-open-icon, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row span.tree-select-node-open-icon {
  background: url(../img/svg/SelectIconUp.svg) no-repeat;
  background-size: 24px;
}
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row span.tree-select-node-open-icon.opened, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-all-row span.tree-select-node-open-icon.opened, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-node-row span.tree-select-node-open-icon.opened, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row span.tree-select-node-open-icon.opened {
  background: url(../img/svg/SelectIconDown.svg) no-repeat;
  background-size: 24px;
}
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row span.tree-select-node-text, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row span.tree-select-all-text, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-all-row span.tree-select-node-text, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-all-row span.tree-select-all-text, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-node-row span.tree-select-node-text, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-node-row span.tree-select-all-text, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row span.tree-select-node-text, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row span.tree-select-all-text {
  display: inline-block;
  padding-left: 4px;
  cursor: pointer;
}
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row.selected span.tree-select-node-text, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-all-row.selected span.tree-select-node-text, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-node-row.selected span.tree-select-node-text, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row.selected span.tree-select-node-text {
  color: #0492EB;
}
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row:hover, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-all-row:hover, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-node-row:hover, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row:hover {
  background-color: var(--select-background-hover, #F2F3F5);
}
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row:active, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-all-row:active, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-node-row:active, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row:active {
  background-color: rgba(4, 146, 235, 0.08);
}
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-node ul.tree-select-node-children-ul, .tree-select-container .tree-select-wrap-outer .tree-select-dropdown .tree-select-all ul.tree-select-node-children-ul {
  padding-left: 16px;
}
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown.empty-items .tree-select-dropdown-all-ul,
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown.empty-items .tree-select-search-box {
  display: none;
}
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown.empty-items .tree-select-node-text-empty {
  display: block;
}
.tree-select-container .tree-select-wrap-outer .tree-select-dropdown.empty-search .tree-select-node-text-empty {
  display: block;
}
.tree-select-container.opened .tree-select-wrap-outer {
  border-color: #0492EB;
}
.tree-select-container.loading .tree-select-selector-switch .icon {
  background: var(--icon-global-loading, url(../img/loading_apng.png)) no-repeat;
  background-size: 75%;
  background-position: 50% 60%;
}
.tree-select-container.multiple .tree-select-dropdown-all-ul {
  margin-top: 8px;
  border-bottom: 1px solid #EBECED;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-selector-wrap .multiple-items-container {
  vertical-align: middle;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-selector-wrap .multiple-items-container .placeholder {
  color: var(--tab-color-primary, #868E93);
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-selector-wrap .multiple-item {
  font-size: 12px;
  margin-right: 4px;
  padding: 2px 4px;
  background: var(--select-background-hover, #F2F3F5);
  border-radius: 2px;
  cursor: pointer;
  vertical-align: middle;
  display: inline-block;
  line-height: 18px;
  color: initial;
  max-width: 100%;
  width: auto;
  position: relative;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-selector-wrap .multiple-item .text {
  vertical-align: middle;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  padding-right: 18px;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-selector-wrap .multiple-item .close {
  display: inline-block;
  margin-left: 3px;
  vertical-align: middle;
  position: absolute;
  top: 5px;
  right: 3px;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row.selected span.tree-select-node-text {
  color: inherit;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row span.tree-select-node-select-icon {
  display: inline-block;
  box-sizing: border-box;
  margin-right: 6px;
  vertical-align: middle;
  position: relative;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  background-color: var(--checkbox-background-primary, #ffffff);
  border: 1px solid #AEB4B7;
  border-radius: 2px;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row span.tree-select-node-select-icon:after {
  content: " ";
  position: absolute;
  top: 43%;
  left: 24%;
  display: table;
  width: 5px;
  height: 9px;
  border: 2px solid #ffffff;
  border-top: 0;
  border-left: 0;
  opacity: 0;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row.selected span.tree-select-node-select-icon {
  background-color: var(--checkbox-background-primary, #ffffff);
  border-color: #0492EB;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row.selected span.tree-select-node-select-icon:after {
  content: " ";
  position: absolute;
  display: table;
  border: 2px solid #0492EB;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg) scale(1) translate(-50%, -50%);
  opacity: 1;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row.partial-selected span.tree-select-node-select-icon {
  background-color: #ffffff;
  border-color: #AEB4B7;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row.partial-selected span.tree-select-node-select-icon:after {
  content: " ";
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: #0492EB;
  border: 0;
  -webkit-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row.disabled {
  cursor: not-allowed;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row.disabled span.tree-select-node-select-icon {
  border-color: rgba(174, 180, 183, 0.4);
  background: rgba(174, 180, 183, 0.2);
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row.disabled a, .tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row.disabled .tree-select-node-text {
  cursor: not-allowed;
  opacity: 0.7;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row.disabled.selected span.tree-select-node-select-icon {
  cursor: not-allowed;
  background: #ffffff;
  border-color: rgba(4, 146, 235, 0.4);
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-node .tree-select-node-row.disabled.selected span.tree-select-node-select-icon:after {
  border-color: rgba(4, 146, 235, 0.4);
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-search-box {
  margin-top: 8px;
  padding-left: 10px;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-search-box .widget-wrap {
  padding-right: 26px;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row {
  line-height: 24px;
  padding-left: 28px;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row.selected span.tree-select-all-text {
  color: inherit;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row span.tree-select-all-select-icon {
  display: inline-block;
  box-sizing: border-box;
  margin-right: 6px;
  vertical-align: middle;
  position: relative;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  background-color: #ffffff;
  border: 1px solid #AEB4B7;
  border-radius: 2px;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row span.tree-select-all-select-icon:after {
  content: " ";
  position: absolute;
  top: 43%;
  left: 24%;
  display: table;
  width: 5px;
  height: 9px;
  border: 2px solid #ffffff;
  border-top: 0;
  border-left: 0;
  opacity: 0;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row.selected span.tree-select-all-select-icon {
  background-color: #ffffff;
  border-color: #0492EB;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row.selected span.tree-select-all-select-icon:after {
  content: " ";
  position: absolute;
  display: table;
  border: 2px solid #0492EB;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg) scale(1) translate(-50%, -50%);
  opacity: 1;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row.partial-selected span.tree-select-all-select-icon {
  background-color: #ffffff;
  border-color: #AEB4B7;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row.partial-selected span.tree-select-all-select-icon:after {
  content: " ";
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: #0492EB;
  border: 0;
  -webkit-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row.disabled {
  cursor: not-allowed;
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row.disabled span.tree-select-all-select-icon {
  border-color: rgba(174, 180, 183, 0.4);
  background: rgba(174, 180, 183, 0.2);
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row.disabled.selected span.tree-select-all-select-icon {
  background: #ffffff;
  border-color: rgba(4, 146, 235, 0.4);
}
.tree-select-container.multiple .tree-select-wrap-outer .tree-select-dropdown .tree-select-all .tree-select-all-row.disabled.selected span.tree-select-all-select-icon:after {
  border-color: rgba(4, 146, 235, 0.4);
}
.tree-select-container.disabled .tree-select-wrap-outer {
  color: #c9c9c9;
  background-color: rgba(174, 180, 183, 0.2);
  border-color: rgba(174, 180, 183, 0.4);
}
.tree-select-container.disabled .tree-select-selector-switch,
.tree-select-container.disabled .selector-text {
  cursor: not-allowed;
}
.tree-select-container.disabled .multiple-item .close {
  display: none;
}

.tree-select-container.independent .tree-select-wrap-outer .tree-select-dropdown {
  border: none;
  position: relative;
  z-index: inherit;
}
.tree-select-container.independent .tree-select-wrap-outer .tree-select-dropdown-all-ul {
  margin: 0;
  padding-bottom: 0;
  border: none;
}

div[widget=calendarCard] {
  border-top: 1px solid #e5e5e5;
}
div[widget=calendarCard] .time-line-hour {
  border-right: 1px solid #D6D9DB;
}
div[widget=calendarCard] .time-line-hour.expand {
  border-right: 2px solid #04B0FF;
}
div[widget=calendarCard] .time-line-hour.expand .time-line-circle {
  border: 3px solid #04B0FF;
}
div[widget=calendarCard] .grid-time-line-container {
  float: left;
  width: 13px;
  margin-left: 57px;
}
div[widget=calendarCard] .widget-container {
  margin-bottom: 0;
}
div[widget=calendarCard] .time-line-hour {
  font-size: 14px;
  height: 54px;
}
div[widget=calendarCard] .time-line-content.day-time-line {
  display: inline-block;
  width: 54px;
  white-space: nowrap;
  position: relative;
  top: -7px;
  right: 60px;
  text-align: right;
  color: var(--s-color-text-tertiary, #5E696F);
  font-size: 12px;
}
div[widget=calendarCard] .time-line-content.week-time-line {
  display: inline-block;
  width: 54px;
  white-space: nowrap;
  position: relative;
  transform: translateY(-50%);
  right: 60px;
  text-align: right;
  font-weight: bold;
  color: var(--s-color-text-tertiary, #5E696F);
  font-size: 12px;
}
div[widget=calendarCard] .time-line-circle {
  display: inline-block;
  border: 3px solid #7DD6FF;
  border-radius: 50%;
  position: relative;
  top: -22px;
  right: -9px;
}
div[widget=calendarCard] .time-line-circle-last {
  display: inline-block;
  border: 3px solid #7DD6FF;
  border-radius: 50%;
  position: absolute;
  bottom: -3px;
  right: -3px;
}
div[widget=calendarCard] .time-line-hour-999 {
  height: 44px;
  border: none;
}
div[widget=calendarCard] .time-line-content-last {
  margin-top: 26px;
}
div[widget=calendarCard] .time-line-hour-last {
  position: relative;
  height: 54px;
}
div[widget=calendarCard] .row-header-title {
  cursor: pointer;
  height: 28px;
  line-height: 28px;
  position: relative;
  display: inline-block;
  padding-right: 30px;
  vertical-align: middle;
  border-radius: 5px;
  left: -15px;
}
div[widget=calendarCard] .row-header-title .icon.color-dot {
  width: 8px;
  height: 8px;
  background: green;
  margin-left: 10px;
}
div[widget=calendarCard] .row-header-title .text {
  margin-left: 6px;
  font-size: 12px;
  color: #0492eb;
  vertical-align: middle;
}
div[widget=calendarCard] .row-header-title .icon.collapse-inside {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 6px;
  right: 5px;
  background: url(../img/svg/BreadcrumbIconNextLevel2Blue.svg);
}
div[widget=calendarCard] .row-header-title.unfold .icon.collapse-inside {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}
div[widget=calendarCard] .grid-content-container.fold .grid-content-data {
  display: none;
}
div[widget=calendarCard] .grid-content-container.fold .content-line {
  display: none;
}
div[widget=calendarCard] .grid-content-container.fold .calendar-pager-cantainer {
  display: none;
}
div[widget=calendarCard] .calendar-pager-cantainer {
  padding: 0 0 9px;
}
div[widget=calendarCard] .calendar-pager-cantainer.hidden {
  display: none;
}
div[widget=calendarCard] .calendar-pager-cantainer .hidden {
  display: none !important;
}
div[widget=calendarCard] .calendar-pager-cantainer .widget-fieldlabel-wrap {
  width: auto;
}
div[widget=calendarCard] .grid-table.no-border {
  border: none;
}
div[widget=calendarCard] .grid-content-container:nth-child(odd) {
  background: var(--table-background-odd, #F8F9FB);
}
div[widget=calendarCard] .grid-content-container:nth-child(odd) .grid-table {
  background: var(--table-background-odd, #F8F9FB);
}
div[widget=calendarCard] .grid-content-container:nth-child(odd) .grid-table .grid-content-tr {
  background: var(--table-background-odd, #F8F9FB);
}
div[widget=calendarCard] .grid-content-container:nth-child(odd) .grid-table .grid-content-tr.hover {
  background-color: rgba(4, 146, 235, 0.08);
}
div[widget=calendarCard] .grid-content-container:nth-child(even) {
  background: var(--table-background-even, #ffffff);
}
div[widget=calendarCard] .grid-content-container:nth-child(even) .grid-table {
  background: var(--table-background-even, #ffffff);
}
div[widget=calendarCard] .grid-content-container:nth-child(even) .grid-table .grid-content-tr {
  background: var(--table-background-even, #ffffff);
}
div[widget=calendarCard] .grid-content-container:nth-child(even) .grid-table .grid-content-tr.hover {
  background-color: rgba(4, 146, 235, 0.08);
}
div[widget=calendarCard] .grid-table {
  width: 100%;
}
div[widget=calendarCard] .grid-table .grid-header-0, div[widget=calendarCard] .grid-table .grid-content-td-0 {
  padding-left: 0;
}
div[widget=calendarCard] .grid-table thead {
  display: none;
}
div[widget=calendarCard] .grid-table.fold-table thead {
  display: table-header-group;
}
div[widget=calendarCard] .fold-table .grid-content-tr {
  border-top: 1px solid #e5e5e5;
}
div[widget=calendarCard] .grid-content-container {
  min-height: 54px;
  padding-left: 30px;
}
div[widget=calendarCard] .grid-header-container {
  padding-left: 15px;
}
div[widget=calendarCard] .content-line {
  position: relative;
}
div[widget=calendarCard] .content-line span {
  display: block;
  position: absolute;
  left: -15px;
}
div[widget=calendarCard] .content-line.fold span {
  display: none;
}
div[widget=calendarCard] .empty-content {
  position: relative;
  display: none;
}
div[widget=calendarCard] .empty-content.enable {
  display: block;
}
div[widget=calendarCard] .empty-content.enable span {
  display: block;
  position: absolute;
  left: -15px;
  top: 20px;
}
div[widget=calendarCard] .empty-content.enable span::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  height: 18px;
  width: 18px;
  background: url(../img/svg/MessageIconInfo.svg) no-repeat;
}
div[widget=calendarCard] .grid-header[name=action-column], div[widget=calendarCard] .grid-content-td[name=action-column] {
  text-align: center;
}
div[widget=calendarCard] .grid-content-td {
  height: 54px;
}
div[widget=calendarCard].week .grid-content-container.fold {
  height: 108px;
}
div[widget=calendarCard] .grid-content-td {
  padding: 0;
}

.month-card-tr .month-card-header-th {
  padding: 14px 15px;
  font-weight: bold;
  text-align: center;
}

.month-card-table {
  border-top: 1px solid #e5e5e5;
  word-wrap: break-word;
  border-collapse: collapse;
}
.month-card-table thead {
  background: var(--card-primary, #ffffff);
  font-size: 14px;
}
.month-card-table .month-card-content-td {
  border: 1px solid #EBECEC;
  height: 94px;
  vertical-align: top;
  text-align: right;
  cursor: pointer;
}
.month-card-table .month-card-content-td.prev-month, .month-card-table .month-card-content-td.next-month {
  color: #AEB4B7;
}
.month-card-table .month-card-content-td.select, .month-card-table .month-card-content-td.clicked {
  background: rgba(4, 146, 235, 0.08);
  border-top: 2px solid #0492eb;
}
.month-card-table .month-card-content-td.today .date-number {
  background: #0492EB;
  color: white;
}
.month-card-table .month-card-content-td .date-number {
  margin-top: 2px;
  margin-right: 2px;
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  text-align: center;
}
.month-card-table .month-card-content-td .slot {
  line-height: 20px;
  text-align: left;
}

.chart-card-container {
  padding: 0 16px;
  border-radius: 6px;
  background: var(--card-primary, #ffffff);
}
.chart-card-container .card-header {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px 0 16px 0;
  border-bottom: 1px solid rgba(189, 189, 189, 0.5);
}
.chart-card-container .card-header .card-title-outer {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.chart-card-container .card-header .card-title-outer > div {
  display: inline-block;
}
.chart-card-container .card-header .card-title-outer .card-title {
  height: 28px;
  line-height: 28px;
  font-size: 16px;
  font-weight: bold;
}
.chart-card-container .card-body {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  padding: 25px 0;
}
.chart-card-container .card-body .chart-item {
  display: inline-block;
  flex: 1;
  padding: 0 15px;
}
.chart-card-container .card-body .chart-item.flex-row-3 {
  flex: 3;
}
.chart-card-container .card-body .chart-item > .widget-container {
  margin-bottom: 0;
}
.chart-card-container .pie-chart-container {
  height: 100%;
}
.chart-card-container .pie-chart-content {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}
.chart-card-container .pie-chart-content .chart-container {
  width: auto;
  vertical-align: middle;
  margin-right: 50px;
  margin-bottom: 0;
}
.chart-card-container .pie-chart-content .pie-info-outer {
  display: inline-block;
  vertical-align: middle;
}
.chart-card-container .pie-chart-content .pie-info-outer:after {
  content: "";
  width: 0;
  height: 100%;
  display: inline-block;
  font-size: 0;
  vertical-align: middle;
}
.chart-card-container .pie-chart-content .pie-info-content {
  min-width: 300px;
  max-width: 400px;
  max-height: 240px;
  margin: 0 auto;
  vertical-align: middle;
  display: inline-block;
}
.chart-card-container .pie-chart-content .pie-info-content .info-label {
  text-align: left;
  white-space: nowrap;
}
.chart-card-container .pie-chart-content .pie-info-content .info-text {
  text-align: right;
  white-space: nowrap;
}
.chart-card-container .pie-chart-content .info-item {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  height: 35px;
  line-height: 25px;
  padding: 5px;
  cursor: pointer;
}
.chart-card-container .pie-chart-content .info-item:hover {
  background: var(--select-background-hover, #f1f3f9);
}
.chart-card-container .pie-chart-content .info-item.active {
  background: rgba(4, 146, 235, 0.08);
}
.chart-card-container .pie-chart-content .info-item > div {
  display: inline-block;
  flex: 1;
  height: 25px;
  line-height: 25px;
}
.chart-card-container .pie-chart-content .info-item .info-label > span {
  display: inline-block;
}
.chart-card-container .pie-chart-content .info-item .info-label > span.point {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  margin-right: 6px;
}
.chart-card-container .pie-chart-content .info-item .info-label > span.text {
  color: var(--tab-color-primary, #868E93);
  font-size: 15px;
}
.chart-card-container .pie-chart-content .info-item .info-text {
  font-weight: bold;
}
.chart-card-container .vertical-pie .pie-chart-content {
  flex-direction: column;
}
.chart-card-container .vertical-pie .pie-chart-content .chart-container {
  margin: 0 0 18px 0;
}
.chart-card-container .vertical-pie .pie-chart-content .pie-info-outer {
  text-align: center;
}
.chart-card-container .empty-chart-content {
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: center;
}
.chart-card-container .empty-chart-content .empty-icon {
  margin: 0 auto;
}
.chart-card-container .empty-chart-content .text {
  margin-top: 20px;
  color: var(--tab-color-primary, #868E93);
  font-size: 16px;
  text-align: center;
}
.chart-card-container:not(.no-devider) .card-item-0 {
  border-right: 1px solid rgba(189, 189, 189, 0.5);
}

.health-overview-card {
  display: flex;
  position: relative;
  justify-content: space-around;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 40px;
  padding-right: 40px;
}
.health-overview-card .split-line {
  width: 1px;
  height: 62px;
  opacity: 0.5;
  background: #bdbdbd;
}
.health-overview-card .device-health-card {
  display: flex;
  padding: 10px;
}
.health-overview-card .device-icon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.health-overview-card .device-name {
  font-size: 20px;
  color: var(--s-color-text-primary, #212121);
  letter-spacing: 0;
  text-align: center;
  font-weight: 500;
}
.health-overview-card .gateway-health-score {
  margin-left: 20px;
  display: flex;
  align-items: center;
}
.health-overview-card .gateway-health-score.none {
  display: none;
}
.health-overview-card .gateway-status {
  font-size: 20px;
  letter-spacing: 0;
  font-weight: 500;
}
.health-overview-card .device-health-num-wrapper {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.health-overview-card .device-health-num-wrapper.none {
  display: none;
}
.health-overview-card .device-num-list {
  display: flex;
}
.health-overview-card .health-level {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 26px;
}
.health-overview-card .health-progressbar .progressbar-wrap-outer {
  padding-right: 0;
}
.health-overview-card .health-progressbar .progressbar-content {
  width: 200px;
  height: 8px;
}
.health-overview-card .health-progressbar .progressbar-value {
  width: 100%;
}
.health-overview-card .progressbar-value .level-0 {
  background-color: #22B819;
}
.health-overview-card .progressbar-value .level-1 {
  background-color: #FFBB00;
}
.health-overview-card .progressbar-value .level-2 {
  background-color: #FF2954;
}
.health-overview-card .progressbar-value .level-3 {
  background-color: #BFC3C9;
}
.health-overview-card .gateway-status.level-0,
.health-overview-card .health-level.level-0 {
  color: #22B819;
}
.health-overview-card .gateway-status.level-1,
.health-overview-card .health-level.level-1 {
  color: #FFBB00;
}
.health-overview-card .gateway-status.level-2,
.health-overview-card .health-level.level-2 {
  color: #FF2954;
}
.health-overview-card .gateway-status.level-3,
.health-overview-card .health-level.level-3 {
  color: #BFC3C9;
}

[widget=infoPanel].health-overview-info-panel .info-panel-grid .health-panel-title .info-panel-name {
  padding-bottom: 12px;
  font-size: 16px;
  height: 20px;
  line-height: 20px;
  color: var(--s-color-side, #363e4d);
  font-weight: 700;
}
[widget=infoPanel].health-overview-info-panel .info-panel-grid .health-panel-title::after {
  content: "";
  position: absolute;
  height: 1px;
  width: calc(100% - 20px);
  left: 10px;
  top: 40px;
  background: #e1e2e6;
}
[widget=infoPanel].health-overview-info-panel .info-panel-grid .panel-name {
  position: relative;
  font-size: 14px;
  text-indent: 16px;
  color: var(--s-color-side, #363e4d);
  font-weight: 700;
}
[widget=infoPanel].health-overview-info-panel .info-panel-grid .panel-name .info-panel-name {
  padding-bottom: 10px;
}
[widget=infoPanel].health-overview-info-panel .info-panel-grid .panel-name::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
[widget=infoPanel].health-overview-info-panel .info-panel-grid .panel-name.level-0::after {
  background-color: #22B819;
}
[widget=infoPanel].health-overview-info-panel .info-panel-grid .panel-name.level-1::after {
  background-color: #FFBB00;
}
[widget=infoPanel].health-overview-info-panel .info-panel-grid .panel-name.level-2::after {
  background-color: #FF2954;
}
[widget=infoPanel].health-overview-info-panel .info-panel-grid .panel-name.level-3::after {
  background-color: #BFC3C9;
}

.block-chart-container {
  position: relative;
  background-color: var(--s-background-panel, #ffffff);
}
.block-chart-container::before {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  background-color: #9B9B9B;
  top: 50%;
  transform: translateY(-13.5px);
}
.block-chart-container::after {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  background-color: #9B9B9B;
  bottom: 27px;
}
.block-chart-container .chart-container::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: 27px;
  width: 1px;
  background-color: #9B9B9B;
}
.block-chart-container .chart-container::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: 27px;
  width: 1px;
  background-color: #9B9B9B;
  right: 0;
}
.block-chart-container .chart-before {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  background-color: #9B9B9B;
  top: -2px;
}
.block-chart-container .chart-area {
  height: 100%;
}

.line-scatter-container.show-cursor canvas {
  cursor: pointer;
}

.incident-list-container .incident-content-wrapper {
  height: 100%;
}
.incident-list-container .list-item-container {
  position: relative;
  padding: 10px 30px;
  border: 1px solid #bdbdbd;
  box-shadow: 0 0 2px #bdbdbd;
  border-radius: 5px;
  margin-bottom: 8px;
}
.incident-list-container .list-item-container.level-0 {
  background: linear-gradient(to right, #FF2954 0%, #FF2954 10px, var(--s-background-panel, #ffffff) 10px, var(--s-background-panel, #ffffff) 100%);
}
.incident-list-container .list-item-container.level-1 {
  background: linear-gradient(to right, #FF9500 0%, #FF9500 10px, var(--s-background-panel, #ffffff) 10px, var(--s-background-panel, #ffffff) 100%);
}
.incident-list-container .list-item-container.level-2 {
  background: linear-gradient(to right, #FFD701 0%, #FFD701 10px, var(--s-background-panel, #ffffff) 10px, var(--s-background-panel, #ffffff) 100%);
}
.incident-list-container .list-item-container.level-3 {
  background: linear-gradient(to right, #04B0FF 0%, #04B0FF 10px, var(--s-background-panel, #ffffff) 10px, var(--s-background-panel, #ffffff) 100%);
}
.incident-list-container .item-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.incident-list-container .item-title-container {
  display: flex;
  align-items: center;
  margin: 10px 0;
  font-size: 16px;
  font-weight: bold;
  color: var(--s-color-text-primary, #212121);
}
.incident-list-container .item-title-container .title-text {
  display: inline-block;
}
.incident-list-container .top-right-corner {
  padding: 4px;
}
.incident-list-container .item-content-container {
  margin: 6px 0;
}
.incident-list-container .item-content-container .item-content-text {
  font-size: 14px;
  color: var(--s-color-text-primary, #212121);
  margin-bottom: 8px;
  word-break: break-word;
}
.incident-list-container .item-time-container {
  display: flex;
  align-items: center;
}
.incident-list-container .item-time-container .time-text {
  font-size: 12px;
  margin-left: 4px;
  line-height: 24px;
  color: #b9b9b9;
}
.incident-list-container .status {
  font-size: 14px;
  font-weight: normal;
  padding: 3px;
}
.incident-list-container .status-0 {
  border: 1px solid #FF9500;
  color: #FF9500;
}
.incident-list-container .status-1 {
  border: 1px solid #0DC901;
  color: #0DC901;
}
.incident-list-container .status-2 {
  border: 1px solid #0DC901;
  color: #0DC901;
}
.incident-list-container .status-3 {
  border: 1px solid #FF9500;
  color: #FF9500;
}
.incident-list-container .frequency {
  font-size: 14px;
  font-weight: normal;
  padding: 2px 10px;
  color: #FF2954;
  border: 1px solid #FF2954;
  border-radius: 10px;
}
.incident-list-container .paging-container {
  margin-top: 8px;
}
.incident-list-container .paging-container .paging-wrap-inner .widget-container {
  margin-bottom: 0;
}
.incident-list-container .paging-container .paging-wrap-inner .paging-go .widget-fieldlabel-wrap {
  width: auto;
}
.incident-list-container .paging-container .hidden {
  display: none;
}

.incident-timeline-container .incident-timeline-content-container {
  margin-bottom: 16px;
}
.incident-timeline-container .incident-timeline-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-right: 20px;
}
.incident-timeline-container .incident-timeline-title .title-container {
  display: flex;
  align-items: center;
  font-size: 16px;
}
.incident-timeline-container .incident-timeline-title .checkbox-container {
  margin-bottom: 0;
}
.incident-timeline-container .incident-timeline-title .checkbox-container .checkbox-list .widget-wrap {
  line-height: 24px;
  height: 24px;
  color: var(--s-color-text-primary, #212121);
  font-weight: 600;
}
.incident-timeline-container .incident-timeline-title .incident-num {
  font-size: 13px;
  margin-left: 10px;
  padding: 1px 5px;
  color: #FF2954;
  border: 1px solid #FF2954;
  border-radius: 8px;
  line-height: 16px;
}
.incident-timeline-container .incident-timeline-title .btns-info {
  display: flex;
}
.incident-timeline-container .incident-timeline-title .btns-info.none {
  display: none;
}
.incident-timeline-container .incident-timeline-title .btns-info .action-btn-container {
  display: flex;
  cursor: pointer;
}
.incident-timeline-container .incident-timeline-title .btns-info .action-btn-container:not(:first-of-type) {
  margin-left: 24px;
}
.incident-timeline-container .incident-timeline-title .btns-info.disabled .action-btn-container {
  cursor: not-allowed;
  opacity: 0.5;
}
.incident-timeline-container .incident-timeline-title .icon-text,
.incident-timeline-container .incident-timeline-title .icon-delete-text {
  margin-left: 10px;
  line-height: 24px;
  height: 24px;
  font-size: 15px;
  color: #0492EB;
  font-weight: 500;
}
.incident-timeline-container .incident-timeline-title .icon-delete-text {
  color: #FF2954;
}
.incident-timeline-container .item-container {
  position: relative;
  padding-left: 10px;
  padding-bottom: 10px;
}
.incident-timeline-container .item-container::before {
  content: "";
  position: absolute;
  top: 4px;
  left: -1px;
  width: 1px;
  height: 100%;
  background-color: #a0a0a0;
}
.incident-timeline-container .item-time {
  line-height: 19px;
  margin-bottom: 10px;
  color: #a0a0a0;
}
.incident-timeline-container .item-time::before {
  content: "";
  position: absolute;
  top: 4px;
  left: -6px;
  width: 11px;
  height: 11px;
  background: #a0a0a0;
  border-radius: 50%;
}
.incident-timeline-container .item-content {
  position: relative;
  padding: 10px 10px 20px 10px;
  background-color: var(--s-background-panel, #ffffff);
  color: var(--s-color-text-primary, #212121);
  font-weight: 600;
}
.incident-timeline-container .content-text {
  margin: 0 120px 12px 22px;
}
.incident-timeline-container .detail {
  margin-left: 22px;
  color: #0492EB;
  text-decoration: underline;
  cursor: pointer;
}
.incident-timeline-container .action-btns {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.incident-timeline-container .action-btns .ignore-btn,
.incident-timeline-container .action-btns .open-btn,
.incident-timeline-container .action-btns .delete-btn {
  margin-left: 15px;
}
.incident-timeline-container .action-btns.none {
  display: none;
}
.incident-timeline-container #incident-timeline-paging-container {
  margin-bottom: 24px;
}
.incident-timeline-container #incident-timeline-paging-container .paging-wrap-inner .widget-container {
  margin-bottom: 0;
}
.incident-timeline-container #incident-timeline-paging-container .hidden {
  display: none;
}
.incident-timeline-container .selected-info-wrapper {
  color: var(--pagination-color-text-primary, #363E4D);
  margin-right: 20px;
}
.incident-timeline-container .selected-info-wrapper .selected-all-page {
  color: #0492EB;
  font-weight: bold;
  margin-left: 10px;
}
.incident-timeline-container .selected-info-wrapper .selected-all-page:hover {
  color: #04B0FF;
  cursor: pointer;
}

.cause-container .cause-main-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--s-color-text-primary, #212121);
}
.cause-container .cause-item-wrap {
  padding: 10px 16px;
}
.cause-container .cause-item {
  margin-bottom: 10px;
  border-radius: 5px;
  background: var(--s-background-panel, #ffffff);
}
.cause-container .cause-item .cause-body {
  display: none;
}
.cause-container .cause-item.expand .cause-header:after {
  content: "";
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, #BDBDBD, transparent);
  position: absolute;
  bottom: 0;
  left: 0;
}
.cause-container .cause-header {
  position: relative;
  padding: 10px 10px 10px 0;
  color: var(--s-color-text-primary, #212121);
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
.cause-container .cause-header:hover {
  color: #04B0FF;
}
.cause-container .cause-header:active {
  color: #0492EB;
}
.cause-container .cause-icon {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  right: 0;
}
.cause-container .cause-content {
  min-height: 100px;
  padding: 12px 0;
  position: relative;
}
.cause-container .cause-content:after {
  content: "";
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, #BDBDBD, transparent);
  position: absolute;
  bottom: 0;
  left: 0;
}
.cause-container .cause-content .title {
  font-size: 13px;
  color: #363E4D;
  font-weight: 600;
}
.cause-container .cause-content-item-wrapper:not(:first-of-type) {
  margin-top: 20px;
}
.cause-container .cause-content-text-item {
  margin-bottom: 12px;
}
.cause-container .suggestion-wrap {
  padding: 20px 0 10px 0;
}
.cause-container .suggestion-wrap .suggestion-title {
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  font-weight: 600;
  color: #0492EB;
  margin-bottom: 10px;
}
.cause-container .suggestion-wrap .suggestion-content .suggestion-item {
  margin-bottom: 8px;
}
.cause-container .suggestion-wrap .suggestion-item-wrapper {
  margin-bottom: 16px;
}
.cause-container .suggestion-wrap .suggestion-operation {
  display: inline-block;
  height: 28px;
  line-height: 28px;
  vertical-align: middle;
  margin-right: 28px;
  cursor: pointer;
}
.cause-container .suggestion-wrap .suggestion-operation .icon,
.cause-container .suggestion-wrap .suggestion-operation .text {
  display: inline-block;
  vertical-align: middle;
  font-size: 15px;
}
.cause-container .suggestion-wrap .go-to {
  color: #0492EB;
  text-decoration: underline;
}
.cause-container .suggestion-wrap .link-detail {
  cursor: pointer;
  color: #0492EB;
  text-decoration: underline;
  font-weight: bold;
}

.protocol-flow-chart-container #flow-chart-canvas {
  background: #ffffff;
}

.repeat-list-container .repeat-list-wrap {
  height: 100%;
}
.repeat-list-container .repeat-list-item {
  display: flex;
  line-height: 24px;
  padding: 10px;
  position: relative;
  margin-bottom: 16px;
  border: 1px solid #bec3c5;
  border-radius: 3px;
  cursor: pointer;
  color: #a5a8af;
  align-items: center;
}
.repeat-list-container .repeat-list-item:not(.disabled):not(.max-disabled):hover {
  border-color: #04B0FF;
  color: #04B0FF;
}
.repeat-list-container .repeat-list-item:not(.disabled):not(.max-disabled).active {
  border-color: #0492EB;
  color: #0492EB;
  background: rgba(4, 146, 235, 0.08);
}
.repeat-list-container .repeat-list-item.disabled, .repeat-list-container .repeat-list-item.max-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.draggable-list-container {
  display: flex;
  width: 500px;
  justify-content: space-between;
}
.draggable-list-container .field-text {
  margin-bottom: 5px;
  line-height: 20px;
}
.draggable-list-container .connected-sortable {
  width: 230px;
  height: 220px;
  padding: 10px;
  border: 1px solid var(--components-border-primary, #BEC3C5);
  border-radius: 3px;
}
.draggable-list-container .connected-sortable .draggable-list-item {
  position: relative;
  line-height: 30px;
  padding-left: 15px;
  border: 1px solid var(--components-border-primary, #BEC3C5);
  border-radius: 3px;
  background-color: var(--s-background-panel);
  cursor: move;
}
.draggable-list-container .connected-sortable .draggable-list-item::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #0492EB;
  transform: translateY(-50%);
}
.draggable-list-container .connected-sortable .draggable-list-item + .draggable-list-item {
  margin-top: 10px;
}
.draggable-list-container .connected-sortable.source .draggable-list-item::before {
  background-color: var(--tab-color-primary, #868E93);
}
.draggable-list-container .draggable-list-empty {
  display: none;
  color: var(--tab-color-primary, #868E93);
}

.draggable-list-container.empty .draggable-list-empty {
  position: absolute;
  display: block;
  top: 50%;
  text-align: center;
  transform: translateY(-50%) translateY(10px);
}

.draggable-list-container.error .draggable-list-target {
  border-color: #FF2954;
}
.draggable-list-container.error .draggable-list-empty {
  color: #FF2954;
}

.draggable-list-container.external-selected .list-target-container {
  display: none;
}

.beta-test {
  vertical-align: middle;
  color: #FF2954;
  border: 1px solid #FF2954;
  display: none !important;
  height: 32px;
  font-size: 18px;
  padding: 5px;
  margin-bottom: 0 !important;
}

body,
#main-container,
#main-view,
#basic-module-container,
#index-view {
  height: 100%;
  overflow-y: hidden;
}

#index-view,
#hotspot-index-view {
  background-color: var(--s-color-background-primary, #f2f3f5);
  height: 100%;
}

html {
  height: 100%;
  overflow: hidden;
}

body.b-index,
body.b-hotspot {
  min-width: 732px;
  position: relative;
  min-height: 100%;
  box-sizing: border-box;
}

.beta-version,
#beta-version {
  background-image: var(--icon-mark-copy, url("../../theme/img/mark_copy.gif"));
}

.site__main {
  background-color: var(--s-background-main, #f2f3f5);
  overflow: auto;
  height: 100%;
  padding-top: 10px;
  position: relative;
}
.site__main.level2 {
  padding-left: 256px;
}
.site__main.full {
  padding-left: 0;
  padding-right: 0;
}

.site__header {
  z-index: 99;
  width: 100%;
  position: absolute;
  top: 0;
  display: none;
}

.site__content {
  margin-top: -60px;
}

.site__footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  width: 960px;
  margin-left: -480px;
}
.site__footer.mobile {
  position: absolute;
}

.header {
  color: #ffffff;
  background-color: var(--s-background-header, #005564);
}

.header__status {
  position: relative;
  height: 56px;
  background-color: var(--s-color-background-menu, #ffffff);
  color: var(--s-color-text-primary, #212121);
  box-shadow: 2px 2px 10px 0 rgba(54, 62, 77, 0.1);
  display: flex;
  align-items: center;
}

.dark .header__status {
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

.header__left {
  position: relative;
  height: 100%;
  min-width: 442px;
  margin-right: auto;
  white-space: nowrap;
  font-family: TP-LinkAktiv-Medium;
}
.header__left::after, .header__left::before {
  position: absolute;
  content: "";
  left: 121px;
  top: 16px;
  width: 1px;
  height: 20px;
  background-color: #ccd0d1;
}
.header__left::after {
  left: 205px;
}
.header__left.no-name::after {
  display: none;
}

.header__logo {
  margin: 13px 11px 8px 20px;
  height: 33px;
  width: 90px;
  background-image: var(--tp-logo, url(../img/logo.png));
  background-size: cover;
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: middle;
}

.header__title,
.header--title {
  display: inline-block;
  margin-left: 11px;
  margin-bottom: 6px;
  height: 21px;
  width: 60px;
  background-size: cover;
  vertical-align: middle;
}

.header--title {
  background-image: var(--omada-logo, url(../img/svg/Omada.svg));
}

.header__left.pro .header--title {
  width: 98px;
  height: 24px;
  margin-bottom: 0;
  background: var(--omada-pro-logo, url(../img/svg/OmadaPro.svg));
}
.header__left.pro::after {
  left: 246px;
}

.controller-name {
  display: inline-block;
  font-size: 14px;
  margin-left: 24px;
  vertical-align: -4px;
}
.controller-name .paragraph-wrap-outer {
  max-width: 206px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.controller-pattern {
  display: inline-block;
  margin-left: 10px;
  height: 20px;
  font-size: 12px;
  padding: 0 10px;
  padding-top: 6px;
  vertical-align: -4px;
}

.standard-pattern {
  color: var(--tag-license-color-adv);
  background: var(--tag-license-bg-adv);
}

.msp-pattern {
  background: var(--tag-license-bg-pro);
  color: var(--tag-license-color-pro);
}

.license-type-icon-container {
  display: inline-block;
  margin-left: 11px;
  padding: 2px 5px;
  padding-top: 0;
  height: 20px;
  vertical-align: -4px;
  border-radius: 2px;
}
.license-type-icon-container.cloud-based {
  color: var(--tag-license-color-adv, #0492EB);
  background: var(--tag-license-bg-adv, rgba(4, 146, 235, 0.1));
}
.license-type-icon-container.cloud-based-pro {
  color: var(--tag-license-color-pro, #374FD5);
  background: var(--tag-license-bg-pro, rgba(55, 79, 213, 0.1));
}
.license-type-icon-container .license-type-text {
  font-size: 12px;
}

.license-expiring {
  display: inline-block;
  margin-left: 10px;
  height: 20px;
  font-size: 12px;
  padding: 0 10px;
  padding-top: 6px;
  vertical-align: -4px;
  border-radius: 10px;
}
.license-expiring.expiring {
  color: var(--s-color-warning);
  background: var(--s-color-background-warning);
}
.license-expiring.expired {
  color: #36444B;
  background: #D2D5DA;
  opacity: 0.6;
}

.header__middle {
  position: relative;
  height: 100%;
  min-width: 620px;
  padding-left: 110px;
}

.aps__name,
.stations__name {
  margin: 0 13px;
  line-height: 60px;
}

.aps .header-middle-data .transition-container {
  width: 73px;
}

.header-middle-data.avaliable {
  cursor: pointer;
}
.header-middle-data .displaylabel-container {
  margin-top: 10px;
  line-height: 26px;
  color: #4acbd6;
}
.header-middle-data .transition-container {
  margin: 0 6px;
  line-height: 14px;
}

#emergency-mode-button {
  margin-right: 24px;
}
#emergency-mode-button .button-button {
  border: 1px solid;
  background: var(--s-color-background-primary, #ffffff);
  font-size: 14px;
  color: #FF9500;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
@media screen and (max-width: 1012px) {
  #emergency-mode-button .button-button {
    width: calc(100vw - 766px);
  }
}
#emergency-mode-button.active .button-button {
  background: #FF9500;
  color: var(--s-color-background-primary, #ffffff);
}
#emergency-mode-button:hover {
  opacity: 0.7;
}
#emergency-mode-button:not(.active) .button-loading {
  border: 2px solid transparent;
  border-radius: 50%;
}
#emergency-mode-button:not(.active).loading .button-loading {
  border-top-color: #FF9500;
  border-left-color: #FF9500;
  border-bottom-color: #FF9500;
}

#msp-mode-button {
  display: inline-block;
  vertical-align: middle;
  margin: auto;
}
#msp-mode-button .button-button {
  border: 1px solid;
  background: var(--s-color-background-primary);
  font-size: 14px;
  color: #FF9500;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
@media screen and (max-width: 1012px) {
  #msp-mode-button .button-button {
    width: calc(100vw - 766px);
  }
}

.header__dst,
.hotspot_header__dst {
  cursor: pointer;
  font-weight: bold;
  line-height: 28px;
  height: 28px;
  font-size: 14px;
  border-radius: 4px;
  color: #ffffff;
  background: #BFC3C9;
  padding: 0 9px;
  margin-right: 16px;
}
.header__dst.active,
.hotspot_header__dst.active {
  background: #0492EB;
}

.header__site,
.header__btn {
  display: inline-block;
  vertical-align: middle;
  margin: auto;
}

.header__site {
  height: 28px;
  margin-right: 14px;
}

.header__btn {
  height: 32px;
}
.header__btn.hotspot {
  line-height: 26px;
}
.header__btn .action-btn {
  margin-right: 10px;
  display: inline-block;
  cursor: pointer;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
.header__btn .action-refresh {
  width: 30px;
  height: 30px;
  background: url(../img/svg/RefreshNormal.svg);
}
.header__btn .action-refresh:hover, .header__btn .action-refresh:active {
  background: url(../img/svg/RefreshHover.svg);
}
.header__btn .action-search {
  margin-top: 2px;
  margin-right: 6px;
  width: 30px;
  height: 30px;
  background: url(../img/svg/SearchBarIconSearch.svg);
}
.header__btn .action-search:hover, .header__btn .action-search:active {
  background: url(../img/svg/SearchBarIconSearchHover.svg);
}
.header__btn .action-account {
  background: url(../img/iconsX.png) no-repeat -691px -291px;
}
.header__btn .action-more {
  background: url(../img/svg/NavigationBarIconMore.svg);
}
.header__btn .action-more:hover {
  background: url(../img/svg/NavigationBarIconMoreHover.svg);
}
.header__btn .action-more:active, .header__btn .action-more.active {
  background: url(../img/svg/NavigationBarIconMoreActive.svg);
}
.header__btn .tab-container.tab_menu {
  position: absolute;
  top: 34px;
  right: 19px;
}
.header__btn .tab-container.tab_menu .displaylabel-container .text-wrap-outer {
  line-height: 20px;
}
.header__btn .tab-container.tab_menu .displaylabel-container + .displaylabel-container {
  color: var(--tab-color-primary, #868E93);
}
.header__btn #index-more-menu .tab-btn:before {
  content: " ";
  display: inline-block;
  width: 24px;
  height: 24px;
  position: relative;
  top: 7px;
  margin-right: 5px;
}
.header__btn #index-more-menu .tab-btn.preference:before {
  background: var(--icon-preferences, url(../img/svg/Preferences.svg));
}
.header__btn #index-more-menu .tab-btn.about:before {
  background: var(--icon-about, url(../img/svg/About.svg));
}
.header__btn #index-more-menu .tab-btn.tutorial:before {
  background: var(--icon-tutorial, url(../img/svg/Tutorial.svg));
}
.header__btn #index-more-menu .tab-btn.feedback:before {
  background: var(--icon-feedback, url(../img/svg/Feedback.svg));
}
.header__btn #index-more-menu .tab-btn.pattern:before {
  background: var(--icon-pattern, url(../img/svg/BackGlobal.svg));
}
.header__btn #index-more-menu .tab-btn:hover {
  background-color: var(--dropdown-bg-hover, #ffffff);
  color: var(--dropdown-color-hover, #0492EB);
}
.header__btn #index-more-menu .tab-btn:hover.preference:before {
  background: var(--icon-preferences-hover, url(../img/svg/PreferencesHover.svg));
}
.header__btn #index-more-menu .tab-btn:hover.about:before {
  background: var(--icon-about-hover, url(../img/svg/AboutHover.svg));
}
.header__btn #index-more-menu .tab-btn:hover.tutorial:before {
  background: var(--icon-tutorial-hover, url(../img/svg/TutorialHover.svg));
}
.header__btn #index-more-menu .tab-btn:hover.feedback:before {
  background: var(--icon-feedback-hover, url(../img/svg/BackGlobalHover.svg));
}
.header__btn #index-more-menu .tab-btn:hover.pattern:before {
  background: url(../img/svg/BackGlobalHover.svg);
}

.header__site .combobox-container.none-selected .combobox-text {
  color: var(--s-color-text-primary, #212121);
}

.header__site .widget-fieldlabel.combobox-fieldlabel {
  font-size: 16px;
}

.header__site .combobox-wrap.widget-wrap {
  width: 200px;
  background: var(--tag-background-primary, rgba(73, 84, 107, 0.08));
  border: 1px solid transparent;
}

.switch-site {
  color: #0492EB;
  cursor: pointer;
}

.pro-site-combobox .combobox-text {
  position: relative;
  padding-right: 35px;
  white-space: normal;
}
.pro-site-combobox .combobox-text::after {
  position: absolute;
  right: 0;
  top: 3px;
  content: "";
  background-image: url("../img/pro-site.svg");
  width: 32px;
  height: 20px;
}

#global-combobox-options[data-shown=userSites] .ps__rail-y,
#global-combobox-options[data-shown=hotspotSites] .ps__rail-y,
#global-combobox-options[data-shown=userCustomers] .ps__rail-y {
  opacity: 0.7 !important;
}
#global-combobox-options[data-shown=userSites] ul.combobox-list,
#global-combobox-options[data-shown=hotspotSites] ul.combobox-list,
#global-combobox-options[data-shown=userCustomers] ul.combobox-list {
  margin-bottom: 6px;
}
#global-combobox-options[data-shown=userSites] li.combobox-list:hover .combobox-label span.icon,
#global-combobox-options[data-shown=hotspotSites] li.combobox-list:hover .combobox-label span.icon,
#global-combobox-options[data-shown=userCustomers] li.combobox-list:hover .combobox-label span.icon {
  cursor: pointer;
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translate(0, -50%);
}
#global-combobox-options[data-shown=userSites] li.combobox-list:hover .combobox-label.star span.icon,
#global-combobox-options[data-shown=hotspotSites] li.combobox-list:hover .combobox-label.star span.icon,
#global-combobox-options[data-shown=userCustomers] li.combobox-list:hover .combobox-label.star span.icon {
  background: url(../img/svg/star.svg) no-repeat;
}
#global-combobox-options[data-shown=userSites] li.combobox-list:hover .combobox-label.unstar span.icon,
#global-combobox-options[data-shown=hotspotSites] li.combobox-list:hover .combobox-label.unstar span.icon,
#global-combobox-options[data-shown=userCustomers] li.combobox-list:hover .combobox-label.unstar span.icon {
  background: url(../img/svg/unstar.svg) no-repeat;
}
#global-combobox-options[data-shown=userSites] .combobox-list-wrap,
#global-combobox-options[data-shown=hotspotSites] .combobox-list-wrap,
#global-combobox-options[data-shown=userCustomers] .combobox-list-wrap {
  width: 240px !important;
}
#global-combobox-options[data-shown=userSites] .combobox-list-wrap .combobox-label,
#global-combobox-options[data-shown=hotspotSites] .combobox-list-wrap .combobox-label,
#global-combobox-options[data-shown=userCustomers] .combobox-list-wrap .combobox-label {
  line-height: 18px;
}
#global-combobox-options[data-shown=userSites] .combobox-list-wrap:first-child,
#global-combobox-options[data-shown=hotspotSites] .combobox-list-wrap:first-child,
#global-combobox-options[data-shown=userCustomers] .combobox-list-wrap:first-child {
  margin-bottom: 10px;
}
#global-combobox-options[data-shown=userSites] .combobox-list-editor-wrap,
#global-combobox-options[data-shown=hotspotSites] .combobox-list-editor-wrap,
#global-combobox-options[data-shown=userCustomers] .combobox-list-editor-wrap {
  border-top: 1px solid var(--s-color-text-split, #EBECED);
}
#global-combobox-options[data-shown=userSites] .combobox-list-editor-wrap .top-slot,
#global-combobox-options[data-shown=hotspotSites] .combobox-list-editor-wrap .top-slot,
#global-combobox-options[data-shown=userCustomers] .combobox-list-editor-wrap .top-slot {
  border-bottom: 1px solid var(--s-color-text-split, #EBECED);
}
#global-combobox-options[data-shown=userSites] .combobox-list-editor-wrap .top-slot .favorite-sites-title,
#global-combobox-options[data-shown=hotspotSites] .combobox-list-editor-wrap .top-slot .favorite-sites-title,
#global-combobox-options[data-shown=userCustomers] .combobox-list-editor-wrap .top-slot .favorite-sites-title {
  padding: 0px 14px;
  font-size: 12px;
  color: var(--tab-color-primary, #868E93);
}
#global-combobox-options[data-shown=userSites] .combobox-list-editor-wrap .top-slot .global-title,
#global-combobox-options[data-shown=userSites] .combobox-list-editor-wrap .top-slot .msp-title,
#global-combobox-options[data-shown=hotspotSites] .combobox-list-editor-wrap .top-slot .global-title,
#global-combobox-options[data-shown=hotspotSites] .combobox-list-editor-wrap .top-slot .msp-title,
#global-combobox-options[data-shown=userCustomers] .combobox-list-editor-wrap .top-slot .global-title,
#global-combobox-options[data-shown=userCustomers] .combobox-list-editor-wrap .top-slot .msp-title {
  color: var(--s-color-text-link);
  padding: 8px 24px 7px 16px;
  font-weight: bold;
  border-bottom: 1px solid var(--s-color-text-split, #EBECED);
}
#global-combobox-options[data-shown=userSites] .combobox-list-editor-wrap .top-slot .global-switch,
#global-combobox-options[data-shown=userSites] .combobox-list-editor-wrap .top-slot .msp-switch,
#global-combobox-options[data-shown=hotspotSites] .combobox-list-editor-wrap .top-slot .global-switch,
#global-combobox-options[data-shown=hotspotSites] .combobox-list-editor-wrap .top-slot .msp-switch,
#global-combobox-options[data-shown=userCustomers] .combobox-list-editor-wrap .top-slot .global-switch,
#global-combobox-options[data-shown=userCustomers] .combobox-list-editor-wrap .top-slot .msp-switch {
  cursor: pointer;
}
#global-combobox-options[data-shown=userSites] .combobox-list-editor-wrap .top-slot .global-switch:hover,
#global-combobox-options[data-shown=userSites] .combobox-list-editor-wrap .top-slot .msp-switch:hover,
#global-combobox-options[data-shown=hotspotSites] .combobox-list-editor-wrap .top-slot .global-switch:hover,
#global-combobox-options[data-shown=hotspotSites] .combobox-list-editor-wrap .top-slot .msp-switch:hover,
#global-combobox-options[data-shown=userCustomers] .combobox-list-editor-wrap .top-slot .global-switch:hover,
#global-combobox-options[data-shown=userCustomers] .combobox-list-editor-wrap .top-slot .msp-switch:hover {
  color: var(--s-color-text-hover, #04b0ff);
}
#global-combobox-options[data-shown=userSites] .combobox-list-editor-wrap li label,
#global-combobox-options[data-shown=hotspotSites] .combobox-list-editor-wrap li label,
#global-combobox-options[data-shown=userCustomers] .combobox-list-editor-wrap li label {
  display: block;
  padding: 5px 16px 5px 10px;
  line-height: 1.14;
  white-space: nowrap;
  position: relative;
}
#global-combobox-options[data-shown=userSites] .combobox-list-editor-wrap li.favorite-sites label,
#global-combobox-options[data-shown=hotspotSites] .combobox-list-editor-wrap li.favorite-sites label,
#global-combobox-options[data-shown=userCustomers] .combobox-list-editor-wrap li.favorite-sites label {
  word-break: break-all;
  white-space: normal;
  cursor: pointer;
  display: block;
  padding: 8px 24px 7px 16px;
  line-height: 18px;
  position: relative;
}
#global-combobox-options[data-shown=userSites] .combobox-list-editor-wrap li.favorite-sites label:hover,
#global-combobox-options[data-shown=hotspotSites] .combobox-list-editor-wrap li.favorite-sites label:hover,
#global-combobox-options[data-shown=userCustomers] .combobox-list-editor-wrap li.favorite-sites label:hover {
  background-color: var(--select-background-hover, #F2F3F5);
}
#global-combobox-options[data-shown=userSites] .combobox-list-editor-wrap li.favorite-sites label span.icon,
#global-combobox-options[data-shown=hotspotSites] .combobox-list-editor-wrap li.favorite-sites label span.icon,
#global-combobox-options[data-shown=userCustomers] .combobox-list-editor-wrap li.favorite-sites label span.icon {
  cursor: pointer;
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 16px;
  background: url(../img/svg/star.svg) no-repeat;
  top: 50%;
  transform: translate(0, -50%);
}
#global-combobox-options[data-shown=userSites] .combobox-list-editor-wrap li.site-management,
#global-combobox-options[data-shown=hotspotSites] .combobox-list-editor-wrap li.site-management,
#global-combobox-options[data-shown=userCustomers] .combobox-list-editor-wrap li.site-management {
  margin-top: 5px;
}
#global-combobox-options[data-shown=userSites] .combobox-list-editor-wrap li.site-management span.icon,
#global-combobox-options[data-shown=hotspotSites] .combobox-list-editor-wrap li.site-management span.icon,
#global-combobox-options[data-shown=userCustomers] .combobox-list-editor-wrap li.site-management span.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/SelectIconSiteManage.svg) no-repeat;
}
#global-combobox-options[data-shown=userSites] .combobox-list-editor-wrap li.add-new-site span.icon,
#global-combobox-options[data-shown=hotspotSites] .combobox-list-editor-wrap li.add-new-site span.icon,
#global-combobox-options[data-shown=userCustomers] .combobox-list-editor-wrap li.add-new-site span.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: var(--icon-select-add, url(../img/svg/SelectIconAdd.svg)) no-repeat;
}
#global-combobox-options[data-shown=userSites] .combobox-list-editor-wrap li.import-site span.icon,
#global-combobox-options[data-shown=hotspotSites] .combobox-list-editor-wrap li.import-site span.icon,
#global-combobox-options[data-shown=userCustomers] .combobox-list-editor-wrap li.import-site span.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/SelectIconImportSite.svg) no-repeat;
}
#global-combobox-options[data-shown=userSites] .combobox-list-editor-wrap li.hotspot-management span.icon,
#global-combobox-options[data-shown=hotspotSites] .combobox-list-editor-wrap li.hotspot-management span.icon,
#global-combobox-options[data-shown=userCustomers] .combobox-list-editor-wrap li.hotspot-management span.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: var(--icon-hotspot, url(../img/svg/SelectIconHotspotManager.svg)) no-repeat;
}
#global-combobox-options[data-shown=userSites] .hotspot-management,
#global-combobox-options[data-shown=hotspotSites] .hotspot-management,
#global-combobox-options[data-shown=userCustomers] .hotspot-management {
  border-top: 1px solid var(--s-color-text-split, #EBECED);
  padding-top: 4px;
}

#customer-combobox-options[data-shown=userCustomersSites] .combobox-list-wrap {
  width: 480px !important;
}
#customer-combobox-options[data-shown=userCustomersSites] .customer-wrap,
#customer-combobox-options[data-shown=userCustomersSites] .site-wrap {
  border-right: 1px solid #EBECED;
  width: 240px;
  position: relative;
  margin-top: 10px;
  vertical-align: top;
  display: inline-block;
}
#customer-combobox-options[data-shown=userCustomersSites].none-customer-search-result .customer-wrap .combobox-no-search-result-tip, #customer-combobox-options[data-shown=userCustomersSites].none-site-search-result .site-wrap .combobox-no-search-result-tip {
  display: block;
  white-space: normal;
}
#customer-combobox-options[data-shown=userCustomersSites].none-items div.combobox-empty-tip,
#customer-combobox-options[data-shown=userCustomersSites] .site-wrap div.site-empty-tip {
  display: block;
  opacity: 0.6;
  padding: 8px 24px 7px 16px;
  line-height: 1.14;
}
#customer-combobox-options[data-shown=userCustomersSites].none-items .site-wrap,
#customer-combobox-options[data-shown=userCustomersSites].none-items .customer-wrap {
  display: none;
}
#customer-combobox-options[data-shown=userCustomersSites] .combobox-search-box .widget-wrap {
  width: 210px;
}
#customer-combobox-options[data-shown=userCustomersSites] div.combobox-search-box-icon {
  position: absolute;
  right: 30px/2;
  top: 3px;
}
#customer-combobox-options[data-shown=userCustomersSites] li.combobox-list .combobox-label {
  word-break: normal;
  white-space: normal;
}
#customer-combobox-options[data-shown=userCustomersSites] li.combobox-list span.has-sub-icon {
  right: 5px;
}
#customer-combobox-options[data-shown=userCustomersSites] li.combobox-list.unstar:hover .combobox-label span.icon, #customer-combobox-options[data-shown=userCustomersSites] li.combobox-list.star .combobox-label span.icon {
  cursor: pointer;
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translate(0, -50%);
}
#customer-combobox-options[data-shown=userCustomersSites] .site-wrap li.combobox-list.unstar:hover .combobox-label span.icon, #customer-combobox-options[data-shown=userCustomersSites] .site-wrap li.combobox-list.star .combobox-label span.icon {
  right: 14px;
}
#customer-combobox-options[data-shown=userCustomersSites] .favorite-site-list {
  border-bottom: 1px solid var(--s-color-text-split, #EBECED);
}
#customer-combobox-options[data-shown=userCustomersSites] .favorite-title {
  padding: 0px 14px;
  font-size: 12px;
  color: var(--tab-color-primary, #868E93);
}
#customer-combobox-options[data-shown=userCustomersSites] .combobox-list-editor-wrap .top-slot {
  border-bottom: 1px solid var(--s-color-text-split, #EBECED);
}
#customer-combobox-options[data-shown=userCustomersSites] .combobox-list-editor-wrap .top-slot .msp-title {
  color: var(--s-color-text-link);
  padding: 8px 24px 7px 16px;
  font-weight: bold;
  border-bottom: 1px solid var(--s-color-text-split, #EBECED);
  cursor: pointer;
}
#customer-combobox-options[data-shown=userCustomersSites] .combobox-list-editor-wrap .top-slot .msp-title:hover {
  color: var(--s-color-text-hover, #04b0ff);
}
#customer-combobox-options[data-shown=userCustomersSites] .combobox-list-editor-wrap li label {
  display: block;
  padding: 5px 16px 5px 16px;
  line-height: 1.14;
  white-space: nowrap;
  position: relative;
}
#customer-combobox-options[data-shown=userCustomersSites] .combobox-list-editor-wrap li.favorite-customers label:hover {
  background-color: var(--select-background-hover, #F2F3F5);
  cursor: pointer;
}
#customer-combobox-options[data-shown=userCustomersSites].cascader .combobox-list-editor-wrap {
  display: block;
}
#customer-combobox-options[data-shown=userCustomersSites].cascader ul.combobox-list,
#customer-combobox-options[data-shown=userCustomersSites].cascader ul.combobox-list-2 {
  width: 240px;
}

.header__right {
  justify-self: flex-end;
  position: relative;
  height: 100%;
  font-size: 0;
  flex-shrink: 0;
}
.header__right:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}

.header__refresh,
.header__tools,
.header__logout {
  margin: 0 6px;
  height: 36px;
  width: 36px;
  border-radius: 5px;
  background-repeat: no-repeat;
}

.header__refresh .combobox-wrap {
  height: 36px;
  width: 36px;
  display: inline-block;
  border: none;
}

.header__refresh .combobox-text {
  visibility: hidden;
}

.header-refresh-tip {
  width: 120px;
}

.header .widget-container {
  margin-bottom: 0;
}

#autoRefresh .combobox-switch {
  display: none;
}

#global-combobox-options[data-shown=autoRefresh] {
  width: 140px;
  font-size: 12px;
  letter-spacing: -0.1px;
}
#global-combobox-options[data-shown=autoRefresh] .combobox-list-wrap {
  margin-top: 8px !important;
}
#global-combobox-options[data-shown=autoRefresh] .combobox-label {
  padding: 0 4px 0 4px;
}
#global-combobox-options[data-shown=autoRefresh] .combobox-checkbox {
  margin: 0;
}

.header__nav {
  display: none !important;
  z-index: 4;
  border: 0 solid var(--tab-color-primary, #868E93);
  box-shadow: 2px 2px 8px 0 rgba(54, 62, 77, 0.05);
  position: absolute;
  margin-top: -56px;
  padding-top: 66px;
  height: 100%;
  background: var(--s-background-side, #FFFFFF);
  max-width: 56px;
  -webkit-transition: all 0.4s, -webkit-transform 0.4s linear;
  transition: all 0.4s, transform 0.4s linear, -webkit-transform 0.4s cubic-bezier linear;
}
.header__nav.level1:not(.fixed):hover {
  max-width: 230px;
}
.header__nav.level2 {
  padding-top: 56px;
  z-index: 3;
  max-width: 200px;
  display: none;
  background-color: var(--s-background-side, #FFFFFF);
  margin-left: 56px;
}
.header__nav.level2.active {
  display: block;
}
.header__nav .navigator-bottom.static {
  position: static;
}

.dark .header__nav {
  border-right: 0.5px solid rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

#menu .widget-wrap-outer,
#hotspotMenu .widget-wrap-outer {
  display: block;
}
#menu .navigator-li-level1,
#menu .navigator-li-level2,
#hotspotMenu .navigator-li-level1,
#hotspotMenu .navigator-li-level2 {
  position: relative;
  overflow: hidden;
}
#menu .navigator-li-level1:hover,
#menu .navigator-li-level2:hover,
#hotspotMenu .navigator-li-level1:hover,
#hotspotMenu .navigator-li-level2:hover {
  background: rgba(4, 146, 235, 0.08);
  z-index: 1;
}
#menu .navigator-li-level1.selected,
#menu .navigator-li-level2.selected,
#hotspotMenu .navigator-li-level1.selected,
#hotspotMenu .navigator-li-level2.selected {
  z-index: 2;
  background: rgba(4, 146, 235, 0.08);
  border-right: 4px solid #0492EB;
}

#secondMenu .navigator-category {
  display: flex;
  align-items: center;
  list-style-type: none;
  font-size: 15px;
  text-align: left;
  margin: 0 16px;
  height: 48px;
  border-bottom: solid 1px var(--s-color-text-split, #EBECED);
  color: var(--s-color-sidebar-note, rgba(33, 33, 33, 0.5));
}
#secondMenu .navigator-li-level1 {
  position: relative;
  overflow: hidden;
}
#secondMenu .navigator-li-level1 > a {
  width: 200px;
}
#secondMenu .navigator-li-level1:hover > a {
  background: rgba(4, 146, 235, 0.08);
  z-index: 1;
}
#secondMenu .navigator-li-level1.selected > a {
  z-index: 2;
  border-right: 4px solid #0492EB;
}
#secondMenu .navigator-li.navigator-li-level1 .sub-navigator-text {
  white-space: normal;
  display: inline-block;
}

#menu [navi-value] a,
#secondMenu [navi-value] a {
  text-align: left;
  padding-left: 16px;
}
#menu [navi-value] .sub-navigator-text,
#secondMenu [navi-value] .sub-navigator-text {
  margin-left: 41px;
  white-space: nowrap;
}
#menu [navi-value] .sub-navigator-icon,
#secondMenu [navi-value] .sub-navigator-icon {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  display: inline-block;
  width: 24px;
  height: 24px;
}
#menu .navigator-li.navigator-li-level1 .sub-navigator-text,
#menu .navigator-li.navigator-li-level2 .sub-navigator-text,
#secondMenu .navigator-li.navigator-li-level1 .sub-navigator-text,
#secondMenu .navigator-li.navigator-li-level2 .sub-navigator-text {
  margin-right: 4px;
}
#menu .navigator-li.navigator-li-level1.has-sub-navi > a .sub-navigator-text,
#secondMenu .navigator-li.navigator-li-level1.has-sub-navi > a .sub-navigator-text {
  margin-right: 24px;
}

.maintain-tip-container {
  display: none;
  padding: 16px 0;
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  bottom: -12px;
  width: 100%;
  z-index: 1000;
}
.maintain-tip-container.show {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.maintain-tip-container .maintain-tip {
  font-size: 13px;
  color: #ffffff;
  margin-bottom: 0;
  margin-left: 30px;
}
.maintain-tip-container .maintain-close-icon {
  flex: 0 0 auto;
  margin-right: 30px;
}

#hotspotLoginView,
#resetView {
  height: 100%;
  min-width: 290px;
  position: relative;
}

#hotspotLoginView .login-title {
  top: 19.6%;
}
#hotspotLoginView .sub-title {
  margin-top: 60px;
  font-size: 13px;
  color: var(--tab-color-primary, #868E93) !important;
}
#hotspotLoginView .login-form {
  top: 33.9%;
}

#ceip-msg .msg-content-container {
  padding: 0;
}
#ceip-msg .msg-title {
  padding: 21px 0;
  height: 64px;
  text-align: center;
  border-bottom: 1px solid var(--s-color-text-primary, #212121);
}
#ceip-msg .msg-title .msg-title-container:before {
  display: none;
}
#ceip-msg .msg-btn-wrap {
  text-align: center;
}
#ceip-msg #ceip-iframe {
  border: none;
}

#setupAps .widget-fieldlabel-wrap {
  display: inline-block;
}
#setupAps .paging-go .text-container .text-wrap {
  width: 50px;
}

.page-container {
  padding: 10px 30px 20px 30px;
}

.ssl-vpn-page {
  min-width: 970px;
}

#page-content .panel-content {
  padding-top: 18px;
}

#page-top-container {
  height: 24px;
  padding-right: 30px;
  display: none;
  margin-top: 10px;
  margin-bottom: 8px;
}
#page-top-container #help-btn {
  float: right;
  margin-bottom: 0;
  display: none;
}
#page-top-container #drawer-btn {
  float: right;
  margin-bottom: 0;
  display: none;
}
#page-top-container .help-btn-hide {
  display: none !important;
}

.page-top-tab,
.page-top-wrapper {
  margin-top: 16px;
  position: absolute;
  top: 0;
}

.statistics-page,
.access-point {
  min-width: 1200px;
}

.clients-page {
  min-width: 1600px;
}

.map-header__right .combobox-container {
  margin-right: 4px;
  color: #7D7E80;
}
.map-header__right .combobox-container .combobox-wrap {
  width: 144px;
}
.map-header__right .combobox-container .combobox-wrap input {
  color: #7D7E80;
}
.map-header__right .button-button {
  font-size: 14px;
  width: 120px;
}

.map-scale-conf {
  background: #ffffff;
  padding: 20px 15px 8px;
  width: 285px;
}
.map-scale-conf .button-container {
  margin: 12px 8px 0 0;
}
.map-scale-conf .text-container .text-wrap {
  width: 90px;
}
.map-scale-conf .combobox-container {
  margin-left: 8px;
}
.map-scale-conf .combobox-container .combobox-wrap {
  width: 90px;
}

.map-entry {
  min-width: 640px;
}

.statistics-container .hidden {
  display: none !important;
}

.statistics-change-padding {
  padding: 0 30px 20px;
}

.statistics-change-top-margin {
  padding-top: 20px;
}

#statistics-tab .tab-btn:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}

.statistics-opt-bar > div {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0;
  margin-right: 10px;
}

.statistics-device-combo .combobox-text {
  position: relative;
}
.statistics-device-combo .combobox-text.empty:before, .statistics-device-combo .combobox-text.empty:after {
  display: none;
}
.statistics-device-combo .combobox-text:before {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 26px;
  height: 26px;
  margin-right: 18px;
}
.statistics-device-combo .combobox-text:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  position: absolute;
  left: 30px;
  top: 9px;
}
.statistics-device-combo .combobox-text.disconnected:after {
  background-color: #FF2954;
}
.statistics-device-combo .combobox-text.connected:after {
  background-color: #0DC901;
}
.statistics-device-combo .combobox-text.isolated:after, .statistics-device-combo .combobox-text.pending:after {
  background-color: #0492EB;
}
.statistics-device-combo .combobox-text.heartbeatMissed:after {
  background-color: #FF9500;
}

#global-combobox-options[data-shown=performance-device-combo] .combobox-list-wrap .combobox-list .icon,
#global-combobox-options[data-shown=switch-stas-device-combo] .combobox-list-wrap .combobox-list .icon {
  margin-right: 5px;
}
#global-combobox-options[data-shown=performance-device-combo] .combobox-list-wrap .combobox-list .text:before,
#global-combobox-options[data-shown=switch-stas-device-combo] .combobox-list-wrap .combobox-list .text:before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  margin-right: 5px;
}
#global-combobox-options[data-shown=performance-device-combo] .combobox-list-wrap .combobox-list.disconnected .text:before,
#global-combobox-options[data-shown=switch-stas-device-combo] .combobox-list-wrap .combobox-list.disconnected .text:before {
  background-color: #FF2954;
}
#global-combobox-options[data-shown=performance-device-combo] .combobox-list-wrap .combobox-list.connected .text:before,
#global-combobox-options[data-shown=switch-stas-device-combo] .combobox-list-wrap .combobox-list.connected .text:before {
  background-color: #0DC901;
}
#global-combobox-options[data-shown=performance-device-combo] .combobox-list-wrap .combobox-list.isolated .text:before, #global-combobox-options[data-shown=performance-device-combo] .combobox-list-wrap .combobox-list.pending .text:before,
#global-combobox-options[data-shown=switch-stas-device-combo] .combobox-list-wrap .combobox-list.isolated .text:before,
#global-combobox-options[data-shown=switch-stas-device-combo] .combobox-list-wrap .combobox-list.pending .text:before {
  background-color: #0492EB;
}
#global-combobox-options[data-shown=performance-device-combo] .combobox-list-wrap .combobox-list.heartbeatMissed .text:before,
#global-combobox-options[data-shown=switch-stas-device-combo] .combobox-list-wrap .combobox-list.heartbeatMissed .text:before {
  background-color: #FF9500;
}
#global-combobox-options[data-shown=performance-device-combo] .combobox-list-wrap .combobox-list .supplement,
#global-combobox-options[data-shown=switch-stas-device-combo] .combobox-list-wrap .combobox-list .supplement {
  position: absolute;
  right: 24px;
  min-width: 100px;
  height: 30px;
  line-height: 30px;
}

.statistics-legend-container {
  line-height: 30px;
  position: absolute;
  right: 0;
  top: 0;
}
.statistics-legend-container .legend-item {
  margin-right: 10px;
}
.statistics-legend-container .legend-item .text {
  margin-left: 3px;
  vertical-align: middle;
}

.statistics-charts-container .charts-title {
  position: relative;
}
.statistics-charts-container .charts-icons {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  font-size: 0;
}
.statistics-charts-container .charts-icons.client .spot {
  display: none;
}
.statistics-charts-container .charts-icons.client .icon {
  margin-right: 0;
}
.statistics-charts-container .charts-icons .icon {
  width: 30px;
  height: 30px;
  margin-right: 5px;
}
.statistics-charts-container .charts-icons .spot {
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  border-radius: 100%;
}
.statistics-charts-container .charts-icons.disconnected .spot {
  background-color: #FF2954;
}
.statistics-charts-container .charts-icons.connected .spot {
  background-color: #0DC901;
}
.statistics-charts-container .charts-icons.isolated .spot, .statistics-charts-container .charts-icons.pending .spot {
  background-color: #0492EB;
}
.statistics-charts-container .charts-icons.heartbeatMissed .spot {
  background-color: #FF9500;
}
.statistics-charts-container .title-text {
  margin-bottom: 0;
  display: inline-block;
  font-size: 15px;
  font-weight: bold;
  vertical-align: middle;
}
.statistics-charts-container .title-text a {
  text-decoration: unset;
  color: unset;
}
.statistics-charts-container .charts-split-line {
  height: 1px;
  background: var(--components-border-primary, #BEC3C5);
  margin-bottom: 12px;
}

.port-status-container.switch-stas-port-status {
  width: 500px;
  margin: 20px auto 30px;
  border: 1px solid rgba(73, 84, 107, 0.9);
  border-radius: 5px;
  padding: 20px;
}
.port-status-container.switch-stas-port-status .icon,
.port-status-container.switch-stas-port-status .icon-outer {
  display: inline-block;
  vertical-align: middle;
}
.port-status-container.switch-stas-port-status .icon-outer {
  text-indent: unset;
}
.port-status-container.switch-stas-port-status .disabled .icon-outer {
  background-color: #AEB4B7 !important;
}
.port-status-container.switch-stas-port-status .gbps .icon-outer {
  background-color: #0DC901;
}
.port-status-container.switch-stas-port-status .mbps .icon-outer {
  background-color: #FF9500;
}
.port-status-container.switch-stas-port-status .gbps2 .icon-outer {
  background-color: #00CFD9;
}
.port-status-container.switch-stas-port-status .gbps10 .icon-outer {
  background-color: #0093F3;
}
.port-status-container.switch-stas-port-status .gbps5 .icon-outer {
  background-color: #00C5FF;
}
.port-status-container.switch-stas-port-status .disconnected .icon-outer {
  background-color: rgba(73, 84, 107, 0.9);
}
.port-status-container.switch-stas-port-status .port-info-container table {
  width: 100%;
}
.port-status-container.switch-stas-port-status .legend-info-outer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}
.port-status-container.switch-stas-port-status .info-item-container {
  font-size: 0;
  padding: 0 2px;
  margin: 2px 0;
  white-space: nowrap;
  width: 33%;
}
.port-status-container.switch-stas-port-status .info-item-container .text {
  vertical-align: middle;
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
}
.port-status-container.switch-stas-port-status .info-item-container .icon,
.port-status-container.switch-stas-port-status .info-item-container .icon-outer {
  width: 12px;
  height: 12px;
}
.port-status-container.switch-stas-port-status .info-item-container .icon-outer {
  margin: 2px 4px 2px 2px;
}
.port-status-container.switch-stas-port-status .info-item-container.wan .icon,
.port-status-container.switch-stas-port-status .info-item-container.wan .icon-outer, .port-status-container.switch-stas-port-status .info-item-container.lan .icon,
.port-status-container.switch-stas-port-status .info-item-container.lan .icon-outer, .port-status-container.switch-stas-port-status .info-item-container.poe .icon,
.port-status-container.switch-stas-port-status .info-item-container.poe .icon-outer, .port-status-container.switch-stas-port-status .info-item-container.uplink .icon,
.port-status-container.switch-stas-port-status .info-item-container.uplink .icon-outer, .port-status-container.switch-stas-port-status .info-item-container.mirror .icon,
.port-status-container.switch-stas-port-status .info-item-container.mirror .icon-outer, .port-status-container.switch-stas-port-status .info-item-container.stp .icon,
.port-status-container.switch-stas-port-status .info-item-container.stp .icon-outer {
  width: 16px;
  height: 16px;
  margin: 0;
}
.port-status-container.switch-stas-port-status .info-item-container.wan .icon-outer, .port-status-container.switch-stas-port-status .info-item-container.lan .icon-outer, .port-status-container.switch-stas-port-status .info-item-container.poe .icon-outer, .port-status-container.switch-stas-port-status .info-item-container.uplink .icon-outer, .port-status-container.switch-stas-port-status .info-item-container.mirror .icon-outer, .port-status-container.switch-stas-port-status .info-item-container.stp .icon-outer {
  margin-right: 2px;
}
.port-status-container.switch-stas-port-status .port-repeat {
  display: table;
  width: 100%;
  padding: 20px 0;
  text-align: center;
}
.port-status-container.switch-stas-port-status .port-repeat .repeat-item {
  display: table-cell;
  padding-right: 5px;
}
.port-status-container.switch-stas-port-status .port-repeat .port-item .icon,
.port-status-container.switch-stas-port-status .port-repeat .port-item .icon-outer {
  width: 20px;
  height: 20px;
}
.port-status-container.switch-stas-port-status .port-repeat .port-item.light .icon-outer {
  width: 26px;
}
.port-status-container.switch-stas-port-status .port-item {
  position: relative;
  margin-bottom: 12px;
}
.port-status-container.switch-stas-port-status .port-item .text {
  position: absolute;
  width: 100%;
  height: 15px;
  left: 0;
  color: var(--tab-color-primary, #868E93);
}
.port-status-container.switch-stas-port-status .port-item.even-item .text {
  top: -17px;
}
.port-status-container.switch-stas-port-status .port-item.odd-item .text {
  bottom: -17px;
}

.port-chart-container .charts-title > div {
  display: inline-block;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 0;
  vertical-align: middle;
}
.port-chart-container .charts-split-line {
  height: 1px;
}
.port-chart-container .title-text {
  cursor: pointer;
}
.port-chart-container .repeat-item {
  display: inline-block;
  width: 45%;
  margin-right: 3%;
}

.toast-item.visible {
  padding-bottom: 45px;
}
.toast-item.visible .content-container {
  max-height: 360px;
}
.toast-item.visible .sum-title {
  line-height: 16px;
  font-size: 0;
  margin-bottom: 10px;
}
.toast-item.visible .sum-title .icon {
  width: 8px;
  height: 8px;
  margin-right: 6px;
  vertical-align: middle;
  border-radius: 100%;
}
.toast-item.visible .sum-title .text {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
}
.toast-item.visible .sum-title.success .icon {
  background: #0DC901;
}
.toast-item.visible .sum-title.fail .icon {
  background: #FF2954;
}
.toast-item.visible .sum-text-outer {
  max-height: 90px;
}
.toast-item.visible .sum-text {
  padding-left: 14px;
  color: var(--tab-color-primary, #868E93);
}
.toast-item.visible .sum-text .item {
  line-height: 16px;
  margin-bottom: 6px;
  margin-left: 12px;
}
.toast-item.visible .sum-text .circle-index {
  position: relative;
}
.toast-item.visible .sum-text .circle-index:before {
  position: absolute;
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--s-color-text-primary, #212121);
  border-radius: 50%;
  top: 5px;
  left: -12px;
}
.toast-item.visible .fail-container {
  margin-bottom: 20px;
}

.access-point .hidden {
  display: none !important;
}
.access-point .stack-group-btn {
  border-bottom: 1px solid;
  line-height: 16px;
}

div[widget=panel].device-panel {
  padding: 0 0 20px 0;
}

.device-content-outer {
  background: var(--card-primary, #FFFFFF);
  border: 0 solid var(--tab-color-primary, #868E93);
  box-shadow: 2px 2px 5px 0 rgba(54, 62, 77, 0.05);
  border-radius: 3px;
}
.device-content-outer .device-content-tbar {
  padding: 12px 20px;
  margin-bottom: 0;
  position: relative;
}
.device-content-outer .device-content-tbar .active-tab {
  margin-left: 20px;
}
.device-content-outer .device-content-tbar .batch-opt-btns-outer {
  position: absolute;
  top: 12px;
  right: 20px;
  font-size: 0;
  line-height: 28px;
}
.device-content-outer .device-content-tbar .batch-opt-btns-outer .icon {
  cursor: pointer;
}
.device-content-outer .device-content-tbar .batch-opt-btns-outer .split {
  width: 2px;
  background: #AEB4B7;
  display: inline-block;
  height: 18px;
  vertical-align: middle;
  margin-right: 13px;
}
.device-content-outer .device-content-tbar .batch-opt-btns-outer > div {
  font-size: 14px;
  margin-left: 16px;
  vertical-align: middle;
}

#devices-search li.search-list .icon {
  margin-right: 8px;
}
#devices-search .search-wrap {
  width: 290px;
  max-width: 290px;
}

#devices-grid .grid-header.manual-check-header {
  position: relative;
}
#devices-grid .grid-header.manual-check-header .th-addon {
  position: absolute;
  height: 100%;
  left: 93px;
  top: 0;
  font-size: 0;
}
#devices-grid .grid-header.manual-check-header .th-addon:after {
  content: "";
  height: 100%;
  width: 0;
  display: inline-block;
  vertical-align: middle;
}
#devices-grid .grid-header.manual-check-header .th-addon .manual-check {
  display: inline-block;
  vertical-align: middle;
  margin-left: 3px;
}
#devices-grid .grid-header.dueTime .due-tip {
  position: absolute;
  width: 18px;
  height: 18px;
  margin-left: 5px;
  margin-top: -1px;
  background: url(../img/svg/MessageIconInfo.svg) no-repeat;
  cursor: pointer;
}
#devices-grid .grid-panel-selected-container {
  margin-left: 20px;
  margin-right: 0;
}
#devices-grid #devices-grid_paging {
  margin-left: 20px;
}
#devices-grid .grid-content-tr.incompatible {
  background-color: var(--table-background-disabled, #EBECED);
}
#devices-grid .grid-header[name=name],
#devices-grid .grid-content-td-name,
#devices-grid .grid-content-td-check-column,
#devices-grid .grid-header-checkcolumn {
  padding-left: 24px;
}
#devices-grid .health-wrap > span {
  display: inline-block;
  vertical-align: middle;
  word-break: break-word;
}
#devices-grid .health-wrap .point {
  width: 8px;
  height: 8px;
  border-radius: 100%;
  margin-right: 5px;
}
#devices-grid .health-wrap .health-good {
  background: #22B819;
}
#devices-grid .health-wrap .health-fair {
  background: #FFBB00;
}
#devices-grid .health-wrap .health-poor {
  background: #FF2954;
}
#devices-grid .health-wrap .health-no-data {
  background: #BFC3C9;
}
#devices-grid .version-wrap > span {
  display: inline-block;
  vertical-align: middle;
  word-break: break-word;
}
#devices-grid .version-wrap .upgrade-spot {
  width: 8px;
  height: 8px;
  background: #FF2954;
  border-radius: 100%;
  margin-left: 5px;
}
#devices-grid .action-cancel-migrate {
  display: inline-block;
  height: 28px;
  line-height: 28px;
  color: #0492EB;
  font-weight: bold;
  cursor: pointer;
}

#upgrade-device-grid .model-wrap > span,
#schedule-device-grid .model-wrap > span {
  display: inline-block;
  vertical-align: middle;
  word-break: break-word;
}
#upgrade-device-grid .model-wrap .upgrade-spot,
#schedule-device-grid .model-wrap .upgrade-spot {
  width: 8px;
  height: 8px;
  background: #FF2954;
  border-radius: 100%;
  margin-left: 5px;
}

#choose-uplink-msg .msg-wrap {
  width: 1010px;
}

.choose-uplink-grid .grid-header-checkbox {
  display: none;
}
.choose-uplink-grid .recommend {
  margin-left: 10px;
  padding: 0 4px;
  color: #0492EB;
  border: 1px solid #0492EB;
}

.no-device-container {
  padding: 160px;
}
.no-device-container.bg-white {
  background: #FFFFFF;
  border: 0 solid var(--tab-color-primary, #868E93);
  box-shadow: 2px 2px 5px 0 rgba(54, 62, 77, 0.05);
  border-radius: 3px;
}
.no-device-container .img {
  margin-left: auto;
  margin-right: auto;
}
.no-device-container .no-device-title {
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  line-height: 21px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.no-device-container .no-device-content {
  font-size: 14px;
  text-align: center;
  line-height: 20px;
  color: var(--tab-color-primary, #868E93);
  max-width: 700px;
  margin: auto;
}
.no-device-container .cloud-content {
  display: inline-block;
  text-align: left;
}

.devices-tool-container {
  height: 45px;
  position: relative;
  text-align: right;
}
.devices-tool-container:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 38px;
  font-size: 0;
  vertical-align: middle;
}
.devices-tool-container > div {
  vertical-align: middle;
}

.devices-search {
  position: absolute;
  top: 5px;
}

.devices-tab-container .tab-container {
  vertical-align: middle;
}
.devices-tab-container .aps-tab-separator {
  width: 1px;
  height: 20px;
  margin: 0 10px;
  vertical-align: middle;
  background: var(--s-color-text-split, #EBECED);
}
.devices-tab-container .tab-text {
  display: inline-block;
  vertical-align: baseline;
  height: 26px;
  line-height: 26px;
  margin-bottom: 0;
}
.devices-tab-container .round-rec {
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  border-radius: 30%;
  margin-right: 5px;
}
.devices-tab-container .health-good {
  background: #22B819;
}
.devices-tab-container .health-fair {
  background: #FFBB00;
}
.devices-tab-container .health-poor {
  background: #FF2954;
}
.devices-tab-container .health-no-data {
  background: #BFC3C9;
}

#global-combobox-options[data-shown=batch-edit-btn] .combobox-list-wrap {
  width: 165px !important;
}

.batch-edit-outer {
  position: relative;
  padding-right: 30px;
}
.batch-edit-outer .batch-action-text {
  font-weight: bold;
  width: 110px;
  text-align: right;
  color: #0492EB;
  white-space: nowrap;
}
.batch-edit-outer .combobox-container {
  position: absolute;
  width: 100%;
  right: 0;
  top: 0;
}
.batch-edit-outer .combobox-container .combobox-wrap,
.batch-edit-outer .combobox-container .combobox-wrap-outer {
  width: 100%;
  height: 24px;
  line-height: 24px;
  padding: 0;
  font-size: 0;
}
.batch-edit-outer .combobox-container .combobox-wrap-inner,
.batch-edit-outer .combobox-container .combobox-text {
  width: 0;
  height: 24px;
}
.batch-edit-outer .combobox-container .combobox-wrap,
.batch-edit-outer .combobox-container .combobox-wrap-outer, .batch-edit-outer .combobox-container.hover .combobox-wrap,
.batch-edit-outer .combobox-container.hover .combobox-wrap-outer, .batch-edit-outer .combobox-container.focus .combobox-wrap,
.batch-edit-outer .combobox-container.focus .combobox-wrap-outer {
  border-color: transparent;
}
.batch-edit-outer .combobox-switch .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/SidebariconDownBlue.svg) no-repeat;
}
.batch-edit-outer .combobox-switch.arrow-up .icon {
  background: url(../img/svg/SidebariconUpBlue.svg) no-repeat;
}
.batch-edit-outer:hover {
  cursor: pointer;
}
.batch-edit-outer:hover .batch-action-text {
  color: #04B0FF;
}
.batch-edit-outer:hover .combobox-switch .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/SidebariconDownBlueHover.svg) no-repeat;
}
.batch-edit-outer:hover .combobox-switch.arrow-up .icon {
  background: url(../img/svg/SidebariconUpBlueHover.svg) no-repeat;
}

.adopt-cell {
  display: inline-block;
  white-space: nowrap;
}

#ap-upgrade .msg-wrap {
  width: 960px;
}

.status-wrap {
  display: inline-block;
}
.status-wrap .text {
  display: inline-block;
  border: 1px solid;
  vertical-align: middle;
  margin-right: 4px;
  line-height: 20px;
  padding: 0 4px;
  border-radius: 2px;
}
.status-wrap .sprite-ico {
  cursor: default;
  margin: 0 4px 0 0;
}
.status-wrap .migrate-icon {
  margin-right: 0;
}
.status-wrap.normal {
  color: #0492EB;
}
.status-wrap.done, .status-wrap.stack-normal {
  color: #0DC901;
}
.status-wrap.fail, .status-wrap.stack-abnormal {
  color: #FF2954;
}
.status-wrap.warn, .status-wrap.stack-not-ready {
  color: #FF9500;
}
.status-wrap.unactive, .status-wrap.preconfigured {
  color: #6F757B;
}

.btn-adopt.disabled .icon {
  opacity: 0.5;
}

.compatible-icon {
  vertical-align: middle;
  margin-left: 5px;
}
.compatible-icon.incompatible {
  border: 1px solid #FF2954;
  border-radius: 100%;
}

.nonsupport-health-icon {
  vertical-align: middle;
  margin-left: 5px;
}

.device-name {
  vertical-align: middle;
  line-height: 18px;
}

#devices-grid .grid-content-tr.hover {
  cursor: pointer;
}

#devices-grid .grid-content-tr.disabled,
#devices-grid .grid-content-tr.disabled .grid-content-td-action-column {
  cursor: default;
}

.action-adopt {
  vertical-align: middle;
  display: inline-block;
  cursor: pointer;
}

.action-adopt:not(.fail) {
  text-indent: -9999px;
}

.action-adopt.doing,
.action-adopt.done {
  cursor: default;
}

.action-adopt.fail {
  font-size: 15px;
  color: #0492EB;
  font-weight: bold;
  line-height: 24px;
}
.action-adopt.fail:hover {
  color: #04B0FF;
}

.button-container.text-center {
  text-align: center;
}

.device-repeat .aequilate-item-container {
  color: var(--tab-color-primary, #868E93);
  font-size: 15px;
  border-bottom: 1px solid var(--s-color-text-split, #EBECED);
  margin-bottom: 15px;
}
.device-repeat .aequilate-item-container .btn-delete {
  text-align: right;
}
.device-repeat .repeat-item {
  margin-bottom: 15px;
}

#add-device-msg .add-device-tips .paragraph-wrap-outer {
  display: block;
}
#add-device-msg #manually-add-field {
  max-height: 300px;
}
#add-device-msg .download-text {
  padding-left: 210px;
}
#add-device-msg #import-device-file .file-button-container {
  margin-top: 12px;
}

.mask.verify-code-msg, .mask.choose-export-type-msg {
  z-index: 999;
}

#verify-code-msg {
  z-index: 1000;
}
#verify-code-msg .verify-code-img-container {
  display: flex;
  align-items: center;
}
#verify-code-msg .verify-code-img-container .change-verify-code-icon {
  margin-left: 30px;
}

#choose-export-type-msg {
  z-index: 1000;
}
#choose-export-type-msg .file-type .radio-group-wrap {
  display: flex;
}
#choose-export-type-msg .file-type .radio-group-wrap .radio-group-list-wrap:nth-child(2) {
  margin-left: 100px;
}

#upper-limit-msg .msg-content-container {
  padding-bottom: 0;
}
#upper-limit-msg .btn-container {
  margin: 30px 0 36px 0;
  position: relative;
}
#upper-limit-msg .btn-container > .button-container {
  display: inline-block;
  margin-bottom: 0;
}
#upper-limit-msg #force-import-btn {
  position: absolute;
  right: 0;
}

#device-loading-msg .loading-container {
  text-align: center;
  width: 100px;
  margin: 0 auto;
}
#device-loading-msg .loading-container .text {
  margin-top: 20px;
}

#device-summary-msg .msg-title {
  background-color: var(--msg-background-content, #ffffff);
}
#device-summary-msg .msg-content-container {
  padding-top: 0;
}
#device-summary-msg .summary-title-container {
  text-align: center;
  margin-bottom: 20px;
}
#device-summary-msg .summary-title {
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 20px;
}
#device-summary-msg .summary-title .text,
#device-summary-msg .summary-title .icon {
  vertical-align: middle;
}
#device-summary-msg .summary-title .icon {
  margin-right: 5px;
}
#device-summary-msg .sum-status {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  vertical-align: top;
}
#device-summary-msg .sum-status.loading {
  animation: circle 1s infinite linear;
  -webkit-animation: circle 1s infinite linear;
  /* Safari,Chrome */
  background: url(../img/svg/Loading.svg);
}
#device-summary-msg .sum-status.waiting {
  background-image: url(../img/svg/Waiting.svg);
}
#device-summary-msg .sum-text {
  display: inline-block;
  max-width: 180px;
}
#device-summary-msg .sum-text.loading {
  line-height: 20px;
  vertical-align: middle;
  color: var(--s-color-text-primary, #212121);
  color: #0492EB;
}
#device-summary-msg .sum-text.fail {
  padding-top: 3px;
  vertical-align: top;
  color: #FF2954;
}
#device-summary-msg .sum-text.waiting {
  vertical-align: -3px;
}
#device-summary-msg .retry-btn {
  margin-top: 10px;
  font-size: 14px;
  font-weight: bold;
  color: #0492EB;
  display: inline-block;
  cursor: pointer;
}
#device-summary-msg .connect-status {
  display: inline-block;
  padding: 5px 10px;
  height: 24px;
  border-radius: 12px;
}
#device-summary-msg .connect-status.online {
  background: var(--tag-license-bg-on, #CFF4CC);
  color: var(--tag-license-color-on, #15E813);
}
#device-summary-msg .connect-status.offline {
  background: var(--tag-license-bg-off, #e5e5e5);
  color: var(--tag-license-color-off, #bdbdbd);
}
#device-summary-msg .export-failed-device-btn.secondary-button {
  position: absolute;
  right: 24px;
  top: 70px;
}
#device-summary-msg .export-failed-device-btn.secondary-button .button-button {
  border: none;
}
#device-summary-msg .export-failed-device-btn.secondary-button .button-button:hover {
  background: var(--msg-background-content, #ffffff);
}

.action-upgrade.disabled,
.action-reboot.disabled {
  cursor: default;
}

.license-status {
  display: inline-block;
  vertical-align: middle;
  margin: 2px;
  height: 24px;
  line-height: 24px;
  padding: 0 10px;
  border-radius: 11px;
  white-space: nowrap;
}
.license-status.off {
  background: var(--tag-license-bg-off, #e5e5e5);
  color: var(--tag-license-color-off, #A7A9AC);
}
.license-status.on {
  background: var(--tag-license-bg-on, #CFF4CC);
  color: var(--tag-license-color-on, #0DC901);
}
.license-status.notice {
  background: var(--tag-license-bg-notice, #FFEACC);
  color: var(--tag-license-color-notice, #FF9500);
}

.license-due-time.disabled {
  color: #7992aa;
}

.action-active {
  display: inline-block;
  color: #ffffff;
  background: #0492EB;
  line-height: 30px;
  padding: 0 20px;
  border-radius: 3px;
  text-align: center;
  margin: 3px 5px;
  vertical-align: middle;
  font-size: 14px;
  font-weight: bold;
}
.action-active:hover {
  color: #ffffff;
  background: #04B0FF;
}
.action-active.disabled {
  background: var(--tab-color-primary, #868E93);
  cursor: not-allowed;
}

.license-content .license-header {
  position: relative;
}
.license-content .license-header > div {
  vertical-align: middle;
  margin-bottom: 0;
}
.license-content .license-header .choose-title {
  color: var(--s-color-side, #363E4D);
  font-size: 15px;
  font-weight: bold;
}
.license-content .license-header .refresh-icon {
  cursor: pointer;
}
.license-content .license-header .refresh-icon.disabled {
  cursor: default;
}
.license-content .license-header #buy-license-btn {
  margin-right: 5px;
}
.license-content .license-header #buy-license-btn .button-button {
  padding-left: 10px;
  padding-right: 10px;
}
.license-content .license-header .opt-btns-outer {
  position: absolute;
  top: -10px;
  right: 0;
  height: 34px;
  line-height: 34px;
}
.license-content .license-header .opt-btns-outer > div {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0;
}
.license-content .license-header.show-buy-btn .choose-title {
  margin-bottom: 40px;
}
.license-content .license-header.show-buy-btn .opt-btns-outer {
  top: 24px;
}
.license-content .buy-license-btn .button-button {
  background: #0DC901;
}
.license-content .buy-license-btn:hover {
  opacity: 0.8;
}
.license-content .prob-license-btn .button-button {
  background: #ffffff;
  color: #0DC901;
  border: 1px solid #0DC901;
}
.license-content .prob-license-btn:hover {
  opacity: 0.8;
}
.license-content .no-license-wrap {
  text-align: center;
}
.license-content .no-license-wrap .img {
  display: inline-block;
  margin-bottom: 12px;
}
.license-content .no-license-wrap .empty-license-text {
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  line-height: 20px;
  margin-bottom: 15px;
}
.license-content .no-license-wrap .ls-btns-wrap {
  margin-top: 30px;
}
.license-content .no-license-wrap .ls-btns-wrap .button-container {
  display: inline-block;
  margin-right: 10px;
}
.license-content .loading-wrap {
  line-height: 270px;
  text-align: center;
}
.license-content .loading-wrap .img {
  display: inline-block;
}
.license-content .license-wrap {
  width: 380px;
}
.license-content .license-wrap .assgin-license-para {
  margin-bottom: 30px;
}
.license-content .license-wrap .lack-of-license-text {
  line-height: 20px;
  margin-bottom: 12px;
}
.license-content .license-wrap .license-type-wrap {
  margin-bottom: 30px;
}
.license-content .license-wrap .type-item {
  vertical-align: top;
  text-align: center;
  color: var(--tab-color-primary, #868E93);
  margin-bottom: 16px;
  width: 100%;
  position: relative;
}
.license-content .license-wrap .type-item .type {
  border: 1px solid var(--components-border-primary, #bec3c5);
  display: inline-block;
  line-height: 44px;
  width: 100%;
  border-radius: 3px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
}
.license-content .license-wrap .type-item .type .paragraph-wrap-outer {
  width: 100%;
}
.license-content .license-wrap .type-item .type:not(.disabled):hover {
  border-color: #04B0FF;
  color: #04B0FF;
}
.license-content .license-wrap .type-item .type:not(.disabled).active {
  border-color: #0492EB;
  color: #0492EB;
  background: rgba(4, 146, 235, 0.08);
}
.license-content .license-wrap .type-item .type.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.license-content .license-wrap .type-item .num {
  font-size: 16px;
}
.license-content .license-wrap .used-license-wrap {
  border-top: 1px solid #eeeeee;
  padding-top: 15px;
  margin-top: 20px;
  max-height: 200px;
}
.license-content .license-wrap .used-license-wrap .used-license-item {
  display: inline-block;
  width: 100%;
  line-height: 44px;
  padding: 0 10px;
  position: relative;
  margin-bottom: 16px;
  border: 1px solid var(--components-border-primary, #bec3c5);
  border-radius: 3px;
  cursor: pointer;
  color: #a5a8af;
  vertical-align: middle;
}
.license-content .license-wrap .used-license-wrap .used-license-item .time-icon {
  vertical-align: middle;
  margin-right: 3px;
}
.license-content .license-wrap .used-license-wrap .used-license-item .due-time {
  width: auto;
  vertical-align: middle;
  line-height: 44px;
}
.license-content .license-wrap .used-license-wrap .used-license-item .time-outer {
  position: absolute;
  right: 10px;
  line-height: 44px;
}
.license-content .license-wrap .used-license-wrap .used-license-item:not(.disabled):hover {
  border-color: #04B0FF;
  color: #04B0FF;
}
.license-content .license-wrap .used-license-wrap .used-license-item:not(.disabled).active {
  border-color: #0492EB;
  color: #0492EB;
  background: rgba(4, 146, 235, 0.08);
}
.license-content .license-wrap .used-license-wrap .used-license-item.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#get-trial-license-msg .trial-license-wrap {
  text-align: center;
  color: var(--tab-color-primary, #868E93);
  font-size: 15px;
}
#get-trial-license-msg .img {
  margin: 30px auto;
}
#get-trial-license-msg .title {
  color: var(--s-color-text-primary, #212121);
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 12px;
}
#get-trial-license-msg .text {
  margin-bottom: 12px;
}
#get-trial-license-msg .btns-outer {
  text-align: center;
  margin-top: 30px;
}
#get-trial-license-msg .btns-outer .button-container {
  display: inline-block;
}
#get-trial-license-msg .btns-outer .secondary-button {
  margin-left: 10px;
}

.license-status-accor .accordion-sub-title {
  position: absolute;
  right: 26px;
}
.license-status-accor .license-status {
  background: unset;
  margin: 0;
}
.license-status-accor .expired-due-time {
  margin-right: 0 !important;
  width: 100% !important;
}
.license-status-accor .unbind-btn .button-text {
  color: #FF2954;
}
.license-status-accor .unbind-btn:hover .button-text {
  opacity: 0.8;
}
.license-status-accor .due-time-tip.displaylabel-container {
  position: relative;
}
.license-status-accor .due-time-tip.displaylabel-container .tooltip-container {
  position: absolute;
  top: 0;
  right: 20px;
}
.license-status-accor .accordion-item-wrap .displaylabel-container .widget-fieldlabel-wrap {
  height: 24px;
}

.device-active-panel {
  color: var(--s-color-side, #363E4D);
  padding: 10px 16px;
  position: relative;
  background: var(--s-background-panel, #ffffff);
  border-radius: 2px;
}
.device-active-panel .text,
.device-active-panel .status {
  line-height: 24px;
  font-weight: bold;
}
.device-active-panel .status {
  position: absolute;
  right: 16px;
  top: 10px;
}
.device-active-panel .status .license-status {
  background: unset;
  margin: unset;
}

#renew-license-msg {
  top: 60px !important;
  right: 30px !important;
}
#renew-license-msg .button-container {
  margin-left: 0;
}

.drawer-title-container .content,
.drawer-title-container .content > span {
  display: inline-block;
  line-height: 25px;
  vertical-align: middle;
}
.drawer-title-container .content {
  color: var(--s-color-text-primary, #212121);
  border-radius: 2px;
}
.drawer-title-container .status-wrap {
  margin-left: 4px;
  font-size: 0;
}
.drawer-title-container .status-wrap > span {
  height: 20px;
  vertical-align: middle;
}
.drawer-title-container .device-status {
  border: 1px solid;
  font-size: 12px;
  display: inline-block;
  line-height: 18px;
  padding: 1px 4px;
  margin-right: 4px;
}

.drawer-title-container .disconnected {
  color: #FF2954;
}

.drawer-title-container .connected {
  color: #0DC901;
}

.drawer-title-container .pending,
.drawer-title-container .isolated {
  color: #0492EB;
}
.drawer-title-container .pending.failed,
.drawer-title-container .isolated.failed {
  color: #FF2954;
}
.drawer-title-container .pending.warn,
.drawer-title-container .isolated.warn {
  color: #FF9500;
}

.drawer-title-container .heartbeatMissed {
  color: #FF9500;
}

.drawer-container .drawer-tab-container .tab-btn.selected:hover {
  cursor: default;
}
.drawer-container .grid-container .paging-go,
.drawer-container .modal-icon {
  display: none !important;
}
.drawer-container #ap-clients-grid .grid-panel-tbar-container .search-bar-container,
.drawer-container #ap-clients-grid .grid-panel-tbar-container .search-bar-container .searchbar-wrap-outer,
.drawer-container #ap-clients-grid .grid-panel-tbar-container .search-bar-container .text-wrap,
.drawer-container #ap-clients-grid .grid-panel-tbar-container .search-bar-container .text-wrap-outer {
  max-width: none;
  width: 100%;
}
.drawer-container .panel-container.block {
  padding: 20px 16px;
}
.drawer-container.shown .drawer-tab {
  display: inline-block;
  position: absolute;
  top: 56px;
  left: -51px;
}
.drawer-container.shown .drawer-tab .tab-btns {
  box-shadow: -4px 0 3px -5px var(--components-box-shadow, #909090), 0 4px 3px -5px var(--components-box-shadow, #909090);
}
.drawer-container.shown .drawer-tab .tab-btn {
  width: 50px;
  height: 50px;
  margin-left: 0px;
  position: relative;
  background: var(--s-color-background-primary, #FFFFFF);
  padding: 0;
  border-right: 1px solid var(--s-color-background-secondary, #F2F3F5);
  border-bottom: 1px solid var(--s-color-background-secondary, #F2F3F5);
  border-radius: 0;
}
.drawer-container.shown .drawer-tab .tab-btn .text {
  display: none;
}
.drawer-container.shown .drawer-tab .tab-btn[data-name=batch-switch] .text, .drawer-container.shown .drawer-tab .tab-btn[data-name=batch-ap] .text, .drawer-container.shown .drawer-tab .tab-btn[data-name=batch-active] .text, .drawer-container.shown .drawer-tab .tab-btn[data-name=batch-clients] .text {
  display: inline-block;
  position: absolute;
  right: -11px;
  font-size: 12px;
  color: #ffffff;
  width: 32px;
  line-height: 18px;
  text-align: center;
  top: 32px;
  border-radius: 8px;
  background: #FF9500;
}
.drawer-container.shown .drawer-tab .tab-btn[data-name=batch-switch].selected .text, .drawer-container.shown .drawer-tab .tab-btn[data-name=batch-ap].selected .text, .drawer-container.shown .drawer-tab .tab-btn[data-name=batch-active].selected .text, .drawer-container.shown .drawer-tab .tab-btn[data-name=batch-clients].selected .text {
  right: -9px;
}
.drawer-container.shown .drawer-tab .tab-btn .icon {
  display: inline-block;
  position: absolute;
  top: 5px;
  left: 5px;
}
.drawer-container.shown .drawer-tab .tab-btn.selected {
  border: none;
  margin-left: 1px;
  background-color: var(--drawer-menu-selected, #F2F3F5);
  border-bottom: 1px solid var(--s-color-background-secondary, #F2F3F5);
}
.drawer-container.shown .drawer-tab .tab-btn.selected:after {
  left: -2px;
}

.device-settings .hidden {
  display: none !important;
}
.device-settings .port-status-container .icon,
.device-settings .port-status-container .icon-outer,
.device-settings .grid-status-container .icon,
.device-settings .grid-status-container .icon-outer {
  display: inline-block;
  vertical-align: middle;
}
.device-settings .port-status-container .icon-outer,
.device-settings .grid-status-container .icon-outer {
  text-indent: unset;
}
.device-settings .port-status-container .disabled .icon-outer,
.device-settings .grid-status-container .disabled .icon-outer {
  background-color: #AEB4B7 !important;
}
.device-settings .port-status-container .legend-outer,
.device-settings .grid-status-container .legend-outer {
  width: 100%;
}
.device-settings .port-status-container .gbps .icon-outer,
.device-settings .grid-status-container .gbps .icon-outer {
  background-color: #0DC901;
}
.device-settings .port-status-container .mbps .icon-outer,
.device-settings .grid-status-container .mbps .icon-outer {
  background-color: #FF9500;
}
.device-settings .port-status-container .gbps2 .icon-outer,
.device-settings .grid-status-container .gbps2 .icon-outer {
  background-color: #00CFD9;
}
.device-settings .port-status-container .gbps10 .icon-outer,
.device-settings .grid-status-container .gbps10 .icon-outer {
  background-color: #0093F3;
}
.device-settings .port-status-container .gbps5 .icon-outer,
.device-settings .grid-status-container .gbps5 .icon-outer {
  background-color: #00C5FF;
}
.device-settings .port-status-container .disconnected .icon-outer,
.device-settings .grid-status-container .disconnected .icon-outer {
  background-color: rgba(73, 84, 107, 0.9);
}
.device-settings .port-status-container .info-item-container,
.device-settings .grid-status-container .info-item-container {
  font-size: 0;
  padding: 0 2px;
  white-space: nowrap;
}
.device-settings .port-status-container .info-item-container .text,
.device-settings .grid-status-container .info-item-container .text {
  vertical-align: middle;
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
}
.device-settings .port-status-container .info-item-container .icon,
.device-settings .port-status-container .info-item-container .icon-outer,
.device-settings .grid-status-container .info-item-container .icon,
.device-settings .grid-status-container .info-item-container .icon-outer {
  width: 12px;
  height: 12px;
}
.device-settings .port-status-container .info-item-container .icon-outer,
.device-settings .grid-status-container .info-item-container .icon-outer {
  margin: 2px 4px 2px 2px;
}
.device-settings .port-status-container .info-item-container.wan .icon,
.device-settings .port-status-container .info-item-container.wan .icon-outer, .device-settings .port-status-container .info-item-container.lan .icon,
.device-settings .port-status-container .info-item-container.lan .icon-outer, .device-settings .port-status-container .info-item-container.poe .icon,
.device-settings .port-status-container .info-item-container.poe .icon-outer, .device-settings .port-status-container .info-item-container.uplink .icon,
.device-settings .port-status-container .info-item-container.uplink .icon-outer, .device-settings .port-status-container .info-item-container.mirror .icon,
.device-settings .port-status-container .info-item-container.mirror .icon-outer, .device-settings .port-status-container .info-item-container.stp .icon,
.device-settings .port-status-container .info-item-container.stp .icon-outer,
.device-settings .grid-status-container .info-item-container.wan .icon,
.device-settings .grid-status-container .info-item-container.wan .icon-outer,
.device-settings .grid-status-container .info-item-container.lan .icon,
.device-settings .grid-status-container .info-item-container.lan .icon-outer,
.device-settings .grid-status-container .info-item-container.poe .icon,
.device-settings .grid-status-container .info-item-container.poe .icon-outer,
.device-settings .grid-status-container .info-item-container.uplink .icon,
.device-settings .grid-status-container .info-item-container.uplink .icon-outer,
.device-settings .grid-status-container .info-item-container.mirror .icon,
.device-settings .grid-status-container .info-item-container.mirror .icon-outer,
.device-settings .grid-status-container .info-item-container.stp .icon,
.device-settings .grid-status-container .info-item-container.stp .icon-outer {
  width: 16px;
  height: 16px;
  margin: 0;
}
.device-settings .port-status-container .info-item-container.wan .icon-outer, .device-settings .port-status-container .info-item-container.lan .icon-outer, .device-settings .port-status-container .info-item-container.poe .icon-outer, .device-settings .port-status-container .info-item-container.uplink .icon-outer, .device-settings .port-status-container .info-item-container.mirror .icon-outer, .device-settings .port-status-container .info-item-container.stp .icon-outer,
.device-settings .grid-status-container .info-item-container.wan .icon-outer,
.device-settings .grid-status-container .info-item-container.lan .icon-outer,
.device-settings .grid-status-container .info-item-container.poe .icon-outer,
.device-settings .grid-status-container .info-item-container.uplink .icon-outer,
.device-settings .grid-status-container .info-item-container.mirror .icon-outer,
.device-settings .grid-status-container .info-item-container.stp .icon-outer {
  margin-right: 2px;
}
.device-settings .port-status-container .port-repeat,
.device-settings .grid-status-container .port-repeat {
  display: table;
  width: 100%;
  padding: 0 20px;
  text-align: center;
}
.device-settings .port-status-container .port-repeat .repeat-item,
.device-settings .grid-status-container .port-repeat .repeat-item {
  display: table-cell;
  padding-right: 5px;
}
.device-settings .port-status-container .port-repeat .port-item .icon,
.device-settings .port-status-container .port-repeat .port-item .icon-outer,
.device-settings .grid-status-container .port-repeat .port-item .icon,
.device-settings .grid-status-container .port-repeat .port-item .icon-outer {
  width: 20px;
  height: 20px;
}
.device-settings .port-status-container .port-repeat .port-item .icon[data-tip],
.device-settings .port-status-container .port-repeat .port-item .icon-outer[data-tip],
.device-settings .grid-status-container .port-repeat .port-item .icon[data-tip],
.device-settings .grid-status-container .port-repeat .port-item .icon-outer[data-tip] {
  cursor: pointer;
}
.device-settings .port-status-container .port-repeat .port-item.light .icon-outer,
.device-settings .port-status-container .port-repeat .port-item.wider .icon-outer,
.device-settings .grid-status-container .port-repeat .port-item.light .icon-outer,
.device-settings .grid-status-container .port-repeat .port-item.wider .icon-outer {
  width: 26px;
}
.device-settings .gateway-devices-tab {
  display: none;
}
.device-settings .separator {
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #CCD0D1, transparent);
  margin: 12px 0;
}
.device-settings .combination-container .separator {
  margin-left: 3px;
  margin-right: 3px;
  background-image: none;
}
.device-settings .info-container .info-title {
  color: var(--tab-color-primary, #868E93);
}
.device-settings .info-container .info-content {
  line-height: 20px;
}
.device-settings .upload-container {
  position: relative;
}
.device-settings .upload-container .upragde-sm-opts .widget-fieldlabel-wrap {
  line-height: 14px;
}
.device-settings .upload-container .file-wrap-outer.widget-wrap-outer {
  display: block;
}
.device-settings .upload-container .upgrade-btn.absolute {
  position: absolute;
  top: 0;
}
.device-settings .upload-container .upgrade-btn.absolute.single {
  top: 40px;
}
.device-settings .router-path-content {
  padding: 0;
}
.device-settings .combobox-container .widget-fieldlabel-wrap,
.device-settings .text-container .widget-fieldlabel-wrap,
.device-settings .radio-group-container .widget-fieldlabel-wrap,
.device-settings .displaylabel-container .widget-fieldlabel-wrap {
  margin-bottom: 10px;
  width: 100%;
}
.device-settings .combination-container .widget-fieldlabel-wrap,
.device-settings .keywords-container .widget-fieldlabel-wrap,
.device-settings .time-container .widget-fieldlabel-wrap {
  margin-bottom: 10px;
}
.device-settings .displaylabel-container,
.device-settings .display-container {
  width: 47%;
  display: inline-block;
  vertical-align: top;
  margin-right: 5px;
}
.device-settings .displaylabel-container .text-wrap-outer {
  line-height: 20px;
}
.device-settings .displaylabel-container .text-wrap-outer,
.device-settings .displaylabel-container .text-wrap-outer .text-wrap,
.device-settings .displaylabel-container .text-wrap-outer .text-wrap-display {
  vertical-align: bottom;
  width: 100%;
  word-wrap: break-word;
}
.device-settings .display-container .displaylabel-container {
  width: 100%;
}
.device-settings .block-container {
  width: 100%;
}
.device-settings .widget-container .widget-fieldlabel-wrap {
  color: var(--s-color-text-tertiary, #5E696F);
}
.device-settings .batch-upgrade-progress .progressbar-wrap-outer {
  padding-right: 0;
}
.device-settings .device-status-container {
  background: var(--card-primary, #FFFFFF);
  border-radius: 5px;
  margin-bottom: 20px;
}
.device-settings .device-status-container .paragraph-container {
  font-weight: bold;
  font-size: 15px;
  line-height: 20px;
  padding-left: 20px;
  padding-top: 15px;
}
.device-settings #vlan-interface-grid .switch-container {
  margin-bottom: 0;
}
.device-settings #vlan-interface-grid .grid-fixed-container .grid-content-tr.hover {
  background-color: rgba(4, 146, 235, 0.08);
}
.device-settings #vlan-interface-grid .grid-content-td-action-column .td-content {
  border-right: 1px solid var(--tab-color-primary, #868E93);
}
.device-settings #vlan-interface-grid .btn-edit .icon,
.device-settings #vlan-interface-grid .grid-content-btn-edit .icon {
  background-image: none;
}
.device-settings #vlan-interface-grid .hover .grid-content-btn-edit .icon {
  background-image: url(../img/svg/TableIconEdit.svg);
}
.device-settings #vlan-interface-grid .grid-content-td-3 {
  padding-top: 0;
  padding-bottom: 0;
}
.device-settings .vlan-interface-edit-field .dhcp-detail {
  width: auto;
}
.device-settings .vlan-interface-edit-field .vlan-interface-title {
  font-weight: bold;
}
.device-settings .batch-config-grid .grid-content-td-name {
  cursor: pointer;
}
.device-settings .batch-config-grid .device-name {
  border-bottom: 1px solid;
  display: inline-block;
  vertical-align: middle;
}
.device-settings .batch-config-grid span.status-spot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  vertical-align: middle;
  margin-right: 10px;
}
.device-settings .batch-config-grid span.status-spot.disconnected {
  background-color: #FF2954;
}
.device-settings .batch-config-grid span.status-spot.connected {
  background-color: #0DC901;
}
.device-settings .batch-config-grid span.status-spot.isolated {
  background-color: #0492EB;
}
.device-settings .batch-config-grid span.status-spot.pending {
  background-color: #0492EB;
}
.device-settings .batch-config-grid span.status-spot.heartbeatMissed {
  background-color: #FF9500;
}
.device-settings .client-name {
  border-bottom: 1px solid;
  cursor: pointer;
}
.device-settings .device-upgrade-progressbar .progressbar-content {
  width: 320px;
}
.device-settings .gateway-ip {
  margin-left: -90px;
  vertical-align: bottom;
}
.device-settings .widget-tips.textbox-tips .tips-content {
  position: inherit;
  transform: translateY(0);
}
.device-settings .ipv6-container.display-container .widget-wrap-outer.text-wrap-outer {
  display: none;
}
.device-settings .ipv6-container.display-container .displaylabel-container {
  margin-bottom: 0;
}
.device-settings .ipv6-container.display-container .paragraph-wrap-outer {
  word-break: break-all;
  line-height: 20px;
}
.device-settings .ipv6-container.display-container .paragraph-wrap-outer a {
  color: var(--s-color-text-primary, #212121);
  cursor: default;
  text-decoration: none;
}

.gateway-settings .ipv4-label.tab-container .tab-btn[data-name=ipv4] {
  background: unset;
  border: unset;
  color: var(--s-color-text-tertiary, #5E696F);
  padding: 0;
}
.gateway-settings .port-status-container .device-info-items-containner {
  margin: 2px;
}
.gateway-settings .port-status-container .device-info-items-containner .info-item-container {
  display: inline-block;
  width: 32%;
  margin: 2px 0;
}
.gateway-settings .port-status-container .info-item-container {
  padding: 0 12px;
}
.gateway-settings .link-container .paragraph-container {
  color: var(--s-color-text-tertiary, #5E696F);
  line-height: 18px;
}
.gateway-settings .ip-type-outer {
  border-bottom: solid 1px #CCD0D1;
}
.gateway-settings .ip-type-outer .no-ipv6-container {
  text-align: center;
}
.gateway-settings .ip-type-outer .no-ipv6-container .text {
  padding: 10px 0;
}
.gateway-settings .accordion-sub-title {
  position: absolute;
  right: 26px;
}
.gateway-settings .accordion-sub-title .error {
  color: #FF2954;
}
.gateway-settings .accordion-sub-title .done {
  color: #0492EB;
}
.gateway-settings .accordion-sub-title .doing {
  color: #0DC901;
}
.gateway-settings .accordion-sub-title .link-down {
  color: var(--tab-color-primary, #868E93);
}
.gateway-settings .accordion-sub-title .ipv6 {
  margin-left: 5px;
  border-left: 2px solid var(--tab-color-primary, #868E93);
  padding-left: 5px;
}
.gateway-settings #networks-grid .grid-header,
.gateway-settings #networks-grid .grid-content-td {
  padding-right: 0;
}
.gateway-settings .status-error,
.gateway-settings .status-bad {
  color: #FF2954;
}
.gateway-settings .status-high,
.gateway-settings .status-good {
  color: #FF9500;
}
.gateway-settings .status-low,
.gateway-settings .status-supplying {
  color: #0DC901;
}
.gateway-settings .status-stop {
  color: var(--s-color-text-primary, #212121);
}
.gateway-settings .grid-status-container .icon,
.gateway-settings .grid-status-container .icon-outer {
  width: 16px;
  height: 16px;
}
.gateway-settings .repeat-item .button-container {
  margin-right: 8px;
  font-weight: normal;
}
.gateway-settings .repeat-item .button-container .button-button {
  min-width: 25px;
  line-height: 25px;
  background: var(--s-color-text-split, #EBECED);
  color: var(--tab-color-primary, #868E93);
}
.gateway-settings .repeat-item .button-container.selected .button-button {
  background: #0492EB;
  color: #FFFFFF;
}
.gateway-settings .port-select-container {
  border: 1px solid var(--s-color-text-split, #EBECED);
  padding: 12px 10px;
}
.gateway-settings .port-select-container .info-container {
  margin-bottom: 12px;
}
.gateway-settings .port-select-container .info-item {
  margin-right: 10px;
}
.gateway-settings .port-select-container .info-item .icon {
  width: 14px;
  height: 14px;
  background: var(--s-color-text-split, #EBECED);
  vertical-align: middle;
}
.gateway-settings .port-select-container .info-item .text {
  display: inline-block;
  vertical-align: middle;
}
.gateway-settings .port-select-container .info-item.selected .icon {
  background: #0492EB;
}
.gateway-settings .gateway-poe-settings.checkbox-group-container .widget-fieldlabel-wrap {
  margin-bottom: 10px;
}
.gateway-settings .gateway-poe-settings.checkbox-group-container .checkbox-list {
  width: 160px;
}

.switch-settings .hidden {
  display: none !important;
}
.switch-settings .port-operation .tooltip-container {
  position: relative;
  top: 33px;
}
.switch-settings .displaylabel-container.warning .text-wrap {
  color: #FF2954;
}
.switch-settings .port-status-container .port-repeat {
  padding: 20px 0;
}
.switch-settings .port-status-container .port-item {
  position: relative;
  margin-bottom: 12px;
}
.switch-settings .port-status-container .port-item .text {
  position: absolute;
  width: 100%;
  height: 15px;
  left: 0;
  color: var(--tab-color-primary, #868E93);
}
.switch-settings .port-status-container .port-item.even-item .text {
  top: -17px;
}
.switch-settings .port-status-container .port-item.odd-item .text {
  bottom: -17px;
}
.switch-settings .port-status-container .device-info-items-containner {
  margin: 2px;
}
.switch-settings .port-status-container .device-info-items-containner .info-item-container {
  display: inline-block;
  width: 32%;
  margin: 2px 0;
}
.switch-settings .grid-status-container .icon,
.switch-settings .grid-status-container .icon-outer {
  width: 16px;
  height: 16px;
}
.switch-settings .checkbox-container {
  min-width: 150px;
}
.switch-settings .port-select-container {
  border: 1px solid var(--s-color-text-split, #EBECED);
  padding: 12px 10px;
}
.switch-settings .port-select-container .info-container {
  margin-bottom: 12px;
}
.switch-settings .port-select-container .info-item {
  margin-right: 10px;
}
.switch-settings .port-select-container .info-item .icon {
  width: 14px;
  height: 14px;
  background: var(--s-color-text-split, #EBECED);
  vertical-align: middle;
}
.switch-settings .port-select-container .info-item .text {
  display: inline-block;
  vertical-align: middle;
}
.switch-settings .port-select-container .info-item.selected .icon {
  background: #0492EB;
}
.switch-settings .repeat-item .button-container {
  margin-right: 8px;
  font-weight: normal;
}
.switch-settings .repeat-item .button-container .button-button {
  min-width: 25px;
  line-height: 25px;
  background: var(--s-color-text-split, #EBECED);
  color: var(--tab-color-primary, #868E93);
}
.switch-settings .repeat-item .button-container.selected .button-button {
  background: #0492EB;
  color: #FFFFFF;
}
.switch-settings .port-grid-container {
  position: relative;
}
.switch-settings .port-grid-container .batch-edit-btn {
  position: absolute;
  top: -20px;
  right: 0;
}
.switch-settings .port-grid-container .grid-header-checkcolumn,
.switch-settings .port-grid-container .grid-content-td-check-column {
  padding-right: 0;
}
.switch-settings .port-grid-container .grid-header-actioncolumn.filter-column {
  padding-left: 0;
  padding-right: 0;
}
.switch-settings #batch-port-name .text-hint {
  color: var(--s-color-text-primary, #212121);
}
.switch-settings #port-grid .paging-info-container,
.switch-settings #lag-grid .paging-info-container {
  display: none !important;
}
.switch-settings .static-route-ipv6des-label.widget-container {
  color: #5E696F;
  margin-bottom: 6px;
}
.switch-settings .static-route-ipv6des .repeat-item .static-route-ipv6des-container {
  display: flex;
  align-items: flex-start;
}
.switch-settings .static-route-ipv6des .repeat-item .static-route-ipv6des-container .ipv6-separator {
  height: 28px;
  line-height: 28px;
  margin: 0 2px 12px 2px;
}
.switch-settings .static-route-ipv6des .repeat-item .static-route-ipv6des-container .textbox-error-tips {
  width: 378px;
}
.switch-settings .static-route-ipv6des .repeat-item .static-route-ipv6 .textbox-error-tips {
  position: absolute;
}
.switch-settings .static-route-ipv6des .repeat-item .static-route-ipv6.error.widget-container {
  margin-bottom: 20px;
}
.switch-settings .static-route-ipv6des .repeat-item .ipv6-prefix .text-wrap {
  width: 70px;
}
.switch-settings .static-route-ipv6des .repeat-item:first-child .delete-btn-container {
  display: none;
}
.switch-settings .static-route-ipv6des-container.widget-container {
  margin-bottom: 0;
}

.ap-settings #channel-utilization-container {
  background: var(--card-primary, #ffffff);
  border-radius: 5px;
  padding: 10px 16px;
}
.ap-settings #channel-utilization-container .caution {
  color: #FF2954;
}
.ap-settings .channel-utilization-progressbar .progressbar-wrap-outer {
  padding-right: 0;
}
.ap-settings .channel-utilization-progressbar .progressbar-content {
  width: 375px;
  height: 8px;
}
.ap-settings .sub-section.rxFrames,
.ap-settings .icon.rxFrames {
  background: #0492EB;
}
.ap-settings .sub-section.txFrames,
.ap-settings .icon.txFrames {
  background: #0DC901;
}
.ap-settings .sub-section.interference,
.ap-settings .icon.interference,
.ap-settings .sub-section.busyUtil,
.ap-settings .icon.busyUtil {
  background: #FF9500;
}
.ap-settings .channel-utilization-item-container {
  margin-bottom: 20px;
}
.ap-settings .channel-utilization-item .channel-info {
  min-width: 40px;
  display: inline-block;
  font-weight: bold;
  font-size: 14px;
}
.ap-settings .channel-utilization-item .mode-info {
  margin-right: 8px;
  display: inline-block;
}
.ap-settings .channel-utilization-item .info-container {
  position: relative;
}
.ap-settings .channel-utilization-item .info-container .evaluation {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 0;
}
.ap-settings .channel-utilization-item .evaluation {
  margin-top: 5px;
}
.ap-settings .utilization.info-panel .info-panel-value {
  font-weight: bold;
}
.ap-settings .channel-utilization-info .info-item-container {
  width: 25%;
}
.ap-settings .channel-utilization-info .info-item {
  margin-right: 10px;
}
.ap-settings .channel-utilization-info .info-item:after {
  display: inline-block;
  content: "";
  width: 0;
  height: 100%;
  vertical-align: middle;
}
.ap-settings .channel-utilization-info .info-item:last-child {
  margin-right: 0;
}
.ap-settings .channel-utilization-info .content {
  vertical-align: middle;
}
.ap-settings .channel-utilization-info .icon {
  width: 13px;
  height: 13px;
  vertical-align: middle;
}
.ap-settings .channel-utilization-info .free {
  background: #e5e5e5;
}
.ap-settings #wired-uplink-name .text-wrap-display {
  color: #0492EB;
  cursor: pointer;
}
.ap-settings .uplink-activity-container {
  position: relative;
}
.ap-settings .uplink-activity-container .uplink-activity-tip {
  position: absolute;
  right: 20px;
  top: -4px;
}
.ap-settings .content-clients {
  position: relative;
}
.ap-settings .content-clients .ap-clients-history-btn {
  position: absolute;
  right: 16px;
  top: 18px;
}
.ap-settings .mesh-grid-container {
  position: relative;
}
.ap-settings .mesh-grid-container .grid-content-tr.disabled {
  background-color: var(--s-color-text-split, #ebeced);
}
.ap-settings .mesh-grid-container .mesh-rescan-btn {
  margin-bottom: 0;
  line-height: 28px;
}
.ap-settings #mesh-scanning-area .gif-container {
  margin-bottom: 12px;
}
.ap-settings .switch-icon {
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 6px;
}
.ap-settings .action-linkAp,
.ap-settings .action-offline {
  font-weight: bold;
  font-size: 14px;
  padding: 5px 10px;
  vertical-align: middle;
  display: inline-block;
}
.ap-settings .action-linkAp, .ap-settings .action-linkAp + .link-icon {
  margin: 3px 4px;
}
.ap-settings .action-linkAp.ready + .link-icon {
  margin: 0;
}
.ap-settings .action-linkAp.ready {
  color: #0492EB;
  cursor: pointer;
  display: inline-block;
}
.ap-settings .action-linkAp.ready.full {
  color: #0492EB;
  opacity: 0.5;
}
.ap-settings .action-linkAp.offline {
  color: #c11c66;
  display: inline-block;
  cursor: default;
  border: none;
}
.ap-settings .action-linkAp.doing {
  color: #0492EB;
  opacity: 0.5;
  cursor: default;
}
.ap-settings .action-linkAp.fail {
  color: #c11c66;
  cursor: pointer;
  display: inline-block;
}
.ap-settings .action-linkAp.done {
  color: var(--tab-color-primary, #868E93);
  cursor: default;
  border: none;
}
.ap-settings .linkAp-icon {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}
.ap-settings .mesh-ap-icon-container {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 10px;
  transform: translateY(-50%);
}
.ap-settings .linkAp-icon.done {
  cursor: pointer;
}
.ap-settings [widget=infoPanel].grid {
  padding: 0;
}
.ap-settings [widget=infoPanel].grid table {
  border-collapse: collapse;
}
.ap-settings [widget=infoPanel].grid table td {
  border: 1px solid #e5e5e5;
  padding: 13px 16px;
}
.ap-settings [widget=infoPanel].grid .info-panel-row:first-child {
  font-weight: bold;
  background: #f0f0f0;
}
.ap-settings .rf-scan-toolbar {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  top: 2px;
  margin-bottom: 14px;
}
.ap-settings .rf-scan-toolbar #ap-rf-scan-tab {
  flex-grow: 1;
  flex-shrink: 0;
  margin-top: 5px;
}
.ap-settings .rf-scan-toolbar #ap-rf-scan-btn {
  margin-top: 5px;
}
.ap-settings .rf-scan-content {
  text-align: center;
}
.ap-settings .rf-scan-content .last-scan-info {
  text-align: right;
  color: #A0A5AD;
  font-size: 10px;
}
.ap-settings .rf-scan-content .rf-scan-para {
  display: inline-block;
  padding: 60px 0 80px 0;
  width: 250px;
}
.ap-settings .rf-scanning-container {
  margin-top: 30px;
  margin-bottom: 40px;
}
.ap-settings .rf-scanning-container .icon {
  margin: 0 auto;
}
.ap-settings .rf-scanning-container .title {
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  line-height: 21px;
  margin-top: 20px;
  margin-bottom: 15px;
}
.ap-settings .rf-scanning-container .content {
  font-size: 14px;
  text-align: center;
  line-height: 20px;
  color: var(--tab-color-primary, #868E93);
  max-width: 700px;
  margin: auto;
}
.ap-settings .rf-scan-no-data {
  overflow: hidden;
}
.ap-settings .rf-scan-no-data .no-data-img {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin-top: 55px;
  margin-bottom: 10px;
  background: url(../img/rfScanNoData.png) no-repeat;
  background-size: 100% 100%;
}
.ap-settings .rf-scan-no-data .no-data-text {
  font-size: 13px;
  color: var(--tab-color-primary, #868E93);
  letter-spacing: 0;
  margin-bottom: 48px;
}
.ap-settings .rf-container {
  width: 360px;
  padding: 10px 0 20px;
  margin: 0 auto 50px auto;
  color: var(--tab-color-primary, #868E93);
}
.ap-settings .rf-container .rf-inner {
  position: relative;
}
.ap-settings .rf-container .spliter-container {
  height: 100%;
  position: absolute;
  top: 0;
}
.ap-settings .rf-container .spliter-container .spliter {
  height: 100%;
  border-left: 1px dotted;
  width: 0;
  position: relative;
}
.ap-settings .rf-container .spliter-container .spliter .number {
  width: 32px;
  height: 16px;
  font-size: 14px;
  text-align: center;
  position: absolute;
  left: -16px;
  bottom: -22px;
}
.ap-settings .rf-container .hz-container {
  margin-bottom: 15px;
}
.ap-settings .rf-container .hz-container .title {
  font-size: 14px;
  font-weight: bold;
  color: var(--s-color-text-primary, #212121);
  text-align: left;
  padding-left: 5px;
  margin-bottom: 12px;
}
.ap-settings .rf-container .hz-container .chart-outer {
  position: relative;
  height: 40px;
  margin-bottom: 2px;
}
.ap-settings .rf-container .hz-container .chart-item {
  position: absolute;
}
.ap-settings .rf-container .hz-container .chart-item > span {
  display: inline-block;
}
.ap-settings .rf-container .hz-container .chart-item .graph {
  height: 0;
  position: relative;
  margin-bottom: 2px;
  border-radius: 8px 8px 0 0;
  border-bottom: 20px solid red;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.ap-settings .rf-container .hz-container .chart-item .graph > span {
  height: 0;
  position: absolute;
}
.ap-settings .rf-container .hz-container .chart-item .graph .graph-split {
  border-bottom: 18px solid white;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: 1px;
  left: -4px;
}
.ap-settings .rf-container .hz-container .chart-item .graph .content {
  border-bottom: 16px solid green;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  top: 2px;
  left: -2px;
}
.ap-settings .rf-container .hz-container .chart-item .graph .content-util {
  border-bottom: 14px solid #ffffff;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  bottom: -17px;
  right: -1px;
}
.ap-settings .rf-container .hz-container .chart-item .text {
  font-size: 14px;
}
.ap-settings .rf-container .hz-container .chart-item .enabled-line {
  width: 1px;
  background: #0492EB;
  position: absolute;
  top: 20px;
}
.ap-settings .rf-container .hz-container .chart-item .enabled-line.left {
  left: 0;
}
.ap-settings .rf-container .hz-container .chart-item .enabled-line.right {
  right: 0;
}
.ap-settings .rf-container .hz-container .chart-item .enabled-line:after {
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  background: #0492EB;
  border-radius: 100%;
  bottom: -3px;
  left: -2px;
  z-index: 2;
}
.ap-settings .rf-container .hz-container .chart-item.current .graph {
  border-bottom-color: #0492EB !important;
}
.ap-settings .rf-container .hz-container .chart-item.current .graph-split {
  border-bottom-color: #ffffff !important;
}
.ap-settings .rf-container .hz-container .chart-item.current .text {
  color: #0492EB !important;
}
.ap-settings .rf-container .hz-container .chart-item.inter-0 .graph,
.ap-settings .rf-container .hz-container .chart-item.inter-0 .graph-split,
.ap-settings .rf-container .hz-container .chart-item.inter-0 .content {
  border-bottom-color: #FFE292;
}
.ap-settings .rf-container .hz-container .chart-item.inter-1 .graph,
.ap-settings .rf-container .hz-container .chart-item.inter-1 .graph-split,
.ap-settings .rf-container .hz-container .chart-item.inter-1 .content {
  border-bottom-color: #FFDB77;
}
.ap-settings .rf-container .hz-container .chart-item.inter-2 .graph,
.ap-settings .rf-container .hz-container .chart-item.inter-2 .graph-split,
.ap-settings .rf-container .hz-container .chart-item.inter-2 .content {
  border-bottom-color: #FFD258;
}
.ap-settings .rf-container .hz-container .chart-item.inter-3 .graph,
.ap-settings .rf-container .hz-container .chart-item.inter-3 .graph-split,
.ap-settings .rf-container .hz-container .chart-item.inter-3 .content {
  border-bottom-color: #FFC241;
}
.ap-settings .rf-container .hz-container .chart-item.inter-4 .graph,
.ap-settings .rf-container .hz-container .chart-item.inter-4 .graph-split,
.ap-settings .rf-container .hz-container .chart-item.inter-4 .content {
  border-bottom-color: #FFB229;
}
.ap-settings .rf-container .hz-container .chart-item.inter-5 .graph,
.ap-settings .rf-container .hz-container .chart-item.inter-5 .graph-split,
.ap-settings .rf-container .hz-container .chart-item.inter-5 .content {
  border-bottom-color: #FFA212;
}
.ap-settings .rf-container .hz-container .chart-item.inter-6 .graph,
.ap-settings .rf-container .hz-container .chart-item.inter-6 .graph-split,
.ap-settings .rf-container .hz-container .chart-item.inter-6 .content {
  border-bottom-color: #FF9003;
}
.ap-settings .rf-container .hz-container .chart-item.inter-7 .graph,
.ap-settings .rf-container .hz-container .chart-item.inter-7 .graph-split,
.ap-settings .rf-container .hz-container .chart-item.inter-7 .content {
  border-bottom-color: #FF7F11;
}
.ap-settings .rf-container .hz-container .chart-item.inter-8 .graph,
.ap-settings .rf-container .hz-container .chart-item.inter-8 .graph-split,
.ap-settings .rf-container .hz-container .chart-item.inter-8 .content {
  border-bottom-color: #FF6E1E;
}
.ap-settings .rf-container .hz-container .chart-item.inter-9 .graph,
.ap-settings .rf-container .hz-container .chart-item.inter-9 .graph-split,
.ap-settings .rf-container .hz-container .chart-item.inter-9 .content {
  border-bottom-color: #FF5C2C;
}
.ap-settings .rf-container .hz-container .chart-item.inter-10 .graph,
.ap-settings .rf-container .hz-container .chart-item.inter-10 .graph-split,
.ap-settings .rf-container .hz-container .chart-item.inter-10 .content {
  border-bottom-color: #FF4B39;
}
.ap-settings .rf-container .hz-container .chart-item.inter-11 .graph,
.ap-settings .rf-container .hz-container .chart-item.inter-11 .graph-split,
.ap-settings .rf-container .hz-container .chart-item.inter-11 .content {
  border-bottom-color: #FF2954;
}
.ap-settings .rf-container .hz-container .chart-item:not(.disabled):hover {
  border-color: #04B0FF;
  color: #04B0FF;
}
.ap-settings .rf-container .hz-container .chart-item:not(.disabled).active {
  border-color: #0492EB;
  color: #0492EB;
  background: rgba(4, 146, 235, 0.08);
}
.ap-settings .rf-container .hz-container .chart-item.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.ap-settings .rf-container .footer-container {
  position: absolute;
  bottom: -30px;
  width: 100%;
  height: 30px;
  text-align: left;
}
.ap-settings .rf-container .footer-container .baseline {
  height: 1px;
  background: #c0c0c2;
}
.ap-settings .rf-2g-container .spliter-container .spliter {
  width: 39px;
}
.ap-settings .rf-2g-container .spliter-container .spliter:last-child {
  width: 0;
}
.ap-settings .rf-2g-container .hz-20-container .chart-item {
  width: 86px;
}
.ap-settings .rf-2g-container .hz-20-container .chart-item .graph {
  width: 86px;
}
.ap-settings .rf-2g-container .hz-20-container .chart-item .graph .graph-split {
  width: 84px;
}
.ap-settings .rf-2g-container .hz-20-container .chart-item .graph .content {
  width: 80px;
}
.ap-settings .rf-2g-container .hz-20-container .chart-item .graph .content-util {
  width: 78px;
}
.ap-settings .rf-2g-container .hz-40-container .chart-item {
  width: 164px;
}
.ap-settings .rf-2g-container .hz-40-container .chart-item .graph {
  width: 164px;
}
.ap-settings .rf-2g-container .hz-40-container .chart-item .graph .graph-split {
  width: 162px;
}
.ap-settings .rf-2g-container .hz-40-container .chart-item .graph .content {
  width: 158px;
}
.ap-settings .rf-2g-container .hz-40-container .chart-item .graph .content-util {
  width: 156px;
}
.ap-settings .rf-2g-container .footer-container {
  width: 354px;
}
.ap-settings .rf-5g-container,
.ap-settings .rf-5g2-container,
.ap-settings .rf-6g-container {
  width: 364px;
  padding-left: 2px;
  padding-right: 2px;
}
.ap-settings .rf-5g-container .spliter-container .number.first,
.ap-settings .rf-5g2-container .spliter-container .number.first,
.ap-settings .rf-6g-container .spliter-container .number.first {
  left: 0;
}
.ap-settings .rf-5g-container .hz-20-container .chart-item,
.ap-settings .rf-5g2-container .hz-20-container .chart-item,
.ap-settings .rf-6g-container .hz-20-container .chart-item {
  width: 30px;
}
.ap-settings .rf-5g-container .hz-20-container .chart-item .graph,
.ap-settings .rf-5g2-container .hz-20-container .chart-item .graph,
.ap-settings .rf-6g-container .hz-20-container .chart-item .graph {
  width: 30px;
}
.ap-settings .rf-5g-container .hz-20-container .chart-item .graph .graph-split,
.ap-settings .rf-5g2-container .hz-20-container .chart-item .graph .graph-split,
.ap-settings .rf-6g-container .hz-20-container .chart-item .graph .graph-split {
  width: 28px;
}
.ap-settings .rf-5g-container .hz-20-container .chart-item .graph .content,
.ap-settings .rf-5g2-container .hz-20-container .chart-item .graph .content,
.ap-settings .rf-6g-container .hz-20-container .chart-item .graph .content {
  width: 24px;
}
.ap-settings .rf-5g-container .hz-20-container .chart-item .graph .content-util,
.ap-settings .rf-5g2-container .hz-20-container .chart-item .graph .content-util,
.ap-settings .rf-6g-container .hz-20-container .chart-item .graph .content-util {
  width: 22px;
}
.ap-settings .rf-5g-container .hz-40-container .chart-item,
.ap-settings .rf-5g2-container .hz-40-container .chart-item,
.ap-settings .rf-6g-container .hz-40-container .chart-item {
  width: 60px;
}
.ap-settings .rf-5g-container .hz-40-container .chart-item .graph,
.ap-settings .rf-5g2-container .hz-40-container .chart-item .graph,
.ap-settings .rf-6g-container .hz-40-container .chart-item .graph {
  width: 60px;
}
.ap-settings .rf-5g-container .hz-40-container .chart-item .graph .graph-split,
.ap-settings .rf-5g2-container .hz-40-container .chart-item .graph .graph-split,
.ap-settings .rf-6g-container .hz-40-container .chart-item .graph .graph-split {
  width: 58px;
}
.ap-settings .rf-5g-container .hz-40-container .chart-item .graph .content,
.ap-settings .rf-5g2-container .hz-40-container .chart-item .graph .content,
.ap-settings .rf-6g-container .hz-40-container .chart-item .graph .content {
  width: 54px;
}
.ap-settings .rf-5g-container .hz-40-container .chart-item .graph .content-util,
.ap-settings .rf-5g2-container .hz-40-container .chart-item .graph .content-util,
.ap-settings .rf-6g-container .hz-40-container .chart-item .graph .content-util {
  width: 52px;
}
.ap-settings .rf-5g-container .hz-80-container .chart-item,
.ap-settings .rf-5g2-container .hz-80-container .chart-item,
.ap-settings .rf-6g-container .hz-80-container .chart-item {
  width: 120px;
}
.ap-settings .rf-5g-container .hz-80-container .chart-item .graph,
.ap-settings .rf-5g2-container .hz-80-container .chart-item .graph,
.ap-settings .rf-6g-container .hz-80-container .chart-item .graph {
  width: 120px;
}
.ap-settings .rf-5g-container .hz-80-container .chart-item .graph .graph-split,
.ap-settings .rf-5g2-container .hz-80-container .chart-item .graph .graph-split,
.ap-settings .rf-6g-container .hz-80-container .chart-item .graph .graph-split {
  width: 118px;
}
.ap-settings .rf-5g-container .hz-80-container .chart-item .graph .content,
.ap-settings .rf-5g2-container .hz-80-container .chart-item .graph .content,
.ap-settings .rf-6g-container .hz-80-container .chart-item .graph .content {
  width: 114px;
}
.ap-settings .rf-5g-container .hz-80-container .chart-item .graph .content-util,
.ap-settings .rf-5g2-container .hz-80-container .chart-item .graph .content-util,
.ap-settings .rf-6g-container .hz-80-container .chart-item .graph .content-util {
  width: 112px;
}
.ap-settings .rf-5g-container .hz-160-container .chart-item,
.ap-settings .rf-5g2-container .hz-160-container .chart-item,
.ap-settings .rf-6g-container .hz-160-container .chart-item {
  width: 240px;
}
.ap-settings .rf-5g-container .hz-160-container .chart-item .graph,
.ap-settings .rf-5g2-container .hz-160-container .chart-item .graph,
.ap-settings .rf-6g-container .hz-160-container .chart-item .graph {
  width: 240px;
}
.ap-settings .rf-5g-container .hz-160-container .chart-item .graph .graph-split,
.ap-settings .rf-5g2-container .hz-160-container .chart-item .graph .graph-split,
.ap-settings .rf-6g-container .hz-160-container .chart-item .graph .graph-split {
  width: 238px;
}
.ap-settings .rf-5g-container .hz-160-container .chart-item .graph .content,
.ap-settings .rf-5g2-container .hz-160-container .chart-item .graph .content,
.ap-settings .rf-6g-container .hz-160-container .chart-item .graph .content {
  width: 234px;
}
.ap-settings .rf-5g-container .hz-160-container .chart-item .graph .content-util,
.ap-settings .rf-5g2-container .hz-160-container .chart-item .graph .content-util,
.ap-settings .rf-6g-container .hz-160-container .chart-item .graph .content-util {
  width: 232px;
}
.ap-settings .rf-5g-container .hz-container,
.ap-settings .rf-5g2-container .hz-container,
.ap-settings .rf-6g-container .hz-container {
  margin-bottom: 30px;
}
.ap-settings .interference-container {
  padding-top: 20px;
}
.ap-settings .interference-container .interference-outer {
  font-size: 0;
  margin-bottom: 12px;
}
.ap-settings .interference-container .inter-item {
  display: inline-block;
  width: 26px;
  height: 12px;
  position: relative;
  margin-right: 1px;
}
.ap-settings .interference-container .inter-item .text {
  position: absolute;
  color: var(--tab-color-primary, #868E93);
  font-size: 12px;
  left: -10px;
  top: -16px;
  white-space: nowrap;
}
.ap-settings .interference-container .inter-item .text.last {
  left: 0;
}
.ap-settings .interference-container .inter-item.inter-0 {
  background: #FFE292;
}
.ap-settings .interference-container .inter-item.inter-1 {
  background: #FFDB77;
}
.ap-settings .interference-container .inter-item.inter-2 {
  background: #FFD258;
}
.ap-settings .interference-container .inter-item.inter-3 {
  background: #FFC241;
}
.ap-settings .interference-container .inter-item.inter-4 {
  background: #FFB229;
}
.ap-settings .interference-container .inter-item.inter-5 {
  background: #FFA212;
}
.ap-settings .interference-container .inter-item.inter-6 {
  background: #FF9003;
}
.ap-settings .interference-container .inter-item.inter-7 {
  background: #FF7F11;
}
.ap-settings .interference-container .inter-item.inter-8 {
  background: #FF6E1E;
}
.ap-settings .interference-container .inter-item.inter-9 {
  background: #FF5C2C;
}
.ap-settings .interference-container .inter-item.inter-10 {
  background: #FF4B39;
}
.ap-settings .interference-container .inter-item.inter-11 {
  background: #FF2954;
}
.ap-settings .accordion-item.radio-accordion {
  position: relative;
}
.ap-settings .accordion-item.radio-accordion .insufficient-power-note .insufficient-power-icon {
  display: inline-block;
  height: 128px;
  width: 128px;
  margin-bottom: 20px;
}
.ap-settings .accordion-item.radio-accordion .insufficient-power-note {
  margin: 100px 0 100px;
  text-align: center;
}
.ap-settings .accordion-item.radio-accordion .insufficient-power-title {
  font-size: 16px;
  letter-spacing: 0;
  font-weight: bold;
}
.ap-settings .accordion-item.radio-accordion .insufficient-power-content {
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  letter-spacing: 0;
}
.ap-settings .accordion-item.radio-accordion .reboot-button {
  text-align: center;
}
.ap-settings .accordion-item.radio-accordion .energy-saving-note {
  width: auto;
}

.config-ipv6-settings .widget-tips.textbox-tips {
  display: block;
}
.config-ipv6-settings .widget-tips.textbox-tips .tips-content {
  position: inherit;
  transform: translateY(0);
  margin-left: 0;
  margin-top: 2px;
}

#ap-advanced-tab,
#ap-radio-tab {
  display: inline-block;
}

#ap-client-history-msg .msg-wrap {
  width: 800px;
}
#ap-client-history-msg .msg-content-container {
  min-height: 400px;
}
#ap-client-history-msg .ap-client-history-export-btn {
  position: absolute;
  right: 30px;
  top: 24px;
  background-color: #0492EB;
  border-radius: 3px;
}
#ap-client-history-msg .ap-client-history-export-btn .button-text {
  color: white;
  position: relative;
  z-index: 99;
}
#ap-client-history-msg .report-onece-popup {
  position: absolute;
  right: 50px;
  top: 66px;
  z-index: 800;
  background-color: var(--msg-background-content, #ffffff);
  box-shadow: var(--msg-box-shadow, 0 0 8px 0 rgba(54, 62, 77, 0.2), 0 8px 8px 0 rgba(54, 62, 77, 0.1));
  border-radius: 3px;
  padding: 24px;
}
#ap-client-history-msg .report-onece-popup .title {
  font-size: 16px;
  font-weight: bold;
}
#ap-client-history-msg .report-onece-popup:before {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-bottom: 8px solid var(--msg-background-content, #ffffff);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  top: -8px;
  right: 27px;
}
#ap-client-history-msg .report-onece-popup .export-type-radio {
  margin: 30px 0;
}

#global-info-panel.channel-detail-panel {
  background: var(--panel-bg-primary, #FFFFFF);
  border-color: var(--panel-bg-primary, #FFFFFF);
}
#global-info-panel.channel-detail-panel .tip-pointer.left {
  border-left-color: rgba(167, 169, 172, 0.6);
  right: -8px !important;
}
#global-info-panel.channel-detail-panel .tip-pointer.left:after {
  border-left-color: var(--panel-bg-primary, #FFFFFF);
}
#global-info-panel.channel-detail-panel .ap-rf-panel .info-panel-row {
  display: flex;
  justify-content: space-between;
}
#global-info-panel.channel-detail-panel .ap-rf-panel .info-panel-row > div {
  display: inline-flex;
}
#global-info-panel.channel-detail-panel .ap-rf-panel .info-panel-row.spliter {
  border-bottom: 1px solid var(--s-color-text-secondary, #979797);
}
#global-info-panel.channel-detail-panel .ap-rf-panel .info-panel-row .info-panel-name {
  color: var(--panel-color-label, #747474);
}
#global-info-panel.channel-detail-panel .ap-rf-panel .info-panel-row.title {
  padding-bottom: 12px;
  font-size: 15px;
  font-weight: bold;
}
#global-info-panel.channel-detail-panel .ap-rf-panel .info-panel-row.title .info-panel-name {
  color: var(--s-color-text-primary, #212121);
}
#global-info-panel.channel-detail-panel .ap-rf-panel .info-panel-row.content {
  padding-top: 12px;
}
#global-info-panel.channel-detail-panel .ap-rf-panel .info-panel-row.spliter.freq {
  padding-bottom: 10px;
}
#global-info-panel.channel-detail-panel .ap-rf-panel .info-panel-row.inter-content {
  padding-top: 10px;
}
#global-info-panel.channel-detail-panel .ap-rf-panel .info-panel-row .info-panel-value {
  text-align: right;
  color: var(--s-color-text-primary, #212121);
}
#global-info-panel.channel-detail-panel .ap-rf-panel .info-panel-row .info-panel-value .interference-type,
#global-info-panel.channel-detail-panel .ap-rf-panel .info-panel-row .info-panel-value .interference-type > span {
  display: inline-block;
  vertical-align: middle;
}
#global-info-panel.channel-detail-panel .ap-rf-panel .info-panel-row .info-panel-value .interference-type .icon.inf-type {
  margin-right: 5px;
}
#global-info-panel.channel-detail-panel .ap-rf-panel .info-panel-row .info-panel-value .interference-type .icon.inf-type:last-child {
  margin-right: 0;
}
#global-info-panel.channel-detail-panel .ap-rf-panel .inf-graph .graph-container {
  font-size: 0;
  display: flex;
}
#global-info-panel.channel-detail-panel .ap-rf-panel .inf-graph .inf-item {
  display: inline-flex;
  width: 6px;
  height: 65px;
  background: rgba(216, 216, 216, 0.24);
  margin-right: 2px;
  position: relative;
  border-radius: 1px;
  cursor: pointer;
}
#global-info-panel.channel-detail-panel .ap-rf-panel .inf-graph .inf-item:last-child {
  margin-right: 0;
}
#global-info-panel.channel-detail-panel .ap-rf-panel .inf-graph .inf-item .inf-inner {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-radius: 100px 100px 0 0;
}
#global-info-panel.channel-detail-panel .ap-rf-panel .inf-graph .footer-container {
  height: 4px;
  margin-top: 2px;
  background-image: linear-gradient(270deg, #CF1422 0%, #FFD601 100%);
  border-radius: 1px;
}
#global-info-panel.channel-detail-panel .ap-rf-panel .inf-graph .footer-text {
  position: relative;
  margin-top: 3px;
  color: #AFB2B8;
}
#global-info-panel.channel-detail-panel .ap-rf-panel .inf-graph .footer-text .text {
  font-size: 11px;
}
#global-info-panel.channel-detail-panel .ap-rf-panel .inf-graph .footer-text .text.right {
  position: absolute;
  right: 0;
}

#global-tip.inter-tip {
  background: #363e4d;
  color: #cbcdd1;
}
#global-tip.inter-tip .tip-pointer {
  border-top-color: #363e4d;
}
#global-tip.inter-tip .inter-info-container {
  border-collapse: collapse;
}
#global-tip.inter-tip .inter-legend > span {
  display: inline-block;
  vertical-align: middle;
}
#global-tip.inter-tip .inter-legend .inter-icon {
  width: 12px;
  height: 12px;
  margin-right: 5px;
}
#global-tip.inter-tip .inter-legend.with-item td {
  padding-bottom: 10px;
}
#global-tip.inter-tip .int-item:not(.inter-legend) .name {
  color: #797e88;
}
#global-tip.inter-tip .int-item .value {
  width: 50px;
  text-align: right;
}
#global-tip.inter-tip .inter-times.first td {
  border-top: 1px solid #797e88;
  padding-top: 10px;
}

#global-combobox-options[data-shown=ap-tags] li.combobox-list .icon,
#global-combobox-options[data-shown=switch-tags] li.combobox-list .icon,
#global-combobox-options[data-shown=batch-ap-tags] li.combobox-list .icon,
#global-combobox-options[data-shown=batch-sw-tags] li.combobox-list .icon {
  margin-right: 8px;
  border: none;
}
#global-combobox-options[data-shown=ap-tags] .combobox-list.disabled .icon,
#global-combobox-options[data-shown=switch-tags] .combobox-list.disabled .icon,
#global-combobox-options[data-shown=batch-ap-tags] .combobox-list.disabled .icon,
#global-combobox-options[data-shown=batch-sw-tags] .combobox-list.disabled .icon {
  display: none;
}
#global-combobox-options[data-shown=ap-tags] .combobox-list.disabled .text,
#global-combobox-options[data-shown=switch-tags] .combobox-list.disabled .text,
#global-combobox-options[data-shown=batch-ap-tags] .combobox-list.disabled .text,
#global-combobox-options[data-shown=batch-sw-tags] .combobox-list.disabled .text {
  color: var(--s-color-text-primary, #212121);
}
#global-combobox-options[data-shown=ap-tags] .device-add-tag,
#global-combobox-options[data-shown=switch-tags] .device-add-tag,
#global-combobox-options[data-shown=batch-ap-tags] .device-add-tag,
#global-combobox-options[data-shown=batch-sw-tags] .device-add-tag {
  padding: 5px 16px;
  border-top: 1px solid var(--s-color-text-split, #EBECED);
  cursor: pointer;
  margin-top: 10px;
}
#global-combobox-options[data-shown=ap-tags] .device-add-tag:hover,
#global-combobox-options[data-shown=switch-tags] .device-add-tag:hover,
#global-combobox-options[data-shown=batch-ap-tags] .device-add-tag:hover,
#global-combobox-options[data-shown=batch-sw-tags] .device-add-tag:hover {
  color: #04B0FF;
}
#global-combobox-options[data-shown=ap-tags] .device-add-tag > span,
#global-combobox-options[data-shown=switch-tags] .device-add-tag > span,
#global-combobox-options[data-shown=batch-ap-tags] .device-add-tag > span,
#global-combobox-options[data-shown=batch-sw-tags] .device-add-tag > span {
  height: 22px;
  line-height: 22px;
  display: inline-block;
  vertical-align: middle;
}
#global-combobox-options[data-shown=ap-tags] .device-add-tag .btn-add-black,
#global-combobox-options[data-shown=switch-tags] .device-add-tag .btn-add-black,
#global-combobox-options[data-shown=batch-ap-tags] .device-add-tag .btn-add-black,
#global-combobox-options[data-shown=batch-sw-tags] .device-add-tag .btn-add-black {
  margin-right: 4px;
}

.link-button {
  vertical-align: bottom;
}
.link-button .button-wrap-outer {
  font-size: 14px;
}

.border-need-wrap .button-button .button-text {
  line-height: 13px;
  height: 28px;
  display: flex;
  align-items: center;
}

.ap-wlans-grid .grid-content-btn-edit .icon {
  visibility: hidden;
}
.ap-wlans-grid .hover .grid-content-btn-edit .icon {
  visibility: visible;
}
.ap-wlans-grid .scroll-x-container .grid-header-customWidget .content {
  display: none;
}
.ap-wlans-grid .grid-fixed-container .grid-content-tr:nth-child(odd) {
  background-color: var(--table-background-odd, #F8F9FB);
}
.ap-wlans-grid .grid-fixed-container .grid-content-tr:nth-child(even) {
  background-color: var(--table-background-even, #FFFFFF);
}
.ap-wlans-grid .grid-fixed-container .grid-content-td {
  padding-top: 0px;
  padding-bottom: 0px;
}

#clients-grid .grid-panel-tbar-container {
  position: absolute;
  top: 0;
}
#clients-grid .grid-panel-content {
  background: var(--card-primary, #ffffff);
  border: 0 solid var(--tab-color-primary, #868E93);
  box-shadow: 2px 2px 5px 0 rgba(54, 62, 77, 0.05);
  border-radius: 3px;
  padding-bottom: 32px;
}
#clients-grid .grid-panel-selected-container {
  margin-left: 20px;
  margin-right: 0;
}
#clients-grid #clients-grid_paging {
  margin-left: 20px;
}
#clients-grid .grid-search-text .text-wrap {
  width: 250px;
  max-width: 250px;
}
#clients-grid .grid-content-tr.hover {
  cursor: pointer;
}
#clients-grid .wifi-wrap > span {
  display: inline-block;
  vertical-align: middle;
}

.clients-panel {
  padding-top: 4px;
}
.clients-panel .hidden {
  display: none !important;
}
.clients-panel .tool-bar-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-top: 44px;
}
.clients-panel .opts-btn-container {
  text-align: left;
  height: 34px;
  line-height: 32px;
}
.clients-panel .opts-btn-container .split {
  width: 2px;
  background: #AEB4B7;
  display: inline-block;
  height: 18px;
  vertical-align: middle;
  margin-right: 13px;
}
.clients-panel .opts-btn-container > div {
  vertical-align: middle;
  margin-left: 16px;
}
.clients-panel .opts-btn-container .icon {
  cursor: pointer;
}
.clients-panel .opts-btn-container .combination-panel-container .combination-panel-wrap {
  min-width: 220px;
}

.displaylabel-container.switch-link .text-wrap-outer,
#connected-ap-link .text-wrap-outer {
  cursor: pointer;
  color: #04B0FF;
}

.client-device-btn {
  border-bottom: 1px solid;
  line-height: 16px;
}

.tab-btn.clients.manager:before,
.tab-btn[data-name=batch-clients].manager:before,
.drawer-title-container.clients.manager:before,
.client-type.manager:before,
.charts-icons.client.manager:before {
  display: inline-block;
  content: "";
  position: absolute;
}

.client-type {
  display: inline-block;
  width: 40px;
  height: 40px;
  position: relative;
}
.client-type.manager:before {
  top: 0;
  left: 0;
}

.tab-btn.clients.manager:before,
.tab-btn[data-name=batch-clients].manager:before {
  top: 5px;
  left: 5px;
  z-index: 2;
}

.drawer-title-container.clients.manager:before {
  top: 5px;
  left: 0px;
}

#ap-list-modal .msg-wrap {
  width: 960px;
}

.ap-grid-search {
  width: 200px;
}

#ap-list-modal .msg-content-container {
  padding: 15px 24px;
}

.log .combobox-container.u-label-none .combobox-wrap {
  width: 200px;
}

.log .tool-container-to-grid {
  left: 250px;
}
.log .remote-logging-paragraph {
  line-height: 28px;
}

#logGrid .grid-panel-tbar-container .search-bar-container .text-wrap {
  width: 300px;
}

#alertGrid .grid-panel-tbar-container .search-bar-container .text-wrap {
  width: 300px;
}

.insight-page {
  min-width: 1380px;
}
.insight-page .no-device-container {
  padding: 160px 0;
}
.insight-page .rangepicker-container .datepicker-calendar-inner {
  border-right: none;
}
.insight-page #nap-scan-btn {
  display: inline-block;
  position: absolute;
  top: -2px;
  right: 0;
}
.insight-page .nearest-ap {
  cursor: pointer;
  border-bottom: 1px solid;
  color: #0492EB;
  line-height: 16px;
}
.insight-page #known-clients-grid .grid-content-tr,
.insight-page #past-con-grid .grid-content-tr {
  cursor: pointer;
}
.insight-page .grid-status-container .icon,
.insight-page .grid-status-container .icon-outer {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
}
.insight-page .grid-status-container .icon-outer {
  text-indent: unset;
}
.insight-page .grid-status-container .disabled .icon-outer {
  background-color: #AEB4B7 !important;
}
.insight-page .grid-status-container .gbps .icon-outer {
  background-color: #0DC901;
}
.insight-page .grid-status-container .mbps .icon-outer {
  background-color: #FF9500;
}
.insight-page .grid-status-container .gbps2 .icon-outer {
  background-color: #00CFD9;
}
.insight-page .grid-status-container .gbps10 .icon-outer {
  background-color: #0093F3;
}
.insight-page .grid-status-container .gbps5 .icon-outer {
  background-color: #00C5FF;
}
.insight-page .grid-status-container .disconnected .icon-outer {
  background-color: rgba(73, 84, 107, 0.9);
}
.insight-page .view-locked-out-users-tip {
  position: absolute;
  right: 0;
  top: 0;
  height: 28px;
  line-height: 28px;
  color: #0492EB;
  cursor: pointer;
}
.insight-page .view-locked-out-users-tip:after {
  content: "";
  width: 24px;
  height: 24px;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

.total-traffic .download .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
}
.total-traffic .upload .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
}

.local-remote-outer .data-outer {
  display: inline-block;
  vertical-align: middle;
}
.local-remote-outer .data-outer .remote {
  margin-top: 2px;
}
.local-remote-outer .local-remote-icon {
  display: inline-block;
  vertical-align: middle;
}

.known-clients-view .batch-delete,
.past-connection-view .batch-delete,
.past-auth-view .batch-delete,
.nap-view .batch-delete {
  display: none;
}
.known-clients-view .batch-delete .text,
.past-connection-view .batch-delete .text,
.past-auth-view .batch-delete .text,
.nap-view .batch-delete .text {
  color: #FF2954;
}

.nap-view .insight-opt-bar {
  width: calc(100% - 150px);
}

#accessGroupGrid_popEditor-msg .msg-content-container {
  max-height: 600px;
  overflow: auto;
}

#hotspot-type .checkbox-list {
  width: 104px;
}

#import-page-tip {
  width: 610px;
}

#close-voucher-msg .msg-title {
  display: none;
}
#close-voucher-msg .msg-content-container {
  padding-top: 30px;
  padding-left: 30px;
}
#close-voucher-msg .msg-btn-container {
  padding-left: 30px;
}

#portal-custom-server li.radio-list > .widget-wrap {
  display: inline-block;
  margin-right: 20px;
}
#portal-custom-server .radio-content-wrap {
  display: inline-block;
}

#global-combobox-options[data-shown=portal-radius-profile] .combobox-empty-tip,
#global-combobox-options[data-shown=portal-radius-profile-hotspot] .combobox-empty-tip,
#global-combobox-options[data-shown=radius-profile-dot1x] .combobox-empty-tip,
#global-combobox-options[data-shown=mac-auth-profile-combobox] .combobox-empty-tip,
#global-combobox-options[data-shown=radius-profile-combo] .combobox-empty-tip {
  font-size: 12px;
}
#global-combobox-options[data-shown=portal-radius-profile] .combobox-list-editor-wrap,
#global-combobox-options[data-shown=portal-radius-profile-hotspot] .combobox-list-editor-wrap,
#global-combobox-options[data-shown=radius-profile-dot1x] .combobox-list-editor-wrap,
#global-combobox-options[data-shown=mac-auth-profile-combobox] .combobox-list-editor-wrap,
#global-combobox-options[data-shown=radius-profile-combo] .combobox-list-editor-wrap {
  border-top: 1px solid var(--s-color-text-split, #EBECED);
}
#global-combobox-options[data-shown=portal-radius-profile] .combobox-list-editor-wrap li label,
#global-combobox-options[data-shown=portal-radius-profile-hotspot] .combobox-list-editor-wrap li label,
#global-combobox-options[data-shown=radius-profile-dot1x] .combobox-list-editor-wrap li label,
#global-combobox-options[data-shown=mac-auth-profile-combobox] .combobox-list-editor-wrap li label,
#global-combobox-options[data-shown=radius-profile-combo] .combobox-list-editor-wrap li label {
  display: block;
  padding: 5px 16px 5px 10px;
  line-height: 1.14;
  white-space: nowrap;
  position: relative;
}
#global-combobox-options[data-shown=portal-radius-profile] .combobox-list-editor-wrap li.create-new-radius span.icon,
#global-combobox-options[data-shown=portal-radius-profile-hotspot] .combobox-list-editor-wrap li.create-new-radius span.icon,
#global-combobox-options[data-shown=radius-profile-dot1x] .combobox-list-editor-wrap li.create-new-radius span.icon,
#global-combobox-options[data-shown=mac-auth-profile-combobox] .combobox-list-editor-wrap li.create-new-radius span.icon,
#global-combobox-options[data-shown=radius-profile-combo] .combobox-list-editor-wrap li.create-new-radius span.icon {
  vertical-align: middle;
  display: inline-block;
  width: 24px;
  height: 24px;
  background: var(--icon-select-add, url(../img/svg/ButtonIconAdd.svg)) no-repeat;
}
#global-combobox-options[data-shown=portal-radius-profile] .combobox-list-editor-wrap li.create-new-radius div[widget=transition],
#global-combobox-options[data-shown=portal-radius-profile-hotspot] .combobox-list-editor-wrap li.create-new-radius div[widget=transition],
#global-combobox-options[data-shown=radius-profile-dot1x] .combobox-list-editor-wrap li.create-new-radius div[widget=transition],
#global-combobox-options[data-shown=mac-auth-profile-combobox] .combobox-list-editor-wrap li.create-new-radius div[widget=transition],
#global-combobox-options[data-shown=radius-profile-combo] .combobox-list-editor-wrap li.create-new-radius div[widget=transition] {
  vertical-align: middle;
}
#global-combobox-options[data-shown=portal-radius-profile] .combobox-list-editor-wrap li.create-new-radius:hover,
#global-combobox-options[data-shown=portal-radius-profile-hotspot] .combobox-list-editor-wrap li.create-new-radius:hover,
#global-combobox-options[data-shown=radius-profile-dot1x] .combobox-list-editor-wrap li.create-new-radius:hover,
#global-combobox-options[data-shown=mac-auth-profile-combobox] .combobox-list-editor-wrap li.create-new-radius:hover,
#global-combobox-options[data-shown=radius-profile-combo] .combobox-list-editor-wrap li.create-new-radius:hover {
  color: #0492EB;
}
#global-combobox-options[data-shown=portal-radius-profile] .combobox-list-editor-wrap li.create-new-radius:hover span.icon,
#global-combobox-options[data-shown=portal-radius-profile-hotspot] .combobox-list-editor-wrap li.create-new-radius:hover span.icon,
#global-combobox-options[data-shown=radius-profile-dot1x] .combobox-list-editor-wrap li.create-new-radius:hover span.icon,
#global-combobox-options[data-shown=mac-auth-profile-combobox] .combobox-list-editor-wrap li.create-new-radius:hover span.icon,
#global-combobox-options[data-shown=radius-profile-combo] .combobox-list-editor-wrap li.create-new-radius:hover span.icon {
  width: 24px;
  height: 24px;
  background: var(--icon-select-add, url(../img/svg/ButtonIconAdd.svg)) no-repeat;
}
#global-combobox-options[data-shown=portal-radius-profile] li.disabled .icon[data-tip],
#global-combobox-options[data-shown=portal-radius-profile-hotspot] li.disabled .icon[data-tip],
#global-combobox-options[data-shown=radius-profile-dot1x] li.disabled .icon[data-tip],
#global-combobox-options[data-shown=mac-auth-profile-combobox] li.disabled .icon[data-tip],
#global-combobox-options[data-shown=radius-profile-combo] li.disabled .icon[data-tip] {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
}
#global-combobox-options[data-shown=portal-radius-profile] .combobox-list-content-wrap-outer,
#global-combobox-options[data-shown=portal-radius-profile-hotspot] .combobox-list-content-wrap-outer,
#global-combobox-options[data-shown=radius-profile-dot1x] .combobox-list-content-wrap-outer,
#global-combobox-options[data-shown=mac-auth-profile-combobox] .combobox-list-content-wrap-outer,
#global-combobox-options[data-shown=radius-profile-combo] .combobox-list-content-wrap-outer {
  padding-bottom: 0;
}
#global-combobox-options[data-shown=portal-radius-profile] .transition-container,
#global-combobox-options[data-shown=portal-radius-profile-hotspot] .transition-container,
#global-combobox-options[data-shown=radius-profile-dot1x] .transition-container,
#global-combobox-options[data-shown=mac-auth-profile-combobox] .transition-container,
#global-combobox-options[data-shown=radius-profile-combo] .transition-container {
  white-space: normal;
}

#custom-port .widget-wrap {
  max-width: 70px;
  width: 70px;
}

#terms-msg {
  width: 177px;
  height: 100%;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 800;
  background-color: rgba(33, 33, 33, 0.3);
}
#terms-msg .terms-wrapper .term-content-wrapper {
  width: 10.25rem;
  background: #ffffff;
  border-radius: 3px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  height: 174px;
}
#terms-msg .terms-wrapper .term-content-wrapper .terms-msg-title {
  line-height: 26px;
  top: 0;
}
#terms-msg .terms-wrapper .term-content-wrapper .terms-msg-content {
  word-wrap: break-word;
  padding: 10px;
  min-height: 20px;
  height: 120px;
  white-space: pre-wrap;
}
#terms-msg .terms-wrapper .term-content-wrapper .terms-msg-footer {
  bottom: 0;
  line-height: 26px;
  color: #4acbd6;
}

#portal-background-preview .widget-wrap.text-wrap,
#portal-logo-preview .widget-wrap.text-wrap {
  display: none;
}
#portal-background-preview .file-button-container,
#portal-logo-preview .file-button-container {
  margin: 0;
}

#portal-scroll-container .hidden {
  display: none;
}

#portal-login-left {
  vertical-align: top;
  margin: 0 25px 25px 0;
}

#portal-login-right {
  vertical-align: top;
  width: 534px;
}

#portal-editor .auth-timeout .text-container {
  margin-right: 4px;
}
#portal-editor .auth-timeout .text-container .text-wrap {
  width: 66px;
}
#portal-editor .auth-timeout .text-container .widget-error-tips {
  width: 0;
  left: -87px;
}

#auth-management-url .widget-fieldlabel-wrap {
  height: 0;
}

#password_view,
#username_view,
#voucher_view {
  font-size: 0;
  padding: 0 10px;
}
#password_view .icon,
#username_view .icon,
#voucher_view .icon {
  padding-right: 10px;
}
#password_view .text,
#username_view .text,
#voucher_view .text {
  color: #a7a9ac;
  margin-left: 8px;
}
#password_view:before,
#username_view:before,
#voucher_view:before {
  content: "";
  width: 0;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

#voucher_view {
  padding-left: 6px;
}

#phone_view .pre-phone {
  color: #ffffff;
  background: #4acbd6;
  width: 35px;
}
#phone_view .phone-number {
  color: #a7a9ac;
  padding-left: 8px;
}

#verify_view .get-code {
  color: #4acbd6;
}

#tab-preview-filter {
  margin-left: 82px;
}
#tab-preview-filter #tab-btn-pc {
  width: 100px;
}
#tab-preview-filter #tab-btn-mobile {
  width: auto;
  padding: 0 20px;
}
#tab-preview-filter #tab-btn-tablet {
  width: 100px;
}

.template_preview .widget-container.button-container a.button-button,
.template_preview .widget-container.button-container a.button-button:hover {
  font-size: 16px;
  min-width: 50px;
  margin-right: 10px;
  padding: 3px 20px;
  border-radius: 0;
  background-color: #FFFFFF;
}

.template_preview .widget-container.button-container a.button-button:hover,
.template_preview .widget-container.button-container a.button-button.activated {
  border-bottom: 2px solid #005466;
}

.template_preview div.button-container a.button-button span.button-text {
  color: #7A7A7A;
}

.template_preview div.button-container a.button-button:hover span.button-text {
  color: #005564;
}

.template_preview #default_btn.widget-container.button-container a.button-button,
.template_preview #default_btn.widget-container.button-container a.button-button:hover {
  margin-right: 5px;
  margin-left: 10px;
  padding-right: 0;
  border: none;
}

.preview_mode #login-restore {
  margin-top: 5px;
  position: relative;
  font-size: 15px;
  color: #4acbd6;
}

#pre_browse_ctn {
  width: 534px;
  height: 364px;
  border-color: var(--s-color-text-secondary, #979797);
  background: #D3D4D5;
  font-family: "Myriad pro", sans-serif;
  font-size: 14px;
  position: relative;
  margin: 0 auto;
  color: #36444B;
}
#pre_browse_ctn #bg-mask {
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  width: 177px;
  background-color: var(--s-color-text-primary, #212121);
  opacity: 0.4;
  margin: auto;
}

.preview_logo_outer .icon {
  width: 3.125rem;
  height: 3.125rem;
  margin: 0 auto;
  background: none;
}

.preview_logo_outer .text {
  word-break: break-all;
  padding: 0.625rem 0.625rem 0 0.625rem;
  width: 168px;
  white-space: pre-wrap;
}

.preview_login_outer {
  z-index: 10;
}
.preview_login_outer > .view-wrap {
  margin: 10px auto;
  background: #FFFFFF;
}

.preview_login_ctn {
  z-index: 20;
  position: relative;
}

#username_view,
#preview_username_view {
  margin-top: 0;
}

.verification {
  line-height: 18px;
  width: 60%;
  height: 18px;
  color: #a7a9ac;
}

#login_view,
#preview_login_view {
  color: #FFFFFF;
  background-color: #4acbd6;
}

#terms-preview .tips-content {
  margin: 0;
  color: #ffffff;
}
#terms-preview a {
  text-decoration: none;
}
#terms-preview span.icon {
  margin-right: 2px;
}

#copyright {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #36444B;
  margin-bottom: 8px;
  word-break: break-all;
  z-index: 1;
}

#preview_copyright_content {
  width: 180px;
  padding: 0 0.625rem;
  white-space: pre-wrap;
}

.upload-list {
  margin: 0 0 12px 210px;
}
.upload-list li {
  list-style-type: none;
}

.upload-list .text {
  font-size: 14px;
  line-height: 28px;
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  height: 30px;
  margin-bottom: 11px;
  vertical-align: middle;
  text-overflow: ellipsis;
}

.upload-list .btn-delete {
  display: inline-block;
  width: 22px;
  height: 30px;
  margin: 0 0 11px 6px;
  cursor: pointer;
  vertical-align: middle;
  background: url(../img/iconsX.png) no-repeat -694px -6px;
}
.upload-list .btn-delete:hover {
  background: url(../img/iconsX.png) no-repeat -719px -6px;
}

p.radius-tag ~ p {
  margin-top: 5px;
}

div.radius-server-head {
  width: 600px;
  border-bottom: 1px solid var(--table-color-border-top, #e5e5e5);
}
div.radius-server-head .radius-server-title {
  color: var(--tab-color-primary, #868E93);
}
div.radius-server-head .btn-delete {
  text-align: right;
}

.radius-server-repeat .repeat-item {
  margin-bottom: 15px;
}
.radius-server-repeat .repeat-item[data-index="0"] .btn-delete {
  display: none;
}

.create-radius-server {
  display: inline-block;
}
.create-radius-server div {
  cursor: pointer;
  color: #0492EB;
  display: inline-block;
  text-align: center;
  border-radius: 3px;
  height: 24px;
  width: auto;
  line-height: 24px;
  vertical-align: middle;
  font-size: 15px;
  font-weight: bold;
}

.create-radius-server div:before {
  margin-right: 6px;
  vertical-align: top;
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/OthersIconAdd.svg) no-repeat;
  content: "";
}

.scheduler-asso .tab-container,
.mac-filter-asso .tab-container {
  margin-bottom: 4px;
  margin-right: 12px;
}
.scheduler-asso .combobox-container.u-label-none,
.mac-filter-asso .combobox-container.u-label-none {
  margin-bottom: 4px;
}
.scheduler-asso .combobox-container.u-label-none .combobox-wrap,
.mac-filter-asso .combobox-container.u-label-none .combobox-wrap {
  width: 240px;
}
.scheduler-asso .grid-content-td .button-container,
.scheduler-asso .grid-content-td .combobox-container,
.mac-filter-asso .grid-content-td .button-container,
.mac-filter-asso .grid-content-td .combobox-container {
  display: inline-block;
}
.scheduler-asso .grid-content-td .combobox-wrap,
.mac-filter-asso .grid-content-td .combobox-wrap {
  width: 100px;
}
.scheduler-asso .grid-content-td-profileId .combobox-wrap,
.scheduler-asso .grid-content-td-macListId .combobox-wrap,
.mac-filter-asso .grid-content-td-profileId .combobox-wrap,
.mac-filter-asso .grid-content-td-macListId .combobox-wrap {
  width: 200px;
}

.mac-filter-container {
  margin-bottom: 24px;
}

#association-mode-btn {
  margin-bottom: 30px;
}

#global-combobox-options[data-shown^=grid-content] .combobox-label {
  word-break: break-all;
}

.scheduler-checkbox-group.checkbox-group-container .checkbox-list {
  width: 61px;
}

.qos .grid-content-td .td-content > .widget-container {
  display: inline-block;
}
.qos .grid-content-td .text-wrap,
.qos .grid-content-td .combobox-wrap {
  width: 100px;
}

.band-tags .band-tag {
  display: inline-block;
  line-height: 24px;
  padding: 0 8px;
  margin: 2px 3px;
  border-radius: 5px;
  background: var(--tag-highlight, #e5e5e5);
  white-space: nowrap;
}
.band-tags .band-tag.band-2g {
  color: #FF9500;
}
.band-tags .band-tag.band-5g {
  color: #0DC901;
}
.band-tags .band-tag.band-6g {
  color: #6236FF;
}

#global-combobox-options[data-shown=radius-profile-combo] #create-new-schedule,
#global-combobox-options[data-shown=radius-profile-combo] #wlan-group-add-btn,
#global-combobox-options[data-shown=radius-profile-combo] #add-radius-profile-btn,
#global-combobox-options[data-shown=radius-profile-combo] #add-ppsk-profile-btn,
#global-combobox-options[data-shown=ppsk-profile-combo] #create-new-schedule,
#global-combobox-options[data-shown=ppsk-profile-combo] #wlan-group-add-btn,
#global-combobox-options[data-shown=ppsk-profile-combo] #add-radius-profile-btn,
#global-combobox-options[data-shown=ppsk-profile-combo] #add-ppsk-profile-btn,
#global-combobox-options[data-shown=wlan-group-combo] #create-new-schedule,
#global-combobox-options[data-shown=wlan-group-combo] #wlan-group-add-btn,
#global-combobox-options[data-shown=wlan-group-combo] #add-radius-profile-btn,
#global-combobox-options[data-shown=wlan-group-combo] #add-ppsk-profile-btn,
#global-combobox-options[data-shown=schedule-profile-combo] #create-new-schedule,
#global-combobox-options[data-shown=schedule-profile-combo] #wlan-group-add-btn,
#global-combobox-options[data-shown=schedule-profile-combo] #add-radius-profile-btn,
#global-combobox-options[data-shown=schedule-profile-combo] #add-ppsk-profile-btn {
  display: flex;
  align-items: center;
  padding: 5px 5px;
  border-top: 1px solid var(--s-color-text-split, #EBECED);
  cursor: pointer;
  margin-top: 10px;
}
#global-combobox-options[data-shown=radius-profile-combo] #create-new-schedule:hover,
#global-combobox-options[data-shown=radius-profile-combo] #wlan-group-add-btn:hover,
#global-combobox-options[data-shown=radius-profile-combo] #add-radius-profile-btn:hover,
#global-combobox-options[data-shown=radius-profile-combo] #add-ppsk-profile-btn:hover,
#global-combobox-options[data-shown=ppsk-profile-combo] #create-new-schedule:hover,
#global-combobox-options[data-shown=ppsk-profile-combo] #wlan-group-add-btn:hover,
#global-combobox-options[data-shown=ppsk-profile-combo] #add-radius-profile-btn:hover,
#global-combobox-options[data-shown=ppsk-profile-combo] #add-ppsk-profile-btn:hover,
#global-combobox-options[data-shown=wlan-group-combo] #create-new-schedule:hover,
#global-combobox-options[data-shown=wlan-group-combo] #wlan-group-add-btn:hover,
#global-combobox-options[data-shown=wlan-group-combo] #add-radius-profile-btn:hover,
#global-combobox-options[data-shown=wlan-group-combo] #add-ppsk-profile-btn:hover,
#global-combobox-options[data-shown=schedule-profile-combo] #create-new-schedule:hover,
#global-combobox-options[data-shown=schedule-profile-combo] #wlan-group-add-btn:hover,
#global-combobox-options[data-shown=schedule-profile-combo] #add-radius-profile-btn:hover,
#global-combobox-options[data-shown=schedule-profile-combo] #add-ppsk-profile-btn:hover {
  color: #04B0FF;
}
#global-combobox-options[data-shown=radius-profile-combo] #create-new-schedule > span,
#global-combobox-options[data-shown=radius-profile-combo] #wlan-group-add-btn > span,
#global-combobox-options[data-shown=radius-profile-combo] #add-radius-profile-btn > span,
#global-combobox-options[data-shown=radius-profile-combo] #add-ppsk-profile-btn > span,
#global-combobox-options[data-shown=ppsk-profile-combo] #create-new-schedule > span,
#global-combobox-options[data-shown=ppsk-profile-combo] #wlan-group-add-btn > span,
#global-combobox-options[data-shown=ppsk-profile-combo] #add-radius-profile-btn > span,
#global-combobox-options[data-shown=ppsk-profile-combo] #add-ppsk-profile-btn > span,
#global-combobox-options[data-shown=wlan-group-combo] #create-new-schedule > span,
#global-combobox-options[data-shown=wlan-group-combo] #wlan-group-add-btn > span,
#global-combobox-options[data-shown=wlan-group-combo] #add-radius-profile-btn > span,
#global-combobox-options[data-shown=wlan-group-combo] #add-ppsk-profile-btn > span,
#global-combobox-options[data-shown=schedule-profile-combo] #create-new-schedule > span,
#global-combobox-options[data-shown=schedule-profile-combo] #wlan-group-add-btn > span,
#global-combobox-options[data-shown=schedule-profile-combo] #add-radius-profile-btn > span,
#global-combobox-options[data-shown=schedule-profile-combo] #add-ppsk-profile-btn > span {
  line-height: 22px;
  display: inline-block;
  vertical-align: middle;
}
#global-combobox-options[data-shown=radius-profile-combo] #create-new-schedule .btn-add-black,
#global-combobox-options[data-shown=radius-profile-combo] #wlan-group-add-btn .btn-add-black,
#global-combobox-options[data-shown=radius-profile-combo] #add-radius-profile-btn .btn-add-black,
#global-combobox-options[data-shown=radius-profile-combo] #add-ppsk-profile-btn .btn-add-black,
#global-combobox-options[data-shown=ppsk-profile-combo] #create-new-schedule .btn-add-black,
#global-combobox-options[data-shown=ppsk-profile-combo] #wlan-group-add-btn .btn-add-black,
#global-combobox-options[data-shown=ppsk-profile-combo] #add-radius-profile-btn .btn-add-black,
#global-combobox-options[data-shown=ppsk-profile-combo] #add-ppsk-profile-btn .btn-add-black,
#global-combobox-options[data-shown=wlan-group-combo] #create-new-schedule .btn-add-black,
#global-combobox-options[data-shown=wlan-group-combo] #wlan-group-add-btn .btn-add-black,
#global-combobox-options[data-shown=wlan-group-combo] #add-radius-profile-btn .btn-add-black,
#global-combobox-options[data-shown=wlan-group-combo] #add-ppsk-profile-btn .btn-add-black,
#global-combobox-options[data-shown=schedule-profile-combo] #create-new-schedule .btn-add-black,
#global-combobox-options[data-shown=schedule-profile-combo] #wlan-group-add-btn .btn-add-black,
#global-combobox-options[data-shown=schedule-profile-combo] #add-radius-profile-btn .btn-add-black,
#global-combobox-options[data-shown=schedule-profile-combo] #add-ppsk-profile-btn .btn-add-black {
  margin-right: 4px;
}

#global-combobox-options[data-shown=radius-profile-combo].none-items .combobox-empty-tip,
#global-combobox-options[data-shown=ppsk-profile-combo] .combobox-empty-tip,
#global-combobox-options[data-shown=schedule-profile-combo].none-items .combobox-empty-tip,
#global-combobox-options[data-shown=poe-sp-combo].none-items .combobox-empty-tip,
#global-combobox-options[data-shown=mac-address-combo].none-items .combobox-empty-tip {
  word-break: break-word;
  white-space: unset;
  padding: 8px 12px;
  margin-bottom: 0;
}

.custom-edit-container .custom-enable-container {
  width: 210px;
}

#add-radius-profile-btn .button-button {
  line-height: 26px;
  height: 28px;
}

.new-schedule-spliter {
  height: 1px;
  background: var(--s-color-text-split, #EBECED);
}

.accordion-item[data-name=wlanSchedule] #wlan-schedule-radio {
  display: flex;
  position: relative;
}
.accordion-item[data-name=wlanSchedule] #wlan-schedule-radio .tooltip-container {
  align-self: flex-end;
  margin-bottom: 10px;
}
.accordion-item[data-name=wlanSchedule] .wlan-schedule-container {
  display: flex;
  align-items: flex-start;
}
.accordion-item[data-name=wlanSchedule] .wlan-schedule-container .action-tooltips {
  margin-left: -18px;
}
.accordion-item[data-name=wlanSchedule] .custom-container .checkbox-container {
  width: 150px;
}
.accordion-item[data-name=wlanSchedule] .time-display-container {
  border: 1px solid #EBEDED;
  border-radius: 3px;
  display: inline-block;
  padding: 10px 20px;
}
.accordion-item[data-name=wlanSchedule] .time-display-container .time-display-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #EBEDED;
}
.accordion-item[data-name=wlanSchedule] .time-display-container .time-display-content {
  padding-top: 10px;
}

.time-range-loader .time-display-container {
  border: 1px solid #EBEDED;
  border-radius: 3px;
  display: inline-block;
  padding: 10px 20px;
}
.time-range-loader .time-display-container .time-display-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #EBEDED;
}
.time-range-loader .time-display-container .time-display-content {
  padding-top: 10px;
}

.down-performance-tip {
  vertical-align: baseline;
}

#wireless-create-limit .msg-wrap {
  width: 740px;
}

.wps-psk-combo.hide-tip .tooltip-container {
  display: none;
}

.security-combo.hide-tip .tooltip-container {
  display: none;
}

#global-combobox-options[data-shown=mac-address-combo] #create-new-group {
  display: flex;
  align-items: center;
  padding: 5px 16px;
  border-top: 1px solid var(--s-color-text-split, #EBECED);
  cursor: pointer;
  margin-top: 10px;
}
#global-combobox-options[data-shown=mac-address-combo] #create-new-group:hover {
  color: #04B0FF;
}
#global-combobox-options[data-shown=mac-address-combo] #create-new-group > span {
  line-height: 22px;
  display: inline-block;
  vertical-align: middle;
}
#global-combobox-options[data-shown=mac-address-combo] #create-new-group .btn-add-black {
  margin-right: 4px;
}

#ws-sp-btn,
#ws-mf-btn {
  vertical-align: top;
}

#create-new-group-msg .msg-wrap {
  width: 800px;
}
#create-new-group-msg .grid-title {
  position: absolute;
  line-height: 28px;
  color: var(--tab-color-primary, #868E93);
}
#create-new-group-msg .mac-group-container .page-container {
  padding: 0;
}

.accordion-item[data-name=macFilter] .mac-filter-security-container {
  position: relative;
}
.accordion-item[data-name=macFilter] .mac-filter-security-container .security-tooltips {
  right: -26px;
  position: absolute;
}
.accordion-item[data-name=macFilter] .mac-filter-security-container .whitelist-tooltip {
  top: 5px;
}
.accordion-item[data-name=macFilter] .mac-filter-security-container .blacklist-tooltip {
  height: 18px;
  bottom: 18px;
  top: unset;
}
.accordion-item[data-name=macFilter] .mac-address-label {
  vertical-align: top;
  width: 210px;
}

#add-mac-msg .msg-content-container {
  max-height: 500px;
}

#add-new-mac-repeat .repeat-item {
  margin-bottom: 30px;
}
#add-new-mac-repeat .repeat-item:first-child .delete-btn-container {
  display: none;
}

.mac-addr-container {
  color: var(--tab-color-primary, #868E93);
  border-bottom: 1px solid var(--s-color-text-split, #EBECED);
}
.mac-addr-container .delete-btn-container {
  text-align: right;
}

.override-mac-container.aequilate-item {
  width: 60%;
}

.import-mac-container.aequilate-item {
  width: 30%;
  text-align: right;
}

#batch-add-mac-msg .textarea-container {
  margin-bottom: 30px;
}
#batch-add-mac-msg .textarea-container .widget-error-tips {
  position: absolute;
}
#batch-add-mac-msg .textarea-container .text-wrap {
  height: 200px;
}

.text-combo-container .text-container .text-wrap {
  border-radius: 3px 0 0 3px;
}
.text-combo-container .combobox-container .combobox-wrap {
  border-radius: 0 3px 3px 0;
}

.density-slider-container {
  min-width: 600px;
}
.density-slider-container .num-container,
.density-slider-container .info-container {
  padding-left: 210px;
  font-size: 14px;
  position: relative;
}
.density-slider-container .num-container > span,
.density-slider-container .info-container > span {
  width: 176px;
  display: inline-block;
}
.density-slider-container .num-container > span.lst,
.density-slider-container .info-container > span.lst {
  text-align: right;
}
.density-slider-container .num-container {
  color: var(--tab-color-primary, #868E93);
}

.density-slider.slider-container .slider-content {
  background: #0492EB;
}
.density-slider.slider-container .slider-content .slider-value {
  background: #BEC3C5;
}

#auto-backup .backup-time .combobox-wrap.widget-wrap {
  width: 114px;
}
#auto-backup .label-space {
  margin-right: 12px;
}
#auto-backup .widget-fieldlabel-wrap {
  width: 172px;
}
#auto-backup .auto-backup-tip {
  margin-top: 2px;
}

#auto-backup-grid.exporting .grid-content-td a.btn-restore .icon,
#auto-backup-grid.exporting .grid-content-td a.btn-delete .icon,
#auto-backup-grid.exporting .grid-content-td a.btn-export .icon {
  cursor: no-drop;
  opacity: 0.3;
}

.status-info .accordion-body .accordion-item {
  padding-right: 30px;
  padding-left: 30px;
}
.status-info .storage-bar .progressbar-content {
  width: 600px;
  height: 20px;
}
.status-info .storage-bar .progressbar-content,
.status-info .storage-bar .progressbar-content .progressbar-value {
  border-radius: 10px;
}
.status-info .storage-info {
  margin-bottom: 30px;
}
.status-info .status-info-table {
  width: 100%;
}

#batch-upgrade-online .msg-wrap {
  width: 960px;
}
#batch-upgrade-online #show-error-detail {
  margin-left: 12px;
}
#batch-upgrade-online #upgrade-online .progressbar-content {
  width: 200px;
}
#batch-upgrade-online #cancel-download-btn {
  margin-bottom: 0;
  position: relative;
  top: -9px;
}
#batch-upgrade-online #upgrade-online-detail {
  position: absolute;
  top: 154px;
  left: 306px;
}

#show-error-detail-local {
  margin-left: 12px;
}

#upgrade-local-detail {
  position: absolute;
  top: 110px;
  left: 306px;
}

#upload-firmware .msg-wrap,
#error-detail .msg-wrap {
  width: 720px;
}

#upgrade-local .progressbar-content {
  width: 200px;
}

.upgrade-success {
  vertical-align: middle;
  color: #005564;
}

.online-status {
  position: absolute;
  right: 28px;
  font-size: 16px;
  top: 60px;
}
.online-status.online {
  color: #4acbd6;
}
.online-status.offline {
  color: #c11c66;
}

.cloud-access-title {
  position: absolute;
  left: 28px;
  font-size: 16px;
  top: 60px;
  margin-bottom: 0;
  color: var(--s-color-text-primary, #212121);
  font-weight: bold;
}

.cloud-user-delete.loading + .button-loading {
  display: inline-block;
}

.cloud-login-msg.msg-container .msg-wrap {
  width: 695px;
}

#maintenance-reset-btn {
  margin-left: 0;
}

#backup-tip-container {
  height: 150px;
  line-height: 150px;
}

.success-result-tip {
  color: #0492EB;
}

.fail-result-tip {
  color: #FF2954;
}

#restore-compatible-msg .button-container + .button-container,
#whitelist-msg .button-container + .button-container,
#sw-batch-jumbo-fail-msg .button-container + .button-container {
  margin-left: 0;
}
#restore-compatible-msg .warn-info,
#whitelist-msg .warn-info,
#sw-batch-jumbo-fail-msg .warn-info {
  color: #FF2954;
}
#restore-compatible-msg .device-item,
#whitelist-msg .device-item,
#sw-batch-jumbo-fail-msg .device-item {
  display: inline-block;
  height: 25px;
  line-height: 25px;
  padding: 0 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 3px;
  background: var(--tag-background-primary, rgba(73, 84, 107, 0.08));
}
#restore-compatible-msg .setting-item,
#whitelist-msg .setting-item,
#sw-batch-jumbo-fail-msg .setting-item {
  display: block;
  line-height: 25px;
}
#restore-compatible-msg .setting-item:before,
#whitelist-msg .setting-item:before,
#sw-batch-jumbo-fail-msg .setting-item:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  margin-right: 10px;
  background: var(--s-color-text-primary, #212121);
}

.hw-current-version.loading {
  margin-right: 10px;
}

#new-version-text {
  padding-left: 210px;
}
#new-version-text .paragraph-wrap-outer {
  min-width: 240px;
  border-radius: 3px;
  padding: 10px 10px 10px 28px;
  line-height: 16px;
}
#new-version-text .paragraph-wrap-outer:before {
  top: 12px;
  left: 10px;
  width: 10px;
  height: 10px;
  background: #0DC901;
  border-radius: 100%;
}
#new-version-text .paragraph-wrap-outer .new-version-link {
  margin-left: 10px;
}

.backup-info-container {
  height: 20px;
  line-height: 20px;
}
.backup-info-container > div {
  margin-bottom: 0;
  vertical-align: middle;
}
.backup-info-container .icon.loading {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  display: inline-block;
  animation: circle 1s infinite linear;
  -webkit-animation: circle 1s infinite linear;
  /* Safari,Chrome */
  background: url(../img/svg/Loading.svg);
}

#backup-progressbar .widget-fieldlabel-wrap,
.export-progressbar .widget-fieldlabel-wrap {
  display: none;
}
#backup-progressbar .progressbar-content,
.export-progressbar .progressbar-content {
  height: 8px;
}
#backup-progressbar .progressbar-text,
.export-progressbar .progressbar-text {
  position: absolute;
  top: -32px;
  right: 0;
}

@media screen and (max-width: 1100px) {
  #backup-button {
    display: block;
    margin-left: 0;
  }

  #backup-note {
    margin-left: 0;
  }

  .backup-info-container {
    padding-left: 0;
  }

  #backup-progressbar,
.export-progressbar {
    padding-left: 0;
  }
  #backup-progressbar .progressbar-content,
.export-progressbar .progressbar-content {
    width: 430px;
  }

  #upgrade-for-file-btn .widget-fieldlabel-wrap {
    display: none;
  }
}
#file-path-msg .msg-content-container {
  height: 500px;
}
#file-path-msg .tree-select-dropdown-children-ul {
  max-height: 100%;
}
#file-path-msg .tree-select-wrap-outer {
  width: 100%;
}

#policyEditor .combination-wrap-outer .separator {
  display: inline-block;
  margin: 0 8px;
  height: 30px;
  vertical-align: top;
  line-height: 30px;
}
#policyEditor .combination-wrap-outer [widget=textbox] .text-wrap {
  width: 60px;
}
#policyEditor .combination-wrap-outer [widget=textbox] [widget=errortip] {
  margin-left: -30px;
}

#hotspot-index-view .header__btn .tab_menu .tab-btn.first.last {
  padding-bottom: 10px;
}

#voucherView .suffix .combobox-wrap.widget-wrap {
  width: 90px;
}

#operator-list-grid [widget=password] .text-wrap {
  border: none;
}
#operator-list-grid .password-wrap {
  width: 130px;
}

#show-start-time .text-wrap-outer,
#show-start-time .widget-fieldlabel-wrap,
#show-end-time .text-wrap-outer,
#show-end-time .widget-fieldlabel-wrap {
  line-height: 14px;
}

#voucher-list-grid_paging {
  position: absolute;
  right: 10px;
}

#voucher-list-grid .grid-panel-selected-container {
  line-height: 28px;
}
#voucher-list-grid .note {
  width: auto;
  background-color: var(--table-background-primary, white);
  border: none;
}
#voucher-list-grid .note:before {
  content: none;
}

#voucher-list-grid .grid-panel-tbar-container .search-bar-container .text-wrap,
#user-list-grid .grid-panel-tbar-container .search-bar-container .text-wrap {
  width: 240px;
}

#auth-clients-grid .text-container .text-wrap {
  max-width: 320px;
}
#auth-clients-grid .grid-panel-tbar-container .search-bar-container .text-wrap {
  width: 320px;
}

.btn-user-count .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconUserCount.svg);
}

.btn-online-user .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconUserOnline.svg);
}

.print-select {
  position: absolute;
  left: 250px;
  top: 0;
}
.print-select .widget-fieldlabel-wrap {
  width: auto;
}

.grid-time-year {
  font-size: 12px;
}

.grid-time-day {
  font-size: 12px;
  color: var(--tab-color-primary, #868E93);
}

.import-user .icon {
  width: 24px;
  height: 24px;
  background: url("../img/svg/TableIconImport.svg") no-repeat;
}
.import-user .icon:hover {
  width: 24px;
  height: 24px;
  background: url("../img/svg/TableIconImportHover.svg") no-repeat;
}
.import-user.disabled .icon {
  background-image: url("../img/svg/TableIconImportHover.svg");
}

.export-user .icon {
  width: 24px;
  height: 24px;
  background: url("../img/svg/TableIconExport.svg") no-repeat;
}
.export-user .icon:hover {
  width: 24px;
  height: 24px;
  background: url("../img/svg/TableIconExportHover.svg") no-repeat;
}

#global-combobox-options[data-shown=time-unit] .combobox-label,
#global-combobox-options[data-shown=download-bandwidth-unit] .combobox-label,
#global-combobox-options[data-shown=upload-bandwidth-unit] .combobox-label,
#global-combobox-options[data-shown=egress-bandwidth-unit] .combobox-label,
#global-combobox-options[data-shown=ingress-bandwidth-unit] .combobox-label {
  padding-right: 0;
}

#status-label {
  display: inline-block;
}
#status-label .text-wrap-display {
  display: inline-block;
  border: 1px solid;
  vertical-align: middle;
  margin-right: 4px;
  height: 20px;
  line-height: 20px;
  padding: 0 4px;
  border-radius: 2px;
}
#status-label .sprite-ico {
  cursor: default;
  margin: 0 4px 0 0;
}
#status-label.normal .text-wrap-display {
  color: #0492EB;
}
#status-label.done .text-wrap-display {
  color: #0DC901;
}
#status-label.fail .text-wrap-display {
  color: #FF2954;
}
#status-label.warn .text-wrap-display {
  color: #FF9500;
}

#hotspot-view #page-content {
  padding: 30px 20px;
}

#hotspot-container {
  overflow: auto;
  height: 100%;
  padding-top: 16px;
  background-color: var(--s-background-main, #f2f3f5);
}

#dynamic-clear-button {
  margin-right: 117px;
}

#user-list-grid_popEditor-msg .msg-wrap {
  width: 700px;
}

#user-list-grid_popEditor-msg .widget-tips .tips-content {
  max-width: 225px;
}

#global-loading,
.launch-fail-container {
  height: 100%;
  width: 100%;
  position: absolute;
  display: table;
  left: 0;
  top: 0;
  z-index: 1000;
  background: var(--s-background-main, #FFF);
  color: var(--s-color-text-primary, #212121);
}
#global-loading .loading-container-wrap,
.launch-fail-container .loading-container-wrap {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
#global-loading .loading-waiting-text,
.launch-fail-container .loading-waiting-text {
  font-size: 18px;
}
#global-loading .loading-waiting-icon,
#global-loading .launch-fail-icon,
.launch-fail-container .loading-waiting-icon,
.launch-fail-container .launch-fail-icon {
  width: 300px;
  padding-top: 90px;
  display: inline-block;
  margin: 0 auto;
}

.launch-fail-container {
  margin-bottom: 0;
}
.launch-fail-container .launch-fail-title {
  font-weight: bold;
}
.launch-fail-container .launch-fail-content {
  display: inline-block;
  width: 400px;
}
.launch-fail-container #launch-fail-button {
  margin-top: 30px;
  border-radius: 15px;
}
.launch-fail-container #launch-fail-button .button-button {
  font-size: 18px;
  padding: 5px 30px;
  height: 36px;
  line-height: 26px;
  border-radius: 20px;
}

.not-found-page {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #fff;
  z-index: 99;
}
.not-found-page .content-404 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.not-found-page .img-404 {
  display: table-cell;
  width: 260px;
  height: 260px;
  background-image: url("../img/404.png");
}
.not-found-page .text-container-404 {
  display: table-cell;
  padding-left: 40px;
  vertical-align: middle;
}
.not-found-page .header-404 {
  font-size: 24px;
  line-height: 31px;
}

.forget-all .icon {
  display: inline-block;
}

.grid-container .grid-content-td[name=combobox], .grid-container .grid-content-td[name=button], .grid-container .grid-content-td[name=action-column], .grid-container .grid-content-td[name=textbox], .grid-container .grid-content-td[name=settings-column] {
  padding: 0;
}

.tab-container.tab_panel {
  position: absolute;
  top: -33px;
  right: 0;
}

.tab-container.tab_hertz .tab-btn {
  width: 60px;
}

#usagePaging .tab-btn {
  width: 52px;
}

.editor-container .grid-container.widget-container {
  padding: 20px 0;
  padding-left: 18px;
  border: 1px solid #4acbd6;
}

.button-container.button_independent {
  margin-top: 30px;
}

.aequilate-item-container {
  display: table;
  width: 100%;
  margin-bottom: 12px;
}

.aequilate-item {
  width: 50%;
  display: table-cell;
  vertical-align: middle;
}
.aequilate-item.link-button {
  vertical-align: bottom;
}
.aequilate-item.profile-combo {
  width: 60%;
}

.text-teal {
  color: #4acbd6;
}

.text-danger {
  color: #FF2954;
}

.tips-content {
  font-weight: normal;
  font-size: 12px;
  color: var(--tab-color-primary, #868E93);
}

.checkbox-container .tips-content {
  color: var(--s-color-text-primary, #212121);
}

.grid-header-container {
  font-size: 14px;
}

.note-container {
  color: var(--tips-color, #7d7e80);
  line-height: 18px;
}
.note-container .note-label {
  font-weight: bold;
}
.note-container .note-content {
  padding-left: 34px;
}
.note-container.note-warning {
  color: #FF2954;
}

.paragraph-container.alert .paragraph-wrap-outer,
.paragraph-container.warn .paragraph-wrap-outer,
.paragraph-container.info .paragraph-wrap-outer {
  padding: 16px 10px 16px 50px;
  position: relative;
}
.paragraph-container.alert .paragraph-wrap-outer:before,
.paragraph-container.warn .paragraph-wrap-outer:before,
.paragraph-container.info .paragraph-wrap-outer:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 13px;
  top: 10px;
}
.paragraph-container.alert.alert .paragraph-wrap-outer,
.paragraph-container.warn.alert .paragraph-wrap-outer,
.paragraph-container.info.alert .paragraph-wrap-outer {
  border: 1px solid #FFAA00;
}
.paragraph-container.alert.warn .paragraph-wrap-outer,
.paragraph-container.warn.warn .paragraph-wrap-outer,
.paragraph-container.info.warn .paragraph-wrap-outer {
  border: 1px solid #FF2954;
  background: rgba(255, 41, 84, 0.08);
}
.paragraph-container.alert.info .paragraph-wrap-outer,
.paragraph-container.warn.info .paragraph-wrap-outer,
.paragraph-container.info.info .paragraph-wrap-outer {
  border: 1px solid #0492EB;
  background: rgba(4, 146, 235, 0.08);
}
.paragraph-container.alert.full-line .paragraph-wrap-outer,
.paragraph-container.warn.full-line .paragraph-wrap-outer,
.paragraph-container.info.full-line .paragraph-wrap-outer {
  display: block;
}

.note-with-top-line {
  border-top: 1px solid #bdbdbd;
  padding-top: 8px;
}

.repeat_inline.repeat-container .repeat-item {
  display: inline-block;
}

.max-width-350 {
  max-width: 350px;
}

#qos-restore .widget-fieldlabel-wrap:after,
#qos-delivery .widget-fieldlabel-wrap:after,
#allow-skip-checkbox .widget-fieldlabel-wrap:after,
.update-period-textbox .widget-fieldlabel-wrap:after,
#welcome-color-picker .widget-fieldlabel-wrap:after,
#add-configuration .widget-fieldlabel-wrap:after,
.facebook-label .widget-fieldlabel-wrap:after,
#accounting-server-password .widget-fieldlabel-wrap:after,
#radius-mac-Authentication .widget-fieldlabel-wrap:after,
#authentication-server-port .widget-fieldlabel-wrap:after,
#authentication-server-password .widget-fieldlabel-wrap:after,
#upgrade-schedule-repeat .widget-fieldlabel-wrap:after,
#mab-fallback .widget-fieldlabel-wrap:after,
.time-label .widget-fieldlabel-wrap:after {
  content: "";
  width: 0;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

.mask {
  position: fixed;
  background: var(--s-color-mask, rgba(81, 81, 81, 0.3));
  filter: alpha(opacity=30);
}

.client-edit-msg .tab-container {
  margin-top: -10px;
}

.client-edit-msg.msg-container.window .msg-wrap {
  width: 700px;
}
.client-edit-msg.msg-container.window .msg-content-container .widget-tips .tips-content {
  max-width: 210px;
}

.host-name {
  cursor: pointer;
  text-decoration: underline;
}
.host-name:hover {
  color: #04B0FF;
}
.host-name:active {
  color: #0492EB;
}

#unbind-account-btn {
  margin-left: 25px;
}

.no-label {
  margin-left: 210px;
}

.timezone .widget-wrap {
  width: 425px;
  max-width: 425px;
}

.keynote {
  font-weight: bold;
  color: #7d7e80;
  line-height: 18px;
}
.keynote.fail {
  color: #c11c66;
}

#global-combobox-options[data-shown=ca-site-combobox] li.combobox-list .icon {
  vertical-align: text-top;
}
#global-combobox-options[data-shown=ca-site-combobox] li.combobox-list .text {
  display: inline-block;
  vertical-align: text-top;
  margin-left: 3px;
}
#global-combobox-options[data-shown=ca-site-combobox] li.combobox-list:hover {
  background: #eeeeee;
  border-color: #4acbd6;
}
#global-combobox-options[data-shown=ca-site-combobox] li.combobox-list:hover .text {
  color: #4acbd6;
}

.module-title {
  font-size: 14px;
  color: var(--s-color-side, #363E4D);
}

#site-file .file-button-container {
  display: inline-block;
  margin-left: 5px;
  vertical-align: middle;
}

#site-copy-note {
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
}

#import-site-msg .note {
  margin-left: 210px;
  width: auto;
}

#site-settings-view div[widget=combobox].sm .combobox-wrap {
  width: 110px;
}
#site-settings-view div[widget=time].sm .time-display-container {
  width: 110px;
}
#site-settings-view div#alert-delay .widget-wrap {
  width: 120px;
  max-width: 120px;
}
#site-settings-view div#alert-delay .textbox-tips {
  vertical-align: bottom;
}
#site-settings-view div#alert-delay .textbox-tips .tips-content {
  color: var(--s-color-text-primary, #212121);
  font-size: 14px;
  height: 24px;
  line-height: 24px;
  vertical-align: middle;
}
#site-settings-view #site-advanced-help {
  max-width: 622px;
}

#global-combobox-options[data-shown=site-scenario] .combobox-list-editor-wrap {
  border-top: 1px solid var(--s-color-text-split, #EBECED);
}
#global-combobox-options[data-shown=site-scenario] .combobox-list-editor-wrap li label {
  display: block;
  padding: 5px 16px 0px 10px;
  line-height: 1.14;
  white-space: nowrap;
  position: relative;
}
#global-combobox-options[data-shown=site-scenario] .combobox-list-editor-wrap li.create-new-scenario span.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: var(--icon-select-add, url(../img/svg/SelectIconAdd.svg)) no-repeat;
}

.speed-test-history {
  color: #0492EB;
  cursor: pointer;
  margin-left: 16px;
}

.vlan-id {
  margin-left: 10px;
}
.vlan-id .widget-wrap {
  width: 80px;
}

.advanced-setting {
  padding: 18px 0;
  cursor: pointer;
  display: inline-block;
  line-height: 17px;
  font-size: 14px;
  color: var(--s-color-text-primary, #212121);
  letter-spacing: 0;
}
.advanced-setting:before {
  margin-right: 10px;
  width: 16px;
  height: 16px;
  content: " ";
  display: inline-block;
  background: url(../img/svg/IconToggleOpen.svg) no-repeat;
  vertical-align: top;
}
.advanced-setting.open:before {
  background: url(../img/svg/IconToggleClose.svg) no-repeat;
}

.no-connected-container {
  height: 754px;
  text-align: center;
}
.no-connected-container .panel-content-container {
  margin-top: 160px;
}
.no-connected-container .no-connected-icon {
  display: inline-block;
  width: 180px;
  height: 180px;
  background: url(../img/NoGateway.png) no-repeat;
}
.no-connected-container .no-connected-title {
  font-size: 16px;
  color: var(--s-color-text-primary, #212121);
  letter-spacing: 0;
}
.no-connected-container .no-connected-content {
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  letter-spacing: 0;
}

div#internet-view #wan-change-tip {
  display: none;
}
div#internet-view #wan-change-tip .paragraph-wrap-outer {
  max-width: 625px;
}
div#internet-view #backup-mode-radio ul.radio-group-list-wrap {
  position: relative;
}
div#internet-view #backup-mode-radio ul.radio-group-list-wrap .tooltip-icon-container {
  height: 16px;
}
div#internet-view #backup-mode-radio ul.radio-group-list-wrap div.widget-wrap,
div#internet-view #backup-mode-radio ul.radio-group-list-wrap .radio-content-wrap {
  display: inline-block;
  line-height: 24px;
}
div#internet-view div[widget=combination].weight-combination {
  margin-bottom: 0;
}
div#internet-view div[widget=combination].weight-combination div[widget=textbox] {
  margin-bottom: 12px;
  margin-right: 16px;
}
div#internet-view div[widget=combination].weight-combination div[widget=textbox] .text-wrap {
  width: 140px;
}
div#internet-view div[widget=combination].weight-combination div[widget=textbox]:after {
  position: absolute;
  content: ":";
  display: inline-block;
  margin-top: 6px;
  margin-left: 6px;
}
div#internet-view div[widget=combination].weight-combination div[widget=textbox].last:after {
  content: "";
}
div#internet-view div[widget=combination].weight-combination span.separator {
  display: none;
}
div#internet-view div[widget=combination].weight-combination .widget-fieldlabel-wrap {
  margin-bottom: 12px;
}
div#internet-view #pre-populate .button-button {
  font-size: 14px;
  height: 27px;
  line-height: 26px;
}

@keyframes speed-circle {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(720deg);
  }
}
#speed-test-msg .speed-test-progress-bg {
  margin: 112px auto 141px;
  width: 160px;
  height: 160px;
  background-image: url(../img/speed-test-bg.png);
}
#speed-test-msg .speed-test-progress-mask {
  width: 160px;
  height: 160px;
  background-image: url(../img/speed-test-mask.png);
  animation: speed-circle 3s infinite cubic-bezier(0.31, 0.67, 0.77, 0.35);
}
#speed-test-msg .speed-test-tip {
  font-size: 14px;
  color: var(--s-color-side, var(--s-color-side, #363E4D));
  letter-spacing: 0;
  line-height: 20px;
}
#speed-test-msg .speed-test-progress {
  vertical-align: top;
}
#speed-test-msg .speed-test-progress .progressbar-content {
  display: none;
}
#speed-test-msg .speed-test-tip-secondary {
  width: 380px;
  margin: 8px auto 29px;
  margin-bottom: 29px;
  font-size: 12px;
  color: #AEB4B7;
}
#speed-test-msg .msg-content-container {
  text-align: center;
}
#speed-test-msg div#speed-test-download {
  margin-right: 80px;
}
#speed-test-msg .speed-test-container {
  background-color: var(--card-primary, #F8F9FB);
  width: 610px;
  height: 98px;
  margin-bottom: 16px;
  padding: 17px 6px;
}
#speed-test-msg .speed-test-container .speed-test-title {
  text-align: center;
  font-size: 16px;
  color: var(--s-color-side, #363E4D);
  border-right: 1px solid var(--s-color-text-split, #EBECED);
  line-height: 64px;
  width: 90px;
}
#speed-test-msg .speed-test-container .speed-test-content {
  font-size: 14px;
  color: var(--s-color-side, #363E4D);
  width: 164px;
  vertical-align: middle;
  opacity: 0.5;
}
#speed-test-msg .speed-test-container .speed-test-content.enable {
  opacity: 1;
}
#speed-test-msg .speed-test-container .speed-test-content.latency .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/ChartIconLatency.svg) no-repeat;
}
#speed-test-msg .speed-test-container .speed-test-content.download .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/ChartIconDownlink.svg) no-repeat;
}
#speed-test-msg .speed-test-container .speed-test-content.upload .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/ChartIconUplink.svg) no-repeat;
}
#speed-test-msg .speed-test-container .speed-test-content div.title {
  margin-bottom: 4px;
  text-align: center;
}
#speed-test-msg .speed-test-container .speed-test-content div.title span.unit {
  font-size: 12px;
  color: #AEB4B7;
}
#speed-test-msg .speed-test-container .speed-test-content div[widget=displaylabel] {
  font-size: 28px;
  color: var(--s-color-side, #363E4D);
  text-align: center;
}
#speed-test-msg .speed-test-bottom {
  height: 15px;
  background: var(--icon-speed-test, url("../img/svg/Speedtest Powered.svg")) no-repeat 50%;
}

#wired-lan-tab .tab-btn.wired-lan-networks:before {
  content: " ";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: var(--icon-menu-internet, url(../img/svg/TabsIconInternet.svg));
  position: relative;
  top: 3px;
  margin-right: 5px;
}
#wired-lan-tab .tab-btn.wired-lan-networks.selected:before {
  background: url(../img/svg/TabsIconInternetSelected.svg);
}
#wired-lan-tab .tab-btn.wired-lan-networks:hover:before {
  background: url(../img/svg/TabsIconInternetSelected.svg);
}
#wired-lan-tab .tab-btn.wired-lan-profiles:before {
  content: " ";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: var(--icon-menu-profile, url(../img/svg/TabsIconProfiles.svg));
  position: relative;
  top: 3px;
  margin-right: 5px;
}
#wired-lan-tab .tab-btn.wired-lan-profiles.selected:before {
  background: url(../img/svg/TabsIconProfilesSelected.svg);
}
#wired-lan-tab .tab-btn.wired-lan-profiles:hover:before {
  background: url(../img/svg/TabsIconProfilesSelected.svg);
}
#wired-lan-tab .tab-btn.wired-lan-switch:before {
  content: " ";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../img/svg/TabsIconSettings.svg);
  position: relative;
  top: 3px;
  margin-right: 5px;
}
#wired-lan-tab .tab-btn.wired-lan-switch.selected:before {
  background: url(../img/svg/TabsIconSettingsSelected.svg);
}
#wired-lan-tab .tab-btn.wired-lan-switch:hover:before {
  background: url(../img/svg/TabsIconSettingsSelected.svg);
}
#wired-lan-tab .tab-content {
  padding-top: 0;
}

.dhcp-detail {
  background: var(--s-background-panel-secondary, #F9F9FA);
  border-radius: 2px;
  padding: 10px;
  width: 712px;
  margin-left: 210px;
}

.inline-radio-textbox .text-wrap-outer {
  position: static;
  margin-left: 10px;
}

.radio-ip-field {
  margin-top: 28px;
  margin-left: 10px;
}

.wired-lan-editor .widget-container {
  vertical-align: top;
}
.wired-lan-editor .networks-purpose {
  display: inline-block;
}

.wired-lan-comobination .combination-textbox {
  margin-left: 10px;
}
.wired-lan-comobination .separator {
  display: inline-block;
}
.wired-lan-comobination .separator + .combination-textbox {
  margin-left: 0;
}
.wired-lan-comobination .subnet-textbox .text-wrap {
  width: 70px;
}

.inline-textbox-fieldset {
  margin-bottom: 0;
}

.wiredlan-combination-button {
  margin-left: 10px;
}

.dhcpDetail-data-field {
  margin-left: 16px;
  font-size: 12px;
  margin-bottom: 0;
}

.dhcpDetail-key-field {
  color: var(--s-color-text-tertiary, #5E696F);
  letter-spacing: 0;
  font-size: 12px;
  margin-bottom: 0;
}

#wiredLanUpdateRangeButton {
  margin-left: 10px;
}

.checkbox-group-container.lan-ingerface-group .checkbox-list {
  width: auto;
  margin-right: 30px;
}
.checkbox-group-container.lan-ingerface-group .checkbox-group-list-wrap {
  margin-right: -30px;
}

.wan-ports.checkbox-group-container .checkbox-list {
  width: 150px;
}

.action-placeholder {
  vertical-align: middle;
  display: inline-block;
  margin: 3px 5px;
  width: 24px;
  height: 24px;
}

.dhcp-option-custom-add-btn {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 12px;
  cursor: pointer;
}
.dhcp-option-custom-add-btn .custom-add-btn-text.widget-container {
  margin-bottom: 0;
  margin-left: 6px;
  font-size: 15px;
  font-weight: bold;
  color: #0492EB;
}

#dhcp-options-custom .dhcp-option-custom-title-container {
  display: inline-block;
  border-bottom: 1px solid var(--table-color-border-top, #e5e5e5);
  margin-bottom: 8px;
}
#dhcp-options-custom .dhcp-option-custom-title-container .dhcp-option-custom-title {
  width: 500px;
  color: var(--tab-color-primary, #868E93);
}
#dhcp-options-custom .dhcp-option-custom-title-container .dhcp-option-custom-title.widget-container {
  margin-bottom: 0;
}
#dhcp-options-custom .option-value.text-container.has-prefix input {
  padding-left: 46px;
}

#acl-view #ethertype-input .text-wrap-before {
  padding-left: 10px;
  padding-right: 0;
}
#acl-view #ethertype-input input {
  padding-left: 26px;
  line-height: 26px;
}
#acl-view .no-connected {
  height: 700px;
  text-align: center;
}
#acl-view .no-connected .no-connected-icon {
  margin-top: 200px;
  display: inline-block;
  width: 180px;
  height: 180px;
}
#acl-view .no-connected .no-connected-icon.gateway {
  background: url(../img/NoGateway.png) no-repeat;
}
#acl-view .no-connected .no-connected-icon.switch {
  background: url(../img/NoGateway.png) no-repeat;
}
#acl-view .no-connected .no-connected-icon.eap {
  background: url(../img/NoEAP.png) no-repeat;
  background-size: cover;
  -moz-background-size: cover;
}
#acl-view .no-connected .no-connected-title {
  font-size: 16px;
  color: var(--s-color-text-primary, #212121);
  letter-spacing: 0;
}
#acl-view .no-connected .no-connected-content {
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  letter-spacing: 0;
}
#acl-view #rule-legend-source > .widget-fieldlabel-wrap {
  display: block;
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  margin-bottom: 8px;
}
#acl-view .rule-legend-content {
  position: relative;
}
#acl-view .rule-legend-content .tree-select-container .tree-select-dropdown-children-ul {
  max-height: 164px;
  height: 164px;
  padding: 8px 0;
  border-bottom: 1px solid #EBEDED;
}
#acl-view .rule-legend-content .tree-select-container .tree-select-dropdown-children-ul.empty {
  background: url(../img/NoData.png) 50% 10% no-repeat;
}
#acl-view .rule-legend-content .tree-select-container .tree-select-dropdown-all-ul {
  margin: 0;
}
#acl-view .rule-legend-content .tree-select-container .tree-select-dropdown-all-ul .tree-select-all-row {
  padding-left: 16px;
  padding-top: 6px;
}
#acl-view .rule-legend-content .tree-select-container .tree-select-node-text.empty {
  display: block;
  margin: auto;
  position: relative;
  top: 88px;
  text-align: center;
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  letter-spacing: 0;
  line-height: 18px;
}
#acl-view #source-create,
#acl-view #destination-create {
  margin-bottom: 0;
  position: absolute;
  bottom: 4px;
  display: inline-block;
  right: 22px;
  cursor: pointer;
}
#acl-view #source-create .paragraph-wrap-outer,
#acl-view #destination-create .paragraph-wrap-outer {
  vertical-align: middle;
}
#acl-view #source-create:before,
#acl-view #destination-create:before {
  vertical-align: middle;
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  background: var(--icon-select-add, url(../img/svg/ButtonIconAdd.svg)) no-repeat;
  margin-right: 4px;
}
#acl-view #source-create:hover,
#acl-view #destination-create:hover {
  color: #04B0FF;
}
#acl-view #source-create:hover:before,
#acl-view #destination-create:hover:before {
  background: url(../img/svg/ButtonIconAddHover.svg) no-repeat;
}
#acl-view #gateway-tip {
  color: var(--tab-color-primary, #868E93);
  font-weight: bold;
}
#acl-view #firewall-vlan.none-selected span.combobox-text {
  color: var(--tab-color-primary, #868E93);
}
#acl-view #interface-treeselect .tree-select-dropdown ul.tree-select-dropdown-children-ul {
  max-height: 250px;
}
#acl-view #interface-treeselect .text-container:not(.prefix) .text-wrap {
  width: 220px;
}
#acl-view .checkbox-group-container .checkbox-list {
  width: auto;
}

#firewall-hide-msg .hide-content,
#ssl-vpn-hide-msg .hide-content {
  padding: 30px 30px 0px;
  font-size: 16px;
  color: var(--s-color-text-primary, #212121);
  letter-spacing: 0;
  text-align: center;
}
#firewall-hide-msg .hide-ok-button,
#ssl-vpn-hide-msg .hide-ok-button {
  text-align: center;
}

.rule-legend .rule-legend-container {
  vertical-align: top;
  height: 307px;
  display: inline-block;
  border: 1px solid #EBEDED;
  border-radius: 3px;
  background-color: var(--transfer-bg-primary, #FFFFFF);
}
.rule-legend .rule-legend-container .rule-legend-title {
  font-size: 14px;
  color: var(--transfer-color-header, #212121);
  padding: 0 11px;
  line-height: 27px;
  height: 27px;
  background: var(--transfer-bg-header, rgba(242, 244, 247, 0.5));
}
.rule-legend .rule-legend-container .rule-legend-header {
  border-top: 1px solid #EBEDED;
  border-bottom: 1px solid #EBEDED;
  height: 76px;
  padding: 0 16px;
}
.rule-legend div[widget=combobox] {
  margin-top: 6px;
}
.rule-legend div[widget=combobox] > .widget-fieldlabel-wrap {
  position: static;
  transform: none;
  display: block;
  font-size: 14px;
  color: var(--s-color-text-tertiary, #5E696F);
  letter-spacing: 0;
}
.rule-legend div[widget=checkboxGroup] {
  margin-bottom: 0;
  padding-top: 6px;
}
.rule-legend div[widget=checkboxGroup] li.checkbox-list {
  display: block;
}
.rule-legend div[widget=checkboxGroup] .checkbox-group-all {
  padding: 6px 16px 0 16px;
  margin-bottom: 0;
}
.rule-legend div[widget=checkboxGroup] .checkbox-group-search-box {
  display: none;
  padding-left: 16px;
}
.rule-legend div[widget=checkboxGroup].has-search .checkbox-group-search-box {
  display: block;
}
.rule-legend div[widget=checkboxGroup].has-search > .checkbox-group-wrap-outer > .checkbox-group-wrap {
  height: 115px;
}
.rule-legend div[widget=checkboxGroup] > .checkbox-group-wrap-outer {
  width: 100%;
}
.rule-legend div[widget=checkboxGroup] > .checkbox-group-wrap-outer > .checkbox-group-wrap {
  overflow: auto;
  height: 157px;
  width: 100%;
  max-width: 272px;
  padding: 0 16px 5px 16px;
  border-bottom: 1px solid #EBEDED;
}
.rule-legend div[widget=checkboxGroup] > .checkbox-group-wrap-outer .no-data-tip,
.rule-legend div[widget=checkboxGroup] > .checkbox-group-wrap-outer .search-empty-tip {
  margin: auto;
  position: relative;
  top: 88px;
  text-align: center;
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  letter-spacing: 0;
  line-height: 18px;
}
.rule-legend div[widget=checkboxGroup] .checkbox-group-wrap-outer.empty > .checkbox-group-wrap,
.rule-legend div[widget=checkboxGroup] .checkbox-group-wrap-outer.empty-search > .checkbox-group-wrap {
  background: url(../img/NoData.png) 50% 10% no-repeat;
}
.rule-legend div[widget=checkboxGroup].gateway-manage > .checkbox-group-wrap-outer .no-data-tip {
  top: 40px;
}
.rule-legend div[widget=checkboxGroup].gateway-manage .checkbox-group-wrap-outer.empty > .checkbox-group-wrap {
  background-image: none;
}
.rule-legend div[widget=checkboxGroup] .checkbox-group-wrap-outer.empty > .checkbox-group-wrap {
  height: 157px;
}
.rule-legend div[widget=checkboxGroup] .checkbox-group-wrap-outer.empty .checkbox-group-search-box {
  display: none;
}
.rule-legend #destination-type .widget-fieldlabel-wrap,
.rule-legend #source-type .widget-fieldlabel-wrap {
  margin-bottom: 8px;
}
.rule-legend #rule-map {
  vertical-align: top;
  display: inline-block;
  width: 120px;
  height: 317px;
}
.rule-legend #rule-map div[widget=paragraph] {
  text-align: center;
  margin-top: 120px;
  margin-bottom: 8px;
}

#url-filtering-view div.repeat-item:first-child .url-delete {
  display: none;
}
#url-filtering-view div.repeat-item:first-child div[widget=textbox]:first-child .widget-fieldlabel-wrap {
  visibility: visible;
}
#url-filtering-view div.repeat-item:first-child div[widget=toolTip] {
  margin-left: 3px;
  display: inline-block;
}
#url-filtering-view div.repeat-item .url-delete {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconDelete.svg) no-repeat;
  position: relative;
  top: 2px;
  vertical-align: top;
}
#url-filtering-view div.repeat-item .url-delete:first-child {
  display: none;
}
#url-filtering-view div.repeat-item .url-delete:hover {
  background: url(../img/svg/TableIconDeleteHover.svg) no-repeat;
}
#url-filtering-view div.repeat-item div[widget=toolTip] {
  display: none;
}
#url-filtering-view #urls-add-icon {
  display: inline-block;
  cursor: pointer;
  margin-bottom: 33px;
  margin-left: 210px;
  font-size: 15px;
  color: #0492EB;
  letter-spacing: 0;
  font-weight: bold;
}
#url-filtering-view #urls-add-icon.disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
#url-filtering-view #urls-add-icon:hover {
  color: rgba(4, 146, 235, 0.6);
}
#url-filtering-view #urls-add-icon:hover:before {
  background: url(../img/svg/OthersIconAddHover.svg) no-repeat;
}
#url-filtering-view #urls-add-icon:before {
  content: " ";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/OthersIconAdd.svg) no-repeat;
  vertical-align: middle;
  margin-right: 6px;
}
#url-filtering-view #urls-add-icon .paragraph-wrap-outer {
  position: relative;
  top: 1px;
}

#firewall-create-group-msg .msg-wrap,
#url-create-group-msg .msg-wrap,
#bc-ip-group-create-msg .msg-wrap,
#route-ip-group-create-msg .msg-wrap,
#sl-ip-group-create-msg .msg-wrap {
  width: 880px;
}
#firewall-create-group-msg .msg-content-container,
#url-create-group-msg .msg-content-container,
#bc-ip-group-create-msg .msg-content-container,
#route-ip-group-create-msg .msg-content-container,
#sl-ip-group-create-msg .msg-content-container {
  max-height: calc(80vh - 116px);
}

#route-ip-group-create-msg .msg-wrap {
  width: 900px;
}

.create-new-group {
  border-top: 1px solid var(--s-color-text-split, #EBECED);
  padding-top: 4px;
  padding-left: 12px;
}
.create-new-group:before {
  vertical-align: middle;
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  background: var(--icon-select-add, url(../img/svg/ButtonIconAdd.svg)) no-repeat;
  margin-right: 4px;
}
.create-new-group:hover {
  color: #04B0FF;
}
.create-new-group:hover:before {
  background: url(../img/svg/ButtonIconAddHover.svg) no-repeat;
}

#attack-defense-view #flood-defense div[widget=checkbox] {
  min-width: 250px;
  margin-right: 5px;
}

#profiles-ip-subnet-repeat .mask-tip-wrap {
  display: inline-block;
}
#profiles-ip-subnet-repeat .mask-tip-wrap.u-d-none {
  display: none;
}
#profiles-ip-subnet-repeat .aequilate-item-container {
  margin-bottom: 0;
}
#profiles-ip-subnet-repeat .mask-wrap {
  position: static;
}
#profiles-ip-subnet-repeat .btn-delete {
  margin-left: 6px;
  margin-top: 2px;
}
#profiles-ip-subnet-repeat .widget-fieldlabel-wrap {
  visibility: hidden;
}
#profiles-ip-subnet-repeat .repeat-item:first-child .btn-delete {
  visibility: hidden;
}
#profiles-ip-subnet-repeat .repeat-item:first-child .widget-fieldlabel-wrap {
  visibility: visible;
}
#profiles-ip-subnet-repeat .mac-addr-container {
  color: var(--s-color-text-primary, #212121);
}

#profiles-ip-subnet-repeat2 {
  margin-top: -40px;
}
#profiles-ip-subnet-repeat2 .mask-tip-wrap {
  display: inline-block;
}
#profiles-ip-subnet-repeat2 .mask-tip-wrap.u-d-none {
  display: none;
}
#profiles-ip-subnet-repeat2 .aequilate-item-container {
  margin-bottom: 0;
}
#profiles-ip-subnet-repeat2 .mask-wrap {
  position: static;
}
#profiles-ip-subnet-repeat2 .btn-delete {
  margin-left: 6px;
  margin-top: 2px;
}
#profiles-ip-subnet-repeat2 .widget-fieldlabel-wrap {
  visibility: hidden;
}
#profiles-ip-subnet-repeat2 .mac-addr-container {
  color: var(--s-color-text-primary, #212121);
}

#profiles-add-subnet-btn2 .button-button:active,
#profiles-add-subnet-btn .button-button:active {
  background-color: transparent;
}
#profiles-add-subnet-btn2 .button-button:hover,
#profiles-add-subnet-btn .button-button:hover {
  background-color: transparent;
}
#profiles-add-subnet-btn2 .icon,
#profiles-add-subnet-btn .icon {
  background: url(../img/svg/OthersIconAdd.svg) no-repeat;
}
#profiles-add-subnet-btn2:hover .icon,
#profiles-add-subnet-btn:hover .icon {
  background: url(../img/svg/OthersIconAddHover.svg) no-repeat;
}

#profiles-add-subnet-btn2.secondary-button .button-button {
  border: none;
}

#profiles-add-subnet-btn2 {
  margin-left: 210px;
}
#profiles-add-subnet-btn2 .button-button {
  padding-left: 0px;
}

.radius-group-ip-subnet-label {
  width: 200px;
  vertical-align: center;
  line-height: 32px;
  margin-right: 10px;
}

.default-group-label {
  display: block;
  width: 200px;
  line-height: 32px;
}

#profiles-add-subnet-btn .icon {
  background: url(../img/svg/OthersIconAdd.svg) no-repeat;
}

#profiles-add-subnet-btn.secondary-button .button-button {
  border: none;
}

#profiles-add-subnet-btn {
  display: block;
  margin-left: 190px;
}

.msg-container #profiles-add-subnet-btn {
  display: block;
  margin-left: 190px;
}
.msg-container .note {
  width: 450px;
}

#profiles-ip-port-keywords .keywords-add {
  right: -107px;
}

#profiles-group-field div[widget=htmlLoader] {
  position: relative;
  top: -28px;
}
#profiles-group-field .grid-title {
  line-height: 28px;
}
#profiles-group-field .page-container {
  padding: 0;
}

#profiles-day-mode .radio-group-list-wrap {
  display: inline-block;
  margin-right: 30px;
}

.create-time-range-btn {
  display: inline-block;
}

.delete-time-range-btn {
  margin-top: 2px;
  margin-bottom: 0px;
  display: inline-block;
  width: auto;
  vertical-align: top;
}

.time-range-repeat .repeat-item {
  margin-bottom: 15px;
}
.time-range-repeat .repeat-item[data-index="0"] .btn-delete {
  display: none;
}

.schedule-slider-container td {
  vertical-align: top;
}

.time-range-label {
  position: absolute;
}

#time-range-grid .td-content p ~ p {
  margin-top: 5px;
}

.time-range-create-msg .msg-wrap {
  width: auto;
}
.time-range-create-msg .msg-content-container {
  max-height: 500px;
}

#osg-require-view .fieldset-container {
  margin-top: 150px;
  height: 550px;
}
#osg-require-view .no-gateway-img {
  display: inline-block;
  width: 180px;
  height: 180px;
  margin-bottom: 30px;
  background-image: url("../img/NoGateway.png");
}
#osg-require-view .no-osg-connected {
  margin-bottom: 9px;
  font-size: 16px;
  line-height: 21px;
  font-weight: bold;
}
#osg-require-view .require-osg {
  font-size: 14px;
  line-height: 17px;
  color: var(--tab-color-primary, #868E93);
}

/* -------------------------------------------------------------------------- */
/*                                   Routing                                  */
/* -------------------------------------------------------------------------- */
#routing-view .button-container.route-ip-group-create-btn,
#routing-view .button-container.route-ip-port-group-create-btn {
  position: absolute;
  right: 16px;
  bottom: -11px;
  font-weight: normal;
}
#routing-view .button-container.route-ip-group-create-btn .button-button,
#routing-view .button-container.route-ip-port-group-create-btn .button-button {
  color: var(--s-color-text-primary, #212121);
}
#routing-view .button-container.route-ip-group-create-btn .button-wrap,
#routing-view .button-container.route-ip-port-group-create-btn .button-wrap {
  width: auto;
}
#routing-view .button-container.route-ip-group-create-btn .button-wrap:before,
#routing-view .button-container.route-ip-port-group-create-btn .button-wrap:before {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 9px;
  background: url("../img/svg/ButtonIconAddNormal.svg") no-repeat;
  content: "";
  vertical-align: middle;
}
#routing-view .route-wan-img {
  width: 100px;
  height: 20px;
  margin-left: auto;
  margin-right: auto;
  background-image: url("../img/svg/routingBelowWan.svg");
}
#routing-view .routing-legend .panel-header {
  padding-bottom: 0;
}
#routing-view .routing-legend .panel-content {
  padding-top: 12px;
}

.table-border-tag {
  display: inline-block;
  margin-bottom: 2px;
  margin-right: 4px;
  padding: 2px 4px 3px;
  border: 1px solid var(--tab-color-primary, #868E93);
  border-radius: 2px;
  word-break: break-all;
}

/* -------------------------------------------------------------------------- */
/*                              Bandwidth Control                             */
/* -------------------------------------------------------------------------- */
#bandwidth-view .wan-label {
  color: var(--tab-color-primary, #868E93);
}
#bandwidth-view .wan-label .widget-fieldlabel-wrap {
  margin-right: 0;
}
#bandwidth-view .threshold-value {
  position: absolute;
}
#bandwidth-view .threshold-value .tips-content {
  color: #212121;
}
#bandwidth-view .bc-test-btn {
  position: absolute;
  left: 550px;
}

.inner-link-btn.secondary-button .button-button {
  border: none;
}
.inner-link-btn.secondary-button .button-button:hover, .inner-link-btn.secondary-button .button-button:active {
  background-color: #fff;
}

.radius-profile-create-msg .msg-content-container.widget-content {
  max-height: 500px;
}

.services-settings {
  min-width: 1200px;
}

#services-tab .tab-btns {
  white-space: nowrap;
}

#ddns-register-btn .button-button {
  height: 28px;
  line-height: 28px;
}

#upnp-networks #upnp-networks_select_all {
  border-bottom: 1px solid #AEB4B7;
}
#upnp-networks .checkbox-list {
  width: auto;
}

.grid-container .devices-outer {
  min-height: 40px;
}
.grid-container .devices-outer .ap-container,
.grid-container .devices-outer .sg-container {
  padding: 10px 24px 0 40px;
  position: relative;
}
.grid-container .devices-outer .ap-container .devices-container,
.grid-container .devices-outer .sg-container .devices-container {
  display: inline-block;
  max-height: 96px;
  overflow: hidden;
}
.grid-container .devices-outer .ap-container .devices-container .devices-inner,
.grid-container .devices-outer .sg-container .devices-container .devices-inner {
  display: inline-block;
  font-size: 0;
}
.grid-container .devices-outer .ap-container .devices-container .device-wrap,
.grid-container .devices-outer .sg-container .devices-container .device-wrap {
  font-size: 14px;
}
.grid-container .devices-outer .ap-container .drop-icon,
.grid-container .devices-outer .sg-container .drop-icon {
  display: inline-block;
  position: absolute;
  cursor: pointer;
  top: 5px;
  right: 0;
}
.grid-container .devices-outer .ap-container .drop-icon.hidden,
.grid-container .devices-outer .sg-container .drop-icon.hidden {
  display: none;
}
.grid-container .devices-outer .incident-container {
  padding: 10px 24px 0 0px;
  position: relative;
}
.grid-container .devices-outer .device-icon {
  left: 0;
  top: 0;
  position: absolute;
}
.grid-container .device-wrap {
  cursor: default;
  white-space: nowrap;
  display: inline-block;
  padding: 0 5px;
  height: 22px;
  line-height: 20px;
  margin: 2px;
  border: 1px solid;
}
.grid-container .enable-spot {
  width: 10px;
  height: 10px;
  border-radius: 100%;
}
.grid-container .enable-spot.enabled {
  background: #0DC901;
}
.grid-container .enable-spot.disabled {
  background: var(--tab-color-primary, #868E93);
}

.poe-time-container .time-display-container {
  border: 1px solid #EBEDED;
  border-radius: 3px;
  padding: 10px 20px;
}
.poe-time-container .time-display-container .time-display-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #EBEDED;
}
.poe-time-container .time-display-container .time-display-content {
  padding-top: 10px;
}

#global-combobox-options[data-shown=poe-sp-combo] #poe-add-schedule {
  padding: 5px 5px;
  border-top: 1px solid var(--s-color-text-split, #EBECED);
  cursor: pointer;
  margin-top: 10px;
}
#global-combobox-options[data-shown=poe-sp-combo] #poe-add-schedule:hover {
  color: #04B0FF;
}
#global-combobox-options[data-shown=poe-sp-combo] #poe-add-schedule > span {
  height: 22px;
  line-height: 22px;
  display: inline-block;
  vertical-align: middle;
}
#global-combobox-options[data-shown=poe-sp-combo] #poe-add-schedule .btn-add-black {
  margin-right: 4px;
}

#poe-device-grid .port-outer {
  padding-left: 0;
  width: auto;
  white-space: nowrap;
}
#poe-device-grid .port-container {
  width: 360px;
  padding-top: 8px;
  padding-bottom: 15px;
}

#mab-help {
  position: relative;
}

#mab-help-icon {
  position: absolute;
  left: 226px;
  top: 8px;
}

#mab-help-paragraph {
  max-width: 420px;
}

#port-lag-grid .port-lags div.port-outer,
#port-lag-grid .port-lags div.lag-outer,
#auth-port-grid .port-lags div.port-outer,
#auth-port-grid .port-lags div.lag-outer {
  width: 470px;
  padding: 22px 0 22px 36px;
}

.port-lags div.port-outer,
.port-lags div.lag-outer {
  width: 430px;
  position: relative;
  padding: 5px 0 5px 36px;
}
.port-lags div.port-outer.dot1x,
.port-lags div.lag-outer.dot1x {
  width: 470px;
}
.port-lags div.port-outer.dot1x div.port-item.second-line .port-num,
.port-lags div.lag-outer.dot1x div.port-item.second-line .port-num {
  top: 32px;
}
.port-lags div.port-outer .port-lag-title,
.port-lags div.lag-outer .port-lag-title {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  font-size: 12px;
  height: 12px;
  margin: auto;
  font-weight: bold;
}
.port-lags div.port-outer .port-mac-title,
.port-lags div.lag-outer .port-mac-title {
  display: inline-block;
  margin: 0 5px 0 -36px;
  font-size: 12px;
  height: 12px;
  font-weight: bold;
}
.port-lags div.port-outer .port-row,
.port-lags div.lag-outer .port-row {
  white-space: nowrap;
}
.port-lags div.lag-outer {
  margin-top: 15px;
  border-top: 2px solid #e5e5e5;
}
.port-lags div.mab-port-border {
  line-height: 8px;
  display: inline-block;
  border: 1px solid transparent;
  -webkit-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
}
.port-lags div.mab-port-border.mab {
  border: 1px solid #0492EB;
}
.port-lags div.mab-port-border div.port-item {
  margin: 4px;
}
.port-lags div.port-item {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: rgba(4, 146, 235, 0.4);
  margin: 7px 5px 7px 5px;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
}
.port-lags div.port-item .port-num {
  color: var(--tab-color-primary, #868E93);
  position: absolute;
  top: -17px;
  text-align: center;
  width: 20px;
  display: inline-block;
}
.port-lags div.port-item.second-line .port-num {
  top: 25px;
}
.port-lags div.port-item:after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 24%;
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid #ffffff;
  border-top: 0;
  border-left: 0;
  -webkit-transform: rotate(45deg) scale(0) translate(-50%, -50%);
  -ms-transform: rotate(45deg) scale(0) translate(-50%, -50%);
  transform: rotate(45deg) scale(0) translate(-50%, -50%);
  opacity: 0;
  -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
  transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
}
.port-lags div.port-item.disabled {
  background: #BEC3C5;
  cursor: default;
}
.port-lags div.port-item.checked, .port-lags div.port-item.mab {
  background: #0492EB;
}
.port-lags div.port-item.checked:after, .port-lags div.port-item.mab:after {
  content: " ";
  position: absolute;
  display: block;
  border: 2px solid #ffffff;
  border-top: 0;
  border-left: 0;
  -webkit-transform: rotate(45deg) scale(1.3) translate(-50%, -50%);
  -ms-transform: rotate(45deg) scale(1.3) translate(-50%, -50%);
  transform: rotate(45deg) scale(1.3) translate(-50%, -50%);
  opacity: 1;
  -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
}
.port-lags div.lag-item {
  margin: 5px 5px 5px 0;
  display: inline-block;
}
.port-lags div.lag-item .lag-check-box {
  cursor: pointer;
  display: inline-block;
  margin-right: 5px;
  box-sizing: border-box;
  position: relative;
}
.port-lags div.lag-item .lag-check-box .lag-check-box-inner {
  vertical-align: middle;
  margin-right: 6px;
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #ffffff;
  border: 1px solid #AEB4B7;
  border-radius: 2px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.port-lags div.lag-item .lag-check-box .lag-check-box-inner:after {
  content: " ";
  position: absolute;
  top: 44%;
  left: 8%;
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid #ffffff;
  border-top: 0;
  border-left: 0;
  -webkit-transform: rotate(45deg) scale(0) translate(-50%, -50%);
  -ms-transform: rotate(45deg) scale(0) translate(-50%, -50%);
  transform: rotate(45deg) scale(0) translate(-50%, -50%);
  opacity: 0;
  -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
  transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
}
.port-lags div.lag-item .lag-check-box span.lag-text {
  vertical-align: middle;
}
.port-lags div.lag-item.checked .lag-check-box .lag-check-box-inner {
  background-color: #ffffff;
  border-color: #0492EB;
}
.port-lags div.lag-item.checked .lag-check-box .lag-check-box-inner:after {
  content: " ";
  position: absolute;
  display: block;
  border: 2px solid #0492EB;
  border-top: 0;
  border-left: 0;
  -webkit-transform: rotate(45deg) scale(1) translate(-50%, -50%);
  -ms-transform: rotate(45deg) scale(1) translate(-50%, -50%);
  transform: rotate(45deg) scale(1) translate(-50%, -50%);
  opacity: 1;
  -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
}
.port-lags div.lag-item.checked .lag-port-container .lag-port-item {
  background: #0492EB;
  color: #ffffff;
}
.port-lags div.lag-item .lag-port-container {
  display: inline-block;
  border-radius: 3px;
  border: 1px dashed #BEC3C5;
}
.port-lags div.lag-item .lag-port-container .lag-port-item {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: rgba(158, 158, 158, 0.34);
  margin: 5px;
  border-radius: 3px;
  position: relative;
  text-align: center;
  line-height: 20px;
}

/* -------------------------------------------------------------------------- */
/*                                     VPN                                    */
/* -------------------------------------------------------------------------- */
#vpn-view .accordion-item,
#ipsec-view .accordion-item {
  margin-top: 19px;
}
#vpn-view .accordion-item .secondary-panel,
#ipsec-view .accordion-item .secondary-panel {
  margin-top: 30px;
}
#vpn-view .accordion-item .secondary-panel .panel-header,
#ipsec-view .accordion-item .secondary-panel .panel-header {
  border-bottom: 1px solid var(--s-color-text-split, #ebeced);
}
#vpn-view .accordion-item .secondary-panel .panel-content,
#ipsec-view .accordion-item .secondary-panel .panel-content {
  padding-top: 16px;
}
#vpn-view .grid-panel,
#ipsec-view .grid-panel {
  margin-top: 28px;
}
#vpn-view .grid-panel .panel-header,
#ipsec-view .grid-panel .panel-header {
  padding-bottom: 0;
}
#vpn-view .grid-panel .panel-content,
#ipsec-view .grid-panel .panel-content {
  top: -9px;
  padding-top: 0;
}
#vpn-view .grid-panel .panel-content-container,
#ipsec-view .grid-panel .panel-content-container {
  margin-top: -53px;
}
#vpn-view .combination-container .widget-error-tips,
#ipsec-view .combination-container .widget-error-tips {
  max-width: 320px;
}

#vpn-module-tab {
  position: static;
  margin-top: -16px;
}
#vpn-module-tab .tab-btns {
  display: none;
  position: absolute;
  top: 20px;
}

#ssl-vpn-module-tab,
#wireless-ids-ips-tab {
  position: static;
  margin-top: -16px;
}
#ssl-vpn-module-tab .tab-btns,
#wireless-ids-ips-tab .tab-btns {
  position: absolute;
  top: 20px;
}

#user-group-tab,
#user-list-tab {
  margin-bottom: 0px;
  vertical-align: middle;
}
#user-group-tab .tab-btns,
#user-list-tab .tab-btns {
  position: static;
}

#add-vpn-user-msg .radio-group-list-wrap {
  position: relative;
}
#add-vpn-user-msg .username.text-container .text-wrap-outer,
#add-vpn-user-msg .password.text-container .text-wrap-outer {
  width: 240px;
}

#vpn-xtp-client {
  position: absolute;
  top: 6px;
  left: 59px;
}

#vpn-xtp-extension {
  position: absolute;
  top: 6px;
  left: 178px;
}

.vpn-user-view .grid-container .grid-content-td-servers [data-tip] {
  display: block;
}
.vpn-user-view .grid-container .grid-content-td-servers [data-tip] + [data-tip] {
  margin-top: 10px;
}
.vpn-user-view .radio-group-list-wrap {
  position: relative;
}

/* -------------------------------------------------------------------------- */
/*                                Cloud Access                                */
/* -------------------------------------------------------------------------- */
#cloud-access-register {
  position: absolute;
  left: 490px;
  top: 129px;
  color: #0492EB;
}
#cloud-access-register a {
  margin-left: 5px;
  cursor: pointer;
  text-decoration: underline;
}

#cloud-access-login-msg .text-container .text-wrap-outer {
  width: 240px;
}

.admin-view .admin-license-extension {
  position: absolute;
  left: 326px;
  top: auto;
  bottom: 5px;
}
.admin-view .accordion-icon {
  cursor: pointer;
}
.admin-view .accordion-icon.plus {
  background: var(--icon-collapse-add, url("../img/svg/CollapseIcon.svg"));
}
.admin-view .admin-type-radio.radio-group-container {
  display: inline-block;
}
.admin-view .admin-type-radio.radio-group-container .radio-list .widget-wrap,
.admin-view .admin-type-radio.radio-group-container .radio-list .radio-content-wrap {
  display: inline-block;
}
.admin-view #viewer-grid {
  border: none;
}
.admin-view #viewer-grid .grid-content-container-outer {
  border-left: 2px solid #4acbd6;
  padding-left: 10px;
}
.admin-view #viewer-grid .grid-header-tr {
  display: none;
}
.admin-view .role {
  display: inline-block;
  vertical-align: middle;
  margin: 2px;
  line-height: 24px;
  padding: 0 10px;
  border-radius: 11px;
  max-width: 100%;
}
.admin-view .role.root {
  background: #EFEAFF;
  color: #6236FF;
}
.admin-view .role.admin {
  background: #E6F9E5;
  color: #0DC901;
}
.admin-view .role.viewer {
  background: #E5F4FD;
  color: #0492EB;
}

#admin-cloud-required,
#cbc-required {
  margin-left: 10px;
  margin-bottom: 0;
}
#admin-cloud-required .button-button-before,
#cbc-required .button-button-before {
  display: inline-block;
  margin-right: 7px;
  width: 18px;
  height: 18px;
  background-image: url("../img/Info2.png");
  vertical-align: sub;
}
#admin-cloud-required .button-button,
#cbc-required .button-button {
  border-color: #ffbb00;
  font-weight: normal;
  line-height: 28px;
  background-color: rgba(255, 215, 1, 0.08);
}

#cbc-required a {
  cursor: auto;
}
#cbc-required .button-button:hover {
  color: #0492EB;
}

.admin-mail-server-required {
  margin-left: 10px;
  vertical-align: -14px;
}
.admin-mail-server-required .button-button-before {
  display: inline-block;
  margin-right: 7px;
  width: 18px;
  height: 18px;
  background-image: url("../img/Info2.png");
  vertical-align: sub;
}
.admin-mail-server-required .button-button {
  border-color: #ffbb00;
  font-weight: normal;
  line-height: 28px;
  background-color: rgba(255, 215, 1, 0.08);
}
.admin-mail-server-required .button-button:hover {
  background-color: rgba(255, 215, 1, 0.08);
}

#auto-backup-every .widget-wrap.combobox-wrap {
  float: right;
}
#auto-backup-every .combobox-tips {
  float: left;
  margin-top: 7px;
}
#auto-backup-every .combobox-tips .tips-content {
  margin-left: 0;
  margin-right: 20px;
  color: var(--s-color-text-primary, #212121);
  font-size: 14px;
}

.submit-btn-container {
  margin-top: 30px;
}

.text .device-name {
  color: #0492EB;
  cursor: pointer;
}
.text .log-fail {
  color: #FF2954;
}

#menu li[navi-value=log] .sub-navigator-icon-after {
  display: inline-block;
  background: #FF2954;
  color: #FFFFFF;
  text-align: center;
  border-radius: 8px;
  font-size: 12px;
  line-height: 16px;
  width: 32px;
  overflow: visible;
  position: absolute;
  left: 25px;
  top: 10px;
}

#log-notify-repeat {
  margin-top: 20px;
}
#log-notify-repeat .notify-log-item {
  display: flex;
  align-items: center;
}
#log-notify-repeat .notify-log-item .widget-fieldlabel-wrap {
  width: 280px;
  top: 0px;
  vertical-align: middle;
  transform: translateY(0);
}
#log-notify-repeat .notify-log-item .checkbox-group-wrap-outer {
  vertical-align: bottom;
}
#log-notify-repeat .notify-recover-btn {
  vertical-align: bottom;
}
#log-notify-repeat .notify-recover-btn .button-button {
  line-height: 28px;
  height: 28px;
}
#log-notify-repeat .notify-recover-btn .btn-refresh .icon {
  width: 24px;
  height: 24px;
}
#log-notify-repeat .repeat-item {
  display: flex;
}

.unarchived-log-counts-alert {
  position: absolute;
  left: 50%;
  font-size: 14px;
  padding: 0 18px;
  background: #F5A623;
  border: 1px solid #F5A623;
  border-radius: 3px;
  color: #fff;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.unarchived-log-counts-alert .text {
  display: inline-block;
  line-height: 32px;
}

.log.page-container {
  min-width: 1300px;
}

#alert-label-field,
#event-label-field {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: top;
  margin-right: 300px;
}

.table-opts-btn {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  top: 2px;
}
.table-opts-btn .toggle-history-btn {
  display: inline-block;
  margin-right: 40px;
  vertical-align: middle;
  cursor: pointer;
  max-width: 180px;
}
.table-opts-btn .toggle-history-btn.widget-container {
  margin-bottom: 0;
}
.table-opts-btn .toggle-history-btn .widget-wrap-outer {
  color: #0492EB;
  border-bottom: 1px solid #0492EB;
}
.table-opts-btn #log-batch-delete.widget-container {
  margin-bottom: 0;
}
.table-opts-btn #log-batch-delete .button-button {
  padding: 0 10px;
}

#log-tab {
  display: flex;
  align-items: center;
}

.log-current {
  vertical-align: top;
}
.log-current .widget-fieldlabel-wrap {
  width: auto;
  vertical-align: middle;
  line-height: 28px;
}
.log-current .text-wrap-display span {
  color: #0492EB;
}
.log-current #current-logs {
  margin-right: 20px;
}

#log-delete-msg .msg-content-container {
  height: 500px;
  margin: 20px 0;
  padding-top: 0;
}

#date-tab {
  vertical-align: top;
}

#log-delete-type-repeat .notify-log-item .widget-fieldlabel-wrap {
  display: none;
}

#alert-label-field {
  min-width: 500px;
}

#event-label-field {
  min-width: 700px;
}

#date-change-field {
  position: absolute;
  right: 0;
  top: 3px;
}

#reset-to-default-btn {
  position: absolute;
  top: 0;
  right: 0;
}

#date-choose-field {
  display: flex;
  position: absolute;
  right: 80px;
}
#date-choose-field.transition-right {
  right: 30px;
}

#log-search {
  margin-right: 16px;
  display: inline-block;
  margin-bottom: 0;
  vertical-align: top;
}
#log-search .search-switch {
  top: 6px;
}
#log-search .search-lists {
  display: none;
}

.tab-block {
  line-height: 40px;
  min-width: 300px;
}

#alert-date-reduce .button-button,
#alert-date-add .button-button {
  padding: 0 2px 0 2px;
  border: 1px solid var(--components-border-primary, #BEC3C5);
}
#alert-date-reduce .button-text,
#alert-date-add .button-text {
  display: none;
}
#alert-date-reduce .button-icon,
#alert-date-add .button-icon {
  margin-right: 0;
}
#alert-date-reduce .button-wrap-outer,
#alert-date-add .button-wrap-outer {
  font-size: 14px;
}

#alert-date-add .button-button {
  border-radius: 0 3px 3px 0;
}

#alert-date-reduce .button-button {
  border-radius: 3px 0 0 3px;
}

#alert-date-display .text-wrap {
  border-top: 1px solid var(--components-border-primary, #BEC3C5);
  border-bottom: 1px solid var(--components-border-primary, #BEC3C5);
  border-left: none;
  border-right: none;
  border-radius: 0;
  height: 32px;
  line-height: 32px;
  max-width: 300px;
  width: 270px;
}
#alert-date-display input {
  text-align: center;
  width: 250px;
}

.horizontal-splitter {
  width: 100%;
  margin: 20px 0 20px 0;
  border-top: 1px solid #999999;
}

#device-detail {
  position: absolute;
  right: 30px;
  top: 20px;
  margin-left: 10px;
}
#device-detail .button-button {
  padding: 0 2px 0 2px;
}

#date-tab .tab-btns::after {
  height: 0;
}
#date-tab .tab-btn::after {
  height: 0;
}
#date-tab .tab-btn.normal:before {
  content: " ";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/ListNormal.svg);
  position: relative;
  top: 3px;
  margin-right: 5px;
}
#date-tab .tab-btn.normal.selected:before {
  background: url(../img/svg/ListBlue.svg);
}
#date-tab .tab-btn.normal:hover:before {
  background: url(../img/svg/ListBlue.svg);
}
#date-tab .tab-btn.day:before {
  content: " ";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/CalendarDay.svg);
  position: relative;
  top: 3px;
  margin-right: 5px;
}
#date-tab .tab-btn.day.selected:before {
  background: url(../img/svg/CalendarDayHover.svg);
}
#date-tab .tab-btn.day:hover:before {
  background: url(../img/svg/CalendarDayHover.svg);
}
#date-tab .tab-btn.week:before {
  content: " ";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/CalendarWeek.svg);
  position: relative;
  top: 3px;
  margin-right: 5px;
}
#date-tab .tab-btn.week.selected:before {
  background: url(../img/svg/CalendarWeekHover.svg);
}
#date-tab .tab-btn.week:hover:before {
  background: url(../img/svg/CalendarWeekHover.svg);
}
#date-tab .tab-btn.month:before {
  content: " ";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/CalendarMonth.svg);
  position: relative;
  top: 3px;
  margin-right: 5px;
}
#date-tab .tab-btn.month.selected:before {
  background: url(../img/svg/CalendarMonthHover.svg);
}
#date-tab .tab-btn.month:hover:before {
  background: url(../img/svg/CalendarMonthHover.svg);
}

#log-tab .tab-btn.alert:before {
  content: " ";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../img/svg/LogAlertNormal.svg);
  position: relative;
  top: 3px;
  margin-right: 5px;
}
#log-tab .tab-btn.alert.selected:before {
  background: url(../img/svg/LogAlertBlue.svg);
}
#log-tab .tab-btn.alert:hover:before {
  background: url(../img/svg/LogAlertBlue.svg);
}
#log-tab .tab-btn.event:before {
  content: " ";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../img/svg/LogEventNormal.svg);
  position: relative;
  top: 3px;
  margin-right: 5px;
}
#log-tab .tab-btn.event.selected:before {
  background: url(../img/svg/LogEventBlue.svg);
}
#log-tab .tab-btn.event:hover:before {
  background: url(../img/svg/LogEventBlue.svg);
}
#log-tab .tab-btn.notification:before {
  content: " ";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../img/svg/LogNotifyNormal.svg);
  position: relative;
  top: 3px;
  margin-right: 5px;
}
#log-tab .tab-btn.notification.selected:before {
  background: url(../img/svg/LogNotifyBlue.svg);
}
#log-tab .tab-btn.notification:hover:before {
  background: url(../img/svg/LogNotifyBlue.svg);
}

#alert-archived-tab .tab-btn.last {
  border-left: none;
}

#alert-log-level .tab-btn.errors {
  border-left: none;
}
#alert-log-level .tab-btn.errors:before {
  content: " ";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #FF2954;
  border-radius: 2px;
  position: relative;
  margin-right: 5px;
}
#alert-log-level .tab-btn.warning {
  border-left: none;
}
#alert-log-level .tab-btn.warning:before {
  content: " ";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #F5A623;
  border-radius: 2px;
  position: relative;
  margin-right: 5px;
}
#alert-log-level .tab-btn.info {
  border-left: none;
}
#alert-log-level .tab-btn.info:before {
  content: " ";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #0492EB;
  border-radius: 2px;
  position: relative;
  margin-right: 5px;
}

#event-log-level .tab-btn.errors {
  border-left: none;
}
#event-log-level .tab-btn.errors:before {
  content: " ";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #FF2954;
  border-radius: 2px;
  position: relative;
  margin-right: 5px;
}
#event-log-level .tab-btn.alert {
  border-left: none;
}
#event-log-level .tab-btn.alert:before {
  content: " ";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #F5A623;
  border-radius: 2px;
  position: relative;
  margin-right: 5px;
}
#event-log-level .tab-btn.info {
  border-left: none;
}
#event-log-level .tab-btn.info:before {
  content: " ";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #0492EB;
  border-radius: 2px;
  position: relative;
  margin-right: 5px;
}

#event-type .tab-btn.operation,
#alert-type .tab-btn.operation {
  border-left: none;
}
#event-type .tab-btn.operation:before,
#alert-type .tab-btn.operation:before {
  content: " ";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../img/svg/OperationNormal.svg);
  border-radius: 2px;
  top: 3px;
  position: relative;
  margin-right: 5px;
}
#event-type .tab-btn.operation.selected:before,
#alert-type .tab-btn.operation.selected:before {
  background: url(../img/svg/OperationInfo.svg);
}
#event-type .tab-btn.operation:hover:before,
#alert-type .tab-btn.operation:hover:before {
  background: url(../img/svg/OperationInfo.svg);
}
#event-type .tab-btn.system,
#alert-type .tab-btn.system {
  border-left: none;
}
#event-type .tab-btn.system:before,
#alert-type .tab-btn.system:before {
  content: " ";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../img/svg/SystemNormal.svg);
  border-radius: 2px;
  top: 3px;
  position: relative;
  margin-right: 5px;
}
#event-type .tab-btn.system.selected:before,
#alert-type .tab-btn.system.selected:before {
  background: url(../img/svg/SystemInfo.svg);
}
#event-type .tab-btn.system:hover:before,
#alert-type .tab-btn.system:hover:before {
  background: url(../img/svg/SystemInfo.svg);
}
#event-type .tab-btn.device,
#alert-type .tab-btn.device {
  border-left: none;
}
#event-type .tab-btn.device:before,
#alert-type .tab-btn.device:before {
  content: " ";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../img/svg/DeviceNormal.svg);
  border-radius: 2px;
  top: 3px;
  position: relative;
  margin-right: 5px;
}
#event-type .tab-btn.device.selected:before,
#alert-type .tab-btn.device.selected:before {
  background: url(../img/svg/DeviceInfo.svg);
}
#event-type .tab-btn.device:hover:before,
#alert-type .tab-btn.device:hover:before {
  background: url(../img/svg/DeviceInfo.svg);
}
#event-type .tab-btn.client,
#alert-type .tab-btn.client {
  border-left: none;
}
#event-type .tab-btn.client:before,
#alert-type .tab-btn.client:before {
  content: " ";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../img/svg/ClientNormal.svg);
  border-radius: 2px;
  top: 3px;
  position: relative;
  margin-right: 5px;
}
#event-type .tab-btn.client.selected:before,
#alert-type .tab-btn.client.selected:before {
  background: url(../img/svg/ClientInfo.svg);
}
#event-type .tab-btn.client:hover:before,
#alert-type .tab-btn.client:hover:before {
  background: url(../img/svg/ClientInfo.svg);
}

.icon.error-dot,
.icon.warning-dot,
.icon.info-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 2px;
}

.icon.error-dot {
  background: #FF2954;
}

.icon.warning-dot {
  background: #F5A623;
}

.icon.info-dot {
  background: #0492EB;
}

.operation-error .icon {
  width: 16px;
  height: 16px;
  background: url(../img/svg/OperationErrors.svg);
}

.operation-warning .icon {
  width: 16px;
  height: 16px;
  background: url(../img/svg/OperationAlert.svg);
}

.operation-info .icon {
  width: 16px;
  height: 16px;
  background: url(../img/svg/OperationInfo.svg);
}

.client-error .icon {
  width: 16px;
  height: 16px;
  background: url(../img/svg/ClientErrors.svg);
}

.client-warning .icon {
  width: 16px;
  height: 16px;
  background: url(../img/svg/ClientAlert.svg);
}

.client-info .icon {
  width: 16px;
  height: 16px;
  background: url(../img/svg/ClientInfo.svg);
}

.device-error .icon {
  width: 16px;
  height: 16px;
  background: url(../img/svg/DeviceErrors.svg);
}

.device-warning .icon {
  width: 16px;
  height: 16px;
  background: url(../img/svg/DeviceAlert.svg);
}

.device-info .icon {
  width: 16px;
  height: 16px;
  background: url(../img/svg/DeviceInfo.svg);
}

.system-error .icon {
  width: 16px;
  height: 16px;
  background: url(../img/svg/SystemErrors.svg);
}

.system-warning .icon {
  width: 16px;
  height: 16px;
  background: url(../img/svg/SystemAlert.svg);
}

.system-info .icon {
  width: 16px;
  height: 16px;
  background: url(../img/svg/SystemInfo.svg);
}

.log-type-wrap {
  display: inline-block;
  vertical-align: middle;
}
.log-type-wrap .icon {
  margin-left: 10px;
}
.log-type-wrap .text {
  margin-left: 5px;
}

.cancel-migration {
  color: #0492EB;
  font-weight: bold;
  cursor: pointer;
}
.cancel-migration:hover {
  color: #04B0FF;
}

#migrate-steps {
  margin: auto;
  height: 100%;
  padding: 25px 0;
}
#migrate-steps .step-count {
  text-align: center;
  margin-bottom: 25px;
}
#migrate-steps .step-count::after {
  content: "";
  border-bottom: 1px solid rgba(204, 208, 209, 0.7);
  width: 100%;
  display: inline-block;
  margin-top: 30px;
}
#migrate-steps .setup-form {
  padding: 30px 30px 48px 30px;
  background-color: #ffffff;
}
#migrate-steps .setup-field {
  height: 100%;
}
#migrate-steps .step-text {
  margin-right: 6px;
}
#migrate-steps .step-line {
  margin-right: 6px;
  width: 97px;
}
#migrate-steps .setup-field .step-circle {
  font-size: 15px;
  width: 30px;
  height: 30px;
  line-height: 28px;
}
#migrate-steps .bold-tip {
  font-size: 15px;
  color: var(--s-color-text-primary, #212121);
  text-align: left;
  font-weight: bold;
  line-height: 28px;
  vertical-align: middle;
}
#migrate-steps .tip-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/Tips.svg);
  vertical-align: middle;
  margin-right: 12px;
}
#migrate-steps .site-tip-2 {
  line-height: 28px;
  margin-left: 40px;
  margin-bottom: 28px;
}
#migrate-steps .device-list-title {
  margin-bottom: 16px;
}
#migrate-steps .warning-note {
  margin-left: 210px;
  width: 450px;
}
#migrate-steps .icon-tip::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: text-bottom;
  margin: 0 10px;
  background: url(../img/svg/StatusMigrating.svg);
}

.migrating-icon {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto;
  background: url(../img/RemovingDevices.png) no-repeat;
  margin-bottom: 24px;
}

#forgeting-device-msg .msg-wrap {
  width: 400px;
}
#forgeting-device-msg .msg-title {
  background-color: var(--msg-background-content, #ffffff);
}
#forgeting-device-msg .msg-close {
  display: none;
}

#confirm-forget-device-msg .msg-title::before {
  content: "";
  background: url(../img/svg/MessageIconWarning.svg) no-repeat;
  margin-right: 10px;
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
}
#confirm-forget-device-msg .msg-content-container {
  padding-left: 64px;
}
#confirm-forget-device-msg .msg-title-container {
  padding-left: 34px;
  vertical-align: middle;
  line-height: 24px;
}
#confirm-forget-device-msg .msg-btn-container {
  padding-left: 64px;
}

#migrate-start-panel .center,
#migrate-steps .center,
#migrate-success-panel .center,
#migrate-fail-panel .center {
  margin: 0 auto;
}
#migrate-start-panel .text.bold,
#migrate-steps .text.bold,
#migrate-success-panel .text.bold,
#migrate-fail-panel .text.bold {
  font-weight: bold;
}
#migrate-start-panel .site-mig-logo,
#migrate-steps .site-mig-logo,
#migrate-success-panel .site-mig-logo,
#migrate-fail-panel .site-mig-logo {
  width: 180px;
  height: 180px;
  max-width: 180px;
  margin: 0 auto;
  background: url(../img/SiteMigration.png) no-repeat;
  background-size: 180px;
  margin-bottom: 24px;
}
#migrate-start-panel .migration-mig-logo,
#migrate-steps .migration-mig-logo,
#migrate-success-panel .migration-mig-logo,
#migrate-fail-panel .migration-mig-logo {
  width: 180px;
  height: 180px;
  max-width: 180px;
  margin: 0 auto;
  background: url(../img/ControllerMigration.png) no-repeat;
  background-size: 180px;
  margin-bottom: 24px;
}
#migrate-start-panel .migration-cbc-logo,
#migrate-steps .migration-cbc-logo,
#migrate-success-panel .migration-cbc-logo,
#migrate-fail-panel .migration-cbc-logo {
  width: 180px;
  height: 180px;
  max-width: 180px;
  margin: 0 auto;
  background: url(../img/Migration.png) no-repeat;
  background-size: 180px;
  margin-bottom: 24px;
}
#migrate-start-panel .migration-success-logo,
#migrate-steps .migration-success-logo,
#migrate-success-panel .migration-success-logo,
#migrate-fail-panel .migration-success-logo {
  width: 180px;
  height: 180px;
  max-width: 180px;
  margin: 0 auto;
  background: url(../img/Feedback.png) no-repeat;
  background-size: 180px;
  margin-bottom: 24px;
}
#migrate-start-panel .migration-fail-logo,
#migrate-steps .migration-fail-logo,
#migrate-success-panel .migration-fail-logo,
#migrate-fail-panel .migration-fail-logo {
  width: 180px;
  height: 180px;
  max-width: 180px;
  margin: 0 auto;
  background: url(../img/Feedback_Fail.png) no-repeat;
  background-size: 180px;
  margin-bottom: 24px;
}
#migrate-start-panel .site-mig-logo-text,
#migrate-steps .site-mig-logo-text,
#migrate-success-panel .site-mig-logo-text,
#migrate-fail-panel .site-mig-logo-text {
  font-size: 16px;
  color: var(--s-color-text-primary, #212121);
  letter-spacing: 0;
  line-height: 28px;
  text-align: center;
  font-weight: bold;
}
#migrate-start-panel .site-mig-logo-tip,
#migrate-steps .site-mig-logo-tip,
#migrate-success-panel .site-mig-logo-tip,
#migrate-fail-panel .site-mig-logo-tip {
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  letter-spacing: 0;
  text-align: center;
}
#migrate-start-panel .logo-tips,
#migrate-steps .logo-tips,
#migrate-success-panel .logo-tips,
#migrate-fail-panel .logo-tips {
  margin-bottom: 30px;
  text-align: center;
}
#migrate-start-panel .logo-tips-cbc,
#migrate-steps .logo-tips-cbc,
#migrate-success-panel .logo-tips-cbc,
#migrate-fail-panel .logo-tips-cbc {
  margin-top: 20px;
  margin-bottom: 30px;
}
#migrate-start-panel .site-mig-logo-tip-first,
#migrate-steps .site-mig-logo-tip-first,
#migrate-success-panel .site-mig-logo-tip-first,
#migrate-fail-panel .site-mig-logo-tip-first {
  color: #FF2954;
}
#migrate-start-panel .site-mig-logo-tip-first-second,
#migrate-steps .site-mig-logo-tip-first-second,
#migrate-success-panel .site-mig-logo-tip-first-second,
#migrate-fail-panel .site-mig-logo-tip-first-second {
  color: #FF2954;
}
#migrate-start-panel #migrate-start-button .button-button,
#migrate-steps #migrate-start-button .button-button,
#migrate-success-panel #migrate-start-button .button-button,
#migrate-fail-panel #migrate-start-button .button-button {
  width: 240px;
}

.migrate-bar .progressbar-content {
  width: 410px;
}
.migrate-bar .widget-fieldlabel-wrap {
  display: none;
}

#migrate-tab .tab-btn.site:before {
  content: " ";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../img/svg/SiteMigrationNormal.svg);
  position: relative;
  top: 3px;
  margin-right: 5px;
}
#migrate-tab .tab-btn.site.selected:before {
  background: url(../img/svg/SiteMigrationBlue.svg);
}
#migrate-tab .tab-btn.site:hover:before {
  background: url(../img/svg/SiteMigrationBlue.svg);
}
#migrate-tab .tab-btn.controller:before {
  content: " ";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../img/svg/ControllerMigrationNormal.svg);
  position: relative;
  top: 3px;
  margin-right: 5px;
}
#migrate-tab .tab-btn.controller.selected:before {
  background: url(../img/svg/ControllerMigrationBlue.svg);
}
#migrate-tab .tab-btn.controller:hover:before {
  background: url(../img/svg/ControllerMigrationBlue.svg);
}

#maintenance-view #controller-status .widget-fieldlabel-wrap {
  color: var(--s-color-text-tertiary, #5E696F);
}
#maintenance-view #controller-status .widget-container {
  margin-bottom: 6px;
}
#maintenance-view #controller-status .storage-bar {
  margin-bottom: 14px;
}
#maintenance-view #controller-status .storage-bar .widget-fieldlabel-wrap {
  vertical-align: middle;
}
#maintenance-view #controller-status .storage-bar .progressbar-value {
  background-color: #04B0FF;
}
#maintenance-view #controller-status .storage-bar .progressbar-content {
  width: 388px;
}
#maintenance-view #controller-status .storage-bar .progressbar-wrap-outer {
  position: relative;
}
#maintenance-view #controller-status .storage-bar .widget-tips {
  position: absolute;
  right: 50px;
}
#maintenance-view #controller-status .storage-bar .widget-tips .tips-content {
  color: var(--s-color-side, #363E4D);
}
#maintenance-view #controller-status #progressbar-container {
  position: relative;
}
#maintenance-view #controller-status #progressbar-container .combination-wrap-outer .separator {
  display: none;
}
#maintenance-view #controller-status #progressbar-container div[widget=repeat].storage-list .processbar-fieldlabel {
  color: var(--s-color-text-primary, #212121);
}
#maintenance-view #backup-note {
  width: auto;
  max-width: 430px;
}
#maintenance-view div[widget=file].file_inline .widget-fieldlabel-wrap {
  vertical-align: middle;
}
#maintenance-view div[widget=file].file_inline a.button-button {
  height: 32px;
  line-height: 30px;
}

#downgrade-confirm-msg .msg-wrap {
  width: 570px;
}

#new-version-msg {
  width: 670px;
}
#new-version-msg .msg-wrap {
  width: 670px;
}
#new-version-msg .u-label-none .release-log-wrap-outer {
  padding-left: 0px;
}

/* -------------------------------------------------------------------------- */
/*                                 Controller                                 */
/* -------------------------------------------------------------------------- */
.controller-view div[widget=combobox].sm .combobox-wrap {
  width: 110px;
}
.controller-view div[widget=time].sm .time-display-container {
  width: 110px;
}
.controller-view .checkbox-container a[href] {
  color: #0492EB;
}
.controller-view .combobox-container.controller-timezone .combobox-wrap,
.controller-view .combobox-container.controller-timezone .text-wrap {
  max-width: 340px;
  width: 340px;
}
.controller-view .large-device-number {
  font-size: 28px;
  color: var(--s-color-side, #363E4D);
}
.controller-view .large-device-number .normal {
  color: #0DC901;
}
.controller-view .large-device-number .waring {
  color: #FF9500;
}
.controller-view #improve-plan .panel-header,
.controller-view #collects-info-panel .panel-header,
.controller-view #app-notification-panel .panel-header {
  display: none;
}
.controller-view #improve-plan .panel-content,
.controller-view #collects-info-panel .panel-content,
.controller-view #app-notification-panel .panel-content {
  padding-top: 0;
}
.controller-view #improve-plan .exp-improve-title,
.controller-view #improve-plan .collects-info-title,
.controller-view #collects-info-panel .exp-improve-title,
.controller-view #collects-info-panel .collects-info-title,
.controller-view #app-notification-panel .exp-improve-title,
.controller-view #app-notification-panel .collects-info-title {
  font-weight: bold;
  font-size: 16px;
  color: var(--s-color-text-primary, #212121);
  letter-spacing: 0;
}
.controller-view #improve-plan .exp-improve-enable .widget-fieldlabel-wrap,
.controller-view #improve-plan .collects-info-enable .widget-fieldlabel-wrap,
.controller-view #collects-info-panel .exp-improve-enable .widget-fieldlabel-wrap,
.controller-view #collects-info-panel .collects-info-enable .widget-fieldlabel-wrap,
.controller-view #app-notification-panel .exp-improve-enable .widget-fieldlabel-wrap,
.controller-view #app-notification-panel .collects-info-enable .widget-fieldlabel-wrap {
  width: 100px;
}
.controller-view .history-second-title {
  font-size: 14px;
  font-weight: bold;
}

#client-history-close-msg .client-confirm-msg-title {
  font-size: 16px;
  font-weight: bold;
}

/* -------------------------------------------------------------------------- */
/*                                 Auto Backup                                */
/* -------------------------------------------------------------------------- */
.auto-backup-view .hint {
  color: var(--tab-color-primary, #868E93);
}

/* -------------------------------------------------------------------------- */
/*                                 About Msg                                  */
/* -------------------------------------------------------------------------- */
#about-msg .msg-title-container:before {
  display: none;
}
#about-msg .msg-title {
  text-align: center;
  padding-left: 0;
  height: 86px;
  padding-top: 40px;
  font-size: 26px;
}
#about-msg div[widget=displaylabel] .widget-fieldlabel-wrap {
  color: var(--s-color-text-tertiary, #5E696F);
}
#about-msg div[widget=displaylabel] a {
  color: #0492EB;
  text-decoration: underline;
}

/* -------------------------------------------------------------------------- */
/*                                open client tip                                 */
/* -------------------------------------------------------------------------- */
.client-tip-container.padding-tip {
  padding: 160px;
}
.client-tip-container.padding-for-client {
  padding: 20px 0;
}
.client-tip-container .client-tip-item {
  width: 300px;
  margin: 0 auto;
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  text-align: center;
}
.client-tip-container.bg-white {
  background: var(--card-primary, #FFFFFF);
  border: 0 solid var(--tab-color-primary, #868E93);
  box-shadow: 2px 2px 5px 0 rgba(54, 62, 77, 0.05);
  border-radius: 3px;
}
.client-tip-container .img {
  margin: 0 auto;
  width: 180px;
  height: 180px;
  background: url(../img/notOpen.png) no-repeat;
  background-size: 100%;
  margin-bottom: 20px;
}
.client-tip-container .client-tip-btn {
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #0492EB;
}

#history-rangepicker #history-rangepicker_picker {
  position: fixed;
  right: 20px;
  z-index: 6;
}
#history-rangepicker .separator {
  background: transparent;
}
#history-rangepicker.pro #history-rangepicker_picker {
  position: absolute;
  right: 0px;
}

#history-grid {
  margin-top: 40px;
}

#exp-improve-msg .msg-content-container {
  padding: 30px 60px 24px;
  margin-top: 30px;
}
#exp-improve-msg .exp-improve-img {
  display: inline-block;
  width: 240px;
  height: 160px;
  margin-bottom: 30px;
  background: url(../img/exp-improve.png) no-repeat;
  background-size: 100% 100%;
}
#exp-improve-msg .exp-improve-title {
  margin-bottom: 16px;
  font-size: 18px;
  color: var(--s-color-text-primary, #212121);
  letter-spacing: 0;
}
#exp-improve-msg .exp-improve-tip {
  line-height: 20px;
}
#exp-improve-msg #exp-improve-join-button {
  margin-bottom: 10px;
}
#exp-improve-msg #exp-improve-join-button .button-button {
  min-width: 300px;
}
#exp-improve-msg #exp-improve-no-thanks-button .button-button {
  color: #A5ABB4;
}

#feature-release-note .msg-content-container {
  max-height: calc(90vh - 116px);
}
#feature-release-note #feature-release-ok-button {
  text-align: center;
}
#feature-release-note #feature-release-ok-button .button-button {
  min-width: 300px;
}
#feature-release-note .paragraph-wrap-outer {
  line-height: 20px;
  color: var(--tab-color-primary, #868E93);
}
#feature-release-note .paragraph-container {
  margin-bottom: 0px;
}
#feature-release-note .release-note-list {
  list-style-type: decimal;
  padding: 0;
}
#feature-release-note .release-note-list a {
  color: #0492EB;
  text-decoration: underline;
}
#feature-release-note .release-note-list ul.list-level-2 {
  margin-left: 22px;
  list-style-type: circle;
}
#feature-release-note .release-note-list ul.list-level-3 {
  margin-left: 22px;
  list-style-type: disc;
}
#feature-release-note .release-note-list li {
  margin-left: 22px;
  line-height: 20px;
  color: var(--tab-color-primary, #868E93);
  margin-bottom: 5px;
}

#ap-batch-forget-msg .device-item,
#sw-batch-forget-msg .device-item {
  display: inline-block;
  height: 25px;
  line-height: 25px;
  padding: 0 10px;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 3px;
  background: var(--tag-background-primary, rgba(73, 84, 107, 0.08));
}

#client-overview-card {
  background-color: var(--s-background-panel, #ffffff);
}

.health-column > span {
  display: inline-block;
  vertical-align: middle;
  word-break: break-word;
}
.health-column .point {
  width: 8px;
  height: 8px;
  border-radius: 100%;
  margin-right: 5px;
}
.health-column .health-good {
  background: #22B819;
}
.health-column .health-fair {
  background: #FFBB00;
}
.health-column .health-poor {
  background: #FF2954;
}
.health-column .health-no-data {
  background: #BFC3C9;
}

.wire-empty-text {
  color: #a0a0a0;
  font-size: 14px;
}

.client-progress-item {
  width: 50%;
  justify-content: center;
}

.wire-icon-wrapper {
  display: flex;
  flex-direction: column;
}

.incident-level-tab.level-0::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  content: "";
  display: inline-block;
  background-color: #FF2954;
}
.incident-level-tab.level-1::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  content: "";
  display: inline-block;
  background-color: #FF9500;
}
.incident-level-tab.level-2::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  content: "";
  display: inline-block;
  background-color: #FFD701;
}
.incident-level-tab.level-3::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  content: "";
  display: inline-block;
  background-color: #04B0FF;
}

#terms-filed,
#cbc-terms-filed {
  padding-top: 18px;
}
#terms-filed .terms-title,
#cbc-terms-filed .terms-title {
  font-weight: bold;
  font-size: 15px;
  line-height: 20px;
  color: var(--s-color-text-primary, #212121);
  letter-spacing: 0;
  margin-bottom: 18px;
}
#terms-filed .check-terms,
#cbc-terms-filed .check-terms {
  display: flex;
  align-items: center;
}
#terms-filed .check-terms.widget-container,
#cbc-terms-filed .check-terms.widget-container {
  margin-bottom: 0;
}
#terms-filed .check-terms .checkbox-label .checkbox-icon,
#cbc-terms-filed .check-terms .checkbox-label .checkbox-icon {
  vertical-align: text-top;
}
#terms-filed .check-terms .terms-note,
#cbc-terms-filed .check-terms .terms-note {
  line-height: 28px;
}
#terms-filed .check-terms .checkbox-error .checkbox-label:not(.disabled) .checkbox-icon-inner,
#cbc-terms-filed .check-terms .checkbox-error .checkbox-label:not(.disabled) .checkbox-icon-inner {
  border-color: #FF0000;
}

.keywords-ip .keywords-add {
  right: -70px;
}

.vpn-server-view .combination-item .widget-fieldlabel-wrap {
  display: none;
}
.vpn-server-view .combination-item .combobox-wrap {
  width: 80px;
}

#ip-mac-binding-grid .search-bar-container .text-wrap {
  width: 240px;
}

/* -------------------------------------------------------------------------- */
/*                                 Mac Auth                                   */
/* -------------------------------------------------------------------------- */
.mac-auth-panel-title {
  font-size: 16px;
  color: var(--s-color-text-primary, #212121);
  font-weight: bold;
  margin-bottom: 26px;
}

#content-mask {
  position: fixed;
  background: var(--s-color-mask, rgba(81, 81, 81, 0.3));
  z-index: 500;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
}
#content-mask.widget-container {
  margin-bottom: 0;
}

#local-user-create-limit.msg-container .msg-wrap,
#voucher-create-limit.msg-container .msg-wrap {
  width: 700px;
}

#one-to-one-grid .search-bar-container .text-wrap {
  width: 250px;
  max-width: 250px;
}

/* SDNR 影响的部分， 临时修改 */
#software-upgrade-msg-btn-cancel {
  overflow: hidden;
  vertical-align: top;
  margin-top: 2px;
}

.help-hide {
  display: none !important;
}

#dashboard-block-tip {
  margin-top: 350px;
  height: 550px;
}
#dashboard-block-tip .no-permission {
  margin-bottom: 9px;
  font-size: 16px;
  line-height: 21px;
  font-weight: bold;
}

#mode-choose-msg {
  top: 60px !important;
  right: 30px;
  left: auto !important;
}
#mode-choose-msg #mode-field {
  position: relative;
}
#mode-choose-msg #mode-field #msp-mode .radio-group-list-wrap {
  margin-bottom: 50px;
  font-size: 16px;
  font-weight: bold;
}
#mode-choose-msg #mode-field #msp-content {
  position: absolute;
  left: 22px;
  top: 25px;
}
#mode-choose-msg #mode-field #normal-content {
  position: absolute;
  left: 22px;
  top: 105px;
}

.wids-detection.checkbox-group-container .checkbox-group-list-wrap {
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
  max-height: 300px;
}
.wids-detection.checkbox-group-container .checkbox-group-list-wrap .checkbox-list {
  width: 390px;
}

#audit-logs-grid .grid-panel-tbar-container {
  position: absolute;
  top: 0;
}
#audit-logs-grid .grid-search-text .text-wrap {
  width: 290px;
  max-width: 290px;
}

.remote-logging-paragraph {
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  color: #0492EB;
  margin-right: 30px;
  margin-bottom: 0;
}

.audit-logs-panel {
  padding-top: 4px;
}
.audit-logs-panel .hidden {
  display: none !important;
}
.audit-logs-panel .audit-logs-tabs-container {
  margin-left: 310px;
  min-width: 702px;
  margin-right: 300px;
}
.audit-logs-panel .icon-button .button-button {
  background-color: #0492EB;
  color: white;
}
.audit-logs-panel .tab-btn.errors {
  border-left: none;
}
.audit-logs-panel .tab-btn.errors:before {
  content: " ";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #FF2954;
  border-radius: 2px;
  position: relative;
  margin-right: 5px;
}
.audit-logs-panel .tab-btn.alert {
  border-left: none;
}
.audit-logs-panel .tab-btn.alert:before {
  content: " ";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #F5A623;
  border-radius: 2px;
  position: relative;
  margin-right: 5px;
}
.audit-logs-panel .tab-btn.info {
  border-left: none;
}
.audit-logs-panel .tab-btn.info:before {
  content: " ";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #0492EB;
  border-radius: 2px;
  position: relative;
  margin-right: 5px;
}
.audit-logs-panel .log-date-combobox {
  text-align: left;
  vertical-align: top;
}
.audit-logs-panel .log-date-combobox .widget-fieldlabel-wrap {
  display: none;
}
.audit-logs-panel .opts-btn-container {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
}

.loopback-interface-title {
  position: absolute;
  line-height: 32px;
  font-size: 15px;
  color: var(--tips-color);
}

.daylight-header {
  font-size: 13px;
  font-weight: bold;
  padding: 12px 16px;
  color: var(--s-color-text-primary, #212121);
  border-bottom: 1px solid var(--s-color-text-split, #EBECED);
}

.daylight-status {
  padding: 16px 16px 10px;
  font-size: 13px;
  font-weight: bold;
  color: var(--s-color-text-primary, #212121);
}

.daylight-label {
  padding: 6px 16px;
  color: var(--tab-color-primary, #868E93);
}

.daylight-offset {
  padding: 6px 16px 16px;
  color: var(--tab-color-primary, #868E93);
}

.daylight-value-offset {
  padding: 6px 16px 16px;
  text-align: right;
  color: var(--s-color-text-primary, #212121);
}

.daylight-value {
  padding: 6px 16px;
  text-align: right;
  color: var(--s-color-text-primary, #212121);
}

.tag-highlight-icon {
  background: var(--tag-highlight, #CDE9FB);
  border-radius: 11px;
  padding: 5px 10px;
  color: #0492EB;
}

#device-tab {
  overflow: hidden;
}

.spanning-tree-fieldset {
  position: relative;
  border-bottom: 3px solid var(--s-color-text-split, #ebeced);
}
.spanning-tree-fieldset .spanning-tree-title {
  color: var(--tips-color, #868E93);
  padding-bottom: 6px;
  border-bottom: 3px solid var(--s-color-text-split, #ebeced);
}
.spanning-tree-fieldset .stp-tip {
  position: absolute;
  top: -2px;
  left: 150px;
}

#device-tab .cli-beta-test {
  display: inline-block;
  margin: 0px 4px -10px -12px;
  width: 39px;
  height: 20px;
  vertical-align: text-bottom;
  background: url(../img/BETA.png) no-repeat;
}

/* ==========================================================================
   Float
   ========================================================================== */
.u-float_left {
  float: left;
}

.u-float_right {
  float: right;
}

.u-d-none {
  display: none;
}

.u-d-inline {
  display: inline;
}

.u-d-inline-block {
  display: inline-block;
}

.u-d-block {
  display: block;
}

.u-d-flex {
  display: flex;
}

.u-d-table {
  display: table;
}

.u-d-table-cell {
  display: table-cell;
}

.u-d-position-hidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

/* ==========================================================================
   Text
   ========================================================================== */
.u-text-center {
  text-align: center !important;
}

.u-text-right {
  text-align: right !important;
}

.u-text-left {
  text-align: left !important;
}

.u-text-decoration-none {
  text-decoration: none;
}
.u-text-decoration-none a {
  text-decoration: none;
}

.u-text-decoration-underline {
  text-decoration: underline;
}
.u-text-decoration-underline a {
  text-decoration: underline;
}

.u-text-pre-wrap {
  white-space: pre-wrap;
}

.u-text-word-break {
  word-break: normal;
  word-break: break-word;
  word-wrap: break-word;
}

.u-text-overflow-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.u-clearfix:after,
.u-clearfix:before {
  display: table;
  content: "";
}

.u-clearfix:after {
  clear: both;
}

/* ==========================================================================
   Font size
   ========================================================================== */
.u-font-size_0 {
  font-size: 0;
}

.u-font-size_xxl {
  font-size: 20px;
}

.u-font-size_xl {
  font-size: 18px;
}

.u-font-size_lg {
  font-size: 16px;
}

.u-font-size_md {
  font-size: 14px;
}

.u-font-size_sm {
  font-size: 12px;
}

.u-font-weight-normal {
  font-weight: normal;
}

.u-font-weight-bold {
  font-weight: bold;
}

.u-font-weight-600 {
  font-weight: 600;
}

.u-label-bold .widget-fieldlabel-wrap {
  font-weight: bold;
}

.u-label-inline-block > .widget-fieldlabel-wrap {
  display: inline-block;
}

.u-label-block > .widget-fieldlabel-wrap {
  display: block;
}

.u-label-none > .widget-fieldlabel-wrap {
  display: none;
}

.u-label-hidden > .widget-fieldlabel-wrap {
  visibility: hidden;
}

.u-label-auto > .widget-fieldlabel-wrap {
  width: auto;
}

.u-label-shrink > .widget-fieldlabel-wrap {
  margin-right: 0;
}

.u-label-emphasis > .widget-fieldlabel-wrap {
  font-weight: bold;
  font-size: 15px;
}

.u-label-wrap > .widget-fieldlabel-wrap {
  line-height: 16px;
}

.u-label-dst > .widget-fieldlabel-wrap {
  display: block;
  width: auto;
  color: var(--tab-color-primary, #868E93);
  margin-bottom: 5px;
}

.label-empty > .widget-fieldlabel-wrap {
  font-size: 0;
}

.m-t-0 {
  margin-top: 0px;
}

.m-t-1 {
  margin-top: 1px;
}

.m-t-2 {
  margin-top: 2px;
}

.m-t-3 {
  margin-top: 3px;
}

.m-t-4 {
  margin-top: 4px;
}

.m-t-5 {
  margin-top: 5px;
}

.m-t-6 {
  margin-top: 6px;
}

.m-t-7 {
  margin-top: 7px;
}

.m-t-8 {
  margin-top: 8px;
}

.m-t-9 {
  margin-top: 9px;
}

.m-t-10 {
  margin-top: 10px;
}

.m-t-11 {
  margin-top: 11px;
}

.m-t-12 {
  margin-top: 12px;
}

.m-t-13 {
  margin-top: 13px;
}

.m-t-14 {
  margin-top: 14px;
}

.m-t-15 {
  margin-top: 15px;
}

.m-t-16 {
  margin-top: 16px;
}

.m-t-17 {
  margin-top: 17px;
}

.m-t-18 {
  margin-top: 18px;
}

.m-t-19 {
  margin-top: 19px;
}

.m-t-20 {
  margin-top: 20px;
}

.m-t-21 {
  margin-top: 21px;
}

.m-t-22 {
  margin-top: 22px;
}

.m-t-23 {
  margin-top: 23px;
}

.m-t-24 {
  margin-top: 24px;
}

.m-t-25 {
  margin-top: 25px;
}

.m-t-26 {
  margin-top: 26px;
}

.m-t-27 {
  margin-top: 27px;
}

.m-t-28 {
  margin-top: 28px;
}

.m-t-29 {
  margin-top: 29px;
}

.m-t-30 {
  margin-top: 30px;
}

.m-t-31 {
  margin-top: 31px;
}

.m-t-32 {
  margin-top: 32px;
}

.m-t-33 {
  margin-top: 33px;
}

.m-t-34 {
  margin-top: 34px;
}

.m-t-35 {
  margin-top: 35px;
}

.m-t-36 {
  margin-top: 36px;
}

.m-t-37 {
  margin-top: 37px;
}

.m-t-38 {
  margin-top: 38px;
}

.m-t-39 {
  margin-top: 39px;
}

.m-t-40 {
  margin-top: 40px;
}

.m-t-41 {
  margin-top: 41px;
}

.m-t-42 {
  margin-top: 42px;
}

.m-t-43 {
  margin-top: 43px;
}

.m-t-44 {
  margin-top: 44px;
}

.m-t-45 {
  margin-top: 45px;
}

.m-t-100 {
  margin-top: 100px;
}

.m-b-0 {
  margin-bottom: 0px;
}

.m-b-1 {
  margin-bottom: 1px;
}

.m-b-2 {
  margin-bottom: 2px;
}

.m-b-3 {
  margin-bottom: 3px;
}

.m-b-4 {
  margin-bottom: 4px;
}

.m-b-5 {
  margin-bottom: 5px;
}

.m-b-6 {
  margin-bottom: 6px;
}

.m-b-7 {
  margin-bottom: 7px;
}

.m-b-8 {
  margin-bottom: 8px;
}

.m-b-9 {
  margin-bottom: 9px;
}

.m-b-10 {
  margin-bottom: 10px;
}

.m-b-11 {
  margin-bottom: 11px;
}

.m-b-12 {
  margin-bottom: 12px;
}

.m-b-13 {
  margin-bottom: 13px;
}

.m-b-14 {
  margin-bottom: 14px;
}

.m-b-15 {
  margin-bottom: 15px;
}

.m-b-16 {
  margin-bottom: 16px;
}

.m-b-17 {
  margin-bottom: 17px;
}

.m-b-18 {
  margin-bottom: 18px;
}

.m-b-19 {
  margin-bottom: 19px;
}

.m-b-20 {
  margin-bottom: 20px;
}

.m-b-21 {
  margin-bottom: 21px;
}

.m-b-22 {
  margin-bottom: 22px;
}

.m-b-23 {
  margin-bottom: 23px;
}

.m-b-24 {
  margin-bottom: 24px;
}

.m-b-25 {
  margin-bottom: 25px;
}

.m-b-26 {
  margin-bottom: 26px;
}

.m-b-27 {
  margin-bottom: 27px;
}

.m-b-28 {
  margin-bottom: 28px;
}

.m-b-29 {
  margin-bottom: 29px;
}

.m-b-30 {
  margin-bottom: 30px;
}

.m-b-31 {
  margin-bottom: 31px;
}

.m-b-32 {
  margin-bottom: 32px;
}

.m-b-33 {
  margin-bottom: 33px;
}

.m-b-34 {
  margin-bottom: 34px;
}

.m-b-35 {
  margin-bottom: 35px;
}

.m-b-36 {
  margin-bottom: 36px;
}

.m-b-37 {
  margin-bottom: 37px;
}

.m-b-38 {
  margin-bottom: 38px;
}

.m-b-39 {
  margin-bottom: 39px;
}

.m-b-40 {
  margin-bottom: 40px;
}

.m-b-41 {
  margin-bottom: 41px;
}

.m-b-42 {
  margin-bottom: 42px;
}

.m-b-43 {
  margin-bottom: 43px;
}

.m-b-44 {
  margin-bottom: 44px;
}

.m-b-45 {
  margin-bottom: 45px;
}

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

.m-l-1 {
  margin-left: 1px !important;
}

.m-l-2 {
  margin-left: 2px !important;
}

.m-l-3 {
  margin-left: 3px !important;
}

.m-l-4 {
  margin-left: 4px !important;
}

.m-l-5 {
  margin-left: 5px !important;
}

.m-l-6 {
  margin-left: 6px !important;
}

.m-l-7 {
  margin-left: 7px !important;
}

.m-l-8 {
  margin-left: 8px !important;
}

.m-l-9 {
  margin-left: 9px !important;
}

.m-l-10 {
  margin-left: 10px !important;
}

.m-l-11 {
  margin-left: 11px !important;
}

.m-l-12 {
  margin-left: 12px !important;
}

.m-l-13 {
  margin-left: 13px !important;
}

.m-l-14 {
  margin-left: 14px !important;
}

.m-l-15 {
  margin-left: 15px !important;
}

.m-l-16 {
  margin-left: 16px !important;
}

.m-l-17 {
  margin-left: 17px !important;
}

.m-l-18 {
  margin-left: 18px !important;
}

.m-l-19 {
  margin-left: 19px !important;
}

.m-l-20 {
  margin-left: 20px !important;
}

.m-l-21 {
  margin-left: 21px !important;
}

.m-l-22 {
  margin-left: 22px !important;
}

.m-l-23 {
  margin-left: 23px !important;
}

.m-l-24 {
  margin-left: 24px !important;
}

.m-l-25 {
  margin-left: 25px !important;
}

.m-l-26 {
  margin-left: 26px !important;
}

.m-l-27 {
  margin-left: 27px !important;
}

.m-l-28 {
  margin-left: 28px !important;
}

.m-l-29 {
  margin-left: 29px !important;
}

.m-l-30 {
  margin-left: 30px !important;
}

.m-l-31 {
  margin-left: 31px !important;
}

.m-l-32 {
  margin-left: 32px !important;
}

.m-l-33 {
  margin-left: 33px !important;
}

.m-l-34 {
  margin-left: 34px !important;
}

.m-l-35 {
  margin-left: 35px !important;
}

.m-l-36 {
  margin-left: 36px !important;
}

.m-l-37 {
  margin-left: 37px !important;
}

.m-l-38 {
  margin-left: 38px !important;
}

.m-l-39 {
  margin-left: 39px !important;
}

.m-l-40 {
  margin-left: 40px !important;
}

.m-l-41 {
  margin-left: 41px !important;
}

.m-l-42 {
  margin-left: 42px !important;
}

.m-l-43 {
  margin-left: 43px !important;
}

.m-l-44 {
  margin-left: 44px !important;
}

.m-l-45 {
  margin-left: 45px !important;
}

.m-l-46 {
  margin-left: 46px !important;
}

.m-l-47 {
  margin-left: 47px !important;
}

.m-l-48 {
  margin-left: 48px !important;
}

.m-l-49 {
  margin-left: 49px !important;
}

.m-l-50 {
  margin-left: 50px !important;
}

.m-l-51 {
  margin-left: 51px !important;
}

.m-l-52 {
  margin-left: 52px !important;
}

.m-l-75 {
  margin-left: 75px;
}

.m-l-210 {
  margin-left: 210px;
}

.m-r-0 {
  margin-right: 0px;
}

.m-r-1 {
  margin-right: 1px;
}

.m-r-2 {
  margin-right: 2px;
}

.m-r-3 {
  margin-right: 3px;
}

.m-r-4 {
  margin-right: 4px;
}

.m-r-5 {
  margin-right: 5px;
}

.m-r-6 {
  margin-right: 6px;
}

.m-r-7 {
  margin-right: 7px;
}

.m-r-8 {
  margin-right: 8px;
}

.m-r-9 {
  margin-right: 9px;
}

.m-r-10 {
  margin-right: 10px;
}

.m-r-11 {
  margin-right: 11px;
}

.m-r-12 {
  margin-right: 12px;
}

.m-r-13 {
  margin-right: 13px;
}

.m-r-14 {
  margin-right: 14px;
}

.m-r-15 {
  margin-right: 15px;
}

.m-r-16 {
  margin-right: 16px;
}

.m-r-17 {
  margin-right: 17px;
}

.m-r-18 {
  margin-right: 18px;
}

.m-r-19 {
  margin-right: 19px;
}

.m-r-20 {
  margin-right: 20px;
}

.m-r-21 {
  margin-right: 21px;
}

.m-r-22 {
  margin-right: 22px;
}

.m-r-23 {
  margin-right: 23px;
}

.m-r-24 {
  margin-right: 24px;
}

.m-r-25 {
  margin-right: 25px;
}

.m-r-26 {
  margin-right: 26px;
}

.m-r-27 {
  margin-right: 27px;
}

.m-r-28 {
  margin-right: 28px;
}

.m-r-29 {
  margin-right: 29px;
}

.m-r-30 {
  margin-right: 30px;
}

.p-t-0 {
  padding-top: 0px;
}

.p-t-1 {
  padding-top: 1px;
}

.p-t-2 {
  padding-top: 2px;
}

.p-t-3 {
  padding-top: 3px;
}

.p-t-4 {
  padding-top: 4px;
}

.p-t-5 {
  padding-top: 5px;
}

.p-t-6 {
  padding-top: 6px;
}

.p-t-7 {
  padding-top: 7px;
}

.p-t-8 {
  padding-top: 8px;
}

.p-t-9 {
  padding-top: 9px;
}

.p-t-10 {
  padding-top: 10px;
}

.p-t-11 {
  padding-top: 11px;
}

.p-t-12 {
  padding-top: 12px;
}

.p-t-13 {
  padding-top: 13px;
}

.p-t-14 {
  padding-top: 14px;
}

.p-t-15 {
  padding-top: 15px;
}

.p-t-16 {
  padding-top: 16px;
}

.p-t-17 {
  padding-top: 17px;
}

.p-t-18 {
  padding-top: 18px;
}

.p-t-19 {
  padding-top: 19px;
}

.p-t-20 {
  padding-top: 20px;
}

.p-t-21 {
  padding-top: 21px;
}

.p-t-22 {
  padding-top: 22px;
}

.p-t-23 {
  padding-top: 23px;
}

.p-t-24 {
  padding-top: 24px;
}

.p-t-25 {
  padding-top: 25px;
}

.p-t-26 {
  padding-top: 26px;
}

.p-t-27 {
  padding-top: 27px;
}

.p-t-28 {
  padding-top: 28px;
}

.p-t-29 {
  padding-top: 29px;
}

.p-t-30 {
  padding-top: 30px;
}

.p-b-0 {
  padding-bottom: 0px;
}

.p-b-1 {
  padding-bottom: 1px;
}

.p-b-2 {
  padding-bottom: 2px;
}

.p-b-3 {
  padding-bottom: 3px;
}

.p-b-4 {
  padding-bottom: 4px;
}

.p-b-5 {
  padding-bottom: 5px;
}

.p-b-6 {
  padding-bottom: 6px;
}

.p-b-7 {
  padding-bottom: 7px;
}

.p-b-8 {
  padding-bottom: 8px;
}

.p-b-9 {
  padding-bottom: 9px;
}

.p-b-10 {
  padding-bottom: 10px;
}

.p-b-11 {
  padding-bottom: 11px;
}

.p-b-12 {
  padding-bottom: 12px;
}

.p-b-13 {
  padding-bottom: 13px;
}

.p-b-14 {
  padding-bottom: 14px;
}

.p-b-15 {
  padding-bottom: 15px;
}

.p-b-16 {
  padding-bottom: 16px;
}

.p-b-17 {
  padding-bottom: 17px;
}

.p-b-18 {
  padding-bottom: 18px;
}

.p-b-19 {
  padding-bottom: 19px;
}

.p-b-20 {
  padding-bottom: 20px;
}

.p-b-21 {
  padding-bottom: 21px;
}

.p-b-22 {
  padding-bottom: 22px;
}

.p-b-23 {
  padding-bottom: 23px;
}

.p-b-24 {
  padding-bottom: 24px;
}

.p-b-25 {
  padding-bottom: 25px;
}

.p-b-26 {
  padding-bottom: 26px;
}

.p-b-27 {
  padding-bottom: 27px;
}

.p-b-28 {
  padding-bottom: 28px;
}

.p-b-29 {
  padding-bottom: 29px;
}

.p-b-30 {
  padding-bottom: 30px;
}

.p-l-0 {
  padding-left: 0px;
}

.p-l-1 {
  padding-left: 1px;
}

.p-l-2 {
  padding-left: 2px;
}

.p-l-3 {
  padding-left: 3px;
}

.p-l-4 {
  padding-left: 4px;
}

.p-l-5 {
  padding-left: 5px;
}

.p-l-6 {
  padding-left: 6px;
}

.p-l-7 {
  padding-left: 7px;
}

.p-l-8 {
  padding-left: 8px;
}

.p-l-9 {
  padding-left: 9px;
}

.p-l-10 {
  padding-left: 10px;
}

.p-l-11 {
  padding-left: 11px;
}

.p-l-12 {
  padding-left: 12px;
}

.p-l-13 {
  padding-left: 13px;
}

.p-l-14 {
  padding-left: 14px;
}

.p-l-15 {
  padding-left: 15px;
}

.p-l-16 {
  padding-left: 16px;
}

.p-l-17 {
  padding-left: 17px;
}

.p-l-18 {
  padding-left: 18px;
}

.p-l-19 {
  padding-left: 19px;
}

.p-l-20 {
  padding-left: 20px;
}

.p-l-21 {
  padding-left: 21px;
}

.p-l-22 {
  padding-left: 22px;
}

.p-l-23 {
  padding-left: 23px;
}

.p-l-24 {
  padding-left: 24px;
}

.p-l-25 {
  padding-left: 25px;
}

.p-l-26 {
  padding-left: 26px;
}

.p-l-27 {
  padding-left: 27px;
}

.p-l-28 {
  padding-left: 28px;
}

.p-l-29 {
  padding-left: 29px;
}

.p-l-30 {
  padding-left: 30px;
}

.p-l-31 {
  padding-left: 31px;
}

.p-l-32 {
  padding-left: 32px;
}

.p-l-33 {
  padding-left: 33px;
}

.p-l-34 {
  padding-left: 34px;
}

.p-l-35 {
  padding-left: 35px;
}

.p-l-36 {
  padding-left: 36px;
}

.p-l-37 {
  padding-left: 37px;
}

.p-l-38 {
  padding-left: 38px;
}

.p-l-39 {
  padding-left: 39px;
}

.p-l-40 {
  padding-left: 40px;
}

.p-r-0 {
  padding-right: 0px;
}

.p-r-1 {
  padding-right: 1px;
}

.p-r-2 {
  padding-right: 2px;
}

.p-r-3 {
  padding-right: 3px;
}

.p-r-4 {
  padding-right: 4px;
}

.p-r-5 {
  padding-right: 5px;
}

.p-r-6 {
  padding-right: 6px;
}

.p-r-7 {
  padding-right: 7px;
}

.p-r-8 {
  padding-right: 8px;
}

.p-r-9 {
  padding-right: 9px;
}

.p-r-10 {
  padding-right: 10px;
}

.p-r-11 {
  padding-right: 11px;
}

.p-r-12 {
  padding-right: 12px;
}

.p-r-13 {
  padding-right: 13px;
}

.p-r-14 {
  padding-right: 14px;
}

.p-r-15 {
  padding-right: 15px;
}

.p-r-16 {
  padding-right: 16px;
}

.p-r-17 {
  padding-right: 17px;
}

.p-r-18 {
  padding-right: 18px;
}

.p-r-19 {
  padding-right: 19px;
}

.p-r-20 {
  padding-right: 20px;
}

.p-r-21 {
  padding-right: 21px;
}

.p-r-22 {
  padding-right: 22px;
}

.p-r-23 {
  padding-right: 23px;
}

.p-r-24 {
  padding-right: 24px;
}

.p-r-25 {
  padding-right: 25px;
}

.p-r-26 {
  padding-right: 26px;
}

.p-r-27 {
  padding-right: 27px;
}

.p-r-28 {
  padding-right: 28px;
}

.p-r-29 {
  padding-right: 29px;
}

.p-r-30 {
  padding-right: 30px;
}

.p-r-31 {
  padding-right: 31px;
}

.p-r-32 {
  padding-right: 32px;
}

.p-r-33 {
  padding-right: 33px;
}

.p-r-34 {
  padding-right: 34px;
}

.p-r-35 {
  padding-right: 35px;
}

.p-r-36 {
  padding-right: 36px;
}

.p-r-37 {
  padding-right: 37px;
}

.p-r-38 {
  padding-right: 38px;
}

.p-r-39 {
  padding-right: 39px;
}

.p-r-40 {
  padding-right: 40px;
}

.p-r-41 {
  padding-right: 41px;
}

.p-r-42 {
  padding-right: 42px;
}

.p-r-43 {
  padding-right: 43px;
}

.p-r-44 {
  padding-right: 44px;
}

.p-r-45 {
  padding-right: 45px;
}

.p-r-46 {
  padding-right: 46px;
}

.p-r-47 {
  padding-right: 47px;
}

.p-r-48 {
  padding-right: 48px;
}

.p-r-49 {
  padding-right: 49px;
}

.p-r-50 {
  padding-right: 50px;
}

.-mt-2 {
  margin-top: -2px;
}

/* ==========================================================================
   Text
   ========================================================================== */
.u-vertical-top {
  vertical-align: top !important;
}

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

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

.u-vertical-sub {
  vertical-align: sub !important;
}

/* ==========================================================================
   Text
   ========================================================================== */
.u-overflow-hidden {
  overflow: hidden;
}

.u-overflow-visible {
  overflow: visible;
}

.u-overflow-auto {
  overflow: auto;
}

.u-overflow-y-auto {
  overflow-y: auto;
}

/* ==========================================================================
   Text
   ========================================================================== */
.u-cursor-pointer {
  cursor: pointer;
}

.u-cursor-default {
  cursor: default;
}

.u-cursor-move {
  cursor: move;
}

/* ==========================================================================
   Text
   ========================================================================== */
.u-border {
  border: 1px solid;
}

.u-border-bold {
  border: 2px solid;
}

.u-border-left {
  border-left: 1px solid;
}

.u-border-right {
  border-right: 1px solid;
}

.u-border-top {
  border-top: 1px solid;
}

.u-border-bottom {
  border-bottom: 1px solid;
}

.u-border-teal {
  border-color: #4acbd6;
}

.u-border-gray {
  border-color: #A0A0A0;
}

.u-border-gainsboro {
  border-color: #dcdcdc;
}

.u-border-light-gray {
  border-color: #e5e5e5;
}

.u-border-circle {
  border-radius: 50%;
}

/* ==========================================================================
   Position
   ========================================================================== */
.fixed-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.u-p-r {
  position: relative;
}

.fixed-right-10 {
  position: absolute;
  right: 10px;
  top: 0;
}

.fixed-right-50 {
  position: absolute;
  right: 50px;
  top: 0;
}

.fixed-right-100 {
  position: absolute;
  right: 100px;
  top: 0;
}

.fixed-right-200 {
  position: absolute;
  right: 200px;
  top: 0;
}

.fixed-right-300 {
  position: absolute;
  right: 300px;
  top: 0;
}

.u-w-70 {
  width: 70px;
}

.u-w-170 {
  width: 170px;
}

.u-w-180 {
  width: 180px;
}

.u-w-240 {
  width: 240px;
}

.u-w-600 {
  width: 600px;
}

.l-h-28 {
  line-height: 28px;
}

.u-blur-0 {
  filter: blur(0px);
}

.u-blur-1 {
  filter: blur(1px);
}

.u-blur-2 {
  filter: blur(2px);
}

.u-blur-3 {
  filter: blur(3px);
}

.u-blur-4 {
  filter: blur(4px);
}

.u-blur-5 {
  filter: blur(5px);
}

.u-blur-6 {
  filter: blur(6px);
}

.u-blur-7 {
  filter: blur(7px);
}

.u-blur-8 {
  filter: blur(8px);
}

.u-blur-9 {
  filter: blur(9px);
}

.u-blur-10 {
  filter: blur(10px);
}

.u-blur-11 {
  filter: blur(11px);
}

.u-blur-12 {
  filter: blur(12px);
}

.u-blur-13 {
  filter: blur(13px);
}

.u-blur-14 {
  filter: blur(14px);
}

.u-blur-15 {
  filter: blur(15px);
}

.u-blur-16 {
  filter: blur(16px);
}

.u-blur-17 {
  filter: blur(17px);
}

.u-blur-18 {
  filter: blur(18px);
}

.u-blur-19 {
  filter: blur(19px);
}

.u-blur-20 {
  filter: blur(20px);
}

.u-whitespace-no-wrap {
  white-space: nowrap;
}

.u-whitespace-normal {
  white-space: normal;
}

.u-whitespace-pre {
  white-space: pre;
}

.c-health-good {
  color: #22B819;
}

.c-health-fair {
  color: #FFBB00;
}

.c-health-poor {
  color: #FF2954;
}

.c-health-no-data {
  color: #BFC3C9;
}

.c-health-disabled {
  color: #E2E5E7;
}

.c-health-offline {
  color: #A5ABB4;
}

#loginView,
#resetView,
#hotspotLoginView {
  height: 100%;
  overflow: auto;
}
#loginView .login-wrap,
#resetView .login-wrap,
#hotspotLoginView .login-wrap {
  height: 100%;
  min-width: 290px;
  min-height: 600px;
  position: relative;
}
#loginView .login-form,
#resetView .login-form,
#hotspotLoginView .login-form {
  width: 300px;
  position: relative;
  top: 30%;
  left: 0;
  right: 0;
  margin: auto;
}
#loginView .reset-tip,
#resetView .reset-tip,
#hotspotLoginView .reset-tip {
  color: #c9c9c9;
}
#loginView .login-title,
#resetView .login-title,
#hotspotLoginView .login-title {
  font-size: 24px;
  font-weight: bold;
  color: var(--svg-fill-table, #363e4d);
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  margin: auto;
}
#loginView .login-title .sub-title,
#resetView .login-title .sub-title,
#hotspotLoginView .login-title .sub-title {
  margin-top: 12px;
  font-size: 14px;
  font-weight: normal;
  color: #7d7e80;
}
#loginView .reset-title,
#resetView .reset-title,
#hotspotLoginView .reset-title {
  font-weight: bold;
  font-size: 24px;
  color: var(--svg-fill-table, #363e4d);
  letter-spacing: 0;
  width: 530px;
  position: absolute;
  top: 15%;
  left: 0;
  right: 0;
  margin: auto;
}
#loginView #confirm-user-msg .msg-close,
#resetView #confirm-user-msg .msg-close,
#hotspotLoginView #confirm-user-msg .msg-close {
  display: block;
}
#loginView #confirm-user-msg .msg-content-container,
#resetView #confirm-user-msg .msg-content-container,
#hotspotLoginView #confirm-user-msg .msg-content-container {
  padding: 30px 24px;
}
#loginView #confirm-user-msg .msg-title-container,
#resetView #confirm-user-msg .msg-title-container,
#hotspotLoginView #confirm-user-msg .msg-title-container {
  display: none;
}
#loginView #confirm-user-msg .msg-title,
#resetView #confirm-user-msg .msg-title,
#hotspotLoginView #confirm-user-msg .msg-title {
  text-align: center;
  padding-left: 0;
  padding-top: 40px;
}
#loginView #confirm-user-msg .msg-btn-wrap,
#resetView #confirm-user-msg .msg-btn-wrap,
#hotspotLoginView #confirm-user-msg .msg-btn-wrap {
  text-align: center;
}
#loginView #confirm-user-msg #confirm-user-title,
#resetView #confirm-user-msg #confirm-user-title,
#hotspotLoginView #confirm-user-msg #confirm-user-title {
  font-size: 16px;
  margin-bottom: 32px;
}
#loginView #confirm-user-msg #confirm-user-list,
#resetView #confirm-user-msg #confirm-user-list,
#hotspotLoginView #confirm-user-msg #confirm-user-list {
  width: 280px;
  margin: auto;
}
#loginView #confirm-user-msg #confirm-user-list .devicesList-item-container,
#resetView #confirm-user-msg #confirm-user-list .devicesList-item-container,
#hotspotLoginView #confirm-user-msg #confirm-user-list .devicesList-item-container {
  line-height: 42px;
  border-radius: 3px;
  background: var(--tag-background-primary, rgba(73, 84, 107, 0.08));
  color: var(--s-color-text-primary, #212121);
  font-weight: bold;
  margin-bottom: 8px;
  text-align: center;
}
#loginView #confirm-user-msg #confirm-user-list .devicesList-item-container.selected,
#resetView #confirm-user-msg #confirm-user-list .devicesList-item-container.selected,
#hotspotLoginView #confirm-user-msg #confirm-user-list .devicesList-item-container.selected {
  background: rgba(4, 146, 235, 0.08);
  color: #0492EB;
}
#loginView #confirm-user-msg #confirm-user-msg-btn-ok a.button-button,
#resetView #confirm-user-msg #confirm-user-msg-btn-ok a.button-button,
#hotspotLoginView #confirm-user-msg #confirm-user-msg-btn-ok a.button-button {
  line-height: 40px;
  width: 280px;
  height: 40px;
}
#loginView #loginArea .icon-user,
#loginView #loginArea .icon-pwd,
#loginView #resetArea .icon-user,
#loginView #resetArea .icon-pwd,
#resetView #loginArea .icon-user,
#resetView #loginArea .icon-pwd,
#resetView #resetArea .icon-user,
#resetView #resetArea .icon-pwd,
#hotspotLoginView #loginArea .icon-user,
#hotspotLoginView #loginArea .icon-pwd,
#hotspotLoginView #resetArea .icon-user,
#hotspotLoginView #resetArea .icon-pwd {
  width: 29px;
  height: 26px;
  padding: 1px 8px 1px 1px;
  z-index: 10;
  position: absolute;
  left: 13px;
}
#loginView #loginArea .icon-user,
#loginView #resetArea .icon-user,
#resetView #loginArea .icon-user,
#resetView #resetArea .icon-user,
#hotspotLoginView #loginArea .icon-user,
#hotspotLoginView #resetArea .icon-user {
  top: 6px;
}
#loginView #loginArea .icon-pwd,
#loginView #resetArea .icon-pwd,
#resetView #loginArea .icon-pwd,
#resetView #resetArea .icon-pwd,
#hotspotLoginView #loginArea .icon-pwd,
#hotspotLoginView #resetArea .icon-pwd {
  top: 83px;
}
#loginView #loginArea .icon-back,
#loginView #resetArea .icon-back,
#resetView #loginArea .icon-back,
#resetView #resetArea .icon-back,
#hotspotLoginView #loginArea .icon-back,
#hotspotLoginView #resetArea .icon-back {
  width: 24px;
  height: 24px;
}
#loginView #loginArea .email-container,
#loginView #resetArea .email-container,
#resetView #loginArea .email-container,
#resetView #resetArea .email-container,
#hotspotLoginView #loginArea .email-container,
#hotspotLoginView #resetArea .email-container {
  position: relative;
}
#loginView #loginArea .icon-email,
#loginView #resetArea .icon-email,
#resetView #loginArea .icon-email,
#resetView #resetArea .icon-email,
#hotspotLoginView #loginArea .icon-email,
#hotspotLoginView #resetArea .icon-email {
  z-index: 99;
  padding-right: 4px;
  width: 28px;
  height: 22px;
  position: absolute;
  left: 10px;
  top: 7px;
}
#loginView .two-fa-area,
#resetView .two-fa-area,
#hotspotLoginView .two-fa-area {
  padding-top: 27px;
}
#loginView .two-fa-area .token-input,
#resetView .two-fa-area .token-input,
#hotspotLoginView .two-fa-area .token-input {
  margin-bottom: 60px;
}
#loginView .two-fa-area .two-fa-block,
#resetView .two-fa-area .two-fa-block,
#hotspotLoginView .two-fa-area .two-fa-block {
  margin-bottom: 49px;
}
#loginView .two-fa-area .cant-access-link-container,
#resetView .two-fa-area .cant-access-link-container,
#hotspotLoginView .two-fa-area .cant-access-link-container {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
#loginView .two-fa-area .cant-access-link-container .cant-access-link,
#resetView .two-fa-area .cant-access-link-container .cant-access-link,
#hotspotLoginView .two-fa-area .cant-access-link-container .cant-access-link {
  font-size: 13px;
  white-space: nowrap;
}
#loginView #username .text-wrap-outer,
#loginView #password .text-wrap-outer,
#loginView #newPassword .text-wrap-outer,
#loginView #confirmPassword .text-wrap-outer,
#resetView #username .text-wrap-outer,
#resetView #password .text-wrap-outer,
#resetView #newPassword .text-wrap-outer,
#resetView #confirmPassword .text-wrap-outer,
#hotspotLoginView #username .text-wrap-outer,
#hotspotLoginView #password .text-wrap-outer,
#hotspotLoginView #newPassword .text-wrap-outer,
#hotspotLoginView #confirmPassword .text-wrap-outer {
  display: block;
}
#loginView #username .widget-wrap,
#loginView #password .widget-wrap,
#loginView #newPassword .widget-wrap,
#loginView #confirmPassword .widget-wrap,
#resetView #username .widget-wrap,
#resetView #password .widget-wrap,
#resetView #newPassword .widget-wrap,
#resetView #confirmPassword .widget-wrap,
#hotspotLoginView #username .widget-wrap,
#hotspotLoginView #password .widget-wrap,
#hotspotLoginView #newPassword .widget-wrap,
#hotspotLoginView #confirmPassword .widget-wrap {
  height: 36px;
  width: 300px;
  max-width: 300px;
  padding: 0 30px 0 8px;
  background: var(--components-bg, #fff);
  border-radius: 3px;
}
#loginView #username [widget=toolTip],
#loginView #password [widget=toolTip],
#loginView #newPassword [widget=toolTip],
#loginView #confirmPassword [widget=toolTip],
#resetView #username [widget=toolTip],
#resetView #password [widget=toolTip],
#resetView #newPassword [widget=toolTip],
#resetView #confirmPassword [widget=toolTip],
#hotspotLoginView #username [widget=toolTip],
#hotspotLoginView #password [widget=toolTip],
#hotspotLoginView #newPassword [widget=toolTip],
#hotspotLoginView #confirmPassword [widget=toolTip] {
  position: absolute;
  top: 8px;
  left: 300px;
}
#loginView #username [widget=toolTip] .widget-wrap,
#loginView #password [widget=toolTip] .widget-wrap,
#loginView #newPassword [widget=toolTip] .widget-wrap,
#loginView #confirmPassword [widget=toolTip] .widget-wrap,
#resetView #username [widget=toolTip] .widget-wrap,
#resetView #password [widget=toolTip] .widget-wrap,
#resetView #newPassword [widget=toolTip] .widget-wrap,
#resetView #confirmPassword [widget=toolTip] .widget-wrap,
#hotspotLoginView #username [widget=toolTip] .widget-wrap,
#hotspotLoginView #password [widget=toolTip] .widget-wrap,
#hotspotLoginView #newPassword [widget=toolTip] .widget-wrap,
#hotspotLoginView #confirmPassword [widget=toolTip] .widget-wrap {
  width: auto;
  padding: 0;
}
#loginView #username,
#loginView #password,
#resetView #username,
#resetView #password,
#hotspotLoginView #username,
#hotspotLoginView #password {
  min-height: 66px;
}
#loginView #username .widget-wrap input,
#loginView #password .widget-wrap input,
#resetView #username .widget-wrap input,
#resetView #password .widget-wrap input,
#hotspotLoginView #username .widget-wrap input,
#hotspotLoginView #password .widget-wrap input {
  color: var(--s-color-text-primary, #212121);
  margin-top: 5px;
  margin-left: 40px;
  width: 224px;
  height: 26px;
}
#loginView #username .widget-wrap input.text-hint,
#loginView #password .widget-wrap input.text-hint,
#resetView #username .widget-wrap input.text-hint,
#resetView #password .widget-wrap input.text-hint,
#hotspotLoginView #username .widget-wrap input.text-hint,
#hotspotLoginView #password .widget-wrap input.text-hint {
  height: 36px;
}
#loginView #username.widget-container.error:not(.empty-error),
#loginView #password.widget-container.error:not(.empty-error),
#resetView #username.widget-container.error:not(.empty-error),
#resetView #password.widget-container.error:not(.empty-error),
#hotspotLoginView #username.widget-container.error:not(.empty-error),
#hotspotLoginView #password.widget-container.error:not(.empty-error) {
  margin-bottom: 12px;
}
#loginView #loginBtn .button-button,
#loginView #resetBtn .button-button,
#loginView #forwardBtn .button-button,
#resetView #loginBtn .button-button,
#resetView #resetBtn .button-button,
#resetView #forwardBtn .button-button,
#hotspotLoginView #loginBtn .button-button,
#hotspotLoginView #resetBtn .button-button,
#hotspotLoginView #forwardBtn .button-button {
  line-height: 35px;
  height: 35px;
  border-radius: 3px;
}
#loginView #forget .button-button .button-text,
#loginView #backLogin .button-button .button-text,
#resetView #forget .button-button .button-text,
#resetView #backLogin .button-button .button-text,
#hotspotLoginView #forget .button-button .button-text,
#hotspotLoginView #backLogin .button-button .button-text {
  border-bottom: 1px solid;
}
#loginView #sendEmailLabel,
#resetView #sendEmailLabel,
#hotspotLoginView #sendEmailLabel {
  font-size: 14px;
  color: var(--tips-color, #363e4d);
}
#loginView #email,
#resetView #email,
#hotspotLoginView #email {
  height: 66px;
}
#loginView #email .text-wrap-outer,
#resetView #email .text-wrap-outer,
#hotspotLoginView #email .text-wrap-outer {
  display: block;
}
#loginView #email .text-wrap,
#resetView #email .text-wrap,
#hotspotLoginView #email .text-wrap {
  height: 36px;
  width: 300px;
  max-width: 300px;
  padding: 6px 10px;
  border-radius: 5px;
}
#loginView #email .text-wrap input,
#resetView #email .text-wrap input,
#hotspotLoginView #email .text-wrap input {
  color: var(--s-color-text-primary, #212121);
  padding-left: 35px;
  height: 22px;
}
#loginView #email .hint,
#resetView #email .hint,
#hotspotLoginView #email .hint {
  top: 6px;
}
#loginView #successArea,
#resetView #successArea,
#hotspotLoginView #successArea {
  width: 300px;
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  margin: auto;
}
#loginView #email-sent-success,
#resetView #email-sent-success,
#hotspotLoginView #email-sent-success {
  width: 120px;
  height: 120px;
  display: inline-block;
  background: var(--icon-email, url(../img/Email.png)) no-repeat;
  margin-bottom: 30px;
}
#loginView .back-to-reset,
#loginView .back-to-login,
#resetView .back-to-reset,
#resetView .back-to-login,
#hotspotLoginView .back-to-reset,
#hotspotLoginView .back-to-login {
  position: absolute;
  display: inline-block;
  background: var(--components-bg, #f8f9fb);
  border-radius: 50%;
  cursor: pointer;
}
#loginView .back-to-reset .icon,
#loginView .back-to-login .icon,
#resetView .back-to-reset .icon,
#resetView .back-to-login .icon,
#hotspotLoginView .back-to-reset .icon,
#hotspotLoginView .back-to-login .icon {
  width: 40px;
  height: 40px;
  background: var(--icon-login-back, url(../img/svg/LoginIconBack.svg)) no-repeat;
}
#loginView .back-to-reset,
#resetView .back-to-reset,
#hotspotLoginView .back-to-reset {
  left: -150px;
  transform: translateY(-6px);
}
#loginView .back-to-login,
#resetView .back-to-login,
#hotspotLoginView .back-to-login {
  transform: translate(-300px, -6px);
}
#loginView #returnLogin,
#resetView #returnLogin,
#hotspotLoginView #returnLogin {
  margin-top: 60px;
  margin-bottom: 20px;
}
#loginView .sent-bottom-tip,
#resetView .sent-bottom-tip,
#hotspotLoginView .sent-bottom-tip {
  margin-bottom: 3px;
  text-align: left;
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  letter-spacing: 0;
}
#loginView .sent-bottom-tip a.resend,
#resetView .sent-bottom-tip a.resend,
#hotspotLoginView .sent-bottom-tip a.resend {
  text-decoration: none;
}
#loginView .sent-bottom-tip a.resend.disabled,
#resetView .sent-bottom-tip a.resend.disabled,
#hotspotLoginView .sent-bottom-tip a.resend.disabled {
  cursor: default;
  color: var(--tab-color-primary, #868E93);
}
#loginView .sent-bottom-tip.title,
#resetView .sent-bottom-tip.title,
#hotspotLoginView .sent-bottom-tip.title {
  margin-bottom: 10px;
}
#loginView #reset-password-area .icon-pwd,
#resetView #reset-password-area .icon-pwd,
#hotspotLoginView #reset-password-area .icon-pwd {
  width: 29px;
  height: 26px;
  padding: 1px 8px 1px 1px;
  z-index: 10;
  position: absolute;
  left: 13px;
}
#loginView #reset-password-area .icon-pwd.new-password,
#resetView #reset-password-area .icon-pwd.new-password,
#hotspotLoginView #reset-password-area .icon-pwd.new-password {
  top: 6px;
}
#loginView #reset-password-area .icon-pwd.confirm-password,
#resetView #reset-password-area .icon-pwd.confirm-password,
#hotspotLoginView #reset-password-area .icon-pwd.confirm-password {
  top: 108px;
}
#loginView #reset-password-area #newPassword,
#loginView #reset-password-area #confirmPassword,
#resetView #reset-password-area #newPassword,
#resetView #reset-password-area #confirmPassword,
#hotspotLoginView #reset-password-area #newPassword,
#hotspotLoginView #reset-password-area #confirmPassword {
  height: 91px;
}
#loginView #reset-password-area #newPassword .widget-wrap input,
#loginView #reset-password-area #confirmPassword .widget-wrap input,
#resetView #reset-password-area #newPassword .widget-wrap input,
#resetView #reset-password-area #confirmPassword .widget-wrap input,
#hotspotLoginView #reset-password-area #newPassword .widget-wrap input,
#hotspotLoginView #reset-password-area #confirmPassword .widget-wrap input {
  color: var(--s-color-text-primary, #212121);
  height: 36px;
  padding-left: 40px;
}
#loginView #reset-password-area #newPassword .widget-wrap input.text-hint,
#loginView #reset-password-area #confirmPassword .widget-wrap input.text-hint,
#resetView #reset-password-area #newPassword .widget-wrap input.text-hint,
#resetView #reset-password-area #confirmPassword .widget-wrap input.text-hint,
#hotspotLoginView #reset-password-area #newPassword .widget-wrap input.text-hint,
#hotspotLoginView #reset-password-area #confirmPassword .widget-wrap input.text-hint {
  height: 36px;
}
#loginView #reset-password-area #newPassword .widget-tips,
#loginView #reset-password-area #confirmPassword .widget-tips,
#resetView #reset-password-area #newPassword .widget-tips,
#resetView #reset-password-area #confirmPassword .widget-tips,
#hotspotLoginView #reset-password-area #newPassword .widget-tips,
#hotspotLoginView #reset-password-area #confirmPassword .widget-tips {
  line-height: 14px;
  margin-top: 4px;
}
#loginView #reset-password-area #newPassword .widget-tips .tips-content,
#loginView #reset-password-area #confirmPassword .widget-tips .tips-content,
#resetView #reset-password-area #newPassword .widget-tips .tips-content,
#resetView #reset-password-area #confirmPassword .widget-tips .tips-content,
#hotspotLoginView #reset-password-area #newPassword .widget-tips .tips-content,
#hotspotLoginView #reset-password-area #confirmPassword .widget-tips .tips-content {
  margin-left: 0;
}
#loginView #reset-password-area #newPassword.level .widget-tips,
#loginView #reset-password-area #confirmPassword.level .widget-tips,
#resetView #reset-password-area #newPassword.level .widget-tips,
#resetView #reset-password-area #confirmPassword.level .widget-tips,
#hotspotLoginView #reset-password-area #newPassword.level .widget-tips,
#hotspotLoginView #reset-password-area #confirmPassword.level .widget-tips {
  display: none !important;
}
#loginView #reset-password-area #newPassword.error .widget-tips,
#loginView #reset-password-area #confirmPassword.error .widget-tips,
#resetView #reset-password-area #newPassword.error .widget-tips,
#resetView #reset-password-area #confirmPassword.error .widget-tips,
#hotspotLoginView #reset-password-area #newPassword.error .widget-tips,
#hotspotLoginView #reset-password-area #confirmPassword.error .widget-tips {
  display: none !important;
}
#loginView #reset-password-area #back-to-login .button-button,
#resetView #reset-password-area #back-to-login .button-button,
#hotspotLoginView #reset-password-area #back-to-login .button-button {
  text-decoration: underline;
}
#loginView #success-area .reset-success,
#resetView #success-area .reset-success,
#hotspotLoginView #success-area .reset-success {
  display: inline-block;
  width: 128px;
  height: 128px;
  background: url(../img/RetSuccess.png) no-repeat;
  margin-bottom: 30px;
}
#loginView #success-area .success,
#resetView #success-area .success,
#hotspotLoginView #success-area .success {
  font-size: 16px;
  color: var(--s-color-text-primary, #212121);
  letter-spacing: 0;
  text-align: center;
}
#loginView #success-area .reset-success-tip,
#resetView #success-area .reset-success-tip,
#hotspotLoginView #success-area .reset-success-tip {
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  letter-spacing: 0;
  text-align: center;
  margin-bottom: 60px;
}
#loginView #resetSuccess,
#loginView #linkInvalid,
#resetView #resetSuccess,
#resetView #linkInvalid,
#hotspotLoginView #resetSuccess,
#hotspotLoginView #linkInvalid {
  color: #c9c9c9;
}
#loginView .bottom-container,
#resetView .bottom-container,
#hotspotLoginView .bottom-container {
  width: 100%;
  height: 56px;
  position: absolute;
  bottom: 0;
}
#loginView .bottom-container .bottom-support,
#loginView .bottom-container .bottom-app,
#resetView .bottom-container .bottom-support,
#resetView .bottom-container .bottom-app,
#hotspotLoginView .bottom-container .bottom-support,
#hotspotLoginView .bottom-container .bottom-app {
  position: absolute;
  left: 50%;
  color: #0492eb;
  font-size: 18px;
  cursor: pointer;
  text-decoration: underline;
}
#loginView .bottom-container .bottom-support,
#resetView .bottom-container .bottom-support,
#hotspotLoginView .bottom-container .bottom-support {
  transform: translateX(-100%);
  margin-left: -36px;
}
#loginView .bottom-container .bottom-app,
#resetView .bottom-container .bottom-app,
#hotspotLoginView .bottom-container .bottom-app {
  padding-left: 36px;
  border-left: 1px solid;
}
#loginView .bottom-container .qr-code,
#resetView .bottom-container .qr-code,
#hotspotLoginView .bottom-container .qr-code {
  position: absolute;
  top: 16px;
  left: 426px;
}
#loginView .bottom-container .app-store,
#resetView .bottom-container .app-store,
#hotspotLoginView .bottom-container .app-store {
  position: absolute;
  top: 16px;
  left: 529px;
}
#loginView .bottom-container .google-play,
#resetView .bottom-container .google-play,
#hotspotLoginView .bottom-container .google-play {
  position: absolute;
  bottom: 16px;
  left: 529px;
}
#loginView .bottom-tip,
#resetView .bottom-tip,
#hotspotLoginView .bottom-tip {
  padding: 22px 30px;
  text-align: left;
  width: 720px;
  height: 120px;
  background: rgba(27, 35, 48, 0.8);
  border-radius: 8px;
  position: absolute;
  top: -140px;
  left: -33px;
  right: 0;
  margin: auto;
}
#loginView .bottom-tip:after,
#resetView .bottom-tip:after,
#hotspotLoginView .bottom-tip:after {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-top: 8px solid #49546b;
  bottom: -14px;
  left: 59%;
}
#loginView .bottom-tip .tip-close,
#resetView .bottom-tip .tip-close,
#hotspotLoginView .bottom-tip .tip-close {
  display: inline-block;
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
}
#loginView .bottom-tip #bottom-tip-title,
#resetView .bottom-tip #bottom-tip-title,
#hotspotLoginView .bottom-tip #bottom-tip-title {
  width: 390px;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 0;
}
#loginView .bottom-tip #bottom-tip-content,
#resetView .bottom-tip #bottom-tip-content,
#hotspotLoginView .bottom-tip #bottom-tip-content {
  width: 390px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0;
}
#loginView .ps__rail-y,
#resetView .ps__rail-y,
#hotspotLoginView .ps__rail-y {
  z-index: 100;
}

#hotspotLoginView .fieldset-content {
  position: relative;
}
#hotspotLoginView .login-area {
  padding-top: 27px;
}

#link-expired-area .link-expired {
  display: inline-block;
  width: 180px;
  height: 180px;
  background: url(../img/resetPasswordLinkExpire.png) no-repeat;
  background-size: 100% 100%;
  margin-bottom: 30px;
}
#link-expired-area .link-expired-text {
  font-size: 16px;
  color: var(--s-color-text-primary, #212121);
  letter-spacing: 0;
  text-align: center;
}

#wired-lan-profile-grid-panel .grid-panel-tbar-container .operation-container {
  float: left;
}
#wired-lan-profile-grid-panel .operation-container {
  margin-top: 36px;
  padding: 0 20px;
  border: 1px solid #0492EB;
}
#wired-lan-profile-grid-panel .operation-btn {
  font-size: 15px;
  color: #0492EB;
}

.btn-add.btn-create-profile {
  background-image: none;
}

.wired-profile-editor {
  vertical-align: top;
}

.tag-network-select-opts.checkbox-group-container .checkbox-list, .untag-network-select-opts.checkbox-group-container .checkbox-list {
  max-width: 300px;
  min-width: 70px;
  width: auto;
}

.band-width-ctrl-type,
.radio-with-tip {
  position: relative;
}
.band-width-ctrl-type .tooltip-container,
.radio-with-tip .tooltip-container {
  position: absolute;
  left: 176px;
}

.loopback-ctrl-container {
  position: relative;
}
.loopback-ctrl-container .radio-tip.tooltip-container {
  position: absolute;
  left: 176px;
}

.loopback-ctrl {
  position: relative;
}
.loopback-ctrl .tooltip-container {
  position: absolute;
  top: 64px;
}

#dashboard-view {
  padding: 0;
  margin-top: -10px;
  min-width: 676px;
}
#dashboard-view [data-info-panel].no-click {
  cursor: default;
}
#dashboard-view .dashboard-overview {
  background: var(--s-background-panel, #ffffff);
  position: relative;
  padding: 50px 30px 10px 30px;
  text-align: center;
  box-shadow: 2px 2px 10px 0 rgba(54, 62, 77, 0.1);
}
#dashboard-view .dashboard-overview.collapse {
  padding-top: 10px;
}
#dashboard-view .dashboard-overview #isp-load {
  font-weight: bold;
  text-align: left;
  margin-top: 10px;
  margin-bottom: 0;
}
#dashboard-view .dashboard-overview #isp-load .widget-fieldlabel-wrap {
  width: auto;
}
#dashboard-view .dashboard-overview #isp-load .widget-fieldlabel-wrap label {
  white-space: nowrap;
}
#dashboard-view .dashboard-overview #isp-load .text-wrap-display {
  color: #0492EB;
}
#dashboard-view .dashboard-overview .overview-wrapper {
  padding-right: 100px;
  vertical-align: middle;
}
#dashboard-view .dashboard-overview .overview-wrapper .isp-container {
  position: absolute;
  top: 17px;
  left: 30px;
}
#dashboard-view .dashboard-overview .dashboard-incident-wrapper {
  border-left: #979797 1px solid;
  vertical-align: middle;
  position: relative;
  padding-left: 30px;
}
#dashboard-view .dashboard-overview .dashboard-incident-wrapper .incident-title {
  position: absolute;
  font-weight: bold;
  text-align: left;
  margin-top: 10px;
}
#dashboard-view .dashboard-overview .dashboard-incident-wrapper .see-all {
  float: right;
  font-size: 13px;
  font-weight: normal;
  color: #0492EB;
  cursor: pointer;
}
@media screen and (max-width: 1699px) {
  #dashboard-view .dashboard-overview .dashboard-incident-wrapper {
    border: none;
    padding-right: 30px;
  }
  #dashboard-view .dashboard-overview .overview-wrapper {
    padding-left: 100px;
  }
}
#dashboard-view .dashboard-overview .speed-test {
  vertical-align: 2px;
}
#dashboard-view .dashboard-overview .speed-test .button-wrap-outer {
  font-size: 14px;
}
#dashboard-view .dashboard-overview .overview-item-container {
  display: flex;
  justify-content: center;
}
#dashboard-view .dashboard-overview .action-edit {
  margin-top: auto;
  margin-bottom: 20px;
  cursor: pointer;
}
#dashboard-view .dashboard-overview .action-edit.anomaly {
  margin-bottom: 31px;
}
#dashboard-view .dashboard-overview div[widget=displaylabel].overview-item {
  display: inline-block;
  text-align: center;
  position: relative;
}
#dashboard-view .dashboard-overview div[widget=displaylabel].overview-item .widget-wrap-outer {
  vertical-align: unset;
}
#dashboard-view .dashboard-overview div[widget=displaylabel].overview-item .text-wrap-before {
  display: block;
  width: 72px;
  height: 72px;
  margin: auto;
}
#dashboard-view .dashboard-overview div[widget=displaylabel].overview-item .text-wrap-display {
  font-size: 18px;
  font-weight: bold;
  position: relative;
}
#dashboard-view .dashboard-overview div[widget=displaylabel].overview-item .text-wrap-display .green {
  color: #0DC901;
}
#dashboard-view .dashboard-overview div[widget=displaylabel].overview-item .speed-test {
  font-size: 14px;
  color: #0492EB;
  text-decoration: underline;
}
#dashboard-view .dashboard-overview div[widget=displaylabel].overview-item .speed-test:hover {
  color: #04b0ff;
}
#dashboard-view .dashboard-overview div[widget=displaylabel].overview-item .widget-tips {
  line-height: 16px;
  display: block;
}
#dashboard-view .dashboard-overview div[widget=displaylabel].overview-item .widget-tips .tips-content {
  font-size: 14px;
  color: var(--s-color-text-tertiary, #4A4A4A);
  margin-left: 0;
}
#dashboard-view .dashboard-overview div[widget=displaylabel].overview-item.tips-hidden .tips-content {
  visibility: hidden;
}
#dashboard-view .dashboard-overview div[widget=displaylabel].overview-hidden {
  display: none;
}
#dashboard-view .dashboard-overview .incident-critical {
  color: #FF2954;
}
#dashboard-view .dashboard-overview .incident-error {
  color: #FF9500;
}
#dashboard-view .dashboard-overview .incident-warning {
  color: #FFD701;
}
#dashboard-view .dashboard-overview .incident-info {
  color: #04B0FF;
}
#dashboard-view .dashboard-overview div[widget=displaylabel].incident-item {
  display: inline-block;
  text-align: center;
  position: relative;
  padding-right: 35px;
}
#dashboard-view .dashboard-overview div[widget=displaylabel].incident-item .text-wrap-before {
  height: 20px;
  display: block;
}
#dashboard-view .dashboard-overview div[widget=displaylabel].incident-item .text-wrap-display {
  line-height: 69px;
  font-size: 33px;
  font-weight: bold;
  position: relative;
}
#dashboard-view .dashboard-overview div[widget=displaylabel].incident-item .widget-tips {
  line-height: 8px;
  display: block;
}
#dashboard-view .dashboard-overview div[widget=displaylabel].incident-item .widget-tips .tips-content {
  font-size: 14px;
  color: var(--s-color-text-tertiary, #4A4A4A);
  margin-left: 0;
}
#dashboard-view .dashboard-overview div[widget=displaylabel].incident-item.tips-hidden .tips-content {
  visibility: hidden;
}
#dashboard-view .dashboard-overview div[widget=displaylabel].incident-item.show-down-icon .text-wrap-display:before {
  position: absolute;
  left: -22px;
  top: -4px;
  content: "";
  width: 24px;
  height: 24px;
  background-image: url(../img/svg/down.svg);
}
#dashboard-view .dashboard-overview #eap-overview-error, #dashboard-view .dashboard-overview #switch-overview-error {
  position: relative;
  margin-top: auto;
  width: 16px;
  height: 16px;
  background: url(../img/svg/dashboard/tip.svg);
}
#dashboard-view .dashboard-overview #eap-overview-error.hidden, #dashboard-view .dashboard-overview #switch-overview-error.hidden {
  visibility: hidden;
}
#dashboard-view .dashboard-overview #internet-overview .text-wrap-before,
#dashboard-view .dashboard-overview #wan-overview .text-wrap-before {
  background-image: url(../img/svg/dashboard/internet.svg);
  background-size: cover;
}
#dashboard-view .dashboard-overview #gateway-overview .text-wrap-before {
  background: url(../img/svg/dashboard/gateway.svg);
}
#dashboard-view .dashboard-overview #switch-overview .text-wrap-before {
  background: url(../img/svg/dashboard/switch.svg);
}
#dashboard-view .dashboard-overview #eap-overview .text-wrap-before {
  background: url(../img/svg/dashboard/ap.svg);
}
#dashboard-view .dashboard-overview #client-overview .text-wrap-before {
  background-image: url(../img/svg/dashboard/clients.svg);
}
#dashboard-view .dashboard-overview #guest-overview .text-wrap-before {
  background: url(../img/svg/dashboard/user.svg);
  background-size: cover;
}
#dashboard-view .dashboard-overview .overview-line {
  vertical-align: top;
  margin: 50px 10px 0 10px;
  width: 114px;
  height: 2px;
  display: inline-block;
  background: #9FD5F7;
  position: relative;
}
#dashboard-view .dashboard-overview .overview-line.ml-15 {
  margin-left: -15px;
}
#dashboard-view .dashboard-overview .overview-line:before {
  position: absolute;
  left: 0;
  top: -2px;
  content: " ";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: #9FD5F7;
}
#dashboard-view .dashboard-overview .overview-line:after {
  position: absolute;
  right: 0;
  top: -2px;
  content: " ";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: #9FD5F7;
}
#dashboard-view .dashboard-overview .overview-collapse-icon {
  cursor: pointer;
  position: absolute;
  right: 42px;
  top: 17px;
  width: 32px;
  height: 32px;
  background: var(--icon-select-up);
}
#dashboard-view .dashboard-overview.collapse .button-container.speed-test {
  display: none;
}
#dashboard-view .dashboard-overview.collapse .overview-line {
  display: none;
}
#dashboard-view .dashboard-overview.collapse #isp-load {
  display: inline-block;
  left: 30px;
  position: absolute;
}
@media screen and (max-width: 840px) {
  #dashboard-view .dashboard-overview.collapse #isp-load {
    display: none;
  }
}
#dashboard-view .dashboard-overview.collapse #internet-overview {
  display: none;
}
#dashboard-view .dashboard-overview.collapse #eap-overview-error, #dashboard-view .dashboard-overview.collapse #switch-overview-error {
  display: none;
}
#dashboard-view .dashboard-overview.collapse .action-edit {
  display: none;
}
#dashboard-view .dashboard-overview.collapse div[widget=displaylabel].overview-item {
  margin-right: 38px;
  margin-bottom: 0;
}
#dashboard-view .dashboard-overview.collapse div[widget=displaylabel].overview-item .text-wrap-display {
  font-size: 20px;
}
#dashboard-view .dashboard-overview.collapse div[widget=displaylabel].overview-item .text-wrap-before {
  display: none;
}
#dashboard-view .dashboard-overview.collapse div[widget=displaylabel].overview-item .widget-tips {
  margin-top: 4px;
}
#dashboard-view .dashboard-overview.collapse div[widget=displaylabel].overview-item.show-down-icon .text-wrap-display:before {
  display: none;
}
#dashboard-view .dashboard-overview.collapse div[widget=displaylabel].overview-item.error span.text-wrap-after {
  display: none;
}
#dashboard-view .dashboard-overview.collapse div[widget=displaylabel].incident-item {
  margin-right: 38px;
  margin-bottom: 0;
}
#dashboard-view .dashboard-overview.collapse div[widget=displaylabel].incident-item .text-wrap-display {
  font-size: 28px;
  line-height: 30px;
}
#dashboard-view .dashboard-overview.collapse div[widget=displaylabel].incident-item .text-wrap-before {
  display: none;
}
#dashboard-view .dashboard-overview.collapse div[widget=displaylabel].incident-item .widget-tips {
  margin-top: 4px;
}
#dashboard-view .dashboard-overview.collapse div[widget=displaylabel].incident-item.error span.text-wrap-after {
  display: none;
}
#dashboard-view .dashboard-overview.collapse .overview-collapse-icon {
  background: var(--icon-select-down);
}
#dashboard-view .dashboard-tab-container {
  margin-top: 6px;
  padding: 10px 28px 0 36px;
}
#dashboard-view .dashboard-tab-container .dashboard-tab-inner {
  position: relative;
  margin-right: 24px;
}
#dashboard-view #dashboard-tab {
  padding-right: 290px;
  margin-bottom: 16px;
  min-height: 28px;
}
#dashboard-view .tab-container.dashboard {
  background: var(--s-background-panel);
  box-shadow: 0 2px 8px 0 rgba(54, 62, 77, 0.15);
  border-radius: 6px;
}
#dashboard-view .tab-container.dashboard .tab-spliter {
  vertical-align: middle;
  height: 28px;
  width: 1px;
  background: var(--s-color-text-split);
}
#dashboard-view .tab-container.dashboard .tab-btn {
  white-space: nowrap;
  margin-left: 0;
  background: var(--tab-background-primary);
  border: none;
  border-right: 1px solid var(--s-color-text-split);
  padding: 1px 18px;
  color: var(--tab-color-primary);
}
#dashboard-view .tab-container.dashboard .tab-btn .text {
  height: 28px;
}
#dashboard-view .tab-container.dashboard .tab-btn.first, #dashboard-view .tab-container.dashboard .tab-btn.last {
  border-radius: 0;
}
#dashboard-view .tab-container.dashboard .tab-btn:first-of-type {
  border-radius: 6px 0 0 6px;
}
#dashboard-view .tab-container.dashboard .tab-btn:last-of-type {
  border-radius: 0;
}
#dashboard-view .tab-container.dashboard .tab-btn.selected {
  font-weight: normal;
  color: var(--tab-color-active);
  background: var(--tab-background-active);
}
#dashboard-view .tab-container.dashboard .tab-btn.selected + .tab-spliter {
  background: var(--s-color-text-split);
}
#dashboard-view #dashboard-rangepicker {
  position: absolute;
  top: 0;
  right: 70px;
}
#dashboard-view #dashboard-rangepicker .datepicker-display-container {
  background-color: transparent;
  width: auto;
  border: none;
}
#dashboard-view #dashboard-rangepicker .datepicker-display-container .datepicker-display {
  line-height: 28px;
}
#dashboard-view #dashboard-rangepicker .datepicker-display-container span.separator {
  padding-right: 2px;
}
#dashboard-view #dashboard-rangepicker .datepicker-calendar-container {
  right: -6px;
}
#dashboard-view #dashboard-config, #dashboard-view #dashboard-config-done {
  position: absolute;
  border-radius: 0 6px 6px 0;
  height: 28px;
  top: 0;
  right: 0;
  background: #0492eb;
  box-shadow: 2px 2px 10px 0 rgba(54, 62, 77, 0.1);
}
#dashboard-view #dashboard-config.loading .button-loading, #dashboard-view #dashboard-config-done.loading .button-loading {
  background: url(../img/svg/LoadingWhite.svg);
}
#dashboard-view #dashboard-config .button-button, #dashboard-view #dashboard-config-done .button-button {
  width: 64px;
  height: 28px;
  line-height: 28px;
  padding: 0;
  text-align: center;
  font-weight: normal;
  font-size: 13px;
  border-radius: 0 6px 6px 0;
}
#dashboard-view #dashboard-config .button-button:hover, #dashboard-view #dashboard-config .button-button:active, #dashboard-view #dashboard-config-done .button-button:hover, #dashboard-view #dashboard-config-done .button-button:active {
  background-color: #04B0FF;
}
#dashboard-view #dashboard-config .button-button .button-icon, #dashboard-view #dashboard-config-done .button-button .button-icon {
  margin-right: 0;
}

#bottomCardLoader {
  height: 100%;
  padding-top: 20px;
  padding-left: 116px;
}

#dashboard-bottom-card-view {
  height: 100%;
  overflow: auto;
}
#dashboard-bottom-card-view .ps__rail-x {
  margin-bottom: 8px;
}
#dashboard-bottom-card-view div.device-list {
  overflow: hidden;
}
#dashboard-bottom-card-view div.alert-list {
  overflow: hidden;
}

#bottom-card {
  border-radius: 0;
  box-shadow: 2px 2px 10px 12px rgba(54, 62, 77, 0.3);
  background: #49546B;
  width: 100%;
  height: 0;
  position: fixed;
  bottom: 0;
  margin-bottom: 0;
  z-index: 4;
  overflow: visible;
}
#bottom-card .bottom-card-wrap {
  height: 100%;
}
#bottom-card .bottom-card-trigger {
  position: absolute;
  right: 100px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  top: -18px;
  background: #ffffff;
  cursor: pointer;
}
#bottom-card .bottom-card-trigger .icon {
  width: 30px;
  height: 30px;
  background: url(../img/svg/SelectIconDownBlack.svg);
}
#bottom-card.hidden {
  box-shadow: none;
}
#bottom-card.hidden .bottom-card-trigger {
  display: none;
}
#bottom-card.collapse .icon {
  background: url(../img/svg/SelectIconUpBlack.svg);
}
#bottom-card .bottom-card-border {
  height: 5px;
  background: #49546B;
}
#bottom-card .bottom-card-border:hover {
  background: #04B0FF;
  cursor: n-resize;
}
#bottom-card .bottom-card-menu {
  position: absolute;
  top: 62px;
}
#bottom-card .bottom-card-menu .card-type-title {
  color: var(--tab-color-primary, #868E93);
  font-size: 14px;
  font-weight: bold;
  width: 103px;
  text-align: right;
}
#bottom-card .bottom-card-menu .card-type-title:after {
  content: " ";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: var(--tab-color-primary, #868E93);
  left: 5px;
  top: -1px;
  position: relative;
}
#bottom-card .bottom-card-menu .card-type-title.active {
  color: #FFFFFF;
}
#bottom-card .bottom-card-menu .card-type-title.active:after {
  background-color: #FFFFFF;
}
#bottom-card .bottom-card-menu .vertical-line {
  height: 39px;
  border: 1px solid #6D7278;
  width: 2px;
  margin: -7px 0 -7px 103px;
}
#bottom-card .bottom-card-container {
  min-width: 616px;
  padding: 30px 4px 68px 0;
}

.tab-editor-action a.btn-refresh span.text {
  color: #0492eb;
  vertical-align: middle;
}
.tab-editor-action a.btn-refresh:hover span.text {
  color: #04B0FF;
}

[widget=infoPanel].dashboard-overview-info-panel .link {
  color: #0492EB;
  font-size: 13px;
  font-weight: 400;
}
[widget=infoPanel].dashboard-overview-info-panel .cpu-progress-bar-color .progressbar-value {
  background-color: #04B0FF;
}
[widget=infoPanel].dashboard-overview-info-panel .memory-progress-bar-color .progressbar-value {
  background-color: #00D1E3;
}
[widget=infoPanel].dashboard-overview-info-panel .green {
  color: #0DC901;
}
[widget=infoPanel].dashboard-overview-info-panel span.channel-name {
  font-weight: bold;
  margin-left: 10px;
  font-size: 14px;
  color: var(--tooltips-color-panel-primary, #180000);
}
[widget=infoPanel].dashboard-overview-info-panel .info-panel-value span.level0 {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #0dc901;
  margin-right: 6px;
}
[widget=infoPanel].dashboard-overview-info-panel .info-panel-value span.level1 {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #FFBB00;
  margin-right: 6px;
}
[widget=infoPanel].dashboard-overview-info-panel .info-panel-value span.level2 {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #F04358;
  margin-right: 6px;
}
[widget=infoPanel].dashboard-overview-info-panel .info-panel-value span.unknown {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #D6D9DB;
  margin-right: 6px;
}
[widget=infoPanel].dashboard-overview-info-panel.isp-load table {
  border-collapse: collapse;
}
[widget=infoPanel].dashboard-overview-info-panel.isp-load .info-panel-row {
  height: 30px;
}
[widget=infoPanel].dashboard-overview-info-panel.isp-load .info-panel-name,
[widget=infoPanel].dashboard-overview-info-panel.isp-load .info-panel-value {
  vertical-align: middle;
}
[widget=infoPanel].dashboard-overview-info-panel.isp-load .info-panel-name {
  width: 100px;
}
[widget=infoPanel].dashboard-overview-info-panel.isp-load .info-panel-value {
  display: none;
}
[widget=infoPanel].dashboard-overview-info-panel.isp-load .info-panel-row.title-item {
  border-bottom: 2px solid rgba(189, 189, 189, 0.5);
}
[widget=infoPanel].dashboard-overview-info-panel.isp-load .info-panel-row.title-item .info-panel-value {
  color: #0492EB;
}

[widget=infoPanel].device-num .info-panel-value {
  text-align: right;
}

#dashboard-card-container.empty .fieldset-content .empty-tab-tip {
  display: block;
  position: absolute;
  font-size: 16px;
  color: var(--tab-color-primary, #868E93);
  letter-spacing: 0;
  margin: auto;
  left: 0;
  right: 0;
  text-align: center;
  top: 80px;
}
#dashboard-card-container .fieldset-content {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
#dashboard-card-container .fieldset-content .empty-tab-tip {
  display: none;
}
#dashboard-card-container .card {
  visibility: hidden;
}

.edit-internet-msg.msg-container .icon-down {
  margin-top: 2px;
  vertical-align: top;
}
.edit-internet-msg.msg-container .text-container {
  vertical-align: top;
}
.edit-internet-msg.msg-container .text-container input {
  padding-right: 38px;
}
.edit-internet-msg.msg-container .text-container .text-wrap {
  max-width: 120px;
  height: 28px;
  width: 120px;
  line-height: 28px;
  padding: 0 10px;
}
.edit-internet-msg.msg-container .tx-rate.text-container .text-wrap-outer:before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 3px;
  vertical-align: -7px;
  background-image: url(../img/svg/up.svg);
}
.edit-internet-msg.msg-container .tx-rate.text-container .textbox-error-tips {
  margin-left: 27px;
}
.edit-internet-msg.msg-container .textbox-error-tips {
  width: 120px;
}

@media screen and (min-width: 1920px) {
  .channel-distribution-usage .channel-usage-bar .progressbar-content {
    width: 103px !important;
  }
}
@media screen and (min-width: 1440px) and (max-width: 1919px) {
  .channel-distribution-usage .channel-usage-bar .progressbar-content {
    width: 76px !important;
  }
}
@media screen and (min-width: 1224px) and (max-width: 1439px) {
  .channel-distribution-usage .channel-usage-bar .progressbar-content {
    width: 64px !important;
  }
}
@media screen and (max-width: 1268px) {
  .retry-drop-rate .card-title-tip {
    display: none !important;
  }
}
@media screen and (max-width: 1204px) {
  .retry-drop-rate div[widget=echart] {
    width: 78% !important;
  }
  .retry-drop-rate .eap-list-container {
    width: 22% !important;
  }
  .retry-drop-rate .retry-drop-rate-tab {
    right: calc(22% + 16px) !important;
  }
  .retry-drop-rate span.eap-list-title {
    right: calc(22% - 80px) !important;
  }
}
@media screen and (max-width: 844px) {
  .retry-drop-rate .card-title-tip {
    display: none !important;
  }
  .retry-drop-rate span.retry-drop-title {
    width: calc(100% - 378px);
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media screen and (min-width: 732px) and (max-width: 1223px) {
  .card.m {
    width: calc(100% - 24px) !important;
  }

  .card.s {
    width: calc(50% - 24px) !important;
  }
}
@media screen and (min-width: 1224px) and (max-width: 1710px) {
  .isp-load .card-title-tip {
    display: none !important;
  }
}
@media screen and (max-width: 914px) {
  .isp-load .card-title-tip {
    display: none !important;
  }
}
@media screen and (min-width: 732px) and (max-width: 1439px) {
  .channel-distribution-usage .channel-usage-bar .progressbar-content {
    width: 64px !important;
  }
}
@media screen and (max-width: 731px) {
  div.m {
    width: calc(100% - 24px) !important;
  }

  div.s {
    width: calc(50% - 24px) !important;
  }

  .channel-distribution-usage .channel-usage-bar .progressbar-content {
    width: 34px !important;
  }
}
@media screen and (max-width: 867px) {
  .controller-snapshot .card-item .icon {
    display: none !important;
  }
  .controller-snapshot .card-item .title {
    padding: 0 !important;
  }
}
.card {
  position: relative;
  vertical-align: top;
  font-size: 14px;
  margin: 0 24px 24px 0;
}
.card.l {
  width: calc(100% - 24px);
}
.card.m {
  width: calc(50% - 24px);
}
.card.s {
  width: calc(25% - 24px);
}
.card.single-pie .chart-canvas {
  margin: auto;
}
.card div[widget=echart] {
  margin-bottom: 0;
}
.card .card-container {
  border-radius: 6px;
}
.card .flex-card-container {
  display: flex;
  justify-content: space-between;
}
.card a {
  cursor: pointer;
  color: #0492EB;
}
.card .card-add {
  display: none;
}
.card .card-item {
  position: relative;
  background: var(--card-primary, #ffffff);
  border-radius: 6px;
  padding: 20px 16px;
  height: 320px;
}
.card .card-item .widget-fieldlabel-wrap {
  top: 17px;
}
.card .card-item .title {
  line-height: 19px;
  font-size: 18px;
  color: var(--s-color-text-primary, #212121);
  position: relative;
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  padding-bottom: 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(189, 189, 189, 0.5);
}
.card .card-item .title .title-text {
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.card .card-item .title .tab-container {
  margin-top: -6px;
}
.card .card-item .card-content {
  position: relative;
}
.card .card-item .empty-tip {
  display: none;
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  text-align: center;
}
.card .card-item .tab-btn.selected {
  font-weight: normal;
}
.card .card-item .pie.empty {
  background: url(../img/NoDate.png) no-repeat 50% 25%;
  background-size: 120px 120px;
}
.card .card-item .pie.empty .empty-tip {
  display: block;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 15%;
}
.card .card-item .pie.empty .chart-area canvas {
  display: none;
}
.card div.device-list {
  height: 230px;
  overflow: auto;
}
.card div.device-list[widget=devicesList] {
  position: relative;
  top: -12px;
  height: 245px;
  margin-bottom: 0;
}
.card div.device-list[widget=devicesList].switch .logo-container span.icon {
  background: url(../img/deviceIcon/Gateway.png) no-repeat;
}
.card div.device-list.empty {
  background: url(../img/NoGateway.png) no-repeat 50% 25%;
  background-size: 120px 120px;
}
.card div.device-list.empty + .empty-tip {
  display: block;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 25%;
}
.card div.device-list.devicesList-container .paging-container {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.card div.device-list.devicesList-container .paging-container .pageing-btn-first,
.card div.device-list.devicesList-container .paging-container .pageing-btn-prev,
.card div.device-list.devicesList-container .paging-container .pageing-btn-next,
.card div.device-list.devicesList-container .paging-container .pageing-btn-last {
  width: 16px;
  height: 16px;
  line-height: 16px;
}
.card div.device-list.devicesList-container .paging-container .pageing-btn-first .icon,
.card div.device-list.devicesList-container .paging-container .pageing-btn-prev .icon,
.card div.device-list.devicesList-container .paging-container .pageing-btn-next .icon,
.card div.device-list.devicesList-container .paging-container .pageing-btn-last .icon {
  vertical-align: top;
  width: 16px;
  height: 16px;
}
.card div.device-list.devicesList-container .paging-container .paging-btn-num {
  height: 16px;
}
.card div.device-list.devicesList-container .paging-container .paging-btn-num .text {
  line-height: 16px;
}
.card div.device-list.devicesList-container .paging-go {
  margin-top: 4px;
}
.card div.device-list.devicesList-container .logo-container span.icon {
  vertical-align: middle;
  display: inline-block;
  width: 40px;
  height: 40px;
  background-size: contain;
}
.card div.device-list.devicesList-container .devicesList-item-container {
  cursor: default;
  padding-left: 0;
  padding-right: 0;
}
.card div.device-list.devicesList-container .devicesList-item-container:nth-child(2n) {
  background: var(--table-background-odd, #F8F9FB);
}
.card div.device-list.devicesList-container .devicesList-item-container.selected {
  background-color: transparent;
}
.card div.device-list.devicesList-container .devicesList-item-content {
  line-height: 45px;
  height: 45px;
  position: relative;
}
.card div.device-list.devicesList-container .devicesList-item-content .logo-container {
  margin-right: 0;
}
.card div.device-list.devicesList-container .devicesList-item-content .devicesList-item {
  padding-left: 5px;
  padding-right: 0;
  font-size: 14px;
  color: var(--s-color-text-secondary, rgba(73, 84, 107, 0.9));
}
.card div.device-list.devicesList-container .devicesList-item-content .devicesList-item-label {
  width: calc(54% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.card div.device-list.devicesList-container .devicesList-item-content .devicesList-item-link {
  cursor: pointer;
  font-size: 14px;
  color: #0492EB;
  font-weight: bold;
  position: absolute;
  right: 0;
  padding-left: 0;
  width: calc(34% - 12px);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.card div.device-list.devicesList-container .devicesList-item-content .devicesList-item-status {
  border-radius: 50%;
  width: 9px;
  height: 9px;
}
.card div.device-list.devicesList-container .devicesList-item-content.disconnected .devicesList-item-status {
  background-color: #FF2954;
}
.card div.device-list.devicesList-container .devicesList-item-content.connected .devicesList-item-status {
  background-color: #0DC901;
}
.card div.device-list.devicesList-container .devicesList-item-content.gateway .logo-container span.icon {
  background: url(../img/deviceIcon/Gateway.png) no-repeat;
}
.card div.device-list.devicesList-container .devicesList-item-content.switch .logo-container span.icon {
  background: url(../img/deviceIcon/Gateway.png) no-repeat;
}
.card div.device-list.devicesList-container .devicesList-item-content.Wave .logo-container span.icon {
  background: url(../img/deviceIcon/wave.png) no-repeat;
}
.card div.device-list.devicesList-container .devicesList-item-content.Cloud-Square .logo-container span.icon {
  background: url(../img/deviceIcon/cloudSquare.png) no-repeat;
}
.card div.device-list.devicesList-container .devicesList-item-content.Outdoor-Old .logo-container span.icon {
  background: url(../img/deviceIcon/outdoorOld.png) no-repeat;
}
.card div.device-list.devicesList-container .devicesList-item-content.Outdoor-New .logo-container span.icon {
  background: url(../img/deviceIcon/outdoorNew.png) no-repeat;
}
.card div.device-list.devicesList-container .devicesList-item-content.n11-UK .logo-container span.icon {
  background: url(../img/deviceIcon/n11uk.png) no-repeat;
}
.card div.device-list.devicesList-container .devicesList-item-content.ac11-Compatible .logo-container span.icon {
  background: url(../img/deviceIcon/ac11.png) no-repeat;
}
.card div.device-list.devicesList-container .devicesList-item-content.hd620 .logo-container span.icon {
  background: url(../img/deviceIcon/EAP650.png) no-repeat;
}
.card div.device-list.devicesList-container .devicesList-item-content.hd620-outdoor .logo-container span.icon {
  background: url(../img/deviceIcon/EAP620-Outdoor_HD.png) no-repeat;
}
.card div.device-list.devicesList-container .devicesList-item-content.eap650-wall .logo-container span.icon {
  background: url(../img/deviceIcon/EAP650-Wall.png) no-repeat;
}
.card div.device-list.devicesList-container .devicesList-item-content.eap655-wall .logo-container span.icon {
  background: url(../img/deviceIcon/EAP655-Wall.png) no-repeat;
}
.card div.device-list.devicesList-container .devicesList-item-content.android .logo-container span.icon {
  background: url(../img/clientIcon/android.png) no-repeat;
}
.card div.device-list.devicesList-container .devicesList-item-content.harddisk .logo-container span.icon {
  background: url(../img/clientIcon/harddisk.png) no-repeat;
}
.card div.device-list.devicesList-container .devicesList-item-content.ipad .logo-container span.icon {
  background: url(../img/clientIcon/iPad.png) no-repeat;
}
.card div.device-list.devicesList-container .devicesList-item-content.iphone .logo-container span.icon {
  background: url(../img/clientIcon/iPhone.png) no-repeat;
}
.card div.device-list.devicesList-container .devicesList-item-content.ipod .logo-container span.icon {
  background: url(../img/clientIcon/iPod.png) no-repeat;
}
.card div.device-list.devicesList-container .devicesList-item-content.notebook .logo-container span.icon {
  background: url(../img/clientIcon/notebook.png) no-repeat;
}
.card div.device-list.devicesList-container .devicesList-item-content.pc .logo-container span.icon {
  background: url(../img/clientIcon/pc.png) no-repeat;
}
.card div.device-list.devicesList-container .devicesList-item-content.printer .logo-container span.icon {
  background: url(../img/clientIcon/printer.png) no-repeat;
}
.card div.device-list.devicesList-container .devicesList-item-content.router .logo-container span.icon {
  background: url(../img/clientIcon/router.png) no-repeat;
}
.card div.device-list.devicesList-container .devicesList-item-content.tv .logo-container span.icon {
  background: url(../img/clientIcon/tv.png) no-repeat;
}
.card div.device-list.devicesList-container .devicesList-item-content.unknown .logo-container span.icon {
  background: url(../img/clientIcon/unknown.png) no-repeat;
}
.card div.device-list.devicesList-container .devicesList-item-content.usb .logo-container span.icon {
  background: url(../img/clientIcon/usb.png) no-repeat;
}
.card div.device-list .repeat-item {
  line-height: 45px;
  height: 45px;
}
.card div.device-list .repeat-item:nth-child(2n) {
  background: var(--table-background-odd, #F8F9FB);
}
.card div.device-list .repeat-item div.eap-icon,
.card div.device-list .repeat-item div.client-icon {
  vertical-align: middle;
  display: inline-block;
  width: 40px;
  height: 40px;
  background-size: contain;
}
.card div.device-list .repeat-item.Wave .eap-icon {
  background: url(../img/deviceIcon/wave.png) no-repeat;
}
.card div.device-list .repeat-item .client-icon {
  background: url(../img/clientIcon/iPad.png) no-repeat;
}
.card div.device-list .repeat-item.Cloud-Square .eap-icon {
  background: url(../img/deviceIcon/cloudSquare.png) no-repeat;
}
.card div.device-list .repeat-item.Outdoor-Old .eap-icon {
  background: url(../img/deviceIcon/outdoorOld.png) no-repeat;
}
.card div.device-list .repeat-item.Outdoor-New .eap-icon {
  background: url(../img/deviceIcon/outdoorNew.png) no-repeat;
}
.card div.device-list .repeat-item.n11-UK .eap-icon {
  background: url(../img/deviceIcon/n11uk.png) no-repeat;
}
.card div.device-list .repeat-item.ac11-Compatible .eap-icon {
  background: url(../img/deviceIcon/ac11.png) no-repeat;
}
.card div.device-list .repeat-item.hd620 .eap-icon {
  background: url(../img/deviceIcon/EAP650.png) no-repeat;
}
.card div.device-list .repeat-item.hd620-outdoor .eap-icon {
  background: url(../img/deviceIcon/EAP620-Outdoor_HD.png) no-repeat;
}
.card div.device-list .repeat-item.eap650-wall .eap-icon {
  background: url(../img/deviceIcon/EAP650-Wall.png) no-repeat;
}
.card div.device-list .repeat-item.eap655-wall .eap-icon {
  background: url(../img/deviceIcon/EAP655-Wall.png) no-repeat;
}
.card div.device-list .repeat-item.android .client-icon {
  background: url(../img/clientIcon/android.png) no-repeat;
}
.card div.device-list .repeat-item.harddisk .client-icon {
  background: url(../img/clientIcon/harddisk.png) no-repeat;
}
.card div.device-list .repeat-item.ipad .client-icon {
  background: url(../img/clientIcon/iPad.png) no-repeat;
}
.card div.device-list .repeat-item.iphone .client-icon {
  background: url(../img/clientIcon/iPhone.png) no-repeat;
}
.card div.device-list .repeat-item.ipod .client-icon {
  background: url(../img/clientIcon/iPod.png) no-repeat;
}
.card div.device-list .repeat-item.notebook .client-icon {
  background: url(../img/clientIcon/notebook.png) no-repeat;
}
.card div.device-list .repeat-item.pc .client-icon {
  background: url(../img/clientIcon/pc.png) no-repeat;
}
.card div.device-list .repeat-item.printer .client-icon {
  background: url(../img/clientIcon/printer.png) no-repeat;
}
.card div.device-list .repeat-item.router .client-icon {
  background: url(../img/clientIcon/router.png) no-repeat;
}
.card div.device-list .repeat-item.tv .client-icon {
  background: url(../img/clientIcon/tv.png) no-repeat;
}
.card div.device-list .repeat-item.unknown .client-icon {
  background: url(../img/clientIcon/unknown.png) no-repeat;
}
.card div.device-list .repeat-item.usb .client-icon {
  background: url(../img/clientIcon/usb.png) no-repeat;
}
.card div.device-list .repeat-item.disconnected div.status-icon {
  background-color: #FF2954;
}
.card div.device-list .repeat-item.connected div.status-icon {
  background-color: #0DC901;
}
.card div.device-list .repeat-item div.status-icon {
  border-radius: 50%;
  display: inline-block;
  width: 9px;
  height: 9px;
}
.card div.device-list .repeat-item div.switch-icon {
  vertical-align: middle;
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url(../img/deviceIcon/Gateway.png) no-repeat;
  background-size: contain;
}
.card div.device-list .repeat-item .device-name {
  font-size: 14px;
  color: var(--s-color-text-secondary, rgba(73, 84, 107, 0.9));
}
.card div.device-list .repeat-item .link {
  float: right;
  font-size: 14px;
  color: #0492EB;
  font-weight: bold;
}
.card div.device-list .repeat-item .link .text-wrap-display {
  cursor: pointer;
}

div#dashboard-bottom-card-view .card {
  display: inline-block;
}
div#dashboard-bottom-card-view .card.block-card {
  display: block;
}
div#dashboard-bottom-card-view .card:hover .card-add {
  display: block;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100px;
  height: 60px;
  z-index: 5;
}
div#dashboard-bottom-card-view .card:hover .card-add .add {
  display: inline-block;
  background: #FFFFFF;
  border-radius: 18px;
  width: 36px;
  height: 36px;
  cursor: pointer;
}
div#dashboard-bottom-card-view .card:hover .card-add .add span.icon {
  width: 36px;
  height: 36px;
  display: inline-block;
  background: url(../img/svg/ButtonIconAddNormal.svg);
}
div#dashboard-bottom-card-view .card:hover .card-add .text {
  font-weight: bold;
  margin-top: 9px;
  position: absolute;
  font-size: 14px;
  color: #F8F9FB;
  width: 100%;
}
div#dashboard-bottom-card-view .card:hover .card-container {
  opacity: 0.4;
  background: #000000;
}
div#dashboard-bottom-card-view .card.added .card-add {
  display: block;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100px;
  height: 60px;
  z-index: 5;
}
div#dashboard-bottom-card-view .card.added .card-add .add {
  display: inline-block;
  background: #FFFFFF;
  border-radius: 18px;
  width: 36px;
  height: 36px;
  cursor: default;
}
div#dashboard-bottom-card-view .card.added .card-add .add span.icon {
  width: 36px;
  height: 36px;
  display: inline-block;
  background: url(../img/svg/dashboard/correct.svg);
}
div#dashboard-bottom-card-view .card.added .card-add .text {
  display: none;
}
div#dashboard-bottom-card-view .card.added .card-container {
  opacity: 0.4;
  background: #000000;
}
div#dashboard-bottom-card-view .vpns .paging-container,
div#dashboard-bottom-card-view .ipsec-vpns .paging-container,
div#dashboard-bottom-card-view .open-vpn-vpns .paging-container,
div#dashboard-bottom-card-view .ssl-vpn-vpns .paging-container,
div#dashboard-bottom-card-view .wireguard-vpn-vpns .paging-container {
  display: none;
}

div#dashboard-card-container.edited .card {
  cursor: move;
}
div#dashboard-card-container.edited .card:hover:before {
  right: 4px;
  top: 4px;
  position: absolute;
  display: inline-block;
  content: " ";
  background: url(../img/svg/dashboard/failed.svg);
  width: 16px;
  height: 16px;
  cursor: pointer;
  z-index: 2;
}

.controller-snapshot:before {
  top: 12px;
  right: 14px;
}
.controller-snapshot .card-container {
  border-radius: 6px;
  background: #ffffff !important;
}
.controller-snapshot .card-container .card-title {
  padding-top: 20px;
  margin-left: 16px;
  margin-right: 16px;
  line-height: 19px;
  font-size: 18px;
  color: var(--s-color-text-primary, #212121);
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(189, 189, 189, 0.5);
}
.controller-snapshot .card-container .card-item {
  display: inline-block;
  width: 20%;
  height: 110px;
  vertical-align: middle;
}
.controller-snapshot .card-container .card-item .icon {
  display: block;
  width: 36px;
  height: 36px;
  position: absolute;
}
.controller-snapshot .card-container .card-item .title {
  font-size: 22px;
  color: var(--s-color-text-tertiary, #4A4A4A);
  letter-spacing: 0;
  line-height: 28px;
  position: relative;
  padding: 0 0 0 45px;
  margin: 4px 0;
  border: none;
  overflow: hidden;
  white-space: nowrap;
}
.controller-snapshot .card-container .card-item .title .text-wrap-outer {
  width: 100%;
}
.controller-snapshot .card-container .card-item .title .text-wrap-outer .text-wrap {
  width: 100%;
}
.controller-snapshot .card-container .card-item .title .text-wrap-outer .text-wrap .text-wrap-display {
  width: 100%;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 22px;
}
.controller-snapshot .card-container .card-item .text {
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  letter-spacing: 0;
  line-height: 18px;
  margin-bottom: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.controller-snapshot .card-container .card-item .text .text-wrap-outer {
  line-height: 16px;
  width: 100%;
}
.controller-snapshot .card-container .card-item .text .text-wrap-outer .text-wrap {
  width: 100%;
}
.controller-snapshot .card-container .card-item .text .text-wrap-outer .text-wrap .text-wrap-display {
  width: 100%;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 22px;
}
.controller-snapshot .card-container .card-item a.link {
  display: block;
  font-size: 14px;
  color: #0492EB;
  letter-spacing: 0;
  cursor: pointer;
  line-height: 18px;
  overflow: hidden;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.controller-snapshot .card-container .card-item.site .icon {
  background: url(../img/svg/dashboard/site.svg);
}
.controller-snapshot .card-container .card-item.device .icon {
  background: url(../img/svg/dashboard/device.svg);
}
.controller-snapshot .card-container .card-item.admin .icon {
  background: url(../img/svg/dashboard/admin.svg);
}
.controller-snapshot .card-container .card-item.cloud-access .icon {
  background: url(../img/svg/dashboard/cloudAccess.svg);
}
.controller-snapshot .card-container .card-item.alert .icon {
  background: url(../img/svg/dashboard/alert.svg);
}
.controller-snapshot .card-container .card-item.device .displaylabel-container {
  display: inline-block;
}
.controller-snapshot .card-container .card-item.device .warning-icon {
  display: inline-block;
  margin-left: 10px;
  margin-bottom: 14px;
  width: 18px;
  height: 18px;
  background-image: url("../img/svg/MessageIconWarning.svg");
}

.alerts .card-container {
  margin: auto;
}
.alerts .card-container .card-item {
  height: 312px;
}
.alerts .card-container .card-item .card-content.empty {
  background: url(../img/NoDate.png) no-repeat 50% 25%;
  background-size: 120px 120px;
  height: 238px;
}
.alerts .card-container .card-item .card-content.empty .empty-tip {
  display: block;
  margin-top: 140px;
}
.alerts .card-container .card-item a.see-all {
  font-size: 14px;
  color: #0492EB;
  position: absolute;
  right: 0;
}
.alerts .card-container .card-item .alert-num {
  margin-left: 4px;
}
.alerts .card-container .card-item .alert-num .text-wrap {
  font-size: 30px;
  color: #FF2954;
}
.alerts .card-container .card-item .alert-num .tips-content {
  font-size: 18px;
  color: var(--s-color-text-primary, #212121);
}
.alerts .card-container .card-item div.alert-list {
  max-height: 194px;
  overflow: auto;
}
.alerts .card-container .card-item div.alert-list div.repeat-item {
  margin-bottom: 17px;
}
.alerts .card-container .card-item div.alert-list div.repeat-item .text-wrap-outer {
  line-height: 16px;
}
.alerts .card-container .card-item div.alert-list div.repeat-item .alert-time {
  display: inline-block;
  width: 70px;
  height: 36px;
  font-size: 10px;
  color: var(--msg-color-content, #363E4D);
  position: relative;
  margin-left: 10px;
  vertical-align: top;
}
.alerts .card-container .card-item div.alert-list div.repeat-item .alert-time:before {
  position: absolute;
  content: " ";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #04B0FF;
  margin-top: 3px;
  left: -10px;
}
.alerts .card-container .card-item div.alert-list div.repeat-item .alert-time span.date {
  display: block;
}
.alerts .card-container .card-item div.alert-list div.repeat-item .alert-time span.time {
  font-size: 10px;
  color: #9B9B9B;
}
.alerts .card-container .card-item div.alert-list div.repeat-item .alert-content {
  font-size: 14px;
  display: inline-block;
  width: calc(100% - 114px);
  position: relative;
  margin-left: 30px;
}
.alerts .card-container .card-item div.alert-list div.repeat-item .alert-content:before {
  position: absolute;
  content: " ";
  display: inline-block;
  width: 16px;
  height: 16px;
  left: -22px;
  background: url(../img/svg/dashboard/error.svg);
}

.isp-load .card-container {
  margin: auto;
}
.isp-load .card-container .card-item {
  display: flex;
  flex-direction: column;
}
.isp-load .card-container .card-item .title {
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
}
.isp-load .card-container .card-item .title a.speed-test {
  margin-left: 12px;
  font-size: 14px;
  color: #0492EB;
}
.isp-load .card-container .card-item .title .card-title-tip {
  display: inline-block;
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  margin-left: 12px;
  background-color: var(--card-primary, #FFFFFF);
}
.isp-load .card-container .card-item .title .card-title-tip .throughput {
  margin-right: 8px;
}
.isp-load .card-container .card-item .title .card-title-tip .throughput .throughput-icon {
  display: inline-block;
  background: #04B0FF;
  border-radius: 100px 100px 0 0;
  width: 3px;
  margin-right: 1px;
  position: relative;
  top: 2px;
}
.isp-load .card-container .card-item .title .card-title-tip .throughput .throughput-icon.first {
  height: 13px;
}
.isp-load .card-container .card-item .title .card-title-tip .throughput .throughput-icon.second {
  height: 11px;
}
.isp-load .card-container .card-item .title .card-title-tip .throughput .throughput-icon.third {
  height: 16px;
}
.isp-load .card-container .card-item .title .card-title-tip .latency:before {
  vertical-align: middle;
  display: inline-block;
  content: " ";
  width: 16px;
  height: 16px;
  margin-right: 4px;
  background: url(../img/svg/ChartIconCPU.svg);
}
.isp-load .card-container .card-item .title .isp-load-tab {
  margin: 0 0 0 12px;
  white-space: normal;
}
.isp-load .card-container .card-item .title .isp-load-tab .tab-btn {
  margin-bottom: 2px;
  line-height: 22px;
  padding: 0 4px;
}
.isp-load .card-container .card-item .line {
  position: relative;
}
.isp-load .card-container .card-item .line span.xAxis {
  position: absolute;
  font-size: 14px;
  color: #363E4D;
  bottom: 8px;
}
.isp-load .card-container .card-item .line span.xAxis.start {
  left: 54px;
}
.isp-load .card-container .card-item .line span.xAxis.end {
  right: 54px;
}
.isp-load .card-container .card-item .line.empty {
  background: url(../img/NoDate.png) no-repeat 50% 25%;
  background-size: 120px 120px;
}
.isp-load .card-container .card-item .line.empty .empty-tip {
  display: block;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 25%;
}
.isp-load .card-container .card-item .line.empty .xAxis {
  display: none;
}
.isp-load .card-container .card-content {
  flex: 1;
}
.isp-load .card-container .chart-area {
  height: 100%;
}
.isp-load .card-container #isp-load-chart-main {
  height: 100%;
}

.vpns .card-container,
.ipsec-vpns .card-container,
.open-vpn-vpns .card-container,
.ssl-vpn-vpns .card-container,
.wireguard-vpn-vpns .card-container {
  margin: auto;
}
.vpns .card-container .card-item .grid-container .button-text,
.ipsec-vpns .card-container .card-item .grid-container .button-text,
.open-vpn-vpns .card-container .card-item .grid-container .button-text,
.ssl-vpn-vpns .card-container .card-item .grid-container .button-text,
.wireguard-vpn-vpns .card-container .card-item .grid-container .button-text {
  color: #ffffff;
}
.vpns .card-container .card-item .grid-container .paging-info-container,
.ipsec-vpns .card-container .card-item .grid-container .paging-info-container,
.open-vpn-vpns .card-container .card-item .grid-container .paging-info-container,
.ssl-vpn-vpns .card-container .card-item .grid-container .paging-info-container,
.wireguard-vpn-vpns .card-container .card-item .grid-container .paging-info-container {
  display: none;
}
.vpns .card-container .card-item .grid-container .grid-header,
.ipsec-vpns .card-container .card-item .grid-container .grid-header,
.open-vpn-vpns .card-container .card-item .grid-container .grid-header,
.ssl-vpn-vpns .card-container .card-item .grid-container .grid-header,
.wireguard-vpn-vpns .card-container .card-item .grid-container .grid-header {
  padding: 13px 15px;
}
.vpns .card-container .card-item .grid-container .grid-content-td,
.ipsec-vpns .card-container .card-item .grid-container .grid-content-td,
.open-vpn-vpns .card-container .card-item .grid-container .grid-content-td,
.ssl-vpn-vpns .card-container .card-item .grid-container .grid-content-td,
.wireguard-vpn-vpns .card-container .card-item .grid-container .grid-content-td {
  padding: 0px 15px;
  height: 44px;
}
.vpns .card-container .card-item .grid-container .grid-content-td a,
.ipsec-vpns .card-container .card-item .grid-container .grid-content-td a,
.open-vpn-vpns .card-container .card-item .grid-container .grid-content-td a,
.ssl-vpn-vpns .card-container .card-item .grid-container .grid-content-td a,
.wireguard-vpn-vpns .card-container .card-item .grid-container .grid-content-td a {
  color: var(--s-color-text-primary, #212121);
  cursor: text;
}
.vpns .card-container .card-item .grid-container .grid-panel-content-container,
.ipsec-vpns .card-container .card-item .grid-container .grid-panel-content-container,
.open-vpn-vpns .card-container .card-item .grid-container .grid-panel-content-container,
.ssl-vpn-vpns .card-container .card-item .grid-container .grid-panel-content-container,
.wireguard-vpn-vpns .card-container .card-item .grid-container .grid-panel-content-container {
  margin-bottom: 0;
}
.vpns .card-container .card-item .grid-container th,
.vpns .card-container .card-item .grid-container .grid-content-td .content,
.ipsec-vpns .card-container .card-item .grid-container th,
.ipsec-vpns .card-container .card-item .grid-container .grid-content-td .content,
.open-vpn-vpns .card-container .card-item .grid-container th,
.open-vpn-vpns .card-container .card-item .grid-container .grid-content-td .content,
.ssl-vpn-vpns .card-container .card-item .grid-container th,
.ssl-vpn-vpns .card-container .card-item .grid-container .grid-content-td .content,
.wireguard-vpn-vpns .card-container .card-item .grid-container th,
.wireguard-vpn-vpns .card-container .card-item .grid-container .grid-content-td .content {
  word-break: break-word;
  text-overflow: ellipsis;
}
.vpns .card-container .card-item #dashboard-vpn-grid_paging,
.vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging,
.vpns .card-container .card-item #dashboard-open-vpn-list_paging,
.vpns .card-container .card-item #dashboard-ssl-vpn-list_paging,
.vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging,
.ipsec-vpns .card-container .card-item #dashboard-vpn-grid_paging,
.ipsec-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging,
.ipsec-vpns .card-container .card-item #dashboard-open-vpn-list_paging,
.ipsec-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging,
.ipsec-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging,
.open-vpn-vpns .card-container .card-item #dashboard-vpn-grid_paging,
.open-vpn-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging,
.open-vpn-vpns .card-container .card-item #dashboard-open-vpn-list_paging,
.open-vpn-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging,
.open-vpn-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging,
.ssl-vpn-vpns .card-container .card-item #dashboard-vpn-grid_paging,
.ssl-vpn-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging,
.ssl-vpn-vpns .card-container .card-item #dashboard-open-vpn-list_paging,
.ssl-vpn-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging,
.ssl-vpn-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging,
.wireguard-vpn-vpns .card-container .card-item #dashboard-vpn-grid_paging,
.wireguard-vpn-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging,
.wireguard-vpn-vpns .card-container .card-item #dashboard-open-vpn-list_paging,
.wireguard-vpn-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging,
.wireguard-vpn-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging {
  margin-top: 8px;
}
.vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-btn,
.vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-btn,
.vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-btn,
.vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-btn,
.vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-btn,
.ipsec-vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-btn,
.ipsec-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-btn,
.ipsec-vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-btn,
.ipsec-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-btn,
.ipsec-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-btn,
.open-vpn-vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-btn,
.open-vpn-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-btn,
.open-vpn-vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-btn,
.open-vpn-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-btn,
.open-vpn-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-btn,
.ssl-vpn-vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-btn,
.ssl-vpn-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-btn,
.ssl-vpn-vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-btn,
.ssl-vpn-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-btn,
.ssl-vpn-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-btn,
.wireguard-vpn-vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-btn,
.wireguard-vpn-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-btn,
.wireguard-vpn-vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-btn,
.wireguard-vpn-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-btn,
.wireguard-vpn-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-btn {
  background: transparent;
}
.vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-btn span.icon,
.vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-btn span.icon,
.vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-btn span.icon,
.vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-btn span.icon,
.vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-btn span.icon,
.ipsec-vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-btn span.icon,
.ipsec-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-btn span.icon,
.ipsec-vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-btn span.icon,
.ipsec-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-btn span.icon,
.ipsec-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-btn span.icon,
.open-vpn-vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-btn span.icon,
.open-vpn-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-btn span.icon,
.open-vpn-vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-btn span.icon,
.open-vpn-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-btn span.icon,
.open-vpn-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-btn span.icon,
.ssl-vpn-vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-btn span.icon,
.ssl-vpn-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-btn span.icon,
.ssl-vpn-vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-btn span.icon,
.ssl-vpn-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-btn span.icon,
.ssl-vpn-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-btn span.icon,
.wireguard-vpn-vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-btn span.icon,
.wireguard-vpn-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-btn span.icon,
.wireguard-vpn-vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-btn span.icon,
.wireguard-vpn-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-btn span.icon,
.wireguard-vpn-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-btn span.icon {
  vertical-align: top;
}
.vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-btn-num,
.vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-btn-num,
.vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-btn-num,
.vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-btn-num,
.vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-btn-num,
.ipsec-vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-btn-num,
.ipsec-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-btn-num,
.ipsec-vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-btn-num,
.ipsec-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-btn-num,
.ipsec-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-btn-num,
.open-vpn-vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-btn-num,
.open-vpn-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-btn-num,
.open-vpn-vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-btn-num,
.open-vpn-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-btn-num,
.open-vpn-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-btn-num,
.ssl-vpn-vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-btn-num,
.ssl-vpn-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-btn-num,
.ssl-vpn-vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-btn-num,
.ssl-vpn-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-btn-num,
.ssl-vpn-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-btn-num,
.wireguard-vpn-vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-btn-num,
.wireguard-vpn-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-btn-num,
.wireguard-vpn-vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-btn-num,
.wireguard-vpn-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-btn-num,
.wireguard-vpn-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-btn-num {
  min-width: 16px;
  height: 16px;
}
.vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-btn-num .text,
.vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-btn-num .text,
.vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-btn-num .text,
.vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-btn-num .text,
.vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-btn-num .text,
.ipsec-vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-btn-num .text,
.ipsec-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-btn-num .text,
.ipsec-vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-btn-num .text,
.ipsec-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-btn-num .text,
.ipsec-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-btn-num .text,
.open-vpn-vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-btn-num .text,
.open-vpn-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-btn-num .text,
.open-vpn-vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-btn-num .text,
.open-vpn-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-btn-num .text,
.open-vpn-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-btn-num .text,
.ssl-vpn-vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-btn-num .text,
.ssl-vpn-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-btn-num .text,
.ssl-vpn-vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-btn-num .text,
.ssl-vpn-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-btn-num .text,
.ssl-vpn-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-btn-num .text,
.wireguard-vpn-vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-btn-num .text,
.wireguard-vpn-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-btn-num .text,
.wireguard-vpn-vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-btn-num .text,
.wireguard-vpn-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-btn-num .text,
.wireguard-vpn-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-btn-num .text {
  left: 0;
  line-height: 16px;
}
.vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-wrap-inner > div,
.vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-wrap-inner > div,
.vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-wrap-inner > div,
.vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-wrap-inner > div,
.vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-wrap-inner > div,
.ipsec-vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-wrap-inner > div,
.ipsec-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-wrap-inner > div,
.ipsec-vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-wrap-inner > div,
.ipsec-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-wrap-inner > div,
.ipsec-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-wrap-inner > div,
.open-vpn-vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-wrap-inner > div,
.open-vpn-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-wrap-inner > div,
.open-vpn-vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-wrap-inner > div,
.open-vpn-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-wrap-inner > div,
.open-vpn-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-wrap-inner > div,
.ssl-vpn-vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-wrap-inner > div,
.ssl-vpn-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-wrap-inner > div,
.ssl-vpn-vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-wrap-inner > div,
.ssl-vpn-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-wrap-inner > div,
.ssl-vpn-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-wrap-inner > div,
.wireguard-vpn-vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-wrap-inner > div,
.wireguard-vpn-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-wrap-inner > div,
.wireguard-vpn-vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-wrap-inner > div,
.wireguard-vpn-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-wrap-inner > div,
.wireguard-vpn-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-wrap-inner > div {
  margin-right: 10px;
}
.vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-options,
.vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-options,
.vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-options,
.vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-options,
.vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-options,
.ipsec-vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-options,
.ipsec-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-options,
.ipsec-vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-options,
.ipsec-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-options,
.ipsec-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-options,
.open-vpn-vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-options,
.open-vpn-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-options,
.open-vpn-vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-options,
.open-vpn-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-options,
.open-vpn-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-options,
.ssl-vpn-vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-options,
.ssl-vpn-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-options,
.ssl-vpn-vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-options,
.ssl-vpn-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-options,
.ssl-vpn-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-options,
.wireguard-vpn-vpns .card-container .card-item #dashboard-vpn-grid_paging .paging-options,
.wireguard-vpn-vpns .card-container .card-item #dashboard-ipsec-vpn-list_paging .paging-options,
.wireguard-vpn-vpns .card-container .card-item #dashboard-open-vpn-list_paging .paging-options,
.wireguard-vpn-vpns .card-container .card-item #dashboard-ssl-vpn-list_paging .paging-options,
.wireguard-vpn-vpns .card-container .card-item #dashboard-wireguard-vpn-list_paging .paging-options {
  display: none;
}
.vpns .card-container .card-item .title,
.ipsec-vpns .card-container .card-item .title,
.open-vpn-vpns .card-container .card-item .title,
.ssl-vpn-vpns .card-container .card-item .title,
.wireguard-vpn-vpns .card-container .card-item .title {
  border-bottom: none;
  margin-bottom: -4px;
}
.vpns .card-container .card-item .title .vpn-tab,
.ipsec-vpns .card-container .card-item .title .vpn-tab,
.open-vpn-vpns .card-container .card-item .title .vpn-tab,
.ssl-vpn-vpns .card-container .card-item .title .vpn-tab,
.wireguard-vpn-vpns .card-container .card-item .title .vpn-tab {
  float: right;
  position: relative;
  bottom: 5px;
}
.vpns .card-container .card-item .title .vpn-tab .tab-btn,
.ipsec-vpns .card-container .card-item .title .vpn-tab .tab-btn,
.open-vpn-vpns .card-container .card-item .title .vpn-tab .tab-btn,
.ssl-vpn-vpns .card-container .card-item .title .vpn-tab .tab-btn,
.wireguard-vpn-vpns .card-container .card-item .title .vpn-tab .tab-btn {
  line-height: 22px;
  padding: 0 4px;
}
.vpns .card-container .card-item .card-content.empty,
.ipsec-vpns .card-container .card-item .card-content.empty,
.open-vpn-vpns .card-container .card-item .card-content.empty,
.ssl-vpn-vpns .card-container .card-item .card-content.empty,
.wireguard-vpn-vpns .card-container .card-item .card-content.empty {
  background: url(../img/NoDate.png) no-repeat 50% 25%;
  background-size: 120px 120px;
  height: 234px;
}
.vpns .card-container .card-item .card-content.empty .empty-tip,
.ipsec-vpns .card-container .card-item .card-content.empty .empty-tip,
.open-vpn-vpns .card-container .card-item .card-content.empty .empty-tip,
.ssl-vpn-vpns .card-container .card-item .card-content.empty .empty-tip,
.wireguard-vpn-vpns .card-container .card-item .card-content.empty .empty-tip {
  display: block;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 25%;
}

.open-vpn-vpns .card-container .card-item .grid-container .grid-content-td.grid-content-td-txData,
.ssl-vpn-vpns .card-container .card-item .grid-container .grid-content-td.grid-content-td-txData,
.wireguard-vpn-vpns .card-container .card-item .grid-container .grid-content-td.grid-content-td-txData {
  padding-right: 0;
}
.open-vpn-vpns .card-container .card-item .grid-container .grid-content-td.grid-content-td-rxData,
.ssl-vpn-vpns .card-container .card-item .grid-container .grid-content-td.grid-content-td-rxData,
.wireguard-vpn-vpns .card-container .card-item .grid-container .grid-content-td.grid-content-td-rxData {
  padding-left: 0;
}

.channel-distribution-usage {
  width: 1304px;
}
.channel-distribution-usage .card-container {
  margin: auto;
}
.channel-distribution-usage .card-container .card-item {
  min-height: 143px;
  height: auto;
}
.channel-distribution-usage .card-container .card-item .card-content.empty {
  background: url(../img/NoDate.png) no-repeat 50% 25%;
  background-size: 120px 120px;
  height: 200px;
}
.channel-distribution-usage .card-container .card-item .card-content.empty .empty-tip {
  display: block;
  margin-top: 140px;
}
.channel-distribution-usage .card-container .card-item .title .card-title-tip {
  display: inline-block;
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  position: absolute;
  right: 0;
}
.channel-distribution-usage .card-container .card-item .title .card-title-tip span {
  margin-right: 14px;
}
.channel-distribution-usage .card-container .card-item .title .card-title-tip span:before {
  display: inline-block;
  content: " ";
  width: 10px;
  height: 10px;
  margin-right: 4px;
}
.channel-distribution-usage .card-container .card-item .title .card-title-tip span.good:before {
  background-color: #0DC901;
}
.channel-distribution-usage .card-container .card-item .title .card-title-tip span.fair:before {
  background-color: #FFBB00;
}
.channel-distribution-usage .card-container .card-item .title .card-title-tip span.poor:before {
  background-color: #FF2954;
}
.channel-distribution-usage .card-container .card-item div.channel-list {
  display: inline-block;
  margin-bottom: 4px;
  margin-right: 17px;
}
.channel-distribution-usage .card-container .card-item div.channel-list:last-child {
  margin-right: 0;
}
.channel-distribution-usage .card-container .card-item div.channel-list div.channel-title {
  font-size: 12px;
  color: var(--s-color-text-primary, #212121);
  margin-bottom: 8px;
  height: 15px;
  line-height: 15px;
}
.channel-distribution-usage .card-container .card-item div.channel-list div[widget=repeat] {
  display: inline-block;
}
.channel-distribution-usage .card-container .card-item div.channel-list div[widget=repeat] .repeat-item {
  display: inline-block;
  border-bottom: 1px solid rgba(75, 83, 103, 0.5);
  margin-bottom: 24px;
  position: relative;
}
.channel-distribution-usage .card-container .card-item div.channel-list div[widget=repeat] .repeat-item.unknown .progressbar-value {
  background-color: var(--process-background, #e5e5e5);
}
.channel-distribution-usage .card-container .card-item div.channel-list div[widget=repeat] .repeat-item.level0 .progressbar-value {
  background-color: #0DC901;
}
.channel-distribution-usage .card-container .card-item div.channel-list div[widget=repeat] .repeat-item.level1 .progressbar-value {
  background-color: #FFBB00;
}
.channel-distribution-usage .card-container .card-item div.channel-list div[widget=repeat] .repeat-item.level2 .progressbar-value {
  background-color: #FF2954;
}
.channel-distribution-usage .card-container .card-item div.channel-list div[widget=repeat] .repeat-item .channel-label {
  margin-left: 0;
  position: absolute;
  top: 17px;
  left: 44%;
  font-weight: normal;
  font-size: 12px;
  color: var(--tab-color-primary, #868E93);
}
.channel-distribution-usage .card-container .card-item div.channel-list .channel-usage-bar {
  margin-right: 3px;
  display: inline-block;
  margin-bottom: 7px;
  position: relative;
}
.channel-distribution-usage .card-container .card-item div.channel-list .channel-usage-bar .progressbar-wrap-outer {
  padding-right: 0;
}
.channel-distribution-usage .card-container .card-item div.channel-list .channel-usage-bar .progressbar-content {
  border-radius: 0;
  width: 75px;
  height: 8px;
}
.channel-distribution-usage .card-container .card-item div.channel-list .channel-usage-bar .progressbar-content .progressbar-value {
  border-radius: 0;
}

.most-active-eaps .card-container {
  margin: auto;
}
.most-active-eaps .card-container .card-item {
  height: 312px;
}
.most-active-eaps .card-container .card-item a.see-all {
  font-size: 14px;
  color: #0492EB;
}

.most-active-switch .card-container {
  margin: auto;
}
.most-active-switch .card-container .card-item {
  height: 312px;
}
.most-active-switch .card-container .card-item a.see-all {
  font-size: 14px;
  color: #0492EB;
}

.wifi-switching-summary .card-container {
  margin: auto;
}
.wifi-switching-summary .card-container .summary-tab {
  font-size: 14px;
}
.wifi-switching-summary .card-container .summary-tab .tab-btn {
  line-height: 22px;
}
.wifi-switching-summary .card-container .card-item {
  height: 312px;
}
.wifi-switching-summary .card-container .card-item .title-text {
  width: calc(100% - 133px);
}
.wifi-switching-summary .card-container .card-item .card-content {
  margin-top: 12px;
}
.wifi-switching-summary .card-container .card-item .stats-item {
  height: 52px;
  line-height: 52px;
}
.wifi-switching-summary .card-container .card-item .stats-item .stats-title {
  height: 52px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wifi-switching-summary .card-container .card-item .stats-item span {
  display: inline-block;
  vertical-align: middle;
}
.wifi-switching-summary .card-container .card-item .stats-item .summary-icon {
  display: inline-block;
  width: 36px;
  height: 36px;
  margin: 8px 0;
}
.wifi-switching-summary .card-container .card-item .stats-item .summary-stats {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: calc(100% - 40px);
  position: relative;
}
.wifi-switching-summary .card-container .card-item .stats-item .summary-stats .widget-fieldlabel-wrap {
  width: auto;
  font-size: 14px;
  color: #363E4D;
  vertical-align: middle;
}
.wifi-switching-summary .card-container .card-item .stats-item .summary-stats .text-wrap-outer {
  display: inline-block;
  vertical-align: middle;
  font-size: 20px;
  color: var(--s-color-text-tertiary, #4A4A4A);
  line-height: 48px;
  white-space: nowrap;
}
.wifi-switching-summary .card-container .card-item .stats-item.online .summary-icon {
  background: var(--icon-device-online, url(../img/svg/dashboard/deviceOnline.svg));
}
.wifi-switching-summary .card-container .card-item .stats-item.clients .summary-icon {
  background: url(../img/svg/dashboard/clientGroup.svg);
}
.wifi-switching-summary .card-container .card-item .stats-item.port-utilization .summary-icon {
  background: var(--icon-port, url(../img/svg/dashboard/portUtilization.svg));
}
.wifi-switching-summary .card-container .card-item .stats-item.traffic .summary-icon {
  background: url(../img/svg/dashboard/traffic.svg);
}

.traffic-distribution .card-container {
  margin: auto;
}
.traffic-distribution .card-container .card-item {
  height: 312px;
}
.traffic-distribution .card-container .card-item .title-text {
  width: calc(100% - 137px);
}
.traffic-distribution .card-container .card-item .traffic-distribution-tab .tab-btn {
  line-height: 22px;
}
.traffic-distribution .card-container .card-item div.pie-container-eap,
.traffic-distribution .card-container .card-item div.pie-container-switch {
  height: 238px;
  position: relative;
}
.traffic-distribution .card-container .card-item div.pie-container-eap.empty,
.traffic-distribution .card-container .card-item div.pie-container-switch.empty {
  background: url(../img/NoDate.png) no-repeat 50% 25%;
  background-size: 120px 120px;
}
.traffic-distribution .card-container .card-item div.pie-container-eap.empty .empty-tip,
.traffic-distribution .card-container .card-item div.pie-container-switch.empty .empty-tip {
  display: block;
  position: absolute;
  top: 160px;
  margin: auto;
  left: 0;
  right: 0;
}

.traffic-activities {
  width: 1304px;
}
.traffic-activities .card-container {
  margin: auto;
}
.traffic-activities .card-container .card-item {
  height: 312px;
}
.traffic-activities .card-container .card-item .card-title-tip {
  display: inline-block;
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
}
.traffic-activities .card-container .card-item .card-title-tip span {
  margin-right: 14px;
}
.traffic-activities .card-container .card-item .card-title-tip span:before {
  display: inline-block;
  content: " ";
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-radius: 50%;
}
.traffic-activities .card-container .card-item .card-title-tip span.tx-data:before {
  background-color: #0DC901;
}
.traffic-activities .card-container .card-item .card-title-tip span.dx-data:before {
  background-color: #FFBB00;
}
.traffic-activities .card-container .card-item .traffic-activities-tab .tab-btn {
  line-height: 22px;
}
.traffic-activities .card-container .card-item div[widget=echart] {
  position: relative;
}
.traffic-activities .card-container .card-item div[widget=echart].empty {
  background: url(../img/NoDate.png) no-repeat 50% 25%;
  background-size: 120px 120px;
}
.traffic-activities .card-container .card-item div[widget=echart].empty .empty-tip {
  display: block;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 25%;
}
.traffic-activities .card-container .card-item div[widget=echart] td {
  display: inline-block;
  margin-left: 8px;
}

.clients-distribution .card-container {
  margin: auto;
}
.clients-distribution .card-container .card-item {
  height: 312px;
}
.clients-distribution .card-container .card-item div[widget=echart] {
  position: relative;
}

.retry-drop-rate {
  width: 1304px;
}
.retry-drop-rate .card-container {
  margin: auto;
}
.retry-drop-rate .card-container .card-item {
  height: 345px;
}
.retry-drop-rate .card-container .card-item .retry-drop-title {
  margin-bottom: 10px;
}
.retry-drop-rate .card-container .card-item .flex-flow-wrap {
  flex-flow: wrap;
}
.retry-drop-rate .card-container .card-item .retry-tab-container {
  width: 100%;
  justify-content: space-between;
}
.retry-drop-rate .card-container .card-item .title {
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
}
.retry-drop-rate .card-container .card-item .card-title-tip {
  display: inline-block;
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
}
.retry-drop-rate .card-container .card-item .card-title-tip span {
  margin-right: 14px;
}
.retry-drop-rate .card-container .card-item .card-title-tip span:before {
  display: inline-block;
  content: " ";
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-radius: 50%;
}
.retry-drop-rate .card-container .card-item .card-title-tip span.green:before {
  background-color: #0DC901;
}
.retry-drop-rate .card-container .card-item .card-title-tip span.yellow:before {
  background-color: #FFBB00;
}
.retry-drop-rate .card-container .card-item .card-title-tip span.red:before {
  background-color: #FF2954;
}
.retry-drop-rate .card-container .card-item .retry-drop-rate-tab {
  margin: -6px 5px 0 0;
}
.retry-drop-rate .card-container .card-item .retry-drop-rate-tab .tab-btn {
  line-height: 22px;
}
.retry-drop-rate .card-container .card-item #retry-rate-devices,
.retry-drop-rate .card-container .card-item #drop-rate-devices {
  top: -4px;
}
.retry-drop-rate .card-container .card-item div.eap-list-container {
  float: right;
  position: relative;
  width: 234px;
}
.retry-drop-rate .card-container .card-item div.eap-list-container div.device-list {
  width: 100%;
  height: 240px;
}
.retry-drop-rate .card-container .card-item div.eap-list-container div.device-list .device-name {
  width: calc(100% - 44px);
}
.retry-drop-rate .card-container .card-item div.eap-list-container div.device-list .device-name div {
  width: 100%;
}
.retry-drop-rate .card-container .card-item div.eap-list-container div.device-list .device-name div .text-wrap {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.retry-drop-rate .card-container .card-item div.eap-list-container div.device-list a.button-button {
  color: #ffffff;
}
.retry-drop-rate .card-container .card-item div.eap-list-container div.device-list .devicesList-item-container {
  cursor: pointer;
}
.retry-drop-rate .card-container .card-item div.eap-list-container div.device-list .devicesList-item-container.selected {
  background-color: rgba(4, 146, 235, 0.18);
}
.retry-drop-rate .card-container .card-item div.eap-list-container div.device-list .devicesList-item-container .devicesList-item-content {
  line-height: 42px;
  height: 42px;
}
.retry-drop-rate .card-container .card-item div.eap-list-container div.device-list .devicesList-item-container .devicesList-item-content:hover {
  background-color: rgba(4, 146, 235, 0.18);
}
.retry-drop-rate .card-container .card-item div.eap-list-container div.device-list .devicesList-item-container .devicesList-item-content.offline:after {
  content: " ";
  display: inline-block;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  background-color: #FF2954;
  margin-left: 4px;
}
.retry-drop-rate .card-container .card-item div.eap-list-container div.device-list .devicesList-item-container .devicesList-item-content .devicesList-item-label {
  width: calc(100% - 65px);
}
.retry-drop-rate .card-container .card-item div[widget=echart] {
  position: relative;
}
.retry-drop-rate .card-container .card-item div[widget=echart].empty {
  background: url(../img/NoDate.png) no-repeat 50% 25%;
  background-size: 120px 120px;
}
.retry-drop-rate .card-container .card-item div[widget=echart].empty .empty-tip {
  display: block;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 25%;
}

.top-interference .card-container {
  margin: auto;
}
.top-interference .card-container .top-interference-tab {
  z-index: 1;
  font-size: 14px;
}
.top-interference .card-container .top-interference-tab .tab-btn {
  line-height: 22px;
}
.top-interference .card-container .card-item {
  height: 312px;
}

.top-device-usage .card-container {
  margin: auto;
}
.top-device-usage .card-container .top-device-usage-tab {
  z-index: 1;
  font-size: 14px;
}
.top-device-usage .card-container .top-device-usage-tab .tab-btn {
  line-height: 22px;
}
.top-device-usage .card-container .card-item {
  height: 312px;
}
.top-device-usage .card-item .title-text {
  width: calc(100% - 133px);
}

.poe-utilization .card-container {
  margin: auto;
}
.poe-utilization .card-container .card-item {
  height: 312px;
}
.poe-utilization .card-item .poe {
  width: calc(75% - 16px) !important;
}
.poe-utilization .card-item .poe .port-power {
  color: var(--s-color-text-tertiary, #4A4A4A);
}
.poe-utilization .card-item .poe .port-power-list {
  height: 160px;
  padding-top: 23px;
  overflow-x: auto;
}
.poe-utilization .card-item .poe .port-power-list .port-row {
  margin-bottom: 12px;
  white-space: nowrap;
}
.poe-utilization .card-item .poe .port-power-list .port-item {
  position: relative;
  display: inline-block;
  background: var(--port-background-disabled, #E1E2E6);
  border-radius: 3px;
  width: calc(7.1428571429% - 6px);
  height: 40px;
  margin-right: 6px;
}
.poe-utilization .card-item .poe .port-power-list .port-item .port-num {
  position: absolute;
  top: -14px;
  font-size: 11px;
  color: var(--s-color-text-secondary, rgba(73, 84, 107, 0.9));
  margin-left: 50%;
  transform: translate(-50%, 0);
}
.poe-utilization .card-item .poe .port-power-list .port-item .port-value {
  background: #04B0FF;
  border-radius: 3px;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.poe-utilization .card-item .poe .port-power-list .port-item.second-line .port-num {
  position: absolute;
  top: 44px;
}
.poe-utilization .card-item .poe .port-power-list .port-item.disabled {
  background: var(--port-background-disabled, #dbdbde);
}
.poe-utilization .card-item .poe .port-power-overview .bar-title {
  color: var(--s-color-side, #363e4d);
}
.poe-utilization .card-item .poe .port-power-overview .bar-percent {
  color: var(--s-color-text-tertiary, #4A4A4A);
  float: right;
  font-size: 14px;
}
.poe-utilization .card-item .poe .port-power-overview .start {
  font-size: 12px;
  color: #AEB4B7;
}
.poe-utilization .card-item .poe .port-power-overview .end {
  font-size: 12px;
  color: #AEB4B7;
  float: right;
}
.poe-utilization .card-item .poe .port-power-overview .power-capacity-bar {
  margin: 4px 0;
}
.poe-utilization .card-item .poe .port-power-overview .power-capacity-bar .progressbar-wrap-outer,
.poe-utilization .card-item .poe .port-power-overview .power-capacity-bar .progressbar-wrap {
  padding: 0;
  width: 100%;
}
.poe-utilization .card-item .poe .port-power-overview .power-capacity-bar .progressbar-content {
  height: 8px;
  width: 100%;
}
.poe-utilization .card-item .poe .port-power-overview .power-capacity-bar .progressbar-content .progressbar-value {
  background-color: #04B0FF;
}
.poe-utilization .card-item .poe .port-power-overview .power-capacity-bar.example .progressbar-value {
  width: 55%;
}
.poe-utilization .card-item .switch-list {
  float: right;
  position: relative;
  width: 25% !important;
}
.poe-utilization .card-item .switch-list .title-text {
  right: calc(22% - 80px) !important;
}
.poe-utilization .card-item .switch-list div.device-list {
  width: 100%;
  height: 240px;
}
.poe-utilization .card-item .switch-list div.device-list .device-name {
  width: calc(100% - 44px);
}
.poe-utilization .card-item .switch-list div.device-list .device-name div {
  width: 100%;
}
.poe-utilization .card-item .switch-list div.device-list .device-name div .text-wrap {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.poe-utilization .card-item .switch-list div.device-list a.button-button {
  color: #ffffff;
}
.poe-utilization .card-item .switch-list div.device-list .devicesList-item-container {
  cursor: pointer;
}
.poe-utilization .card-item .switch-list div.device-list .devicesList-item-container.selected {
  background-color: rgba(4, 146, 235, 0.18);
}
.poe-utilization .card-item .switch-list div.device-list .devicesList-item-container .devicesList-item-content {
  line-height: 42px;
  height: 42px;
}
.poe-utilization .card-item .switch-list div.device-list .devicesList-item-container .devicesList-item-content:hover {
  background-color: rgba(4, 146, 235, 0.18);
}
.poe-utilization .card-item .switch-list div.device-list .devicesList-item-container .devicesList-item-content .devicesList-item-label {
  width: calc(100% - 65px);
}
.poe-utilization .card-item .switch-list div.device-list .devicesList-item-container span.icon {
  background: url(../img/deviceIcon/Gateway.png) no-repeat;
}
.poe-utilization .paging-go {
  display: none !important;
}
.poe-utilization .paging-btn-num {
  min-width: 14px;
}

.top-interference .card-container {
  margin: auto;
}
.top-interference .card-container .top-interference-tab {
  z-index: 1;
  font-size: 14px;
}
.top-interference .card-container .top-interference-tab .tab-btn {
  line-height: 22px;
}
.top-interference .card-container .card-item {
  height: 312px;
}
.top-interference .card-item .title-text {
  width: calc(100% - 200px);
}

.most-active-clients .card-container {
  margin: auto;
}
.most-active-clients .card-container a.see-all {
  font-size: 14px;
  color: #0492EB;
}
.most-active-clients .card-container .card-item {
  height: 312px;
}

.longest-client-uptime .card-container {
  margin: auto;
}
.longest-client-uptime .card-container .card-item {
  height: 312px;
}

.clients-freq-distribution .card-container,
.clients-history .card-container {
  margin: auto;
}
.clients-freq-distribution .card-container .card-item,
.clients-history .card-container .card-item {
  height: 312px;
}
.clients-freq-distribution .card-container .card-item .legend,
.clients-history .card-container .card-item .legend {
  text-align: center;
  line-height: 16px;
  margin-top: 8px;
}
.clients-freq-distribution .card-container .card-item .legend .legend-1,
.clients-history .card-container .card-item .legend .legend-1 {
  display: inline-block;
  margin-right: 8px;
}
.clients-freq-distribution .card-container .card-item .legend .legend-1 span.icon,
.clients-history .card-container .card-item .legend .legend-1 span.icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #04B0FF;
}
.clients-freq-distribution .card-container .card-item .legend .legend-1 span.text,
.clients-history .card-container .card-item .legend .legend-1 span.text {
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
}
.clients-freq-distribution .card-container .card-item .legend .legend-2,
.clients-history .card-container .card-item .legend .legend-2 {
  display: inline-block;
}
.clients-freq-distribution .card-container .card-item .legend .legend-2 span.icon,
.clients-history .card-container .card-item .legend .legend-2 span.icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #5C78FB;
}
.clients-freq-distribution .card-container .card-item .legend .legend-2 span.text,
.clients-history .card-container .card-item .legend .legend-2 span.text {
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
}

.clients-history {
  min-width: 400px;
}
.clients-history .title {
  display: flex;
  justify-content: space-between;
}
.clients-history .title .time-range {
  font-size: 14px;
  font-family: Arial, Geneva, Verdana, sans-serif;
}
.clients-history .title .time-range.disabled {
  color: #a0a0a0;
}
.clients-history #clients-history-card-content .fieldset-content {
  display: block;
}
.clients-history .client-tip-container .img {
  width: 160px;
  height: 160px;
}

.client-activities,
.client-asso-activities {
  width: 1304px;
}
.client-activities .card-container,
.client-asso-activities .card-container {
  margin: auto;
}
.client-activities .card-container .card-item,
.client-asso-activities .card-container .card-item {
  height: 312px;
}
.client-activities .card-container .card-item .card-title-tip,
.client-asso-activities .card-container .card-item .card-title-tip {
  display: inline-block;
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
}
.client-activities .card-container .card-item .card-title-tip span,
.client-asso-activities .card-container .card-item .card-title-tip span {
  margin-right: 14px;
}
.client-activities .card-container .card-item .card-title-tip span:before,
.client-asso-activities .card-container .card-item .card-title-tip span:before {
  display: inline-block;
  content: " ";
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-radius: 50%;
}
.client-activities .card-container .card-item .card-title-tip span.new:before,
.client-asso-activities .card-container .card-item .card-title-tip span.new:before {
  background-color: #00D1E3;
}
.client-activities .card-container .card-item .card-title-tip span.existing:before,
.client-asso-activities .card-container .card-item .card-title-tip span.existing:before {
  background-color: #FF9500;
}
.client-activities .card-container .card-item .card-title-tip span.disconnected:before,
.client-asso-activities .card-container .card-item .card-title-tip span.disconnected:before {
  background-color: #AEB4B7;
}
.client-activities .card-container .card-item .card-title-tip span.first:before,
.client-asso-activities .card-container .card-item .card-title-tip span.first:before {
  background-color: #0DC901;
}
.client-activities .card-container .card-item .card-title-tip span.second:before,
.client-asso-activities .card-container .card-item .card-title-tip span.second:before {
  background-color: #FFD701;
}
.client-activities .card-container .card-item .card-title-tip span.third:before,
.client-asso-activities .card-container .card-item .card-title-tip span.third:before {
  background-color: #FF2954;
}
.client-activities .card-container .card-item .card-title-tip span.forth:before,
.client-asso-activities .card-container .card-item .card-title-tip span.forth:before {
  background-color: #750b15;
}
.client-activities .card-container .card-item .client-activities-tab .tab-btn,
.client-asso-activities .card-container .card-item .client-activities-tab .tab-btn {
  line-height: 22px;
}
.client-activities .card-container .card-item div[widget=echart],
.client-asso-activities .card-container .card-item div[widget=echart] {
  position: relative;
}
.client-activities .card-container .card-item div[widget=echart].empty,
.client-asso-activities .card-container .card-item div[widget=echart].empty {
  background: url(../img/NoDate.png) no-repeat 50% 25%;
  background-size: 120px 120px;
}
.client-activities .card-container .card-item div[widget=echart].empty .empty-tip,
.client-asso-activities .card-container .card-item div[widget=echart].empty .empty-tip {
  display: block;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 25%;
}

.association-failures .card-container {
  margin: auto;
}
.association-failures .card-container .card-item {
  height: 312px;
}
.association-failures .card-container .card-item .association-failures-panel {
  width: 60%;
  float: left;
}
.association-failures .card-container .card-item .association-failures-panel #association-fail-total,
.association-failures .card-container .card-item .association-failures-panel #association-fail-total-main {
  font-size: 30px;
  color: #FF2954;
  padding-right: 5px;
}
.association-failures .card-container .card-item .association-failures-panel #association-fail-progressbar,
.association-failures .card-container .card-item .association-failures-panel #association-fail-progressbar-main {
  vertical-align: bottom;
  width: calc(100% - 43px);
}
.association-failures .card-container .card-item .association-failures-panel #association-fail-progressbar .widget-wrap-outer,
.association-failures .card-container .card-item .association-failures-panel #association-fail-progressbar .widget-wrap,
.association-failures .card-container .card-item .association-failures-panel #association-fail-progressbar .progressbar-content,
.association-failures .card-container .card-item .association-failures-panel #association-fail-progressbar-main .widget-wrap-outer,
.association-failures .card-container .card-item .association-failures-panel #association-fail-progressbar-main .widget-wrap,
.association-failures .card-container .card-item .association-failures-panel #association-fail-progressbar-main .progressbar-content {
  width: 100%;
}
.association-failures .card-container .card-item .association-failures-panel #association-fail-progressbar .progressbar-content,
.association-failures .card-container .card-item .association-failures-panel #association-fail-progressbar-main .progressbar-content {
  height: 8px;
}
.association-failures .card-container .card-item .association-failures-panel #association-fail-progressbar .progressbar-wrap-outer,
.association-failures .card-container .card-item .association-failures-panel #association-fail-progressbar-main .progressbar-wrap-outer {
  padding: 0;
}
.association-failures .card-container .card-item .association-failures-panel #association-fail-progressbar .timeout,
.association-failures .card-container .card-item .association-failures-panel #association-fail-progressbar-main .timeout {
  background-color: var(--s-color-text-primary, #212121);
}
.association-failures .card-container .card-item .association-failures-panel #association-fail-progressbar .blocked,
.association-failures .card-container .card-item .association-failures-panel #association-fail-progressbar-main .blocked {
  background-color: #49546B;
}
.association-failures .card-container .card-item .association-failures-panel #association-fail-progressbar .wpaFail,
.association-failures .card-container .card-item .association-failures-panel #association-fail-progressbar-main .wpaFail {
  background-color: #7F8797;
}
.association-failures .card-container .card-item .association-failures-panel .association-tab-head {
  font-size: 14px;
  color: var(--s-color-text-primary, #212121);
  line-height: 36px;
  border-top: 1px solid rgba(189, 189, 189, 0.5);
  border-bottom: 1px solid rgba(189, 189, 189, 0.5);
  padding: 0 15px;
}
.association-failures .card-container .card-item .association-failures-panel .association-tab-head span.count {
  float: right;
}
.association-failures .card-container .card-item .association-failures-panel div[widget=displaylabel].content {
  padding-left: 28px;
  position: relative;
  color: var(--panel-color-label, #49546B);
  font-size: 14px;
  line-height: 36px;
  cursor: pointer;
}
.association-failures .card-container .card-item .association-failures-panel div[widget=displaylabel].content label {
  cursor: pointer;
}
.association-failures .card-container .card-item .association-failures-panel div[widget=displaylabel].content .failures {
  position: absolute;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  left: 16px;
  top: 13px;
}
.association-failures .card-container .card-item .association-failures-panel div[widget=displaylabel].content.selected {
  background: rgba(4, 146, 235, 0.08);
  color: #0492EB;
}
.association-failures .card-container .card-item .association-failures-panel div[widget=displaylabel].content:not(.selected):hover {
  background: rgba(4, 146, 235, 0.08);
  color: #0492EB;
}
.association-failures .card-container .card-item .association-failures-panel div[widget=displaylabel].content.timeout .failures {
  background: var(--icon-timeout, url(../img/svg/dashboard/fail-timeout.svg));
}
.association-failures .card-container .card-item .association-failures-panel div[widget=displaylabel].content.blocked .failures {
  background: var(--icon-blocked, url(../img/svg/dashboard/fail-blocked.svg));
}
.association-failures .card-container .card-item .association-failures-panel div[widget=displaylabel].content.wpaFail .failures {
  background: var(--icon-wpa, url(../img/svg/dashboard/fail-wpa.svg));
}
.association-failures .card-container .card-item .association-failures-panel div[widget=displaylabel].content .widget-fieldlabel-wrap {
  width: auto;
  line-height: 36px;
  height: 36px;
  padding-right: 30px;
}
.association-failures .card-container .card-item .association-failures-panel div[widget=displaylabel].content .text-wrap-outer {
  position: absolute;
  right: 14px;
  line-height: 36px;
}
.association-failures .card-container .card-item .association-failures-panel div[widget=displaylabel].content div[widget=toolTip] {
  position: absolute;
  top: 8px;
  margin-left: 6px;
  height: 18px;
  line-height: 18px;
}
.association-failures .card-container .card-item #ap-failures-pie,
.association-failures .card-container .card-item #ap-failures-pie-main {
  float: left;
  position: relative;
  width: 40%;
}
.association-failures .card-container .card-item #ap-failures-pie .chart-canvas,
.association-failures .card-container .card-item #ap-failures-pie-main .chart-canvas {
  margin: auto;
}

.clients-association-time-distribution .card-item .title,
.clients-rssi-distribution .card-item .title {
  margin-bottom: 24px;
}
.clients-association-time-distribution .card-item .title .card-title-tip,
.clients-rssi-distribution .card-item .title .card-title-tip {
  display: inline-block;
  float: right;
}
.clients-association-time-distribution .card-item .title .card-title-tip .tip-icon,
.clients-rssi-distribution .card-item .title .card-title-tip .tip-icon {
  display: inline-block;
  width: 18px;
  height: 10px;
  background: rgba(255, 41, 84, 0.1);
  border: 1px dashed rgba(255, 41, 84, 0.8);
}
.clients-association-time-distribution .card-item .title .card-title-tip .tip-text,
.clients-rssi-distribution .card-item .title .card-title-tip .tip-text {
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  letter-spacing: 0;
}
.clients-association-time-distribution .card-item .rssi-pie,
.clients-rssi-distribution .card-item .rssi-pie {
  position: relative;
  float: left;
  width: 30%;
}
.clients-association-time-distribution .card-item .rssi-pie.empty .pie-title,
.clients-rssi-distribution .card-item .rssi-pie.empty .pie-title {
  display: none;
}
.clients-association-time-distribution .card-item .rssi-pie .pie-title,
.clients-rssi-distribution .card-item .rssi-pie .pie-title {
  position: absolute;
  color: var(--s-color-secondary, rgba(73, 84, 107, 0.9));
  bottom: 5px;
  width: 100%;
  text-align: center;
}
.clients-association-time-distribution .card-item .rssi-pie .chart-canvas,
.clients-rssi-distribution .card-item .rssi-pie .chart-canvas {
  margin: auto;
}

#topology div[widget=transition] {
  display: none;
}
#topology.empty {
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: 25%;
  background-size: 180px;
  background-image: url(../img/NoDate.png);
}
#topology.empty div[widget=transition] {
  display: block;
  width: 400px;
  margin: auto;
  left: 0;
  right: 0;
}
#topology.empty .no-device-title {
  font-size: 16px;
  color: var(--s-color-text-primary, #212121);
  letter-spacing: 0;
  text-align: center;
  position: absolute;
  top: 50%;
  font-weight: bold;
}
#topology.empty .no-device-tip {
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  letter-spacing: 0;
  text-align: center;
  position: absolute;
  top: 54%;
}

#topology-panel {
  background: transparent;
  box-shadow: none;
  padding-bottom: 0;
  padding: 0;
}
#topology-panel.empty {
  background: var(--card-primary, #ffffff);
}

.page-tool-container {
  position: absolute;
  top: 15px;
  right: 30px;
  border-radius: 3px;
}
.page-tool-container #zoom-container-topology {
  background: var(--card-primary, #ffffff);
}
.page-tool-container #zoom-container-topology .zoom-button.widget-container {
  margin-bottom: 0;
}
.page-tool-container #zoom-container-topology .zoom-button .button-button {
  padding-right: 0;
}
.page-tool-container #zoom-container-topology .zoom-button .button-button > .button-icon {
  display: inline-block;
}
.page-tool-container #zoom-container-topology .zoom-button:last-child {
  padding-right: 16px;
}

div.link-label {
  z-index: 3;
  cursor: pointer;
  position: absolute;
  padding: 5px 10px;
  margin: 20px;
  top: 0;
  height: 26px;
  border-radius: 12px;
  color: #0492EB;
  border: 1px solid #0492EB;
  background: var(--card-primary, #ffffff);
}
div.link-label.selected {
  background: #0492EB;
  color: #ffffff;
}

#topology-panel.empty .link-label {
  display: none;
}

#map-tab .tab-btn.topology:before {
  content: " ";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: var(--icon-menu-topology, url(../img/svg/SidebariconTopologyNormal.svg));
  position: relative;
  top: 3px;
  margin-right: 5px;
}
#map-tab .tab-btn.topology.selected:before {
  background: url(../img/svg/SidebariconTopologyBlue.svg);
}
#map-tab .tab-btn.topology:hover:before {
  background: url(../img/svg/SidebariconTopologyBlue.svg);
}
#map-tab .tab-btn.map:before {
  content: " ";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: var(--icon-menu-mapEntry, url("../img/svg/SidebariconMapNormal.svg"));
  position: relative;
  top: 3px;
  margin-right: 5px;
}
#map-tab .tab-btn.map.selected:before {
  background: url(../img/svg/SidebariconMapBlue.svg);
}
#map-tab .tab-btn.map:hover:before {
  background: url(../img/svg/SidebariconMapBlue.svg);
}
#map-tab .tab-btn.mapGl:before {
  content: " ";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: var(--icon-menu-map, url(../img/svg/deviceMapNormal.svg));
  position: relative;
  top: 3px;
  margin-right: 5px;
}
#map-tab .tab-btn.mapGl.selected:before {
  background: url(../img/svg/deviceMapBlue.svg);
}
#map-tab .tab-btn.mapGl:hover:before {
  background: url(../img/svg/deviceMapBlue.svg);
}

#topology-legend {
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.25);
  z-index: 4;
  width: 730px;
  background-color: var(--card-primary, #ffffff);
  position: absolute;
  right: 0;
  padding: 18px 0 18px 18px;
}
#topology-legend .topology-legend-title {
  font-weight: bold;
  font-size: 16px;
  line-height: 48px;
}
#topology-legend .topology-legend-container {
  position: relative;
  padding-left: 120px;
  line-height: 30px;
  margin-bottom: 12px;
}
#topology-legend .title {
  position: absolute;
  left: 0;
  font-size: 14px;
}
#topology-legend .legend-item {
  width: 144px;
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  display: inline-block;
  position: relative;
}
#topology-legend .legend-item:before {
  margin-right: 4px;
  content: " ";
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
#topology-legend .legend-item.internet:before {
  background-image: url(../img/topology/Internet.png);
  background-size: cover;
}
#topology-legend .legend-item.router:before {
  margin-bottom: 8px;
  background: url(../img/svg/Gateway.svg);
}
#topology-legend .legend-item.switch:before {
  margin-bottom: 8px;
  background: url(../img/svg/Switch.svg);
}
#topology-legend .legend-item.eap:before {
  background: url(../img/svg/AP.svg);
}
#topology-legend .legend-item.controller:before {
  background: url(../img/svg/CloudController.svg);
}
#topology-legend .legend-item.wired-user:before {
  background: url(../img/svg/TopologyIconUsersWired.svg);
}
#topology-legend .legend-item.wireless-user:before {
  background: url(../img/svg/TopologyIconUsersWireless.svg);
}
#topology-legend .legend-item.wired-guest:before {
  background: url(../img/svg/TopologyIconGuestsWired.svg);
}
#topology-legend .legend-item.wireless-guest:before {
  background: url(../img/svg/TopologyIconGuestsWireless.svg);
}
#topology-legend .legend-item.mbps1000 {
  width: 260px;
}
#topology-legend .legend-item.mbps1000:before {
  width: 80px;
  height: 2px;
  border-bottom: 2px solid #40b54d;
}
#topology-legend .legend-item.mbps100 {
  width: 260px;
}
#topology-legend .legend-item.mbps100:before {
  width: 80px;
  height: 2px;
  border-bottom: 2px solid #f8a717;
}
#topology-legend .legend-item.gb25 {
  width: 260px;
}
#topology-legend .legend-item.gb25:before {
  width: 80px;
  height: 2px;
  border-bottom: 2px solid #00cfd9;
}
#topology-legend .legend-item.gb5 {
  width: 260px;
}
#topology-legend .legend-item.gb5:before {
  width: 80px;
  height: 2px;
  border-bottom: 2px solid #00C5FF;
}
#topology-legend .legend-item.gb10 {
  width: 260px;
}
#topology-legend .legend-item.gb10:before {
  width: 80px;
  height: 2px;
  border-bottom: 2px solid #0492EB;
}
#topology-legend .legend-item.wireless {
  width: 260px;
}
#topology-legend .legend-item.wireless:before {
  width: 80px;
  height: 2px;
  border-bottom: 2px dashed var(--tab-color-primary, #868E93);
}
#topology-legend .legend-item.wireless span.wireless {
  position: absolute;
  right: 165px;
  line-height: 12px;
  border: 1px solid #AAB0BA;
  font-size: 8px;
  top: 9px;
  background: #ffffff;
}

.map-view {
  position: relative;
}
.map-view .page-tool-container {
  position: absolute;
  top: -36px;
  right: 0;
  border-radius: 3px;
}
.map-view .page-tool-container #zoom-container {
  padding: 0 16px;
  background-color: var(--card-primary, #ffffff);
  font-size: 0;
}
.map-view .page-tool-container #zoom-container .zoom-button {
  vertical-align: middle;
}
.map-view .page-tool-container #zoom-container .zoom-button.widget-container {
  margin-bottom: 0;
}
.map-view .page-tool-container #zoom-container .zoom-button .button-button {
  height: 32px;
  line-height: 32px;
  padding: 0;
}
.map-view .page-tool-container #zoom-container .zoom-button .button-button .button-icon {
  margin-right: 0;
}
.map-view .page-tool-container #zoom-container .button-container {
  margin-bottom: 0;
}
.map-view .page-tool-container #zoom-container .plotting-scale {
  position: relative;
  height: 26px;
  vertical-align: top;
  margin-right: 20px;
  margin-left: 20px;
}
.map-view .page-tool-container #zoom-container .plotting-scale:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 20px;
  top: 6px;
  right: -10px;
  vertical-align: middle;
  background: #ced1d3;
  right: -10px;
}
.map-view .page-tool-container #zoom-container .plotting-scale:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 20px;
  top: 6px;
  right: -10px;
  vertical-align: middle;
  background: #ced1d3;
  left: -10px;
}
.map-view .page-tool-container #zoom-container .plotting-scale .button-button {
  background-color: transparent;
  border-bottom: 2px solid var(--s-color-side, #363e4d);
  border-radius: 0;
  width: 80px;
  height: 26px;
  color: var(--s-color-side, #363e4d);
  padding-left: 0;
  padding-right: 0;
  line-height: 26px;
}
.map-view .page-tool-container #zoom-container .plotting-scale .button-button .button-text {
  display: inline-block;
  line-height: 26px;
  font-size: 12px;
  vertical-align: top;
  width: 80px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.map-view .page-tool-container #zoom-container .plotting-scale .button-button:before {
  position: absolute;
  content: "";
  width: 2px;
  height: 5px;
  background-color: var(--s-color-side, #363e4d);
  bottom: 0;
  left: 0;
}
.map-view .page-tool-container #zoom-container .plotting-scale .button-button:after {
  position: absolute;
  content: "";
  width: 2px;
  height: 5px;
  background-color: var(--s-color-side, #363e4d);
  bottom: 0;
  right: 0;
}
.map-view .page-tool-container #zoom-container .separator {
  display: inline-block;
  width: 1px;
  height: 20px;
  margin: 0 10px;
  vertical-align: middle;
  background: #ced1d3;
}
.map-view .map-wrapper {
  position: relative;
  min-width: 680px;
}
.map-view .map-wrapper .map-content {
  position: relative;
}
.map-view .map-wrapper .map-content .switch-map {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-bottom: 0;
}
.map-view .map-wrapper .map-content .switch-map .button-button {
  padding-left: 0;
  padding-right: 0;
}
.map-view .map-wrapper .map-content #previous-map-btn {
  left: -24px;
}
.map-view .map-wrapper .map-content #next-map-btn {
  right: -24px;
}
.map-view .map-wrapper .point-power-wrapper {
  flex-grow: 1;
}
.map-view .map-wrapper .point-power {
  vertical-align: middle;
  margin-bottom: 0;
  height: 28px;
  background: #355085;
  box-shadow: 0px 0px 4px 0px rgba(54, 62, 77, 0.14);
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 14px;
  padding: 0 8.5px;
}
.map-view .map-wrapper .point-power .widget-fieldlabel-wrap {
  width: auto;
  vertical-align: middle;
}
.map-view .map-wrapper .point-power .widget-wrap.text-wrap {
  display: flex;
  align-items: center;
}
.map-view .map-wrapper .map-menu {
  border-bottom: 1px solid #999999;
}
.map-view .map-wrapper .map-menu .fieldset-content {
  font-size: 0px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}
.map-view .map-wrapper .map-menu .fieldset-content .widget-container {
  margin-bottom: 0;
}
.map-view .map-wrapper .map-menu .fieldset-content .menu-left {
  margin-top: -10px;
}
.map-view .map-wrapper .map-menu .fieldset-content .menu-left > .widget-container {
  margin-top: 10px;
}
.map-view .map-wrapper .map-menu .fieldset-content .menu-left #conf-Map .button-button,
.map-view .map-wrapper .map-menu .fieldset-content .menu-left #create-map-btn .button-button {
  padding: 0;
}
.map-view .map-wrapper .map-menu .fieldset-content .menu-left #conf-map {
  margin-left: 10px;
}
.map-view .map-wrapper .map-menu .fieldset-content .menu-left #create-map-btn .btn-add-circle {
  display: block;
}
.map-view .map-wrapper .map-menu .fieldset-content .menu-left .separator {
  margin-top: 10px;
}
.map-view .map-wrapper .map-menu .fieldset-content .menu-right {
  white-space: nowrap;
}
.map-view .map-wrapper .map-menu .fieldset-content .menu-icon .button-button {
  padding: 0;
  height: 24px;
  line-height: 24px;
}
.map-view .map-wrapper .map-menu .fieldset-content .menu-icon .button-button .button-icon {
  margin-right: 0px;
}
.map-view .map-wrapper .map-menu .fieldset-content .transparency {
  font-size: 14px;
  min-width: 269px;
}
.map-view .map-wrapper .map-menu .fieldset-content .transparency .slider-wrap-outer .display-value-container {
  margin-left: 8px;
}
.map-view .map-wrapper .map-menu .fieldset-content .transparency .slider-wrap-outer .slider-content {
  height: 6px;
  border-radius: 3px;
}
.map-view .map-wrapper .map-menu .fieldset-content .transparency .slider-wrap-outer .slider-content .widget-value.slider-value {
  height: 6px;
  border-radius: 3px;
}
.map-view .map-wrapper .map-menu .fieldset-content .transparency .slider-wrap-outer .slider-content .slider-value-outer {
  width: 16px;
  height: 16px;
  border-radius: 8px;
}
.map-view .map-wrapper .map-menu .fieldset-content .icon-size .combobox-wrap.widget-wrap {
  width: 140px;
}
.map-view .map-wrapper .map-menu .fieldset-content #finish-edit {
  vertical-align: middle;
}
.map-view .map-wrapper .map-menu .fieldset-content .separator {
  display: inline-block;
  width: 1px;
  height: 20px;
  margin: 0 10px;
  vertical-align: middle;
  background: #ebeced;
}
.map-view .map-wrapper .map-menu .fieldset-content #edit-map .button-button {
  padding-left: 16px;
}
.map-view .map-wrapper .map-menu .fieldset-content #edit-map .button-button-before {
  width: 24px;
  height: 28px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 7px;
  background: url("../img/svg/EditWhite.svg") no-repeat;
}
.map-view .map-wrapper .map-btn-container {
  display: flex;
}
.map-view .map-wrapper .emulate-menu {
  font-size: 0;
  z-index: 1;
}
.map-view .map-wrapper .emulate-menu .display-switch {
  margin-bottom: 0;
  font-size: 13px;
  vertical-align: middle;
}
.map-view .map-wrapper .emulate-menu .map-band {
  vertical-align: middle;
  margin: 0px 32px 0px 30px;
}
.map-view .map-wrapper .emulate-menu .button-container {
  margin-bottom: 0;
  vertical-align: middle;
}
.map-view .map-wrapper .emulate-menu .button-container .button-button {
  padding: 0;
  height: 24px;
  line-height: 24px;
}
.map-view .map-wrapper #converage-btn .button-button {
  width: 28px;
  height: 28px;
  line-height: 28px;
  box-shadow: 0px 0px 4px 0px;
}
.map-view .map-wrapper #converage-btn .button-icon {
  margin-right: 0;
}
.map-view .map-wrapper #map-canvas {
  width: 100%;
  height: calc(100vh - 290px);
  overflow: hidden;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}
.map-view .emulate-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.map-view #min-dbm-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  z-index: 1;
}
.map-view #min-dbm-container .min-dbm {
  margin-bottom: 0px;
}
.map-view #min-dbm-container .slider-content {
  height: 8px;
  border-radius: 15.5px;
}
.map-view #min-dbm-container .slider-content .slider-value {
  height: 8px;
  border-radius: 15.5px;
  background: linear-gradient(to right, #ea1c1c 0px, #ffd13a 90px, #24e054 180px, #22b1f6 270px, #945aec 360px);
}
.map-view #min-dbm-container .slider-content .slider-value-outer {
  width: 20px;
  height: 20px;
  background: #23b2f7;
  border: 2px solid #ffffff;
  border-radius: 10px;
  box-shadow: 0px 0px 4px 0px rgba(54, 69, 91, 0.16);
}
.map-view #min-dbm-container .slider-wrap-outer {
  margin-right: 0;
}
.map-view #min-dbm-container .min-Strength-info {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 360px;
  text-align: center;
}
.map-view #min-dbm-container .min-Strength-info .display-label {
  line-height: 28px;
  font-size: 12px;
  color: var(--tab-color-primary, #868E93);
}
.map-view #min-dbm-container .min-Strength-info .left {
  float: left;
}
.map-view #min-dbm-container .min-Strength-info .receiver-sensitivity {
  margin-bottom: 0px;
}
.map-view #min-dbm-container .min-Strength-info .receiver-sensitivity .text-fieldlabel {
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
}
.map-view #min-dbm-container .min-Strength-info .receiver-sensitivity .widget-fieldlabel-wrap {
  width: auto;
}
.map-view #min-dbm-container .min-Strength-info .receiver-sensitivity .text-wrap-outer {
  line-height: 26.5px;
}
.map-view #min-dbm-container .min-Strength-info .receiver-sensitivity .text-wrap-display {
  font-size: 14px;
  color: var(--s-color-side, #363e4d);
}
.map-view #min-dbm-container .min-Strength-info .right {
  float: right;
}
.map-view #walls-list .grid-content-btn {
  margin: 3px;
}
.map-view #walls-list .grid-content-td-action-column .td-content {
  padding: 0;
}

.min-dbm-confirm-msg .paragraph-wrap-outer {
  width: 100%;
}

.emulate-progress-msg {
  background-color: transparent;
  box-shadow: none;
}
.emulate-progress-msg .msg-content-container {
  text-align: center;
}
.emulate-progress-msg .emulate-progress-tip {
  margin-bottom: 20px;
}
.emulate-progress-msg .progressbar-container .progressbar-content {
  width: 500px;
}

.msg-container.msg_add_map .msg-content-container {
  text-align: right;
}

.msg-container.msg_add_map .fieldset-container {
  padding: 15px;
}

#add-map {
  font-size: 0;
  margin-bottom: 8px;
}
#add-map:hover .text {
  opacity: 0.6;
}
#add-map .text {
  font-size: 14px;
  margin-left: 6px;
}

#add-map-create,
#add-map-cancel {
  margin-top: 12px;
}

#maps-grid {
  margin-top: -10px;
}
#maps-grid .paging-go {
  display: none;
}
#maps-grid .content-edit .text-container {
  display: inline-block;
}
#maps-grid .content-edit > a {
  display: inline-block;
  text-indent: -999px;
  vertical-align: middle;
}
#maps-grid .content-edit .content-edit-save {
  margin-left: 25px;
  cursor: pointer;
}
#maps-grid .content-edit .content-edit-cancel {
  margin-left: 10px;
  cursor: pointer;
}
#maps-grid .text-wrap {
  width: 192px;
}

#aps-grid .virtual-device .icon {
  position: relative;
}
#aps-grid .virtual-device .icon:after {
  position: absolute;
  left: 30px;
  top: 25px;
  display: inline-block;
  width: 8px;
  height: 8px;
  vertical-align: middle;
  content: "";
  border-radius: 100%;
  background: #ff9500;
}

#map-file {
  margin-bottom: 0px;
}
#map-file .text-wrap {
  margin-bottom: 0px;
}
#map-file .file-button-container {
  vertical-align: top;
}

#map-file .file-container .text-wrap.widget-wrap {
  margin-bottom: 12px;
}

#edit-map-msg .msg-wrap {
  width: 670px;
}
#edit-map-msg .msg-wrap .edit-map-note {
  padding: 16px 10px 16px 56px;
  display: inline-block;
  width: auto;
}
#edit-map-msg .msg-wrap .edit-map-note .note__p {
  line-height: 16px;
}

#set-settings-msg .divice-infos li.checkbox-list {
  display: block;
}

#aps-msg .msg-wrap {
  width: 960px;
}

.map-drawer {
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 20px 20px;
  height: 100%;
  width: 370px;
  background: var(--s-background-main, #F2F3F5);
  box-shadow: 0 0 8px var(--components-box-shadow, #909090);
}
.map-drawer .map-drawer-title {
  position: relative;
  line-height: 50px;
  font-size: 16px;
  color: var(--s-color-text-primary, #212121);
  font-weight: bold;
}
.map-drawer .map-drawer-title .opt-btn {
  position: absolute;
  top: 0;
  right: 0;
}
.map-drawer .left-draw-collapse .icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/PaginationLeft.svg) no-repeat;
}
.map-drawer .grid-panel-content-container {
  margin-bottom: 6px;
}
.map-drawer .grid-table {
  border-spacing: 0px 10px;
  border-collapse: separate;
  background: var(--s-background-main, #F2F3F5);
  border-top: 0px;
  border-bottom: 0px;
}
.map-drawer .grid-table .grid-header-tr {
  display: none;
}
.map-drawer .grid-table .grid-content-tr {
  background: var(--map-drawer-color-primary);
  border: 0.1px solid #49546b;
  border-radius: 4px;
}
.map-drawer .grid-table .grid-content-td.fst {
  border-radius: 4px 0px 0px 4px;
}
.map-drawer .grid-table .grid-content-td.lst {
  border-radius: 0px 4px 4px 0px;
}
.map-drawer .paging-info-container,
.map-drawer .paging-options,
.map-drawer .paging-go,
.map-drawer .grid-panel-selected-container {
  display: none;
}
.map-drawer .paging-wrap {
  text-align: center;
}

#walls-list_paging {
  width: 100%;
}

.add-wall-drawer .grid-content-tr {
  cursor: pointer;
}
.add-wall-drawer .color-display {
  cursor: pointer;
  vertical-align: middle;
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #aeb4b7;
}
.add-wall-drawer .grid-content-tr {
  box-sizing: border-box;
}
.add-wall-drawer .grid-content-tr .grid-content-td-check-column {
  display: none;
}
.add-wall-drawer .grid-content-tr .grid-content-td-name {
  font-size: 15px;
  color: var(--s-color-side, #363e4d);
  letter-spacing: 0;
  font-weight: bold;
}
.add-wall-drawer .grid-content-tr .grid-content-td-name .td-content {
  padding: 0;
}
.add-wall-drawer .grid-content-tr .grid-content-td-decay {
  font-size: 14px;
  color: #aeb4b7;
  letter-spacing: 0;
}
.add-wall-drawer .grid-content-tr .grid-content-td-action .content {
  display: none;
  height: 100%;
}
.add-wall-drawer .grid-content-tr:hover {
  background: var(--select-background-hover);
  border: 1px solid #04b0ff;
  border-radius: 4px;
}
.add-wall-drawer .grid-content-tr:hover .grid-content-td-action .content {
  display: block;
}
.add-wall-drawer .add-new-wall-btn {
  text-align: center;
}
.add-wall-drawer .grid-content-td {
  padding: 0;
}
.add-wall-drawer .grid-content-td .td-content {
  padding: 0px 8px;
  height: 46px;
  line-height: 44px;
  box-sizing: border-box;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.add-wall-drawer .grid-content-td.fst .td-content {
  border-left: 1px solid transparent;
  border-radius: 4px 0 0 4px;
}
.add-wall-drawer .grid-content-td.lst .td-content {
  border-right: 1px solid transparent;
  border-radius: 0 4px 4px 0;
}
.add-wall-drawer .grid-content-tr:hover .grid-content-td .td-content {
  background-color: var(--select-background-hover-map);
}
.add-wall-drawer .grid-content-tr.selected .grid-content-td .td-content {
  background-color: var(--select-background-hover-map);
  border-color: #04b0ff;
}
.add-wall-drawer .grid-content-td-action-column .td-content {
  display: none;
}
.add-wall-drawer .grid-content-tr:hover .grid-content-td-action-column .td-content,
.add-wall-drawer .grid-content-tr.selected .grid-content-td-action-column .td-content {
  display: block;
}
.add-wall-drawer .add-new-wall-btn .widget-wrap-outer {
  width: 100%;
}
.add-wall-drawer .add-new-wall-btn .widget-wrap-outer .widget-wrap {
  width: 100%;
}
.add-wall-drawer .add-new-wall-btn .widget-wrap-outer .widget-wrap .button-button {
  width: 100%;
}

#adopted-devices-search {
  margin-bottom: 6px;
}

.add-eap-drawer .grid-content-tr {
  cursor: move;
}
.add-eap-drawer .grid-content-tr.empty {
  cursor: auto;
}
.add-eap-drawer .devicesList-item-container {
  position: relative;
  margin-bottom: 10px;
  padding: 5px 0;
  background-color: #ffffff;
}
.add-eap-drawer .devicesList-item {
  padding: 0 5px;
}
.add-eap-drawer .eap-list .grid-content-td {
  padding: 10px 12px;
}
.add-eap-drawer .adopted-eap-list .grid-content-td[name=info] {
  padding-left: 0;
}
.add-eap-drawer .adopted-eap-list .grid-content-td[name=info] .content {
  position: relative;
  height: 40px;
}
.add-eap-drawer .adopted-eap-list .grid-content-td[name=info] .device-name {
  position: absolute;
  top: 0;
  line-height: 21px;
  font-size: 16px;
  color: var(--s-color-side, #363e4d);
  letter-spacing: 0;
  font-weight: bold;
}
.add-eap-drawer .adopted-eap-list .grid-content-td[name=info] .device-model {
  position: absolute;
  bottom: 0;
  line-height: 16px;
  font-size: 13px;
  color: #aeb4b7;
  letter-spacing: 0;
}
.add-eap-drawer .virtual-eap-list .devicesList-item-model a {
  font-size: 15px;
}
.add-eap-drawer .virtual-eap-list .device-model {
  line-height: 21px;
  font-size: 16px;
  color: var(--s-color-side, #363e4d);
  letter-spacing: 0;
  font-weight: bold;
}

#map-eap-config-view .widget-fieldlabel-wrap {
  line-height: 28px;
}
#map-eap-config-view div[widget=panel] .panel-header {
  border-bottom: 1px solid #c9c9c9;
}
#map-eap-config-view .displaylabel-container {
  width: 47%;
  display: inline-block;
  vertical-align: top;
  margin-right: 5px;
}
#map-eap-config-view .angle-input {
  display: inline-block;
  width: 47%;
  vertical-align: bottom;
}
#map-eap-config-view .angle-input .widget-fieldlabel-wrap {
  width: 47%;
}
#map-eap-config-view .angle-input .widget-wrap {
  width: 80%;
}
#map-eap-config-view .angle-container {
  position: relative;
  display: inline-block;
  margin-top: 10px;
}
#map-eap-config-view .angle-container .arrow-img {
  width: 60px;
  height: 60px;
  margin-bottom: 0px;
}
#map-eap-config-view .angle-container .angle-img {
  position: absolute;
  top: 13px;
  left: 13px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--components-border-primary, #BEC3C5);
  border-radius: 6px;
}
#map-eap-config-view .angle-container .angle-img::after {
  content: "";
  position: absolute;
  top: -12px;
  left: 15px;
  width: 1px;
  height: 30px;
  border-left: 1px dotted var(--components-border-primary, #BEC3C5);
}
#map-eap-config-view .arrow-note {
  margin-top: 12px;
  width: auto;
}
#map-eap-config-view .arrow-note::before {
  top: 0;
  bottom: 0;
  margin: auto;
}

.drawer-title-container .virtual-eap-status.status-wrap {
  color: #ff9500;
}
.drawer-title-container .virtual-eap-status.status-wrap .device-status {
  border-color: #ff9500;
}

#set-settings-msg #settings-tab {
  margin-bottom: 30px;
}
#set-settings-msg .settings-content {
  margin-bottom: 0;
}
#set-settings-msg .msg-content-container {
  padding-bottom: 18px;
}
#set-settings-msg .tab-container.tab_menu_top {
  visibility: visible;
}

#add-eap-tab {
  margin-bottom: 8px;
}
#add-eap-tab .tab-btns {
  width: 100%;
}
#add-eap-tab .tab-btns .tab-btn {
  width: 50%;
}

#adopted-devices-search .search-wrap-outer {
  width: 100%;
}
#adopted-devices-search .search-wrap-outer .search-wrap {
  width: 100%;
  max-width: 100%;
}

.all-line-button .button-wrap-outer {
  width: 100%;
}
.all-line-button .button-wrap-outer .button-wrap {
  width: 100%;
}
.all-line-button .button-wrap-outer .button-wrap .button-button {
  width: 100%;
}

#config-maps-msg .msg-wrap {
  width: 750px;
}
#config-maps-msg .msg-content-container {
  max-height: 500px;
}

#edit-wall-msg .colorpicker-container .color-display {
  margin-right: 10px;
}
#edit-wall-msg .colorpicker-container .colorpicker-hex-container {
  width: 120px;
}

#adopted-devices-search li.search-list .icon {
  margin-right: 8px;
  width: 18px;
  height: 18px;
  background: var(--select-icon-tag, url(../img/svg/TagIconTag.svg)) no-repeat;
}

#coverage-shape-msg .radio-group-wrap {
  display: flex;
}
#coverage-shape-msg .radio-group-wrap .radio-group-list-wrap:nth-child(2) {
  margin-left: 100px;
}

#coverage-result-msg .coverage-inner-msg {
  display: flex;
  justify-content: left;
  font-size: 16px;
}
#coverage-result-msg .coverage-inner-msg .coverage-wrapper {
  margin-left: 10px;
}
#coverage-result-msg .coverage-inner-msg .coverage-wrapper .widget-wrap-outer.text-wrap-outer {
  margin-top: -5px;
}
#coverage-result-msg .coverage-inner-msg .coverage-wrapper #coverage-img {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 300px;
  height: 300px;
}
#coverage-result-msg .coverage-inner-msg .coverage-wrapper .coverage-area-display .widget-fieldlabel-wrap {
  transform: translateY(0);
  top: 0;
}
#coverage-result-msg .coverage-inner-msg .signal-strength-wrapper {
  margin-left: 80px;
}
#coverage-result-msg .coverage-inner-msg .signal-strength-wrapper .paragraph-wrap-outer {
  height: 28px;
  line-height: 28px;
}
#coverage-result-msg .coverage-inner-msg .signal-strength-wrapper .signal-line {
  display: flex;
}
#coverage-result-msg .coverage-inner-msg .signal-strength-wrapper .signal-line .signal-line-step {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#coverage-result-msg .coverage-inner-msg .signal-strength-wrapper .signal-line .signal-line-step .step-num {
  position: relative;
  display: inline-block;
  margin-left: 60px;
  margin-bottom: 0;
}
#coverage-result-msg .coverage-inner-msg .signal-strength-wrapper .signal-line .signal-line-step .step-num .widget-fieldlabel-wrap {
  margin-top: 1px;
}
#coverage-result-msg .coverage-inner-msg .signal-strength-wrapper .signal-line .signal-line-step .step-num::before {
  content: "";
  position: absolute;
  top: 14px;
  left: -43px;
  width: 24px;
  height: 1px;
  background: var(--tab-color-primary, #868E93);
}
#coverage-result-msg .coverage-inner-msg .signal-strength-wrapper .signal-line .signal-line-step .step-num::after {
  content: "";
  position: absolute;
  top: 12px;
  left: -21px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tab-color-primary, #868E93);
}

.finish-crop-msg {
  position: fixed;
  top: 30px !important;
  width: 530px;
}
.finish-crop-msg .finish-coverage {
  margin-left: 60px;
}
.finish-crop-msg .finish-coverage:before {
  position: absolute;
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  left: 20px;
  top: 12px;
  background: url(../img/svg/MessageIconWarning.svg) no-repeat;
}
.finish-crop-msg .msg-content-container {
  display: flex;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 0;
  padding-right: 0;
}
.finish-crop-msg .msg-content-container .widget-container {
  margin-bottom: 0;
}
.finish-crop-msg .msg-content-container .start-calculate {
  margin-left: 60px;
}

.signal-strength {
  width: 14px;
  height: 300px;
  background-image: linear-gradient(180deg, #EA1C1C 0%, #FFD13A 25%, #24E054 50%, #22B1F6 75%, #945AEC 100%);
  border-radius: 7px;
}

.import-cad-msg {
  z-index: 3;
  top: 56px;
  left: 56px;
}
.import-cad-msg .msg-wrap {
  height: calc(100vh - 56px);
  width: calc(100vw - 56px);
  background: var(--s-background-main);
}
.import-cad-msg .msg-content-wrap,
.import-cad-msg .msg-content-container {
  overflow-y: auto;
  height: inherit;
  padding: 0;
  max-height: auto;
}
.import-cad-msg .widget-content.msg-content-container {
  padding: 0 30px;
}
.import-cad-msg .menu-icon {
  margin-bottom: 0;
}
.import-cad-msg .menu-icon .button-button {
  padding: 0;
  height: 24px;
  line-height: 24px;
}
.import-cad-msg .menu-icon .button-button .button-icon {
  margin-right: 0px;
}
.import-cad-msg .import-cad-steps .step-count {
  margin-bottom: 0;
  display: inline-block;
  width: 100%;
  height: 61px;
  line-height: 61px;
}
.import-cad-msg .import-cad-steps .step-list {
  text-align: center;
}
.import-cad-msg .import-cad-content {
  background: #FFFFFF;
  height: calc(100vh - 177px);
  margin-top: 61px;
}
.import-cad-msg .import-cad-content .panel-header {
  display: none;
}
.import-cad-msg .import-cad-content .panel-content {
  padding: 0;
}
.import-cad-msg .import-cad-content .fieldset-content {
  font-size: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.import-cad-msg .import-cad-content .buttons-left .button-container,
.import-cad-msg .import-cad-content .buttons-right .button-container {
  vertical-align: middle;
}
.import-cad-msg .zoom-container {
  position: absolute;
  top: 15px;
  right: 30px;
  padding: 0 16px;
  background-color: var(--card-primary, #ffffff);
  font-size: 0;
}
.import-cad-msg .zoom-container .zoom-button {
  vertical-align: middle;
}
.import-cad-msg .zoom-container .zoom-button.widget-container {
  margin-bottom: 0;
}
.import-cad-msg .zoom-container .zoom-button .button-button {
  height: 32px;
  line-height: 32px;
  padding: 0;
}
.import-cad-msg .zoom-container .zoom-button .button-button .button-icon {
  margin-right: 0;
}
.import-cad-msg .zoom-container .quit-button {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  vertical-align: middle;
  font-size: 14px;
  color: #0492EB;
}
.import-cad-msg .zoom-container a {
  cursor: pointer;
}
.import-cad-msg .separator {
  display: inline-block;
  width: 1px;
  height: 20px;
  margin: 0 10px;
  vertical-align: middle;
  background: #ced1d3;
}
.import-cad-msg .panel-wrap {
  height: 100%;
  overflow: hidden;
}
.import-cad-msg .svg-container-outer {
  overflow: hidden;
}

.progress-msg .msg-content-container {
  text-align: center;
}
.progress-msg .progress-tip {
  margin-bottom: 20px;
}
.progress-msg .progressbar-container .progressbar-content {
  width: 500px;
}

.import-wall-msg {
  height: calc(100% - 57px);
  z-index: 3;
  bottom: 0;
  top: auto !important;
  right: unset !important;
  left: 56px !important;
}
.import-wall-msg .msg-wrap {
  width: 570px;
}
.import-wall-msg .msg-close {
  width: 24px;
  height: 24px;
  background: var(--pagination-icon-left-normal, url(../img/svg/PaginationLeft.svg)) no-repeat;
}
.import-wall-msg .msg-title {
  height: 58px;
  line-height: 58px;
  color: var(--svg-fill-table, #363E4D);
  padding-left: 20px;
}
.import-wall-msg .msg-content-container {
  padding: 10px 20px;
}
.import-wall-msg .msg-btn-container {
  padding: 0 20px;
}
.import-wall-msg .widget-container .widget-fieldlabel-wrap,
.import-wall-msg .send-email-text {
  color: var(--s-color-text-tertiary, #5E696F);
}
.import-wall-msg .textarea-container .text-wrap-outer,
.import-wall-msg .textarea-container .widget-wrap,
.import-wall-msg .textarea-container .text-wrap {
  width: 100%;
  display: inline-block;
  max-width: unset;
}

.eye {
  display: inline-block;
  vertical-align: bottom;
  width: 16px;
  height: 16px;
  background: url(../img/svg/InputIconVisible.svg) no-repeat;
}

.grid-panel .eye {
  width: 20px;
  height: 20px;
  background: url(../img/svg/EyeClosed.svg) no-repeat;
  cursor: pointer;
}
.grid-panel .eye.selected {
  background: url(../img/svg/InputIconVisible.svg) no-repeat;
}
.grid-panel .eye:hover {
  opacity: 0.6;
}

#wall-type-combo .combobox-list .icon {
  display: inline-block;
  width: 10px;
  height: 10px;
}

.check-outer {
  vertical-align: middle;
  display: inline-block;
  position: relative;
  background-color: #fff;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #AEB4B7;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.check-outer .check-inner {
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  background-color: #0492EB;
  border-radius: 8px;
  -webkit-transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  opacity: 0;
}

.selected .check-outer {
  border: 1px solid #0492EB;
}
.selected .check-outer .check-inner {
  opacity: 1;
}

.color-icon {
  vertical-align: middle;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  border: 1px solid white;
  outline: 1px solid grey;
}

#import-wall-msg .grid-content-td,
#choose-wall-msg .grid-content-td,
#add-wall-msg .grid-content-td {
  padding-top: 10px;
  padding-bottom: 10px;
}

#choose-wall-msg .msg-wrap {
  width: 950px;
}
#choose-wall-msg .grid-header .checkbox-group-container {
  display: none;
}
#choose-wall-msg .paging-options {
  display: none;
}

.choose-add-btn-wrapper {
  text-align: right;
}

#import-wall-grid .grid-content-tr .btn-edit {
  display: none;
}
#import-wall-grid .grid-content-tr.selected .btn-edit {
  display: inline-block;
}
#import-wall-grid .grid-content-tr.disabled .layer {
  opacity: 0.5;
}
#import-wall-grid .grid-panel-selected-container {
  display: none;
}
#import-wall-grid .paging-container .paging-info-container,
#import-wall-grid .paging-container .paging-go {
  display: none;
}
#import-wall-grid #import-wall-grid_paging {
  width: 100%;
  text-align: center;
}
#import-wall-grid .grid-header .checkbox-group-container {
  display: none;
}

.top-toast-msg {
  position: fixed;
  top: 30px !important;
}
.top-toast-msg .widget-content.msg-content-container {
  padding: 20px;
}
.top-toast-msg .widget-content.msg-content-container .paragraph-container {
  margin-bottom: 0;
  line-height: 20px;
  height: 20px;
  margin-left: 40px;
}
.top-toast-msg:before {
  position: absolute;
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  left: 20px;
  top: 18px;
  background: url(../img/svg/MessageIconWarning.svg) no-repeat;
}

.mapbox-token-btn {
  display: none;
  position: absolute;
  top: 15px;
  right: 30px;
}
.mapbox-token-btn.map-gl.visible {
  display: block;
}

.map-su .ant-notification-notice.map-edit,
.map-su .ant-notification-notice.map-instr {
  display: none;
}

.map-vue #index-view {
  background-color: var(--s-background-main);
}

.fake-button-in-help {
  padding: 0 8px;
  height: 30px;
  line-height: 28px;
  border: 1px solid #0492EB;
  color: #0492EB;
  background: var(--s-background-panel, #FFFFFF);
  display: inline-block;
  text-align: center;
  border-radius: 3px;
  font-weight: bold;
  font-size: 12px;
}
.fake-button-in-help.add:before {
  content: "";
  width: 24px;
  height: 24px;
  background: url(../img/svg/ButtonIconAdd.svg) no-repeat;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
  margin-top: -2px;
}
.fake-button-in-help.other-add {
  border: none;
  height: auto;
  line-height: 20px;
}
.fake-button-in-help.other-add .no-icon-text {
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}
.fake-button-in-help.other-add:before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../img/svg/OthersIconAdd.svg) no-repeat;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}
.fake-button-in-help.normal-add {
  color: var(--s-color-text-primary, #212121);
  border: none;
  height: auto;
  line-height: 20px;
}
.fake-button-in-help.normal-add .no-icon-text {
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}
.fake-button-in-help.normal-add:before {
  content: "";
  width: 20px;
  height: 20px;
  background: var(--icon-select-add, url(../img/svg/ButtonIconAdd.svg)) no-repeat;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}
.fake-button-in-help.file {
  border: none;
  height: auto;
  line-height: 16px;
}
.fake-button-in-help.file .no-icon-text {
  height: 16px;
  display: inline-block;
  vertical-align: middle;
}
.fake-button-in-help.file:before {
  content: "";
  width: 16px;
  height: 16px;
  background: url(../img/File.png) no-repeat;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}
.fake-button-in-help.export {
  border: none;
  height: auto;
  line-height: 20px;
  background: #0492EB;
  color: #FFFFFF;
}
.fake-button-in-help.export .no-icon-text {
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}
.fake-button-in-help.export:before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../img/svg/TableIconExportWhite.svg) no-repeat;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}
.fake-button-in-help.import {
  border: none;
  height: auto;
  line-height: 20px;
}
.fake-button-in-help.import .no-icon-text {
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}
.fake-button-in-help.import:before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../img/svg/TableIconImport.svg) no-repeat;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}
.fake-button-in-help.primary {
  color: #ffffff;
  background: #0492EB;
}

.vpn-topology {
  width: 540px;
  height: 927px;
  background: url(../img/help/VPNConfigurationGuideline.png) no-repeat;
  background-size: 100% 100%;
}

#vpn-guideline-msg .msg-content-container {
  max-height: 600px;
}

#help-center .msg-title {
  background: var(--select-background-hover-map, #EBF7FE);
  color: #0492EB;
}
#help-center .circle-indent {
  position: absolute;
  display: inline-block;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  margin-top: 5px;
  background: var(--s-color-text-primary, #212121);
}
#help-center .square-indent {
  position: absolute;
  display: inline-block;
  height: 8px;
  width: 8px;
  margin-top: 5px;
  background: var(--s-color-text-primary, #212121);
}
#help-center .msg-content-container {
  max-height: 600px;
  padding: 20px;
}
#help-center .msg-wrap {
  width: 580px;
}
#help-center .msg-wrap .accordion-container.accordion .accordion-item-wrap {
  background: var(--msg-background-content, #ffffff);
  padding: 10px 0;
}
#help-center .msg-wrap .accordion-container.accordion .accordion-header .accordion-title {
  color: var(--s-color-text-primary, #212121);
}
#help-center .msg-wrap .accordion-container.accordion .accordion-item.collapsed .accordion-header:after {
  display: block;
}
#help-center .msg-wrap div.help-step .help-step-item {
  position: relative;
  padding-left: 32px;
  line-height: 24px;
  margin-bottom: 12px;
}
#help-center .msg-wrap div.help-step .help-step-item .help-index {
  position: absolute;
  display: inline-block;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #0492EB;
  color: #ffffff;
  text-align: center;
  line-height: 18px;
  left: 0;
  top: 3px;
  z-index: 2;
}
#help-center .msg-wrap div.help-step .help-step-item div[widget=paragraph] {
  margin-bottom: 0;
}
#help-center .msg-wrap div.help-step .help-step-item:after {
  display: inline-block;
  content: "";
  border-left: 1px solid #0492EB;
  height: 100%;
  position: absolute;
  left: 9px;
  top: 18px;
  z-index: 1;
}
#help-center .msg-wrap div.help-step .help-step-item:last-child:after {
  content: none;
}
#help-center .msg-wrap div[widget=paragraph].bold {
  font-weight: bold;
}
#help-center .msg-wrap div[widget=paragraph] .paragraph-wrap-outer {
  font-size: 14px;
  line-height: 18px;
}
#help-center .msg-wrap div[widget=paragraph] .paragraph-wrap-outer span {
  font-weight: bold;
}
#help-center .msg-wrap div[widget=paragraph].paragraph-help .widget-fieldlabel-wrap {
  font-size: 15px;
  color: #FF9500;
  font-weight: bold;
  top: 0;
}
#help-center .msg-wrap div[widget=paragraph].paragraph-help .paragraph-wrap-outer {
  padding: 12px;
}
#help-center .msg-wrap div[widget=paragraph].paragraph-help .paragraph-wrap-outer:before {
  display: none;
}
#help-center .msg-wrap div[widget=paragraph].index-1 {
  position: relative;
}
#help-center .msg-wrap div[widget=paragraph].index-1:before {
  position: absolute;
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--s-color-text-primary, #212121);
  border-radius: 50%;
  top: 4px;
  left: -12px;
}
#help-center .msg-wrap label {
  display: inline-block;
  vertical-align: bottom;
  margin: 0 4px;
}
#help-center .msg-wrap .primary-btn {
  display: inline-block;
  color: #ffffff;
  background: #0492EB;
  padding-left: 20px;
  padding-right: 20px;
  height: 32px;
  text-align: center;
  line-height: 30px;
  border-radius: 3px;
  font-size: 15px;
  font-weight: bold;
}
#help-center .msg-wrap .creat-new-route-img {
  width: 198px;
  height: 35px;
  background: url(../img/help/createNewRoute.jpg);
}
#help-center .msg-wrap .creat-new-routing-img {
  width: 213px;
  height: 35px;
  background: url(../img/help/createNewRouting.jpg);
}
#help-center .msg-wrap .creat-new-rule-img {
  width: 187px;
  height: 35px;
  background: url(../img/help/createNewRule.jpg);
}
#help-center .msg-wrap .create-new-radius-img {
  width: 232px;
  height: 27px;
  background: url(../img/help/createNewRADIUSProfile.png);
}
#help-center .msg-wrap .create-time-range-img {
  width: 140px;
  height: 18px;
  background: url(../img/help/createTimeRange.png);
}
#help-center .msg-wrap .create-time-limit-img {
  width: 198px;
  height: 24px;
  background: url(../img/help/createNewRateLimitProfile.png);
}
#help-center .msg-wrap .create-ppsk-img {
  width: 125px;
  height: 18px;
  background: url(../img/help/createPPSK.png) no-repeat;
  background-size: cover;
}
#help-center .msg-wrap .create-group-img {
  width: 160px;
  height: 26px;
  background: url(../img/help/createNewGroup.png);
  background-size: cover;
}
#help-center .msg-wrap .create-new-network {
  width: 191px;
  height: 22px;
  background: url(../img/help/createNewWifi.png);
}
#help-center .msg-wrap .create-wlan-img {
  width: 118px;
  height: 15px;
  background: url(../img/help/createWlanGroup.png);
}
#help-center .msg-wrap .manage-radius-img {
  color: #0492EB;
  font-size: 15px;
  font-weight: bold;
}
#help-center .msg-wrap .switch-off-img {
  width: 31px;
  height: 17px;
  background: var(--icon-switch-off, url(../img/help/switch-off.svg));
}
#help-center .msg-wrap .checkbox-img {
  width: 20px;
  height: 21px;
  background: var(--icon-checkbox, url(../img/help/checkbox.png)) no-repeat;
}
#help-center .msg-wrap .checkbox-802-img {
  width: 20px;
  height: 22px;
  background: var(--icon-checkbox-802, url(../img/help/checkbox-802.png)) no-repeat;
}
#help-center .msg-wrap .ports-img {
  width: 440px;
  height: 78px;
  background: var(--icon-ports-png, url(../img/help/ports.png)) no-repeat;
  background-size: cover;
}
#help-center #portal-help-view #portal-help-tab .tab-btn {
  font-size: 12px;
  padding: 0 4px;
}
#help-center #portal-help-view #portal-help-tab .tab-btn.selected {
  font-weight: normal;
}
#help-center #portal-help-view .voucher-text, #help-center #portal-help-view .user-text {
  color: #0492EB;
  font-size: 14px;
  font-weight: bold;
}
#help-center #acl-help-view .switchBinding {
  width: 540px;
  height: 129px;
  background: url(../img/help/switchACLBinding.png) no-repeat;
  background-size: 100% 100%;
}
#help-center #vpn-help-view .inline, #help-center #wifi-help-view .inline, #help-center #wireless-help-view .inline, #help-center #site-help-view .inline {
  display: inline-block;
}
#help-center #vpn-help-view #link-to-vpn-guideline, #help-center #wifi-help-view #link-to-vpn-guideline, #help-center #wireless-help-view #link-to-vpn-guideline, #help-center #site-help-view #link-to-vpn-guideline {
  cursor: pointer;
  display: flex;
}
#help-center #vpn-help-view .linkMsg, #help-center #wifi-help-view .linkMsg, #help-center #wireless-help-view .linkMsg, #help-center #site-help-view .linkMsg {
  height: 24px;
  background: url(../img/help/photo.png) no-repeat;
  margin-left: 32px;
  display: inline-block;
  line-height: 24px;
}
#help-center #vpn-help-view .info-link, #help-center #wifi-help-view .info-link, #help-center #wireless-help-view .info-link, #help-center #site-help-view .info-link {
  color: #0492EB;
  display: inline-block;
  margin-left: 30px;
}
#help-center #vpn-help-view .table-vpn, #help-center #wifi-help-view .table-vpn, #help-center #wireless-help-view .table-vpn, #help-center #site-help-view .table-vpn {
  width: 540px;
  height: 94px;
  background: url(../img/help/vpn.png);
  background-size: 100% 100%;
}
#help-center #vpn-help-view .vpn-advance.collapsed .advance-icon, #help-center #wifi-help-view .vpn-advance.collapsed .advance-icon, #help-center #wireless-help-view .vpn-advance.collapsed .advance-icon, #help-center #site-help-view .vpn-advance.collapsed .advance-icon {
  background: var(--icon-collapse-add, url("../img/svg/CollapseIcon.svg"));
}
#help-center #vpn-help-view .vpn-advance.collapsed:hover .advance-icon, #help-center #wifi-help-view .vpn-advance.collapsed:hover .advance-icon, #help-center #wireless-help-view .vpn-advance.collapsed:hover .advance-icon, #help-center #site-help-view .vpn-advance.collapsed:hover .advance-icon {
  background: url(../img/svg/CollapseIconAndHover.svg);
}
#help-center #vpn-help-view .vpn-advance.collapsed:active .advance-icon, #help-center #wifi-help-view .vpn-advance.collapsed:active .advance-icon, #help-center #wireless-help-view .vpn-advance.collapsed:active .advance-icon, #help-center #site-help-view .vpn-advance.collapsed:active .advance-icon {
  background: url(../img/svg/CollapseIconAndActive.svg);
}
#help-center #vpn-help-view .vpn-advance, #help-center #wifi-help-view .vpn-advance, #help-center #wireless-help-view .vpn-advance, #help-center #site-help-view .vpn-advance {
  cursor: pointer;
}
#help-center #vpn-help-view .vpn-advance .advanced-setting-title, #help-center #wifi-help-view .vpn-advance .advanced-setting-title, #help-center #wireless-help-view .vpn-advance .advanced-setting-title, #help-center #site-help-view .vpn-advance .advanced-setting-title {
  display: inline-block;
  font-weight: bold;
}
#help-center #vpn-help-view .vpn-advance .advance-icon, #help-center #wifi-help-view .vpn-advance .advance-icon, #help-center #wireless-help-view .vpn-advance .advance-icon, #help-center #site-help-view .vpn-advance .advance-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: var(--icon-collapse-minus, url(../img/svg/CollapseIcon-.svg));
}
#help-center #vpn-help-view .vpn-advance:hover .advanced-setting-title, #help-center #wifi-help-view .vpn-advance:hover .advanced-setting-title, #help-center #wireless-help-view .vpn-advance:hover .advanced-setting-title, #help-center #site-help-view .vpn-advance:hover .advanced-setting-title {
  color: #0492EB;
}
#help-center #vpn-help-view .vpn-advance:hover .advance-icon, #help-center #wifi-help-view .vpn-advance:hover .advance-icon, #help-center #wireless-help-view .vpn-advance:hover .advance-icon, #help-center #site-help-view .vpn-advance:hover .advance-icon {
  background: url(../img/svg/CollapseIcon-Hover.svg);
}
#help-center #vpn-help-view .vpn-advance:active .advanced-setting-title, #help-center #wifi-help-view .vpn-advance:active .advanced-setting-title, #help-center #wireless-help-view .vpn-advance:active .advanced-setting-title, #help-center #site-help-view .vpn-advance:active .advanced-setting-title {
  color: #0492EB;
}
#help-center #vpn-help-view .vpn-advance:active .advance-icon, #help-center #wifi-help-view .vpn-advance:active .advance-icon, #help-center #wireless-help-view .vpn-advance:active .advance-icon, #help-center #site-help-view .vpn-advance:active .advance-icon {
  background: url(../img/svg/CollapseIcon-Active.svg);
}
#help-center #vpn-help-view .vpn-triangle, #help-center #wifi-help-view .vpn-triangle, #help-center #wireless-help-view .vpn-triangle, #help-center #site-help-view .vpn-triangle {
  cursor: pointer;
}
#help-center #vpn-help-view .vpn-triangle .vpn-client-triangle, #help-center #wifi-help-view .vpn-triangle .vpn-client-triangle, #help-center #wireless-help-view .vpn-triangle .vpn-client-triangle, #help-center #site-help-view .vpn-triangle .vpn-client-triangle {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid black;
  position: relative;
  display: inline-block;
}
#help-center #vpn-help-view .vpn-triangle .vpn-span, #help-center #wifi-help-view .vpn-triangle .vpn-span, #help-center #wireless-help-view .vpn-triangle .vpn-span, #help-center #site-help-view .vpn-triangle .vpn-span {
  color: black;
  display: inline-block;
  font-weight: bold;
}
#help-center #vpn-help-view .vpn-triangle:hover .vpn-span, #help-center #vpn-help-view .vpn-triangle:active .vpn-span, #help-center #wifi-help-view .vpn-triangle:hover .vpn-span, #help-center #wifi-help-view .vpn-triangle:active .vpn-span, #help-center #wireless-help-view .vpn-triangle:hover .vpn-span, #help-center #wireless-help-view .vpn-triangle:active .vpn-span, #help-center #site-help-view .vpn-triangle:hover .vpn-span, #help-center #site-help-view .vpn-triangle:active .vpn-span {
  color: #0492EB;
}
#help-center #vpn-help-view .vpn-triangle:hover .vpn-client-triangle, #help-center #vpn-help-view .vpn-triangle:active .vpn-client-triangle, #help-center #wifi-help-view .vpn-triangle:hover .vpn-client-triangle, #help-center #wifi-help-view .vpn-triangle:active .vpn-client-triangle, #help-center #wireless-help-view .vpn-triangle:hover .vpn-client-triangle, #help-center #wireless-help-view .vpn-triangle:active .vpn-client-triangle, #help-center #site-help-view .vpn-triangle:hover .vpn-client-triangle, #help-center #site-help-view .vpn-triangle:active .vpn-client-triangle {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #0492EB;
  position: relative;
  display: inline-block;
}
#help-center #vpn-help-view .vpn-triangle.collapsed .vpn-client-triangle, #help-center #wifi-help-view .vpn-triangle.collapsed .vpn-client-triangle, #help-center #wireless-help-view .vpn-triangle.collapsed .vpn-client-triangle, #help-center #site-help-view .vpn-triangle.collapsed .vpn-client-triangle {
  border-top: 8px solid transparent;
  border-left: 8px solid black;
  border-bottom: 8px solid transparent;
}
#help-center #vpn-help-view .vpn-triangle.collapsed:hover .vpn-client-triangle, #help-center #vpn-help-view .vpn-triangle.collapsed:active .vpn-client-triangle, #help-center #wifi-help-view .vpn-triangle.collapsed:hover .vpn-client-triangle, #help-center #wifi-help-view .vpn-triangle.collapsed:active .vpn-client-triangle, #help-center #wireless-help-view .vpn-triangle.collapsed:hover .vpn-client-triangle, #help-center #wireless-help-view .vpn-triangle.collapsed:active .vpn-client-triangle, #help-center #site-help-view .vpn-triangle.collapsed:hover .vpn-client-triangle, #help-center #site-help-view .vpn-triangle.collapsed:active .vpn-client-triangle {
  border-top: 8px solid transparent;
  border-left: 8px solid #0492EB;
  border-bottom: 8px solid transparent;
}
#help-center .edit-icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconEdit.svg) no-repeat;
}
#help-center #lan_accordion div[data-name=none] .accordion-header {
  display: none;
}
#help-center #lan_accordion div[data-name=none] .accordion-item {
  margin: 0;
}
#help-center #lan_accordion .lan-help-topology {
  width: 540px;
  height: 364px;
  background: url(../img/help/lanTopology.png) no-repeat;
  background-size: 100% 100%;
  margin-bottom: 20px;
}
#help-center #lan_accordion .lan-help-profile {
  width: 540px;
  height: 382px;
  background: url(../img/help/assignProfiles.png) no-repeat;
  background-size: 100% 100%;
  margin-bottom: 20px;
}
#help-center #lan_accordion table.gridtable {
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  color: #333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
  margin-bottom: 20px;
}
#help-center #lan_accordion table.gridtable th {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #EBF7FE;
}
#help-center #lan_accordion table.gridtable td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
}
#help-center #controller-help-view #controller-help-tab .tab-btn {
  font-size: 12px;
  padding: 0 6px;
}
#help-center #controller-help-view #controller-help-tab .tab-btn.selected {
  font-weight: normal;
}
#help-center #cloudAccess-help-view #cloud-access-topology-img {
  background-image: url(../img/help/CloudAccessTopology.png);
  background-size: cover;
  width: 535px;
  height: 534px;
}
#help-center #migration-help-view #site-mig-info {
  background-image: url(../img/help/siteMigrationProcess.png);
  background-size: 100% 100%;
  width: 520px;
  height: 251px;
}
#help-center #migration-help-view #controller-mig-info {
  background-image: url(../img/help/controllerMigrationProcess.png);
  background-size: 100% 100%;
  width: 540px;
  height: 251px;
}
#help-center #maintenance-help-meanwhile {
  font-weight: normal;
}
#help-center #portal-help-backpic {
  font-weight: normal;
}

/* -------------------------------------------------------------------------- */
/*                              Portal                                        */
/* -------------------------------------------------------------------------- */
#portal-limit-tip {
  color: var(--tab-color-primary, #868E93);
  font-weight: bold;
}

.online-required-tip {
  vertical-align: middle;
  position: relative;
  padding: 8px 20px 8px 44px;
  background: rgba(255, 149, 0, 0.1);
  border: 1px solid #FF9500;
  font-size: 14px;
}
.online-required-tip:before {
  position: absolute;
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url(../img/svg/Warning.svg) no-repeat;
  left: 16px;
  top: 4px;
}
.online-required-tip .paragraph-wrap-outer {
  display: inline-block;
}

#portalView {
  min-width: 1300px;
}
#portalView #portal-list-grid td.ssid-network {
  padding: 8px 15px;
}
#portalView #portal-list-grid td.ssid-network div.ssid-network-line {
  line-height: 30px;
}
#portalView #portal-list-grid td.ssid-network span.ssid-network-tag {
  background: var(--tag-background-primary, rgba(73, 84, 107, 0.08));
  min-width: 32px;
  margin-right: 8px;
  margin-bottom: 6px;
  padding: 0 6px;
  border-radius: 3px;
  display: inline-block;
}
#portalView .widget-fieldlabel-wrap {
  width: 180px;
}
#portalView .no-label {
  margin-left: 190px;
}
#portalView .manager-profile {
  line-height: 28px;
}
#portalView .combobox-wrap.widget-wrap {
  width: 220px;
}
#portalView .suffix .combobox-wrap.widget-wrap {
  width: 90px;
}
#portalView .prefix .combobox-wrap.widget-wrap {
  width: 83px;
}
#portalView .text-container:not(.prefix) .text-wrap {
  width: 220px;
}
#portalView .text-container.text-long .widget-fieldlabel-wrap {
  display: none;
}
#portalView .text-container.text-long .widget-wrap-outer {
  margin-left: 190px;
}
#portalView .text-container.text-long .text-wrap {
  width: 410px;
  max-width: none;
}
#portalView .terms-add-link {
  margin-top: 8px;
  margin-left: 190px;
}
#portalView .terms-add-link .button-wrap-outer {
  font-weight: normal;
}
#portalView .terms-add-link .button-button {
  padding-left: 0;
}
#portalView .paging-go .widget-fieldlabel-wrap {
  width: auto;
}
#portalView .paging-go .text-container .text-wrap {
  width: 50px;
}
#portalView #landing-page {
  position: relative;
}
#portalView #landing-page div[widget=toolTip] {
  position: absolute;
  left: 150px;
}
#portalView .access-control-grid-field {
  position: relative;
  margin-bottom: 0;
}
#portalView .access-control-grid-field div[widget=paragraph] {
  font-weight: bold;
  position: absolute;
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
}
#portalView #ad-duration-time-textbox .text-wrap, #portalView #ad-interval-textbox .text-wrap {
  width: 180px;
}
#portalView .receiver-port-status .text-wrap-display div {
  background: #F2F3F5;
  width: 500px;
  height: 48px;
  padding: 10px 24px;
}
#portalView .receiver-port-status .text-wrap-display div span.prefix {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 12px;
}
#portalView .receiver-port-status .text-wrap-display div.disabled span.prefix {
  background: #AEB4B7;
}
#portalView .receiver-port-status .text-wrap-display div.running span.prefix {
  background: #0DC901;
}
#portalView .receiver-port-status .text-wrap-display div.error span.prefix {
  background: #FF2954;
}

#portal-customization #welcome-info, #portal-customization #copyright-info {
  white-space: nowrap;
}
#portal-customization #ad-field {
  margin-top: 40px;
}
#portal-customization .customization-left {
  display: inline-block;
  width: 538px;
}
#portal-customization #portal-preview {
  position: relative;
  float: right;
}
#portal-customization #portal-preview #portal-preview-tab {
  vertical-align: middle;
}
#portal-customization #portal-preview #portal-preview-tab .tab-btn {
  min-width: 124px;
}
#portal-customization #portal-preview #portal-restore {
  cursor: pointer;
  float: right;
  line-height: 28px;
  font-weight: bold;
  vertical-align: middle;
  font-size: 15px;
  color: #0492EB;
}
#portal-customization #portal-preview #portal-restore:before {
  width: 24px;
  height: 24px;
  background: url("../img/svg/TableIconRefresh.svg") no-repeat;
  display: inline-block;
  content: " ";
  vertical-align: middle;
  margin-right: 4px;
}
#portal-customization #portal-preview .portal-preview-container {
  width: 630px;
  min-height: 400px;
  padding: 10px;
  background: #F2F3F5;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template {
  position: relative;
  margin: auto;
  width: 610px;
  min-height: 450px;
  background: url("../img/portal/background.png") no-repeat;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .logo-container {
  position: relative;
  z-index: 2;
  padding-top: 10px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .logo-container .welcome-info-text {
  margin-top: 2px;
  margin-bottom: 0;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .login-container {
  position: relative;
  z-index: 2;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .copyright-container {
  margin: auto;
  max-width: 214px;
  width: 100%;
  padding: 10px 0;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .copyright-container .copyright-text {
  font-size: 12px;
  padding: 0 8px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .copyright-container .copyright-text .paragraph-wrap-outer {
  width: 100%;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .term-msg-container {
  z-index: 3;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  width: 214px;
  height: 348px;
  background: #FFFFFF;
  border-radius: 3px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .term-msg-container .term-msg-title {
  border-radius: 3px 0 0 3px;
  background: #F0F2F5;
  text-align: center;
  margin: 0;
  font-size: 12px;
  color: #49546B;
  height: 28px;
  line-height: 28px;
  font-weight: bold;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .term-msg-container .term-msg-content {
  height: 320px;
  padding: 10px;
  word-break: break-word;
  word-wrap: break-word;
  overflow: auto;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .term-msg-container .term-msg-content [href] {
  color: #0492eb;
  text-decoration: underline;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .logo-outer {
  margin-bottom: 10px;
  text-align: center;
  width: auto;
  height: 130px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .portal-preview-logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100px;
  max-height: 100px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .portal-preview-logo.default {
  width: 68px;
  height: 68px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template.mobile:not(.solid) {
  width: 214px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template.mobile:not(.solid) .portal-preview-logo {
  max-width: 120px;
  max-height: 120px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template.mobile:not(.solid) .portal-preview-logo.default {
  width: 60px;
  height: 60px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template.solid:not(.mobile) .portal-preview-logo {
  max-width: 136px;
  max-height: 136px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template.solid:not(.mobile) .portal-preview-logo.default {
  width: 68px;
  height: 68px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template.mobile.solid {
  width: 214px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template.mobile.solid .portal-preview-logo {
  max-width: 120px;
  max-height: 120px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template.mobile.solid .portal-preview-logo.default {
  width: 60px;
  height: 60px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template div[widget] {
  word-wrap: break-word;
  word-break: break-word;
  max-width: 630px;
  margin: 10px 0;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template div[widget] .text-hint {
  color: #363E4D;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template div[widget=paragraph].copyright-text {
  margin: 0;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template div[widget=textbox] div.widget-wrap {
  background: #ffffff;
  width: 168px;
  height: 24px;
  line-height: 24px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template div[widget=textbox] div.widget-wrap input {
  height: 22px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template div[widget=checkbox] div.widget-wrap {
  width: auto;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template div[widget=checkbox] .checkbox-label .checkbox-icon-inner {
  -webkit-transition: none;
  transition: none;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template div[widget=button] {
  margin-top: 12px;
  margin-bottom: 8px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template div[widget=button] a.button-button {
  overflow: hidden;
  font-weight: normal;
  font-size: 14px;
  line-height: 24px;
  width: 168px;
  height: 24px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template div[widget=button] .button-text {
  line-height: 24px;
  word-break: break-all;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template div[widget=checkbox] {
  margin-top: 0;
  margin-bottom: 4px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template div[widget=checkbox] a {
  color: #0492EB;
  text-decoration: underline;
  cursor: pointer;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template div[widget=checkbox] .checkbox-group-wrap-outer {
  display: flex;
  align-items: baseline;
  padding-left: 10px;
  padding-right: 10px;
  height: auto;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template div[widget=checkbox] .checkbox-group-wrap-outer .tips-content {
  text-align: left;
  line-height: 1;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template div[widget=checkbox] .checkbox-group-wrap {
  vertical-align: middle;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .login-normal-outer {
  text-align: center;
  width: auto;
  height: 236px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .login-normal-outer .login-normal-inner {
  font-size: 12px;
  width: 188px;
  border-radius: 3px;
  margin: auto;
  padding: 1px 0;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .login-normal-outer .login-normal-inner.has-terms {
  background: rgba(255, 255, 255, 0.7);
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .login-hotspot-outer {
  text-align: center;
  width: auto;
  height: 261px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .login-hotspot-outer .login-hotspot-inner {
  font-size: 12px;
  width: 188px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 3px;
  margin: auto;
  padding: 1px 0;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .login-hotspot-outer .login-hotspot-inner .hotspot-access-title {
  text-align: left;
  padding-left: 10px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .login-hotspot-outer div[widget] div.widget-wrap {
  font-size: 12px;
  text-align: left;
  height: 24px;
  line-height: 22px;
  width: 168px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .login-hotspot-outer div[widget=checkbox] div.widget-wrap {
  width: auto;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .login-hotspot-outer div[widget=checkbox] .tips-content {
  color: #363E4D;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .login-hotspot-outer div#hotspot-preview-type {
  margin: 0 0 4px 0;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .login-hotspot-outer div#hotspot-preview-type .combobox-text {
  height: 22px;
  line-height: 22px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .login-hotspot-outer div#hotspot-preview-type .widget-wrap {
  width: 188px;
  background: rgba(255, 255, 255, 0.7);
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .login-hotspot-outer div#preview-phone-number span.text-wrap-before {
  background: #0492EB;
  color: #ffffff;
  border-radius: 3px 0 0 3px;
  border-right: none;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .login-hotspot-outer div#preview-phone-number input {
  padding-left: 40px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .login-hotspot-outer div#preview-verification span.text-wrap-after {
  top: 0;
  right: 0;
  padding: 0 5px;
  cursor: default;
  position: absolute;
  background: #0492EB;
  color: #ffffff;
  border-radius: 0 3px 3px 0;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .login-hotspot-outer div#preview-verification input {
  padding-right: 56px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template .login-hotspot-outer div[widget=button] a.button-button {
  width: 168px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template.mobile .term-msg-container {
  width: 182px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template.mobile div[widget=paragraph] {
  max-width: 214px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template.mobile div[widget] div.widget-wrap {
  width: 154px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template.mobile div[widget=checkbox] div.widget-wrap {
  width: auto;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template.mobile div[widget=button] a.button-button {
  width: 154px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template.mobile .login-hotspot-outer div#hotspot-preview-type .widget-wrap {
  width: 174px;
}
#portal-customization #portal-preview .portal-preview-container .portal-preview-template.mobile .login-hotspot-outer div.login-hotspot-inner {
  width: 174px;
}

#global-combobox-options[data-shown=hotspot-preview-type] .combobox-list-content-wrap-outer {
  padding: 0;
}
#global-combobox-options[data-shown=hotspot-preview-type] .combobox-list-content-wrap-outer li.combobox-list {
  font-size: 12px;
}

#preAuthAccessPoliciesGrid .operation-btn.btn-add.disabled .text, #freeAuthClientPoliciesGrid .operation-btn.btn-add.disabled .text {
  color: rgba(4, 146, 235, 0.6);
}

div#pre-auth-access-repeat div.repeat-item:first-child .delete-item, div#free-auth-access-repeat div.repeat-item:first-child .delete-item {
  display: none;
}
div#pre-auth-access-repeat div.repeat-item:first-child div[widget=textbox]:first-child .widget-fieldlabel-wrap, div#free-auth-access-repeat div.repeat-item:first-child div[widget=textbox]:first-child .widget-fieldlabel-wrap {
  visibility: visible;
}
div#pre-auth-access-repeat div.repeat-item .delete-item, div#free-auth-access-repeat div.repeat-item .delete-item {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/TableIconDelete.svg) no-repeat;
  position: relative;
  top: 2px;
}
div#pre-auth-access-repeat div.repeat-item .delete-item:hover, div#free-auth-access-repeat div.repeat-item .delete-item:hover {
  background: url(../img/svg/TableIconDeleteHover.svg) no-repeat;
}
div#pre-auth-access-repeat .access-max-tip, div#free-auth-access-repeat .access-max-tip {
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  letter-spacing: 0;
  line-height: 16px;
}

#create-new-pre-auth-msg .msg-content-container, #create-new-free-auth-msg .msg-content-container {
  max-height: 500px;
}
#create-new-pre-auth-msg .msg-btn-container, #create-new-free-auth-msg .msg-btn-container {
  margin-top: 16px;
}

.create-link-msg .textarea-container .text-wrap {
  width: 507px;
  max-width: none;
  height: 154px;
}

.add-icon {
  display: inline-block;
  cursor: pointer;
  margin-bottom: 13px;
  font-size: 15px;
  color: #0492EB;
  letter-spacing: 0;
  font-weight: bold;
}
.add-icon.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.add-icon:hover {
  color: rgba(4, 146, 235, 0.6);
}
.add-icon:hover:before {
  background: url(../img/svg/OthersIconAddHover.svg) no-repeat;
}
.add-icon:before {
  content: " ";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/OthersIconAdd.svg) no-repeat;
  vertical-align: middle;
  margin-right: 6px;
}
.add-icon .paragraph-wrap-outer {
  position: relative;
  top: 1px;
}

#background-preview, #logo-preview {
  vertical-align: top;
  margin-bottom: 0;
  width: 266px;
}
#background-preview .file-button, #logo-preview .file-button {
  display: none;
}
#background-preview .jcrop-holder, #logo-preview .jcrop-holder {
  border: 1px solid var(--components-border-primary, #bec3c5);
}

#background-preview {
  margin-right: 18px;
}

#hotspot-type .checkbox-list {
  width: 104px;
}

#import-page-tip {
  width: 610px;
}

#global-combobox-options[data-shown=portal-radius-profile] .combobox-empty-tip, #global-combobox-options[data-shown=portal-radius-profile-hotspot] .combobox-empty-tip,
#global-combobox-options[data-shown=radius-profile-dot1x] .combobox-empty-tip {
  font-size: 12px;
}
#global-combobox-options[data-shown=portal-radius-profile] .combobox-list-editor-wrap, #global-combobox-options[data-shown=portal-radius-profile-hotspot] .combobox-list-editor-wrap,
#global-combobox-options[data-shown=radius-profile-dot1x] .combobox-list-editor-wrap {
  border-top: 1px solid var(--s-color-text-split, #EBECED);
}
#global-combobox-options[data-shown=portal-radius-profile] .combobox-list-editor-wrap li label, #global-combobox-options[data-shown=portal-radius-profile-hotspot] .combobox-list-editor-wrap li label,
#global-combobox-options[data-shown=radius-profile-dot1x] .combobox-list-editor-wrap li label {
  display: block;
  padding: 5px 16px 5px 10px;
  line-height: 1.14;
  white-space: nowrap;
  position: relative;
}
#global-combobox-options[data-shown=portal-radius-profile] .combobox-list-editor-wrap li.create-new-radius span.icon, #global-combobox-options[data-shown=portal-radius-profile-hotspot] .combobox-list-editor-wrap li.create-new-radius span.icon,
#global-combobox-options[data-shown=radius-profile-dot1x] .combobox-list-editor-wrap li.create-new-radius span.icon {
  vertical-align: middle;
  display: inline-block;
  width: 24px;
  height: 24px;
  background: var(--icon-select-add, url(../img/svg/ButtonIconAdd.svg)) no-repeat;
}
#global-combobox-options[data-shown=portal-radius-profile] .combobox-list-editor-wrap li.create-new-radius div[widget=transition], #global-combobox-options[data-shown=portal-radius-profile-hotspot] .combobox-list-editor-wrap li.create-new-radius div[widget=transition],
#global-combobox-options[data-shown=radius-profile-dot1x] .combobox-list-editor-wrap li.create-new-radius div[widget=transition] {
  vertical-align: middle;
}
#global-combobox-options[data-shown=portal-radius-profile] .combobox-list-editor-wrap li.create-new-radius:hover, #global-combobox-options[data-shown=portal-radius-profile-hotspot] .combobox-list-editor-wrap li.create-new-radius:hover,
#global-combobox-options[data-shown=radius-profile-dot1x] .combobox-list-editor-wrap li.create-new-radius:hover {
  color: #0492EB;
}
#global-combobox-options[data-shown=portal-radius-profile] .combobox-list-editor-wrap li.create-new-radius:hover span.icon, #global-combobox-options[data-shown=portal-radius-profile-hotspot] .combobox-list-editor-wrap li.create-new-radius:hover span.icon,
#global-combobox-options[data-shown=radius-profile-dot1x] .combobox-list-editor-wrap li.create-new-radius:hover span.icon {
  width: 24px;
  height: 24px;
  background: url(../img/svg/ButtonIconAdd.svg) no-repeat;
}

#custom-port .widget-wrap {
  max-width: 70px;
  width: 70px;
}

.facebook-card-outer {
  position: relative;
  background: #ffffff;
  padding-left: 190px;
}

.facebook-label {
  position: absolute;
  top: 0;
  left: 0;
}

.facebook-card {
  display: inline-block;
  background: #F8F9FA;
  border-radius: 3px;
  padding: 16px;
  width: 370px;
}
.facebook-card .facebook-card-content {
  position: relative;
  font-size: 14px;
}
.facebook-card .facebook-type {
  display: inline-block;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 16px;
  height: 35px;
}
.facebook-card .facebook-type-info {
  font-size: 15px;
  font-weight: bold;
}
.facebook-card .config-btn {
  position: absolute;
  top: 0;
  right: 0;
}
.facebook-card .info {
  font-size: 14px;
  color: #AEB4B7;
  margin-bottom: 20px;
}
.facebook-card .separator {
  width: 100%;
  height: 2px;
  background: #EBECED;
  margin-bottom: 16px;
}
.facebook-card .facebook-location-outer {
  position: relative;
}
.facebook-card .facebook-location-outer .facebook-location {
  margin-bottom: 0;
}
.facebook-card .facebook-location-outer .facebook-location .widget-fieldlabel-wrap {
  color: var(--tab-color-primary, #868E93);
}
.facebook-card .facebook-location-outer .facebook-location .text-wrap-outer {
  display: block;
}
.facebook-card .facebook-location-outer .facebook-status {
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bold;
}
.facebook-card .facebook-location-outer .facebook-status.succeed {
  color: #0DC901;
}
.facebook-card .facebook-location-outer .facebook-status.failed {
  color: #FF2954;
}
.facebook-card .facebook-location-outer .facebook-status.none {
  color: var(--tab-color-primary, #868E93);
}

.facebook-card-2 {
  margin-right: 10px;
}

[widget=infoPanel].terms-link-info-panel {
  padding: 12px;
  border: 0 none;
  background-color: #fff;
}
[widget=infoPanel].terms-link-info-panel .tip-pointer.top {
  display: block;
  top: 37px;
  width: 20px;
  height: 15px;
  overflow: hidden;
  border: 0 none;
  box-shadow: 0 16px 10px -17px rgba(0, 0, 0, 0.9);
}
[widget=infoPanel].terms-link-info-panel .tip-pointer.top:after {
  content: "";
  position: absolute;
  top: -4px;
  left: 1px;
  width: 10px;
  height: 10px;
  border: 0 none;
  background-color: #fff;
  box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
  transform: rotate(45deg);
}
[widget=infoPanel].terms-link-info-panel .link {
  padding: 6px 15.5px 5px;
  color: #0492EB;
  background-color: #d7eefc;
  user-select: none;
  cursor: pointer;
  border-radius: 3px;
}
[widget=infoPanel].terms-link-info-panel .link + .link {
  margin-left: 10px;
}

#search-msg .msg-wrap {
  width: 460px;
}
#search-msg .msg-wrap .msg-content-container {
  padding: 30px 14px;
}
#search-msg .msg-wrap .msg-content-container .paging-container {
  text-align: center;
}
#search-msg .msg-wrap .msg-content-container .paging-container a.pageing-btn-prev span.text, #search-msg .msg-wrap .msg-content-container .paging-container a.pageing-btn-next span.text {
  display: none;
}
#search-msg .msg-wrap #search-keyword .text-wrap, #search-msg .msg-wrap #devices-search-keyword .text-wrap {
  width: 412px;
  max-width: 412px;
}
#search-msg .msg-wrap .search-history-wrap {
  color: var(--tab-color-primary, #868E93);
}
#search-msg .msg-wrap .search-history-wrap .widget-fieldlabel-wrap {
  line-height: 24px;
  width: auto;
}
#search-msg .msg-wrap .search-history-wrap .history-item {
  margin-bottom: 6px;
  text-align: center;
  background: var(--tag-background-primary, rgba(73, 84, 107, 0.08));
  min-width: 32px;
  margin-right: 12px;
  padding: 0px 6px;
  border-radius: 3px;
  cursor: pointer;
}
#search-msg .msg-wrap .search-history-wrap .history-item .text-wrap-outer {
  line-height: 22px;
}

#search-history .repeat-item, #devices-search-history .repeat-item {
  display: inline-block;
}

#device-result-title {
  border-bottom: 1px solid #AEB4B7;
  padding-bottom: 8px;
  margin: 0 10px 12px 10px;
}

.search-input-button-container {
  margin-bottom: 24px;
  padding: 0 10px;
}

.searchList-header {
  border-bottom: 1px solid #AEB4B7;
  padding-bottom: 8px;
  margin: 0 10px;
}
.searchList-header .searchList-results-title {
  color: var(--s-color-text-primary, #212121);
  font-size: 15px;
}

.searchList-content-ul {
  margin: 12px 0;
  max-height: 330px;
}
.searchList-content-ul .ps__rail-y {
  opacity: 0.7 !important;
}
.searchList-content-ul .searchList-item-container {
  line-height: 32px;
  padding: 0 10px;
}
.searchList-content-ul .searchList-item-container:hover {
  background: var(--select-background-hover, #f2f3f5);
}
.searchList-content-ul .searchList-item-container .searchList-item-content a {
  width: 100%;
  display: inline-block;
  color: var(--tab-color-primary, #868E93);
}
.searchList-content-ul .searchList-item-container .searchList-item-content .path-node:last-child {
  color: var(--s-color-text-primary, #212121);
}

.searchList-matched-text {
  color: #0492EB;
}

.searchList-item-introduction {
  color: #868484;
}

.no-results-prompt {
  padding: 0 10px;
  margin-top: 24px;
  color: #868484;
}

.search-container.search_l .search-wrap.widget-wrap {
  width: 260px;
  max-width: 260px;
}

#devices-search-result-list .empty-tip {
  display: none;
  color: #868484;
  padding: 12px 10px;
}
#devices-search-result-list.empty .empty-tip {
  display: block;
}
#devices-search-result-list .devicesList-content-container {
  margin-bottom: 12px;
}
#devices-search-result-list .devicesList-item-container:hover {
  background-color: var(--tag-background-primary, rgba(73, 84, 107, 0.08));
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content {
  white-space: normal;
  font-size: 14px;
  position: relative;
  padding-left: 56px;
  display: flex;
  flex-wrap: wrap;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content .devicesList-item {
  white-space: nowrap;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content .devicesList-item.devicesList-item-name {
  max-width: 120px;
  margin-right: 10px;
  flex-basis: 10%;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content .devicesList-item.devicesList-item-status {
  flex-basis: 33%;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content .devicesList-item.devicesList-item-site {
  max-width: 80px;
  margin-left: auto;
  flex-basis: 33%;
  text-align: right;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content .devicesList-item.devicesList-item-sn {
  color: #A7A9AC;
  flex-basis: 33%;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content .devicesList-item.devicesList-item-sn.empty {
  display: none;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content .devicesList-item.devicesList-item-sn.empty + .devicesList-item-mac span.content {
  padding-left: 0;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content .devicesList-item.devicesList-item-sn span.content {
  padding-right: 8px;
  border-right: 1px solid #A7A9AC;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content .devicesList-item.devicesList-item-mac {
  color: #A7A9AC;
  flex-basis: 33%;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content .devicesList-item.devicesList-item-mac span.content {
  padding-left: 8px;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content .logo-container {
  position: absolute;
  left: 0;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content .logo-container span.icon {
  vertical-align: middle;
  display: inline-block;
  width: 40px;
  height: 40px;
  background-size: contain;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.gateway .logo-container span.icon {
  background: url(../img/deviceIcon/Gateway.png) no-repeat;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.gateway.TL-ER7206 .logo-container span.icon {
  background: url(../img/deviceIcon/TL-ER7206.png) no-repeat;
  background-size: contain;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.gateway.TL-ER8411 .logo-container span.icon {
  background: url(../img/deviceIcon/TL-ER8411.png) no-repeat;
  background-size: contain;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.gateway.ER7212PC .logo-container span.icon {
  background: url(../img/deviceIcon/ER7212PC.png) no-repeat;
  background-size: contain;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.switch .logo-container span.icon {
  background: url(../img/deviceIcon/Gateway.png) no-repeat;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.switch.TL-SG2428P .logo-container span.icon {
  background: url(../img/deviceIcon/TL-SG2428P.png) no-repeat;
  background-size: contain;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.switch.TL-SG2008P .logo-container span.icon {
  background: url(../img/deviceIcon/TL-SG2008P.png) no-repeat;
  background-size: contain;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.switch.TL-SG2218P .logo-container span.icon {
  background: url(../img/deviceIcon/TL-SG2218P.png) no-repeat;
  background-size: contain;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.switch.TL-SG3452X .logo-container span.icon {
  background: url(../img/deviceIcon/TL-SG3452X.png) no-repeat;
  background-size: contain;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.switch.TL-SG3452XP .logo-container span.icon {
  background: url(../img/deviceIcon/TL-SG3452XP.png) no-repeat;
  background-size: contain;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.switch.TL-SG3452P .logo-container span.icon {
  background: url(../img/deviceIcon/TL-SG3452P.png) no-repeat;
  background-size: contain;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.ap.Wave .logo-container span.icon {
  background: url(../img/deviceIcon/wave.png) no-repeat;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.ap.Cloud-Square .logo-container span.icon {
  background: url(../img/deviceIcon/cloudSquare.png) no-repeat;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.ap.Outdoor-Old .logo-container span.icon {
  background: url(../img/deviceIcon/outdoorOld.png) no-repeat;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.ap.Outdoor-New .logo-container span.icon {
  background: url(../img/deviceIcon/outdoorNew.png) no-repeat;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.ap.n11-UK .logo-container span.icon {
  background: url(../img/deviceIcon/n11uk.png) no-repeat;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.ap.ac11-Compatible .logo-container span.icon {
  background: url(../img/deviceIcon/ac11.png) no-repeat;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.ap.hd620 .logo-container span.icon {
  background: url(../img/deviceIcon/EAP650.png);
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.ap.hd620-outdoor .logo-container span.icon {
  background: url(../img/deviceIcon/EAP620-Outdoor_HD.png);
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.ap.eap650-wall .logo-container span.icon {
  background: url(../img/deviceIcon/EAP650-Wall.png);
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.ap.eap655-wall .logo-container span.icon {
  background: url(../img/deviceIcon/EAP655-Wall.png);
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.ap.android .logo-container span.icon {
  background: url(../img/clientIcon/android.png) no-repeat;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.ap.harddisk .logo-container span.icon {
  background: url(../img/clientIcon/harddisk.png) no-repeat;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.ap.ipad .logo-container span.icon {
  background: url(../img/clientIcon/iPad.png) no-repeat;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.ap.iphone .logo-container span.icon {
  background: url(../img/clientIcon/iPhone.png) no-repeat;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.ap.ipod .logo-container span.icon {
  background: url(../img/clientIcon/iPod.png) no-repeat;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.ap.notebook .logo-container span.icon {
  background: url(../img/clientIcon/notebook.png) no-repeat;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.ap.pc .logo-container span.icon {
  background: url(../img/clientIcon/pc.png) no-repeat;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.ap.printer .logo-container span.icon {
  background: url(../img/clientIcon/printer.png) no-repeat;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.ap.router .logo-container span.icon {
  background: url(../img/clientIcon/router.png) no-repeat;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.ap.tv .logo-container span.icon {
  background: url(../img/clientIcon/tv.png) no-repeat;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.ap.unknown .logo-container span.icon {
  background: url(../img/clientIcon/unknown.png) no-repeat;
}
#devices-search-result-list .devicesList-item-container .devicesList-item-content.ap.usb .logo-container span.icon {
  background: url(../img/clientIcon/usb.png) no-repeat;
}

#tutorial-msg {
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 910;
}
#tutorial-msg .msg-wrap, #tutorial-msg .msg-content-wrap, #tutorial-msg .msg-content-container {
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
}
#tutorial-msg .msg-content-container {
  padding: 0;
}
#tutorial-msg .msg-content-container #tutorial-loader {
  margin: 0;
}

#tutorial-view {
  height: 100vh;
  min-height: 620px;
  min-width: 1366px;
  position: relative;
  background-color: var(--tutorial-bg-primary, #f2f3f5);
}
#tutorial-view #close-tutorial {
  z-index: 2;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background: url(../img/svg/Close.svg) no-repeat;
  cursor: pointer;
  top: 30px;
  right: 60px;
  position: absolute;
}
#tutorial-view .tutorial-slick {
  width: 100%;
  white-space: nowrap;
  height: calc(100% - 70px);
  min-height: 720px;
  background: var(--tutorial-bg-panel, #ffffff);
  box-shadow: var(--tutorial-box-shadow, 0 4px 10px 0 rgba(154, 161, 173, 0.4));
  position: relative;
}
#tutorial-view .tutorial-slick .tutorial-item {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  padding-left: 80px;
  padding-right: 80px;
}
#tutorial-view .tutorial-slick .tutorial-item .help-zone {
  border: 1px solid #0492EB;
  border-radius: 3px;
  position: absolute;
}
#tutorial-view .tutorial-slick .tutorial-item .horizontal-line {
  position: absolute;
  border-top: 1px solid #0492EB;
}
#tutorial-view .tutorial-slick .tutorial-item .horizontal-line.start:before {
  display: inline-block;
  content: " ";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #404C64;
  top: -4px;
  position: absolute;
}
#tutorial-view .tutorial-slick .tutorial-item .horizontal-line.end:before {
  display: inline-block;
  content: " ";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0492EB;
  top: -4px;
  right: 0;
  position: absolute;
}
#tutorial-view .tutorial-slick .tutorial-item .vertical-line {
  position: absolute;
  border-left: 1px solid #0492EB;
}
#tutorial-view .tutorial-slick .tutorial-item .vertical-line.end:before {
  display: inline-block;
  content: " ";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0492EB;
  left: -4px;
  bottom: 0;
  position: absolute;
}
#tutorial-view .tutorial-slick .tutorial-item .tutorial-help-list {
  position: absolute;
}
#tutorial-view .tutorial-slick .tutorial-item .tutorial-help-list ul {
  display: inline-block;
  opacity: 0.9;
  background: #0492EB;
  border-radius: 4px;
  font-size: 14px;
  color: #FFFFFF;
  line-height: 22px;
  list-style-type: disc;
  padding: 10px 10px 10px 26px;
}
#tutorial-view .tutorial-slick .tutorial-item.done {
  flex-direction: column;
}
#tutorial-view .tutorial-slick .screenshot {
  flex: 0 0 900px;
  height: 562px;
  display: inline-block;
  margin-right: 30px;
  margin-bottom: 20px;
  position: relative;
}
#tutorial-view .tutorial-slick .screenshot-text {
  position: absolute;
}
#tutorial-view .tutorial-slick .screenshot-text .screenshot-text-tip {
  font-size: 14px;
  color: var(--tutorial-color-note, #8F96A2);
  letter-spacing: 0;
  line-height: 20px;
  width: 900px;
  height: 60px;
  white-space: normal;
}
#tutorial-view .tutorial-slick .text-field {
  white-space: normal;
  display: inline-block;
  width: 340px;
  height: 680px;
  padding-right: 10px;
  vertical-align: top;
  text-align: center;
  margin-top: 100px;
}
#tutorial-view .tutorial-slick .text-field .tutorial-item-icon {
  width: 68px;
  height: 68px;
  display: inline-block;
  margin-bottom: 20px;
}
#tutorial-view .tutorial-slick .text-field .tutorial-title {
  font-size: 22px;
  color: var(--tutorial-color-title, #36444B);
  font-weight: bold;
  letter-spacing: 0;
}
#tutorial-view .tutorial-slick .text-field .tutorial-tip {
  font-size: 14px;
  color: var(--tutorial-color-note, #8F96A2);
  letter-spacing: 0;
  line-height: 20px;
}
#tutorial-view .tutorial-slick .text-field .tutorial-content {
  position: relative;
  padding-left: 18px;
  margin-bottom: 20px;
  text-align: left;
  font-size: 14px;
  color: var(--tutorial-color-content, #36444B);
  letter-spacing: 0;
  line-height: 20px;
}
#tutorial-view .tutorial-slick .text-field .tutorial-content:before {
  content: " ";
  display: inline-block;
  height: 6px;
  width: 6px;
  background: var(--tutorial-color-content, #36444B);
  border-radius: 3px;
  position: absolute;
  left: 0;
  top: 7px;
}
#tutorial-view .tutorial-slick .text-field .ps__rail-y {
  opacity: 0.6;
}
#tutorial-view .tutorial-slick .panel-overview .screenshot {
  width: 910px;
  height: 566px;
  background: var(--tutorial-img-global-overview, url(../img/tutorial/overview.jpg)) no-repeat;
  background-size: cover !important;
  border-radius: 12px;
  box-shadow: var(--tutorial-img-box-shadow, 0 4px 10px 0 rgba(154, 161, 173, 0.4));
}
#tutorial-view .tutorial-slick .panel-overview .screenshot .system-monitor.help-zone {
  width: 34px;
  height: 96px;
  top: 35px;
  left: 1px;
}
#tutorial-view .tutorial-slick .panel-overview .screenshot .system-monitor.horizontal-line {
  left: 35px;
  top: 83px;
  width: 34px;
}
#tutorial-view .tutorial-slick .panel-overview .screenshot .system-monitor.tutorial-help-list {
  top: 50px;
  left: 76px;
}
#tutorial-view .tutorial-slick .panel-overview .screenshot .site.help-zone {
  width: 240px;
  height: 30px;
  top: 3px;
  right: 0px;
}
#tutorial-view .tutorial-slick .panel-overview .screenshot .site.vertical-line {
  left: 784px;
  top: 32px;
  height: 33px;
}
#tutorial-view .tutorial-slick .panel-overview .screenshot .site.tutorial-help-list {
  top: 77px;
  left: 707px;
}
#tutorial-view .tutorial-slick .panel-overview .screenshot .account.help-zone {
  width: 34px;
  height: 60px;
  top: 492px;
  left: 1px;
}
#tutorial-view .tutorial-slick .panel-overview .screenshot .account.horizontal-line {
  left: 35px;
  top: 520px;
  width: 31px;
}
#tutorial-view .tutorial-slick .panel-overview .screenshot .account.tutorial-help-list {
  top: 491px;
  left: 76px;
}
#tutorial-view .tutorial-slick .panel-overview .screenshot .site-map.help-zone {
  width: 855px;
  height: 390px;
  top: 180px;
  left: 40px;
}
#tutorial-view .tutorial-slick .panel-overview .screenshot .site-map.horizontal-line {
  left: 863px;
  top: 512px;
  width: 31px;
}
#tutorial-view .tutorial-slick .panel-overview .screenshot .site-map.horizontal-line::before {
  left: 0;
}
#tutorial-view .tutorial-slick .panel-overview .screenshot .site-map.tutorial-help-list {
  top: 491px;
  left: 600px;
}
#tutorial-view .tutorial-slick .panel-overview .text-field .tutorial-item-icon {
  background: url(../img/tutorial/svg/Overview.svg) no-repeat;
}
#tutorial-view .tutorial-slick .site-overview .screenshot {
  width: 910px;
  height: 566px;
  background: var(--tutorial-img-site-overview, url(../img/tutorial/siteOverview.jpg)) no-repeat;
  background-size: cover !important;
  border-radius: 12px;
  box-shadow: var(--tutorial-img-box-shadow, 0 4px 10px 0 rgba(154, 161, 173, 0.4));
}
#tutorial-view .tutorial-slick .site-overview .screenshot .system-monitor.help-zone {
  width: 34px;
  height: 243px;
  top: 35px;
  left: 1px;
}
#tutorial-view .tutorial-slick .site-overview .screenshot .system-monitor.horizontal-line {
  left: 35px;
  top: 160px;
  width: 34px;
}
#tutorial-view .tutorial-slick .site-overview .screenshot .system-monitor.tutorial-help-list {
  top: 126px;
  left: 76px;
}
#tutorial-view .tutorial-slick .site-overview .screenshot .site.help-zone {
  width: 310px;
  height: 30px;
  top: 3px;
  right: 0px;
}
#tutorial-view .tutorial-slick .site-overview .screenshot .site.vertical-line {
  left: 750px;
  top: 32px;
  height: 33px;
}
#tutorial-view .tutorial-slick .site-overview .screenshot .site.tutorial-help-list {
  top: 77px;
  left: 690px;
}
#tutorial-view .tutorial-slick .site-overview .screenshot .account.help-zone {
  width: 34px;
  height: 44px;
  top: 515px;
  left: 1px;
}
#tutorial-view .tutorial-slick .site-overview .screenshot .account.horizontal-line {
  left: 35px;
  top: 538px;
  width: 31px;
}
#tutorial-view .tutorial-slick .site-overview .screenshot .account.tutorial-help-list {
  top: 517px;
  left: 76px;
}
#tutorial-view .tutorial-slick .site-overview .screenshot .site-map.help-zone {
  width: 855px;
  height: 390px;
  top: 180px;
  left: 40px;
}
#tutorial-view .tutorial-slick .site-overview .screenshot .site-map.horizontal-line {
  left: 863px;
  top: 512px;
  width: 31px;
}
#tutorial-view .tutorial-slick .site-overview .screenshot .site-map.horizontal-line::before {
  left: 0;
}
#tutorial-view .tutorial-slick .site-overview .screenshot .site-map.tutorial-help-list {
  top: 491px;
  left: 600px;
}
#tutorial-view .tutorial-slick .site-overview .text-field .tutorial-item-icon {
  background: url(../img/tutorial/svg/Overview.svg) no-repeat;
}
#tutorial-view .tutorial-slick .site-management .screenshot, #tutorial-view .tutorial-slick .site-management .screenshot-static {
  position: relative;
  width: 910px;
  height: 566px;
  border-radius: 12px;
  box-shadow: var(--tutorial-img-box-shadow, 0 4px 10px 0 rgba(154, 161, 173, 0.4));
}
#tutorial-view .tutorial-slick .site-management .screenshot .screenshot-static, #tutorial-view .tutorial-slick .site-management .screenshot-static .screenshot-static {
  background: var(--tutorial-img-site-map, url(../img/tutorial/siteMap.jpg)) no-repeat;
  background-size: cover;
}
#tutorial-view .tutorial-slick .site-management .screenshot .operation.help-zone, #tutorial-view .tutorial-slick .site-management .screenshot-static .operation.help-zone {
  width: 230px;
  height: 30px;
  top: 210px;
  left: 50px;
}
#tutorial-view .tutorial-slick .site-management .screenshot .operation.horizontal-line, #tutorial-view .tutorial-slick .site-management .screenshot-static .operation.horizontal-line {
  left: 279px;
  top: 224px;
  width: 34px;
}
#tutorial-view .tutorial-slick .site-management .screenshot .operation.tutorial-help-list, #tutorial-view .tutorial-slick .site-management .screenshot-static .operation.tutorial-help-list {
  top: 192px;
  left: 328px;
}
#tutorial-view .tutorial-slick .site-management .screenshot .site.help-zone, #tutorial-view .tutorial-slick .site-management .screenshot-static .site.help-zone {
  width: 200px;
  height: 30px;
  top: 3px;
  right: 109px;
}
#tutorial-view .tutorial-slick .site-management .screenshot .site.vertical-line, #tutorial-view .tutorial-slick .site-management .screenshot-static .site.vertical-line {
  left: 700px;
  top: 32px;
  height: 33px;
}
#tutorial-view .tutorial-slick .site-management .screenshot .site.tutorial-help-list, #tutorial-view .tutorial-slick .site-management .screenshot-static .site.tutorial-help-list {
  top: 77px;
  left: 639px;
}
#tutorial-view .tutorial-slick .site-management .text-field .tutorial-item-icon {
  background: url(../img/tutorial/svg/AddSiteNotion.svg) no-repeat;
}
#tutorial-view .tutorial-slick .monitor-function .screenshot-container, #tutorial-view .tutorial-slick .site-management .screenshot-container {
  flex: 0 0 900px;
  margin-left: 30px;
}
#tutorial-view .tutorial-slick .monitor-function .screenshot-container .screenshot, #tutorial-view .tutorial-slick .site-management .screenshot-container .screenshot {
  width: 100%;
  margin-left: 0;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList, #tutorial-view .tutorial-slick .site-management #networkMonitorList, #tutorial-view .tutorial-slick .site-management #siteAnimationList {
  width: 280px;
  margin: auto;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-item-content, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-item-content, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-item-content, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-item-content {
  text-align: left;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-item-content .logo-container .icon, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-item-content .logo-container .icon, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-item-content .logo-container .icon, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-item-content .logo-container .icon {
  width: 24px;
  height: 24px;
  opacity: var(--tutorial-icon-opacity, 0.3);
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-item-content.dashboard .logo-container .icon, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-item-content.dashboard .logo-container .icon, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-item-content.dashboard .logo-container .icon, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-item-content.dashboard .logo-container .icon {
  background: var(--icon-menu-dashboard, url("../img/svg/SidebariconDashboardNormal.svg")) no-repeat;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-item-content.stats .logo-container .icon, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-item-content.stats .logo-container .icon, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-item-content.stats .logo-container .icon, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-item-content.stats .logo-container .icon {
  background: var(--icon-menu-statistics, url("../img/svg/SidebariconStatisticsNormal.svg")) no-repeat;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-item-content.map .logo-container .icon, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-item-content.map .logo-container .icon, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-item-content.map .logo-container .icon, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-item-content.map .logo-container .icon {
  background: var(--icon-menu-mapEntry, url("../img/svg/SidebariconMapNormal.svg")) no-repeat;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-item-content.device .logo-container .icon, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-item-content.device .logo-container .icon, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-item-content.device .logo-container .icon, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-item-content.device .logo-container .icon {
  background: var(--icon-menu-accessPoints, url("../img/svg/SidebariconDevicesNormal.svg")) no-repeat;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-item-content.client .logo-container .icon, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-item-content.client .logo-container .icon, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-item-content.client .logo-container .icon, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-item-content.client .logo-container .icon {
  background: var(--icon-menu-clients, url("../img/svg/SidebariconClientsNormal.svg")) no-repeat;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-item-content.insight .logo-container .icon, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-item-content.insight .logo-container .icon, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-item-content.insight .logo-container .icon, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-item-content.insight .logo-container .icon {
  background: var(--icon-menu-insight, url("../img/svg/SidebariconInsightNormal.svg")) no-repeat;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-item-content.log .logo-container .icon, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-item-content.log .logo-container .icon, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-item-content.log .logo-container .icon, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-item-content.log .logo-container .icon {
  background: var(--icon-menu-log, url("../img/svg/SidebariconLogNormal.svg")) no-repeat;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-item-content.siteMap .logo-container .icon, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-item-content.siteMap .logo-container .icon, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-item-content.siteMap .logo-container .icon, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-item-content.siteMap .logo-container .icon {
  background: var(--icon-menu-siteNormal, url("../img/svg/SidebariconSiteNormal.svg")) no-repeat;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-content-container li, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-content-container li, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-content-container li, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-content-container li {
  border: 1px solid var(--tutorial-color-border, #C2C5C9);
  border-radius: 3px;
  margin-bottom: 8px;
  font-size: 16px;
  color: #C2C5C9;
  letter-spacing: 0;
  height: 42px;
  line-height: 40px;
  padding: 0 20px;
  position: relative;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-content-container li.selected, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-content-container li.selected, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-content-container li.selected, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-content-container li.selected {
  background: rgba(4, 146, 235, 0.1);
  border: none;
  border-left: 4px solid #0492EB;
  color: #0492EB;
}
@keyframes progressbar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-content-container li.selected[data-key=siteMap]:after, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-content-container li.selected[data-key=siteMap]:after, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-content-container li.selected[data-key=siteMap]:after, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-content-container li.selected[data-key=siteMap]:after {
  animation: 11s linear progressbar;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-content-container li.selected[data-key=dashboard]:after, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-content-container li.selected[data-key=dashboard]:after, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-content-container li.selected[data-key=dashboard]:after, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-content-container li.selected[data-key=dashboard]:after {
  animation: 9s linear progressbar;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-content-container li.selected[data-key=stats]:after, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-content-container li.selected[data-key=stats]:after, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-content-container li.selected[data-key=stats]:after, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-content-container li.selected[data-key=stats]:after {
  animation: 9.9583333333s linear progressbar;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-content-container li.selected[data-key=map]:after, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-content-container li.selected[data-key=map]:after, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-content-container li.selected[data-key=map]:after, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-content-container li.selected[data-key=map]:after {
  animation: 9.0416666667s linear progressbar;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-content-container li.selected[data-key=device]:after, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-content-container li.selected[data-key=device]:after, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-content-container li.selected[data-key=device]:after, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-content-container li.selected[data-key=device]:after {
  animation: 22s linear progressbar;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-content-container li.selected[data-key=client]:after, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-content-container li.selected[data-key=client]:after, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-content-container li.selected[data-key=client]:after, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-content-container li.selected[data-key=client]:after {
  animation: 16.9583333333s linear progressbar;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-content-container li.selected[data-key=insight]:after, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-content-container li.selected[data-key=insight]:after, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-content-container li.selected[data-key=insight]:after, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-content-container li.selected[data-key=insight]:after {
  animation: 9.9583333333s linear progressbar;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-content-container li.selected[data-key=log]:after, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-content-container li.selected[data-key=log]:after, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-content-container li.selected[data-key=log]:after, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-content-container li.selected[data-key=log]:after {
  animation: 10.5s linear progressbar;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-content-container li.selected:after, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-content-container li.selected:after, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-content-container li.selected:after, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-content-container li.selected:after {
  left: 0;
  bottom: 0;
  content: " ";
  position: absolute;
  height: 2px;
  background-color: #0492EB;
  border-radius: 1px;
  width: 100%;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-content-container li.selected .dashboard .logo-container .icon, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-content-container li.selected .dashboard .logo-container .icon, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-content-container li.selected .dashboard .logo-container .icon, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-content-container li.selected .dashboard .logo-container .icon {
  opacity: 1;
  background: url("../img/svg/SidebariconDashboardBlue.svg") no-repeat;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-content-container li.selected .stats .logo-container .icon, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-content-container li.selected .stats .logo-container .icon, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-content-container li.selected .stats .logo-container .icon, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-content-container li.selected .stats .logo-container .icon {
  opacity: 1;
  background: url("../img/svg/SidebariconStatisticsBlue.svg") no-repeat;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-content-container li.selected .map .logo-container .icon, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-content-container li.selected .map .logo-container .icon, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-content-container li.selected .map .logo-container .icon, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-content-container li.selected .map .logo-container .icon {
  opacity: 1;
  background: url("../img/svg/SidebariconMapBlue.svg") no-repeat;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-content-container li.selected .device .logo-container .icon, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-content-container li.selected .device .logo-container .icon, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-content-container li.selected .device .logo-container .icon, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-content-container li.selected .device .logo-container .icon {
  opacity: 1;
  background: url("../img/svg/SidebariconDevicesBlue.svg") no-repeat;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-content-container li.selected .client .logo-container .icon, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-content-container li.selected .client .logo-container .icon, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-content-container li.selected .client .logo-container .icon, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-content-container li.selected .client .logo-container .icon {
  opacity: 1;
  background: url("../img/svg/SidebariconClientsBlue.svg") no-repeat;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-content-container li.selected .insight .logo-container .icon, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-content-container li.selected .insight .logo-container .icon, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-content-container li.selected .insight .logo-container .icon, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-content-container li.selected .insight .logo-container .icon {
  opacity: 1;
  background: url("../img/svg/SidebariconInsightBlue.svg") no-repeat;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-content-container li.selected .log .logo-container .icon, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-content-container li.selected .log .logo-container .icon, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-content-container li.selected .log .logo-container .icon, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-content-container li.selected .log .logo-container .icon {
  opacity: 1;
  background: url("../img/svg/SidebariconLogBlue.svg") no-repeat;
}
#tutorial-view .tutorial-slick .monitor-function #networkMonitorList .devicesList-content-container li.selected .siteMap .logo-container .icon, #tutorial-view .tutorial-slick .monitor-function #siteAnimationList .devicesList-content-container li.selected .siteMap .logo-container .icon, #tutorial-view .tutorial-slick .site-management #networkMonitorList .devicesList-content-container li.selected .siteMap .logo-container .icon, #tutorial-view .tutorial-slick .site-management #siteAnimationList .devicesList-content-container li.selected .siteMap .logo-container .icon {
  opacity: 1;
  background: url("../img/svg/SidebariconSiteBlue.svg") no-repeat;
}
#tutorial-view .tutorial-slick .monitor-function .text-field .tutorial-item-icon, #tutorial-view .tutorial-slick .site-management .text-field .tutorial-item-icon {
  background: url(../img/tutorial/svg/MonitorFunction.svg) no-repeat;
}
#tutorial-view .tutorial-slick .account-management .text-field .tutorial-item-icon {
  background: url(../img/tutorial/svg/AccountManagement.svg) no-repeat;
}
#tutorial-view .tutorial-slick .settings .screenshot {
  width: 910px;
  height: 566px;
  background: var(--tutorial-img-settings, url(../img/tutorial/settings.jpg)) no-repeat;
  background-size: cover;
  border-radius: 12px;
  box-shadow: var(--tutorial-img-box-shadow, 0 4px 10px 0 rgba(154, 161, 173, 0.4));
}
#tutorial-view .tutorial-slick .settings .screenshot .horizontal-line {
  border-top: 1px solid #0492EB;
}
#tutorial-view .tutorial-slick .settings .screenshot .horizontal-line.profile {
  top: 301px;
  left: 179px;
  width: 320px;
}
#tutorial-view .tutorial-slick .settings .screenshot .horizontal-line.authentication {
  top: 407px;
  left: 153px;
  width: 53px;
}
#tutorial-view .tutorial-slick .settings .screenshot .horizontal-line.start:before {
  background: #0492EB;
}
#tutorial-view .tutorial-slick .settings .screenshot .horizontal-line.start.wired {
  top: 119px;
  left: 126px;
  width: 82px;
}
#tutorial-view .tutorial-slick .settings .screenshot .horizontal-line.start.security {
  top: 179px;
  left: 126px;
  width: 370px;
}
#tutorial-view .tutorial-slick .settings .screenshot .horizontal-line.start.transmission {
  top: 209px;
  left: 126px;
  width: 81px;
}
#tutorial-view .tutorial-slick .settings .screenshot .horizontal-line.start.profile {
  top: 270px;
  left: 126px;
  width: 53px;
}
#tutorial-view .tutorial-slick .settings .screenshot .horizontal-line.start.services {
  top: 330px;
  left: 126px;
  width: 370px;
}
#tutorial-view .tutorial-slick .settings .screenshot .horizontal-line.start.authentication {
  top: 300px;
  left: 126px;
  width: 27px;
}
#tutorial-view .tutorial-slick .settings .screenshot .vertical-line {
  border-left: 1px solid #0492EB;
}
#tutorial-view .tutorial-slick .settings .screenshot .vertical-line.profile {
  top: 270px;
  left: 179px;
  height: 31px;
}
#tutorial-view .tutorial-slick .settings .screenshot .vertical-line.authentication {
  top: 300px;
  left: 153px;
  height: 107px;
}
#tutorial-view .tutorial-slick .settings .screenshot div.tutorial-help-list.wired-setting {
  top: 89px;
  left: 207px;
}
#tutorial-view .tutorial-slick .settings .screenshot div.tutorial-help-list.security-setting {
  top: 80px;
  left: 495px;
}
#tutorial-view .tutorial-slick .settings .screenshot div.tutorial-help-list.transmission-setting {
  top: 188px;
  left: 207px;
}
#tutorial-view .tutorial-slick .settings .screenshot div.tutorial-help-list.profile-setting {
  top: 198px;
  left: 495px;
}
#tutorial-view .tutorial-slick .settings .screenshot div.tutorial-help-list.services-setting {
  top: 312px;
  left: 495px;
}
#tutorial-view .tutorial-slick .settings .screenshot div.tutorial-help-list.authentication-setting {
  top: 352px;
  left: 207px;
}
#tutorial-view .tutorial-slick .settings .screenshot div.tutorial-help-list ul {
  background: #0492EB;
}
#tutorial-view .tutorial-slick .settings .text-field .tutorial-item-icon {
  background: url(../img/tutorial/svg/Settings.svg) no-repeat;
}
#tutorial-view .tutorial-slick .done .screenshot {
  flex-basis: auto;
  margin: 0;
}
#tutorial-view .tutorial-slick .done .screenshot-text-tip {
  text-align: center;
  font-size: 20px;
  color: var(--tutorial-color-note, #333333);
  letter-spacing: 0;
  line-height: 21px;
  margin: 0;
}
#tutorial-view .prev-next-container {
  position: absolute;
  bottom: 50%;
  transform: translateY(-50%);
  font-size: 0;
}
#tutorial-view .prev-next-container .icon {
  cursor: pointer;
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 18px;
}
#tutorial-view .prev-next-container .icon.next {
  background: url(../img/tutorial/svg/next.svg) no-repeat;
}
#tutorial-view .prev-next-container .icon.prev {
  display: none;
  background: url(../img/tutorial/svg/prev.svg) no-repeat;
}
#tutorial-view .prev-next-container .icon:hover {
  opacity: 0.6;
}
#tutorial-view .prev-next-container.prev {
  left: 40px;
}
#tutorial-view .prev-next-container.next {
  right: 40px;
}
#tutorial-view .tutorial-bottom {
  font-size: 0;
  text-align: center;
}
#tutorial-view .tutorial-bottom ul {
  margin-top: 30px;
  margin-bottom: 2px;
  display: inline-block;
}
#tutorial-view .tutorial-bottom ul li {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background: var(--tutorial-bg-dots, #C5CAD1);
  margin: 0 10px;
}
#tutorial-view .tutorial-bottom ul li.active {
  background: #0492EB;
}

#feedback-msg .msg-wrap {
  width: 540px;
}
#feedback-msg .msg-title {
  padding: 30px 0 0 0;
  text-align: center;
  font-size: 22px;
  background: var(--msg-background-content, #ffffff);
  height: auto;
}
#feedback-msg .msg-content-container {
  padding-top: 15px;
}
#feedback-msg .feedback-info {
  text-align: center;
  padding: 0 60px;
  font-size: 14px;
  margin-bottom: 40px;
}
#feedback-msg .feedback-version {
  color: var(--msg-color-content, #363e4d);
  font-weight: 400;
}
#feedback-msg .feedback-support {
  color: var(--tab-color-primary, #868E93);
}
#feedback-msg .feedback-score {
  text-align: center;
  margin-bottom: 0;
}
#feedback-msg .feedback-score .score-wrap-outer {
  width: 100%;
}
#feedback-msg .feedback-score .score-tip {
  line-height: 22px;
  margin: 12px 0 20px 0;
  font-size: 17px;
  font-weight: 500;
}
#feedback-msg .feedback-score .textarea-container {
  margin-bottom: 0;
}
#feedback-msg .feedback-score .textarea-container textarea {
  font-size: 14px;
  color: var(--msg-color-content, #363e4d);
}
#feedback-msg .opt-btns {
  position: relative;
}
#feedback-msg .opt-btns .button-container {
  margin-bottom: 0;
}
#feedback-msg .opt-btns .feedback-hide-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 32px;
  line-height: 32px;
}

#feedback-icon {
  display: none !important;
  width: 36px;
  height: 36px;
  position: fixed;
  z-index: 2;
  bottom: 30px;
  right: 20px;
  background: url("../img/Feedback2.png");
  cursor: pointer;
}

.exclude-ap-span {
  font-size: 14px;
  color: var(--s-color-text-primary, #212121);
  font-weight: bold;
  top: 8px;
  position: relative;
}

#AI-apply-setting .widget-fieldlabel-wrap {
  width: 240px;
}
#AI-apply-setting .channel .widget-fieldlabel-wrap {
  width: auto;
}
#AI-apply-setting .apply-loading-content {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
#AI-apply-setting .loading-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  animation: circle 1s infinite linear;
  -webkit-animation: circle 1s infinite linear;
  /* Safari,Chrome */
  background: url(../img/svg/Loading.svg);
}
#AI-apply-setting .top-minus {
  margin-top: -55px;
}

#ex-panel {
  padding: 0 30px 20px;
}
#ex-panel .panel-header {
  display: none;
}

#AI-RF-Planing-history-grid .channel-planning-icon {
  height: 20px;
  width: 20px;
  background: url(../img/svg/aiRf/channel_Plannning.svg) no-repeat;
}
#AI-RF-Planing-history-grid .power-planning-icon {
  height: 20px;
  width: 20px;
  background: url(../img/svg/aiRf/power_Adjustment.svg) no-repeat;
}
#AI-RF-Planing-history-grid .tooltip-container {
  position: static;
  font-size: inherit;
}

#add-ex-ap-msg .msg-content-container {
  max-height: 600px;
}

.failed-result {
  width: 17px;
  height: 15px;
  background-image: url(../img/svg/Failed.svg);
}

.tip-support .icon {
  width: 16px;
  height: 18px;
  background: url(../img/svg/dashboard/tip.svg) no-repeat;
}

.failed-span {
  font-size: 14px;
  color: #FF2954;
  vertical-align: middle;
  margin-left: 5px;
}

.gray-span {
  font-size: 14px;
  color: #49546B;
  margin-right: 3px;
}

.poor-span {
  font-size: 14px;
  color: #FF2954;
  margin-right: 3px;
}

.medium-span {
  font-size: 14px;
  color: #F7B500;
  margin-right: 3px;
}

.good-span {
  font-size: 14px;
  color: #28B71F;
  margin-right: 3px;
}

.btn-detail .icon {
  width: 24px;
  height: 24px;
  background-image: url(../img/svg/Detail.svg);
}

/* -------------------------------------------------------------------------- */
/*                                 AI-RF-Toast                                 */
/* -------------------------------------------------------------------------- */
#scan-apply-msg .scan-percent-info-icon, #scan-apply-msg-failed .scan-percent-info-icon, #apply-percent-msg .scan-percent-info-icon {
  height: 24px;
  background: url(../img/svg/MessageIconInfo.svg) no-repeat;
  width: 24px;
}
#scan-apply-msg #planning-apply-tip, #scan-apply-msg-failed #planning-apply-tip, #apply-percent-msg #planning-apply-tip {
  width: 340px;
}
#scan-apply-msg .title-AI-RF-scan, #scan-apply-msg-failed .title-AI-RF-scan, #apply-percent-msg .title-AI-RF-scan {
  font-size: 16px;
  line-height: 24px;
  margin-left: 10px;
}
#scan-apply-msg .scan-apply-title-line, #scan-apply-msg-failed .scan-apply-title-line, #apply-percent-msg .scan-apply-title-line {
  display: flex;
  margin: 24px 24px 15px;
}
#scan-apply-msg .position-center-left, #scan-apply-msg-failed .position-center-left, #apply-percent-msg .position-center-left {
  width: 460px;
}
#scan-apply-msg .position-center-left .msg-title, #scan-apply-msg-failed .position-center-left .msg-title, #apply-percent-msg .position-center-left .msg-title {
  display: none;
}
#scan-apply-msg .msg-title, #scan-apply-msg-failed .msg-title, #apply-percent-msg .msg-title {
  background: var(--msg-background-content, #ffffff);
  height: 0;
}
#scan-apply-msg .success-icon-AI-RF-scan, #scan-apply-msg-failed .success-icon-AI-RF-scan, #apply-percent-msg .success-icon-AI-RF-scan {
  height: 24px;
  background: url(../img/svg/MessageIconSuccess.svg) no-repeat;
  width: 24px;
}
#scan-apply-msg .up-index-line, #scan-apply-msg-failed .up-index-line, #apply-percent-msg .up-index-line {
  display: flex;
}
#scan-apply-msg .ex-AI-RF-scan-con, #scan-apply-msg-failed .ex-AI-RF-scan-con, #apply-percent-msg .ex-AI-RF-scan-con {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-left: 20px;
}
#scan-apply-msg .bef-ex-con, #scan-apply-msg-failed .bef-ex-con, #apply-percent-msg .bef-ex-con {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#scan-apply-msg .bef-ex-span, #scan-apply-msg-failed .bef-ex-span, #apply-percent-msg .bef-ex-span {
  font-size: 30px;
  color: #363E4D;
  margin-top: 15px;
}
#scan-apply-msg .aft-ex-span, #scan-apply-msg-failed .aft-ex-span, #apply-percent-msg .aft-ex-span {
  font-size: 30px;
  color: #363E4D;
  margin: 15px 0 -50px;
}
#scan-apply-msg .bef-ex-span-title, #scan-apply-msg-failed .bef-ex-span-title, #apply-percent-msg .bef-ex-span-title {
  font-size: 11px;
  color: #363E4D;
}
#scan-apply-msg .bef-ex-per, #scan-apply-msg-failed .bef-ex-per, #apply-percent-msg .bef-ex-per {
  font-size: 12px;
  color: #363E4D;
  vertical-align: top;
}
#scan-apply-msg .ex-AI-RF-scan-tip, #scan-apply-msg-failed .ex-AI-RF-scan-tip, #apply-percent-msg .ex-AI-RF-scan-tip {
  font-size: 14px;
  color: #363E4D;
  line-height: 20px;
  margin: 24px 0 20px 24px;
  width: 500px;
}
#scan-apply-msg .msg-content-container, #scan-apply-msg-failed .msg-content-container, #apply-percent-msg .msg-content-container {
  padding: 0 24px;
}
#scan-apply-msg .position-center-left, #scan-apply-msg-failed .position-center-left, #apply-percent-msg .position-center-left {
  width: 400px;
}
#scan-apply-msg .msg-title, #scan-apply-msg-failed .msg-title, #apply-percent-msg .msg-title {
  background: var(--msg-background-content, #ffffff);
  height: auto;
  padding: 0;
}
#scan-apply-msg .ex-AI-RF-scan-tip-failed, #scan-apply-msg-failed .ex-AI-RF-scan-tip-failed, #apply-percent-msg .ex-AI-RF-scan-tip-failed {
  font-size: 14px;
  color: #363E4D;
  line-height: 20px;
  margin: 0 0 20px 40px;
  width: 312px;
}
#scan-apply-msg .failed-icon-AI-RF-scan, #scan-apply-msg-failed .failed-icon-AI-RF-scan, #apply-percent-msg .failed-icon-AI-RF-scan {
  height: 24px;
  background: url(../img/svg/MessageIconFailed.svg) no-repeat;
  width: 24px;
}
#scan-apply-msg .ex-up-img-yellow, #scan-apply-msg-failed .ex-up-img-yellow, #apply-percent-msg .ex-up-img-yellow {
  height: 20px;
  width: 24px;
  background: url(../img/svg/aiRf/up_yellow.svg) no-repeat;
}
#scan-apply-msg .ex-up-img-orange, #scan-apply-msg-failed .ex-up-img-orange, #apply-percent-msg .ex-up-img-orange {
  height: 20px;
  width: 24px;
  background: url(../img/svg/aiRf/up_orange.svg) no-repeat;
}
#scan-apply-msg .ex-up-img-green, #scan-apply-msg-failed .ex-up-img-green, #apply-percent-msg .ex-up-img-green {
  height: 20px;
  width: 24px;
  background: url(../img/svg/aiRf/up_green.svg) no-repeat;
}
#scan-apply-msg .aft-ex-img-green, #scan-apply-msg-failed .aft-ex-img-green, #apply-percent-msg .aft-ex-img-green {
  width: 114px;
  height: 71px;
  background: url(../img/rfPlanning/aft_green.png) no-repeat 0 0/100% 100%;
}
#scan-apply-msg .aft-ex-img-orange, #scan-apply-msg-failed .aft-ex-img-orange, #apply-percent-msg .aft-ex-img-orange {
  width: 114px;
  height: 71px;
  background: url(../img/rfPlanning/aft_orange.png) no-repeat 0 0/100% 100%;
}
#scan-apply-msg .aft-ex-img-yellow, #scan-apply-msg-failed .aft-ex-img-yellow, #apply-percent-msg .aft-ex-img-yellow {
  width: 114px;
  height: 71px;
  background: url(../img/rfPlanning/aft_yellow.png) no-repeat 0 0/100% 100%;
}
#scan-apply-msg .bef-ex-img-green, #scan-apply-msg-failed .bef-ex-img-green, #apply-percent-msg .bef-ex-img-green {
  width: 114px;
  height: 21px;
  background: url(../img/rfPlanning/green.png) no-repeat 0 0/100% 100%;
}
#scan-apply-msg .bef-ex-img-orange, #scan-apply-msg-failed .bef-ex-img-orange, #apply-percent-msg .bef-ex-img-orange {
  width: 114px;
  height: 21px;
  background: url(../img/rfPlanning/orange.png) no-repeat 0 0/100% 100%;
}
#scan-apply-msg .bef-ex-img-yellow, #scan-apply-msg-failed .bef-ex-img-yellow, #apply-percent-msg .bef-ex-img-yellow {
  width: 114px;
  height: 21px;
  background: url(../img/rfPlanning/yellow.png) no-repeat 0 0/100% 100%;
}

.ex-up-per-green {
  color: #0dc901;
  font-size: 16px;
  margin-left: 5px;
  vertical-align: middle;
}

.ex-up-per-orange {
  color: #ff2954;
  font-size: 16px;
  margin-left: 5px;
  vertical-align: middle;
}

.ex-up-per-yellow {
  color: #f7b500;
  font-size: 16px;
  margin-left: 5px;
  vertical-align: middle;
}

#scan-toast-apply {
  float: right;
  margin-right: 30px;
}

#scan-toast-detail {
  float: right;
  margin-right: 140px;
}

#scan-detail-msg .msg-content-container, #planning-history-detail-msg .msg-content-container, #add-ex-ap-msg .msg-content-container {
  max-height: 600px;
}
#scan-detail-msg .line-block, #planning-history-detail-msg .line-block, #add-ex-ap-msg .line-block {
  display: block;
}
#scan-detail-msg .channel-span, #planning-history-detail-msg .channel-span, #add-ex-ap-msg .channel-span {
  width: 30px;
  height: 13px;
  display: inline-block;
}
#scan-detail-msg .width-span, #planning-history-detail-msg .width-span, #add-ex-ap-msg .width-span {
  width: 58px;
  height: 13px;
  display: inline-block;
}
#scan-detail-msg .msg-content-wrap, #planning-history-detail-msg .msg-content-wrap, #add-ex-ap-msg .msg-content-wrap {
  width: 1100px;
}
#scan-detail-msg .position-center-left, #planning-history-detail-msg .position-center-left, #add-ex-ap-msg .position-center-left {
  width: 1100px;
}

.lastExTip {
  min-width: 330px;
  height: 200px;
}

.lastExTitleCon {
  height: 30px;
  border-bottom: 1px solid rgba(151, 151, 151, 0.5);
  margin: 0 10px;
}

.lastExTitleSpan {
  font-size: 15px;
  font-weight: bold;
  color: var(--s-color-text-primary, #212121);
}

.lastExItemLine {
  display: flex;
  margin: 5px 10px;
  justify-content: space-between;
}
.lastExItemLine.bottomBor {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(151, 151, 151, 0.5);
}

.after-index-con {
  display: flex;
}

.lastLineSpan {
  font-size: 14px;
  color: var(--panel-color-label, #747474);
  margin-right: 10px;
}

.lastLineSpanBef-orange {
  font-size: 14px;
  color: #ff2954;
}

.lastLineSpanBef-green {
  font-size: 14px;
  color: #0DC901;
}

.lastLineSpanBef-yellow {
  font-size: 14px;
  color: #FF7700;
}

.lastLineUpGray {
  height: 20px;
  width: 24px;
  background: url(../img/svg/aiRf/up_gray.svg) no-repeat;
}

.lastLineUpGrayDark {
  height: 20px;
  width: 24px;
  background: url(../img/svg/aiRf/up_gray_dark.svg) no-repeat;
}

.lastLineUp-green {
  height: 20px;
  width: 24px;
  background: url(../img/svg/aiRf/up_green.svg) no-repeat;
}

.lastLineUp-orange {
  height: 20px;
  width: 24px;
  background: url(../img/svg/aiRf/up_orange.svg) no-repeat;
}

.lastLineUp-yellow {
  height: 20px;
  width: 24px;
  background: url(../img/svg/aiRf/up_yellow.svg) no-repeat;
}

.lastLineSpanAftGreen {
  font-size: 14px;
  color: #0DC901;
}

.lastLineSpanAftGray {
  font-size: 14px;
  color: var(--s-color-text-primary, #212121);
}

.lastLineIsSucess {
  width: 18px;
  height: 18px;
  background: url(../img/svg/dashboard/correct.svg);
}

.lastLineIsFail {
  font-size: 14px;
  color: var(--s-color-text-primary, #212121);
}

.grid-up-gray {
  height: 15px;
  width: 16px;
  display: inline-block;
  background: url(../img/svg/aiRf/up_gray.svg) no-repeat;
  margin: 0 4px -3px 15px;
}

.grid-up-green {
  height: 15px;
  width: 16px;
  display: inline-block;
  background: url(../img/svg/aiRf/up_green.svg) no-repeat;
  margin: 0 4px -3px 15px;
}

.grid-up-orange {
  height: 15px;
  width: 16px;
  display: inline-block;
  background: url(../img/svg/aiRf/up_orange.svg) no-repeat;
  margin: 0 4px -3px 15px;
}

.grid-up-yellow {
  height: 15px;
  width: 16px;
  display: inline-block;
  background: url(../img/svg/aiRf/up_yellow.svg) no-repeat;
  margin: 0 4px -3px 15px;
}

#last-10-scan-panel .empty-tip {
  display: none;
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  text-align: center;
}
#last-10-scan-panel div[widget=echart] {
  position: relative;
}
#last-10-scan-panel div[widget=echart].empty {
  background: url(../img/NoDate.png) no-repeat 50% 25%;
  background-size: 120px 120px;
}
#last-10-scan-panel div[widget=echart].empty .empty-tip {
  display: block;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 25%;
}

#licenseView #buy-license {
  right: 30px;
}
#licenseView #buy-license .button-button {
  background-color: #0DC901;
}
#licenseView .change-category {
  right: 210px;
}
#licenseView.has-drawer #buy-license {
  right: 64px;
}
#licenseView.has-drawer .change-category {
  right: 244px;
}
#licenseView.has-drawer #license-history-view #date-change-field {
  right: 262px;
}
#licenseView.has-drawer #license-history-view #date-choose-field {
  right: 72px;
}
#licenseView.has-drawer .license-action-container {
  right: 34px;
}
#licenseView .summary .license-portal {
  position: absolute;
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/svg/LicenseLaunch.svg);
  top: 0;
  right: 0;
  cursor: pointer;
}
#licenseView .summary .license-portal:hover {
  background: url(../img/svg/LicenseLaunchHover.svg);
}
#licenseView .summary .panel-content-container {
  display: flex;
  position: relative;
}
#licenseView .summary #license-type-filter,
#licenseView .summary #license-status-filter {
  position: absolute;
  top: -46px;
  right: 0;
}
#licenseView .summary .summary-category {
  margin: 20px 0;
  position: relative;
  font-size: 20px;
  padding-top: 10px;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
#licenseView .summary .summary-category .trail-tip {
  position: absolute;
  top: -36px;
  left: 0;
  font-size: 14px;
  color: var(--s-color-text-secondary);
}
#licenseView .summary .summary-category .summary-title {
  position: absolute;
  top: 0;
  left: 0;
}
#licenseView .summary .summary-category .summary-total .text-wrap-display {
  color: var(--s-color-text-primary);
}
#licenseView .summary .summary-category div[widget=displaylabel] {
  color: var(--tag-license-color-unassign);
  display: inline-block;
  margin-right: 20px;
}
#licenseView .summary .summary-category div[widget=displaylabel].active {
  color: #0DC901;
}
#licenseView .summary .summary-category div[widget=displaylabel].expiring {
  color: #f49f00;
}
#licenseView .summary .summary-category div[widget=displaylabel].expired {
  color: #99a6b6;
}
#licenseView .summary .summary-category div[widget=displaylabel].inactive {
  color: #0492eb;
}
#licenseView .summary .summary-category div[widget=displaylabel].used {
  color: #582eff;
}
#licenseView .summary .summary-category div[widget=displaylabel] .widget-wrap-outer {
  text-align: center;
}
#licenseView .summary .summary-category div[widget=displaylabel] .widget-wrap-outer .widget-wrap {
  font-size: 32px;
}
#licenseView .summary .summary-category div[widget=displaylabel] .widget-tips {
  margin-top: 14px;
  display: block;
}
#licenseView .summary .summary-category div[widget=displaylabel] .widget-tips .tips-content {
  color: var(--s-color-text-secondary);
  font-size: 20px;
  margin-left: 0;
}
#licenseView .auto #auto-active {
  margin-bottom: 24px;
}
#licenseView .auto .switch-fieldlabel,
#licenseView .auto .title {
  font-size: 16px;
  color: var(--s-color-text-primary, #212121);
  font-weight: 700;
}
#licenseView .auto .tips {
  color: var(--tab-color-primary, #868E93);
  font-size: 15px;
}
#licenseView #license-filter {
  position: absolute;
  left: 0;
}

#license-management-view,
#license-assignment {
  min-width: 1200px;
  position: relative;
}
#license-management-view .license-action-container,
#license-assignment .license-action-container {
  display: flex;
  position: absolute;
  top: -46px;
  right: 0;
}
#license-management-view .license-action-container .button-container,
#license-assignment .license-action-container .button-container {
  margin-left: 10px;
}
#license-management-view #export-license-btn,
#license-assignment #export-license-btn {
  margin-right: 10px;
}
#license-management-view #export-license-btn .button-button,
#license-assignment #export-license-btn .button-button {
  border: none;
  padding: 0;
}
#license-management-view #export-license-btn .button-button:hover,
#license-assignment #export-license-btn .button-button:hover {
  background: transparent;
}
#license-management-view #offline-import-btn .button-button,
#license-assignment #offline-import-btn .button-button {
  background: var(--s-color-warning);
}
#license-management-view #offline-import-btn .button-button:hover,
#license-assignment #offline-import-btn .button-button:hover {
  background: var(--s-color-warning-hover);
}
#license-management-view #recycle-license-btn .button-button,
#license-assignment #recycle-license-btn .button-button {
  background: var(--s-color-success);
}
#license-management-view #recycle-license-btn .button-button:hover,
#license-assignment #recycle-license-btn .button-button:hover {
  background: var(--tag-license-color-on-hover);
}
#license-management-view #assign-license-record .operation-type,
#license-assignment #assign-license-record .operation-type {
  padding: 5px 10px;
}
#license-management-view #assign-license-record .operation-type.type-0,
#license-assignment #assign-license-record .operation-type.type-0 {
  color: var(--s-color-success);
  border: 1px solid var(--s-color-success);
}
#license-management-view #assign-license-record .operation-type.type-1,
#license-assignment #assign-license-record .operation-type.type-1 {
  color: var(--s-color-button-primary, #0492eb);
  border: 1px solid var(--s-color-button-primary, #0492eb);
}

#license-info-view {
  min-width: 1200px;
}
#license-info-view .license-info-grid-filter {
  position: absolute;
  left: 230px;
  white-space: nowrap;
}
#license-info-view #license-info-grid .license-status {
  line-height: 16px;
  display: inline-block;
  padding: 5px 10px;
  border-radius: 14px;
  margin: 5px 10px 5px 0;
}
#license-info-view #license-info-grid .license-status.activated {
  color: var(--tag-license-color-on, #0DC901);
  background-color: var(--tag-license-bg-on, #dcf4de);
}
#license-info-view #license-info-grid .license-status.expired {
  color: var(--tag-license-color-off, #a2a3a8);
  background-color: var(--tag-license-bg-off, #e7e8ec);
}
#license-info-view #license-info-grid .license-status.unassigned {
  color: var(--tag-license-color-unassign, #0492eb);
  background-color: var(--tag-license-bg-unassign, #cee3fe);
}
#license-info-view #license-info-grid .license-status.unactivated {
  color: var(--tag-license-color-unactivated, #414352);
  background-color: var(--tag-license-bg-unactivated, #cfcdce);
}
#license-info-view #license-info-grid .license-status.expired-time-tag {
  color: var(--tag-license-color-notice, #f49f00);
  background-color: var(--tag-license-bg-notice, #ffe7ce);
}

#license-history-view {
  min-width: 1400px;
}
#license-history-view .device-name {
  vertical-align: baseline;
}
#license-history-view #license-date-reduce .button-button,
#license-history-view #license-date-add .button-button {
  padding: 0 2px 0 2px;
  border: 1px solid var(--components-border-primary, #BEC3C5);
}
#license-history-view #license-date-reduce .button-text,
#license-history-view #license-date-add .button-text {
  display: none;
}
#license-history-view #license-date-reduce .button-icon,
#license-history-view #license-date-add .button-icon {
  margin-right: 0;
}
#license-history-view #license-date-reduce .button-wrap-outer,
#license-history-view #license-date-add .button-wrap-outer {
  font-size: 14px;
}
#license-history-view #license-date-add .button-button {
  border-radius: 0 3px 3px 0;
}
#license-history-view #license-date-reduce .button-button {
  border-radius: 3px 0 0 3px;
}
#license-history-view #license-date-display .text-wrap {
  border-top: 1px solid var(--components-border-primary, #BEC3C5);
  border-bottom: 1px solid var(--components-border-primary, #BEC3C5);
  border-left: none;
  border-right: none;
  border-radius: 0;
  height: 32px;
  line-height: 32px;
  max-width: 300px;
  width: 270px;
}
#license-history-view #license-date-display input {
  text-align: center;
  width: 250px;
}
#license-history-view #date-change-field {
  position: absolute;
  right: 220px;
  top: 17px;
  margin-bottom: 0;
}
#license-history-view #date-choose-field {
  display: inline-block;
  position: absolute;
  right: 30px;
  top: 17px;
}
#license-history-view #date-choose-field.transition-right {
  right: 30px;
}
#license-history-view #license-log-search {
  display: inline-block;
  vertical-align: top;
}
#license-history-view .license-detail {
  display: inline-block;
  width: 24px;
  height: 24px;
  cursor: pointer;
  background: url(../img/svg/TabsIconProfilesSelected.svg);
}
#license-history-view .license-detail:hover {
  opacity: 0.6;
}
#license-history-view .license-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}
#license-history-view .auto-active {
  background-image: url("../img/activation.png");
}
#license-history-view .auto-renew {
  background-image: url("../img/Auto-Renew.png");
}
#license-history-view .manual-active {
  background-image: url("../img/ManualActive.png");
}
#license-history-view .unbind,
#license-history-view .auto-unbind {
  background-size: cover;
  background-image: url("../img/Unbind.png");
}

#license-detail-msg div[widget=displaylabel] {
  vertical-align: middle;
  display: inline-block;
  margin-right: 20px;
}
#license-detail-msg div[widget=displaylabel] .widget-fieldlabel-wrap {
  color: var(--tab-color-primary, #868E93);
  display: block;
}
#license-detail-msg div[widget=displaylabel] .text-wrap-display {
  font-size: 14px;
  color: var(--s-color-text-primary, #212121);
  font-weight: 700;
}
#license-detail-msg div[widget=displaylabel] .text-wrap-display .grid-time-year {
  font-size: 14px;
  color: var(--s-color-text-primary, #212121);
  font-weight: 700;
}
#license-detail-msg div[widget=displaylabel] .text-wrap-display .grid-time-day {
  font-size: 14px;
}
#license-detail-msg #license-detail-mode.auto-active .text-wrap-before {
  margin-right: 5.4px;
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
  background-size: cover;
  background-image: url("../img/activation.png");
}
#license-detail-msg #license-detail-mode.auto-renew .text-wrap-before {
  margin-right: 5.4px;
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
  background-size: cover;
  background-image: url("../img/Auto-Renew.png");
}
#license-detail-msg #license-detail-mode.manual-active .text-wrap-before {
  margin-right: 5.4px;
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
  background-size: cover;
  background-image: url("../img/ManualActive.png");
}
#license-detail-msg #license-detail-mode.unbind .text-wrap-before, #license-detail-msg #license-detail-mode.auto-unbind .text-wrap-before {
  margin-right: 5.4px;
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
  background-size: cover;
  background-image: url("../img/Unbind.png");
}

.category-type-wrap {
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
  line-height: 20px;
  padding: 0 4px;
  border-radius: 2px;
}
.category-type-wrap.advanced {
  border: 1px solid #0492EB;
  color: #0492EB;
}
.category-type-wrap.pro {
  border: 1px solid #374FD5;
  color: #374FD5;
}

.active-license-msg.msg-container {
  padding-top: 0;
  width: 100%;
  height: 100%;
  z-index: 700;
}
.active-license-msg.msg-container .msg-wrap {
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
}
.active-license-msg.msg-container .msg-close {
  z-index: 710;
}
.active-license-msg.msg-container .msg-content-container {
  max-height: calc(100vh - 64px);
}
.active-license-msg.msg-container .active-license-view {
  position: relative;
  height: 100vh;
  width: 1240px;
  margin: 0 auto;
}
.active-license-msg.msg-container .omada-wizard-title {
  font-size: 24px;
}
.active-license-msg.msg-container .bottom-button-container {
  position: fixed;
  height: 56px;
  width: 1240px;
  margin: 0 auto;
  bottom: 0;
}
.active-license-msg.msg-container .bottom-button-container.widget-container {
  margin-bottom: 0;
}

#license-list-drawer {
  z-index: 720;
}
#license-list-drawer.drawer-container {
  padding-top: 0;
}

#license-changing {
  text-align: center;
}

.license-change-msg .msg-content-wrap .msg-content-container {
  padding: 24px;
}
.license-change-msg #confirm-changing-btn {
  margin-top: 28px;
}
.license-change-msg #confirm-changing-btn .button-button {
  width: 150px;
}

.license-change-icon {
  display: flex;
  align-items: center;
}
.license-change-icon .license-type-icon-container {
  margin-left: 0;
}
.license-change-icon .widget-container {
  margin-bottom: 0;
}
.license-change-icon .arrowhead-icon {
  margin: 0 20px;
}

.operation-step {
  position: relative;
  margin-bottom: 24px;
}

#offline-import-msg .offline-tip.note {
  width: 750px;
}
#offline-import-msg .offline-tip.note::before {
  top: 10px;
}
#offline-import-msg .request-code-display-container {
  position: relative;
  padding: 10px;
  width: 600px;
  background: var(--s-color-background-secondary);
}
#offline-import-msg .request-code-display-container .request-code {
  padding-right: 105px;
  word-break: break-all;
}
#offline-import-msg .request-code-display-container .request-code .widget-fieldlabel-wrap {
  display: block;
}
#offline-import-msg .request-code-display-container .request-code .widget-wrap-outer {
  font-weight: bold;
  margin-top: 8px;
}
#offline-import-msg .request-code-display-container .copy-request-code-btn {
  position: absolute;
  top: 20px;
  right: 20px;
}
#offline-import-msg .import-license-file-container {
  display: flex;
  align-items: end;
}
#offline-import-msg #import-license-file .widget-wrap-outer {
  margin-top: 12px;
}
#offline-import-msg #import-license-file .widget-wrap-outer .file-wrap {
  display: flex;
  align-items: center;
}
#offline-import-msg #import-license-file .widget-wrap-outer .file-button {
  margin-left: 10px;
}
#offline-import-msg #import-license-file .widget-wrap-outer .file-button .widget-wrap-outer {
  margin-top: 0;
}
#offline-import-msg #import-license-file .widget-wrap-outer .file-button .widget-fieldlabel-wrap {
  width: auto;
}
#offline-import-msg #import-license-file .widget-fieldlabel-wrap {
  display: block;
}

.loading-container {
  padding-right: 100px;
  text-align: center;
}

#online-import-msg .active-code-container {
  display: flex;
  align-items: start;
}

#input-license-grid .widget-wrap.text-wrap,
#add-license-grid .widget-wrap.text-wrap {
  width: auto;
}

.td-content .trial-icon {
  margin-left: 8px;
  padding: 3px 6px;
  color: var(--s-color-success);
  background: var(--s-color-background-license-trial);
  border-radius: 6px;
}

#input-license-grid .text-container.error .text-wrap,
#add-license-grid .text-container.error .text-wrap {
  background-color: transparent;
}
#input-license-grid .td-content .content:not(.error-tips-content),
#add-license-grid .td-content .content:not(.error-tips-content) {
  height: 28px;
  line-height: 28px;
}
#input-license-grid .grid-content-td,
#add-license-grid .grid-content-td {
  vertical-align: top;
  padding: 10px 50px 10px 10px;
}

#assign-license-msg .empty-license-content {
  padding-top: 30px;
}
#assign-license-msg .empty-license-content .empty-icon {
  margin: 0 auto;
}
#assign-license-msg .empty-license-content .no-license-tip {
  margin-top: 20px;
  text-align: center;
}

#global-combobox-options[data-shown=user-rate-limit-profile] .combobox-list-editor-wrap, #global-combobox-options[data-shown=voucher-rate-limit-profile] .combobox-list-editor-wrap, #global-combobox-options[data-shown=wireless-rate-limit-profile] .combobox-list-editor-wrap, #global-combobox-options[data-shown=client-rate-limit-profile] .combobox-list-editor-wrap, #global-combobox-options[data-shown=batch-rate-limit-profile] .combobox-list-editor-wrap, #global-combobox-options[data-shown=vpn-radius-server] .combobox-list-editor-wrap {
  border-top: 1px solid #EBECED;
}
#global-combobox-options[data-shown=user-rate-limit-profile] .combobox-list-editor-wrap li label, #global-combobox-options[data-shown=voucher-rate-limit-profile] .combobox-list-editor-wrap li label, #global-combobox-options[data-shown=wireless-rate-limit-profile] .combobox-list-editor-wrap li label, #global-combobox-options[data-shown=client-rate-limit-profile] .combobox-list-editor-wrap li label, #global-combobox-options[data-shown=batch-rate-limit-profile] .combobox-list-editor-wrap li label, #global-combobox-options[data-shown=vpn-radius-server] .combobox-list-editor-wrap li label {
  display: block;
  padding: 5px 16px 0px 10px;
  line-height: 1.14;
  white-space: nowrap;
  position: relative;
}
#global-combobox-options[data-shown=user-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit .transition-container, #global-combobox-options[data-shown=user-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit-in-client .transition-container, #global-combobox-options[data-shown=user-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit-in-batch .transition-container, #global-combobox-options[data-shown=voucher-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit .transition-container, #global-combobox-options[data-shown=voucher-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit-in-client .transition-container, #global-combobox-options[data-shown=voucher-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit-in-batch .transition-container, #global-combobox-options[data-shown=wireless-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit .transition-container, #global-combobox-options[data-shown=wireless-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit-in-client .transition-container, #global-combobox-options[data-shown=wireless-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit-in-batch .transition-container, #global-combobox-options[data-shown=client-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit .transition-container, #global-combobox-options[data-shown=client-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit-in-client .transition-container, #global-combobox-options[data-shown=client-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit-in-batch .transition-container, #global-combobox-options[data-shown=batch-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit .transition-container, #global-combobox-options[data-shown=batch-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit-in-client .transition-container, #global-combobox-options[data-shown=batch-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit-in-batch .transition-container, #global-combobox-options[data-shown=vpn-radius-server] .combobox-list-editor-wrap li.create-new-rate-limit .transition-container, #global-combobox-options[data-shown=vpn-radius-server] .combobox-list-editor-wrap li.create-new-rate-limit-in-client .transition-container, #global-combobox-options[data-shown=vpn-radius-server] .combobox-list-editor-wrap li.create-new-rate-limit-in-batch .transition-container {
  white-space: normal;
  vertical-align: middle;
  margin-right: 16px;
}
#global-combobox-options[data-shown=user-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit span.icon, #global-combobox-options[data-shown=user-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit-in-client span.icon, #global-combobox-options[data-shown=user-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit-in-batch span.icon, #global-combobox-options[data-shown=voucher-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit span.icon, #global-combobox-options[data-shown=voucher-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit-in-client span.icon, #global-combobox-options[data-shown=voucher-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit-in-batch span.icon, #global-combobox-options[data-shown=wireless-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit span.icon, #global-combobox-options[data-shown=wireless-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit-in-client span.icon, #global-combobox-options[data-shown=wireless-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit-in-batch span.icon, #global-combobox-options[data-shown=client-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit span.icon, #global-combobox-options[data-shown=client-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit-in-client span.icon, #global-combobox-options[data-shown=client-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit-in-batch span.icon, #global-combobox-options[data-shown=batch-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit span.icon, #global-combobox-options[data-shown=batch-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit-in-client span.icon, #global-combobox-options[data-shown=batch-rate-limit-profile] .combobox-list-editor-wrap li.create-new-rate-limit-in-batch span.icon, #global-combobox-options[data-shown=vpn-radius-server] .combobox-list-editor-wrap li.create-new-rate-limit span.icon, #global-combobox-options[data-shown=vpn-radius-server] .combobox-list-editor-wrap li.create-new-rate-limit-in-client span.icon, #global-combobox-options[data-shown=vpn-radius-server] .combobox-list-editor-wrap li.create-new-rate-limit-in-batch span.icon {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  background: var(--icon-select-add, url(../img/svg/SelectIconAdd.svg)) no-repeat;
}

#portalView .form-auth-type .form-auth-panel-title {
  font-weight: normal;
}
#portalView .form-auth-type .form-auth-info {
  position: relative;
  line-height: 28px;
}
#portalView .form-auth-type .form-auth-info .proportion {
  position: absolute;
  top: 0;
  right: 0;
  color: #AEB4B7;
  font-size: 15px;
}
#portalView .form-auth-type .form-auth-wrap {
  background: #F8F9FA;
  border-radius: 3px;
  padding: 10px;
}
#portalView .form-auth-type .form-auth-wrap .create-form-auth {
  border: 1px dashed #BEC3C5;
  border-radius: 3px;
  color: #A7A9AC;
  text-align: center;
  padding: 22px 0;
  font-size: 14px;
  cursor: pointer;
}
#portalView .form-auth-type #form-auth-list {
  margin-bottom: 0;
}
#portalView .form-auth-type #form-auth-list .devicesList-item-container {
  position: relative;
  background: #ffffff;
  padding: 22px;
  margin-bottom: 10px;
}
#portalView .form-auth-type #form-auth-list .devicesList-item-container .devicesList-item {
  padding: 0 12px;
}
#portalView .form-auth-type #form-auth-list .devicesList-item-container .devicesList-item.devicesList-item-name {
  font-weight: bold;
}
#portalView .form-auth-type #form-auth-list .devicesList-item-container .devicesList-item.devicesList-item-status .publish-wrap {
  color: #AEB4B7;
  border: 1px solid #AEB4B7;
  border-radius: 2px;
  line-height: 18px;
  padding: 2px 4px;
}
#portalView .form-auth-type #form-auth-list .devicesList-item-container .devicesList-item.devicesList-item-status .publish-wrap.published {
  color: #0dc901;
  border: 1px solid #0dc901;
}
#portalView .form-auth-type #form-auth-list .devicesList-item-container .devicesList-item.devicesList-item-action {
  position: absolute;
  right: 0;
  min-width: 200px;
  text-align: right;
}
#portalView .form-auth-type #form-auth-list .devicesList-item-container .devicesList-item.devicesList-item-action .btn-publish {
  padding: 0 10px;
  background: #0dc901;
  color: #ffffff;
  line-height: 28px;
  border-radius: 3px;
}
#portalView .form-auth-type #form-auth-list .devicesList-item-container .devicesList-item.devicesList-item-action a {
  display: inline-block;
  vertical-align: middle;
}
#portalView .form-auth-type #form-auth-list .devicesList-item-container .check-outer {
  vertical-align: middle;
  display: inline-block;
  position: relative;
  background-color: #fff;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #AEB4B7;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#portalView .form-auth-type #form-auth-list .devicesList-item-container .check-outer .check-inner {
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  background-color: #0492EB;
  border-radius: 8px;
  -webkit-transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  opacity: 0;
}
#portalView .form-auth-type #form-auth-list .devicesList-item-container.selected .check-outer {
  border: 1px solid #0492EB;
}
#portalView .form-auth-type #form-auth-list .devicesList-item-container.selected .check-outer .check-inner {
  opacity: 1;
}
#portalView .form-auth-type #form-auth-list .devicesList-item-container.disabled {
  cursor: not-allowed;
}
#portalView .form-auth-type #form-auth-list .devicesList-item-container.disabled .devicesList-item-name {
  color: #AEB4B7;
}

.form-auth-editor-msg {
  z-index: 98;
}
.form-auth-editor-msg .msg-wrap {
  height: calc(100vh - 56px);
  width: 100vw;
  background: var(--s-background-main, #f2f3f5);
}
.form-auth-editor-msg .msg-content-wrap, .form-auth-editor-msg .msg-content-container {
  overflow-y: auto;
  height: inherit;
}

#form-auth-view {
  position: relative;
}
#form-auth-view .form-auth-header {
  text-align: right;
}
#form-auth-view .form-auth-header .form-auth-title {
  color: var(--tab-color-primary, #868E93);
  float: left;
  display: inline-block;
  font-size: 16px;
  margin-top: 8px;
}
#form-auth-view .timeout-unit .combobox-wrap {
  width: 90px;
}
#form-auth-view #publish-form .button-button {
  background: #0dc901;
}
#form-auth-view .main-form-auth-field {
  position: relative;
  padding-left: 210px;
}
#form-auth-view .main-form-auth-field .card-left {
  left: 0;
  top: 0;
  position: absolute;
}
#form-auth-view .main-form-auth-field .card-left.fixed {
  left: 24px;
  position: fixed;
  top: 66px;
}
#form-auth-view .main-form-auth-field .card-type {
  display: flex;
  align-items: center;
  padding-left: 20px;
  color: var(--tab-color-primary, #868E93);
  background: var(--select-background-primary);
  border: 0 solid var(--tab-color-primary, #868E93);
  box-shadow: 2px 2px 5px 0 rgba(54, 62, 77, 0.05);
  border-radius: 3px;
  margin-bottom: 12px;
  width: 200px;
  height: 42px;
  cursor: move;
}
#form-auth-view .main-form-auth-field .card-type:hover {
  background: #0492EB;
  color: #ffffff;
}
#form-auth-view .main-form-auth-field .card-type.selected {
  background: #0492EB;
  color: #ffffff;
}
#form-auth-view .main-form-auth-field .card-type .question-icon {
  vertical-align: middle;
  display: inline-block;
  position: relative;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  flex-shrink: 0;
}
#form-auth-view .main-form-auth-field .card-type .text {
  flex-grow: 1;
}
#form-auth-view .main-form-auth-field .card-type .check-outer {
  background-color: var(--components-bg);
  border-radius: 50%;
  border: 1px solid #AEB4B7;
}
#form-auth-view .main-form-auth-field .card-type .check-outer .check-inner {
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  background-color: #AEB4B7;
  border-radius: 50%;
}
#form-auth-view .main-form-auth-field .card-type.selected .check-outer, #form-auth-view .main-form-auth-field .card-type:hover .check-outer {
  background-color: #0492EB;
  border: 1px solid #ffffff;
}
#form-auth-view .main-form-auth-field .card-type.selected .check-outer .check-inner, #form-auth-view .main-form-auth-field .card-type:hover .check-outer .check-inner {
  background-color: #ffffff;
}
#form-auth-view .main-form-auth-field .card-type .edit-icon {
  background: url(../img/svg/TableIconEditGrey.svg) no-repeat;
}
#form-auth-view .main-form-auth-field .card-type.selected .edit-icon, #form-auth-view .main-form-auth-field .card-type:hover .edit-icon {
  background: url(../img/svg/TableIconEditWhite.svg) no-repeat;
}
#form-auth-view .main-form-auth-field .card-type .note-icon {
  font-size: 44px;
  margin-top: -10px;
  color: #AEB4B7;
}
#form-auth-view .main-form-auth-field .card-type.selected .note-icon, #form-auth-view .main-form-auth-field .card-type:hover .note-icon {
  color: #ffffff;
}
#form-auth-view .main-form-auth-field .card-type .score-icon {
  background: url(../img/svg/unstar.svg) no-repeat;
  margin-bottom: 2px;
}
#form-auth-view .main-form-auth-field .card-type.selected .score-icon, #form-auth-view .main-form-auth-field .card-type:hover .score-icon {
  background: url(../img/svg/starActive.svg) no-repeat;
  margin-bottom: 2px;
}
#form-auth-view .main-form-auth-field .card-type .multiple-icon {
  position: relative;
  top: 0;
  left: 0;
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: var(--components-bg);
  border: 1px solid #AEB4B7;
  border-radius: 2px;
}
#form-auth-view .main-form-auth-field .card-type .multiple-icon:after {
  content: " ";
  position: absolute;
  display: block;
  border: 2px solid #AEB4B7;
  border-top: 0;
  border-left: 0;
  -webkit-transform: rotate(45deg) scale(1) translate(-50%, -50%);
  -ms-transform: rotate(45deg) scale(1) translate(-50%, -50%);
  transform: rotate(45deg) scale(1) translate(-50%, -50%);
  top: 43%;
  left: 24%;
  width: 5px;
  height: 9px;
}
#form-auth-view .main-form-auth-field .card-type.selected .multiple-icon, #form-auth-view .main-form-auth-field .card-type:hover .multiple-icon {
  background-color: #0492EB;
  border: 1px solid #ffffff;
}
#form-auth-view .main-form-auth-field .card-type.selected .multiple-icon:after, #form-auth-view .main-form-auth-field .card-type:hover .multiple-icon:after {
  border: 2px solid #ffffff;
  border-top: 0;
  border-left: 0;
}
#form-auth-view .create-new-question {
  padding: 20px 30px;
  background: transparent;
  border: 1px dashed #0492EB;
  border-radius: 3px;
  height: 200px;
  position: relative;
  cursor: pointer;
}
#form-auth-view .create-new-question .text {
  left: 50%;
  top: 50%;
  display: inline-block;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  position: absolute;
}
#form-auth-view .create-new-question .text .click-icon {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  background: var(--icon-click, url(../img/click-normal.png));
}
#form-auth-view .create-new-question .text .drag-icon {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  background: var(--icon-drag, url(../img/drag-normal.png));
}
#form-auth-view #form-auth-repeat .repeat-item, #form-auth-view .question-panel-title {
  background: var(--card-primary);
  box-shadow: 2px 2px 5px 0 rgba(54, 62, 77, 0.05);
  border-radius: 3px;
  padding: 20px 40px;
  margin-bottom: 12px;
  border: 1px solid transparent;
}
#form-auth-view #form-auth-repeat .repeat-item .card-footer, #form-auth-view #form-auth-repeat .repeat-item .selector-card-operator, #form-auth-view .question-panel-title .card-footer, #form-auth-view .question-panel-title .selector-card-operator {
  -webkit-transition: opacity 0.4s linear;
  transition: opacity 0.4s linear;
  opacity: 0;
  height: 0;
  overflow: hidden;
}
#form-auth-view #form-auth-repeat .repeat-item .choice-item-container .btn-remove-item, #form-auth-view .question-panel-title .choice-item-container .btn-remove-item {
  -webkit-transition: opacity 0.4s linear;
  transition: opacity 0.4s linear;
  opacity: 0;
  height: 0;
}
#form-auth-view #form-auth-repeat .repeat-item.active, #form-auth-view .question-panel-title.active {
  border: 1px solid #0492EB;
}
#form-auth-view #form-auth-repeat .repeat-item.active .text-editor-container .title-text-container, #form-auth-view .question-panel-title.active .text-editor-container .title-text-container {
  border: 1px dashed #BEC3C5;
}
#form-auth-view #form-auth-repeat .repeat-item.active .card-footer, #form-auth-view #form-auth-repeat .repeat-item.active .selector-card-operator, #form-auth-view .question-panel-title.active .card-footer, #form-auth-view .question-panel-title.active .selector-card-operator {
  opacity: 1;
  height: auto;
}
#form-auth-view #form-auth-repeat .repeat-item.active .choice-item-container .btn-remove-item, #form-auth-view .question-panel-title.active .choice-item-container .btn-remove-item {
  opacity: 1;
  height: 25px;
}

.form-auth-disclaimer {
  color: #363E4D;
  margin-bottom: 12px;
}
.form-auth-disclaimer .link {
  color: #0492EB;
  text-decoration: underline;
  cursor: pointer;
}

#form-auth-disclaimer-msg .msg-content-container {
  max-height: 650px;
}

.form-auth-disclaimer-content {
  line-height: 21px;
}

#form-auth-list .operation-btn.disabled {
  cursor: not-allowed;
}

.form-preview-msg {
  width: 100vw;
  height: 100vh;
  background-color: rgba(127, 129, 131, 0.2);
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .form-preview-msg {
    background-color: rgba(33, 33, 33, 0.3);
  }
}
.form-preview-msg .msg-close {
  width: 26px;
  height: 26px;
  right: -16vw;
  top: 60px;
}
.form-preview-msg .msg-wrap {
  width: 60vw;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
.form-preview-msg .msg-wrap .msg-content-container {
  overflow: visible;
  padding: 0 8px;
}

.preview-outer {
  width: 100%;
  height: 100vh;
  margin-bottom: 0;
  position: relative;
  padding-top: 26px;
}
.preview-outer .publish-button.publish {
  position: absolute;
  right: calc(48px - 16vw);
  top: 56px;
}
.preview-outer .preview-title {
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  margin-bottom: 20px;
}
.preview-outer .form-preview-tab {
  text-align: center;
}
.preview-outer .form-preview-tab .tab-btn {
  font-weight: normal;
  min-width: 160px;
  color: var(--tab-color-primary, #868E93);
}
.preview-outer .form-preview-tab .tab-btn.selected {
  background-color: #0492EB;
  color: #ffffff;
}
.preview-outer .preview-form-container {
  color: #212121;
  padding: 30px 10%;
  width: 100%;
  height: calc(100vh - 120px);
  background: #ffffff;
  box-shadow: 0 0 8px 0 rgba(54, 62, 77, 0.2), 0 8px 8px 0 rgba(54, 62, 77, 0.1);
  border-radius: 3px;
  margin: auto;
}
.preview-outer .preview-form-container.mobile {
  width: 320px;
  max-height: 588px;
  padding: 20px 40px;
}
.preview-outer .preview-form-container.mobile div[widget=repeat].form-preview-repeat .repeat-item > [widget] {
  padding-left: 0px;
}
.preview-outer .preview-form-container.mobile div[widget=repeat].form-preview-repeat .repeat-item > [widget] > .widget-fieldlabel-wrap {
  margin-left: 15px;
}
.preview-outer .preview-form-container.mobile .publish-button.submit .button-button {
  padding-left: 0;
  padding-right: 0;
  width: 240px;
}
.preview-outer .preview-form-container .form-title {
  font-weight: bold;
  font-size: 15px;
}
.preview-outer .preview-form-container .form-note {
  font-size: 13px;
}

#form-auth-data-view #form-auth-grid .grid-content-td-action-column {
  text-align: center;
}
#form-auth-data-view #form-auth-grid .grid-container .grid-content-td.grid-content-td-action-column {
  padding: 0;
  text-align: center;
}
#form-auth-data-view #form-auth-grid .grid-container .grid-content-td .combobox-container {
  vertical-align: middle;
}
#form-auth-data-view #form-auth-grid .grid-container .grid-content-td .combobox-wrap.widget-wrap {
  width: 24px;
  height: 24px;
  border: none;
}
#form-auth-data-view #form-auth-grid .grid-container .grid-content-td .combobox-wrap.widget-wrap .combobox-switch .icon {
  cursor: pointer;
  width: 24px;
  height: 24px;
  background: url(../img/svg/NavigationBarIconMore.svg);
}
#form-auth-data-view #form-auth-grid .grid-container .grid-content-td .combobox-wrap.widget-wrap .combobox-switch .icon:hover {
  background: url(../img/svg/NavigationBarIconMoreHover.svg);
}
#form-auth-data-view #form-auth-grid .grid-container .grid-content-td .combobox-wrap.widget-wrap .combobox-switch .icon:active, #form-auth-data-view #form-auth-grid .grid-container .grid-content-td .combobox-wrap.widget-wrap .combobox-switch .icon.active {
  background: url(../img/svg/NavigationBarIconMoreActive.svg);
}
#form-auth-data-view #form-auth-grid .grid-content-td .content {
  line-height: 24px;
}
#form-auth-data-view #form-auth-grid .btn-stats {
  display: inline-block;
  width: 24px;
  height: 24px;
}
#form-auth-data-view #form-auth-grid .btn-stats .stats-line {
  position: relative;
  bottom: 2px;
  width: 2px;
  display: inline-block;
  background-color: #0492EB;
  margin-right: 2px;
  vertical-align: bottom;
}
#form-auth-data-view #form-auth-grid .btn-stats .stats-line.first {
  height: 50%;
}
#form-auth-data-view #form-auth-grid .btn-stats .stats-line.second {
  height: 68%;
}
#form-auth-data-view #form-auth-grid .btn-stats .stats-line.third {
  height: 32%;
}
#form-auth-data-view #form-auth-grid .btn-stats .stats-line.forth {
  height: 48%;
}
#form-auth-data-view #form-auth-grid .btn-publish {
  display: inline-block;
  vertical-align: middle;
  padding: 0 10px;
  background: #0dc901;
  color: #ffffff;
  line-height: 28px;
  border-radius: 3px;
}
#form-auth-data-view .publish-wrap {
  display: inline-block;
  color: var(--tab-color-primary, #868E93);
  border: 1px solid var(--tab-color-primary, #868E93);
  line-height: 18px;
  padding: 0 4px;
}
#form-auth-data-view .publish-wrap.published {
  color: #0dc901;
  border: 1px solid #0dc901;
}

div.answer-preview-msg.msg_s_lg {
  overflow: visible;
}
div.answer-preview-msg.msg_s_lg .msg-close {
  background: url(../img/svg/ModalIconCloseWhite.svg) no-repeat;
}
div.answer-preview-msg.msg_s_lg .msg-close:hover {
  background: url(../img/svg/ModalIconCloseHover.svg) no-repeat;
}
div.answer-preview-msg.msg_s_lg .msg-wrap {
  width: 60vw;
}
div.answer-preview-msg.msg_s_lg .switch-answer-detail {
  width: 100vw;
  height: 60px;
  position: absolute;
  top: 50vh;
  transform: translateY(-50%);
  left: -20vw;
  padding: 0 4vw;
}
div.answer-preview-msg.msg_s_lg .switch-answer-detail .switch-detail {
  cursor: pointer;
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #aeb4b7;
  line-height: 60px;
  text-align: center;
}
div.answer-preview-msg.msg_s_lg .switch-answer-detail .switch-detail .icon {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 48px;
}
div.answer-preview-msg.msg_s_lg .switch-answer-detail .switch-detail.prev {
  float: left;
}
div.answer-preview-msg.msg_s_lg .switch-answer-detail .switch-detail.prev .icon {
  background: url(../img/svg/PaginationLeft.svg) no-repeat;
}
div.answer-preview-msg.msg_s_lg .switch-answer-detail .switch-detail.next {
  float: right;
}
div.answer-preview-msg.msg_s_lg .switch-answer-detail .switch-detail.next .icon {
  background: url(../img/svg/PaginationRight.svg) no-repeat;
}
div.answer-preview-msg.msg_s_lg .switch-answer-detail .switch-detail.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
div.answer-preview-msg.msg_s_lg .msg-title {
  background-color: #49546B;
  color: #ffffff;
  padding-left: 40px;
}
div.answer-preview-msg.msg_s_lg .msg-content-container {
  max-height: 80vh;
  padding: 30px 40px;
}
div.answer-preview-msg.msg_s_lg .grid-time-day, div.answer-preview-msg.msg_s_lg .grid-time-year {
  font-size: 14px;
}
div.answer-preview-msg.msg_s_lg .submit-date {
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 30px;
}
div.answer-preview-msg.msg_s_lg .submit-date .widget-fieldlabel-wrap {
  width: auto;
  margin-right: 30px;
}

div[widget=repeat].form-preview-repeat .repeat-item {
  position: relative;
}
div[widget=repeat].form-preview-repeat .repeat-item .card-index {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: bold;
  font-size: 14px;
  line-height: 28px;
}
div[widget=repeat].form-preview-repeat .repeat-item > [widget] {
  padding-left: 25px;
  margin-bottom: 18px;
}
div[widget=repeat].form-preview-repeat .repeat-item > [widget] > .widget-fieldlabel-wrap {
  width: auto;
  margin-bottom: 12px;
  font-weight: bold;
  display: block;
  font-size: 14px;
}
div[widget=repeat].form-preview-repeat .repeat-item > [widget=displaylabel] {
  font-weight: bold;
}
div[widget=repeat].form-preview-repeat .repeat-item > [widget=displaylabel] .widget-wrap-outer {
  display: none;
}
div[widget=repeat].form-preview-repeat .repeat-item > [widget=radio] .widget-wrap-outer, div[widget=repeat].form-preview-repeat .repeat-item > [widget=radio] .radio-group-wrap {
  width: 100%;
}
div[widget=repeat].form-preview-repeat .repeat-item > [widget=radio] .radio-list {
  margin-bottom: 12px;
}
div[widget=repeat].form-preview-repeat .repeat-item > [widget=radio] .radio-list > .widget-wrap {
  margin-right: 8px;
}
div[widget=repeat].form-preview-repeat .repeat-item > [widget=radio] .radio-list .widget-wrap, div[widget=repeat].form-preview-repeat .repeat-item > [widget=radio] .radio-list .radio-content-wrap {
  display: inline-block;
}
div[widget=repeat].form-preview-repeat .repeat-item > [widget=radio] .radio-group-wrap-outer, div[widget=repeat].form-preview-repeat .repeat-item > [widget=radio] .radio-label > span.text {
  display: inline;
  word-break: break-word;
  word-wrap: break-word;
}
div[widget=repeat].form-preview-repeat .repeat-item > [widget=radio].error .radio-label .icon-inner {
  border-color: #AEB4B7;
}
div[widget=repeat].form-preview-repeat .repeat-item > [widget=radio].error .radio-label:hover .icon-inner {
  border-color: #04B0FF;
}
div[widget=repeat].form-preview-repeat .repeat-item > [widget=checkboxGroup] .checkbox-list > .widget-wrap {
  display: inline-block;
  margin-right: 8px;
}
div[widget=repeat].form-preview-repeat .repeat-item > [widget=checkboxGroup] .widget-wrap-outer, div[widget=repeat].form-preview-repeat .repeat-item > [widget=checkboxGroup] .checkbox-group-wrap {
  width: 100%;
}
div[widget=repeat].form-preview-repeat .repeat-item > [widget=checkboxGroup].error .checkbox-label:not(.disabled) .checkbox-icon-inner {
  border-color: #AEB4B7;
}
div[widget=repeat].form-preview-repeat .repeat-item > [widget=checkboxGroup].error .checkbox-label:hover .checkbox-icon-inner {
  border-color: #04B0FF;
}
div[widget=repeat].form-preview-repeat .repeat-item > [widget=checkboxGroup] .checkbox-label {
  white-space: normal;
}
div[widget=repeat].form-preview-repeat .repeat-item > [widget=checkboxGroup] .checkbox-label > span {
  word-break: break-word;
  word-wrap: break-word;
}
div[widget=repeat].form-preview-repeat .repeat-item > [widget=combobox] {
  margin-bottom: 0;
}
div[widget=repeat].form-preview-repeat .repeat-item > [widget=combobox] .combobox-wrap-outer {
  white-space: normal;
}
div[widget=repeat].form-preview-repeat .repeat-item > [widget=combobox] .widget-wrap {
  display: inline-block;
  vertical-align: bottom;
  margin-right: 8px;
  margin-bottom: 12px;
}

.step-view {
  background-color: #f2f3f5;
  position: relative;
  height: 100%;
  overflow: auto;
}
.step-view.bg-white {
  background-color: #fff;
}
.step-view div[widget=panel].block {
  padding: 0;
  box-shadow: none;
}
.step-view .page-container {
  padding: 0;
}
.step-view .file-container .file-wrap-outer,
.step-view .file-container .file-wrap,
.step-view .file-container .button-container,
.step-view .file-container .button-wrap-outer,
.step-view .file-container .button-wrap,
.step-view .file-container .button-button {
  width: 100%;
}
.step-view .file-container .text-wrap.widget-wrap {
  display: none;
}
.step-view .file-container .button-text {
  font-weight: normal;
}
.step-view .file-container.file_link {
  width: 100%;
}
.step-view #steps-wizard {
  width: 1164px;
  position: absolute;
  margin: auto;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 25px;
}
.step-view #steps-wizard .step-count {
  text-align: center;
  margin-bottom: 25px;
}
.step-view #steps-wizard .setup-form {
  position: absolute;
  top: 92px;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0 solid var(--tab-color-primary, #868E93);
  box-shadow: 2px 2px 5px 0 rgba(54, 62, 77, 0.05);
  border-radius: 3px;
  margin-bottom: 56px;
  padding: 30px 30px 0 30px;
  background-color: #ffffff;
}
.step-view #steps-wizard .setup-field {
  height: 100%;
}
.step-view #steps-wizard .step-text {
  margin-right: 6px;
}
.step-view #steps-wizard .step-line {
  margin-right: 6px;
  width: 28px;
}
.step-view #steps-wizard .setup-field .step-circle {
  width: 30px;
  height: 30px;
  line-height: 28px;
}

#setupView,
.active-license-msg {
  height: 100%;
  padding-top: 56px;
  /* -------------------------------------------------------------------------- */
  /*                             Omada Setup Wizard                             */
  /* -------------------------------------------------------------------------- */
  /* -------------------------------------------------------------------------- */
  /*                                   Summary                                  */
  /* -------------------------------------------------------------------------- */
}
#setupView .page-loading,
.active-license-msg .page-loading {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: 2px;
  text-align: center;
  background-color: #fff;
}
#setupView .page-loading .loading,
.active-license-msg .page-loading .loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%);
  width: 36px;
  height: 36px;
  animation: circle 1s infinite linear;
  -webkit-animation: circle 1s infinite linear;
  background: url(../img/loading2.png);
}
#setupView .omada-wizard-title,
.active-license-msg .omada-wizard-title {
  font-weight: bold;
  font-size: 18px;
  color: var(--s-color-text-primary, #212121);
}
#setupView .omada-wizard-title.success,
.active-license-msg .omada-wizard-title.success {
  margin-bottom: 30px;
}
#setupView .omada-wizard-title.success .widget-wrap-outer,
.active-license-msg .omada-wizard-title.success .widget-wrap-outer {
  vertical-align: middle;
}
#setupView .omada-wizard-title.success::before,
.active-license-msg .omada-wizard-title.success::before {
  content: "";
  display: inline-block;
  margin-right: 12px;
  width: 30px;
  height: 30px;
  background-image: url("../img/Success-s.png");
  vertical-align: middle;
}
#setupView .omada-logo,
.active-license-msg .omada-logo {
  display: inline-block;
  width: 90px;
  height: 90px;
  background: url(../img/svg/omada-logo.svg);
  margin-bottom: 35px;
}
#setupView .omada-logo.setup,
.active-license-msg .omada-logo.setup {
  width: 128px;
  height: 128px;
  background-image: url(../img/svg/setUpController.svg);
}
#setupView .step-0-container,
.active-license-msg .step-0-container {
  height: 100%;
}
#setupView .step-0,
.active-license-msg .step-0 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  text-align: center;
}
#setupView .step-0 .first-line,
.active-license-msg .step-0 .first-line {
  font-weight: bold;
  font-size: 26px;
  color: #363e4d;
  letter-spacing: 0;
  margin-bottom: 8px;
}
#setupView .step-0 .second-line,
.active-license-msg .step-0 .second-line {
  margin-bottom: 0;
  font-size: 16px;
  color: var(--tab-color-primary, #868E93);
  letter-spacing: 0;
}
#setupView .step-0 .welcome-next-container,
.active-license-msg .step-0 .welcome-next-container {
  min-width: 250px;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}
#setupView .step-0 .start-btn,
.active-license-msg .step-0 .start-btn {
  margin-top: 80px;
  margin-bottom: 0;
  font-size: 15px;
}
#setupView .step-0 .start-btn .button-button,
.active-license-msg .step-0 .start-btn .button-button {
  height: 36px;
  line-height: 36px;
}
#setupView .step-item-container.controller-access,
.active-license-msg .step-item-container.controller-access {
  margin: 70px 100px 0;
  padding-bottom: 100px;
}
#setupView .button-field,
#setupView .step-btn-wrap,
.active-license-msg .button-field,
.active-license-msg .step-btn-wrap {
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 12px;
  padding-left: 30px;
  padding-right: 30px;
  height: 56px;
  background-color: #fff;
  box-shadow: 0 -1px 6px 0 rgba(54, 68, 75, 0.08);
}
#setupView .button-field:before, #setupView .button-field:after,
#setupView .step-btn-wrap:before,
#setupView .step-btn-wrap:after,
.active-license-msg .button-field:before,
.active-license-msg .button-field:after,
.active-license-msg .step-btn-wrap:before,
.active-license-msg .step-btn-wrap:after {
  content: " ";
  display: table;
}
#setupView .button-field:after,
#setupView .step-btn-wrap:after,
.active-license-msg .button-field:after,
.active-license-msg .step-btn-wrap:after {
  clear: both;
}
#setupView .controller-access-step .button-field,
.active-license-msg .controller-access-step .button-field {
  position: fixed;
}
#setupView #scene-radio .widget-fieldlabel-wrap,
.active-license-msg #scene-radio .widget-fieldlabel-wrap {
  display: none;
}
#setupView .scene-title,
.active-license-msg .scene-title {
  font-weight: bold;
  font-size: 14px;
  color: var(--s-color-text-primary, #212121);
  letter-spacing: 0;
}
#setupView .scene-tip,
.active-license-msg .scene-tip {
  font-size: 14px;
  color: #363e4d;
  letter-spacing: 0;
}
#setupView .radio-group-list-wrap,
.active-license-msg .radio-group-list-wrap {
  display: inline-block;
  vertical-align: top;
}
#setupView .radio-group-list-wrap:first-of-type,
.active-license-msg .radio-group-list-wrap:first-of-type {
  vertical-align: bottom;
}
#setupView li.radio-list,
.active-license-msg li.radio-list {
  position: relative;
}
#setupView #scene-radio li.radio-list > .widget-wrap,
.active-license-msg #scene-radio li.radio-list > .widget-wrap {
  z-index: 2;
  position: absolute;
  top: 99px;
  left: 16px;
}
#setupView #scene-radio li.radio-list > .widget-wrap span.text,
.active-license-msg #scene-radio li.radio-list > .widget-wrap span.text {
  font-size: 14px;
  width: 180px;
}
#setupView #scene-radio li.radio-list > .widget-wrap .radio-label.customized,
.active-license-msg #scene-radio li.radio-list > .widget-wrap .radio-label.customized {
  display: block;
  position: relative;
  top: -25px;
  width: 16px;
}
#setupView #site-type .radio-group-list-wrap,
.active-license-msg #site-type .radio-group-list-wrap {
  margin-right: 16px;
}
#setupView .radio-list + .radio-list,
.active-license-msg .radio-list + .radio-list {
  margin-top: 20px;
}
#setupView .scene-normal,
.active-license-msg .scene-normal {
  margin-right: 20px;
  width: 220px;
  height: 132px;
}
#setupView .scene-normal:after,
.active-license-msg .scene-normal:after {
  position: relative;
  top: 97px;
  display: block;
  content: ".";
  width: 220px;
  height: 36px;
  background-image: linear-gradient(-180deg, rgba(33, 33, 33, 0) 0%, var(--s-color-text-primary, #212121) 100%);
  border-radius: 0 0 5px 5px;
}
#setupView .scene-hotel,
.active-license-msg .scene-hotel {
  background: url(../img/Hotel.png) no-repeat -7px -7px;
}
#setupView .scene-hotel:after,
.active-license-msg .scene-hotel:after {
  left: 1px;
}
#setupView .scene-restaurant,
.active-license-msg .scene-restaurant {
  background: url(../img/Restaurant.png) no-repeat;
}
#setupView .scene-office,
.active-license-msg .scene-office {
  background: url(../img/Office.png) no-repeat;
}
#setupView .scene-factory,
.active-license-msg .scene-factory {
  background: url(../img/Factory.png) no-repeat;
}
#setupView .scene-dormitory,
.active-license-msg .scene-dormitory {
  background: url(../img/Dormitory.png) no-repeat;
}
#setupView .scene-campus,
.active-license-msg .scene-campus {
  background: url(../img/Campus.png) no-repeat;
}
#setupView .scene-hospital,
.active-license-msg .scene-hospital {
  background: url(../img/Hospital.png) no-repeat;
}
#setupView .scene-airport,
.active-license-msg .scene-airport {
  background: url(../img/Airport.png) no-repeat;
}
#setupView .scene-shopping,
.active-license-msg .scene-shopping {
  background: url(../img/ShoppingMall.png) no-repeat;
}
#setupView .scene-home,
.active-license-msg .scene-home {
  background: url(../img/Home.png) no-repeat;
}
#setupView .scene-customized,
.active-license-msg .scene-customized {
  position: relative;
  width: 220px;
  height: 132px;
  background: rgba(242, 244, 247, 0.3);
  border: 1px dashed #aeb4b7;
  border-radius: 5px;
}
#setupView .scene-customized span.customized-icon,
.active-license-msg .scene-customized span.customized-icon {
  display: inline-block;
  width: 36px;
  height: 36px;
  background: url(../img/svg/UploadIconCustom.svg) no-repeat;
  position: absolute;
  left: 0;
  right: 0;
  top: 25px;
  margin: auto;
}
#setupView .scene-customized [widget=textbox],
.active-license-msg .scene-customized [widget=textbox] {
  position: absolute;
  top: 73px;
  left: 36px;
}
#setupView .scene-customized [widget=textbox] .text-wrap,
.active-license-msg .scene-customized [widget=textbox] .text-wrap {
  max-width: 154px;
  width: 154px;
}
#setupView .grid-content-td,
.active-license-msg .grid-content-td {
  padding: 14px 15px;
}
#setupView .grid-container .widget-container,
.active-license-msg .grid-container .widget-container {
  margin-bottom: 0;
}
#setupView .grid-container .widget-container .widget-fieldlabel-wrap,
.active-license-msg .grid-container .widget-container .widget-fieldlabel-wrap {
  width: auto;
}
#setupView .skip-button,
.active-license-msg .skip-button {
  margin-right: 10px;
}
#setupView .widget-container,
.active-license-msg .widget-container {
  margin-bottom: 20px;
}
#setupView .step-view,
.active-license-msg .step-view {
  margin-bottom: 0;
}
#setupView #cloud-field .widget-container,
.active-license-msg #cloud-field .widget-container {
  vertical-align: middle;
}
#setupView [widget=toolTip],
.active-license-msg [widget=toolTip] {
  margin-bottom: 0;
}
#setupView #scene-customized [widget=errortip],
.active-license-msg #scene-customized [widget=errortip] {
  font-size: 12px;
  margin-left: -5px;
}
#setupView .widget-fieldlabel-wrap,
.active-license-msg .widget-fieldlabel-wrap {
  margin-right: 10px;
  width: 200px;
}
#setupView .u-label-auto .widget-fieldlabel-wrap,
.active-license-msg .u-label-auto .widget-fieldlabel-wrap {
  margin-right: 0;
  width: auto;
  font-weight: bold;
}
#setupView .no-label,
.active-license-msg .no-label {
  margin-left: 190px;
}
#setupView [widget=button] .widget-fieldlabel-wrap,
.active-license-msg [widget=button] .widget-fieldlabel-wrap {
  display: none !important;
}
#setupView [widget=errortip],
.active-license-msg [widget=errortip] {
  display: inline-block;
  margin-left: 8px;
  vertical-align: top;
  max-width: 640px;
}
#setupView #step3Password,
.active-license-msg #step3Password {
  margin-bottom: 30px;
}
#setupView #step4Username [widget=errortip],
.active-license-msg #step4Username [widget=errortip] {
  display: block;
}
#setupView #bind-cloud,
.active-license-msg #bind-cloud {
  margin-right: 10px;
}
#setupView .combobox-wrap.timezone-select,
#setupView .text-wrap.timezone-select,
.active-license-msg .combobox-wrap.timezone-select,
.active-license-msg .text-wrap.timezone-select {
  max-width: 440px;
  width: 440px;
}
#setupView .exp-improve,
.active-license-msg .exp-improve {
  margin-top: -4px;
  padding-bottom: 24px;
}
#setupView .exp-improve .exp-improve-title,
.active-license-msg .exp-improve .exp-improve-title {
  font-weight: bold;
  font-size: 15px;
  line-height: 20px;
  color: var(--s-color-text-primary, #212121);
  letter-spacing: 0;
  margin-bottom: 22px;
}
#setupView .exp-improve .exp-improve-enable,
.active-license-msg .exp-improve .exp-improve-enable {
  margin-bottom: 20px;
}
#setupView .exp-improve .exp-improve-enable .widget-fieldlabel-wrap,
.active-license-msg .exp-improve .exp-improve-enable .widget-fieldlabel-wrap {
  width: 100px;
}
#setupView .exp-improve .exp-improve-tip,
.active-license-msg .exp-improve .exp-improve-tip {
  line-height: 16px;
}
#setupView .remote-bind-field,
.active-license-msg .remote-bind-field {
  padding-top: 24px;
}
#setupView #cloud-field,
.active-license-msg #cloud-field {
  padding-top: 24px;
}
#setupView #cloud-access-tip a,
.active-license-msg #cloud-access-tip a {
  margin-left: 10px;
  text-decoration: none;
}
#setupView .setup-step-internet .setup-internet-instruct,
.active-license-msg .setup-step-internet .setup-internet-instruct {
  margin-bottom: 39px;
}
#setupView .setup-step-internet .wan-ports-tab,
.active-license-msg .setup-step-internet .wan-ports-tab {
  margin-bottom: 25px;
  padding-left: 0;
  padding-bottom: 0;
  box-shadow: none;
}
#setupView .setup-step-internet .panel-header,
.active-license-msg .setup-step-internet .panel-header {
  text-align: left;
}
#setupView .setup-step-internet .panel-header-btn-collapse,
.active-license-msg .setup-step-internet .panel-header-btn-collapse {
  margin-top: -4px;
}
#setupView .setup-step-internet .radio-group-list-wrap,
.active-license-msg .setup-step-internet .radio-group-list-wrap {
  display: block;
}
#setupView .setup-step-internet .radio-list + .radio-list,
.active-license-msg .setup-step-internet .radio-list + .radio-list {
  margin-top: auto;
}
#setupView .setup-step-internet li.radio-list > .widget-wrap,
.active-license-msg .setup-step-internet li.radio-list > .widget-wrap {
  position: static;
}
#setupView .setup-step-internet li.radio-list > .widget-wrap span.text,
.active-license-msg .setup-step-internet li.radio-list > .widget-wrap span.text {
  width: auto;
}
#setupView .radio-group-container.operation-mode-radio .radio-label .text,
.active-license-msg .radio-group-container.operation-mode-radio .radio-label .text {
  width: auto;
  color: #fff;
}
#setupView .summary-item + .summary-item::before,
.active-license-msg .summary-item + .summary-item::before {
  content: "";
  margin-bottom: 16px;
  display: block;
  width: 100%;
  height: 1px;
  background-color: #e5e5e5;
}
#setupView .setup-summary-devices,
.active-license-msg .setup-summary-devices {
  display: flex;
  justify-content: space-between;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 46px;
  font-size: 28px;
  text-align: center;
}
#setupView .setup-summary-devices .activated,
.active-license-msg .setup-summary-devices .activated {
  color: #0DC901;
}
#setupView .setup-summary-devices .device,
.active-license-msg .setup-summary-devices .device {
  display: inline-block;
  margin-top: 21px;
  font-size: 16px;
}
#setupView .summary-sp,
.active-license-msg .summary-sp {
  margin-top: 24px;
  margin-bottom: 12px;
}
#setupView .summary-field,
.active-license-msg .summary-field {
  padding: 24px;
  padding-bottom: 8px;
  background-color: #f9fafc;
  border-radius: 3px;
}
#setupView .summary-field .widget-container,
.active-license-msg .summary-field .widget-container {
  margin-bottom: 16px;
}
#setupView .summary-field .widget-container:last-child,
.active-license-msg .summary-field .widget-container:last-child {
  margin-bottom: 0;
}
#setupView .summary-field .widget-container .widget-fieldlabel-wrap,
.active-license-msg .summary-field .widget-container .widget-fieldlabel-wrap {
  width: 180px;
  font-size: 14px;
  color: var(--s-color-text-tertiary, #5E696F);
  letter-spacing: 0;
  top: 0;
  transform: none;
}
#setupView .setup-step-6 .widget-fieldlabel-wrap,
#setupView .setup-step-6 .text-wrap-outer,
.active-license-msg .setup-step-6 .widget-fieldlabel-wrap,
.active-license-msg .setup-step-6 .text-wrap-outer {
  line-height: 16px;
  width: 860px;
}
#setupView .setup-step-6 .setup-summary-devices,
.active-license-msg .setup-step-6 .setup-summary-devices {
  margin-top: 0;
}
#setupView .omada-wizard-tip,
.active-license-msg .omada-wizard-tip {
  font-size: 14px;
  color: #363e4d;
  letter-spacing: 0;
}
#setupView #exp-improve .tips-content,
.active-license-msg #exp-improve .tips-content {
  max-width: 100%;
  font-size: 14px;
}
#setupView #exp-improve .tips-content a,
.active-license-msg #exp-improve .tips-content a {
  cursor: pointer;
  color: #0492EB;
}

.setup-language {
  position: absolute;
  top: 40px;
  right: 40px;
}
.setup-language .widget-fieldlabel-wrap {
  display: none;
}
.setup-language .combobox-wrap {
  width: 160px;
  border: 1px solid transparent;
  cursor: pointer;
}
.setup-language .combobox-text {
  color: #0492EB;
  cursor: pointer;
  text-align: right;
  padding-right: 8px;
}
.setup-language.combobox-container.hover .combobox-wrap.widget-wrap {
  border-color: transparent;
}
.setup-language.combobox-container.focus .combobox-wrap.widget-wrap {
  border-color: transparent;
}

.active-license-msg,
#setupView.cloud-setup-view {
  /* -------------------------------------------------------------------------- */
  /*                                Widget, Input                               */
  /* -------------------------------------------------------------------------- */
  /* -------------------------------------------------------------------------- */
  /*                                    Radio                                   */
  /* -------------------------------------------------------------------------- */
  /* -------------------------------------------------------------------------- */
  /*                                    Grid                                    */
  /* -------------------------------------------------------------------------- */
  /* -------------------------------------------------------------------------- */
  /*                                    Icon                                    */
  /* -------------------------------------------------------------------------- */
  /* -------------------------------------------------------------------------- */
  /*                                 Add Devices                                */
  /* -------------------------------------------------------------------------- */
  /* -------------------------------------------------------------------------- */
  /*                              Activate Licenses                             */
  /* -------------------------------------------------------------------------- */
  /* -------------------------------------------------------------------------- */
  /*                                   Summary                                  */
  /* -------------------------------------------------------------------------- */
  /* -------------------------------------------------------------------------- */
  /*                                    File                                    */
  /* -------------------------------------------------------------------------- */
  /* -------------------------------------------------------------------------- */
  /*                                Summary Grid                                */
  /* -------------------------------------------------------------------------- */
}
.active-license-msg #step0 .welcome-next-container,
#setupView.cloud-setup-view #step0 .welcome-next-container {
  min-width: 250px;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}
.active-license-msg #step0 .start-btn,
#setupView.cloud-setup-view #step0 .start-btn {
  margin-bottom: 0;
  padding: 0;
}
.active-license-msg #step0 .step0-prev-btn,
#setupView.cloud-setup-view #step0 .step0-prev-btn {
  position: fixed;
  left: 70px;
  bottom: 50px;
}
.active-license-msg #step0 .step0-prev-btn .button-button::before,
#setupView.cloud-setup-view #step0 .step0-prev-btn .button-button::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 5px;
  vertical-align: middle;
  background-image: url(../img/svg/LoginIconBackNormal.svg);
}
.active-license-msg #step0 .step0-prev-btn .button-button:hover::before,
#setupView.cloud-setup-view #step0 .step0-prev-btn .button-button:hover::before {
  background-image: url(../img/svg/LoginIconBackHover.svg);
}
.active-license-msg .omada-wizard-title.success,
#setupView.cloud-setup-view .omada-wizard-title.success {
  margin-bottom: 30px;
}
.active-license-msg .omada-wizard-title.success::before,
#setupView.cloud-setup-view .omada-wizard-title.success::before {
  content: "";
  display: inline-block;
  margin-right: 12px;
  width: 30px;
  height: 30px;
  background-image: url("../img/Success-s.png");
  vertical-align: sub;
}
.active-license-msg .exp-improve,
#setupView.cloud-setup-view .exp-improve {
  margin-bottom: 36px;
}
.active-license-msg .exp-improve .exp-improve-title,
#setupView.cloud-setup-view .exp-improve .exp-improve-title {
  font-weight: bold;
  font-size: 15px;
  line-height: 20px;
  color: var(--s-color-text-primary, #212121);
  letter-spacing: 0;
  margin-bottom: 18px;
}
.active-license-msg .exp-improve .exp-improve-enable,
#setupView.cloud-setup-view .exp-improve .exp-improve-enable {
  margin-bottom: 16px;
}
.active-license-msg .exp-improve .exp-improve-enable .widget-fieldlabel-wrap,
#setupView.cloud-setup-view .exp-improve .exp-improve-enable .widget-fieldlabel-wrap {
  width: 100px;
}
.active-license-msg .exp-improve .exp-improve-tip,
#setupView.cloud-setup-view .exp-improve .exp-improve-tip {
  line-height: 16px;
}
.active-license-msg .step-btn-wrap,
#setupView.cloud-setup-view .step-btn-wrap {
  display: flex;
  width: 1164px;
  margin-top: 30px;
  padding-top: 0;
  justify-content: flex-end;
  align-items: center;
}
.active-license-msg .step-btn-wrap .skip,
#setupView.cloud-setup-view .step-btn-wrap .skip {
  margin-right: 20px;
}
.active-license-msg .step-btn-wrap .back,
#setupView.cloud-setup-view .step-btn-wrap .back {
  flex: 1;
  text-align: left;
}
.active-license-msg .step-btn-wrap .widget-container,
#setupView.cloud-setup-view .step-btn-wrap .widget-container {
  margin-bottom: 0;
}
.active-license-msg .text-container .text-wrap .supplement,
.active-license-msg .combobox-wrap.widget-wrap .supplement,
.active-license-msg .combobox-text .supplement,
#setupView.cloud-setup-view .text-container .text-wrap .supplement,
#setupView.cloud-setup-view .combobox-wrap.widget-wrap .supplement,
#setupView.cloud-setup-view .combobox-text .supplement {
  float: right;
  margin-right: 56px;
  color: #BEC3C5;
}
.active-license-msg .radio-group-container.radio-square .radio-label,
#setupView.cloud-setup-view .radio-group-container.radio-square .radio-label {
  display: inline-block;
  min-width: 186px;
  padding: 8px 16px;
  border: 1px solid var(--components-border-primary, #bec3c5);
  white-space: nowrap;
  border-radius: 3px;
}
.active-license-msg .radio-group-container.radio-square .radio-label .icon,
#setupView.cloud-setup-view .radio-group-container.radio-square .radio-label .icon {
  vertical-align: middle;
}
.active-license-msg .radio-group-container.radio-square .radio-label .text,
#setupView.cloud-setup-view .radio-group-container.radio-square .radio-label .text {
  width: auto;
  margin-left: 10px;
  color: #BEC3C5;
}
.active-license-msg .radio-group-container.radio-square .radio-label.checked,
#setupView.cloud-setup-view .radio-group-container.radio-square .radio-label.checked {
  border-color: #0492eb;
  background: rgba(4, 146, 235, 0.08);
}
.active-license-msg .radio-group-container.radio-square .radio-label.checked .text,
#setupView.cloud-setup-view .radio-group-container.radio-square .radio-label.checked .text {
  color: #0492EB;
}
.active-license-msg .radio-group-container.radio-square .radio-label.disabled,
#setupView.cloud-setup-view .radio-group-container.radio-square .radio-label.disabled {
  opacity: 0.4;
}
.active-license-msg .radio-group-container.radio-square .radio-group-list-wrap:last-child .radio-label:after,
#setupView.cloud-setup-view .radio-group-container.radio-square .radio-group-list-wrap:last-child .radio-label:after {
  width: 92px;
  height: 26px;
}
.active-license-msg div.button-field,
#setupView.cloud-setup-view div.button-field {
  clear: both;
}
.active-license-msg .radio-group-list-wrap,
#setupView.cloud-setup-view .radio-group-list-wrap {
  display: inline-block;
  vertical-align: top;
}
.active-license-msg .radio-group-list-wrap:first-of-type,
#setupView.cloud-setup-view .radio-group-list-wrap:first-of-type {
  vertical-align: bottom;
}
.active-license-msg li.radio-list,
#setupView.cloud-setup-view li.radio-list {
  position: relative;
}
.active-license-msg .radio-list > .widget-wrap,
#setupView.cloud-setup-view .radio-list > .widget-wrap {
  position: static;
}
.active-license-msg .operation-mode-radio .radio-list > .widget-wrap,
#setupView.cloud-setup-view .operation-mode-radio .radio-list > .widget-wrap {
  z-index: 2;
  position: absolute;
  top: 99px;
  left: 16px;
}
.active-license-msg .operation-mode-radio .radio-list > .widget-wrap span.text,
#setupView.cloud-setup-view .operation-mode-radio .radio-list > .widget-wrap span.text {
  font-size: 14px;
}
.active-license-msg .radio-list + .radio-list,
#setupView.cloud-setup-view .radio-list + .radio-list {
  margin-top: 20px;
}
.active-license-msg .grid-content-td,
#setupView.cloud-setup-view .grid-content-td {
  padding: 14px 15px;
}
.active-license-msg .grid-container .widget-container,
#setupView.cloud-setup-view .grid-container .widget-container {
  margin-bottom: 0;
}
.active-license-msg .grid-container .widget-container .widget-fieldlabel-wrap,
#setupView.cloud-setup-view .grid-container .widget-container .widget-fieldlabel-wrap {
  width: auto;
}
.active-license-msg .grid-container.license-assign-grid,
#setupView.cloud-setup-view .grid-container.license-assign-grid {
  margin-top: 36px;
}
.active-license-msg .skip-button,
#setupView.cloud-setup-view .skip-button {
  margin-right: 10px;
}
.active-license-msg [widget=toolTip],
#setupView.cloud-setup-view [widget=toolTip] {
  margin-bottom: 0;
}
.active-license-msg .combobox-wrap.timezone-select,
.active-license-msg .text-wrap.timezone-select,
#setupView.cloud-setup-view .combobox-wrap.timezone-select,
#setupView.cloud-setup-view .text-wrap.timezone-select {
  max-width: 440px;
  width: 440px;
}
.active-license-msg .step-view,
#setupView.cloud-setup-view .step-view {
  position: relative;
  height: 100%;
  overflow: auto;
}
.active-license-msg .omada-wizard-tip,
#setupView.cloud-setup-view .omada-wizard-tip {
  font-size: 14px;
  color: #36444B;
  letter-spacing: 0;
}
.active-license-msg .license-type-tip,
#setupView.cloud-setup-view .license-type-tip {
  margin-top: -12px;
  font-size: 14px;
  letter-spacing: 0;
  font-weight: 400;
}
.active-license-msg .radio-group-list-wrap + .radio-group-list-wrap,
#setupView.cloud-setup-view .radio-group-list-wrap + .radio-group-list-wrap {
  margin-left: 16px;
}
.active-license-msg .license-info-list,
#setupView.cloud-setup-view .license-info-list {
  display: inline-block;
  width: 700px;
}
.active-license-msg .license-info-list .grid-table,
#setupView.cloud-setup-view .license-info-list .grid-table {
  border-top-color: #EBECED;
  border-bottom: 0 none;
}
.active-license-msg .license-info-list .grid-panel-content-container,
#setupView.cloud-setup-view .license-info-list .grid-panel-content-container {
  margin-bottom: 0;
}
.active-license-msg .license-info-list .grid-header,
.active-license-msg .license-info-list .grid-content-td,
#setupView.cloud-setup-view .license-info-list .grid-header,
#setupView.cloud-setup-view .license-info-list .grid-content-td {
  border-left: 1px solid var(--s-color-text-split, #EBECED);
}
.active-license-msg .license-info-list .grid-header:last-child,
.active-license-msg .license-info-list .grid-content-td:last-child,
#setupView.cloud-setup-view .license-info-list .grid-header:last-child,
#setupView.cloud-setup-view .license-info-list .grid-content-td:last-child {
  border-right: 1px solid var(--s-color-text-split, #EBECED);
}
.active-license-msg .license-info-list .grid-content-td,
#setupView.cloud-setup-view .license-info-list .grid-content-td {
  border-bottom: 1px solid var(--s-color-text-split, #EBECED);
}
.active-license-msg .icon-refresh,
#setupView.cloud-setup-view .icon-refresh {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-top: -2px;
  margin-left: 10px;
  vertical-align: top;
  background-image: url("../img/svg/refresh.svg");
  cursor: pointer;
}
.active-license-msg .icon-refresh:hover,
#setupView.cloud-setup-view .icon-refresh:hover {
  background-image: url("../img/svg/refresh-hover.svg");
}
.active-license-msg .icon-refresh.loading,
#setupView.cloud-setup-view .icon-refresh.loading {
  animation: 1s linear circle infinite;
}
.active-license-msg .icon-empty,
#setupView.cloud-setup-view .icon-empty {
  width: 80px;
  height: 80px;
  background-image: url("../img/empty.png");
}
.active-license-msg .try-license-btn .button-button-before,
#setupView.cloud-setup-view .try-license-btn .button-button-before {
  display: none;
}
.active-license-msg .try-license-btn .button-button,
#setupView.cloud-setup-view .try-license-btn .button-button {
  font-weight: normal;
  color: #0DC901;
  border-color: #0DC901;
}
.active-license-msg .license-no-license,
#setupView.cloud-setup-view .license-no-license {
  margin-top: 12px;
  color: #C7C8CE;
}
.active-license-msg .qs-device-step .device-add-loading,
#setupView.cloud-setup-view .qs-device-step .device-add-loading {
  margin-top: 100px;
  text-align: center;
}
.active-license-msg .qs-device-step .device-add-loading .loading,
#setupView.cloud-setup-view .qs-device-step .device-add-loading .loading {
  display: inline-block;
  width: 36px;
  height: 36px;
  animation: circle 1s infinite linear;
  -webkit-animation: circle 1s infinite linear;
  /* Safari,Chrome */
  background: url(../img/loading2.png);
}
.active-license-msg .active-license-loader .separator,
.active-license-msg .qs-activate-step .separator,
#setupView.cloud-setup-view .active-license-loader .separator,
#setupView.cloud-setup-view .qs-activate-step .separator {
  height: 10px;
}
.active-license-msg .active-license-loader .omada-wizard-tip,
.active-license-msg .qs-activate-step .omada-wizard-tip,
#setupView.cloud-setup-view .active-license-loader .omada-wizard-tip,
#setupView.cloud-setup-view .qs-activate-step .omada-wizard-tip {
  margin-bottom: 21px;
}
.active-license-msg .active-license-loader .qs-license-card,
.active-license-msg .qs-activate-step .qs-license-card,
#setupView.cloud-setup-view .active-license-loader .qs-license-card,
#setupView.cloud-setup-view .qs-activate-step .qs-license-card {
  display: inline-block;
  min-width: 415px;
  min-height: 129px;
  padding: 19px 24px;
  vertical-align: middle;
  background-color: rgba(154, 169, 199, 0.06);
  border-radius: 3px;
}
.active-license-msg .active-license-loader .qs-license-card .title,
.active-license-msg .qs-activate-step .qs-license-card .title,
#setupView.cloud-setup-view .active-license-loader .qs-license-card .title,
#setupView.cloud-setup-view .qs-activate-step .qs-license-card .title {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 20px;
  font-weight: bold;
}
.active-license-msg .active-license-loader .qs-license-card .has-license,
.active-license-msg .active-license-loader .qs-license-card .license-required,
.active-license-msg .qs-activate-step .qs-license-card .has-license,
.active-license-msg .qs-activate-step .qs-license-card .license-required,
#setupView.cloud-setup-view .active-license-loader .qs-license-card .has-license,
#setupView.cloud-setup-view .active-license-loader .qs-license-card .license-required,
#setupView.cloud-setup-view .qs-activate-step .qs-license-card .has-license,
#setupView.cloud-setup-view .qs-activate-step .qs-license-card .license-required {
  display: flex;
  align-items: flex-start;
}
.active-license-msg .active-license-loader .qs-license-card .has-license .widget-container,
.active-license-msg .active-license-loader .qs-license-card .license-required .widget-container,
.active-license-msg .qs-activate-step .qs-license-card .has-license .widget-container,
.active-license-msg .qs-activate-step .qs-license-card .license-required .widget-container,
#setupView.cloud-setup-view .active-license-loader .qs-license-card .has-license .widget-container,
#setupView.cloud-setup-view .active-license-loader .qs-license-card .license-required .widget-container,
#setupView.cloud-setup-view .qs-activate-step .qs-license-card .has-license .widget-container,
#setupView.cloud-setup-view .qs-activate-step .qs-license-card .license-required .widget-container {
  margin-bottom: 0;
}
.active-license-msg .active-license-loader .qs-license-card .item,
.active-license-msg .qs-activate-step .qs-license-card .item,
#setupView.cloud-setup-view .active-license-loader .qs-license-card .item,
#setupView.cloud-setup-view .qs-activate-step .qs-license-card .item {
  display: inline-block;
  margin-right: 50px;
}
.active-license-msg .active-license-loader .qs-license-card .item:last-child,
.active-license-msg .qs-activate-step .qs-license-card .item:last-child,
#setupView.cloud-setup-view .active-license-loader .qs-license-card .item:last-child,
#setupView.cloud-setup-view .qs-activate-step .qs-license-card .item:last-child {
  margin-right: 0;
}
.active-license-msg .active-license-loader .qs-license-card .num,
.active-license-msg .qs-activate-step .qs-license-card .num,
#setupView.cloud-setup-view .active-license-loader .qs-license-card .num,
#setupView.cloud-setup-view .qs-activate-step .qs-license-card .num {
  display: block;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.active-license-msg .active-license-loader .qs-license-card .sub-title,
.active-license-msg .qs-activate-step .qs-license-card .sub-title,
#setupView.cloud-setup-view .active-license-loader .qs-license-card .sub-title,
#setupView.cloud-setup-view .qs-activate-step .qs-license-card .sub-title {
  display: inline-block;
  text-align: center;
  width: 80px;
  margin-top: 4px;
  color: var(--tab-color-primary, #868E93);
  line-height: 20px;
}
.active-license-msg .active-license-loader .qs-license-card.license-card-required .num,
.active-license-msg .qs-activate-step .qs-license-card.license-card-required .num,
#setupView.cloud-setup-view .active-license-loader .qs-license-card.license-card-required .num,
#setupView.cloud-setup-view .qs-activate-step .qs-license-card.license-card-required .num {
  color: #FA6400;
}
.active-license-msg .active-license-loader .setup-batch-active,
.active-license-msg .qs-activate-step .setup-batch-active,
#setupView.cloud-setup-view .active-license-loader .setup-batch-active,
#setupView.cloud-setup-view .qs-activate-step .setup-batch-active {
  margin-top: -25px;
  text-align: right;
}
.active-license-msg .active-license-loader .button_buy.button-container,
.active-license-msg .qs-activate-step .button_buy.button-container,
#setupView.cloud-setup-view .active-license-loader .button_buy.button-container,
#setupView.cloud-setup-view .qs-activate-step .button_buy.button-container {
  margin-top: 30px;
  margin-bottom: 0;
}
.active-license-msg .active-license-loader .button_buy.button-container .button-button,
.active-license-msg .qs-activate-step .button_buy.button-container .button-button,
#setupView.cloud-setup-view .active-license-loader .button_buy.button-container .button-button,
#setupView.cloud-setup-view .qs-activate-step .button_buy.button-container .button-button {
  background-color: #0DC901;
}
.active-license-msg .active-license-loader .grid-container.license-assign-grid .grid-header-container .grid-table,
.active-license-msg .qs-activate-step .grid-container.license-assign-grid .grid-header-container .grid-table,
#setupView.cloud-setup-view .active-license-loader .grid-container.license-assign-grid .grid-header-container .grid-table,
#setupView.cloud-setup-view .qs-activate-step .grid-container.license-assign-grid .grid-header-container .grid-table {
  border-top-width: 4px;
}
.active-license-msg .active-license-loader .grid-container.license-assign-grid .grid-header-container .grid-header,
.active-license-msg .qs-activate-step .grid-container.license-assign-grid .grid-header-container .grid-header,
#setupView.cloud-setup-view .active-license-loader .grid-container.license-assign-grid .grid-header-container .grid-header,
#setupView.cloud-setup-view .qs-activate-step .grid-container.license-assign-grid .grid-header-container .grid-header {
  padding-top: 47px;
  padding-bottom: 18px;
  font-size: 14px;
  line-height: 17px;
}
.active-license-msg .active-license-loader .grid-container.license-assign-grid .grid-table,
.active-license-msg .qs-activate-step .grid-container.license-assign-grid .grid-table,
#setupView.cloud-setup-view .active-license-loader .grid-container.license-assign-grid .grid-table,
#setupView.cloud-setup-view .qs-activate-step .grid-container.license-assign-grid .grid-table {
  border-color: #F9FAFC;
}
.active-license-msg .active-license-loader .grid-container.license-assign-grid .license-assign-grid-name .status-wrap .text,
.active-license-msg .qs-activate-step .grid-container.license-assign-grid .license-assign-grid-name .status-wrap .text,
#setupView.cloud-setup-view .active-license-loader .grid-container.license-assign-grid .license-assign-grid-name .status-wrap .text,
#setupView.cloud-setup-view .qs-activate-step .grid-container.license-assign-grid .license-assign-grid-name .status-wrap .text {
  margin-right: 0;
}
.active-license-msg .active-license-loader .grid-container.license-assign-grid .license-active-type:after,
.active-license-msg .qs-activate-step .grid-container.license-assign-grid .license-active-type:after,
#setupView.cloud-setup-view .active-license-loader .grid-container.license-assign-grid .license-active-type:after,
#setupView.cloud-setup-view .qs-activate-step .grid-container.license-assign-grid .license-active-type:after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("../img/svg/PaginationRightActive.svg");
  vertical-align: middle;
}
.active-license-msg .active-license-loader .grid-container.batch-active .license-active-type,
.active-license-msg .qs-activate-step .grid-container.batch-active .license-active-type,
#setupView.cloud-setup-view .active-license-loader .grid-container.batch-active .license-active-type,
#setupView.cloud-setup-view .qs-activate-step .grid-container.batch-active .license-active-type {
  color: #363E4D;
  cursor: default;
  pointer-events: none;
}
.active-license-msg .active-license-loader .grid-container.batch-active .license-active-type:after,
.active-license-msg .qs-activate-step .grid-container.batch-active .license-active-type:after,
#setupView.cloud-setup-view .active-license-loader .grid-container.batch-active .license-active-type:after,
#setupView.cloud-setup-view .qs-activate-step .grid-container.batch-active .license-active-type:after {
  display: none;
}
.active-license-msg .summary-field .displaylabel-container .widget-fieldlabel-wrap,
#setupView.cloud-setup-view .summary-field .displaylabel-container .widget-fieldlabel-wrap {
  line-height: 16px;
}
.active-license-msg .summary-field .displaylabel-container .text-wrap-outer,
#setupView.cloud-setup-view .summary-field .displaylabel-container .text-wrap-outer {
  height: 16px;
  line-height: 16px;
}
.active-license-msg .summary-item,
#setupView.cloud-setup-view .summary-item {
  padding-left: 30px;
}
.active-license-msg .setup-summary-devices,
#setupView.cloud-setup-view .setup-summary-devices {
  margin-top: 10px;
}
.active-license-msg .file-container .file-wrap-outer,
.active-license-msg .file-container .file-wrap,
.active-license-msg .file-container .button-container,
.active-license-msg .file-container .button-wrap-outer,
.active-license-msg .file-container .button-wrap,
.active-license-msg .file-container .button-button,
#setupView.cloud-setup-view .file-container .file-wrap-outer,
#setupView.cloud-setup-view .file-container .file-wrap,
#setupView.cloud-setup-view .file-container .button-container,
#setupView.cloud-setup-view .file-container .button-wrap-outer,
#setupView.cloud-setup-view .file-container .button-wrap,
#setupView.cloud-setup-view .file-container .button-button {
  width: 100%;
}
.active-license-msg .file-container .text-wrap.widget-wrap,
#setupView.cloud-setup-view .file-container .text-wrap.widget-wrap {
  display: none;
}
.active-license-msg .file-container .button-button,
#setupView.cloud-setup-view .file-container .button-button {
  height: 60px;
  padding-top: 14px;
  border: 1px dashed #BEC3C5;
}
.active-license-msg .file-container .file-icon .icon,
#setupView.cloud-setup-view .file-container .file-icon .icon {
  width: 16px;
  height: 16px;
  background-image: url("../img/svg/FileAdd.svg");
}
.active-license-msg .file-container .button-text,
#setupView.cloud-setup-view .file-container .button-text {
  font-weight: normal;
  color: #BEC3C5;
}
.active-license-msg .file-container.file_link,
#setupView.cloud-setup-view .file-container.file_link {
  width: 100%;
}
.active-license-msg .file-container.file_link .file-button-container,
#setupView.cloud-setup-view .file-container.file_link .file-button-container {
  margin-right: 0;
}
.active-license-msg .file-container.file_link .button-button,
#setupView.cloud-setup-view .file-container.file_link .button-button {
  height: 32px;
  padding-top: 0;
  border: 1px solid;
}
.active-license-msg .file-container.file_link .button-button:hover,
#setupView.cloud-setup-view .file-container.file_link .button-button:hover {
  background-color: transparent;
}
.active-license-msg .file-container.file_link .button-button:hover .button-text,
#setupView.cloud-setup-view .file-container.file_link .button-button:hover .button-text {
  color: #04b0ff;
}
.active-license-msg .file-container.file_link .button-text,
#setupView.cloud-setup-view .file-container.file_link .button-text {
  color: #0492EB;
}
.active-license-msg .device-summary-grid .grid-header-container .grid-table,
#setupView.cloud-setup-view .device-summary-grid .grid-header-container .grid-table {
  border-top: 0 none;
}
.active-license-msg .device-summary-grid .grid-content-td,
#setupView.cloud-setup-view .device-summary-grid .grid-content-td {
  padding-top: 18px;
  padding-bottom: 18px;
}
.active-license-msg .device-summary-grid .grid-header-tr .grid-header,
#setupView.cloud-setup-view .device-summary-grid .grid-header-tr .grid-header {
  padding-top: 17px;
  padding-bottom: 18px;
}
.active-license-msg .device-summary-grid .grid-header-container,
#setupView.cloud-setup-view .device-summary-grid .grid-header-container {
  font-size: 14px;
  line-height: 17px;
}

.combobox-label.show-up .supplement {
  float: right;
  color: var(--tab-color-primary, #868E93);
}

.msg-btn-wrap .link.skip {
  position: fixed;
  right: 141px;
  bottom: 28px;
  font-size: 15px;
}

.get-trail-license-msg {
  z-index: 901;
  /* Required */
  text-align: center;
}
.get-trail-license-msg .try-license-img {
  width: 240px;
  height: 160px;
  margin: 0 auto 31.7px;
  background-image: url("../img/try-license.png");
}
.get-trail-license-msg .try-license-p {
  margin-bottom: 12px;
}
.get-trail-license-msg .try-license-title {
  font-size: 18px;
  line-height: 20px;
}
.get-trail-license-msg .msg-content-container {
  padding-top: 8px !important;
  padding-bottom: 18px !important;
}
.get-trail-license-msg .msg-btn-container {
  margin-bottom: 36px;
  text-align: center;
}
.get-trail-license-msg .button-button {
  width: 190px;
  vertical-align: middle;
}
.get-trail-license-msg .secondary-button .button-button {
  width: 125px;
}

.import-device-msg .msg-wrap {
  width: 540px;
}
.import-device-msg .import-img {
  width: 120px;
  height: 120px;
  margin: 40px auto 24px;
  background-image: url("../img/No Date.png");
}
.import-device-msg .msg-content-container {
  padding-top: 0;
  font-size: 18px;
  line-height: 20px;
  text-align: center;
}
.import-device-msg .progressbar-wrap-outer {
  padding-right: 0;
}
.import-device-msg .progressbar-text {
  display: none;
}
.import-device-msg .progressbar-content {
  width: 404px;
}

/* -------------------------------------------------------------------------- */
/*                               Global options                               */
/* -------------------------------------------------------------------------- */
#global-combobox-options.cascader.license .combobox-list-content-wrap-outer {
  box-shadow: none;
  padding-top: 0;
  padding-bottom: 0;
}
#global-combobox-options.cascader.license .combobox-list-content-wrap {
  display: flex;
  flex-direction: row-reverse;
  padding-top: 16px;
  padding-bottom: 16px;
  white-space: nowrap;
  background-color: #fff;
  box-shadow: 0 0 2px 0 rgba(54, 62, 77, 0.36), 0 2px 2px 0 rgba(54, 62, 77, 0.18);
}
#global-combobox-options.cascader.license .combobox-list-content-wrap.col-2 {
  width: 200%;
}
#global-combobox-options.cascader.license ul.combobox-list-2,
#global-combobox-options.cascader.license ul.combobox-list {
  width: 100%;
}
#global-combobox-options.cascader.license ul.combobox-list-2.col-2,
#global-combobox-options.cascader.license ul.combobox-list.col-2 {
  width: 50%;
}
#global-combobox-options.cascader.license .combobox-list-2 {
  height: 100%;
  background-color: #fff;
}
#global-combobox-options.cascader.license .combobox-list-2 .combobox-list.selected {
  font-weight: normal;
}
#global-combobox-options.cascader.license .combobox-list-2 .supplement::before {
  content: "";
  display: inline-block;
  margin-top: -4px;
  margin-right: 2px;
  width: 24px;
  height: 24px;
  background-image: url("../img/clock-b.png");
  vertical-align: middle;
}
#global-combobox-options.cascader.license .combobox-list.selected {
  color: #0492EB;
}
#global-combobox-options.cascader.license .supplement {
  float: right;
}
#global-combobox-options.cascader.license .has-sub-icon {
  display: none;
}

/* -------------------------------------------------------------------------- */
/*                                 Global Tip                                 */
/* -------------------------------------------------------------------------- */
.title-tip .row {
  display: flex;
  justify-content: space-between;
  width: 137px;
}
.title-tip .row .num {
  color: #0DC901;
}
.title-tip .row + .row {
  margin-top: 6px;
}
.title-tip .row + .row .num {
  color: inherit;
}

/* -------------------------------------------------------------------------- */
/*                                Insufficient                                */
/* -------------------------------------------------------------------------- */
.insufficient-msg.msg-container {
  z-index: 902;
}
.insufficient-msg.msg-container .msg-wrap {
  width: 854px;
}
.insufficient-msg.msg-container .msg-content-container {
  max-height: 489px;
  padding-bottom: 0;
  margin-bottom: 30px;
}
.insufficient-msg.msg-container .title {
  margin-bottom: 30px;
  font-size: 20px;
}

/* -------------------------------------------------------------------------- */
/*                                LicenseTypeCard                             */
/* -------------------------------------------------------------------------- */
.choose-license-type {
  font-size: 24px;
  font-weight: bold;
}

.license-type-card {
  display: flex;
  justify-content: center;
  margin-top: -10px;
}
.license-type-card .license-type {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 370px;
  height: 630px;
  padding: 60px 50px 50px;
  background: #FFFFFF;
  box-shadow: 0px 4px 54px -12px rgba(189, 198, 202, 0.8);
  border-radius: 14px;
  margin: 30px;
}
.license-type-card .license-type #pro-text {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 20px;
  font-size: 28px;
  font-weight: 700;
  color: #374FD5;
  background-color: rgba(55, 79, 213, 0.1);
  border-radius: 14px 0px 14px 0px;
}
.license-type-card .license-type #pro-text .widget-container.paragraph-container {
  margin-bottom: 0;
}
.license-type-card .license-type .license-title {
  display: block;
  position: relative;
  font-size: 24px;
  letter-spacing: 0;
  text-align: center;
  font-weight: 700;
  color: #36444B;
}
.license-type-card .license-type .license-title::after {
  content: "";
  position: absolute;
  width: 270px;
  height: 1px;
  bottom: -20px;
  left: 0;
  background-color: #36444B;
  opacity: 0.24;
}
.license-type-card .license-type .license-card-ul-container {
  margin-top: 20px;
  height: 360px;
  overflow: auto;
}
.license-type-card .license-type .license-card-ul li {
  position: relative;
  margin-top: 20px;
  font-size: 16px;
  color: #36444B;
  letter-spacing: 0;
  font-weight: 400;
  padding-left: 20px;
}
.license-type-card .license-type .license-card-ul li::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  top: 7px;
  left: 0;
  border-radius: 50%;
  background-color: black;
}
.license-type-card .license-type .license-card-ul li:first-child {
  margin-top: 0;
}
.license-type-card .license-type .license-card-ul.cloud-based-pro li:first-child {
  font-size: 16px;
  color: #36444B;
  letter-spacing: 0;
  font-weight: 700;
}
.license-type-card .license-type .license-select-btn {
  position: absolute;
  bottom: 25px;
  left: 50px;
  right: 50px;
}
.license-type-card .license-type .license-select-btn .button-button {
  height: 50px;
  line-height: 50px;
  border-radius: 6px;
  font-size: 20px;
}

.restore-progress-msg {
  text-align: center;
}
.restore-progress-msg .progressbar-plus {
  margin-top: 120px;
}
.restore-progress-msg .progressbar-wrap-outer {
  padding-right: 0;
}
.restore-progress-msg .progressbar-text {
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
  top: -50px;
  left: 0;
  right: 0;
  font-size: 18px;
}
.restore-progress-msg .progressbar-text .progressbar-text {
  margin-left: 10px;
}
.restore-progress-msg .restoring-text {
  margin-bottom: 40px;
}
.restore-progress-msg .icon-import-fail {
  width: 128px;
  height: 128px;
  background-image: url(../img/Feedback_Fail.png);
}
.restore-progress-msg .fail-result-tip {
  margin-top: 29px;
  margin-bottom: 16px;
  font-size: 18px;
  color: #212121;
}
.restore-progress-msg .fail-result {
  margin-bottom: 26px;
  color: var(--tab-color-primary, #868E93);
}
.restore-progress-msg .fail-btn .button-button {
  width: 266px;
}

.batch-active-view .license-batch-wrap {
  margin-right: 60px;
}
.batch-active-view .license-batch-title {
  margin-bottom: 24px;
  font-size: 18px;
  width: 360px;
}
.batch-active-view .license-batch-text {
  margin-bottom: 30px;
  font-size: 14px;
  line-height: 20px;
}
.batch-active-view .batch-active-license .icon {
  display: none;
}
.batch-active-view .batch-active-license .radio-label {
  display: inline-block;
  width: 320px;
  height: 44px;
  line-height: 44px;
  margin-bottom: 16px;
  border: 1px solid var(--components-border-primary, #bec3c5);
  font-size: 14px;
  text-align: center;
  color: var(--tab-color-primary, #868E93);
  border-radius: 3px;
}
.batch-active-view .batch-active-license .radio-label:hover {
  background-color: rgba(4, 146, 235, 0.08);
}
.batch-active-view .batch-active-license .radio-label.disabled {
  background-color: transparent;
}
.batch-active-view .batch-active-license .radio-label.checked {
  font-weight: bold;
  border-color: #0492eb;
  background: rgba(4, 146, 235, 0.08);
}
.batch-active-view .batch-active-license .radio-label.checked .text {
  color: #0492eb;
  vertical-align: baseline;
}
.batch-active-view .used-license-list {
  width: 350px;
  height: 250px;
}
.batch-active-view .used-license-list .time-icon {
  vertical-align: middle;
  margin-right: 3px;
}
.batch-active-view .used-license-list .due-time {
  width: auto;
  vertical-align: middle;
  line-height: 44px;
}
.batch-active-view .used-license-list .time-outer {
  position: absolute;
  right: 10px;
  line-height: 44px;
}
.batch-active-view .hr {
  margin-top: 0;
  margin-bottom: 20px;
  height: 4px;
  border: 0 none;
  background-color: #f9f9f9;
}
.batch-active-view .btn-hr {
  position: fixed;
  right: 0;
  bottom: 56px;
  margin-top: 0;
  margin-bottom: 0;
  height: 1px;
  width: 100%;
  border: 0 none;
  background-color: #EBECED;
}
.batch-active-view .show-up-container {
  max-height: 290px;
}
.batch-active-view .show-up-container .devicesList-item-container {
  margin-bottom: 16px !important;
  width: 320px !important;
  height: 44px !important;
  padding-left: 0;
  padding-right: 0;
  border: 1px solid var(--components-border-primary, #bec3c5);
  color: var(--tab-color-primary, #868E93);
  line-height: 44px !important;
  border-radius: 3px;
}
.batch-active-view .show-up-container .devicesList-item-container.selected {
  color: #0492eb;
  background: rgba(4, 146, 235, 0.08);
}
.batch-active-view .show-up-container .devicesList-item-container.selected .devicesList-item-expiration-time .content-label {
  background: url(../img/svg/HistoryActive.svg) no-repeat;
}
.batch-active-view .show-up-container .devicesList-item-container .devicesList-item-content {
  padding-left: 16px;
  padding-right: 16px;
}
.batch-active-view .show-up-container .devicesList-item-container .devicesList-item-license-id {
  width: 114px;
}
.batch-active-view .show-up-container .devicesList-item-container .devicesList-item-expiration-time {
  margin-left: 16px;
}
.batch-active-view .show-up-container .devicesList-item-container .checkbox-icon-inner {
  display: none;
}
.batch-active-view .show-up-container .devicesList-item-container .devicesList-item-expiration-time .content-label {
  margin-top: -5px;
  margin-right: 2px;
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(../img/svg/HistoryNomal.svg);
  vertical-align: middle;
}
.batch-active-view .show-up-container .devicesList-item-container.disabled {
  background-color: #f7f9f9;
  border-color: #d7dddf;
  cursor: default;
}
.batch-active-view .show-up-container .devicesList-item-container.disabled .devicesList-item-content {
  opacity: 0.5;
}
.batch-active-view .show-up-container .devicesList-item-container.selected {
  color: #0492eb;
  border-color: #0492eb;
  background-color: rgba(4, 146, 235, 0.08);
}
.batch-active-view .show-up-container .devicesList-item-container.selected .devicesList-item-content {
  font-weight: bold;
  opacity: 1;
}
.batch-active-view .show-up-container .paging-go {
  display: none !important;
}
.batch-active-view .batch-active-btn-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
}
.batch-active-view .batch-active-btn {
  margin-top: 14px;
  margin-left: 30px;
  margin-bottom: 10px;
}

.add-device-manually-view .device-title {
  padding-top: 17px;
  padding-left: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--s-color-text-split, #EBECED);
  line-height: 17px;
  background-color: var(--table-background-odd, #f8f9fb);
  display: flex;
}
.add-device-manually-view .device-title .item {
  display: inline-block;
  width: 200px;
  font-weight: bold;
}
.add-device-manually-view .device-title .item:first-child {
  width: 80px;
}
.add-device-manually-view .device-title .item + .item {
  margin-left: 40px;
}
.add-device-manually-view .repeat-index {
  flex-shrink: 0;
  width: 80px;
  height: 28px;
  line-height: 28px;
}
.add-device-manually-view .device-repeat .widget-container {
  margin-bottom: 5px;
}
.add-device-manually-view .device-repeat .displaylabel-container {
  margin-left: 10px;
}
.add-device-manually-view .device-repeat .displaylabel-container .tooltip-container {
  margin-top: 2px;
}
.add-device-manually-view .device-repeat .text-container .text-wrap {
  width: 200px;
  height: 28px;
  line-height: 26px;
}
.add-device-manually-view .device-repeat .text-container[name=sn] .text-wrap input {
  text-transform: uppercase;
}
.add-device-manually-view .device-repeat .repeat-item {
  display: flex;
  margin-bottom: 8px;
  padding-left: 24px;
}
.add-device-manually-view .device-repeat .repeat-item .displaylabel-container {
  margin-left: 52px;
  margin-bottom: 0;
}
.add-device-manually-view .device-repeat .repeat-item .displaylabel-container .widget-wrap.text-wrap {
  padding-left: 30px;
}
.add-device-manually-view .device-repeat .repeat-item .displaylabel-container .text-wrap-before {
  margin-left: -30px;
}
.add-device-manually-view .device-repeat .repeat-item .displaylabel-container .text-wrap-display {
  line-height: 14px;
}
.add-device-manually-view .device-repeat .repeat-item .text-container {
  margin-bottom: 0;
}
.add-device-manually-view .device-repeat .repeat-item .text-container + .text-container {
  margin-left: 40px;
}
.add-device-manually-view .device-repeat .error-tips-content.content {
  width: 200px;
}

.network-report-container {
  min-width: 1400px;
}
.network-report-container .operation-bar {
  display: flex;
  justify-content: space-between;
  background: var(--card-primary, #ffffff);
  box-shadow: 0 2px 8px 0 rgba(54, 62, 77, 0.15);
  border-radius: 6px;
}
.network-report-container .operation-bar .network-report-rangepicker .datepicker-display-container {
  border: none;
  background-color: transparent;
  width: auto;
}
.network-report-container .operation-bar .network-report-rangepicker .datepicker-display-container .datepicker-display {
  line-height: 28px;
  width: 88px;
}
.network-report-container .operation-bar .report-export-outer {
  font-size: 0;
}
.network-report-container .operation-bar .report-export-outer .export-item {
  height: 28px;
  background: #0492eb;
  box-shadow: 2px 2px 10px 0 rgba(54, 62, 77, 0.1);
}
.network-report-container .operation-bar .report-export-outer .export-item .button-button {
  width: 64px;
  height: 28px;
  display: flex;
  padding: 0;
  font-weight: normal;
}
.network-report-container .operation-bar .report-export-outer .export-item .button-button:hover, .network-report-container .operation-bar .report-export-outer .export-item .button-button:active {
  background-color: #04B0FF;
}
.network-report-container .operation-bar .report-export-outer .export-item .button-button .button-icon {
  margin: auto;
}
.network-report-container .operation-bar .report-export-outer .export-item:last-child {
  border-left: 1px solid var(--components-border-primary, #BEC3C5);
  border-radius: 0 6px 6px 0;
}
.network-report-container .operation-bar .report-export-outer .export-item:last-child .button-button {
  border-radius: 0 6px 6px 0;
}
.network-report-container .card-title-tools > div {
  display: inline-block;
  vertical-align: middle;
}
.network-report-container .card-title-tools .chart-legend {
  margin-right: 20px;
}
.network-report-container .card-title-tools .legend-item {
  display: inline-block;
  margin-right: 12px;
  cursor: pointer;
}
.network-report-container .card-title-tools .legend-item.selected {
  opacity: 0.5;
}
.network-report-container .card-title-tools .legend-item > span {
  display: inline-block;
  vertical-align: middle;
}
.network-report-container .card-title-tools .legend-item > span.point {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  margin-right: 6px;
}
.network-report-container .card-title-tools .legend-item > span.text {
  color: var(--tab-color-primary, #868E93);
  font-size: 15px;
}
.network-report-container .chart-item .chart-canvas {
  width: 100% !important;
}

.report-email-msg {
  height: calc(100% - 57px);
  top: 57px !important;
  left: auto !important;
  right: 0 !important;
}
.report-email-msg .msg-wrap {
  width: 420px;
}
.report-email-msg .msg-close {
  top: 21px;
  right: 20px;
}
.report-email-msg .msg-title {
  background: var(--msg-background-title, #F2F3F5);
  height: 58px;
  line-height: 58px;
  color: var(--msg-color-content, #363E4D);
  padding-left: 20px;
}
.report-email-msg .msg-content-container {
  max-height: calc(100vh - 187px);
  padding: 0px 20px;
  margin: 10px 0;
}
.report-email-msg .msg-btn-container {
  padding: 0 20px;
}
.report-email-msg .widget-container .widget-fieldlabel-wrap, .report-email-msg .send-email-text {
  color: var(--s-color-text-tertiary, #5E696F);
}
.report-email-msg .textarea-container .text-wrap-outer,
.report-email-msg .textarea-container .widget-wrap,
.report-email-msg .textarea-container .text-wrap {
  width: 100%;
  display: inline-block;
  max-width: unset;
}
.report-email-msg .cloud-access-required {
  margin-left: 0;
  margin-bottom: 0;
}
.report-email-msg .cloud-access-required .button-button-before {
  display: inline-block;
  margin-right: 7px;
  width: 18px;
  height: 18px;
  background-image: url("../img/Info2.png");
  vertical-align: sub;
}
.report-email-msg .cloud-access-required .button-button {
  border-color: #ffbb00;
  font-weight: normal;
  line-height: 28px;
  background-color: rgba(255, 215, 1, 0.08);
}

.export-report .report-onece-popup {
  min-width: 320px;
  position: absolute;
  right: 0;
  top: 40px;
  z-index: 800;
  background-color: var(--msg-background-content, #ffffff);
  box-shadow: 0 0 8px 0 rgba(54, 62, 77, 0.2), 0 8px 8px 0 rgba(54, 62, 77, 0.1);
  border-radius: 3px;
  padding: 24px;
}
.export-report .report-onece-popup .title {
  font-size: 16px;
  font-weight: bold;
}
.export-report .report-onece-popup:before {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-bottom: 8px solid var(--msg-background-content, #ffffff);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  top: -8px;
  right: 27px;
}
.export-report .report-onece-popup .export-type-radio {
  margin: 30px 0;
}

.export-type-radio .radio-group-list-wrap {
  display: flex;
  justify-content: space-between;
}
.export-type-radio .radio-group-list-wrap .radio-list {
  margin-right: 40px;
}
.export-type-radio .radio-group-list-wrap .radio-list:last-child {
  margin-right: 0;
}
.export-type-radio .radio-radio ~ .text {
  display: inline-block;
}

#report-email-msg .msg-content-container .widget-fieldlabel-wrap {
  display: block;
  top: 0;
  transform: none;
}

.network-summary .summary-overview {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.network-summary .summary-overview .card-item {
  display: inline-block;
  width: 24%;
  min-width: 280px;
  padding: 20px 16px;
  border-radius: 6px;
  background: var(--card-primary, #ffffff);
}
.network-summary .summary-overview .card-item .card-title {
  padding-bottom: 16px;
  font-size: 15px;
  font-weight: bold;
}
.network-summary .summary-overview .card-item .card-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(189, 189, 189, 0.5);
}
.network-summary .summary-overview .card-item .card-content > div {
  display: inline-block;
}
.network-summary .summary-overview .card-item .card-content .text {
  height: 36px;
  line-height: 36px;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 0;
}
.network-summary .summary-overview .card-item .card-info {
  padding-top: 12px;
}
.network-summary .summary-overview .card-item .card-info .displaylabel-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}
.network-summary .summary-overview .card-item .card-info .widget-fieldlabel-wrap {
  color: var(--tab-color-primary, #868E93);
  position: static;
  transform: none;
}
.network-summary .summary-overview .card-item .displaylabel-container.notice .text-wrap-display {
  color: #ff2954;
}
.network-summary .summary-overview .card-item-3 {
  width: 32%;
}
.network-summary .summary-overview .wireless-client-tip {
  position: static;
}

#summary-gateway-model .widget-fieldlabel-wrap {
  min-width: 50px;
}

.wired-summary .isp-load {
  width: 100%;
  margin-bottom: 12px;
}
.wired-summary .isp-load .card-container .card-item .title {
  padding-right: 0;
}
.wired-summary .isp-load .card-container .card-item .card-title-tip {
  position: relative;
  float: right;
  margin-top: 2px;
}
.wired-summary .isp-load .card-container .card-item .card-title-tip .latency {
  margin-right: 20px;
}

#iptv-view .custom-item {
  display: inline-block;
  vertical-align: top;
}
#iptv-view .iptv-mode .widget-wrap,
#iptv-view .iptv-mode .radio-content-wrap {
  display: inline-block;
}

.ppsk-view .note-list {
  padding-left: 20px;
}
.ppsk-view .ppsk-list .text-container .text-wrap-outer .text-wrap {
  border: 0 none;
}
.ppsk-view .ppsk-list .password-wrap {
  width: 130px;
}
.ppsk-view .ppsk-list .text-container .text-wrap {
  padding-left: 0;
}

#add-ppsk-profile-msg .msg-content-container,
#add-ppsk-msg .msg-content-container {
  max-height: 500px;
}

#add-ppsk-repeat .repeat-item:first-child .delete-btn-container {
  display: none;
}

.msg-container.import-ppsk-msg, .msg-container.ppsk-conflict-msg {
  z-index: 902;
}

.mask.import-ppsk-msg, .mask.ppsk-conflict-msg {
  z-index: 901;
}

.privacy-popover {
  width: 100%;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 30px;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
}
.privacy-popover .title {
  font-size: 18px;
}
.privacy-popover .opt-btns {
  min-width: 370px;
}

.basic-cookie-panel .panel-header {
  padding-bottom: 0;
}
.basic-cookie-panel .panel-content {
  padding-top: 12px;
}
.basic-cookie-panel .cookie-item .type {
  font-weight: bold;
}
.basic-cookie-panel .cookie-item .name {
  margin-top: 10px;
  border-top: 1px solid;
  padding-top: 10px;
  color: var(--tab-color-primary, #868E93);
}

#eo-gre-view .draggable-list-title {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: bold;
  color: #868E93;
}

.drawer-title-container .status-wrap {
  margin-left: 4px;
  font-size: 0;
}
.drawer-title-container .status-wrap > span {
  height: 20px;
  vertical-align: middle;
}
.drawer-title-container .device-status {
  border: 1px solid;
  font-size: 12px;
  display: inline-block;
  line-height: 18px;
  padding: 0 4px;
  margin-right: 4px;
}
.drawer-title-container .disconnected {
  color: #ff2954;
}
.drawer-title-container .connected {
  color: #0dc901;
}
.drawer-title-container .pending,
.drawer-title-container .isolated {
  color: #0492eb;
}
.drawer-title-container .pending.failed,
.drawer-title-container .isolated.failed {
  color: #ff2954;
}
.drawer-title-container .pending.warn,
.drawer-title-container .isolated.warn {
  color: #ff9500;
}
.drawer-title-container .heartbeatMissed {
  color: #ff9500;
}

.drawer-container.shown .drawer-tab .tab-btn[data-name=batch-switch] .text, .drawer-container.shown .drawer-tab .tab-btn[data-name=batch-ap] .text, .drawer-container.shown .drawer-tab .tab-btn[data-name=batch-active] .text, .drawer-container.shown .drawer-tab .tab-btn[data-name=batch-clients] .text {
  display: inline-block;
  position: absolute;
  right: -11px;
  font-size: 12px;
  color: #ffffff;
  width: 32px;
  line-height: 18px;
  text-align: center;
  top: 32px;
  border-radius: 8px;
  background: #ff9500;
}

.device-settings .hidden {
  display: none !important;
}
.device-settings .legend-info-outer {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}
.device-settings .port-status-container .icon,
.device-settings .port-status-container .icon-outer,
.device-settings .grid-status-container .icon,
.device-settings .grid-status-container .icon-outer {
  display: inline-block;
  vertical-align: middle;
}
.device-settings .port-status-container .icon-outer,
.device-settings .grid-status-container .icon-outer {
  text-indent: unset;
}
.device-settings .port-status-container .disabled .icon-outer,
.device-settings .grid-status-container .disabled .icon-outer {
  background-color: #aeb4b7 !important;
}
.device-settings .port-status-container .gbps .icon-outer,
.device-settings .grid-status-container .gbps .icon-outer {
  background-color: #0dc901;
}
.device-settings .port-status-container .mbps .icon-outer,
.device-settings .grid-status-container .mbps .icon-outer {
  background-color: #ff9500;
}
.device-settings .port-status-container .gbps2 .icon-outer,
.device-settings .grid-status-container .gbps2 .icon-outer {
  background-color: #00cfd9;
}
.device-settings .port-status-container .gbps10 .icon-outer,
.device-settings .grid-status-container .gbps10 .icon-outer {
  background-color: #0093f3;
}
.device-settings .port-status-container .gbps5 .icon-outer,
.device-settings .grid-status-container .gbps5 .icon-outer {
  background-color: #00c5ff;
}
.device-settings .port-status-container .disconnected .icon-outer,
.device-settings .grid-status-container .disconnected .icon-outer {
  background-color: rgba(73, 84, 107, 0.9);
}
.device-settings .port-status-container .info-item-container,
.device-settings .grid-status-container .info-item-container {
  font-size: 0;
  padding: 0 2px;
  white-space: nowrap;
  margin-bottom: 5px;
}
.device-settings .port-status-container .info-item-container .text,
.device-settings .grid-status-container .info-item-container .text {
  vertical-align: middle;
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
}
.device-settings .port-status-container .info-item-container .icon,
.device-settings .port-status-container .info-item-container .icon-outer,
.device-settings .grid-status-container .info-item-container .icon,
.device-settings .grid-status-container .info-item-container .icon-outer {
  width: 12px;
  height: 12px;
}
.device-settings .port-status-container .info-item-container .icon-outer,
.device-settings .grid-status-container .info-item-container .icon-outer {
  margin: 2px 4px 2px 2px;
}
.device-settings .port-status-container .info-item-container.wan .icon,
.device-settings .port-status-container .info-item-container.wan .icon-outer, .device-settings .port-status-container .info-item-container.lan .icon,
.device-settings .port-status-container .info-item-container.lan .icon-outer, .device-settings .port-status-container .info-item-container.poe .icon,
.device-settings .port-status-container .info-item-container.poe .icon-outer, .device-settings .port-status-container .info-item-container.uplink .icon,
.device-settings .port-status-container .info-item-container.uplink .icon-outer, .device-settings .port-status-container .info-item-container.mirror .icon,
.device-settings .port-status-container .info-item-container.mirror .icon-outer, .device-settings .port-status-container .info-item-container.stp .icon,
.device-settings .port-status-container .info-item-container.stp .icon-outer,
.device-settings .grid-status-container .info-item-container.wan .icon,
.device-settings .grid-status-container .info-item-container.wan .icon-outer,
.device-settings .grid-status-container .info-item-container.lan .icon,
.device-settings .grid-status-container .info-item-container.lan .icon-outer,
.device-settings .grid-status-container .info-item-container.poe .icon,
.device-settings .grid-status-container .info-item-container.poe .icon-outer,
.device-settings .grid-status-container .info-item-container.uplink .icon,
.device-settings .grid-status-container .info-item-container.uplink .icon-outer,
.device-settings .grid-status-container .info-item-container.mirror .icon,
.device-settings .grid-status-container .info-item-container.mirror .icon-outer,
.device-settings .grid-status-container .info-item-container.stp .icon,
.device-settings .grid-status-container .info-item-container.stp .icon-outer {
  width: 16px;
  height: 16px;
  margin: 0;
}
.device-settings .port-status-container .info-item-container.wan .icon-outer, .device-settings .port-status-container .info-item-container.lan .icon-outer, .device-settings .port-status-container .info-item-container.poe .icon-outer, .device-settings .port-status-container .info-item-container.uplink .icon-outer, .device-settings .port-status-container .info-item-container.mirror .icon-outer, .device-settings .port-status-container .info-item-container.stp .icon-outer,
.device-settings .grid-status-container .info-item-container.wan .icon-outer,
.device-settings .grid-status-container .info-item-container.lan .icon-outer,
.device-settings .grid-status-container .info-item-container.poe .icon-outer,
.device-settings .grid-status-container .info-item-container.uplink .icon-outer,
.device-settings .grid-status-container .info-item-container.mirror .icon-outer,
.device-settings .grid-status-container .info-item-container.stp .icon-outer {
  margin-right: 2px;
}
.device-settings .port-status-container .port-repeat,
.device-settings .grid-status-container .port-repeat {
  display: table;
  width: 100%;
  padding: 0 20px;
  text-align: center;
}
.device-settings .port-status-container .port-repeat .repeat-item,
.device-settings .grid-status-container .port-repeat .repeat-item {
  display: table-cell;
  padding-right: 5px;
}
.device-settings .port-status-container .port-repeat .port-item .icon,
.device-settings .port-status-container .port-repeat .port-item .icon-outer,
.device-settings .grid-status-container .port-repeat .port-item .icon,
.device-settings .grid-status-container .port-repeat .port-item .icon-outer {
  width: 20px;
  height: 20px;
}
.device-settings .port-status-container .port-repeat .port-item.light .icon-outer,
.device-settings .port-status-container .port-repeat .port-item.wider .icon-outer,
.device-settings .grid-status-container .port-repeat .port-item.light .icon-outer,
.device-settings .grid-status-container .port-repeat .port-item.wider .icon-outer {
  width: 26px;
}
.device-settings .gateway-devices-tab {
  display: none;
}
.device-settings .separator {
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #ccd0d1, transparent);
  margin: 12px 0;
}
.device-settings .combination-container .separator {
  margin-left: 3px;
  margin-right: 3px;
  background-image: none;
}
.device-settings .info-container .info-title {
  color: var(--tab-color-primary, #868E93);
}
.device-settings .info-container .info-content {
  line-height: 20px;
}
.device-settings .upload-container {
  position: relative;
}
.device-settings .upload-container .upragde-sm-opts .widget-fieldlabel-wrap {
  line-height: 14px;
}
.device-settings .upload-container .file-wrap-outer.widget-wrap-outer {
  display: block;
}
.device-settings .upload-container .upgrade-btn.absolute {
  position: absolute;
  top: 0;
}
.device-settings .upload-container .upgrade-btn.absolute.single {
  top: 40px;
}
.device-settings .router-path-content {
  padding: 0;
}
.device-settings .displaylabel-container .widget-wrap-outer {
  display: block;
}
.device-settings .displaylabel-container,
.device-settings .display-container {
  width: 47%;
  display: inline-block;
  vertical-align: top;
  margin-right: 5px;
}
.device-settings .displaylabel-container .text-wrap-outer {
  line-height: 20px;
}
.device-settings .displaylabel-container .text-wrap-outer,
.device-settings .displaylabel-container .text-wrap-outer .text-wrap,
.device-settings .displaylabel-container .text-wrap-outer .text-wrap-display {
  vertical-align: bottom;
  width: 100%;
  word-wrap: break-word;
}
.device-settings .display-container .widget-container.displaylabel-container {
  width: 100%;
}
.device-settings .block-container {
  width: 100%;
}
.device-settings .widget-container .widget-fieldlabel-wrap {
  color: var(--s-color-text-tertiary, #5E696F);
}
.device-settings .batch-upgrade-progress .progressbar-wrap-outer {
  padding-right: 0;
}
.device-settings .device-status-container {
  background: var(--card-primary, #FFFFFF);
  border: solid 1px var(--tab-color-primary, #868E93);
  border-radius: 5px;
  margin-bottom: 20px;
}
.device-settings .device-status-container .paragraph-container {
  font-weight: bold;
  font-size: 15px;
  line-height: 20px;
  padding-left: 20px;
  padding-top: 15px;
}
.device-settings .device-health-container {
  padding: 0 20px;
  background: var(--card-primary, #ffffff);
  margin-bottom: 20px;
}
.device-settings .device-health-container.wifi {
  border: solid 1px var(--tab-color-primary, #868E93);
  border-radius: 5px;
}
.device-settings .device-health-container .paragraph-container {
  font-weight: bold;
  font-size: 15px;
  line-height: 20px;
  padding-top: 20px;
}
.device-settings .device-health-container .empty-wrapper, .device-settings .device-health-accordion .empty-wrapper, .device-settings .health-detail .empty-wrapper, .device-settings .detail-incident-container .empty-wrapper {
  display: none;
  background: var(--card-primary, #ffffff);
  padding: 10px 0;
  font-size: 16px;
  color: var(--tab-color-primary, #868E93);
}
.device-settings .device-health-container .empty-wrapper .empty, .device-settings .device-health-accordion .empty-wrapper .empty, .device-settings .health-detail .empty-wrapper .empty, .device-settings .detail-incident-container .empty-wrapper .empty {
  margin: 20px auto;
  text-align: center;
}
.device-settings .device-health-container.empty .chart,
.device-settings .device-health-container.empty .content, .device-settings .device-health-accordion.empty .chart,
.device-settings .device-health-accordion.empty .content, .device-settings .health-detail.empty .chart,
.device-settings .health-detail.empty .content, .device-settings .detail-incident-container.empty .chart,
.device-settings .detail-incident-container.empty .content {
  display: none;
}
.device-settings .device-health-container.empty .empty-wrapper, .device-settings .device-health-accordion.empty .empty-wrapper, .device-settings .health-detail.empty .empty-wrapper, .device-settings .detail-incident-container.empty .empty-wrapper {
  display: block;
}
.device-settings .device-health-container.empty .summary-wrapper, .device-settings .device-health-accordion.empty .summary-wrapper, .device-settings .health-detail.empty .summary-wrapper, .device-settings .detail-incident-container.empty .summary-wrapper {
  display: none;
}
.device-settings .device-health-container.empty .journey, .device-settings .device-health-accordion.empty .journey, .device-settings .health-detail.empty .journey, .device-settings .detail-incident-container.empty .journey {
  display: none;
}
.device-settings .device-health-accordion .empty-wrapper, .device-settings .health-detail .empty-wrapper {
  margin-bottom: 0;
}
.device-settings #ap-settings-tab,
.device-settings #gateway-settings-tab,
.device-settings #switch-settings-tab,
.device-settings #clients-settings-tab {
  position: relative;
}
.device-settings .settings-health-granularity {
  position: absolute;
  right: 0;
  display: inline-block;
}
.device-settings .settings-health-granularity .time-range-text {
  font-weight: normal;
  color: #9b9b9b;
}
.device-settings #vlan-interface-grid .switch-container {
  margin-bottom: 0;
}
.device-settings #vlan-interface-grid .grid-content-td-action-column .td-content {
  border-right: 1px solid var(--tab-color-primary, #868E93);
}
.device-settings #vlan-interface-grid .btn-edit .icon,
.device-settings #vlan-interface-grid .grid-content-btn-edit .icon {
  background-image: none;
}
.device-settings #vlan-interface-grid .hover .grid-content-btn-edit .icon {
  background-image: url(../img/svg/TableIconEdit.svg);
}
.device-settings #vlan-interface-grid .grid-content-td-3 {
  padding-top: 0;
  padding-bottom: 0;
}
.device-settings .vlan-interface-edit-field .dhcp-detail {
  width: auto;
}
.device-settings .batch-config-grid .grid-content-td-name {
  cursor: pointer;
}
.device-settings .batch-config-grid .device-name {
  border-bottom: 1px solid;
  display: inline-block;
  vertical-align: middle;
}
.device-settings .batch-config-grid span.status-spot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  vertical-align: middle;
  margin-right: 10px;
}
.device-settings .batch-config-grid span.status-spot.disconnected {
  background-color: #ff2954;
}
.device-settings .batch-config-grid span.status-spot.connected {
  background-color: #0dc901;
}
.device-settings .batch-config-grid span.status-spot.isolated {
  background-color: #0492eb;
}
.device-settings .batch-config-grid span.status-spot.pending {
  background-color: #0492eb;
}
.device-settings .batch-config-grid span.status-spot.heartbeatMissed {
  background-color: #ff9500;
}
.device-settings .client-name {
  border-bottom: 1px solid;
  cursor: pointer;
}
.device-settings .device-upgrade-progressbar .progressbar-content {
  width: 320px;
}
.device-settings .gateway-ip {
  margin-left: -90px;
  vertical-align: bottom;
}

.gateway-settings .ipv4-label.tab-container .tab-btn[data-name=ipv4] {
  background: unset;
  border: unset;
  color: var(--s-color-text-tertiary, #5E696F);
  padding: 0;
}
.gateway-settings .link-container .paragraph-container {
  color: var(--s-color-text-tertiary, #5E696F);
  line-height: 18px;
}
.gateway-settings .ip-type-outer {
  border-bottom: solid 1px #ccd0d1;
}
.gateway-settings .ip-type-outer .no-ipv6-container {
  text-align: center;
}
.gateway-settings .ip-type-outer .no-ipv6-container .text {
  padding: 10px 0;
}
.gateway-settings .accordion-sub-title {
  position: absolute;
  right: 26px;
}
.gateway-settings .accordion-sub-title .error {
  color: #ff2954;
}
.gateway-settings .accordion-sub-title .done {
  color: #0492eb;
}
.gateway-settings .accordion-sub-title .doing {
  color: #0dc901;
}
.gateway-settings .accordion-sub-title .link-down {
  color: var(--tab-color-primary, #868E93);
}
.gateway-settings .accordion-sub-title .ipv6 {
  margin-left: 5px;
  border-left: 2px solid var(--tab-color-primary, #868E93);
  padding-left: 5px;
}
.gateway-settings .accordion-sub-title .fair {
  color: #FFBB00;
}
.gateway-settings .accordion-sub-title .good {
  color: #22B819;
}
.gateway-settings .accordion-sub-title .poor {
  color: #FF2954;
}
.gateway-settings .accordion-sub-title .nodata {
  color: #BFC3C9;
}
.gateway-settings #networks-grid .grid-header,
.gateway-settings #networks-grid .grid-content-td {
  padding-right: 0;
}

.switch-settings .hidden {
  display: none !important;
}
.switch-settings .detail-incident-container {
  position: relative;
}
.switch-settings .stack-group-incident-tab {
  position: absolute;
  top: 32px;
  right: 0;
}
.switch-settings .port-operation .tooltip-container {
  position: relative;
  top: 33px;
}
.switch-settings .displaylabel-container.warning .text-wrap {
  color: #ff2954;
}
.switch-settings .port-status-container .port-repeat {
  padding: 20px 0;
}
.switch-settings .port-status-container .port-item {
  position: relative;
  margin-bottom: 12px;
}
.switch-settings .port-status-container .port-item .text {
  position: absolute;
  width: 100%;
  height: 15px;
  left: 0;
  color: var(--tab-color-primary, #868E93);
}
.switch-settings .port-status-container .port-item.even-item .text {
  top: -17px;
}
.switch-settings .port-status-container .port-item.odd-item .text {
  bottom: -17px;
}
.switch-settings .grid-status-container .icon,
.switch-settings .grid-status-container .icon-outer {
  width: 16px;
  height: 16px;
}
.switch-settings .checkbox-container {
  min-width: 150px;
}
.switch-settings .port-select-container {
  border: 1px solid 1px solid var(--s-color-text-split, #EBECED);
  padding: 12px 10px;
}
.switch-settings .port-select-container .info-container {
  margin-bottom: 12px;
}
.switch-settings .port-select-container .info-item {
  margin-right: 10px;
}
.switch-settings .port-select-container .info-item .icon {
  width: 14px;
  height: 14px;
  background: 1px solid var(--s-color-text-split, #EBECED);
  vertical-align: middle;
}
.switch-settings .port-select-container .info-item .text {
  display: inline-block;
  vertical-align: middle;
}
.switch-settings .port-select-container .info-item.selected .icon {
  background: #0492eb;
}
.switch-settings .repeat-item .button-container {
  margin-right: 8px;
  font-weight: normal;
}
.switch-settings .repeat-item .button-container .button-button {
  min-width: 25px;
  line-height: 25px;
  background: var(--s-color-text-split, #EBECED);
  color: var(--tab-color-primary, #868E93);
}
.switch-settings .repeat-item .button-container.selected .button-button {
  background: #0492eb;
  color: #ffffff;
}
.switch-settings .port-grid-container {
  position: relative;
}
.switch-settings .port-grid-container .batch-edit-btn {
  position: absolute;
  top: -20px;
  right: 0;
}
.switch-settings .port-grid-container .grid-header-checkcolumn,
.switch-settings .port-grid-container .grid-content-td-check-column {
  padding-right: 0;
}
.switch-settings .port-grid-container .grid-header-actioncolumn.filter-column {
  padding-left: 0;
  padding-right: 0;
}
.switch-settings #batch-port-name .text-hint {
  color: var(--s-color-text-primary, #212121);
}
.switch-settings #port-grid .paging-info-container,
.switch-settings #lag-grid .paging-info-container {
  display: none !important;
}

.ap-settings #channel-utilization-container {
  background: var(--card-primary, #ffffff);
  border: solid 1px var(--tab-color-primary, #868E93);
  border-radius: 5px;
  padding: 10px 16px;
}
.ap-settings #channel-utilization-container .caution {
  color: #ff2954;
}
.ap-settings .channel-utilization-progressbar {
  margin: 5px 0;
}
.ap-settings .channel-utilization-progressbar .widget-fieldlabel-wrap {
  display: none;
}
.ap-settings .channel-utilization-progressbar .progressbar-wrap-outer {
  width: 100%;
  padding-right: 0;
}
.ap-settings .channel-utilization-progressbar .progressbar-wrap {
  width: 100%;
}
.ap-settings .channel-utilization-progressbar .progressbar-content {
  width: 100%;
  height: 10px;
}
.ap-settings .sub-section.rxFrames,
.ap-settings .icon.rxFrames {
  background: #0492eb;
}
.ap-settings .sub-section.txFrames,
.ap-settings .icon.txFrames {
  background: #0dc901;
}
.ap-settings .sub-section.interference,
.ap-settings .icon.interference,
.ap-settings .sub-section.busyUtil,
.ap-settings .icon.busyUtil {
  background: #ff9500;
}
.ap-settings .channel-utilization-item-container {
  margin-bottom: 20px;
}
.ap-settings .channel-utilization-item .channel-info {
  min-width: 40px;
  display: inline-block;
  font-weight: bold;
  font-size: 14px;
}
.ap-settings .channel-utilization-item .mode-info {
  margin-right: 8px;
  display: inline-block;
}
.ap-settings .channel-utilization-item .info-container {
  position: relative;
}
.ap-settings .channel-utilization-item .info-container .evaluation {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 0;
}
.ap-settings .channel-utilization-item .evaluation {
  margin-top: 5px;
}
.ap-settings .utilization.info-panel .info-panel-value {
  font-weight: bold;
}
.ap-settings .legend-info-outer.legend-busy {
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.ap-settings .legend-info-outer.legend-busy .info-item-container {
  min-width: 25%;
}
.ap-settings .channel-utilization-info .icon {
  width: 13px;
  height: 13px;
  vertical-align: middle;
}
.ap-settings .channel-utilization-info .free {
  background: #e5e5e5;
}
.ap-settings #wired-uplink-name .text-wrap-display {
  color: #0492EB;
  cursor: pointer;
}
.ap-settings .uplink-activity-container {
  position: relative;
}
.ap-settings .uplink-activity-container .uplink-activity-tip {
  position: absolute;
  left: 90px;
}
.ap-settings #ap-clients-grid .grid-panel-tbar-container .search-bar-container,
.ap-settings #ap-clients-grid .grid-panel-tbar-container .search-bar-container .searchbar-wrap-outer,
.ap-settings #ap-clients-grid .grid-panel-tbar-container .search-bar-container .text-wrap,
.ap-settings #ap-clients-grid .grid-panel-tbar-container .search-bar-container .text-wrap-outer {
  max-width: none;
  width: 100%;
}
.ap-settings .mesh-grid-container {
  position: relative;
  padding-bottom: 30px;
}
.ap-settings .mesh-grid-container .grid-content-tr.disabled {
  background-color: var(--s-color-text-split, #ebeced);
}
.ap-settings .mesh-grid-container #mesh-uplinks-grid_paging {
  position: absolute;
  bottom: 0;
  left: 0;
}
.ap-settings .mesh-grid-container .mesh-rescan-btn {
  margin-bottom: 0;
  line-height: 28px;
  position: absolute;
  bottom: 0;
  right: 0;
}
.ap-settings #mesh-scanning-area .gif-container {
  margin-bottom: 12px;
}
.ap-settings .switch-icon {
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 6px;
}
.ap-settings .action-linkAp,
.ap-settings .action-offline {
  font-weight: bold;
  font-size: 14px;
  padding: 5px 10px;
  vertical-align: middle;
  display: inline-block;
}
.ap-settings .action-linkAp, .ap-settings .action-linkAp + .link-icon {
  margin: 3px 4px;
}
.ap-settings .action-linkAp.ready + .link-icon {
  margin: 0;
}
.ap-settings .action-linkAp.ready {
  color: #0492EB;
  cursor: pointer;
  display: inline-block;
}
.ap-settings .action-linkAp.ready.full {
  color: #0492EB;
  opacity: 0.5;
}
.ap-settings .action-linkAp.offline {
  color: #c11c66;
  display: inline-block;
  cursor: default;
  border: none;
}
.ap-settings .action-linkAp.doing {
  color: #0492EB;
  opacity: 0.5;
  cursor: default;
}
.ap-settings .action-linkAp.fail {
  color: #c11c66;
  cursor: pointer;
  display: inline-block;
}
.ap-settings .action-linkAp.done {
  color: var(--tab-color-primary, #868E93);
  cursor: default;
  border: none;
}
.ap-settings .linkAp-icon {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}
.ap-settings .mesh-ap-icon-container {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 10px;
  transform: translateY(-50%);
}
.ap-settings .linkAp-icon.done {
  cursor: pointer;
}
.ap-settings [widget=infoPanel].grid {
  padding: 0;
}
.ap-settings [widget=infoPanel].grid table {
  border-collapse: collapse;
}
.ap-settings [widget=infoPanel].grid table td {
  border: 1px solid #e5e5e5;
  padding: 13px 16px;
}
.ap-settings [widget=infoPanel].grid .info-panel-row:first-child {
  font-weight: bold;
  background: #f0f0f0;
}
.ap-settings .rf-scan-toolbar {
  position: relative;
  top: 2px;
  margin-bottom: 14px;
}
.ap-settings .rf-scan-toolbar #ap-rf-scan-btn {
  position: absolute;
  top: -2px;
  right: 0;
}
.ap-settings .rf-scan-content {
  text-align: center;
}
.ap-settings .rf-scan-content .last-scan-info {
  text-align: right;
  color: #a0a5ad;
  font-size: 10px;
}
.ap-settings .rf-scan-content .rf-scan-para {
  display: inline-block;
  padding: 60px 0 80px 0;
  width: 250px;
}
.ap-settings .rf-scanning-container {
  margin-top: 30px;
  margin-bottom: 40px;
}
.ap-settings .rf-scanning-container .icon {
  margin: 0 auto;
}
.ap-settings .rf-scanning-container .title {
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  line-height: 21px;
  margin-top: 20px;
  margin-bottom: 15px;
}
.ap-settings .rf-scanning-container .content {
  font-size: 14px;
  text-align: center;
  line-height: 20px;
  color: var(--tab-color-primary, #868E93);
  max-width: 700px;
  margin: auto;
}
.ap-settings .rf-scan-no-data {
  overflow: hidden;
}
.ap-settings .rf-scan-no-data .no-data-img {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin-top: 55px;
  margin-bottom: 10px;
  background: url(../img/rfScanNoData.png) no-repeat;
  background-size: 100% 100%;
}
.ap-settings .rf-scan-no-data .no-data-text {
  font-size: 13px;
  color: var(--tab-color-primary, #868E93);
  letter-spacing: 0;
  margin-bottom: 48px;
}
.ap-settings .rf-container {
  width: 360px;
  padding: 10px 0 20px;
  margin: 0 auto 50px auto;
  color: var(--tab-color-primary, #868E93);
}
.ap-settings .rf-container .rf-inner {
  position: relative;
}
.ap-settings .rf-container .spliter-container {
  height: 100%;
  position: absolute;
  top: 0;
}
.ap-settings .rf-container .spliter-container .spliter {
  height: 100%;
  border-left: 1px dotted;
  width: 0;
  position: relative;
}
.ap-settings .rf-container .spliter-container .spliter .number {
  width: 32px;
  height: 16px;
  font-size: 14px;
  text-align: center;
  position: absolute;
  left: -16px;
  bottom: -22px;
}
.ap-settings .rf-container .hz-container {
  margin-bottom: 15px;
}
.ap-settings .rf-container .hz-container .title {
  font-size: 14px;
  font-weight: bold;
  color: var(--s-color-text-primary, #212121);
  text-align: left;
  padding-left: 5px;
  margin-bottom: 12px;
}
.ap-settings .rf-container .hz-container .chart-outer {
  position: relative;
  height: 40px;
  margin-bottom: 2px;
}
.ap-settings .rf-container .hz-container .chart-item {
  position: absolute;
}
.ap-settings .rf-container .hz-container .chart-item > span {
  display: inline-block;
}
.ap-settings .rf-container .hz-container .chart-item .graph {
  height: 0;
  position: relative;
  margin-bottom: 2px;
  border-radius: 8px 8px 0 0;
  border-bottom: 20px solid red;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.ap-settings .rf-container .hz-container .chart-item .graph > span {
  height: 0;
  position: absolute;
}
.ap-settings .rf-container .hz-container .chart-item .graph .graph-split {
  border-bottom: 18px solid white;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: 1px;
  left: -4px;
}
.ap-settings .rf-container .hz-container .chart-item .graph .content {
  border-bottom: 16px solid green;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  top: 2px;
  left: -2px;
}
.ap-settings .rf-container .hz-container .chart-item .graph .content-util {
  border-bottom: 14px solid #ffffff;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  bottom: -17px;
  right: -1px;
}
.ap-settings .rf-container .hz-container .chart-item .text {
  font-size: 14px;
}
.ap-settings .rf-container .hz-container .chart-item .enabled-line {
  width: 1px;
  background: #0492eb;
  position: absolute;
  top: 20px;
}
.ap-settings .rf-container .hz-container .chart-item .enabled-line.left {
  left: 0;
}
.ap-settings .rf-container .hz-container .chart-item .enabled-line.right {
  right: 0;
}
.ap-settings .rf-container .hz-container .chart-item .enabled-line:after {
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  background: #0492eb;
  border-radius: 100%;
  bottom: -3px;
  left: -2px;
  z-index: 2;
}
.ap-settings .rf-container .hz-container .chart-item.current .graph {
  border-bottom-color: #0492eb !important;
}
.ap-settings .rf-container .hz-container .chart-item.current .graph-split {
  border-bottom-color: #ffffff !important;
}
.ap-settings .rf-container .hz-container .chart-item.current .text {
  color: #0492eb !important;
}
.ap-settings .rf-container .hz-container .chart-item.inter-0 .graph,
.ap-settings .rf-container .hz-container .chart-item.inter-0 .graph-split,
.ap-settings .rf-container .hz-container .chart-item.inter-0 .content {
  border-bottom-color: #ffe292;
}
.ap-settings .rf-container .hz-container .chart-item.inter-1 .graph,
.ap-settings .rf-container .hz-container .chart-item.inter-1 .graph-split,
.ap-settings .rf-container .hz-container .chart-item.inter-1 .content {
  border-bottom-color: #ffdb77;
}
.ap-settings .rf-container .hz-container .chart-item.inter-2 .graph,
.ap-settings .rf-container .hz-container .chart-item.inter-2 .graph-split,
.ap-settings .rf-container .hz-container .chart-item.inter-2 .content {
  border-bottom-color: #ffd258;
}
.ap-settings .rf-container .hz-container .chart-item.inter-3 .graph,
.ap-settings .rf-container .hz-container .chart-item.inter-3 .graph-split,
.ap-settings .rf-container .hz-container .chart-item.inter-3 .content {
  border-bottom-color: #ffc241;
}
.ap-settings .rf-container .hz-container .chart-item.inter-4 .graph,
.ap-settings .rf-container .hz-container .chart-item.inter-4 .graph-split,
.ap-settings .rf-container .hz-container .chart-item.inter-4 .content {
  border-bottom-color: #ffb229;
}
.ap-settings .rf-container .hz-container .chart-item.inter-5 .graph,
.ap-settings .rf-container .hz-container .chart-item.inter-5 .graph-split,
.ap-settings .rf-container .hz-container .chart-item.inter-5 .content {
  border-bottom-color: #ffa212;
}
.ap-settings .rf-container .hz-container .chart-item.inter-6 .graph,
.ap-settings .rf-container .hz-container .chart-item.inter-6 .graph-split,
.ap-settings .rf-container .hz-container .chart-item.inter-6 .content {
  border-bottom-color: #ff9003;
}
.ap-settings .rf-container .hz-container .chart-item.inter-7 .graph,
.ap-settings .rf-container .hz-container .chart-item.inter-7 .graph-split,
.ap-settings .rf-container .hz-container .chart-item.inter-7 .content {
  border-bottom-color: #ff7f11;
}
.ap-settings .rf-container .hz-container .chart-item.inter-8 .graph,
.ap-settings .rf-container .hz-container .chart-item.inter-8 .graph-split,
.ap-settings .rf-container .hz-container .chart-item.inter-8 .content {
  border-bottom-color: #ff6e1e;
}
.ap-settings .rf-container .hz-container .chart-item.inter-9 .graph,
.ap-settings .rf-container .hz-container .chart-item.inter-9 .graph-split,
.ap-settings .rf-container .hz-container .chart-item.inter-9 .content {
  border-bottom-color: #ff5c2c;
}
.ap-settings .rf-container .hz-container .chart-item.inter-10 .graph,
.ap-settings .rf-container .hz-container .chart-item.inter-10 .graph-split,
.ap-settings .rf-container .hz-container .chart-item.inter-10 .content {
  border-bottom-color: #ff4b39;
}
.ap-settings .rf-container .hz-container .chart-item.inter-11 .graph,
.ap-settings .rf-container .hz-container .chart-item.inter-11 .graph-split,
.ap-settings .rf-container .hz-container .chart-item.inter-11 .content {
  border-bottom-color: #ff2954;
}
.ap-settings .rf-container .footer-container {
  position: absolute;
  bottom: -30px;
  width: 100%;
  height: 30px;
  text-align: left;
}
.ap-settings .rf-container .footer-container .baseline {
  height: 1px;
  background: #c0c0c2;
}
.ap-settings .rf-2g-container .spliter-container .spliter {
  width: 39px;
}
.ap-settings .rf-2g-container .spliter-container .spliter:last-child {
  width: 0;
}
.ap-settings .rf-2g-container .hz-20-container .chart-item {
  width: 86px;
}
.ap-settings .rf-2g-container .hz-20-container .chart-item .graph {
  width: 86px;
}
.ap-settings .rf-2g-container .hz-20-container .chart-item .graph .graph-split {
  width: 84px;
}
.ap-settings .rf-2g-container .hz-20-container .chart-item .graph .content {
  width: 80px;
}
.ap-settings .rf-2g-container .hz-20-container .chart-item .graph .content-util {
  width: 78px;
}
.ap-settings .rf-2g-container .hz-40-container .chart-item {
  width: 164px;
}
.ap-settings .rf-2g-container .hz-40-container .chart-item .graph {
  width: 164px;
}
.ap-settings .rf-2g-container .hz-40-container .chart-item .graph .graph-split {
  width: 162px;
}
.ap-settings .rf-2g-container .hz-40-container .chart-item .graph .content {
  width: 158px;
}
.ap-settings .rf-2g-container .hz-40-container .chart-item .graph .content-util {
  width: 156px;
}
.ap-settings .rf-2g-container .footer-container {
  width: 354px;
}
.ap-settings .rf-5g-container {
  padding-left: 2px;
  padding-right: 2px;
}
.ap-settings .rf-5g-container .spliter-container .number.first {
  left: 0;
}
.ap-settings .rf-5g-container .hz-20-container .chart-item {
  width: 30px;
}
.ap-settings .rf-5g-container .hz-20-container .chart-item .graph {
  width: 30px;
}
.ap-settings .rf-5g-container .hz-20-container .chart-item .graph .graph-split {
  width: 28px;
}
.ap-settings .rf-5g-container .hz-20-container .chart-item .graph .content {
  width: 24px;
}
.ap-settings .rf-5g-container .hz-20-container .chart-item .graph .content-util {
  width: 22px;
}
.ap-settings .rf-5g-container .hz-40-container .chart-item {
  width: 60px;
}
.ap-settings .rf-5g-container .hz-40-container .chart-item .graph {
  width: 60px;
}
.ap-settings .rf-5g-container .hz-40-container .chart-item .graph .graph-split {
  width: 58px;
}
.ap-settings .rf-5g-container .hz-40-container .chart-item .graph .content {
  width: 54px;
}
.ap-settings .rf-5g-container .hz-40-container .chart-item .graph .content-util {
  width: 52px;
}
.ap-settings .rf-5g-container .hz-80-container .chart-item {
  width: 120px;
}
.ap-settings .rf-5g-container .hz-80-container .chart-item .graph {
  width: 120px;
}
.ap-settings .rf-5g-container .hz-80-container .chart-item .graph .graph-split {
  width: 118px;
}
.ap-settings .rf-5g-container .hz-80-container .chart-item .graph .content {
  width: 114px;
}
.ap-settings .rf-5g-container .hz-80-container .chart-item .graph .content-util {
  width: 112px;
}
.ap-settings .rf-5g-container .hz-160-container .chart-item {
  width: 240px;
}
.ap-settings .rf-5g-container .hz-160-container .chart-item .graph {
  width: 240px;
}
.ap-settings .rf-5g-container .hz-160-container .chart-item .graph .graph-split {
  width: 238px;
}
.ap-settings .rf-5g-container .hz-160-container .chart-item .graph .content {
  width: 234px;
}
.ap-settings .rf-5g-container .hz-160-container .chart-item .graph .content-util {
  width: 232px;
}
.ap-settings .rf-5g-container .hz-container {
  margin-bottom: 30px;
}
.ap-settings .interference-container {
  padding-top: 20px;
}
.ap-settings .interference-container .interference-outer {
  font-size: 0;
  margin-bottom: 12px;
}
.ap-settings .interference-container .inter-item {
  display: inline-block;
  width: 26px;
  height: 12px;
  position: relative;
  margin-right: 1px;
}
.ap-settings .interference-container .inter-item .text {
  position: absolute;
  color: var(--tab-color-primary, #868E93);
  font-size: 12px;
  left: -10px;
  top: -16px;
  white-space: nowrap;
}
.ap-settings .interference-container .inter-item .text.last {
  left: 0;
}
.ap-settings .interference-container .inter-item.inter-0 {
  background: #ffe292;
}
.ap-settings .interference-container .inter-item.inter-1 {
  background: #ffdb77;
}
.ap-settings .interference-container .inter-item.inter-2 {
  background: #ffd258;
}
.ap-settings .interference-container .inter-item.inter-3 {
  background: #ffc241;
}
.ap-settings .interference-container .inter-item.inter-4 {
  background: #ffb229;
}
.ap-settings .interference-container .inter-item.inter-5 {
  background: #ffa212;
}
.ap-settings .interference-container .inter-item.inter-6 {
  background: #ff9003;
}
.ap-settings .interference-container .inter-item.inter-7 {
  background: #ff7f11;
}
.ap-settings .interference-container .inter-item.inter-8 {
  background: #ff6e1e;
}
.ap-settings .interference-container .inter-item.inter-9 {
  background: #ff5c2c;
}
.ap-settings .interference-container .inter-item.inter-10 {
  background: #ff4b39;
}
.ap-settings .interference-container .inter-item.inter-11 {
  background: #ff2954;
}

.ap-settings .device-health-accordion,
.gateway-settings .device-health-accordion,
.switch-settings .device-health-accordion,
.clients-settings .device-health-accordion {
  position: relative;
  margin-bottom: 10px;
}
.ap-settings .device-health-accordion .line-scatter-container.widget-container,
.gateway-settings .device-health-accordion .line-scatter-container.widget-container,
.switch-settings .device-health-accordion .line-scatter-container.widget-container,
.clients-settings .device-health-accordion .line-scatter-container.widget-container {
  margin-bottom: 0;
}
.ap-settings .device-health-accordion .accordion-body,
.gateway-settings .device-health-accordion .accordion-body,
.switch-settings .device-health-accordion .accordion-body,
.clients-settings .device-health-accordion .accordion-body {
  padding-bottom: 0;
}
.ap-settings .device-health-accordion .health-status,
.gateway-settings .device-health-accordion .health-status,
.switch-settings .device-health-accordion .health-status,
.clients-settings .device-health-accordion .health-status {
  display: inline-block;
  vertical-align: middle;
  margin-left: 14px;
}
.ap-settings .device-health-accordion .health-status.level-0,
.gateway-settings .device-health-accordion .health-status.level-0,
.switch-settings .device-health-accordion .health-status.level-0,
.clients-settings .device-health-accordion .health-status.level-0 {
  color: #22B819;
}
.ap-settings .device-health-accordion .health-status.level-1,
.gateway-settings .device-health-accordion .health-status.level-1,
.switch-settings .device-health-accordion .health-status.level-1,
.clients-settings .device-health-accordion .health-status.level-1 {
  color: #FFBB00;
}
.ap-settings .device-health-accordion .health-status.level-2,
.gateway-settings .device-health-accordion .health-status.level-2,
.switch-settings .device-health-accordion .health-status.level-2,
.clients-settings .device-health-accordion .health-status.level-2 {
  color: #FF2954;
}
.ap-settings .device-health-accordion .health-status.level-3,
.gateway-settings .device-health-accordion .health-status.level-3,
.switch-settings .device-health-accordion .health-status.level-3,
.clients-settings .device-health-accordion .health-status.level-3 {
  color: #BFC3C9;
}
.ap-settings .device-health-accordion .accordion-sub-title,
.gateway-settings .device-health-accordion .accordion-sub-title,
.switch-settings .device-health-accordion .accordion-sub-title,
.clients-settings .device-health-accordion .accordion-sub-title {
  position: static;
}
.ap-settings .device-granularity-picker,
.gateway-settings .device-granularity-picker,
.switch-settings .device-granularity-picker,
.clients-settings .device-granularity-picker {
  position: absolute;
  margin-bottom: 0;
  top: 10px;
  right: 30px;
}
.ap-settings .device-granularity-picker .time-range-text,
.gateway-settings .device-granularity-picker .time-range-text,
.switch-settings .device-granularity-picker .time-range-text,
.clients-settings .device-granularity-picker .time-range-text {
  color: #9B9B9B;
  font-size: 12px;
  font-weight: 400;
}
.ap-settings .health-line-scatter-container,
.gateway-settings .health-line-scatter-container,
.switch-settings .health-line-scatter-container,
.clients-settings .health-line-scatter-container {
  height: 280px;
  width: 828px;
}
.ap-settings .health-line-no-data,
.gateway-settings .health-line-no-data,
.switch-settings .health-line-no-data,
.clients-settings .health-line-no-data {
  position: relative;
  padding: 42px 0 20px 0;
}
.ap-settings .health-line-no-data .no-data-img,
.gateway-settings .health-line-no-data .no-data-img,
.switch-settings .health-line-no-data .no-data-img,
.clients-settings .health-line-no-data .no-data-img {
  width: 120px;
  height: 120px;
  background: url(../img/NoDate.png) no-repeat;
  background-size: cover;
  margin: 0 auto;
}
.ap-settings .health-line-no-data .no-data-text,
.gateway-settings .health-line-no-data .no-data-text,
.switch-settings .health-line-no-data .no-data-text,
.clients-settings .health-line-no-data .no-data-text {
  font-size: 14px;
  color: var(--tab-color-primary, #868E93);
  text-align: center;
  margin-top: 12px;
}
.ap-settings .health-detail,
.gateway-settings .health-detail,
.switch-settings .health-detail,
.clients-settings .health-detail {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: var(--s-background-panel, #ffffff);
}
.ap-settings .health-detail-header,
.gateway-settings .health-detail-header,
.switch-settings .health-detail-header,
.clients-settings .health-detail-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ap-settings .health-detail-header .widget-container,
.gateway-settings .health-detail-header .widget-container,
.switch-settings .health-detail-header .widget-container,
.clients-settings .health-detail-header .widget-container {
  margin-bottom: 0;
}
.ap-settings .health-detail-header .health-detail-time,
.gateway-settings .health-detail-header .health-detail-time,
.switch-settings .health-detail-header .health-detail-time,
.clients-settings .health-detail-header .health-detail-time {
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
}
.ap-settings .health-detail-header .health-detail-close-btn .button-icon,
.gateway-settings .health-detail-header .health-detail-close-btn .button-icon,
.switch-settings .health-detail-header .health-detail-close-btn .button-icon,
.clients-settings .health-detail-header .health-detail-close-btn .button-icon {
  display: block;
  margin-right: 0;
}
.ap-settings .health-detail-header .health-detail-close-btn .button-button,
.gateway-settings .health-detail-header .health-detail-close-btn .button-button,
.switch-settings .health-detail-header .health-detail-close-btn .button-button,
.clients-settings .health-detail-header .health-detail-close-btn .button-button {
  padding-left: 0;
  padding-right: 0;
  height: 24px;
}
.ap-settings .health-detail-header::after,
.gateway-settings .health-detail-header::after,
.switch-settings .health-detail-header::after,
.clients-settings .health-detail-header::after {
  content: "";
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, #ccd0d1, transparent);
  position: absolute;
  left: 0px;
  bottom: -8px;
}
.ap-settings .health-detail-content,
.gateway-settings .health-detail-content,
.switch-settings .health-detail-content,
.clients-settings .health-detail-content {
  display: flex;
  position: relative;
}
.ap-settings .health-detail-content .radar-container,
.gateway-settings .health-detail-content .radar-container,
.switch-settings .health-detail-content .radar-container,
.clients-settings .health-detail-content .radar-container {
  padding-left: 30px;
}
.ap-settings .health-detail-content .rader-detail-container,
.gateway-settings .health-detail-content .rader-detail-container,
.switch-settings .health-detail-content .rader-detail-container,
.clients-settings .health-detail-content .rader-detail-container {
  margin-top: 30px;
}
.ap-settings .health-detail-content .rader-detail-container .displaylabel-container,
.gateway-settings .health-detail-content .rader-detail-container .displaylabel-container,
.switch-settings .health-detail-content .rader-detail-container .displaylabel-container,
.clients-settings .health-detail-content .rader-detail-container .displaylabel-container {
  display: flex;
  width: auto;
  padding-left: 15px;
}
.ap-settings .health-detail-content .rader-detail-container .displaylabel-container .widget-wrap-outer.text-wrap-outer,
.gateway-settings .health-detail-content .rader-detail-container .displaylabel-container .widget-wrap-outer.text-wrap-outer,
.switch-settings .health-detail-content .rader-detail-container .displaylabel-container .widget-wrap-outer.text-wrap-outer,
.clients-settings .health-detail-content .rader-detail-container .displaylabel-container .widget-wrap-outer.text-wrap-outer {
  display: flex;
  align-items: center;
  font-weight: 700;
}
.ap-settings .health-detail-content .widget-container,
.gateway-settings .health-detail-content .widget-container,
.switch-settings .health-detail-content .widget-container,
.clients-settings .health-detail-content .widget-container {
  margin-bottom: 0;
}
.ap-settings .rader-detail-container,
.gateway-settings .rader-detail-container,
.switch-settings .rader-detail-container,
.clients-settings .rader-detail-container {
  width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 80px;
}
.ap-settings .rader-detail-container .widget-fieldlabel-wrap,
.gateway-settings .rader-detail-container .widget-fieldlabel-wrap,
.switch-settings .rader-detail-container .widget-fieldlabel-wrap,
.clients-settings .rader-detail-container .widget-fieldlabel-wrap {
  transform: translateY(0);
  top: 0;
}
.ap-settings .rader-detail-container .widget-container .widget-fieldlabel-wrap,
.gateway-settings .rader-detail-container .widget-container .widget-fieldlabel-wrap,
.switch-settings .rader-detail-container .widget-container .widget-fieldlabel-wrap,
.clients-settings .rader-detail-container .widget-container .widget-fieldlabel-wrap {
  display: flex;
  align-items: center;
}
.ap-settings .health-detail-list,
.gateway-settings .health-detail-list,
.switch-settings .health-detail-list,
.clients-settings .health-detail-list {
  margin-top: 20px;
}
.ap-settings .health-detail-list .paging-wrap .paging-wrap-inner,
.gateway-settings .health-detail-list .paging-wrap .paging-wrap-inner,
.switch-settings .health-detail-list .paging-wrap .paging-wrap-inner,
.clients-settings .health-detail-list .paging-wrap .paging-wrap-inner {
  display: none;
}
.ap-settings .health-detail-list .grid-content-tr,
.gateway-settings .health-detail-list .grid-content-tr,
.switch-settings .health-detail-list .grid-content-tr,
.clients-settings .health-detail-list .grid-content-tr {
  background: var(--s-background-panel, #ffffff);
}
.ap-settings .health-detail-list .grid-content-tr .grid-content-td:not(:first-child),
.gateway-settings .health-detail-list .grid-content-tr .grid-content-td:not(:first-child),
.switch-settings .health-detail-list .grid-content-tr .grid-content-td:not(:first-child),
.clients-settings .health-detail-list .grid-content-tr .grid-content-td:not(:first-child) {
  font-weight: 700;
}
.ap-settings .health-detail-list .grid-content-td,
.gateway-settings .health-detail-list .grid-content-td,
.switch-settings .health-detail-list .grid-content-td,
.clients-settings .health-detail-list .grid-content-td {
  padding: 5px 15px;
}
.ap-settings .health-detail-list .grid-header,
.gateway-settings .health-detail-list .grid-header,
.switch-settings .health-detail-list .grid-header,
.clients-settings .health-detail-list .grid-header {
  padding: 5px 15px;
}
.ap-settings .health-detail-list .grid-table,
.gateway-settings .health-detail-list .grid-table,
.switch-settings .health-detail-list .grid-table,
.clients-settings .health-detail-list .grid-table {
  border-bottom: 1px solid #ffffff;
}
.ap-settings .health-detail-list .grid-table .grid-header,
.gateway-settings .health-detail-list .grid-table .grid-header,
.switch-settings .health-detail-list .grid-table .grid-header,
.clients-settings .health-detail-list .grid-table .grid-header {
  font-weight: 400;
}
.ap-settings .note,
.gateway-settings .note,
.switch-settings .note,
.clients-settings .note {
  width: 100%;
}

.gateway-settings .health-detail-content .radar-container,
.switch-settings .health-detail-content .radar-container,
.clients-settings .health-detail-content .radar-container {
  margin-top: 20px;
}
.gateway-settings .rader-detail-container.widget-container,
.switch-settings .rader-detail-container.widget-container,
.clients-settings .rader-detail-container.widget-container {
  margin-top: 0;
  margin-left: 110px;
}
.gateway-settings .rader-detail-container .widget-wrap-outer,
.switch-settings .rader-detail-container .widget-wrap-outer,
.clients-settings .rader-detail-container .widget-wrap-outer {
  padding-left: 50px;
}

.clients-settings .client-health-data-rate .tx-rate,
.clients-settings .client-health-data-rate .rx-rate {
  display: inline-block;
  height: 20px;
}
.clients-settings .client-health-data-rate .tx-rate:before,
.clients-settings .client-health-data-rate .rx-rate:before {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  content: "";
  display: inline-block;
  vertical-align: bottom;
}
.clients-settings .health-tab-content .pie-chart-container {
  height: auto;
}
.clients-settings .health-tab-content .wifi-connection-health {
  text-align: justify;
}
.clients-settings .health-tab-content .wifi-connection-health-content {
  display: flex;
  justify-content: space-between;
}
.clients-settings .health-tab-content .wifi-connection-health-content .displaylabel-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.clients-settings .health-tab-content .wifi-connection-health-content .displaylabel-container .widget-fieldlabel-wrap {
  height: 16px;
  line-height: 14px;
}
.clients-settings .health-tab-content .wifi-connection-health-content .displaylabel-container .text-wrap-outer {
  text-align: right;
  justify-content: flex-end;
  height: 28px;
  line-height: 28px;
}
.clients-settings .health-tab-content .wifi-connection-health-content .displaylabel-container.step-text .text-wrap-display, .clients-settings .health-tab-content .wifi-connection-health-content .displaylabel-container.name-text .text-wrap-display {
  font-size: 13px;
  font-weight: bold;
}
.clients-settings .health-tab-content .connection-detail-container {
  width: 377px;
  display: inline-block;
  padding: 20px 0;
}
.clients-settings .health-tab-content .pie-chart-content {
  justify-content: space-between;
}
.clients-settings .health-tab-content .pie-chart-content .chart-container {
  margin-right: 0;
}
.clients-settings .health-tab-content .pie-chart-content .pie-info-content {
  min-width: auto;
}
.clients-settings .health-tab-content .pie-chart-content .info-label {
  padding-right: 10px;
}
.clients-settings #wired-client-health-bar {
  width: 450px;
}
.clients-settings .health-detail .widget-fieldlabel-wrap {
  width: 250px;
}
.clients-settings .incident-page .widget-fieldlabel-wrap {
  width: auto;
}
.clients-settings .mac-link:not(.empty) .text-wrap-display a {
  cursor: pointer;
  color: #0492EB;
  font-weight: bold;
  text-decoration: underline;
}
.clients-settings .summary-wrapper {
  margin-top: 16px;
}
.clients-settings .summary-wrapper .summary-item {
  display: inline-block;
  width: 300px;
}
.clients-settings .summary-wrapper .summary-item .item-legend {
  display: inline-block;
  width: 100px;
}
.clients-settings .summary-wrapper .summary-item .item-legend .legend-icon {
  width: 42px;
  height: 42px;
}
.clients-settings .summary-wrapper .summary-item .item-legend .legend-text {
  font-size: 12px;
  color: #868E93;
  height: 17px;
  line-height: 17px;
}
.clients-settings .summary-wrapper .summary-item .item-value {
  display: inline-block;
  font-size: 30px;
  color: var(--s-color-text-secondary, #15171C);
  font-weight: bold;
  line-height: 42px;
  height: 42px;
  width: auto;
  vertical-align: top;
}
.clients-settings .summary-wrapper .summary-item .item-value .text-wrap {
  line-height: 42px;
}
.clients-settings .summary-wrapper .summary-item .item-value .text-unit {
  font-size: 13px;
}
.clients-settings .summary-wrapper .summary-item-separator {
  display: inline-block;
  width: 1px;
  height: 44px;
  margin: 0 50px;
  vertical-align: top;
  background: #E1E2E6;
}

.drawer-container.basic .switch-settings .info-item-container,
.drawer-container.basic .gateway-settings .info-item-container {
  min-width: 33%;
}
.drawer-container.basic .ap-settings .rf-5g-container {
  width: 364px;
}
.drawer-container.basic .general-config.accordion-item .widget-tips.textbox-tips {
  display: block;
}
.drawer-container.basic .general-config.accordion-item .widget-tips.textbox-tips .tips-content {
  margin-left: 0;
  margin-top: 2px;
}
.drawer-container.basic .general-config.accordion-item .text-container.address-textbox {
  width: 240px;
}

.drawer-container.advanced .device-settings .combobox-container .widget-fieldlabel-wrap,
.drawer-container.advanced .device-settings .text-container .widget-fieldlabel-wrap,
.drawer-container.advanced .device-settings .radio-group-container .widget-fieldlabel-wrap {
  width: 200px;
}
.drawer-container.advanced .device-settings .move-site-combo.combobox-container .widget-fieldlabel-wrap {
  width: 100px;
}
.drawer-container.advanced .switch-settings .info-item-container,
.drawer-container.advanced .gateway-settings .info-item-container {
  min-width: 16%;
}
.drawer-container.advanced .ap-settings .rf-5g-container {
  width: 650px;
}
.drawer-container.advanced .displaylabel-container,
.drawer-container.advanced .display-container {
  width: 31%;
}
.drawer-container.advanced #ap-qos-delivery .widget-fieldlabel-wrap {
  white-space: pre-line;
  line-height: 13px;
}
.drawer-container.advanced #ap-qos-delivery .widget-fieldlabel-wrap .widget-fieldlabel {
  word-break: break-word;
}
.drawer-container.advanced #ap-qos-delivery .widget-fieldlabel-wrap:after {
  content: "";
  width: 0;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.drawer-container.advanced .general-config.accordion-item .widget-tips.textbox-tips {
  display: inline-block;
}
.drawer-container.advanced .general-config.accordion-item .widget-tips.textbox-tips .tips-content {
  margin-left: 10px;
}

.line-detail {
  margin-top: -18px;
}
.line-detail.health-detail {
  padding-bottom: 10px;
}
.line-detail .health-detail-time {
  color: #0492EB;
}
.line-detail .content .line-detail-ports {
  display: flex;
  width: 100%;
  margin-top: 20px;
}
.line-detail .content .line-detail-ports .widget-fieldlabel-wrap {
  width: auto;
  max-width: 600px;
  color: #b9b9b9;
}
.line-detail .content .line-detail-ports .widget-fieldlabel-wrap .widget-fieldlabel {
  line-height: 32px;
  height: 32px;
}
.line-detail .content .line-detail-ports .widget-wrap-outer {
  display: inline-block;
  width: auto;
  line-height: 28px;
}
.line-detail .grid-title {
  margin-top: 20px;
  font-weight: bold;
}
.line-detail .grid-content-tr {
  border-bottom: 1px solid #e5e5e5;
  background-color: #ffffff;
}
.line-detail .grid-content-td, .line-detail .grid-header {
  padding-top: 10px;
  padding-bottom: 10px;
}

.line-detail-incident-title {
  position: relative;
  margin: 20px 0;
  font-size: 13px;
  font-weight: bold;
  color: var(--s-color-text-primary, #212121);
}
.line-detail-incident-title::after {
  position: absolute;
  left: 0px;
  bottom: -8px;
  content: "";
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, #ccd0d1, transparent);
}

.stack-port-count {
  text-align: center;
  margin-top: -32px;
  margin-bottom: 5px;
  font-weight: bold;
}

#ap-health-detail-list td[name=_5g], #ap-health-detail-list td[name=_5g1], #ap-health-detail-list td[name=_5g2], #ap-health-detail-list td[name=_6g],
#ap-health-detail-list th[name=_5g], #ap-health-detail-list th[name=_5g1], #ap-health-detail-list th[name=_5g2], #ap-health-detail-list th[name=_6g] {
  display: none;
}
#ap-health-detail-list.support5g:not(.support5g2) td[name=_5g], #ap-health-detail-list.support5g:not(.support5g2) th[name=_5g] {
  display: table-cell;
}
#ap-health-detail-list.support5g2 td[name=_5g1], #ap-health-detail-list.support5g2 th[name=_5g1] {
  display: table-cell;
}
#ap-health-detail-list.support5g2 td[name=_5g2], #ap-health-detail-list.support5g2 th[name=_5g2] {
  display: table-cell;
}
#ap-health-detail-list.support6g td[name=_6g], #ap-health-detail-list.support6g th[name=_6g] {
  display: table-cell;
}

.drawer-title-container .content,
.drawer-title-container .content > span {
  display: inline-block;
  line-height: 25px;
  vertical-align: middle;
}

.drawer-container.basic {
  right: -470px;
}
.drawer-container.basic .drawer-wrap {
  width: 450px;
}
.drawer-container.advanced {
  right: -920px;
}
.drawer-container.advanced .drawer-wrap {
  width: 900px;
}
.drawer-container .drawer-tab-container .tab-btn.selected:hover {
  cursor: default;
}
.drawer-container .grid-container .paging-go,
.drawer-container .modal-icon {
  display: none !important;
}
.drawer-container .panel-container.block {
  padding: 20px 16px;
}
.drawer-container.shown .drawer-tab {
  display: inline-block;
  position: absolute;
  top: 0;
  left: -51px;
}
.drawer-container.shown .drawer-tab .tab-btns {
  box-shadow: -4px 0 3px -5px #909090, 0 4px 3px -5px #909090;
}
.drawer-container.shown .drawer-tab .tab-btn {
  width: 50px;
  height: 50px;
  margin-left: 0px;
  position: relative;
  background: var(--s-color-background-primary, #FFFFFF);
  padding: 0;
  border-right: 1px solid var(--s-color-background-secondary, #F2F3F5);
  border-bottom: 1px solid var(--s-color-background-secondary, #F2F3F5);
  border-radius: 0;
}
.drawer-container.shown .drawer-tab .tab-btn .text {
  display: none;
}
.drawer-container.shown .drawer-tab .tab-btn .icon {
  display: inline-block;
  position: absolute;
  top: 5px;
  left: 5px;
}
.drawer-container.shown .drawer-tab .tab-btn.selected {
  border: none;
  margin-left: 1px;
  background-color: var(--s-color-background-secondary, #F2F3F5);
  border-bottom: 1px solid var(--s-color-background-secondary, #F2F3F5);
}
.drawer-container.shown .drawer-tab .tab-btn.selected:after {
  left: -2px;
}

.health-container {
  min-width: 1700px;
}
.health-container .page-top-tool {
  margin-top: 16px;
  position: absolute;
  top: 0;
  right: 30px;
}
.health-container.has-drawer .page-top-tool {
  right: 64px;
}
.health-container .card-container {
  display: flex;
  margin-left: -12px;
  margin-right: -12px;
}
.health-container .card-container .card-item {
  padding: 20px 16px;
  padding-bottom: 0px;
  margin: 12px;
  border-radius: 6px;
  background: var(--s-background-panel, #ffffff);
  position: relative;
  flex: 1;
}
.health-container .card-container .card-item.item-col-8 {
  flex: auto;
  flex-grow: 0;
  width: calc(33.3% - 24px);
}
.health-container .card-container .card-item.item-col-16 {
  flex: auto;
  width: calc(66.7% - 24px);
}
.health-container .card-container .card-item.wifi-health {
  border-radius: 6px 6px 0 0;
  margin-bottom: 2px;
}
.health-container .card-container .card-item.problems {
  border-radius: 0 0 6px 6px;
  margin-top: 0;
}
.health-container .card-container .card-item.problems .card-title {
  width: auto;
}
.health-container .card-container .card-item .card-content {
  text-align: right;
  padding-bottom: 30px;
}
.health-container .card-container .card-item .card-content .grid-header-tr {
  display: none;
}
.health-container .card-container .card-item .card-content .grid-header-tr .card-title {
  height: 28px;
  line-height: 28px;
  font-size: 16px;
  font-weight: bold;
}
.health-container .card-container .card-item .card-content.show-header .grid-header-tr {
  display: flex;
  justify-content: flex-start;
}
.health-container .card-container .card-item .card-content.show-header .grid-header-tr .grid-header {
  padding-left: 3px;
  display: inline-block;
  flex: auto;
  flex-grow: 0;
}
.health-container .card-container .card-item .card-content.show-header .grid-header-tr .grid-header:last-child {
  flex-grow: 1;
  min-width: 140px;
  padding-left: 0px;
  padding-right: 0;
  text-align: right;
}
.health-container .card-container .card-item .card-content .grid-content-td {
  padding: 2px;
}
.health-container .card-container .card-item .card-content .grid-content-td:last-child .grid-content-td-wrap {
  text-align: right;
  color: #0492EB;
  font-weight: bold;
  margin-right: 5px;
  cursor: pointer;
}
.health-container .card-container .card-item .card-content .grid-content-td:last-child .grid-content-td-wrap::after {
  content: ">";
  display: inline-block;
  padding-left: 5px;
}
.health-container .card-container .card-item .time-display {
  margin-bottom: 0;
  padding-top: 15px;
  font-size: 13px;
  font-weight: bold;
}
.health-container .card-header {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 16px;
}
.health-container .card-header .card-title {
  width: 100%;
  height: 28px;
  line-height: 28px;
  font-size: 18px;
  font-weight: 500;
}
.health-container .card-header .card-title .see-all {
  cursor: pointer;
  font-size: 14px;
  color: #0492EB;
  float: right;
  cursor: pointer;
}
.health-container .card-header .card-title .title-tab {
  margin-top: -5px;
  float: right;
}
.health-container .tool-tip-card {
  min-width: 244px;
  padding: 0px 17px 10px 17px;
  box-sizing: content-box;
}
.health-container .tool-tip-card .title {
  font-size: 16px;
  font-weight: 700;
  padding: 10px;
  padding-left: 0px;
  border-bottom: 1px solid #e1e2e6;
}
.health-container .tool-tip-card .content {
  padding-top: 10px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}
.health-container .tool-tip-card .content .label::before {
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 50%;
  content: "";
  display: inline-block;
}
.health-container .tool-tip-card .content .text {
  font-weight: bold;
}
.health-container .line-scatter-card {
  padding-top: 10px;
}
.health-container .line-scatter-card .card-title {
  width: 100%;
  height: 28px;
  padding-left: 30px;
  line-height: 28px;
  font-size: 18px;
  font-weight: 500;
}
.health-container .line-scatter-card .card-title.less-range {
  margin-top: -20px;
}
.health-container .line-scatter-card .empty .chart-area {
  background-image: url("../../theme/img/NoDate.png");
  background-position: center center;
  background-repeat: no-repeat;
}
.health-container .line-scatter-card .empty .chart-area .chart-canvas {
  visibility: hidden;
}
.health-container .device-health-overview-container .card-item {
  min-height: auto;
}
.health-container .device-health-overview-card-title {
  border-bottom: 1px solid #e5e5e5;
  align-items: center;
  padding-bottom: 14px;
}
.health-container .device-health-overview-card-title .card-title {
  width: auto;
}
.health-container .card-divide {
  border-bottom: 1px solid rgba(189, 189, 189, 0.5);
}
.health-container .paging-container {
  width: calc(100% - 32px);
  position: absolute;
  bottom: 10px;
}
.health-container .paging-container .paging-wrap {
  text-align: center;
}
.health-container .paging-container .paging-wrap .paging-wrap-inner {
  margin: 0;
}
.health-container .paging-container .paging-info {
  display: none;
}
.health-container .paging-container .paging-select {
  display: none;
}
.health-container .paging-container .paging-go {
  display: none;
}
.health-container .health-status::before {
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 50%;
  content: "";
  display: inline-block;
}
.health-container .health-status.health-poor::before {
  background: #FF2954;
}
.health-container .health-status.health-good::before {
  background: #22B819;
}
.health-container .health-status.health-fair::before {
  background: #FFBB00;
}
.health-container .health-status.health-no-data::before {
  background: #BFC3C9;
}
.health-container .traffic .td-content {
  font-weight: bold;
  text-align: right;
}
.health-container .device-type .icon {
  margin-right: 15px;
}
.health-container .port {
  font-weight: bold;
}
.health-container .port .error-port {
  color: #FF2954;
}
.health-container .title-tab .tab-btns {
  position: relative;
  top: -43px;
}
.health-container .title-tab .tab-content {
  margin-top: -45px;
  margin-bottom: -20px;
}
.health-container .health-poor::before {
  background: #FF2954;
}
.health-container .health-good::before {
  background: #22B819;
}
.health-container .health-fair::before {
  background: #FFBB00;
}
.health-container .health-no-data::before {
  background: #BFC3C9;
}
.health-container .grid-container.empty {
  display: none;
}
.health-container .grid-container.empty + .no-device {
  display: block;
  text-align: center;
  font-size: 16px;
  color: #bfc3c9;
}
.health-container .grid-container.empty + .no-device .no-device-icon {
  width: 100%;
  height: 220px;
  background-image: url("../../theme/img/NoDate.png");
  background-repeat: no-repeat;
  background-position: center;
}
.health-container .show-header .no-device {
  min-height: 243px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.health-container .line-scatter-card.empty {
  height: 400px;
}
.health-container .line-scatter-card.empty .card-wrapper {
  display: none;
}
.health-container .line-scatter-card.empty .no-device {
  text-align: center;
  font-size: 16px;
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: #bfc3c9;
}
.health-container .line-scatter-card.empty .no-device .no-device-icon {
  width: 100%;
  height: 220px;
  background-image: url("../../theme/img/NoDate.png");
  background-repeat: no-repeat;
  background-position: center;
}
.health-container .wifi-card-content {
  display: flex;
}
.health-container .wifi-card-content .tab-wrapper {
  margin: 20px 0 38px 40px;
}
.health-container .wifi-card-content .tab-btn {
  display: block;
  width: 250px;
  height: 66px;
  height: 66px;
  margin: 10px 0;
  padding: 10px 0 0 20px;
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  text-align: left;
  box-shadow: 2px 2px 5px 0px rgba(54, 62, 77, 0.05);
}
.health-container .wifi-card-content .tab-btn.selected {
  border: 2px solid;
}
.health-container .wifi-card-content .fieldset-content {
  height: 100%;
}
.health-container .wifi-card-content .good {
  color: #22B819;
}
.health-container .wifi-card-content .normal {
  color: #FFD701;
}
.health-container .wifi-card-content .fail {
  color: #FF9500;
}
.health-container .wifi-card-content .poor {
  color: #FF2954;
}
.health-container .wifi-tab-title {
  display: block;
  margin-bottom: 0;
  font-size: 20px;
  font-weight: normal;
}
.health-container .wifi-tab-subtitle::before {
  content: "";
  display: inline-block;
  margin-right: 10px;
  border: 5px solid;
  border-radius: 5px;
}
.health-container .success-rate-container {
  margin-left: 50px;
  flex-grow: 1;
}
.health-container .success-rate-container .empty-wrapper {
  display: none;
  background: var(--s-background-panel, #ffffff);
  padding: 10px 0;
  font-size: 16px;
  color: var(--tab-color-primary, #868E93);
  height: 100%;
}
.health-container .success-rate-container .empty-wrapper .empty-content {
  margin: 20px auto;
  text-align: center;
}
.health-container .success-rate-container.empty .chart {
  display: none;
}
.health-container .success-rate-container.empty .empty-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.health-container .incident-wrapper {
  position: relative;
  margin-top: 30px;
  width: 420px;
}
.health-container .incident-wrapper .incident-list-container .paging-container {
  bottom: -15px;
  left: 32px;
}
.health-container .incident-wrapper .wifi-incident-list {
  height: 365px;
}
.health-container .success-rate-container .tooltip-wrapper, .health-container .connection-problems-card .tooltip-wrapper {
  min-width: 224px;
  padding: 5px 10px;
}
.health-container .success-rate-container .tooltip-list, .health-container .connection-problems-card .tooltip-list {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}
.health-container .success-rate-container .tooltip-list.title, .health-container .connection-problems-card .tooltip-list.title {
  border-bottom: 1px solid #e5e5e5;
}
.health-container .success-rate-container .tooltip-list.title .name, .health-container .connection-problems-card .tooltip-list.title .name {
  font-weight: bold;
}
.health-container .success-rate-container .tooltip-list .value, .health-container .connection-problems-card .tooltip-list .value {
  font-weight: bold;
}
.health-container .wan-health-wrapper {
  display: flex;
  margin: 20px 0;
  flex-flow: wrap;
}
.health-container .wan-health-wrapper .wan-card::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 2px;
  height: 56px;
  margin-top: 6px;
  opacity: 0.4;
  background-color: #c9c9c9;
}
.health-container .wan-health-wrapper .wan-card:last-child::after {
  content: "";
  width: 0;
  height: 0;
}
.health-container .wan-health-wrapper .wan-card .wan-card-content {
  display: inline-block;
}
.health-container .wan-health-wrapper .wan-card .wan-item {
  margin: 7px 60px;
  width: 100px;
  text-align: left;
}
.health-container .wan-health-wrapper .wan-card .wan-name {
  height: 30px;
  font-size: 24px;
  color: var(--s-color-text-primary, #212121);
  font-weight: 500;
}
.health-container .wan-health-wrapper .wan-card .wan-health-status {
  font-size: 14px;
  height: 18px;
  line-height: 18px;
}
.health-container .wan-health-wrapper .wan-card .wan-health-status .offline-detail {
  display: inline-block;
  vertical-align: bottom;
  margin-left: 10px;
}
.health-container .wan-health-wrapper .wan-card .level-1 {
  color: #22B819;
}
.health-container .wan-health-wrapper .wan-card .back-ground-1 {
  background-color: #22B819;
}
.health-container .wan-health-wrapper .wan-card .level-2 {
  color: #FFBB00;
}
.health-container .wan-health-wrapper .wan-card .back-ground-2 {
  background-color: #FFBB00;
}
.health-container .wan-health-wrapper .wan-card .level-3 {
  color: #FF2954;
}
.health-container .wan-health-wrapper .wan-card .back-ground-3 {
  background-color: #FF2954;
}
.health-container .wan-health-wrapper .wan-card .level-4 {
  color: #BFC3C9;
}
.health-container .wan-health-wrapper .wan-card .back-ground-4 {
  background-color: #BFC3C9;
}
.health-container .wan-health-wrapper .wan-card .level-5 {
  color: #A5ABB4;
}
.health-container .wan-health-wrapper .wan-card .back-ground-5 {
  background-color: #A5ABB4;
}
.health-container .wan-health-wrapper .round {
  display: inline-block;
  margin-right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 100%;
}
.health-container .connection-problems-card .card-header {
  justify-content: flex-start;
}
.health-container .connection-problems-card .card-header .combobox-container {
  margin-left: 40px;
  color: #0492EB;
}
.health-container .connection-problems-card .card-header .combobox-wrap {
  border: 1px solid transparent;
  width: auto;
}
.health-container .connection-problems-card .problems-card-wrapper {
  display: flex;
  height: 280px;
  margin-bottom: 10px;
}
.health-container .connection-problems-card .pie-card-wrapper {
  width: 600px;
}
.health-container .connection-problems-card .pie-card-wrapper .pie-title {
  font-weight: bold;
}
.health-container .connection-problems-card .line-card-wrapper {
  flex-grow: 1;
  padding: 10px 30px;
}
.health-container .success-rate-container .empty-wrapper {
  display: none;
  background: var(--s-background-panel, #ffffff);
  padding: 10px 0;
  font-size: 16px;
  color: var(--tab-color-primary, #868E93);
  height: 100%;
}
.health-container .success-rate-container .empty-wrapper .empty-content {
  margin: 20px auto;
  text-align: center;
}
.health-container .success-rate-container.empty .chart {
  display: none;
}
.health-container .success-rate-container.empty .empty-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.overview-container .card-container .card-item {
  min-height: 215px;
}

.card-container .performance-wrapper {
  display: flex;
  align-items: center;
}
.card-container .performance-wrapper .tab_menu_top .tab-btns {
  display: flex;
  margin-left: 60px;
}
.card-container .performance-wrapper .tab_menu_top .tab-btns .tab-btn {
  line-height: 1.14;
}
.card-container .performance-wrapper .tab_menu_top .tab-btns .selected {
  background-color: var(--s-background-panel, #ffffff);
  font-weight: normal;
}
.card-container .performance-wrapper .tab_menu_top .ml-60 {
  margin-left: 60px;
}
.card-container .performance-wrapper .split-line {
  width: 1px;
  height: 72px;
  background: #d6d9db;
}
.card-container .performance-wrapper .overview-performance {
  display: flex;
  flex: 1;
  padding: 20px 0 20px 60px;
  border: none;
}
.card-container .performance-wrapper .overview-performance .overview-card {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  width: 120px;
  margin-right: 50px;
  padding: 20px 10px 10px 10px;
}
.card-container .performance-wrapper .overview-performance .overview-card .overview-item {
  display: flex;
  align-items: center;
  flex-direction: column;
  font: 30px bold;
}
.card-container .performance-wrapper .overview-performance .overview-card .text {
  width: 60px;
  margin-bottom: 0;
  color: var(--s-color-text-primary, #212121);
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
  height: 20px;
  line-height: 20px;
  font-size: 13px;
  font-weight: 400;
  color: #868E93;
}
.card-container .performance-wrapper .overview-performance .overview-card .percent {
  width: 60px;
  margin-bottom: 0;
  color: var(--s-color-text-primary, #212121);
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
  height: 60px;
  padding-top: 10px;
  font-size: 30px;
}
.card-container .performance-wrapper .overview-performance .overview-card .total {
  width: 60px;
  margin-bottom: 0;
  color: var(--s-color-text-primary, #212121);
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
  flex: 1;
  height: 20px;
  line-height: 20px;
  font-size: 13px;
}
.card-container .performance-wrapper .performance-overview-status {
  flex: 4;
}
.card-container .health-tooltip-container {
  padding: 10px;
}
.card-container .health-tooltip-container .tooltip-item .title {
  font-weight: bold;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid rgba(189, 189, 189, 0.5);
}
.card-container .health-tooltip-container .tooltip-item .tooltip-lists-container {
  line-height: 30px;
}
.card-container .health-tooltip-container .tooltip-item .tooltip-lists-container .tooltip-list {
  height: 30px;
  display: flex;
  justify-content: space-between;
}
.card-container .health-tooltip-container .tooltip-item .tooltip-lists-container .tooltip-list .rate {
  padding-left: 15px;
  display: inline-block;
  vertical-align: middle;
  text-align: right;
}
.card-container .health-tooltip-container .tooltip-item .tooltip-lists-container .tooltip-list .info-data {
  padding-left: 15px;
  display: inline-block;
  vertical-align: middle;
  text-align: right;
}
.card-container .health-tooltip-container .tooltip-item .tooltip-lists-container .tooltip-list .info-title {
  display: inline-block;
  vertical-align: middle;
  color: #868e93;
}
.card-container .health-tooltip-container .tooltip-item .item-inline-block {
  display: inline-block;
}
.card-container .health-tooltip-container .tooltip-item .level-0 {
  color: #22B819;
}
.card-container .health-tooltip-container .tooltip-item .level-1 {
  color: #FFBB00;
}
.card-container .health-tooltip-container .tooltip-item .level-2 {
  color: #FF2954;
}
.card-container .health-tooltip-container .tooltip-item .level-3 {
  color: #BFC3C9;
}
.card-container .client-empty-wrapper .empty,
.card-container .incident-empty-wrapper .empty {
  margin: 20px auto;
  padding-bottom: 10px;
  text-align: center;
  color: var(--tab-color-primary, #868E93);
  font-size: 16px;
}
.card-container .incident-empty-wrapper {
  position: absolute;
  left: 90px;
  top: 50%;
  margin-top: -130px;
}

.health-detail-msg-container,
#client-health-msg,
#health-msg {
  right: 0;
  top: 0;
  left: auto !important;
  bottom: 0;
  width: 920px;
  z-index: 910;
  padding-top: 40px;
  background: var(--s-background-main, #f2f3f5);
}
.health-detail-msg-container .msg-wrap,
#client-health-msg .msg-wrap,
#health-msg .msg-wrap {
  width: 100%;
  height: 100%;
}
.health-detail-msg-container .msg-title,
#client-health-msg .msg-title,
#health-msg .msg-title {
  display: none;
}
.health-detail-msg-container .tab-content,
#client-health-msg .tab-content,
#health-msg .tab-content {
  padding-bottom: 0;
}
.health-detail-msg-container .detail-title-container,
#client-health-msg .detail-title-container,
#health-msg .detail-title-container {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccd0d1;
  align-items: center;
}
.health-detail-msg-container .detail-title,
#client-health-msg .detail-title,
#health-msg .detail-title {
  font-size: 16px;
  font-weight: bold;
  line-height: 38px;
}
.health-detail-msg-container .msg-content-container,
#client-health-msg .msg-content-container,
#health-msg .msg-content-container {
  max-height: calc(100vh - 54px);
}
.health-detail-msg-container .tab-btns,
#client-health-msg .tab-btns,
#health-msg .tab-btns {
  display: inline-block;
  vertical-align: middle;
}
.health-detail-msg-container .widget-content,
#client-health-msg .widget-content,
#health-msg .widget-content {
  padding-top: 0;
  padding-bottom: 0;
}
.health-detail-msg-container .health-filter .tab-text,
#client-health-msg .health-filter .tab-text,
#health-msg .health-filter .tab-text {
  display: inline-block;
  vertical-align: middle;
  height: 26px;
  line-height: 26px;
}
.health-detail-msg-container .health-filter .round-rec,
#client-health-msg .health-filter .round-rec,
#health-msg .health-filter .round-rec {
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  border-radius: 30%;
  margin-right: 5px;
}
.health-detail-msg-container .health-filter .filter-number,
#client-health-msg .health-filter .filter-number,
#health-msg .health-filter .filter-number {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0;
  margin-left: 2px;
}
.health-detail-msg-container .tab-content,
#client-health-msg .tab-content,
#health-msg .tab-content {
  position: relative;
}
.health-detail-msg-container .filter-tab,
#client-health-msg .filter-tab,
#health-msg .filter-tab {
  position: absolute;
  top: -28px;
  right: 0;
}
.health-detail-msg-container .health-good,
#client-health-msg .health-good,
#health-msg .health-good {
  background: #22B819;
}
.health-detail-msg-container .health-fair,
#client-health-msg .health-fair,
#health-msg .health-fair {
  background: #FFBB00;
}
.health-detail-msg-container .health-poor,
#client-health-msg .health-poor,
#health-msg .health-poor {
  background: #FF2954;
}
.health-detail-msg-container .health-no-data,
#client-health-msg .health-no-data,
#health-msg .health-no-data {
  background: #BFC3C9;
}
.health-detail-msg-container .event-info,
#client-health-msg .event-info,
#health-msg .event-info {
  background: #0492eb;
}
.health-detail-msg-container .detail-line-chart,
#client-health-msg .detail-line-chart,
#health-msg .detail-line-chart {
  width: 840px;
}
.health-detail-msg-container .top-graph-container,
#client-health-msg .top-graph-container,
#health-msg .top-graph-container {
  padding: 20px 16px;
  background: var(--s-background-panel, #ffffff);
}
.health-detail-msg-container .health-tooltip-container,
#client-health-msg .health-tooltip-container,
#health-msg .health-tooltip-container {
  padding: 0 10px;
  font-weight: bold;
  text-align: center;
}
.health-detail-msg-container .health-wrap > span,
#client-health-msg .health-wrap > span,
#health-msg .health-wrap > span {
  display: inline-block;
  vertical-align: middle;
  word-break: break-word;
}
.health-detail-msg-container .health-wrap .point,
#client-health-msg .health-wrap .point,
#health-msg .health-wrap .point {
  width: 8px;
  height: 8px;
  border-radius: 100%;
  margin-right: 5px;
}
.health-detail-msg-container .snapshot-title,
#client-health-msg .snapshot-title,
#health-msg .snapshot-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 10px;
  font-weight: bold;
  font-size: 15px;
  border-bottom: 1px solid #ccd0d1;
}
.health-detail-msg-container .snapshot-row,
#client-health-msg .snapshot-row,
#health-msg .snapshot-row {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
}
.health-detail-msg-container .snapshot-row .snapshot-info,
#client-health-msg .snapshot-row .snapshot-info,
#health-msg .snapshot-row .snapshot-info {
  width: 33.33%;
  font-size: 13px;
  line-height: 25px;
}
.health-detail-msg-container .snapshot-row .client-snapshot-info,
#client-health-msg .snapshot-row .client-snapshot-info,
#health-msg .snapshot-row .client-snapshot-info {
  width: 50%;
  font-size: 13px;
  line-height: 25px;
}
.health-detail-msg-container .snapshot-row .snapshot-info-title,
#client-health-msg .snapshot-row .snapshot-info-title,
#health-msg .snapshot-row .snapshot-info-title {
  color: #5e696f;
}
.health-detail-msg-container .snapshot-row:last-child,
#client-health-msg .snapshot-row:last-child,
#health-msg .snapshot-row:last-child {
  margin-bottom: 0;
}
.health-detail-msg-container .empty-wrapper,
#client-health-msg .empty-wrapper,
#health-msg .empty-wrapper {
  padding: 10px 0;
  font-size: 16px;
  background: var(--s-background-panel, #ffffff);
  color: #868e93;
}
.health-detail-msg-container .empty-wrapper .empty,
#client-health-msg .empty-wrapper .empty,
#health-msg .empty-wrapper .empty {
  margin: 20px auto;
  text-align: center;
}
.health-detail-msg-container .wired-clients,
#client-health-msg .wired-clients,
#health-msg .wired-clients {
  width: 40px;
  height: 40px;
  background: url(../img/svg/PerformanceActive.svg) no-repeat;
}
.health-detail-msg-container .wireless-clients,
#client-health-msg .wireless-clients,
#health-msg .wireless-clients {
  width: 40px;
  height: 40px;
  background: url(../img/svg/ChartIconTransmitted.svg) no-repeat;
}
.health-detail-msg-container #wire-type-tabs .selected,
#client-health-msg #wire-type-tabs .selected,
#health-msg #wire-type-tabs .selected {
  color: var(--s-color-text-primary, #212121);
  font-weight: normal;
}
.health-detail-msg-container #wire-type-tabs .tab-btn,
#client-health-msg #wire-type-tabs .tab-btn,
#health-msg #wire-type-tabs .tab-btn {
  display: inline-flex;
  flex-direction: column;
}
.health-detail-msg-container #wire-type-tabs .wire-tab-text,
#client-health-msg #wire-type-tabs .wire-tab-text,
#health-msg #wire-type-tabs .wire-tab-text {
  line-height: 16px;
  margin-bottom: 5px;
}

.abnormal-view .operation-bar {
  box-sizing: border-box;
  width: calc(100% - 56px - 2 * 30px);
}
.abnormal-view .operation-bar .abnormal-picker {
  position: absolute;
  top: 0;
  right: 0;
}
.abnormal-view .operation-bar .rangepicker-container .datepicker-calendar-container {
  right: 0;
}
.abnormal-view.page-container.has-drawer .operation-bar {
  width: calc(100% - 56px - 3 * 30px);
}

.incident-view {
  min-width: 1400px;
}
.incident-view .tabs-container {
  position: absolute;
  left: 310px;
  white-space: nowrap;
}
.incident-view .tabs-container .tab-container {
  display: inline-block;
}
.incident-view .tabs-container .tab-container:not(:last-child) {
  margin-right: 8px;
}
.incident-view .operation-btn.disabled .icon {
  cursor: not-allowed;
}
.incident-view .grid-content-tr {
  cursor: pointer;
}
.incident-view .device-name {
  display: inline-block;
  line-height: 20px;
  color: #0492EB;
  cursor: pointer;
}
.incident-view .incident-type-wrapper {
  display: flex;
  align-items: center;
}
.incident-view .incident-level {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
}
.incident-view .incident-level.level-0 {
  background-color: #FF2954;
}
.incident-view .incident-level.level-1 {
  background-color: #FF9500;
}
.incident-view .incident-level.level-2 {
  background-color: #FFD701;
}
.incident-view .incident-level.level-3 {
  background-color: #04B0FF;
}
.incident-view .incident-level-tab.level-0::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  content: "";
  display: inline-block;
  background-color: #FF2954;
}
.incident-view .incident-level-tab.level-1::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  content: "";
  display: inline-block;
  background-color: #FF9500;
}
.incident-view .incident-level-tab.level-2::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  content: "";
  display: inline-block;
  background-color: #FFD701;
}
.incident-view .incident-level-tab.level-3::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  content: "";
  display: inline-block;
  background-color: #04B0FF;
}
.incident-view .grid-panel-tbar-container .search-bar-container .text-wrap {
  width: 300px;
  max-width: 300px;
}

.wan-health .card-container .card-item {
  padding-bottom: 20px;
}
.wan-health .card-container .card-item .wan-list-wrapper {
  padding-bottom: 30px;
  position: relative;
}
.wan-health .card-container .card-item .wan-list-wrapper .grid-content-tr.hover {
  cursor: pointer;
}
.wan-health .card-container .card-item .wan-list-wrapper .grid-content-tr.selected {
  background-color: rgba(4, 146, 235, 0.08);
}
.wan-health .card-container .card-item .wan-list-wrapper .grid-content-tr.selected > td:first-child {
  position: relative;
}
.wan-health .card-container .card-item .wan-list-wrapper .grid-content-tr.selected > td:first-child::before {
  display: inline-block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 90px;
  background: #0492EB;
}
.wan-health .card-container .card-item .wan-list-wrapper .rx-uplink .text, .wan-health .card-container .card-item .wan-list-wrapper .rx-downlink .text, .wan-health .card-container .card-item .wan-list-wrapper .rxRate-uplink .text, .wan-health .card-container .card-item .wan-list-wrapper .rxRate-downlink .text {
  vertical-align: middle;
}
.wan-health .card-container .card-item .wan-line-wrapper .line-title {
  width: 100%;
  height: 48px;
  padding: 10px 0 10px 30px;
  line-height: 28px;
  font-size: 18px;
  font-weight: 500;
}
.wan-health .wan-health-wrapper {
  display: flex;
  margin: 20px 0;
  flex-flow: wrap;
}
.wan-health .wan-health-wrapper .wan-card::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 2px;
  height: 56px;
  margin-top: 6px;
  opacity: 0.4;
  background-color: #979797;
}
.wan-health .wan-health-wrapper .wan-card:last-child::after {
  content: "";
  width: 0;
  height: 0;
}
.wan-health .wan-health-wrapper .wan-card .wan-card-content {
  display: inline-block;
}
.wan-health .wan-health-wrapper .wan-card .wan-item {
  margin: 7px 60px;
  width: 100px;
  text-align: left;
}
.wan-health .wan-health-wrapper .wan-card .wan-name {
  height: 30px;
  font-size: 24px;
  color: var(--s-color-text-primary, #212121);
  font-weight: 500;
}
.wan-health .wan-health-wrapper .wan-card .wan-health-status {
  font-size: 14px;
  height: 18px;
  line-height: 18px;
}
.wan-health .wan-health-wrapper .wan-card .wan-health-status .offline-detail {
  display: inline-block;
  vertical-align: bottom;
  margin-left: 10px;
}
.wan-health .wan-health-wrapper .wan-card .level-1 {
  color: #22B819;
}
.wan-health .wan-health-wrapper .wan-card .back-ground-1 {
  background-color: #22B819;
}
.wan-health .wan-health-wrapper .wan-card .level-2 {
  color: #FFBB00;
}
.wan-health .wan-health-wrapper .wan-card .back-ground-2 {
  background-color: #FFBB00;
}
.wan-health .wan-health-wrapper .wan-card .level-3 {
  color: #FF2954;
}
.wan-health .wan-health-wrapper .wan-card .back-ground-3 {
  background-color: #FF2954;
}
.wan-health .wan-health-wrapper .wan-card .level-4 {
  color: #BFC3C9;
}
.wan-health .wan-health-wrapper .wan-card .back-ground-4 {
  background-color: #BFC3C9;
}
.wan-health .wan-health-wrapper .wan-card .level-5 {
  color: #A5ABB4;
}
.wan-health .wan-health-wrapper .wan-card .back-ground-5 {
  background-color: #A5ABB4;
}
.wan-health .wan-health-wrapper .round {
  display: inline-block;
  margin-right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 100%;
}
.wan-health .wan-chart {
  margin: 0 34px;
}
.wan-health .wan-img-wrapper {
  text-align: center;
}
.wan-health .wan-img-wrapper .img {
  margin: 20px auto;
  padding-bottom: 10px;
  text-align: center;
  color: var(--tab-color-primary, #868E93);
  font-size: 16px;
}

.client-health-container .preview-card {
  height: 300px;
}
.client-health-container .title-border {
  border-bottom: 1px solid #e5e5e5;
}
.client-health-container .card-line-chart {
  width: 100%;
}
.client-health-container .card-preview-line-chart {
  height: auto;
}
.client-health-container .time-text {
  margin-bottom: 0;
  padding-top: 15px;
  font-size: 13px;
  font-weight: bold;
}
.client-health-container .wire-text {
  font-size: 14px;
}
.client-health-container .card-footer-container {
  height: 20px;
}
.client-health-container .card-footer-container .abnormality-block {
  width: 18px;
  height: 12px;
  background-color: #FF2954;
  display: inline-block;
}
.client-health-container .card-footer-container .abnormality-text {
  margin-left: 8px;
  color: var(--tab-color-primary, #868E93);
}
.client-health-container .line-container {
  height: 400px;
}

#client-health-card-msg .card-title-container {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  line-height: 28px;
  font-size: 16px;
  font-weight: bold;
}
#client-health-card-msg .point-info-card-title {
  padding-bottom: 10px;
  font-weight: bold;
  font-size: 15px;
  border-bottom: 1px solid #e5e5e5;
}
#client-health-card-msg .legend-point {
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  margin-right: 5px;
}
#client-health-card-msg .granularity-container {
  display: flex;
  justify-content: flex-end;
  padding: 0 10px;
}
#client-health-card-msg .card-line-chart {
  width: 840px;
  margin-bottom: 0;
}
#client-health-card-msg .card-grid-panel {
  background: var(--s-background-panel, #ffffff);
  padding: 10px 16px;
}
#client-health-card-msg .grid-title {
  font-size: 16px;
  font-weight: 600;
  padding: 10px 0;
}
#client-health-card-msg .point-info-row {
  display: flex;
  width: 100%;
  flex-flow: row wrap;
}
#client-health-card-msg .point-info-row .info-col {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 33.33%;
  padding: 0 60px 0 0;
  font-size: 13px;
  margin-bottom: 10px;
}
#client-health-card-msg .point-info-row .info-text {
  display: inline-block;
  vertical-align: middle;
  line-height: 30px;
}

.card-empty-container {
  padding: 70px 0;
  text-align: center;
}
.card-empty-container .empty-icon {
  margin: auto;
}
.card-empty-container .text {
  margin: 20px auto;
  color: var(--tab-color-primary, #868E93);
  font-size: 16px;
}

.card-general-empty-container {
  padding: 15px 0 0 0;
  margin: 0;
  text-align: center;
}
.card-general-empty-container .empty-icon {
  margin: auto;
}
.card-general-empty-container .text {
  margin: 20px auto;
  color: var(--tab-color-primary, #868E93);
  font-size: 16px;
}

.client-channel-container {
  height: 400px;
  padding-top: 30px;
}
.client-channel-container .card-header {
  display: none;
}
.client-channel-container .card-body {
  height: auto;
}
.client-channel-container .card-wrap .card-item-0 {
  border: none;
  border-right: none;
}

.client-health-card-top {
  display: flex;
  justify-content: space-between;
  padding-bottom: 14px;
}
.client-health-card-top .title-text {
  display: inline-block;
  font-size: 18px;
  height: 28px;
  line-height: 28px;
}
.client-health-card-top .card-title {
  cursor: pointer;
}
.client-health-card-top .card-title .see-more {
  display: inline-block;
  color: #0492EB;
  font-size: 20px;
  line-height: 28px;
  font-weight: bold;
  margin-left: 10px;
}
.client-health-card-top .combobox-container > div {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}
.client-health-card-top .combobox-container .combobox-container.hover .combobox-wrap.widget-wrap {
  border-color: transparent;
}
.client-health-card-top .combobox-container .combobox-container.focus .combobox-wrap.widget-wrap {
  border-color: transparent;
}
.client-health-card-top .range-combobox {
  vertical-align: middle;
}
.client-health-card-top .range-combobox .widget-fieldlabel-wrap {
  display: none;
}
.client-health-card-top .range-combobox .combobox-wrap {
  width: 150px;
  border: 2px solid transparent;
  cursor: pointer;
}
.client-health-card-top .range-combobox .combobox-text {
  color: #0492EB;
  cursor: pointer;
}

.color-group .info-col:nth-child(1) .circle {
  background-color: rgba(92, 120, 251, 0.5);
}
.color-group .info-col:nth-child(1) .circle::after {
  background-color: rgba(92, 120, 251, 0.5);
}
.color-group .info-col:nth-child(2) .circle {
  background-color: rgba(4, 176, 255, 0.5);
}
.color-group .info-col:nth-child(2) .circle::after {
  background-color: rgba(4, 176, 255, 0.5);
}
.color-group .info-col:nth-child(3) .circle {
  background-color: rgba(72, 222, 230, 0.31);
}
.color-group .info-col:nth-child(3) .circle::after {
  background-color: rgba(72, 222, 230, 0.31);
}

.ssid-color-group .info-col:nth-child(1) .circle {
  background-color: rgba(50, 65, 255, 0.8);
}
.ssid-color-group .info-col:nth-child(1) .circle::after {
  background-color: rgba(50, 65, 255, 0.8);
}
.ssid-color-group .info-col:nth-child(2) .circle {
  background-color: rgba(4, 146, 235, 0.8);
}
.ssid-color-group .info-col:nth-child(2) .circle::after {
  background-color: rgba(4, 146, 235, 0.8);
}
.ssid-color-group .info-col:nth-child(3) .circle {
  background-color: rgba(84, 212, 235, 0.8);
}
.ssid-color-group .info-col:nth-child(3) .circle::after {
  background-color: rgba(84, 212, 235, 0.8);
}
.ssid-color-group .info-col:nth-child(4) .circle {
  background-color: rgba(39, 175, 213, 0.8);
}
.ssid-color-group .info-col:nth-child(4) .circle::after {
  background-color: rgba(39, 175, 213, 0.8);
}
.ssid-color-group .info-col:nth-child(5) .circle {
  background-color: rgba(4, 86, 235, 0.8);
}
.ssid-color-group .info-col:nth-child(5) .circle::after {
  background-color: rgba(4, 86, 235, 0.8);
}
.ssid-color-group .info-col:nth-child(6) .circle {
  background-color: rgba(182, 32, 224, 0.8);
}
.ssid-color-group .info-col:nth-child(6) .circle::after {
  background-color: rgba(182, 32, 224, 0.8);
}
.ssid-color-group .info-col:nth-child(7) .circle {
  background-color: rgba(209, 139, 255, 0.8);
}
.ssid-color-group .info-col:nth-child(7) .circle::after {
  background-color: rgba(209, 139, 255, 0.8);
}
.ssid-color-group .info-col:nth-child(8) .circle {
  background-color: rgba(233, 167, 251, 0.64);
}
.ssid-color-group .info-col:nth-child(8) .circle::after {
  background-color: rgba(233, 167, 251, 0.64);
}

.legend-container .circle {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  -webkit-transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.legend-container .circle::after {
  content: "";
  position: absolute;
  top: 5.5px;
  left: -6px;
  height: 1px;
  width: 24px;
}

#incident-detail-msg, #incident-detail-cause-msg {
  right: 0 !important;
  top: 56px !important;
  left: auto !important;
  bottom: 0 !important;
  padding-top: 5px;
  width: 900px;
  background: var(--drawer-bg-primary, #FFFFFF);
  box-shadow: 0 8px 8px 0 var(--components-box-shadow, #909090);
  z-index: 550;
}
#incident-detail-msg .msg-wrap, #incident-detail-cause-msg .msg-wrap {
  width: 900px;
  height: 100%;
}
#incident-detail-msg .msg-wrap .msg-close, #incident-detail-cause-msg .msg-wrap .msg-close {
  z-index: 1;
}
#incident-detail-msg .msg-content-container, #incident-detail-cause-msg .msg-content-container {
  max-height: calc(100vh - 54px - 56px);
  padding-top: 0;
  padding-bottom: 0;
}
#incident-detail-msg .incident-detail-msg-title-wrapper, #incident-detail-cause-msg .incident-detail-msg-title-wrapper {
  display: flex;
  margin-right: 30px;
  padding: 0 24px;
  height: 44px;
  justify-content: space-between;
}
#incident-detail-msg .incident-detail-title, #incident-detail-cause-msg .incident-detail-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: var(--s-color-text-primary, #212121);
  font-weight: bold;
}
#incident-detail-msg .incident-detail-title.widget-container, #incident-detail-cause-msg .incident-detail-title.widget-container {
  margin-bottom: 0;
}
#incident-detail-msg .btns-wrapper, #incident-detail-cause-msg .btns-wrapper {
  display: flex;
  align-items: center;
}
#incident-detail-msg .btns-wrapper .widget-container, #incident-detail-cause-msg .btns-wrapper .widget-container {
  margin-bottom: 0;
}
#incident-detail-msg .btns-wrapper .delete-action .button-text, #incident-detail-cause-msg .btns-wrapper .delete-action .button-text {
  color: #FF2954;
}
#incident-detail-msg .btns-wrapper .button-container .button-button, #incident-detail-cause-msg .btns-wrapper .button-container .button-button {
  padding-left: 0;
}
#incident-detail-msg .line-title, #incident-detail-cause-msg .line-title {
  text-align: center;
  line-height: 28px;
}
#incident-detail-msg .loading-icon-container, #incident-detail-cause-msg .loading-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 300px;
}
#incident-detail-msg .msg-title, #incident-detail-cause-msg .msg-title {
  background: var(--drawer-bg-primary, #FFFFFF);
}

.incident-poe-utilization .card-item .poe {
  width: calc(100% - 16px) !important;
}
.incident-poe-utilization .card-item .poe .port-power-list {
  padding-top: 23px;
  overflow-x: auto;
  margin-bottom: 30px;
}
.incident-poe-utilization .card-item .poe .port-power-list .port-row {
  margin-bottom: 12px;
  white-space: nowrap;
}
.incident-poe-utilization .card-item .poe .port-power-list .port-item {
  position: relative;
  display: inline-block;
  background: #e5e5e5;
  border-radius: 3px;
  width: calc(7.1428571429% - 6px);
  height: 40px;
  margin-right: 6px;
}
.incident-poe-utilization .card-item .poe .port-power-list .port-item .port-num {
  position: absolute;
  top: -14px;
  font-size: 11px;
  margin-left: 50%;
  transform: translate(-50%, 0);
}
.incident-poe-utilization .card-item .poe .port-power-list .port-item .port-value {
  background: #04B0FF;
  border-radius: 3px;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.incident-poe-utilization .card-item .poe .port-power-list .port-item .overflow-port-value {
  background: #FF9500;
}
.incident-poe-utilization .card-item .poe .port-power-list .port-item.second-line .port-num {
  position: absolute;
  top: 44px;
}
.incident-poe-utilization .card-item .poe .port-power-overview .bar-percent {
  float: right;
  font-size: 14px;
}
.incident-poe-utilization .card-item .poe .port-power-overview .start {
  font-size: 12px;
  color: #a0a0a0;
}
.incident-poe-utilization .card-item .poe .port-power-overview .end {
  font-size: 12px;
  color: #a0a0a0;
  float: right;
}
.incident-poe-utilization .card-item .poe .port-power-overview .power-capacity-bar {
  margin: 4px 0;
}
.incident-poe-utilization .card-item .poe .port-power-overview .power-capacity-bar .progressbar-wrap-outer,
.incident-poe-utilization .card-item .poe .port-power-overview .power-capacity-bar .progressbar-wrap {
  padding: 0;
  width: 100%;
}
.incident-poe-utilization .card-item .poe .port-power-overview .power-capacity-bar .progressbar-content {
  height: 8px;
  width: 100%;
}
.incident-poe-utilization .card-item .poe .port-power-overview .power-capacity-bar .progressbar-content .progressbar-value {
  background-color: #04B0FF;
}
.incident-poe-utilization .card-item .poe .port-power-overview .power-capacity-bar.example .progressbar-value {
  width: 55%;
}

.detect-container {
  margin-bottom: 24px;
}
.detect-container #detect-btn {
  margin-top: 12px;
}
.detect-container .detect-result-title {
  color: var(--s-color-text-primary, #212121);
  font-weight: 600;
  margin-top: 20px;
}
.detect-container .detect-result-list-content {
  display: flex;
  flex-wrap: wrap;
}
.detect-container .ap-list-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
  margin-right: 30px;
}
.detect-container .ap-list-item .ap-name {
  margin-top: 8px;
}
.detect-container .ap-list-item .ap-mac {
  color: var(--s-color-text-primary, #212121);
  opacity: 0.5;
}

#detect-notice-msg .confirm-content {
  margin-bottom: 0;
}

.incident-journey-combobox {
  margin-left: 57px;
  color: #0492EB;
}
.incident-journey-combobox .widget-wrap-outer {
  cursor: pointer;
}
.incident-journey-combobox .combobox-text {
  cursor: inherit;
}
.incident-journey-combobox .widget-fieldlabel-wrap {
  display: none;
}
.incident-journey-combobox .combobox-wrap {
  border: 1px solid transparent !important;
  width: auto;
  padding-right: 40px;
}

.incident-port-combobox,
.incident-bar-chart-combobox {
  position: absolute;
  right: 85px;
  z-index: 999;
  color: #0492EB;
}
.incident-port-combobox .widget-fieldlabel-wrap,
.incident-bar-chart-combobox .widget-fieldlabel-wrap {
  display: none;
}
.incident-port-combobox .combobox-wrap,
.incident-bar-chart-combobox .combobox-wrap {
  border: 1px solid transparent !important;
  width: 100px;
}
.incident-port-combobox.width-180,
.incident-bar-chart-combobox.width-180 {
  position: absolute;
  right: 85px;
  z-index: 999;
  color: #0492EB;
}
.incident-port-combobox.width-180 .widget-fieldlabel-wrap,
.incident-bar-chart-combobox.width-180 .widget-fieldlabel-wrap {
  display: none;
}
.incident-port-combobox.width-180 .combobox-wrap,
.incident-bar-chart-combobox.width-180 .combobox-wrap {
  border: 1px solid transparent !important;
  width: 180px;
}

.incident-group-combobox {
  position: absolute;
  right: 85px;
  z-index: 999;
  color: #0492EB;
}
.incident-group-combobox .widget-fieldlabel-wrap {
  display: none;
}
.incident-group-combobox .combobox-wrap {
  border: 1px solid transparent !important;
  width: 120px;
}

.bar-chart-container {
  position: relative;
}
.bar-chart-container .bar-title {
  position: absolute;
  font-weight: bold;
  left: 55px;
  top: 5px;
}

.incident-bar-chart-combobox .combobox-wrap {
  width: 130px;
}

.protocol-replay-container {
  margin-top: 24px;
}
.protocol-replay-container .tab-content {
  padding: 0;
}
.protocol-replay-container .protocol-replay-title {
  font-weight: bold;
  margin-top: 12px;
  margin-bottom: 8px;
}
.protocol-replay-container .process-duration {
  margin-top: 8px;
}

.incident-grid-view .list-wrapper .title {
  margin-top: 20px;
  font-weight: 800;
}
.incident-grid-view .paging-options {
  display: none;
}
.incident-grid-view .mac-item {
  display: inline-block;
  margin: 5px;
  border: 1px solid;
  line-height: 20px;
}

.abnormal-notification .notification-label-group .checkbox-label {
  width: 150px;
}
.abnormal-notification .notification-title {
  padding-bottom: 10px;
  border-bottom: 1px solid #b9b9b9;
}
.abnormal-notification .notification-checkbox-group .checkbox-group-list-wrap {
  max-width: 800px;
}
.abnormal-notification .notification-checkbox-group .checkbox-list {
  margin-right: 30px;
}
.abnormal-notification .event-level span.text {
  position: relative;
  padding-left: 10px;
}
.abnormal-notification .event-level .checkbox-list:first-child span.text:before {
  content: "";
  position: absolute;
  height: 8px;
  width: 8px;
  top: 50%;
  left: 0;
  transform: translateY(-4px);
  border-radius: 50%;
  background: #FF2954;
}
.abnormal-notification .event-level .checkbox-list:nth-child(2) span.text:before {
  content: "";
  position: absolute;
  height: 8px;
  width: 8px;
  top: 50%;
  left: 0;
  transform: translateY(-4px);
  border-radius: 50%;
  background: #FF9500;
}
.abnormal-notification .event-level .checkbox-list:nth-child(3) span.text:before {
  content: "";
  position: absolute;
  height: 8px;
  width: 8px;
  top: 50%;
  left: 0;
  transform: translateY(-4px);
  border-radius: 50%;
  background: #FFD701;
}
.abnormal-notification .event-level .checkbox-list:nth-child(4) span.text:before {
  content: "";
  position: absolute;
  height: 8px;
  width: 8px;
  top: 50%;
  left: 0;
  transform: translateY(-4px);
  border-radius: 50%;
  background: #04B0FF;
}

.abnormal-overview-view {
  min-width: 1444px;
}
.abnormal-overview-view .grid-card-container {
  display: flex;
  margin-left: -20px;
}
.abnormal-overview-view .grid-card-container .chart-card-container {
  margin-left: 20px;
  flex: 1;
}
.abnormal-overview-view .grid-card-container .client-type {
  width: auto;
}
.abnormal-overview-view .grid-card-container .client-icon .icon, .abnormal-overview-view .grid-card-container .device-icon .icon {
  margin-right: 16px;
}
.abnormal-overview-view .grid-card-container .client-icon .client-type, .abnormal-overview-view .grid-card-container .client-icon .device-type, .abnormal-overview-view .grid-card-container .device-icon .client-type, .abnormal-overview-view .grid-card-container .device-icon .device-type {
  display: inline-block;
}
.abnormal-overview-view .grid-card-container .client-icon .text, .abnormal-overview-view .grid-card-container .device-icon .text {
  vertical-align: middle;
}
.abnormal-overview-view .grid-card-container .grid-panel-content {
  display: flex;
  flex-direction: column;
  min-height: 290px;
}
.abnormal-overview-view .grid-card-container .grid-panel-content-container {
  flex-grow: 1;
}
.abnormal-overview-view .grid-card-container .grid-header-container {
  display: none;
}
.abnormal-overview-view .grid-card-container .grid-content-td {
  padding: 4px 15px;
}
.abnormal-overview-view .grid-card-container .grid-content-td:last-child .td-content {
  text-align: right;
  font-weight: bold;
  margin-right: 5px;
  color: #0492EB;
  cursor: pointer;
}
.abnormal-overview-view .grid-card-container .grid-content-td:last-child .td-content::after {
  content: ">";
  padding-left: 5px;
}
.abnormal-overview-view .grid-card-container .grid-content-td:last-child .td-content .grid-content-td-wrap {
  display: inline-block;
}
.abnormal-overview-view .grid-card-container .paging-wrap {
  text-align: center;
}
.abnormal-overview-view .grid-card-container .paging-info-container, .abnormal-overview-view .grid-card-container .paging-options, .abnormal-overview-view .grid-card-container .paging-go {
  display: none;
}
.abnormal-overview-view .chart-card-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.abnormal-overview-view .card-title {
  font-weight: bold;
}
.abnormal-overview-view .card-content-wrapper {
  margin: 20px;
  flex-grow: 1;
}
.abnormal-overview-view .card-content-wrapper .fieldset-content {
  height: 100%;
}
.abnormal-overview-view .card-content-wrapper .empty-chart-content {
  display: none;
}
.abnormal-overview-view .card-content-wrapper.empty .empty-chart-content {
  display: flex;
}
.abnormal-overview-view .card-content-wrapper.empty .content {
  display: none;
}
.abnormal-overview-view #abnormal-event-num-card .fieldset-content {
  display: flex;
  align-items: center;
}
.abnormal-overview-view #abnormal-event-num-card .empty .fieldset-content {
  justify-content: center;
}
.abnormal-overview-view .grid-card-container .card-content-wrapper {
  margin: 0;
}
.abnormal-overview-view .pie-chart-content {
  flex-direction: column;
}
.abnormal-overview-view .bar-chart {
  flex-grow: 1;
  margin-left: 30px;
}
.abnormal-overview-view .card-legend-container {
  display: flex;
}
.abnormal-overview-view .legend-item {
  margin-left: 30px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.abnormal-overview-view .legend-item.selected {
  opacity: 0.3;
}
.abnormal-overview-view .legend-item .circle {
  position: relative;
  width: 12px;
  height: 12px;
  margin-right: 12px;
  border-radius: 50%;
}
.abnormal-overview-view .legend-item .circle:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 1px;
}
.abnormal-overview-view .legend-item .circle.critical {
  background-color: #FF2954;
}
.abnormal-overview-view .legend-item .circle.critical:before {
  background-color: #FF2954;
}
.abnormal-overview-view .legend-item .circle.error {
  background-color: #FF9500;
}
.abnormal-overview-view .legend-item .circle.error:before {
  background-color: #FF9500;
}
.abnormal-overview-view .legend-item .circle.warning {
  background-color: #FFD701;
}
.abnormal-overview-view .legend-item .circle.warning:before {
  background-color: #FFD701;
}
.abnormal-overview-view .legend-item .circle.info {
  background-color: #04B0FF;
}
.abnormal-overview-view .legend-item .circle.info:before {
  background-color: #04B0FF;
}
.abnormal-overview-view .tooltip-wrapper {
  min-width: 224px;
  padding: 5px 10px;
}
.abnormal-overview-view .tooltip-list {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}
.abnormal-overview-view .tooltip-list.title {
  border-bottom: 1px solid #e5e5e5;
}
.abnormal-overview-view .tooltip-list.title .name {
  font-weight: bold;
}
.abnormal-overview-view .tooltip-list .value {
  font-weight: bold;
}

.abnormal-settings-view .tab-container {
  display: inline-block;
}
.abnormal-settings-view .tab-container:not(:last-child) {
  margin-right: 8px;
}
.abnormal-settings-view .incident-type-wrapper {
  display: flex;
  align-items: center;
}
.abnormal-settings-view .incident-level {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
}
.abnormal-settings-view .incident-level.level-0 {
  background-color: #FF2954;
}
.abnormal-settings-view .incident-level.level-1 {
  background-color: #FF9500;
}
.abnormal-settings-view .incident-level.level-2 {
  background-color: #FFD701;
}
.abnormal-settings-view .incident-level.level-3 {
  background-color: #04B0FF;
}
.abnormal-settings-view .incident-title-num {
  color: #0492EB;
}

#abnormal-setting-edit-msg #abnormal-settings-content-container {
  line-height: 28px;
}
#abnormal-setting-edit-msg #abnormal-settings-content-container .widget-container {
  display: inline-block;
  vertical-align: top;
}
#abnormal-setting-edit-msg .abnormal-settings-reset {
  color: #0492EB;
  font-weight: bold;
  line-height: 32px;
  float: right;
  cursor: pointer;
}
#abnormal-setting-edit-msg .settings-textbox {
  margin-left: 5px;
  margin-right: 5px;
}
#abnormal-setting-edit-msg .cut-line {
  height: 12px;
}

#global-combobox-options[data-shown=abnormal-settings-level] .combobox-list-wrap .combobox-list .icon {
  margin-right: 5px;
}
#global-combobox-options[data-shown=abnormal-settings-level] .combobox-list-wrap .combobox-list .text:before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  margin-right: 5px;
}
#global-combobox-options[data-shown=abnormal-settings-level] .combobox-list-wrap .combobox-list.critical .text:before {
  background-color: #FF2954;
}
#global-combobox-options[data-shown=abnormal-settings-level] .combobox-list-wrap .combobox-list.error .text:before {
  background-color: #FF9500;
}
#global-combobox-options[data-shown=abnormal-settings-level] .combobox-list-wrap .combobox-list.warning .text:before {
  background-color: #FFD701;
}
#global-combobox-options[data-shown=abnormal-settings-level] .combobox-list-wrap .combobox-list.info .text:before {
  background-color: #04B0FF;
}

.abnormal-level-combo .combobox-text {
  position: relative;
  padding-left: 15px;
}
.abnormal-level-combo .combobox-text:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 9px;
}
.abnormal-level-combo .combobox-text.critical:after {
  background-color: #FF2954;
}
.abnormal-level-combo .combobox-text.error:after {
  background-color: #FF9500;
}
.abnormal-level-combo .combobox-text.warning:after {
  background-color: #FFD701;
}
.abnormal-level-combo .combobox-text.info:after {
  background-color: #04B0FF;
}

.health-wrap,
.incident-devices {
  margin-left: -8px;
}
.health-wrap .item,
.incident-devices .item {
  display: inline-block;
  text-align: center;
  margin: 5px 8px;
  padding: 0 5px;
  min-width: 24px;
  height: 16px;
  line-height: 16px;
  border-radius: 8px;
  color: #ffffff;
  font-size: 10px;
}
.health-wrap .critical,
.incident-devices .critical {
  background-color: #FF2954;
}
.health-wrap .error,
.incident-devices .error {
  background-color: #FF9500;
}
.health-wrap .warning,
.incident-devices .warning {
  background-color: #FFD701;
}
.health-wrap .info,
.incident-devices .info {
  background-color: #04B0FF;
}
.health-wrap > span,
.incident-devices > span {
  display: inline-block;
  vertical-align: middle;
  word-break: break-word;
}
.health-wrap .point,
.incident-devices .point {
  width: 8px;
  height: 8px;
  border-radius: 100%;
  margin-right: 8px;
}
.health-wrap .good,
.incident-devices .good {
  background: #22B819;
}
.health-wrap .fair,
.incident-devices .fair {
  background: #FFBB00;
}
.health-wrap .poor,
.incident-devices .poor {
  background: #FF2954;
}
.health-wrap .no-data,
.incident-devices .no-data {
  background: #BFC3C9;
}
.health-wrap .offline,
.incident-devices .offline {
  background: #A5ABB4;
}
.health-wrap .good-color,
.incident-devices .good-color {
  color: #22B819;
}
.health-wrap .fair-color,
.incident-devices .fair-color {
  color: #FFBB00;
}
.health-wrap .poor-color,
.incident-devices .poor-color {
  color: #FF2954;
}
.health-wrap .no-data-color,
.incident-devices .no-data-color {
  color: #BFC3C9;
}
.health-wrap .offline-color,
.incident-devices .offline-color {
  color: #A5ABB4;
}

.mask.disable-notify-confirm-msg {
  z-index: 901;
}

.disable-notify-confirm-msg.msg-container {
  z-index: 902;
}

.widget-container.block.user-group-tab-wrapper {
  padding: 5px 30px;
}

.user-group-tab {
  background: #ffffff;
}
.user-group-tab .tab-edit {
  display: none;
}
.user-group-tab .tab-btn {
  position: relative;
  white-space: nowrap;
  margin-left: 0;
  border: none;
  padding: 1px 18px;
  color: var(--tab-color-primary, #868E93);
}
.user-group-tab .tab-btn::after {
  content: "";
  display: inline-block;
  position: absolute;
  right: 0;
  width: 1px;
  height: 28px;
  background-color: #f0f0f0;
}
.user-group-tab .tab-btn .text {
  height: 28px;
}
.user-group-tab .tab-btn.selected {
  font-weight: normal;
  color: #0492EB;
  background: #ebf6fd;
}

.user-group-select {
  vertical-align: middle;
}
.user-group-select .widget-fieldlabel-wrap {
  width: auto;
}

.user-list-operations-wrapper {
  position: absolute;
  top: 18px;
  left: 245px;
}

.add-user-msg {
  overflow: unset;
}
.add-user-msg .msg-content-container {
  overflow: unset;
}

#vpn-lock-user-view .left-time {
  color: #0492EB;
}
#vpn-lock-user-view .progressbar-content {
  width: 190px;
}

.internet-view .field-selected {
  padding: 6px;
  width: 130px;
  height: 32px;
  border: 1px solid var(--components-border-primary, #BEC3C5);
  border-radius: 3px;
}
.internet-view .internet-lost-setting {
  display: flex;
  flex-wrap: wrap;
}
.internet-view .lan-lost-setting .repeat-item + .repeat-item {
  margin-top: 12px;
}
.internet-view .lost-port {
  display: inline-block;
  margin-top: 5px;
  margin-right: 18px;
  height: 24px;
  padding: 4px 24px;
  line-height: 16px;
  background-color: rgba(174, 180, 183, 0.24);
  border-radius: 12px;
}
.internet-view.port-map-msg .msg-wrap {
  width: 1100px;
}
.internet-view.port-map-msg .step-container .step-count {
  margin-bottom: 38px;
}
.internet-view.port-map-msg .step-container.universal .step-item.step2 .step-line, .internet-view.port-map-msg .step-container.hide-lan-step .step-item.step2 .step-line {
  display: none;
}
.internet-view.port-map-msg .step-container.universal .step-item.step3, .internet-view.port-map-msg .step-container.hide-lan-step .step-item.step3 {
  display: none;
}
.internet-view.port-map-msg .current-gateway-title {
  margin-left: 165px;
}
.internet-view.port-map-msg .port-map-text {
  margin-bottom: 24px;
  color: var(--s-color-text-tertiary, #626262);
}
.internet-view.port-map-msg .displaylabel-container.port-map-model-display .widget-wrap.text-wrap {
  padding-left: 5.5px;
  padding-right: 5.5px;
  color: #0492EB;
  background-color: var(--tag-highlight, #e6f4fd);
}
.internet-view.port-map-msg .port-map-model {
  display: inline-block;
  padding: 6px 5.5px;
  line-height: 16px;
  color: #0492EB;
  background-color: var(--tag-highlight, #e6f4fd);
}
.internet-view.port-map-msg .draggable-list-item {
  display: block;
  padding-left: 8px;
  border: 0 none;
  border-radius: 2px;
  background-color: var(--select-background-hover, #F2F4F7);
  list-style-type: none;
  cursor: move;
}
.internet-view.port-map-msg .draggable-list-item + .draggable-list-item {
  margin-top: 0;
}
.internet-view.port-map-msg .draggable-list-item:before {
  display: none;
}
.internet-view.port-map-msg .wan-port-mapping,
.internet-view.port-map-msg .lan-port-mapping {
  display: inline-block;
}
.internet-view.port-map-msg .wan-port-mapping .repeat-item,
.internet-view.port-map-msg .lan-port-mapping .repeat-item {
  margin-bottom: 32.5px;
}
.internet-view.port-map-msg .wan-port-mapping .wan-name,
.internet-view.port-map-msg .wan-port-mapping .current-sel,
.internet-view.port-map-msg .lan-port-mapping .wan-name,
.internet-view.port-map-msg .lan-port-mapping .current-sel {
  vertical-align: middle;
}
.internet-view.port-map-msg .wan-port-mapping .wan-name,
.internet-view.port-map-msg .lan-port-mapping .wan-name {
  width: 110px;
}
.internet-view.port-map-msg .wan-port-mapping .split-line,
.internet-view.port-map-msg .wan-port-mapping .split-line:before,
.internet-view.port-map-msg .lan-port-mapping .split-line,
.internet-view.port-map-msg .lan-port-mapping .split-line:before {
  color: var(--s-color-text-secondary, #979797);
}
.internet-view.port-map-msg .wan-port-mapping .split-line,
.internet-view.port-map-msg .lan-port-mapping .split-line {
  position: relative;
  top: -13px;
  display: inline-block;
  width: 168px;
  text-align: center;
}
.internet-view.port-map-msg .wan-port-mapping .split-line:before,
.internet-view.port-map-msg .lan-port-mapping .split-line:before {
  position: absolute;
  left: 0;
  bottom: -2px;
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--s-color-text-secondary, #979797);
}
.internet-view.port-map-msg .wan-port-mapping .split-line:after,
.internet-view.port-map-msg .lan-port-mapping .split-line:after {
  position: absolute;
  top: 13px;
  left: -8px;
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 8px solid #979797;
}
.internet-view.port-map-msg .wan-port-mapping .draggable-list-item,
.internet-view.port-map-msg .lan-port-mapping .draggable-list-item {
  padding-left: 0;
  padding-top: 2px;
  border: 1px solid #0492EB;
  text-align: center;
  color: #0492EB;
  background-color: var(--tag-highlight, #e6f4fd);
}
.internet-view.port-map-msg .lan-port-mapping .repeat-item {
  margin-bottom: 8px;
}
.internet-view.port-map-msg .current-wans.draggable-list-container {
  position: fixed;
  display: inline-block;
  margin-left: 20px;
  width: auto;
  vertical-align: top;
}
.internet-view.port-map-msg .current-wans.draggable-list-container .field-text {
  display: none;
}
.internet-view.port-map-msg .current-wans.draggable-list-container .connected-sortable {
  min-width: 145px;
  max-width: 415px;
  padding-top: 16px;
  padding-right: 0;
  width: auto;
  height: auto;
  max-height: 200px;
  min-height: 100px;
  border: 0 none;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23BEC3C5FF' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}
.internet-view.port-map-msg .current-wans.draggable-list-container .connected-sortable .draggable-list-item {
  display: inline-block;
  margin-bottom: 16px;
  margin-right: 10px;
  width: 125px;
}
.internet-view.port-map-msg .msg-btn-container {
  margin-bottom: 60px;
}
.internet-view.port-map-msg .msg-btn-wrap > .button-container {
  position: absolute;
}
.internet-view.port-map-msg .msg-btn-wrap > .button-container:first-child {
  right: 30px;
}
.internet-view.port-map-msg .msg-btn-wrap > .button-container:last-child {
  left: 30px;
  margin-left: 0;
}
.internet-view.port-map-msg .msg-btn-wrap > .button-container:last-child .button-button {
  padding-left: 0;
  padding-right: 0;
  border: 0 none;
  vertical-align: middle;
}
.internet-view.port-map-msg .msg-btn-wrap > .button-container:last-child .button-button:hover {
  opacity: 0.6;
  background-color: transparent;
}
.internet-view.port-map-msg .msg-btn-wrap > .button-container:last-child .button-button-before {
  display: inline-block;
  margin-right: 5px;
  width: 30px;
  height: 30px;
  background-image: url(../img/svg/LoginIconBackNormal.svg);
  vertical-align: middle;
}
.internet-view .mss-clamping-field .fieldset-content {
  display: flex;
  align-items: flex-end;
}
.internet-view .mss-clamping-field .fieldset-content .mss-custom-textbox {
  margin-left: 10px;
}
.internet-view .mss-clamping-field .fieldset-content .mss-custom-textbox .text-wrap {
  width: 100px;
}

.msg-container.wan-lost-msg, .msg-container.lan-lost-msg {
  z-index: 902;
}
.msg-container.lan-lost-msg .msg-content-container {
  max-height: 240px;
}

.mask.wan-lost-msg, .mask.lan-lost-msg {
  z-index: 901;
}

#internet-view [widget=errortip] {
  display: block;
}

.keywords-add_bottom .keywords-add {
  bottom: -20px;
  top: auto;
  right: auto;
}

.tooltip-right .tooltip-container {
  position: absolute;
  left: auto;
  right: 0;
}

.label-wrap-normal .widget-fieldlabel-wrap {
  white-space: normal;
}

.help-label-block .widget-fieldlabel-wrap {
  display: block;
}

.settings-drawer .displaylabel-container {
  margin-bottom: 25px;
}
.settings-drawer .displaylabel-container .widget-fieldlabel-wrap {
  line-height: 15px;
  height: 32px;
  margin-bottom: 0;
}
.settings-drawer .checkbox-container .widget-fieldlabel-wrap {
  line-height: 13px;
  vertical-align: middle;
}

.band-unit-combobox .combobox-wrap.widget-wrap {
  width: 90px;
}

#devices-grid .grid-container .grid-content-td[name=action-column] {
  padding: 0 10px;
}

#software-upgrade-msg .widget-wrap-outer,
#hardware-upgrade-msg .widget-wrap-outer {
  vertical-align: middle;
}
#software-upgrade-msg .msg-btn-wrap,
#hardware-upgrade-msg .msg-btn-wrap {
  display: flex;
  align-items: center;
}

.maintenance-view .capacity-container {
  display: flex;
  justify-content: space-between;
}
.maintenance-view .capacity-item .widget-fieldlabel-wrap {
  color: var(--s-color-text-tertiary, #5E696F);
}
.maintenance-view .capacity-item .widget-wrap-outer.progressbar-wrap-outer {
  width: 100%;
  padding-right: 0;
}
.maintenance-view .capacity-item .progressbar-wrap {
  width: 100%;
}
.maintenance-view .capacity-item .progressbar-content {
  width: auto;
}
.maintenance-view .capacity-item .progressbar-value {
  background-color: #ffcb00;
}
.maintenance-view .capacity-item div.progressbar-text {
  top: -24px;
  right: 0;
}
.maintenance-view .capacity-item.gateway, .maintenance-view .capacity-item.switch {
  flex: 1 1;
}
.maintenance-view .capacity-item.eap {
  flex: 2 2;
}
.maintenance-view .capacity-item + .capacity-item {
  margin-left: 50px;
}

#tutorial-view .tutorial-slick.combined-gateway .panel-overview .screenshot {
  background: url(../img/combinedGatewayTutorial/overview.jpg) no-repeat;
  background-size: cover;
}
#tutorial-view .tutorial-slick.combined-gateway .site-management .screenshot {
  background: url(../img/combinedGatewayTutorial/overview.jpg) no-repeat;
  background-size: cover;
}

#help-center #cloudAccess-help-view .combined-gateway #cloud-access-topology-img {
  background-image: url(../img/help/combinedGatewayCloudAccessTopology.png);
  background-size: cover;
  width: 535px;
  height: 534px;
}

.level-wrap .icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
  margin-top: 2px;
  vertical-align: top;
}
.level-wrap .icon-information {
  background: #0492EB;
}
.level-wrap .icon-error {
  background: #FF2954;
}
.level-wrap .icon-warning {
  background: #F5A623;
}

.audit-log-bottom-slot {
  text-align: center;
  color: #9a9ea6;
}

.audit-logs-page .export-popup {
  width: 320px;
  position: absolute;
  right: 0;
  top: 52px;
  z-index: 800;
  background-color: var(--msg-background-content, #ffffff);
  box-shadow: 0 0 8px 0 rgba(54, 62, 77, 0.2), 0 8px 8px 0 rgba(54, 62, 77, 0.1);
  border-radius: 3px;
  padding: 24px;
}
.audit-logs-page .export-popup .title {
  font-size: 16px;
  font-weight: bold;
}
.audit-logs-page .export-popup .export-type-radio {
  margin: 30px 0;
}
.audit-logs-page .export-popup:before {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border-bottom: 8px solid var(--msg-background-content, #ffffff);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  top: -8px;
  right: 27px;
}
.audit-logs-page .icon-button.disabled .button-button, .audit-logs-page .icon-button.disabled:not(.loading) .button-button {
  background-color: #0492EB;
}

#audit-logs-grid .tree-select-dropdown ul.tree-select-dropdown-children-ul {
  max-height: 300px;
}
/*# sourceMappingURL=map/su.css.map */