:root { --te-display: block; }
main table  { border-collapse: collapse; white-space: nowrap; display: flex; justify-content: flex-start; }
main tr     { display: inline-block; margin: 0 .4em; background-color: var(--disabled-color); padding: .4em; border-radius: .25rem; }
main th, main td { display: var(--te-display); border: none !important; lxine-height: .4em; }
main tbody, main thead { display: inline-block; } main h2.type { display: none; }
main th  { background-color: var(--lgh-bg-color); text-align: right !important; }
main th[label=MAC1]  { background-color: var(--prm-bg-color); }
main thead:after { content: attr(count); display: var(--te-display); text-align: center; }
main tbody { overflow-y: hidden; overflow-x: auto; white-space: nowrap; text-align: center; }
main tbody { scroll-snap-type: x mandatory; } main tr { scroll-snap-align: start; }
main tbody { counter-reset: row; }            main tr { counter-increment: row; border: none; }
/*main tr:after { content: counter(row); display: block; color: var(--snd-fg-color); transform: translateY(.32rem); }*/
main thead tr:after { display: none; opacity: 1; z-index: -11111; background-color: white; border: 1px solid white; margin: -1px; color: transparent; }

[edge-detail='1'] main td:before { content: attr(label); opacity: .4; min-width: 3rem; text-align: left; float: left; }
[edge-detail='1'] main td { text-align: right; }

[label]:empty:after { content: var(--uc-ellipsis); opacity: .2; }

[render=home] main thead { display: none; } main tr { margin-bottom: .6rem; }
[render=home] main table,
[render=home] main tbody { display: contents !important; }
[render=home] main .type.edge > div { display: contents !important; }
[render=home] main div.type { margin: 0; display: flex; flex-flow: row wrap; vertical-align: top; }
[render=home] main div.type:first-child { margin-top: 1rem; }

[edge-detail='1'] div.type td { width: 16rem !important; }

div.type { display: contents !important; _background-color: red; justify-content: center !important; align-items: center !important;
  _display: flex !important; position: relative; _flex-flow: column !important; flex-wrap: wrap !important; width: fit-content !important;
}
div.type:before { display: none; }
div.type:before { top: 1em !important; right: -2em !important; width: 2.2em; position: absolute; z-index: 999999999 !important;
  --fa-columns: "\f0db"; content: var(--fa-columns) !important; font-weight: 900;
}

:root {
  --DEVTW: 8.4rem;
}
div.type td { width: var(--DEVTW) !important; text-overflow: ellipsis; overflow: hidden; }

[label=Site],
[label=alrm1] { margin: .2rem 0; padding: .4rem 0 !important; } x[label=smode] { margin: 0; padding-top: .6rem !important; }
[label=alrm1],
[label=smode] { font-weight: bold; }

/**/
td[gauged],
[label=EdgeCount],
[label=current],
[label=rtemp],
[label=compcap] :not([k='21367']),
[k='21367'] :is([label=spress]),
[k='21403'] :is([label=hpress]),
[k='21739'] :is([label=aux1]),
[k='33333'] :is([label=ActiveEnergyImport]),
[k='21969'] :is([label=spress]) { font-size: xx-large !important; font-weight: bold !important; color: var(--lgh-fg-color) !important; }
[k='33333'] :is([label=ActiveEnergyImport]) { font-size: large !important; }

[label=UserExpand] { visibility: hidden; }

[edge-detail] .edge [label=UserButton],
[edge-detail] .edge [label=UserExpand],
[edge-detail] .edge [label=PartNumber] { display: var(--te-display) !important; }

[conn-detail='1'] td[value*=\:COM]:after { content: attr(value); position: absolute; left: 0; right: 0; top: 3.7rem; font-size: smaller; }

[label=MAC1],        [label=Host]        { font-size: 12px; }
[label=MAC1]:before, [label=Host]:before { font-size: 13px; }

