:root { ---fbw: 1rem; }
:root {
  --smart-primary: var(--ke2-blue);
  --fa-primary-color: var(--smart-primary);
}
:root {
  --smart-ui-state-selected: var(--prm-bg-color) !important;
  --smart-ui-state-border-selected: var(--prm-bd-color) !important;
  --smart-ui-state-color-selected: var(--prm-fg-color) !important;
  --smart-access-site-item-focus-color: var(--prm-fg-color);
}
:root { --smart-editor-addon-width: 27px !important; }

* {
  --webkit-backface-visibility: hidden;
  --moz-backface-visibility: hidden;
  -backface-visibility: hidden;
}

smart-power-button[id] .smart-input::after {
  font-weight: var(--fa-s, 900) !important;
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands' !important;
      content: var(--icon) !important;
}

::-webkit-scrollbar { --sh: 5px; --sw: 5px; height: var(--sh); width: var(--sw); }
::-webkit-scrollbar-track { background-color: #ccc; }
::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, var(--o, .3)); }
::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, var(--o, .7)); }
::-webkit-scrollbar-thumb:window-inactive { background-color: rgba(0, 0, 0, var(--o, .2)); }

input::-webkit-calendar-picker-indicator { display: none; } /* hide arrow for input list=datalist */

.smart-loader-container.smart-visibility-hidden { display: none !important; }
 
smart-access-site { --smart-access-site-pass-display: none; }

:root {
  --padding-reset: 0;
  --padding: .4rem;
  --ol_ul-padding-left: 1.4rem;
}

[\?] { -outline: 1px solid red; }

/*unreset*/
h1, h2, h3, h4, h5, h6 { font-size: large; font-weight: 700; }
strong { font-weight: 700; }
ol, ul { list-style: unset; padding-left: var(--ol_ul-padding-left); }
ol     { list-style-type: decimal; }
ul     { list-style-type: disc; }
ol, ul { margin-top: -.4rem !important; } li { line-height: 2.4rem; }
a { text-decoration: none; }
/*unreset*/

section[split=before]:before,
section[split='']:before,
section[split=after]:after {
  display: block; background: #f4f4f4; height: 1px; width: 3rem; text-align: center; content: "";
  margin: 1.4rem auto 1.4rem;
}

footer,
header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; min-height: 2.2rem; }
footer { justify-content: space-between; }
footer > div:only-child { flex: 1; }
footer > div { display: flex; flex-direction: row-reverse; max-height: 3em; align-items: center; }
footer > div > smart-button:not(:first-child) { margin-inline-end: .4em; }

footer { display: flex !important; width: 100%; }

section > *:not(header) { margin: 1rem 0; }
                header  { margin-bottom: -.6rem; }

smart-tab-item>.smart-container { padding: var(--padding); }
smart-tab-item[\#padding="0"] { --padding: 0; }

shin-ip[a^='127.'],
shin-ip[title*=bogon] { display: none; }
shin-user-agent { border-radius: var(--smart-border-top-left-radius); padding: var(--shin-user-agent-padding); }

shin-user-agent { flex-direction: row-reverse; }
shin-user-agent[string\:platform-type=desktop]:after { --fa-desktop:    "\f108"; content: var(--fa-desktop)    ' ' var(--shin-os-icon); white-space: pre; font-weight: 900; }
shin-user-agent[string\:platform-type=mobile]:after  { --fa-mobile-alt: "\f3cd"; content: var(--fa-mobile-alt) ' ' var(--shin-os-icon); white-space: pre; font-weight: 900; }

.smart-modal {
  opacity: unset !important;
  background-color: rgba(0, 0, 0, .3) !important;
  backdrop-filter: blur(var(--fbw)) !important;
}

/*LOADING*/
:root {
  --loading-blur: var(--fbw);
  --loading-animation: spin;
  --loading-color: #999;
  --loading-bf: blur(var(--loading-blur)) saturate(4);
  overflow: hidden;
}
[loading-iframe]::before,
[loading-iframe]::after  { content: " "; position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; }
[loading-iframe]::before { background-color: rgba(100, 100, 100, .1); -webkit-backdrop-filter: var(--loading-bf); backdrop-filter: var(--loading-bf);  }
[loading-iframe]::after { animation: var(--loading-animation) 2s infinite linear;
  --fa-cog: '\f013'; font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands', sans-serif; font-weight: 900; font-size: 2em;
  content: var(--loading-text, var(--fa-cog)); color: var(--loading-color); --loading-shadow: white;  
  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);
  content: '';
  background: url(//cdn.blue/{fa-5.15}/svgs/duotone/spinner.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1em;
}

[loading]:not(html) { overflow: hidden; --loading-bf: blur(.1rem) saturate(0); }
[loading]:not(html)::before,
[loading]:not(html)::after,
html[loading]>body::before,
html[loading]>body::after  { position: absolute; content: " "; white-space: pre; z-index: 999999999999; left: 0; right: 0; bottom: 0; top: 0; }
[loading]:not(html)::before,
html[loading]>body::before { background-color: rgba(100, 100, 100, .1); -webkit-backdrop-filter: var(--loading-bf); backdrop-filter: var(--loading-bf); color: transparent; }
html:not([loading]) [loading]:not(html)::after,
html[loading]>body::after  {
  --fa-cog: '\f013'; font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands', sans-serif; font-weight: 900; font-size: 2em;
  content:   var(--loading-text, var(--fa-cog)); color: var(--loading-color);
  animation: var(--loading-animation) 2s infinite linear;      --loading-shadow: white; display: flex; justify-content: center; align-items: center; 
  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);
  content: '';
  background: url(//cdn.blue/{fa-5.15}/svgs/duotone/spinner.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1em;
}

@keyframes spin {
  from { transform: rotate(  0deg); }
  to   { transform: rotate(360deg); }
}
/*LOADING 1r*/

smart-drop-down-list x { width: 1em; display: inline-block; text-align: center; --fa-primary-color: ; --fa-secondary-color: ; }
summary { cursor: pointer; }

.smart-tab-label-container { border-radius: 0 !important; }
.smart-tabs .smart-tab-selected.smart-tab-label-container {
  background-color: var(--snd-bg-color);
  border-radius: 0 !important;
  bottom-left-border-radius: 0 !important;
}
.smart-tabs:focus .smart-tabs-content-section, .smart-tabs:focus .smart-tabs-header-section { border-color: transparent !important; }

.smart-filter-input-type { width: 2em !important; }
.smart-filter-input-value > input { width: 100% !important; xbackground-color: red !important; }
.smart-filter-input-value > .nav { display: none !important; }
:root { --smart-editor-addon-width: 1em; }

:root { --txw: 31rem; }

@media screen and (min-width: 500px) {
  smart-tabs[sub-page] smart-tab-item > .smart-container {
    border-radius: var(--smart-border-radius);
    box-shadow: var(--smart-elevation-1);
    max-width: var(--txw); margin: auto !important;
    height: fit-content; margin-top: 1em !important;
    padding: .8em .8em; max-height: calc(100% - 2em); overflow-y: auto;
  }
  smart-tabs[sub-page] smart-tab-item > .smart-container footer:last-child { margin: 0; }
}

a[href][target]::after { content: ' ' var(--fa-external-link-square); --fa-external-link-square: "\f14c"; font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands', sans-serif; font-size: smaller; }