/*Windows scroll fixes*/
html, body { overflow: hidden; }
nav.side { overflow-x: hidden; }
main.ur { overflow-x: hidden; }
/*Windows scroll fixes*/
hr[style] + * {
margin-block-start: .8rem;
}
#APIDOC span { text-transform: lowercase; }
#APIDOC:not(.JSON) :is([json],hr) { display: none; }
/*Safari layout fixes*/
_::-webkit-full-page-media, _:future, :root[mobile] { --sfm: 2.5; }
/*Safari layout fixes*/
[status=active] td[label^=alrm]:not([value='.']) { background-color: var(--dng-bg-color); color: var(--dng-fg-color); border-color: var(--dng-bd-color); }
[status=active] td[label=alrm1][value^='All Clear'] { background-color: var(--suc-bg-color); color: var(--suc-fg-color); border-color: var(--suc-bd-color); }
td.status.web.focus,
td { background-color: var(--lgh-bg-color); color: var(--lgh-fg-color); }
td[label=Host],
td[label=L1] { font-weight: bold !important; }
td[label=MAC1],
td[label=IP1],
td[label=L1] { background-color: var(--prm-bg-color); color: var(--prm-fg-color); }
tr.device { cursor: pointer; }
td { white-space: nowrap; } td:hover { background-color: var(--focus-color); } /* cells */
[data-toggle] { cursor: pointer; user-select: none; }
[data-toggle=collapse].collapsed:after { content: "\f078"; }
[data-toggle=collapse]:after {
content: "\f077"; color: var(--secondary-color); font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands'; font-weight: 900;
position: absolute; right: 1.3rem;
}
/**/
.side label { cursor: pointer; user-select: none; font-size: small; display: flex; max-width: calc(100% - 2.8em); align-items: center; justify-content: space-between; outline: 1px solid var(--debug-outline-color); }
.side label .badge { align-self: stretch; line-height: 6.2em; }
i[type] {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
border-bottom: none !important;
width: 5em; height: 5em;
outline: 1px solid var(--debug-outline-color);
}
i[type]:before { content: "."; color: transparent; }
i[type] { background-image: var(--tempi); }
i[type='EM?'] { background-image: var(--EM35i); }
i[type='20302'] { background-image: var(--20302i); }
i[type='21367'] { background-image: var(--21246i); }
i[type='20576'] { background-image: var(--20576i); }
i[type^='21633'] { background-image: var(--21633i); }
#Type-21214 [label=humidity],
#Type-22150 [label=humidity]{ display: none !important; }
td[label]:not(:is([label=L1],[label=MAC1],[label^=User])) { min-height: 33px; }
td[label][value] { overflow-x: hidden !important; }
.type.table-responsive:not(:first-child) { margin: 1em 0; }
div.type { margin: 1em 0; border-radius: var(--border-radius); }
div.type table { margin-bottom: 0; background-color: white; }
h2.type:after { display: none; }
h2.type { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; }
h2.type > i { height: 2em; width: 2em; display: block; xbackground-color: var(--disabled-color); border-radius: var(--border-radius); }
h2.type > .badge { width: 1.4em; align-self: stretch; line-height: 2em; }
.status.web { font-weight: normal; background-color: var(--info-bg-color); color: var(--info-fg-color); border-color: var(--info-bd-color); }
.status.web { font-weight: normal; background-color: var(--prm-bg-color); color: var(--prm-fg-color); border-color: var(--prm-bd-color); }
body.table-dash th.status.web { background-color: white; border-color: var(--bs-table-bd); color: unset; }
[label=clients1] { display: none; }
table { font-size: small; }
:root { --te-display: table-cell; }
main h2.type i { display: none; }
:root {
--type-img-padding: 0rem;
--type-btn-width: 0rem;
--type-img-left: -.2rem;
--type-img-width: calc(var(--type-img-padding) + var(--type-img-left));
}
[label=UserButton] > i:hover { filter: brightness(.5); }
body.table-dash [label^=User] { display: flex !important; border: none !important;
font-size: medium; border-color: transparent; flex-direction: row !important; _background-color: white !important;
_left: calc(var(--type-img-padding) + 1rem); _position: absolute; height: 24px; _background-color: red !important;
}
body.table-dash [label=UserExpand] { display: none !important; }
tr:not(.bin).device[alrm1^=Disconnect],
tr:not(.bin).device[alrm1$=Loss],
tr:not(.bin).device[loss] {
--prm-bg-color: #eee; --prm-fg-color: var(--lgh-fg-color); --prm-bd-color: var(--snd-bd-color);
}
tr:not(.bin).device[alrm1^=Disconnect] > td:not([label=UserButton]),
tr:not(.bin).device[alrm1$=Loss] > td:not([label=UserButton]),
tr:not(.bin).device[loss] > td:not([label=UserButton]) { cursor: not-allowed !important; }
.type.host:before { background-image: var(--LDAi); }
.type.host[k='']:before { opacity: .5; filter: blur(var(--FI)) saturate(0); }
.type.host[k=mobile]:before { background-image: var(--SmartPhoneI); --FI: ; }
.type.host[k^='EM']:before { background-image: var(--EM35i); --FI: ; }
.type.host td:not(:empty) { display: var(--te-display) !important; }
:root { --tx: attr(mac); }
body[tx=L1] { --tx: attr(L1); }
/* Layout */
nav.navbar.bread { padding: 0 !important; margin: 0 !important; }
nav.navbar.bread > div { display: flex; justify-content: center; align-items: center; padding: 0 !important; margin: 0 !important; }
nav.navbar.bread > div:last-child { display: none; }
#noteCount { margin-right: .4rem; }
body > smart-menu * { font-size: initial; }
#menu-toggle { width: 52px; height: 3rem; display: flex; justify-content: center; align-items: center; }
nav.side > ul { position: absolute; bottom: 1rem; }
[render=user] nav.navbar a[href='#user'],
[render=store] nav.navbar a[href='#store'],
[render=alerts] nav.navbar a[href='#alerts'] { color: var(--prm-bg-color); }
:root { --header-height: 3rem; --side-width: 15rem; --pane-height: 8rem; }
nav.bread { grid-column: span 2; user-select: none; }
nav nav { position: absolute !important; top: 0; right: 1rem; font-size: 1.4rem; }
nav nav a { color: white; } nav nav a + a { margin-left: .4rem; }
nav [in]:not(:hover) { opacity: .2; } a[href=''] { pointer-events: none; opacity: .5; }
nav [in] { top: unset; bottom: 1rem; font-family: monospace; outline: 1px solid red; }
nav.side { overflow-y: auto; height: calc(100vh - var(--header-height)); xpadding: .4rem; user-select: none; }
:root, body { height: 100%; }
body {
display: grid; width: 100vw;
grid-template-areas:
"h h"
"s c"
"s c";
grid-template-columns: var(--side-width) 1fr;
grid-template-rows: var(--header-height) 1fr;
}
nav.bread { grid-area: h; }
nav.side { grid-area: s; }
iframe,
.main { width: auto; height: auto; margin: 0; padding: 0; grid-column: span 3; }
body:not([render=home]) .smart-tab-strip,
_html:not([iframe]) iframe { visibility: hidden; position: absolute; z-index: -9999999; pointer-events: none; }
body[tree-level] iframe { z-index: unset; pointer-events: unset; }
html[iframe] .main { display: none; }
html:not([iframe]) .main,
html[iframe] iframe { grid-area: c; }
.no-menu { --side-width: 3.35rem; }
nav.side { padding-top: .4rem; }
.no-menu nav.side li { max-width: 3.3rem; }
nav.side li i { transform: translateX(-.4rem); }
.no-menu nav.side #side-smart { dixsplay: none !important; }
[render*=':'] main { display: flex; height: 100%; width: 100vw; }
[render*=':'] [in]:not(:last-child) { display: none; }
[render*=':'] [in] * { display: none; }
iframe { width: 100%; border: 0; height: 100%; align-self: stretch; flex: 1; }
/* Layout */
.smart-header.smart-tabs-header-section { border: none; }
[render=health] .smart-header.smart-tabs-header-section { display: none !important; }
/* Details */
:not(body)[set]:before { content: attr(value); width: 2em; background-color: #eee; color: black; }
:not(body)[set]:hover:before { background-color: red; }
[label=Edge][value='BLE']:before { --fa-bluetooth: '\f293'; content: var(--fa-bluetooth); font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands'; font-weight: 300; }
[card-detail='0'] .card[t=count] ul { display: none; }
[label=Host] { display: none !important; }
#deviceInfoToggle { display: none; }
#edcMenu { height: auto; width: 16em; z-index: 30000 !important; opacity: .9; }
#edcMenu { max-height: 90% !important; overflow-y: auto; text-transform: capitalize; }
th[label] { overflow: hidden; text-overflow: ellipsis; }
div.type.edge { pointer-events: none; }
div.type.edge tr :is(td,th) { pointer-events: all; }
div.type.edge:hover { --hbgc: var(--snd-bg-color); --hbdc: var(--snd-bd-color); --hzi: 0; }
div.type.edge::before { cursor: pointer; z-index: var(--hzi); pointer-events: all;
font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands', system-ui; opacxity: .5; color: var(--snd-fg-color);
content: "" var(--fa-columns); position: absolute; --fa-columns: "\f0db";
top: 0em; right: .1em; background-color: var(--hbgc); margin: -.4em;
padding: .4em; border: 1px solid; border-color: var(--hbdc, transparent);
}
div.type.edge { position: relative; }
[edge-detail='0'] .edge [label] { display: none; }
body[conn-detail='0'] .host td.detail { display: none !important; }
body:not([conn-detail='0']) .host td.detail { display: var(--te-display) !important; }
body:not(.table-dash) { --dd: inline-flex; }
body.table-dash { --dd: table-row; }
.host > [label] { order: 0 !important; }
.host > [label^=User] { order: 2 !important; }
.host > [label=Site] {
background-color: var(--suc-bg-color);
border-color: var(--suc-bd-color);
color: var(--suc-fg-color);
}
.host > [label].jump { order: 2 !important; }
shin-ip { display: inline-block !important; line-height: .4rem; }
tr.device { display: var(--dd); flex-direction: column; background-color: var(--prm-bg-color); position: relative; }
-tr.device:after { position: absolute; top: -.2rem; left: .2rem; opacity: .2; font-size: xx-small; }
tr.host [label=Model] { font-weight: bold; }
td.status.web[label=PartNumber] { order: -1; background-color: var(--prm-bg-color); color: var(--lgh-fg-color); font-weight: bold; }
td.status.xml[label=alrm1] { order: 1; } td.status.xml[label=alrm1] { order: 1; }
td.status.web { order: 2; } td.status.web[label=Site] { order: 2 !important; }
[label=EdgeCount]:after { opacity: .5; }
[label]:not([label=L1])[num][unit]:after { content: attr(unit); opacity: .5; margin-left: .1rem; font-size: .5em;
transform: translateY(var(--unit-ty, -.5em)); display: inline-block;
}
[label=UserButton] { order: 2 !important; background-color: transparent !important; pointer-events: none; }
[label=UserExpand] { order: 4; background-color: unset !important; }
[conn-detail] .edge [label=UserButton] { padding: 0; z-index: 1; }
.device[license] > [label=UserButton] > i { pointer-events: all; }
body.table-dash [label=UserButton] > i { width: 2em; margin-top: .4em; text-align: center; }
/* KE2 DOOR SENSOR 🚪 */
/* .type.edge[k='11111'] [label=smode] { contain: none; overflow: visible; --fa-door-open: '\f52b'; --fa-door-closed: '\f52a'; }
body:not(.table-dash) .type.edge[k='11111'] [label=smode]::after {
font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands', system-ui;
font-size: xxx-large; overflow: visible; color: inherit !important;
color: initial; position: absolute; content: var(--i, var(--fa-door-open));
left: 0; top: 2rem; right: 0; z-index: 1;
xoutline: 1px solid;
}
.type.edge[k='11111'] [label=smode][value=CLOSED] { --i: var(--fa-door-closed); }
.type.edge[k='11111'] [label=rtemp],
.type.edge[k='11111'] [label=humidity] { color: transparent !important; display: none !important; overflow: hidden !important; } */
.type.edge[k='11111'],
.type.edge[k='22115'] {
[label=smode] {
--fa-door-open: '\f52b';
--fa-door-closed: '\f52a';
&::after {
font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands', system-ui;
font-size: xxx-large;
overflow: visible;
color: inherit !important;
color: initial;
position: absolute;
content: var(--i, var(--fa-door-open));
left: 0;
top: 2rem;
right: 0;
z-index: 1;
xoutline: 1px solid;
}
&[value=CLOSED] { --i: var(--fa-door-closed); }
}
[label=rtemp], [label=humidity] { color: transparent !important; display: none !important; overflow: hidden !important; }
}
body:not(.table-dash) {
.type.edge[k='11111'],
.type.edge[k='22115'] {
[label=smode] {
position: relative; xoutline: 1px solid; height: 7.725rem; overflow: visible;
&::after {
font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands', system-ui;
font-size: xxx-large;
overflow: visible;
color: inherit !important;
color: initial;
position: absolute;
content: var(--i, var(--fa-door-open));
left: 0;
top: 2rem;
right: 0;
z-index: 1;
xoutline: 1px solid;
}
}
}
}
/* KE2 DOOR SENSOR 🚪 */
.type.edge[k='21241'] [label=compcap],
.type.edge[k='21241'] [label=spress],
.type.edge[k='21969'] [label=sh],
.type.edge[k='21739'] [label=aux1],
.type.edge:is([k='21241'],[k='21969']) [label=spress],
.type.edge[k='21241'] [label=dpress] { display: var(--te-display); }
.type.edge[k='33333'] {
[label=CurrentL1],
[label=ActiveEnergyImport],
[label=PowerFactorL1] { display: var(--te-display); }
[label=CurrentL1]::after { content: 'A'; }
[label=ActiveEnergyImport]::after { content: 'kWh'; }
}
.type.edge[k='21403'] [label=fancap],
.type.edge[k='21403'] [label=hpress],
.type.edge[k='21403'] [label=hpress2] { display: var(--te-display); }
.type.edge[k='21367'] [label=compcap],
.type.edge[k='21367'] [label=spress] { display: var(--te-display); }
.type.edge[k^='2163'] [label=MAC1]:before { --fa-bluetooth: '\f293'; content: var(--fa-bluetooth); }
.type.edge[k^='2163'] [label=IP1]:before { --fa-battery-bolt: "\f376"; content: var(--fa-battery-bolt) ' ' attr(battery); position: absolute; left: 0; right: 0; }
body.table-dash .type.edge[k^='2163'] [label=IP1]:before { padding: 0 .3rem;
content: var(--fa-battery-bolt) ' ' attr(battery); --fa-battery-bolt: "\f376";
position: absolute; left: 0; right: -.2em;
background-color: var(--prm-bg-color); line-height: 1.8em;
border-top: 2px solid var(--tr-border-color); top: -2px;
}
:root { --bs-table-bd: #dee2e6; }
body[filter] { --abt: 1px; }
body.table-dash .type.edge[k^='2163'] tr:last-child [label=IP1]:before { border-bottom: calc(1px + var(--abt, 0px)) solid var(--tr-border-color); }
body.table-dash .type.edge[k^='2163'] th[label=IP1]:before { content: var(--fa-battery-bolt) ' Battery';
background-color: transparent; --xbc: var(--bs-table-bd); border-top: 1px solid var(--xbc); top: -1px;
border-bottom: 2px solid var(--xbc) !important; border-color: var(--xbc) !important; z-index: 1;
display: block !important; --fa-battery-bolt: "\f376";
}
.type.edge[k^='2163'] td[label=IP1]:before:hover { background-color: red !important; }
body.table-dash [label=L1] {
position: sticky !important; left: 0; z-index: 1;
}
body.table-dash th[label=L1] { background-color: white; }
body.table-dash td[label=L1] { ouxtline: 2px solid var(--prm-bg-color); }
smart-tabs[selected-index='0'] .type.edge[k^='2163'] [label=IP1]:before { visibility: visible; }
.type.edge[k^='2163'] [label=IP1] { visibility: hidden; position: relative; }
.type.edge[k^='2163'] [label=spress] { display: none; }
[render=alerts] [in]:not(:last-child) { display: none; }
[render=alerts] [in] * { display: none; }
[render=dash] [in]:not([in=dash]) { display: none; }
[render=home] [in]:not([in=home]) { display: none; }
[conn-detail='0'] .edge .status.web,
[conn-detail='0'] .edge [label=IP1],
[conn-detail='0'] .edge [label=MAC1] { display: none; }
/* Details */
/* Menu */
:root { --menu-icon-margin: .3em; --menu-icon-background-color: none; }
nav.bread .nav-item { cursor: pointer; user-select: none; }
nav.side { z-index: 10; }
nav.side { background-color: var(--lgh-bg-color); }
.nav-link { color: var(--snd-fg-color); white-space: nowrap; display: flex !important; align-items: center; }
.nav-link { border-radius: .25rem !important; border: 1px solid transparent; }
body:not([tree-level]):not([group-level]) .nav-link.active {
background-color: var(--smart-ui-state-selected);
border-color: var(--smart-ui-state-border-selected);
color: var(--smart-ui-state-color-selected);
}
body:not([tree-level]):not([group-level]) .smart-tab-label-container[aria-label*=Report],
body:not([tree-level]):not([group-level]) .smart-tab-label-container[aria-label*=Alarms] {
display: none;
}
/* GROUPS */
nav.side i,
body[group-level] .navbar .smart-breadcrumb-item-label:before,
body[group-level] .navbar .smart-breadcrumb-item-label:after,
#g .smart-tree-item-label-container:not(:last-child) span:before,
#g .smart-tree-item-label-container:not(:last-child) span:after {
content: '\f0ac '; font-family: 'Font Awesome 5 Duotone'; font-weight: 900; margin-right: var(--menu-icon-margin);
min-width: 2em; min-height: 2em; display: inline-flex; justify-content: center; align-items: center;
}
body[group-level] .navbar .smart-breadcrumb-item-label:after,
#g .smart-tree-item-label-container:not(:last-child) span:after { content: '\10f0ac ' !important; }
body[group-level] .navbar .smart-breadcrumb-item-label:before,
body[group-level] .navbar .smart-breadcrumb-item-label:after { margin-right: 0; display: inline; }
body[group-level] .navbar .smart-breadcrumb-item-label:before,
#g .smart-tree-item-label-container span:before { color: var(--fa-primary-color); }
body[group-level] .navbar .smart-breadcrumb-item-label:after,
#g .smart-tree-item-label-container span:after { color: var(--fa-secondary-color); opacity: .3; position: absolute; left: 0; }
body[group-level] .navbar .smart-breadcrumb-item-label:after { left: .3rem; }
/*GROUPS*/
#g, #T {
--smart-ui-state-hover: ; --smart-ui-state-color-hover: ; --smart-ui-state-border-hover: transparent;
--smart-ui-state-focus: ; --smart-ui-state-color-focus: ; --smart-ui-state-border-focus: transparent;
}
#g [selected],
#T [selected] {
--smart-ui-state-hover: var(--smart-ui-state-selected);
--smart-ui-state-color-hover: var(--smart-ui-state-color-selected);
--smart-ui-state-border-hover: var(--smart-ui-state-border-selected);
}
body:not([tree-level]) #T {
--smart-ui-state-selected: transparent;
--smart-ui-state-color-selected: ;
--smart-ui-state-border-selected: transparent;
}
:root { --name: "Home"; }
.nav-link.logo:before { content: "."; display: inline-block; min-height: 2em; min-width: 2em; color: transparent; margin-right: var(--menu-icon-margin); }
.nav-link.logo:before { background-size: contain; background-position: center; background-repeat: no-repeat; opacity: .8; background-color: var(--menu-icon-background-color); }
.nav-link.logo:before { background-image: var(--logo); }
.nav-link.logo:after { content: var(--name); }
/* Menu */
th[label]:before,
td[label]:before { font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands', sans-serif; margin-right: .2em; }
[label$=Latency]:before { content: var(--fa-hourglass); --fa-hourglass: "\f254"; }
th[label$=Time]:before,
td[label$=Time]:before { content: var(--fa-clock); --fa-clock: "\f017"; }
pane [label$=Time]:before { display: none; }
[label$=CommitTime]:before { --fa-download: "\f019"; content: var(--fa-download); }
[label$=Date]:before { --fa-calendar-day: "\f783"; content: var(--fa-calendar-day); }
[label=RegisterTime]:before { --fa-server: "\f233"; content: var(--fa-server); }
[label=Site]:before { --fa-industry: "\f1ad"; content: var(--fa-industry); font-weight: 900; display: inline !important; }
[label=Serial], [label=USB] { display: block !important; font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands'; --io: .3; }
[label=Serial]:after, [label=USB]:after { display: none; }
[label=Serial]:before { --fa-network-wired: "\f6ff"; content: var(--fa-network-wired) " Modbus"; opacity: var(--io); }
[label=USB]:before { --fa-usb: "\f287"; content: var(--fa-usb) " USB"; opacity: var(--io); }
tr.host[serial] [label=Serial]:before,
tr.host[usb] [label=USB]:before { opacity: unset; }
body[render=store] main,
body[render=data] main,
body[render=user] main { display: flex; }
tr.device { user-select: none; }
/**/
nav [in=dash], nav [in=home] { display: none; } [render=home] nav [in=home] { display: unset; }
[in=home] { --gap: .4rem; position: fixed; top: var(--gap); right: 1rem; z-index: 99; color: red; }
/**/
smart-breadcrumb { border: none !important; }
smart-breadcrumb, smart-breadcrumb .smart-container {
flex-direction: column; padding-left: 0 !important; transform: translateY(-.05rem);
max-height: 2rem; width: calc(100vw - 9rem) !important; -outline: 1px solid;
display: flex !important; justify-content: center; align-items: flex-end;
}
:root { --chrome-color: #f5f5f5; }
.smart-breadcrumb-item { background-color: var(--chrome-color) !important; border: none !important; }
.smart-toast-container { z-index: 999999999999 !important; }
.fad.nethost,
.fad.nethost,
.fad.netself { --fa-primary-color: black; }
.fad.netself { --fa-primary-color: #333; --fa-secondary-color: black; }
[render=health] main section { text-align: center; }
[render=health] smart-gauge { width: 10rem !important; margin-bottom: -1rem; pointer-events: none; }
[render=health] smart-gauge input { transform: translateY(-3.4rem); pointer-events: none; border-color: transparent !important; font-size: 3rem !important; }
:root { --unlicensed-opacity: .5; --licensed-opacity: 1; }
tr.device:not([log]) .log:after,
tr.device:not([graph]) td[num]:after { opacity: var(--unlicensed-opacity); }
a { text-decoration: none !important; }
.navbar-dark.bg-dark { background-color: var(--smart-surface) !important; --fa-secondary-color: black !important; }
:root {
--smart-primary: var(--ke2-blue) !important;
--smart-gauge-background-active: var(--smart-primary);
}
span.grp { padding: 0 !important; }
#bread count { display: none; }
#side-smart count { opacity: .5; }
#g span,
#T span { min-width: min-content !important; }
#T span:not(.grp) { display: flex; width: 100%; justify-content: space-between; align-items: center; }
#T span.grp { display: flex; justify-content: center; align-items: center; }
:root { --ts: 48px; }
#menuToggle { width: calc(var(--ts) + .4rem); height: calc(var(--ts) + .2rem); }
i.fad.fa-bars { transform: translateX(.2rem) translateY(.1rem); }
brand,
brand > * { display: flex; height: var(--ts); justify-content: center; align-items: center; }
brand { position: fixed; left: calc(var(--ts) + .4rem + .4rem); height: var(--ts); z-index: 1; gap: .8rem; }
logo { background-repeat: no-repeat; background-size: contain; background-position: center; }
logo { width: var(--ts); -background-image: url("//ke2.cdn.blue/l0/KE2-logo.svg") !important; }
name { text-transform: uppercase; color: rgb(90, 90, 90); gap: 1ch; }
name::before { content: "KE2"; font-weight: bold; }
name::after { -content: "SmartAccess"; opacity: .7; }
name > span > span { font-weight: 500; }
body smart-menu:not([mode=vertical]) { right: 0; position: absolute; z-index: 1; width: auto; xheight: auto; font-size: large; border: none; }
#navMenu .smart-menu-items-group-arrow { display: none; }
body smart-menu { --smart-menu-item-background-focus: var(--snd-bg-color); transform: translateY(-.13rem); }
body[set='0'] #g,
body:not([set='0']) #T { --smart-tree-selection: ; --smart-tree-selection-color: ; }
body smart-menu .smart-menu-items-group-opened[label*=user] .smart-menu-drop-down { -transform: translateX(10px) !important; }
:root { --smart-editor-drop-down-vertical-offset: -3px !important; }
smart-tabs .smart-nav-button { z-index: 0 !important; }
.smart-tabs-selection-bar { z-index: 0 !important; }
smart-grid#notes, #note smart-list-box { width: auto; height: auto; }
@media (max-width: 300px) { .navbar.bread { display: none; } }
@media (max-width: 450px) { smart-window { width: 100vw !important; left: unset !important; } name { display: none } }
@media (max-device-width: 425px) { smart-window { width: 100vw !important; left: unset !important; } }
/*NOTES*/
smart-window#note { top: 0; z-index: 100000; }
:root { --postit-color: #FFFFDD; --postit-border-radius: 4px; }
smart-window#note { height: auto; }
#noteComments { max-height: calc(100vh - 10.6em); }
smart-window#note #noteContent { backkground: var(--postit-color); padding: .4rem; border-radius: var(--postit-border-radius); }
#noteTitle:empty:before { content: 'title'; }
smart-window#note #noteTitle { outline: none !important; }
.shin-comment-content {
background-color: var(--shin-comment-content-background-color);
border-radius: var(--shin-comment-content-border-radius);
min-height: var(--shin-comment-content-min-height);
max-height: var(--shin-comment-content-max-height);
overflow-y: auto; outline: none;
}
.shin-comment-content img {
max-width: 100%;
}
.shin-comment-content mac {
font-family: monospace; text-align: center;
font-weight: var(--shin-comment-input-font-weight);
font-size: var(--shin-comment-input-font-size);
background: var(--shin-comment-input-background);
color: var(--shin-comment-input-color);
border: var(--shin-comment-input-border);
margin: var(--shin-comment-input-margin);
}
[contenteditable].single-line { white-space: nowrap; overflow: hidden; }
[contenteditable].single-line br { display: none; }
[contenteditable].single-line * { display: inline; white-space: nowrap; }
smart-window#note #noteTitle { padding: 1rem; margin: 0; border-radius: var(--postit-border-radius); max-width: 100%; }
smart-window#note shin-comment:first-child { --shin-comment-header-margin: 0 0 .2rem 0; }
shin-comment {
margin-top: .4rem; width: 100%;
--shin-comment-content-border-radius: var(--postit-border-radius);
--shin-comment-img-max-width: 3rem;
--shin-comment-img-max-height: 3rem;
--shin-comment-header-color: #ccc;
--shin-comment-header-font-size: small;
--shin-comment-header-margin: .8rem 0 .2rem 0;
--shin-comment-input-background: #eee;
--shin-comment-input-font-size: small;
--shin-comment-input-font-weight: bold;
}
.shin-comment-content { padding: .4em; }
shin-comment[new] { --shin-comment-content-min-height: 4rem; }
smart-window#note footer smart-button { height: 3em; }
smart-window#note .smart-header:before { content: "New"; }
smart-window#note[index] .smart-header:before { content: "Update"; }
smart-window#note .smart-header:after { content: " Note"; }
smart-window#note[index] h1 { pointer-events: none; }
smart-window#note:not([index]) #noteTitle {
background-color: var(--postit-color);
background-color: var(--wrn-bg-color);
border: 1px solid var(--wrn-bd-color);
}
smart-window#note .smart-content { display: flex; flex-direction: column; overflow-y: auto; }
smart-window#note .smart-content > div { flex: 1; margin-top: .6rem; min-height: 1rem; width: 100%; overflow-y: auto; }
smart-window { --smart-window-footer-height: ; max-height: 100% !important; }
smart-grid#notes { margin-bottom: .3rem; }
smart-grid#notes .smart-grid-cell-template img { max-height: 1.8rem; }
smart-grid#notes .smart-grid-cell-template > div * { display: inline !important; }
#note [for=up] { cursor: pointer; }
#note [for=up]:hover > smart-button {
background-color: var(--smart-ui-state-hover);
border-color: var(--smart-ui-state-border-hover);
color: var(--smart-ui-state-color-hover);
}
#note .note-remove { position: fixed; z-index: 22222; right: 0; top: .4em; }
shin-comment:not([new]) .shin-comment-content { background-color: rgba(254, 243, 205, .1); }
shin-comment[new] { position: sticky; bottom: 0; background: var(--smart-background); }
/*NOTES*/
nav.side { background-color: #f5f5f5; }
/*FILTERS*/
smart-text-box.search:after { opacity: .5; }
smart-text-box.search:after {
content: '\f002'; font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands'; position: absolute; z-index: 1;
top: .4rem; right: .7rem; pointer-events: none;
}
smart-text-box.search:not([value='']):after { color: var(--fa-primary-color); opacity: 1;
transform: translate(.6rem, -.4rem) scale(.7); transform-origin: top right;
}
body[filter] { --filtered-bd: var(--ke2-blue); }
#F input { border-color: var(--ibc, #aaa); }
smart-text-box.search:not([value='']) input { background-color: var(--filtered-bg); --ibc: var(--filtered-bd); border-width: .1rem; }
smart-text-box.search:not([hover]):not([focus]) { width: 2.2rem; }
#F { position: absolute; top: .5rem; right: calc(var(--ts) + .8rem); z-index: 9998; transition: all .2s; }
body[render=home][filter] #F,
body[render=home] #F[hover],
body[render=home] #F[focus] { --p: calc(var(--ts) + .4rem); left: var(--p); right: var(--p); width: unset; --ibc: black; }
#F ::-webkit-calendar-picker-indicator,
#F ::marker { display: none !important; }
body[render-pause] #main { filter: brightness(.9); }
smart-tooltip kbd,
smart-tooltip code { background-color: #444; padding: .2rem; border-radius: var(--border-radius); border: 1px solid #aaa; }
smart-tooltip kbd { border-width: 1px; background-color: #aaa; color: black; border-color: #fff }
smart-tooltip li { display: list-item; line-height: 2; }
smart-tooltip { text-align: left; z-index: 99999999999999999 !important; }
smart-tooltip ul { margin-top: var(--gap) !important; }
/*FILTERS*/
smart-prompt,
smart-confirm { z-index: 99999999999999 !important; }
smart-menu-items-group[expanded=true] { --fa-secondary-color: red !important; }
body[mntab='4']:not(.no-upper-pane) #deviceSelections { display: none; }
:root { --health-height: 20rem; --map-bottom-height: 26rem; } body[mntab='4']:not(.no-upper-pane) { --health-height: calc(50vh - (48px + 42px)); --health-height: calc(100vh - var(--map-bottom-height)); }
@supports (zoom: 1 /**/) { :root { --map-bottom-height: 18rem; } body:not(.no-upper-pane)[mntab='4'] { --z: .6; } body[mntab='4'] #main > group { zoom: var(--z); } }
main { height: calc(100% - var(--health-height) + 1rem); align-content: flex-start; }
smart-tab-item { background-color: white; }
[render=health] #other:is([src*='h.html'],[src=*='m.html']) { margin-top: 0; height: 100%; }
[render=home] #other {
grid-area: c; position: relative; height: var(--health-height);
visibility: visible; margin-top: 2.4rem;
}
[render=home] main { margin-top: calc(var(--health-height) - .6rem); }
[render=home]:not([mntab='0']):not([mntab='4']) #other { visibility: hidden; }
_[render=home]:not([tree-level='2']) { --health-height: 0; }
[render=home][group-level] main { margin-top: .3rem; }
[render=home][group-level] { --health-height: 0; }
[render=home][group-level] #splitter { display: none; }
#splitter { z-index: 2 !important; }
/*5.1*/
smart-menu,
smart-breadcrumb { --smart-background: var(--smart-surface); }
nav smart-tree { width: auto; height: auto; font-smooth: always; --smart-tree-item-vertical-offset: 0; }
smart-tree .smart-tree-main-container,
smart-tree smart-scroll-viewer { padding: 0 !important; }
/*5.1*/
body.no-upper-pane main { margin-top: 2em !important; }
body:not(.no-upper-pane) button#splitter { top: var(--up); opacity: .4; }
body:not(.no-upper-pane) #other { height: ; }
button#splitter:hover { background-color: #c1c1c1; } smart-menu { z-index: 3 !important; }
button#splitter { _display: none; position: absolute; top: 0; z-index: 999;
height: .8rem; outline: none !important; cursor: row-resize;
border: none; font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands'; color: #777; background-color: #eee; _margin-bottom: .4rem;
} button#splitter:before { --fa-chevron-up: "\f077"; content: var(--fa-chevron-up); transform: translateY(-.1em); display: block; }
[render=home].no-upper-pane button#splitter:before { --fa-chevron-down: "\f078"; content: var(--fa-chevron-down); }
[render=home].no-upper-pane { --health-height: 0; }
[render=home][tree-level='2'] button#splitter { display: block; }
button#splitter { font-size: 2em; height: 1.6rem; top: -1.1em; }
/* SEARCH FILTER HIGHLIGHT */
body[filter] tr.device { _border-color: var(--filtered-bd); }
body[filter] { --filtered-bg: var(--wrn-bg-color); }
tr.device { border: 2px solid var(--tr-border-color); --tr-border-color: transparent; }
/*body[filter] tr.device { --tr-border-color: var(--smart-primary); }*/
tr.device:hover { --prm-bg-color: var(--prm-bd-color); }
/* SEARCH FILTER HIGHLIGHT */
/* Menu - collapsed Sites and Groups */
:root { --nmw: 54px; --dbxc: red; --nmto: 9.74rem; --nmtx: calc(var(--nmto) + .2rem); }
.no-menu #T [level] smart-tree-item { display: none; }
.no-menu #T [level='1'] .smart-tree-items-group-arrow,
.no-menu #T [level='1'] count { display: none; }
.no-menu #T [level='1'] .smart-tree-item-container { display: flex; flex-direction: row; background-color: var(--dbc); }
.no-menu #T [level='1'] { transform: rotate(90deg) translateX(-3.85em); position: fixed; -z-index: 999999; }
.no-menu #T [level='1'] { transform-origin: bottom left; }
.no-menu #T [level] .smart-tree-item-label-container { transform: rotate(180deg); padding: 0 !important; min-height: var(--nmw); padding-left: 1rem !important; }
.no-menu #T [level] .grp { min-width: fit-content; }
.no-menu #T [level='1'] smart-tree-items-group i { display: none !important; }
.no-menu #T [level='1'] > .smart-tree-item-label-container { display: none; }
#side-mit { position: sticky; top: -.4rem; z-index: 1; } #side-mit > * { background-color: white }
.no-menu #T [level='1'] .smart-tree-item-container { -max-width: calc(100vh - var(--nmtx)); overflow-x: auto; }
.no-menu #T [level='1'] .smart-tree-item-container > * { min-width: fit-content; }
#side-smart smart-tree-items-group { xbackground-color: transparent; }
#T, #g { border: none; background-color: transparent; }
.tree-focus { position: relative; font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands'; --off: .2rem; --op: .3; }
.tree-focus:before { content: '\f104'; position: absolute; left: var(--off); opacity: var(--op); }
.tree-focus:after { content: '\f105'; position: absolute; right: var(--off); opacity: var(--op); }
.tree-focus { cursor: pointer; }
body:not(.no-menu) .tree-focus,
body.no-menu.nmg #T,
body.no-menu:not(.nmg) #g { display: none !important; }
body.no-menu.nmg .tree-focus i:before { content: '\f0ac'; }
body.no-menu.nmg .tree-focus i:after { content: '\10f0ac'; }
.no-menu #g,
.no-menu #g * { traxnsition: all .2s !important; baxckground-color: transparent; }
.no-menu #g [level='1']:last-child { -display: none; }
.no-menu #g [level='1'] .smart-tree-items-group-arrow { display: none; }
.no-menu #g .smart-tree-main-container { display: flex; flex-direction: row; height: var(--nmw); background-color: var(--dbc); width: fit-content; }
.no-menu #g .smart-tree-main-container { transform: rotate(90deg) translateX(calc(0px - var(--nmw))); position: fixed; z-index: 999999; }
.no-menu #g .smart-tree-main-container { transform-origin: bottom left; }
.no-menu #g .smart-tree-main-container { max-width: calc(100vh - var(--nmto)); overflow-x: auto; }
.no-menu #g .smart-tree-main-container > * { min-width: fit-content; }
.no-menu #g [level='1'] span:before,
.no-menu #g [level='1'] span:after { display: none !important; }
.no-menu #g [level] .smart-tree-item-label-container { transform: rotate(180deg); padding: 0 !important; min-height: var(--nmw) !important; padding-left: 1rem !important; }
.no-menu #g [level] .smart-tree-item-label-container span { min-width: fit-content; }
.no-menu #g :not([level='1']) > .smart-tree-item-label-container { display: none; }
/* Menu - collapsed Sites and Groups */
/**/
/**/
/**/
#menu-toggle { cursor: pointer; } :root { --nav-icon-scale: 1.4; }
nav.side li i { transform: translateX(-.4rem) scale(var(--nav-icon-scale)); }
.navbar i { transform: scale(var(--nav-icon-scale)); }
body[group-level] .navbar .smart-breadcrumb-item-label:before,
body[group-level] .navbar .smart-breadcrumb-item-label:after { transform: scale(var(--nav-icon-scale));
display: inline-block; left: 0; margin-right: -.4rem; display: none;
}
-body[group-level] .navbar .smart-breadcrumb-item-label { transform: translateY(.3em); }
smart-menu-items-group i[x] { font-size: 20px; }
smart-menu-items-group[label*=device-select] > div > div > span,
smart-menu-items-group[label*=device-detail] > div > div > span,
smart-menu-items-group[label*=user] > div > div > span { height: 2em; width: 2em; display: flex; justify-content: center; align-items: center; }
[render=home] main { display: block; }
main table { width: 0 !important; }
tr.device { margin: .4rem 0; }
[render=home] smart-tab-item:first-child > .smart-container { padding: 0; }
/**/
/**/
[tree-level] .smart-breadcrumb-item:first-child { display: none; }
[group-level] .smart-breadcrumb-item:first-child { transform: translateX(.9em) !important; }
.smart-breadcrumb-item:last-child i { margin-right: .3rem; }
tr.host [label=Model]:before { content: "KE2"; }
tr.host [label=Host]:before { font-weight: 900; }
[label=Host]:before { content: var(--fa-router); --fa-router: "\f8da"; }
td[label=Latency]:after { content: "ms"; }
[label=Host]:empty { opacity: .3; } [label=Host]:empty:after { opacity: unset !important; content: " Direct" !important; }
[label=Remote]:before { content: var(--fa-globe); --fa-globe: "\f0ac"; }
[label=MAC1]:before { content: var(--fa-microchip); --fa-microchip: "\f2db"; font-weight: 900; }
[label=EdgeCount]:after { content: var(--fa-tablet-rugged); --fa-tablet-rugged: "\f48f"; font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands'; font-size: smaller; font-weight: bold; }
bus::before { font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands'; content: var(--bus-icon); } bus:not([active]):before { opacity: .3; }
bus[name=serial] { --fa-network-wired: "\f6ff"; --bus-icon: var(--fa-network-wired); }
bus[name=usb] { --fa-bluetooth: "\f293"; --bus-icon: var(--fa-bluetooth); }
bus + bus { margin-left: .4em; }
tr.device[transport=XPort] [label=Host]:empty { opacity: 1; }
tr.device[transport=XPort] [label=Host]:empty:before { content: var(--fa-server) !important; --fa-server: "\f233"; }
tr.device[transport=XPort] [label=Remote]:after,
tr.device[transport=XPort] [label=Host]:empty:after { content: "pipeline" !important; opacity: .3; }
[conn-detail='0'] td[label=Remote][value='127.0.0.1'],
[conn-detail='0'] td[label=Host]:empty { _display: none !important; }
[label] shin-ip { display: unset; --shin-ip-elem-display: inline; }
/**/
/**/
body:not([owner]) [\+owner] { display: none !important; }
/**/
/**/
#menuToggle { --mmr: 0; }
:is(smart-menu-item,smart-menu-items-group) i.fad, i[fix].fad { width: 1.2em; margin-right: var(--mmr, .4em); text-align: center; }
#notesMenu > .smart-menu-item-label-container > .smart-menu-item-label-element > span {
display: inline-block; padding-left: .4rem; width: 3.36rem; xbackground-color: red;
}
#mntab .smart-tab-label-text-container .fa-sticky-note { -visibility: hidden; }
#notesMenu { transform: translateX(1px) translateY(1px) scale(.7);
left: calc(var(--side-width) + 6.6rem); width: var(--ts); top: var(--ts); pointer-events: none; -background-color: rgb(255 0 0 / 19%);
display: none;
}
.p-comm { display: none; }
#noteCount, #commCount { left: 2.51rem; width: 1.32rem; text-align: center; position: absolute; top: .9rem; color: var(--fa-primary-color); font-size: x-small; }
#noteCount { left: .8rem; width: 1.3rem; }
[label=MAC1][value*=\:COM]:before { --fa-network-wired: "\f6ff"; content: var(--fa-network-wired); }
tr.device[mac*=\:COM] [label=IP1] { visibility: hidden; }
smart-menu#DR { width: 10em; height: auto; z-index: 4 !important; }
img#DRPI {object-fit: contain;--is: 7.5em;width: var(--is);height: var(--is);
position: relative;container-type: size;
&::after {
outline: 1px solid black;
outline-offset: -1px;
position: absolute;
inset: 0;
content: 'missing\Aimage';
text-align: center;
white-space: pre;
display: grid;
place-items: center;
background: #f5f5f5;
font-size: 20cqmin;
}
}
/**/
/**/
smart-menu#AI { width: 14em; height: auto; z-index: 4 !important; }
/**/
/* do not display Sites level from side menu (JS code still depends on subtree indices) */
#T [level='1'] > .smart-tree-item-label-container > .smart-arrow-down { visibility: hidden !important; }
#T [level='1'] > .smart-tree-item-label-container { display: none; }
body:not(.no-menu) #T [level='2'] > .smart-tree-item-label-container { transform: translateX(-.7em); width: calc(100% + 1.4em); }
body:not(.no-menu) #T [level='3'] .smart-tree-item-label-element { transform: translateX(-2em); }
/* do not display Sites level from side menu (JS code still depends on subtree indices) */
/* Alarms Tab Grid */
:root { --ag-page-margin: 5px; --ag-margin-top: 2.8em; --smart-margin-size: var(--ag-page-margin); }
#ag { height: 100%; width: auto; }
#control smart-drop-down-list { width: auto; height: 2.1rem; }
.export .smart-drop-down i.fad { display: inline-block; width: 1.2em; text-align: center; }
.export i { --fa-primary-color: ; }
/* Alarms Tab Grid */
/* Note Scopes */
body[sites=multiple] #mntabTabLabelContainer1 { display: none; }
body[sites=multiple] td[label=Notes].web { display: none !important; }
td[label=Notes].web {
display: var(--te-display) !important;
width: auto !important; align-content: center;
text-align: left; font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands', sans-serif;
white-space: pre; font-weight: 900;
background-color: var(--wrn-bg-color);
border-color: var(--wrn-bd-color);
color: var(--wrn-fg-color); cursor: pointer;
}
body[sites=single] td[label=Notes].web::after { content: ' ' '\f4a4'; opacity: 1; }
#notes, #ag { margin-top: var(--ag-page-margin); --smart-access-site-div-margin-inline-end: -.4em; }
#notes smart-access-device,
#notes smart-access-group { margin-left: .2em; font-family: monospace; }
#notes smart-access-site::part(host),
shin-comment smart-access-site::part(host) { display: none; }
shin-comment { line-height: 2em; }
shin-comment smart-chip { display: block;
--smart-primary: var(--snd-bg-color);
color: var(--snd-fg-color) !important;
border: 1px solid var(--snd-bd-color);
} #note:not([index]) smart-button.note-remove,
body:not([tree-level]):not([group-level]) smart-button.note-remove { display: block !important; }
smart-access-device:before,
smart-access-group:before { content: var(--fa-layer-group); --fa-layer-group: "\f5fd"; margin-inline-end: .5em; font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands'; font-weight: 900; }
smart-access-device:after,
smart-access-group:after { content: attr(name); font-family: monospace; }
smart-access-device:before { content: url('//cdn.blue/{fa}/svgs/duotone/tablet-rugged.svg'); display: inline-block; width: 1em; vertical-align: -10%; }
smart-access-device:after { content: attr(mac-loc); }
#notes smart-grid-cell[template] .smart-label { padding-left: 7px; padding-right: 2px; }
shin-comment[new] > .shin-comment-content {
background-color: var(--postit-color);
background-color: var(--wrn-bg-color);
border: 1px solid var(--wrn-bd-color);
}
/* Note Scopes */
body[render=alerts] #F,
body[render=user] #F,
body[render=home]:not([mntab='0']) #F { -display: none !important; opacity: .3; cursor: not-allowed; --pe: none; }
#F { pointer-events: var(--pe); --c: black; --smarxt-border: var(--c); } #F::after { opacity: 1; }
/* Table View */
body.table-dash .host [label=Serial],
body.table-dash .host [label=USB] { display: table-cell !important; }
body.table-dash .host [label=Local],
body.table-dash .host [label=CommitTime],
body.table-dash .host [label=Model] { display: none !important; }
body.table-dash div.type { margin: 0 .4em; display: flex; flex-direction: column-reverse; }
body.table-dash div.type:not(:first-of-type) { margin-top: 1.4em; }
i[x].fa-bars { font-size: 24px; }
#menu-toggle { visibility: hidden; }
:root {
--db-font: 'Font Awesome 5 Pro', sans-serif;
}
div.type[SN]:after { content: attr(SN) ' (' attr(count) ')'; margin-block-end: .2rem; margin-inline-start: .2rem; fsont-weight: bold; font-family: var(--db-font); }
div.type[SN='']:after { content: 'unknown'; opacity: .5; }
#devMenu { display: fixed; bottom: 0; }
#devMenu .smart-menu-items-group-arrow { display: none; }
.device-view-control:hover { z-index: 1; }
body:not([render=home]) .device-view-control,
body:not(:is([mntab='0'],[mntab='4'])) .device-view-control { display: none; }
body.table-dash tr.type.host [label=CommitTime] { display: none !important; }
body.table-dash [label]:not([label=IP1]):not([label=Serial]):not([label=USB]):not([label=MAC1]):before { display: none; }
:root{ --type-marker: ""; }
tr[mac^=BLE] { --fa-bluetooth: '\f293'; --type-marker: var(--fa-bluetooth) ' '; }
tr[mac*=COM] { --fa-network-wired: "\f6ff"; --type-marker: var(--fa-network-wired) ' '; }
tr[mac*=COM] { --fa-network-wired: "\f6ff"; --type-marker: var(--fa-network-wired) ' '; }
td[label=L1]:after { content: var(--type-marker) var(--loc_mac) !important; font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands', sans-serif !important; color: var(--prm-fg-color) !important; opacity: 1 !important; }
[l2m] td[label=L1]:after { opacity: .5 !important; }
[conn-detail='1'] td[label=L1]:after { content: var(--loc) !important; }
body[edge-detail='1'] #connToggle { display: none; }
body[conn-detail='1'] #edgeToggle { display: none; }
body.table-dash td[num] { xtext-align: right; }
#navMenu { background-color: transparent; width: 100%; }
smart-menu-items-group.top-right { position: fixed; right: 0; }
#menuToggle { position: fixed; left: 0; }
body:not([render=home]):(not[render=health]).no-menu { --side-width: 0; }
body.table-dash
tr.device[notes]:after {
position: relative; float: left; height: 0; top: 0 !important; left: 0 !important;
transform: translate(4.5rem, -1.2rem);
text-align: left; font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands', sans-serif; font-weight: 900;
content: attr(comments) ' ' var(--fa-comment-alt); --fa-comment-alt: "\f27a";
white-space: pre; display: inline-block;
opacity: 1; padding: .2em; margin: -.2rem;
left: -1.4em; border: 1px solid; border: none;
color: var(--wrn-fg-color); font-size: 1em;
}
body.table-dash tr.device.host[notes]:after { transform: translate(2rem, .1rem) !important; }
@media (min-width: 500px) {
body.table-dash table { table-layout: fixed; width: 100% !important; }
col { width: 20em !important; }
body.table-dash td {
overflow: hidden !important;
text-overflow: ellipsis;
}
body.table-dash th { white-space: pre; }
}
main th { text-transform: capitalize; }
/* toasts */
.toast {
max-width: calc(100vw - .7em); cursor: cell; opacity: 1 !important;
padding-bottom: 1.5em; border-radius: var(--smart-border-radius); font-weight: bold;
}
.push.toast .smart-toast-item-icon:after {
font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands';
text-align: center; line-height: 1.6em;
--smart-icon-mail: var(--fa-browser) '\A' var(--fa-bell); --fa-browser: "\f37e"; --fa-bell: "\f0f3";
}
.plan.toast .smart-toast-item-icon:after {
font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands';
text-align: center; line-height: 1.6em;
--smart-icon-mail: var(--fa-tasks) '\A' var(--fa-bell); --fa-tasks: "\f0ae"; --fa-bell: "\f0f3";
}
.smart-toast-item-header { min-height: 3em; }
.push.toast { border: 1px solid var(--info-bd-color); background-color: var(--info-bg-color); color: var(--info-fg-color); }
.plan.toast { border: 1px solid var(--wrn-fg-color); background-color: rgba(255, 243, 205, 1); color: var(--wrn-fg-color); }
.smart-toast-item-close-button { transform: scale(2) translate(-.1em, .1em); }
/* toasts */
/* hosts */
tr.host [label=Model] { color: var(--drk-bd-color); }
tr.host.device {
--hst-bg-color: #666; --prm-bg-color: var(--hst-bg-color);
--hst-bd-color: #555; --prm-bd-color: var(--hst-bd-color);
--hst-fg-color: #eee; --prm-fg-color: var(--hst-fg-color);
background-color: var(--hst-bg-color);
border-color: var(--hst-bd-color);
color: var(--hst-fg-color);
}
#DR[data-info=true] .devData { display: none; }
div.host.type[SN='']:after { content: 'KE2 Edge Manager'; opacity: 1; }
body.table-dash txd[label=BUS] { --te-display: none !important; }
td[label$=BUS],
td[label$=Count] { text-align: var(--host-num-text-align); }
.host > .web[label=UserButton] { --te-display: flex; }
body.table-dash { --host-num-text-align: right; }
_td { outline: 1px solid; }
_tr.host td:before { content: attr(label); display: block !important; }
/* hosts */
/* site groups */
group:hover { --gl: rgb(235, 235, 235); }
group[type=site-group]/*:not([unnamed])*/:hover { --gl: rgb(220, 220, 235); }
/*group[type=site-group][unnamed]:hover { --gl: rgb(220, 220, 220); }*/
group { --gl: rgb(230, 230, 230);
background: linear-gradient(180deg, var(--gl) 0%, rgba(255,255,255,1) 100%);
border-radius: var(--smart-border-radius);
}
group[type=site-group] { --gl: rgb(240, 240, 250); }
body.table-dash { --gr-padding-bottom: .3rem; }
group { display: flex; flex-direction: column; _border: 1px solid; _outline: 1px solid #eee; padding-bottom: var(--gr-padding-bottom); }
group { padding-top: 2em; position: relative; flex-grow: 1; boxx-shadow: inset 0 0 3px #ccc; }
group[type=site] { --icon: '\f1ad'; margin: .2em; }
group[type=site-group] { --icon: '\f247'; }
group-edit { cursor: pointer; }
group-header {
display: flex; --tdghp: .5em;
justify-content: space-between;
position: absolute; width: 100%;
top: .6em; padding: 0 var(--tdghp);
}
group[type=site-group] group-name { cursor: text; }
group-share:empty { display: none; }
group-count::before,
group-share::before,
group-name::before {
white-space: pre; display: block;
font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands';
font-weight: 900;
content: var(--icon);
}
group-count::before { --icon: '\f48f'; }
group-share::before { --icon: '\f1e0'; }
group-share[i]::before { transform: scale(-1); }
group-share:not(:hover) { opacity: .5; }
group-share:not(:hover) > user { display: none; }
group-share:not(:hover)::after { content: '(' attr(count) ')'; }
group-share > user::before { content: attr(name); }
group-share > user:not(:only-child):not(:last-child)::after { content: ';'; }
group-name::after { content: attr(value); }
group-name[type=site]::after { content: attr(value) ' (' var(--edges) ')'; }
group[type=site-group] { position: relative; --sp: ' '; --gn-left: 1.6rem; --ms: 8em; min-width: var(--ms); min-height: var(--ms); margin: .4em; }
group[type=site] { position: relative; --gn-left: 1.8rem; }
group[unnamed]:before { z-index: 1; top: .5em; left: .4em; }
group[unnamed]:after { top: .7em; left: .8em; }
group[unnamed] group-name { opacity: 0; }
group[unnamed]:before,
group[unnamed]:after { opacity: 1; -webkit-text-stroke: 1px var(--smart-background-color); color: white;
content: '\f2fa'; font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands'; position: absolute; font-weight: 900;
transform: scale(.8); display: var(--gu-display);
}
body[group-level] { --gu-display: none; }
/*group[type=site]:not(:hover) > group[unnamed]:empty { display: none; }*/
group[unnamed]:empty { position: absolute; top: 2em; left: 0; --ms: 2em; --io: 1; }
:root { --dt-bg: var(--smart-ui-state-active); --dt-fg: var(--smart-ui-state-color-active); }
[droptarget='1'] { background-color: var(--dt-bg) !important; color: var(--dt-fg) !important; }
group[droptarget='1'] { --gl: var(--dt-bg) !important; color: var(--dt-fg); }
group[droptarget='1']:afkter { pointer-events: none; cursor: move !important;
content: 'move to ' attr(name); position: absolute; z-index: 9999999;
top: 0; bottom: 0; left: 0; right: 0; display: flex; justify-content: flex-start; align-items: flex-start;
}
body[group-level] group { display: contents !important; --fa-object-ungroup: ''; }
body[group-level] group-header { display: none; }
/* site groups */
/**/
th[label$=cap],
th[label$=press2],
th[label$=spress],
th[label=rtemp],
th[label=ctemp],
th[label=humidity],
th[label=sh],
th[label=aux1],
td[value='N/A'],
td[num] { text-align: var(--num-text-align); }
body.table-dash { --num-text-align: right; }
th:hover { background-color: #eee !important; }
th { cursor: n-resize; position: relative; }
th[sort] { --sort-color: var(--snd-fg-color); }
th[sort=az] { cursor: s-resize; --zt: 0;; }
th[sort=za] { cursor: ns-resize; --zt: -.6em; }
th::after {
content: ' ' var(--fa-sort); font-weight: 900; font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands';
position: absolute;
top: var(--zt); color: var(--sort-color, transparent);
bottom: 0; right: 0;
}
th[sort]:after { opacity: var(--sort-opacity, 1); }
th[sort=az] { --fa-sort: var(--fa-sort-up); --fa-sort-up: "\f0de"; }
th[sort=za] { --fa-sort: var(--fa-sort-down); --fa-sort-down: "\f0dd"; }
/**/
/**/
table { max-width: calc(100% - 1px) !important; } /* Windows horizontal scroll bar fix */
thead { font-weight: bold; }
/**/
i.fad { font-family: 'Font Awesome 5 Duotone' !important; }
/* device-select */
[label=PartNumber] { position: relative; overflow: visible !important;
background-color: var(--ds-em-bg) !important; cursor: var(--ds-em-cursor);
color: var(--ds-em-fg) !important; --c-r: -0em; opacity: 1 !important;
}
td[label=alrm1] { position: relative; overflow: visible !important; --c-r: 1.6em; cursor: var(--ds-em-cursor); }
body:not(.device-select) .fa-layer-plus { --fa-primary-color: #999; }
body.device-select {
--ds-em-bg: var(--snd-bg-color);
--ds-em-bd: var(--snd-bd-color); --ds-em-display: block;
--ds-em-fg: var(--snd-fg-color); --ds-em-cursor: pointer;
--ds-fp: var(--fa-primary-color);
--ds-opacity: .5;
--ds-fd: rgba(0, 0, 0, .1);
--ds-cursor: cell; --ds-st: 'Disable'; --ds-dgs-display: block;
--ds-pe: none; --ds-gh-bg: var(--prm-bg-color);
}
[\+ds] { display: var(--ds-dgs-display, none); }
[sel] { display: var(--ds-dgs-display, none); }
#dgsMenu { height: auto; width: min-content; }
tr.device:not([selected]) > :not([label=PartNumber]),
tr.device:not([selected]) > :not([label=alrm1]) { opacity: var(--ds-opacity); }
body.device-select tr.device[selected] { border-color: var(--ds-bd) !important; }
tr.device { cursor: var(--ds-cursor, pointer); }
td { poxinter-events: none; }
#deviceSelectionState:before { content: var(--ds-st, 'Enable'); }
group-edit { gap: .4rem; display: flex; }
group-edit { font-size: larger; }
body:not([render=home]),
body:not([mntab='0']) { --ds-dgs-display: none; }
#dragCount:not([size='0']):not([size='1']) { --jm: .2rem; }
#dragCount { top: unset; z-index: 1; font-size: xx-small; display: var(--ds-dgs-display, none);
--jm: 0rem; right: calc(6rem + var(--jm)); bottom: calc(5.6rem + var(--jm));
}
.drag-image { position: fixed; z-index: -1111; display: var(--ds-dgs-display, none); font-size: x-large; top: -20rem; }
.drag-image:before,
.drag-image:after {
position: absolute; z-index: 999; content: attr(size);
display: flex; justify-content: center; align-items: center;
background-color: var(--prm-bg-color);
color: var(--prm-fg-color);
border-color: var(--prm-bd-color); border: 2px solid;
border-radius: var(--smart-border-radius);
height: 4em; width: 2.8em; --off: .4em;
}
.drag-image:before { content: ''; }
.drag-image:not([size='0']):not([size='1']):after { transform: translate(var(--off), var(--off)); }
group-header:hover { background-color: var(--ds-gh-bg, transparent); }
/* device-select */
/*************/
/*Alert Plans*/
#ps { height: auto !important; }
#aps,
#dsm { height: auto; width: fit-content; z-index: 9999999999999999 !important; }
#apas { width: 100%; height: 100%; margin: .4em 0; }
#apasw { z-index: 99999; } #fw { z-index: 100000; }
#apas {
--smart-tree-lines-style: solid;
--smart-tree-indent: .8em;
--smart-tree-lines-color: black;
--smart-tree-lines-width: 1px;
}
#apas ::before { --smart-check-box-default-size: ; }
#apas smart-tree-items-group > ::after { margin-left: .9em; }
#apaswContent > div { padding-bottom: .4em; }
#psMenu { width: 100%; margin-bottom: .4em; }
#psMenu .smart-scroll-viewer-content-container { width: 100% !important; }
td[label=PartNumber] { cursor: default; }
body.device-select [label=PartNumber],
[label=alrm1] { cursor: context-menu !important; }
body.device-select tr.device:not([selected]) [label=alrm1] { cursor: default !important; pointer-events: none; }
#psMenu footer { padding: .4em; color: #999; background-color: var(--o); border-bottom: 1px solid var(--smart-border); }
#psMenu .smart-drop-down-container { margin-top: 0 !important;
backdrop-filter: blur(var(--fbw)) saturate(180%);
--o: white;
--t: rgb(255, 255, 255, 0);
background-color: var(--t) !important;
}
#ps { xopacity: .9; height: auto !important; } #ps [smart-id=details] { position: absolute; top: 2em; left: 3em; }
#psMenu .smart-drop-down-container > *,
#psMenu .smart-scroll-viewer-content-container { background-color: var(--t) !important; }
#apasw, #fw { --smart-window-default-height: 100%; }
/*#apas { --smart-border: var(--prm-bd-color); }*/
#apak { width: 100%; }
#apak .smart-tabs-content-section { display: none; }
#psMenuActionButton, [plan-label],
#apasw .smart-content-label { align-items: center; display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .4em; width: 100%; }
#apasw .smart-content-label smart-button { order: -2 !important; }
smart-button[plan] { cursor: pointer; font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands'; font-weight: 300; width: 4.5em; }
i[m] { pointer-events: none; }
#ps::before,
#ps::after { padding: var(--padding) 0; font-weight: 300; }
/*#ps::before { content: "Plan"; left: 2.43em; position: relative; display: block; }*/
/*#ps::after { content: "Selected Devices"; position: absolute; top: 0; right: 1.2em; }*/
plan { display: inline-flex; flex-direction: row-reverse; gap: .2em; }
cbx { font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands'; }
cbx[i]:before, /* indeterminate --fa-r*/
cbx[x]:before { content: var(--fa-calendar); --fa-calendar: "\f133"; } /* checked */ cbx[x]:before { font-weight: 400; }
cbx:before { content: var(--fa-calendar-check); --fa-calendar-check: "\f274"; }
cbx[emp] { color: var(--smart-error); position: relative; }
/*Alert Plans*/
/*************/
.fake-tab-content { position: relative; padding: 0 .2em; width: calc(100% - 1em); height: calc(100% - 9.8em); }
.fake-tab-content:before {
content: '';
top: -.3em;
position: absolute;
display: block;
xbackground-color: red;
border: 1px solid var(--smart-border);
width: calc(100% + .6em); left: -.3em;
border-bottom-left-radius: var(--smart-border-radius);
border-bottom-right-radius: var(--smart-border-radius);
height: calc(100% + 4em);
}
td[label=alrm1]:before { opacity: .5;
transform: scale(var(--nav-icon-scale));
content: '\f133'; font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands';
display: inline-block !important; margin-right: .4rem;
}
td[label=alrm1]:after { opacity: .5;
width: 1em; font-weight: bold;
position: absolute; left: .3em; top: .4em;
content: var(--plans, ''); text-align: center;
}
#mntab { height: 3em; }
.fake-tabs { grid-area: c; margin-top: 2.58em; }
body.no-upper-pane main { height: 100%; }
main { overflow-x: auto; justify-content: flex-start; align-items: flex-start; padding-block-end: 7rem; }
[fake-tab='0'] { display: var(--ft0d, none); font-size: smaller; }
[fake-tab='4'] { display: var(--ft4d, none); font-size: smaller; }
[fake-tab='1'] { display: var(--ft1d, none); padding: .4rem; }
[fake-tab='2'] { display: var(--ft2d, none); padding: .4rem; }
[fake-tab='3'] { display: var(--ft3d, none); }
[fake-tab] { position: relative; }
body[mntab='0'] { --ft0d: block; }
body[mntab='1'] { --ft1d: block; }
body[mntab='2'] { --ft2d: block; }
body[mntab='3'] { --ft3d: block; }
body[mntab='4'] { --ft4d: block; }
body:not([render=home]) .fake-tabs { display: none; }
[apas-selection-buttons] { gap: var(--padding); }
#apas smart-tree-items-group:not([selected]):not([indeterminate]),
#apas smart-tree-item:not([selected]) { --tree-bg-a: .2; --tree-bd-a: .8; }
#apasExpandAll { --fa-arrows-v: "\f07d"; --icon: var(--fa-arrows-v); --fa-s: 300; }
#apasSelectCri { --fa-check-square: "\f14a"; --icon: var(--fa-check-square); --fa-s: 700; color: rgba(var(--dng-fg-rgb), .8); }
#apasSelectAll { --fa-check-square: "\f14a"; --icon: var(--fa-check-square); --fa-s: 300; }
#apasClearAll { --fa-square: "\f0c8"; --icon: var(--fa-square); --fa-s: 300; }
#levelPrompt { height: auto; }
#levelPrompt .smart-content { flex: 1; }
#levelFrame:not([loaded]) { filter: blur(var(--fbw)) saturate(0); }
p[l-note] {
background-color: var(--suc-bg-color); border: 1px solid;
border-color: var(--suc-bd-color);
color: var(--suc-fg-color);
border-radius: var(--smart-border-radius);
vertical-align: middle !important;
}
:root {
--l-1: 'Basic';
--l-2: 'Advanced';
--l-3: 'Enterpise';
}
body[level] { --fa-credit-card: "\f09d"; }
body[level='1'] smart-menu-item[label$='Alerts …'] { filter: blur(.1rem); }
body[level='0'] #navMenu { z-index: 200 !important; }
body[level='0'] p[l-note] { display: none; }
body[level='-1'] { --main-block: var(--fa-credit-card) ' Start your SmartAccess subscription!\A\A Step 1: Click/tap anywhere on this page.\A Step 2: [ ADD ] new payment method.\A Step 3: [ ACTIVATE ] subscription. \A \A or \A\A Contact KE2 tech support: +1 636 266 0140'; }
body[level='0'] { --main-block: var(--fa-credit-card) ' Select your portal plan!\A\A 1. Click/tap here\A 2. Pick your plan\A 3. Hit [ GET STARTED ]\A 4. Hit [ Subscribe ]'; }
body[grant]:is([level='0'],[level='-1']) { --main-block: var(--user, '') '\A \A This account is locked! \A Please contact support.'; }
body[level='-1'] main::after,
body[level='0'] main::after { text-aligxn: center;
font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands', system-ui, sans-serif; font-weight: 300; z-index: 10 !important;
position: absolute; top: -5.3em; xtop: -8.7em; bottom: 0; left: calc(0em - var(--side-width)); right: 0; opacity: 1; border-radius: var(--smart-border-radius);
display: grid; place-items: center; z-index: 1; white-space: pre; border-radius: 0; --fbw: 1rem;
backdrop-filter: blur(var(--fbw)) saturate(180%); background-color: rgba(0, 0, 0, .7); cursor: pointer; color: white;
content: var(--main-block); font-size: 1rem; top: -7.3rem;
backface-visibility: hidden; z-index: 100 !important;
}
body[level='0'] main::after { background-color: rgba(0, 0, 0, .2);
left: 0; backdrop-filter: blur(1.5px); border-radius: 0; top: -4.3em;
color: black; --loading-shadow: white; font-weight: bold;
text-shadow: -1px -1px 0 var(--loading-shadow), 1px -1px 0 var(--loading-shadow), -1px 1px 0 var(--loading-shadow), 1px 1px 0 var(--loading-shadow);
}
/* tr.device[lic='0'],
tr.device[lic='0'] * { poixnter-events: none !important; }
tr.device[lic='0']::before {
font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands', system-ui, sans-serif; font-weight: 300;
position: absolute; top: var(--l-0-t, 3.9rem); bottom: var(--l-0-b, 0); left: var(--l-0-l, 0); right: var(--l-0-r, 0); opacity: 1; border-radius: var(--smart-border-radius);
display: grid; place-items: center; z-index: 1; white-space: pre; --fbw: 1rem;
xbackdrop-filter: blur(var(--fbw)) saturate(180%); background-color: oklch(0.91 0.04 249.4) !important; cursor: not-allowed; coxlor: white;
backface-visibility: hidden;
pointer-events: none !important;
z-index: var(--l-0-z-i, 2);
}
tr.device[lic='0']:not([loss])::before {
content: var(--fa-lock) ' Unlicensed'; --fa-lock: "\f023";
}
tr.device[lic='0'][loss]::before {
content: var(--fa-cloud) ' Disconnected'; --fa-cloud: "\f0c2";
}
tr.device[lic='0'][loss]::before { bottom: 2.2rem; padding-top: 2.2rem; background-color: oklch(0.95 0 0) !important; }
body.table-dash {
--l-0-t: 0;
--l-0-l: 0;
--l-0-r: 0;
--l-0-b: 0;
--l-0-z-i: 1;
}
body:not([level='3']) tr.device.host::after, */
[sites=multiple]:not([group-level]):not([level='2']):not([level='3']):not([level='0']) group[type=site]:not(:nth-child(2))::after {
font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands', system-ui, sans-serif; font-weight: 300;
position: absolute; top: 2rem; bottom: 0; left: 0; right: 0; opacity: 1; border-radius: var(--smart-border-radius);
display: grid; place-items: center; z-index: 1; white-space: pre; --fbw: 1rem;
backdrop-filter: blur(var(--fbw)) saturate(180%); background-color: rgba(0, 0, 0, .7) !important; cursor: not-allowed; color: white;
content: var(--fa-lock) ' ' var(--l-2) ' Plan\AView Multiple Sites'; --fa-lock: "\f023";
backface-visibility: hidden;
}
body[grant] main::after { left: calc(0px - var(--side-width)); top: -8.7em; --fbw: 1rem !important;
backdrop-filter: blur(var(--fbw)) saturate(0);
}
group-edit { position: absolute; right: .4rem; }
body[level='1'] group[type=site] group-edit > [srt] { display: none; }
body[level='1'] smart-tree-items-group[label*=fa-building] + smart-tree-items-group[label*=fa-building] { filter: blur(.1rem); pointer-events: none; }
body:not([level='3']) tr.device.host::after {
content: var(--fa-lock) ' ' var(--l-3) ' Plan' var(--nlc, '\A') 'View Edge Managers'; --fa-lock: "\f023"; top: 3.9rem;
}
body.table-dash:not([level='3']) tr.device.host::after {
--cw: calc(100% / 8); top: 0; left: var(--cw);
min-width: calc(100% - var(--cw)); --nlc: ' / ';
}
/* Reports h s c */
.fake-tabs { height: 100%; -background-color: green; }
[fake-tab] { height: calc(100% - 2.6em); -outline: 1px solid red; -background-color: red !important; }
#notes,
#ag { height: calc(100% - 2.8em) !important; }
/* Reports */
[fake-tab] {
--w: calc(100vw - var(--side-width));
max-width: var(--w);
}
#DR smart-menu-item:not([d-s]) { display: var(--ds-pe); }
[sn='kmc-4-plug'] [label=current],
[sn='kmc-4-plug'] [label=power],
[sn='kmc-4-plug'] [label=voltage] { display: var(--te-display) !important; }
[sn='kmc-4-plug'] [label=alrm1] { display: none !important; }
[label=smode] { position: relative; }
[sn='kmc-4-plug'] [label=smode]::before { content: 'âš¡'; position: absolute; right: 0; }
/* performance optimizations */
.smart-drop-down-container { min-width: 100% !important; }
body > .smart-drop-down-container { min-width: unset !important; width: 20rem !important; }
group,
table { contain: content; }
tr.device { contain: layout paint; }
smart-grid,
smart-window { contain: content; }
nav.side { contain: strict; }
/* performance optimizations */
group[unnamed]:not([count]) { display: none; }
group-header { --fa-primary-color: ; }
i[xs],
i[xg] { --fa-secondary-opacity: .2; }
.host { --fa-primary-color: white; }
thead { user-select: none; }
/* CUSTOM SORT (main|site|edge) */
td[label=PartNumber], td[label=L1] { cursor: ew-resize; }
body[group-level] i[srt] { display: none; }
body[filter] i[srt] { opacity: .1; pointer-events: none; }
smart-window footer smart-button.error { --fa-primary-color: ; }
#cs footer smart-button.flat.primary { display: none; }
#csRM { z-index: 99000009 !important; width: fit-content; height: auto; }
#cs, #eg { --smart-window-default-height: 100%; z-index: 9999; }
#csContent, #egContent { height: 100%; }
#css, #egs { width: 100%; flex: 1; --smart-font-family: monospace; }
#css .smart-content-label::before { white-space: pre; opacity: var(--fa-secondary-opacity-default); --fa-sort: "\f0dc"; content: var(--fa-sort) ' ' !important; font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands'; font-weight: 900; }
i[srt] { filter: saturate(0); }
[xm] { position: absolute; z-index: 2; top: var(--xm-top, -1.5em); right: .7em; font-size: 12pt; }
[xk] { position: absolute; top: .15em; right: 1.35em; font-size: 12pt; }
body:not(.no-upper-pane) { --xm-top: -1em; }
:root { --cs-pc: white; --cs-po: 1; --cs-sc: black; --cs-so: 1; --n-cs-so: .2; }
#userMenu i[x] {
width: 1.5rem;
text-align: center;
}
#userMenuContainer { left: calc(-100% - 0rem); margin-left: unset; }
i[xm]:hover,
i[xs]:hover,
i[xg]:hover,
i[xk]:hover { --fa-primary-color: white !important; --fa-secondary-color: black !important; }
i[srt][xm] { display: var(--mcsds); --fa-primary-opacity: var(--mcspo, var(--n-cs-po)); --fa-secondary-opacity: var(--mcsso, var(--n-cs-so)); --fa-primary-color: var(--mcspc); --fa-secondary-color: var(--mcssc); }
i[srt][xs] {-display: var(--scsds); --fa-primary-opacity: var(--scspo, var(--n-cs-po)); --fa-secondary-opacity: var(--scsso, var(--n-cs-so)); --fa-primary-color: var(--scspc); --fa-secondary-color: var(--scssc); }
i[srt][xg] {-display: var(--gcsds); --fa-primary-opacity: var(--gcspo, var(--n-cs-po)); --fa-secondary-opacity: var(--gcsso, var(--n-cs-so)); --fa-primary-color: var(--gcspc); --fa-secondary-color: var(--gcssc); }
i[srt][xk] { display: var(--kcsds); --fa-primary-opacity: var(--kcspo, var(--n-cs-po)); --fa-secondary-opacity: var(--kcsso, var(--n-cs-so)); --fa-primary-color: var(--kcspc); --fa-secondary-color: var(--kcssc); }
body[tree-level='2'] i[srt][xs] { display: none; }
group[type=site][cs] { --scspc: var(--cs-pc); --scssc: var(--cs-sc); --scsso: var(--cs-po); --scspo: var(--cs-so); }
group[type=site-group][cs] { --gcspc: var(--cs-pc); --gcssc: var(--cs-sc); --gcsso: var(--cs-po); --gcspo: var(--cs-so); }
div.type.edge[cs] { --kcspc: var(--cs-pc); --kcssc: var(--cs-sc); --kcsso: var(--cs-po); --kcspo: var(--cs-so); --sort-opacity: .05; }
main[count='1'] { --mcsds: none; }
group[type=site][count='0'],
group[type=site][count='1'] { --scsds: none; }
group[type=site-group][count='1'] { --gcsds: none; }
div.type.edge[count='1'] { --kcsds: none; }
group-header + div.type.edge { margin-top: .2em; }
/* CUSTOM SORT */
/* Sysco */
td[label]:not([label=UserButton]) { position: relative; }
td[label=rtemp] { background-color: #fdfdfd; overflow: visible !important; }
td[label=rtemp]::before {
content: '⊙ ' var(--RTEMP); --fa-sort: "\f0dc"; font-weight: 400;
position: absolute; color: salmon; padding: .2em;
display: block !important; line-height: 2.6;
font-size: 30%; opacity: .6; bottom: 0; top: 0;
}
body.table-dash td[label=rtemp]::before {
font-size: unset; line-height: 2;
transform: translateX(-.9em) scale(.6);
}
/* Sysco */
body[filter] i[srt] { display: none; }
.obs { -outline: 1em solid red; -outline-offset: 2em; }
smart-window:not([opened]) { display: none !important; }
/* CONSISTENCY */
:root { --RIW: 9000; }
main.bin,
tr.device.bin > td:not([label=L1]):not([label=PartNumber]):not([label=UserButton]):not([label=Model]):not([label=Host]):not([label=Site]):not([label=Notes]) {
/*filter: blur(min(calc(var(--age) / var(--RIW) * .1px), 1em));*/
-filter: brightness(.7);
}
[label=alrm1] { cursor: cell !important; }
/* CONSISTENCY */
/* EYECANDY */
tr.device { box-shadow: var(--tw-shadow); }
tr.device:hover { box-shadow: var(--tw-shadow-sm); }
tr.device { transition: all .2s; transition-timing-function: ease-in-out; }
tr.device:hover { transform: translateY(-.1em); }
/* EYECANDY */
/* SITE PAGES */
[k][count=0],
input.sitePage + input.sitePage { margin-inline-start: .2rem; }
group-view { z-index: 0; }
group[type=site] { padding-top: var(--padding); }
group[type=site] > group-header { position: sticky !important; top: 0rem; z-index: 1; --c: 235; background-color: rgba(var(--c), var(--c), var(--c), 1); }
group[type=site-group] { padding-top: 0; }
group[type=site-group] > group-header {
--br: var(--smart-border-radius); border-top-left-radius: var(--br); border-top-right-radius: var(--br);
position: sticky !important; top: 1.2rem; --c: 245; z-index: 1; --bf: blur(.4rem) brightness(1.02); -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf); padding-top: .2rem; }
group[type=site-group][unnamed] > group-header { --bf: ; }
group-count,
group-share,
group-name { display: flex; gap: .2rem; }
group[type=site] > group-header { counter-reset: page; }
group[type=site] > group-header input { counter-increment: page; }
group-header input { -webkit-appearance: none; appearance: none; cursor: pointer; }
input[type=radio]:checked { --bg: var(--smart-ui-state-selected); --fg: var(--smart-ui-state-color-selected) }
group[type=site] > group-header input::after {
display: block;
border-radius: 1rem;
width: 1rem;
text-align: center;
font-size: 6pt;
color: var(--fg);
background-color: var(--bg, white);
border: 1px solid var(--smart-border);
content: counter(page);
}
input.sitePage:only-child { display: none; }
div[k].edge { counter-reset: device; }
tr.device { counter-increment: device; }
body.table-dash tr.device::after { xcontent: counter(device); width: 2rem !important; display: block; text-align: right; }
/* SITE PAGES */
/* INTRO */
smart-tooltip p + p { margin-top: 1em; }
smart-tooltip ul:last-child { margin-bottom: 0; }
[\#] strong { display: block; }
html[intro] { cursor: not-allowed; }
html[intro] :not(smart-tooltip) { pointer-events: none !important; }
/*html[intro] main * { pointer-events: none !important; }*/
#introControl { pointer-events: initial !important; cursor: initial; }
#introControl * { pointer-events: initial !important; cxursor: pointer; }
[\#] { display: var(--ttd) !important; --mg: var(--padding); --pd: 2em; /*z-index: 3 !important;*/ }
:root[intro] [\#] > div > div { padding-left: var(--pd) !important; padding-right: var(--pd) !important; }
:root[intro] [\#]::before { content: attr(\#); position: absolute; font-weight: bold; background-color: yellow; color: black; width: 1em; text-align: center; border-radius: 1em; }
[\#][position]::before { top: .4em; left: .4em; }
[\#][position=right]::before { top: .3em; left: 1em; }
[\#][position=bottom]::before { top: .7em; left: .4em; }
smart-tooltip[visible] .smart-tooltip-content { opacity: 1; }
body[sites=multiple] [\#][selector=mntab] [requires=level] { display: none; }
[\#][selector=mntab] { left: calc(var(--side-width) + var(--mg)) !important; }
[\#][selector=mntab] > div > div::after { left: var(--mg) !important; }
[\#][selector=devMenu] { transform: translateY(-1.3rem); right: var(--mg); } /* dashboard charms */
[\#][selector=devMenu] > div > div::after { right: calc(var(--mg) * 5); left: unset !important; }
[\#][selector=splitter] { top: 27rem; left: calc(var(--side-width) + (100% / 2) - 10.3em); }
[\#][selector=splitter]::before { transform: translateY(.4rem); }
[\#][selector=menuToggle],
[\#][selector=userMenu] { top: var(--mg) !important; }
[\#][selector=menuToggle] > div > div::after,
[\#][selector=userMenu] > div > div::after { top: calc(var(--mg) * 1.5) !important; }
[\#][selector=notesMenu] > div > div::after { left: unset !important; right: 6em; }
[\#][selector=F] > div > div::after { left: unset !important; right: calc(var(--ts) + var(--ts) / 2) !important; }
[\#]:not([selector]) { width: 18.4rem; left: calc(var(--side-width) + var(--mg)); top: 7.8rem; }
[\#] table { --ds-em-fg: #212529; width: var(--dw); }
[\#] td { text-align: center; margin: 0 .2rem; }
[\#] smart-tooltip { --y: 6rem; --x: 2rem; transform: translateY(var(--y)) translateX(var(--x)); }
[\#] [label=UserButton] { display: flex; justify-content: space-around; width: 100%; transform: translateY(.1rem); }
[\#] smart-tooltip > div > div { background-color: #ccc !important; color: black !important; }
[\#] smart-tooltip i { width: 1rem; }
[\#] smart-tooltip[selector=tut-plan][distant] { --x: 12.4rem; }
[\#] smart-tooltip[selector=tut-srv] { --y: 4rem; }
[intro-target] { outline: 5px solid #777; --d: 2px; box-shadow: var(--tw-shadow-xl); -z-index: 999999999999 !important;
--s: 0;
--ds-sm: rgba(var(--s), var(--s), var(--s), 0.16) 0px 0px 1px;
filter:
drop-shadow(0 1px 1px hsl(0deg 0% 0% / 0.075))
drop-shadow(0 2px 2px hsl(0deg 0% 0% / 0.075))
drop-shadow(0 4px 4px hsl(0deg 0% 0% / 0.075))
drop-shadow(0 8px 8px hsl(0deg 0% 0% / 0.075))
drop-shadow(0 16px 16px hsl(0deg 0% 0% / 0.075))
drop-shadow(0 32px 32px hsl(0deg 0% 0% / 0.075))
drop-shadow(var(--ds-sm))
}
/*[intro-target], [intro-target] * { pointer-events: all !important; }*/
#introControl { top: unset; bottom: var(--padding); left: calc(var(--side-width) + var(--padding)); z-index: 9999999999999999999999999 !important; }
#introControl smart-button:last-child { margin-left: var(--padding); }
/* INTRO */
/* EMPTY */
body { --upx: calc(var(--health-height) + 6rem); }
body.no-upper-pane { --upx: calc(var(--header-height) + 4rem); }
#splitter:only-child::after {
cursor: cell; font-weight: 100; font-style: italic;
transform: translate(-.4rem, -1rem);
content: ''; font-family: system-ui, sans-serif;
display: grid; place-items: center;
background-size: 8em;
background-image: url(//cdn.blue/undraw/undraw_map_1r69.svg?2);
background-repeat: no-repeat;
background-origin: content-box;
background-position: center;
width: calc(100% + 2 * var(--padding));
height: calc(100vh - var(--upx, 0em));
line-height: 8em;
content: '\A add your sites'; white-space: pre;
}
/* EMPTY */
/* KARTRA */
div > [rel=TvnX5xSwIYXc] { display: none; left: calc(var(--side-width) + var(--padding)); transform: scale(.8) translate(-1rem, 1rem); }
/* KARTRA */
/**/
.smart-breadcrumb-item:first-child:not(:only-child) { display: none !important; }
#apas::before { content: 'Last Week #'; color: var(--dng-fg-color); opacity: .5; white-space: pre; text-align: right; position: absolute; top: 1em; right: 1em; z-index: 1111; }
/**/
#SCWS, #SCWX { z-index: 99999; }
:is(#SCWX, #SCWN, #SCWS, #SCAL) smart-check-box { display: none; }
-.smart-grid-column-menu { height: 20em !important; }
.ttt i { width: 1.4em; text-align: center; --fa-primary-color: white !important; --fa-secondary-opacity: .7; --fa-secondary-color: #aaa; }
.ttt { border-collapse: collapse; margin: .5em 0; -min-width: max-content; white-space: pre; }
.ttt th,
.ttt td { padding: .4rem; text-align: left; background-color: transparent; }
.ttt td { color: white; white-space: break-spaces; }
.usr { line-height: .8rem !important; text-align: right; display: block; transform: translateY(.1rem); }
.usr > domain { opacity: .4; }
/* r4 */
:root { --chrome-color: transparent; --pbg: white; }
nav.side, nav.navbar { --bg: transparent; background-color: var(--bg); --smart-surface: var(--bg); }
:root { --chrome-border: #eee; }
nav.navbar { border-bottom: 1px solid var(--chrome-border); }
nav.side { border-right: 1px solid var(--chrome-border); border-top: 1px solid white; z-index: 100; transform: translateY(-1px); }
#mntab .smart-tab-selected.smart-tab-label-container { --snd-bg-color: white; }
#mntab .smart-header { --smart-surface: #eee; transform: translateX(-.3rem); }
#mntab .smart-tabs-selection-bar { display: none; }
/* r4 */
a[href$=home] { background-color: var(--pbg); width: 20em; }
#splitter::before { transform: translateY(-.4rem) !important; }
#splitter { wid-th: var(--ts) !important;
left: calc(50vw - var(--ts, 0px) + var(--side, 0px));
}
#myd .smart-drop-down-container { width: auto !important; ; }
#myd { width: 100%; }
/**/
#APIDOC { height: auto; --smart-window-default-width: 30rem; wikdth: auto; lkeft:0; }
#APIDOC .smart-content > * { width: 100%; font-size: small; overflow-x: auto; }
#APIDOC pre { user-select: all; font-family: monospace;
background-color: var(--smart-surface);
margin-bottom: 1rem;
padding: var(--smart-button-padding);
border-radius: var(--smart-border-radius);
border: 1px solid; cursor: pointer;
border-color: var(--smart-border);
}
#APIDOC span:not([desc]) { color: red; display: inline-block; vertical-align: bottom; overflow: hidden; text-overflow: ellipsis; }
#APIDOC span:not(.location-hostname):not([desc]) { max-width: 3em; }
body.no-menu #lms,
body:not(.no-menu) .side > :not(#lms) { display: none; }
#mntab .smart-tabs-content-section { display: none !important; }
#menuToggle { border-right: 1px solid var(--chrome-border); transform: translateX(-.5px); cursor: ew-resize; }
body:not(.no-menu) #menuToggle { border-color: transparent; }
nav.side { background-color: white; }
#lms { --smart-border-radius: 0; }
body { xposition: fixed; overflow: hidden; }
body:not([render=home]) { --smart-ui-state-selected: ; --smart-ui-state-border-selected: transparent; }
/* report-range */
:root { font-family: system-ui; }
#SM { width: fit-content; transform: translateY(-100%); z-index: 1 !important; }
#SM smart-menu-item[checked] span { font-weight: bold !important; }
/*#SM smart-menu-items-group > * > .smart-menu-item-label-element::before { content: '\f333 '; white-space: pre; font-family: 'Font Awesome 5 Pro'; }*/
#SM smart-menu-items-group > * > .smart-menu-item-label-element::before { content: '📅 '; white-space: pre; }
body:not([report-range='Custom range'])
#cf { display: none; }
#cf { zoom: .5; width: auto; height: auto; min-height: unset; }
#cf .smart-calendar-body { padding: 2rem !important; margin: 0; }
#cf .smart-calendar-week-number { cursor: pointer; font-weight: bold; }
#cf .smart-calendar-week-number:not(:hover) { opacity: .2; }
#cf .smart-calendar-month-name { padding: 1rem; cursor: pointer; font-weight: bold; }
#cf .smart-calendar-week-number:hover,
#cf .smart-calendar-month-name:hover { background-color: #ddd; }
#cf .smart-calendar-cell:not([other-month]):not(.smart-visibility-hidden) { cursor: pointer; }
#cf .smart-calendar-months-container { gap: 1rem; justify-content: center; }
#cf .smart-calendar-month { margin-left: 0 !important; margin-right: 0 !important; }
@media (max-width: 770px) {
body.no-menu [fake-tab='3'] { padding-top: 3rem; }
body.no-menu #SM smart-menu-item[value='Custom range'] { display: none; }
}
@media (max-width: 948px) {
body:not(.no-menu) [fake-tab='3'] { padding-top: 3rem; }
body:not(.no-menu) #SM smart-menu-item[value='Custom range'] { display: none; }
}
/* report-range */
#otsk { background-color: #eee; user-select: all; padding: .4rem; border-radius: .4rem; }
#otsw { top: unset !important; bottom: 0; left: 0 !important; }
body[level='1'] #fw { --smart-window-default-height: 60rem; }
loss { font-size: .5em; display: grid; place-items: center; }
:root { --sub-display: none; }
:root[sub] [sub=''],
:root[sub*=dev] [sub=dev],
:root[sub*=sms] [sub=sms] { --sub-display: flex; }
:root[sub*=sms] [sub=-sms] { display: none !important; }
smart-menu-item[sub]:not([sub=-sms]) { display: var(--sub-display); }
[bold] { font-weight: bold; }
/**/ iframe[full] { height: calc(100dvh - 9rem); border-radius: var(--sl-border-radius-medium) var(--sl-border-radius-medium) 0 0; &.loading { opacity: 0; pointer-events: none; } }
sl-dialog[async]:has(iframe[full]) { p { display: contents; } &::part(body) { padding: 0; margin-block-end: -.35rem; } }
.sl-toast-stack { z-index: 100000 !important; }
group-view { scale: 1.5; translate: -1.75rem -.2rem; }
group-edit { translate: 0rem .125rem; }
.fa-sparkles { visibility: var(--ai, hidden); } :root[ai] { --ai: ; }
div[k]:not(:is([k='20302'],[k='21214'],[k='21402'],[k='21590'])) { --ai: hidden; }
#DR smart-menu-item:hover > .smart-menu-item-label-container { background-color: var(--smart-ui-state-focus); }
.sl-toast-stack { display: grid; justify-items: end; }
sl-alert::part(base) { max-width: max-content; }
/* ↓ root.dataset ↓ */
brand { z-index: 4; }
:root:has(#logo:focus) {
&[data-cache='-'] { --sw-cache: red; }
&[data-cache='+'] { tr.device:has(> td[label][title*="ecy"]) { --sw-cache: orange; } }
&:is([data-cache='+'],[data-cache='-']) {
#logo { --w: 5px; border-block-start: var(--w) solid var(--sw-cache, green); margin-block-start: calc(0px - var(--w)); }
tr.device:is([cache],[pn='21633'],[pn='21632']) { outline: 2px solid var(--sw-cache, green); }
}
}
/* ↑ root.dataset ↑ */
.type.edge[k='APEX?'],
tr.device[pn='APEX?'] { display: none; }
/**/ #logo:focus { outline: 1px dotted blue; }
[k^='ecy'] [label=humidity] { display: none !important; }
.sa-table {
table{border-collapse:collapse;width:100%}
td,th{border:1px solid white;padding:4px;background: black}
th{font-weight:bold; text-align:center;}
}
span[data-value=Default] { color: transparent !important; &::before { content: 'Summarized'; color: black !important; } }