.xml[label]:not([label=rtemp]):not([label=L1])[num],
.xml[label]:not([label=rtemp]):not([label=L1])[value='N/A'] { font-weight: bold; font-size: larger; color: #bfbfc0; }

tr.device[draggable]:not(lic='0'):not([draggable=false]):before { opacity: .6; transform: scaleX(2); backkground-color: red; mxax-width: 50%;
  --fa-grip-lines: "\f7a4"; content: var(--fa-grip-lines); font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands'; font-weight: 900;
  position: absolute; top: -.24rem; left: 0; right: 0; display: flex; justify-content: center; align-items: center;
  left: 25%; right: 25%;
}

[render=home] main,
group {
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  display: flex;
}

#edgeToggle,
div.type:after { display: none; }
tr.device { background-color: var(--prm-bg-color); border-color: var(--prm-bd-color); }
colgroup { display: none; }

tr.device + tr.device { margin-inline-start: .2em; }

[label=Version] { font-weight: bold !important; }
[label=BUS] { font-size: larger; }

td[label=alrm1]:before {
  transform: scale(var(--nav-icon-scale));
  position: absolute; left: .4em; bottom: .6em;
  font-weight: 400;
}
td[label=alrm1]:after { position: absolute; left: .19em; bottom: .3em; width: 1.3em; top: .45em; _kcontent: "12"; }

td[label=Notes].web {
  position: absolute !important;
  order: -2 !important;
  left: unset; right: 0; top: -.1em;
  padding: 0 .2em;
  border-radius: var(--smart-border-radius);
  border: 1px solid !important;
}
tr.device:not(:hover) > td[label=Notes][cc='0'].web { --te-display: none; }
tr.device:not([plans]) { --ke2-plan-bg: ; }

[label=UserButton] { position: absolute; bottom: 0;  }

td[label=PartNumber]:empty { min-height: 2.211em; }
td.status.web[label=PartNumber]:empty::after {
  display: flex; justify-content: center; align-items: center;
  left: 0; right: 0; content: var(--mac); font-family: sans-serif;
  overflow: hidden;
}

[label=UserButton] { font-size: x-large; transform: translateY(-.2em); }
[label=UserButton] { xbackground-color: red !important; --te-display: flex; justify-content: space-between !important; }

/* CUSTOM SORT */
i[srt][xk] { display: none !important; }
/* CUSTOM SORT */

/* Sysco */
:root { --unit-ty: -.7em; }
td[label=rtemp]::before {
  left: 0; right: 0; margin: auto; width: fit-content;
  top: unset; line-height: 2; top: 0; bottom: unset;
  opacity: .5; -background-color: red;
}
/* Sysco */

/* CONSISTENCY */
tr.device.bin::before { content: var(--fa-sync); --fa-sync: "\f021"; position: absolute; font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands'; color: var(--prm-bd-color); font-weight: 900;
  transform: translate(-.2em, -.4em); z-index: 1;
}
td[label=alrm1] {    --ph: 1.6em;
  padding-left:  var(--ph) !important;
  padding-right: var(--ph) !important;
  overflow: hidden !important;
}
/* CONSISTENCY */

/* TRANSPORT ICONS: +COMPRESSION & BUNDLING  & +XPORT(PIPELINE) */
tr.device.host[comp=gzip] { --comp-opacity: .2; }
tr.device { --transport: '\f422'; }
tr.device[comp=gzip] td[label=Model]::after,
tr.device[comp=gzip] td[label=PartNumber]::after { white-space: pre; content: var(--transport); position: absolute; font-family: 'Font Awesome 5 Pro'; top: -.4em; left: -.2em; opacity: var(--comp-opacity, .05); }
tr.device[transport=XPort] { --transport: '\f233'; }
/* TRANSPORT ICONS: +COMPRESSION & BUNDLING & +XPORT(PIPELINE) */


tr.device {
  &:not([license]) { td:is([label=UserButton],[label=alrm1]) { pointer-events: none !important; xfilter: blur(.1rem); opacity: .2; } }
  &:not([license]):not([loss]) { --license: 'Unlicensed'; opacity: .8; --license-display: block; }
  &::before {
    display: var(--license-display, none);
    text-transform: lowercase;
    content: var(--license, attr(license));
    position: absolute;
    font-size: xx-small;
    opacity: .5;
    top: 0; left: 0; right: 0;
  }
  &[license=Allocations] { --license: 'Licensed'; }
}
:root:has(#logo:focus) tr.device[license] { --license-display: block; }