
@namespace xlink 'http://www.w3.org/1999/xlink';

:root {
  --header-height: 3.85em;
  --header-shift: 0.75em;
  --sidebar-width: 3.6em;

  --max-width: 1000px;

  --text-color: 0,0%;
  --light-text: hsl(var(--text-color), 100%);
  --subtle-text: hsl(var(--text-color), 70%);
  --placeholder-text: hsl(var(--text-color), 40%);
  --highlight-text: #ece0b8;

  --link-color: #9abdea;

  --note-color: 255, 247, 203;
  --success-color: rgb(0, 141, 71);
  --warning-color: rgb(226, 192, 0);
  --error-color: rgb(182, 47, 47);
  --error-color-light: hsl(0, 100%, 85%);
  --info-color: rgb(0, 93, 155);

  --primary-blue: #203857;
  --dark-blue: #1f3758;
  --light-blue: rgb(163 221 255);
  --bright-blue: rgb(28 102 190);
  --neon-blue: #4a9bff;
  --grey-blue: #7d97b9;

  --neon-purple: #ef00ff;

  --neon-aqua: #00ffc8;
  --light-aqua: rgb(163 207 229);

  --light-grey: #566274;
  --mid-grey: #2a3544;
  --dark-grey: #2f3135;
  --darker-grey: #24272d;
  --black-grey: 19 19 22;
  
  --muted-red: rgb(173 90 90);
  
  --body-bk: #1a1d21;

  --svg-size: 1.5em;

  --no-color: 0,0,0;
  --tint-color: 50,50,50;
  --dim-color: 100,100,100;
  --light-color: 150,150,150;
  --low-color: 200,200,200;
  --mid-color: 225,225,225;
  --high-color: 245,245,245;
  --full-color: 255,255,255;

  --element-bk: rgb(var(--no-color));
  --element-bk-hover: rgba(var(--dim-color), 0.5);
  --element-bk-transparent: rgba(var(--tint-color), 0.6);
  --element-border-radius: 3px;

  --element-shadow-ring: 0 0 1px 1px rgba(0,0,0, 0.2);

  --element-shadow-low: 0 1px 2px 1px rgba(0,0,0, 0.3);
  --element-shadow-mid: 0 1px 4px 0px rgba(0,0,0, 0.4);
  --element-shadow-high: 0 1px 5px 0px rgba(0,0,0, 0.5);

  --input-shadow: 0 0px 2px 1px rgb(0 0 0 / 15%);
  --input-inner-shadow: 0 0 3px 1px rgb(0 0 0 / 30%) inset;
  --input-outline: 1px solid #3a669f;

  --panel-header-height: calc(var(--header-height) * .85);
  --panel-header-color: #30353e;
}

:root[route*="/explorer"] #nav [href="/ion/explorer"],
:root[route*="/explorer"]:not([route*="view"]) #nav [href*="view=search"],
:root[route*="/explorer"][route*="view=search"] #nav [href*="view=search"],
:root[route*="/explorer"][route*="view=timeline"] #nav [href*="view=timeline"],
:root[route*="/install-guide"] #nav [href*="/install-guide"] {
  color: rgb(var(--full-color));
  -webkit-filter: drop-shadow( 0px 2px 2px rgba(0, 0, 0, 0.8));
  filter: drop-shadow( 0px 2px 2px rgba(0, 0, 0, 0.8));
  cursor: default;
  transition: none;
}

html, body, #sidebar, main, #footer {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  font-family: 'Nunito Sans', sans-serif;
  background: var(--body-bk);
  font-size: calc(0.7em + 0.5vmin);
  color: var(--light-text);
  scrollbar-color: var(--dark-grey) var(--subtle-text);
}

body:before {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  width: 1400px;
  max-width: 100%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0.02) 50%, rgba(0,0,0,0) 100%);
  --mask-svg: url("../../images/hex-bk.svg");
  -webkit-mask-image: var(--mask-svg);
  mask-image: var(--mask-svg);
  -webkit-mask-size: 60em;
  mask-size: 60em;
  z-index: -1;
}

  body::-webkit-scrollbar {
    width: 1em;
  }
  body::-webkit-scrollbar-track {
    background: var(--subtle-text);
  }
  body::-webkit-scrollbar-thumb {
    background-color: var(--dark-grey) ;
    border-radius: 1em;
    border: solid var(--subtle-text);
  }

  *:not(body) {
    scrollbar-color: var(--subtle-text) var(--dark-grey);
  }
  *:not(body)::-webkit-scrollbar {
    width: 1em;
  }
  *:not(body)::-webkit-scrollbar-track {
    background: var(--dark-grey);
  }
  *:not(body)::-webkit-scrollbar-thumb {
    background-color: var(--subtle-text) ;
    border-radius: 1em;
    border: 0.35em solid var(--dark-grey);
  }

main > section {
  margin: 4em auto;
  padding: 0 1.5em;
}

main > section:not([full-width]) {
  max-width: 700px;
}

 
a {
  color: var(--link-color);
  overflow-wrap: break-word;
  cursor: pointer;
}

input:focus {
  outline: var(--input-outline);
}

input:not([type]),
input[type="text"],
input[type="search"] {
  padding: .45em;
  font-size: 1em;
  color: var(--light-text);
  background: rgba(0 0 0 / 30%);
  border-radius: var(--element-border-radius);
  border: 1px solid rgba(255 255 255 / 12%);
  border-top-color: rgba(255 255 255 / 10%);
  border-bottom-color: rgba(255 255 255 / 15%);
  box-shadow: var(--input-inner-shadow);
}

input:not([type])::placeholder,
input[type="text"]::placeholder {
  color: var(--placeholder-text);
  font-style: italic;
}

nav, nav > *, nav a {
  display: flex;
  align-items: center;
  user-select: none;
}

nav a {
  color: var(--light-text);
  text-decoration: none;
}

nav svg:first-child {
  height: 1.3em;
  margin-right: 0.4em;
}

button, .button {
  display: flex;
  margin: 0 0.5em;
  padding: 0.7em 1em 0.6em;
  border: none;
  background: var(--bright-blue);
  box-shadow: var(--element-shadow-ring), var(--element-shadow-low);
  border-radius: 2px;
  color: #fff;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
}

button:focus,
.button:focus {
  outline: var(--input-outline);
}

button[pressed],
.button[pressed] {
  box-shadow: var(--element-shadow-ring), var(--element-shadow-low) inset;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

svg {
  width: var(--svg-size);
  height: fit-content;
  fill: currentColor;
}


svg use[xlink|href="#hexagon"] {
  fill: #fff;
}

svg[svg~="background"] + svg use {
  fill: var(--primary-blue);
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: var(--darker-grey) !important;
  border-radius: var(--element-border-radius);
}

hr {
  height: 1px;
  margin: 2em auto;
  border-color: #000 transparent #555;
  border-radius: 100%;
  opacity: 0.2;
}

/* Custom Elements */

slide-panel {
  background: none;
}

slide-panels > slide-panel:not([open]) {
  transform: scale(0.995);
}

slide-panel > header {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--panel-header-height);
  padding: .25em .8em 0;
  background: var(--panel-header-color);
  box-shadow: var(--element-shadow-mid);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

slide-panel > header > * {
  margin-top: 0;
  margin-bottom: 0;
}

slide-panel > header > nav {
  margin-left: auto;
}

slide-panel > section {
  min-height: calc(100% - var(--panel-header-height));
}

/*** NOTICE-BAR ***/

notice-bar {
  text-shadow: 0 1px 2px rgb(0 0 0 / 70%);
  box-shadow: 0 -1px 6px 0px rgb(0 0 0 / 55%);
}

notice-bar > header {
  font-size: 1.15em;
  font-weight: 500 !important;
}

notice-bar[notice-type="success"] {
  color: #fff;
  background-color: var(--success-color);
}

notice-bar[notice-type="warning"] {
  background-color: var(--warning-color);
}

notice-bar[notice-type="error"] {
  color: #fff;
  background-color: var(--error-color);
}

notice-bar[notice-type="info"] {
  color: #fff;
  background-color: var(--info-color);
}

/*** Classes ***/

.highlighted-box {
  border: 1px solid rgba(255,255,255,.07);
  border-top-color: rgba(255,255,255,.08);
  border-bottom-color: rgba(255,255,255,.07);
}

.toolbar > *:first-child {
  margin-left: 0;
}

.toolbar > *:last-child {
  margin-right: 0;
}

.toolbar .button {
  height: 0.4em;
  padding: 0.75em 0.7em;
  font-size: 0.85em;
  background: var(--light-grey);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 1);
}

[max-width] {
  max-width: var(--max-width);
  margin: 0 auto;
}

[list] {
  list-style: initial;
  margin: 0 0 1em;
  padding-inline-start: 1.25em;
}

[list] > li {
  margin: 0 0 1em;
}

[list] > li::marker {
  content: "⬢  ";
  font-size: 0.9em;
  color: var(--grey-blue);
}

[theme="dark-grey"] {
  background: var(--dark-grey);
  border-top: 1px solid rgba(255,255,255,0.075);
  border-bottom: 1px solid rgba(0,0,0,0.3);
  box-shadow: 0 0 3px 0 rgba(0,0,0,0.2);
}

[svg~="shadow"] {
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5));
}

[svg~="background"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ration = 104 / 119 */

[shape="hexagon"] {
  --size: 3em;
  --ratio: 0.85;
  display: block;
  position: relative;
  height: var(--size);
  width: calc(var(--size) * var(--ratio));
  overflow: hidden;
  background: #fff;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.highcharts-root,
.highcharts-root svg {
  height: unset;
  width: unset;
}

#header {
  display: flex;
  contain: size;
  position: fixed;
  top: 0;
  align-items: center;
  height: var(--header-height);
  width: 100%;
  padding: var(--header-shift) 0 0;
  color: var(--light-text);
  transition: transform 0.3s ease;
  z-index: 100;
}

  html:not([ready]) #header,
  html:not([ready]) #header:before,
  html:not([ready]) #logo  {
    transition: none;
  }

  body[scrolled] #header {
    transform: translateY(calc(var(--header-shift) * -1));
  }

  #nav:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 1px 6px 2px rgb(0 0 0 / 25%);
    background:var(--primary-blue);
    opacity: 0;
    transition: opacity 0.25s;
  }

body[scrolled] #nav:before {
  opacity: 1;
}

#nav {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
}

#nav_toggle,
#nav_toggle_icon {
  width: var(--header-height);
  display: none;
  z-index: 1;
}

#nav_toggle {
  position: absolute;
  right: 0;
  height: var(--header-height);
  margin: 0;
  padding: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
}

#nav_toggle_icon {
  height: 45%;
}

#logo,
#nav > ul {
  padding: 0.15em 0.65em 0;
  z-index: 1;
}

#nav li {
  margin-left: 0.5em;
}

#nav ul a {
  white-space: nowrap;
  padding: .8em .7em;
  color: rgba(var(--full-color), 0.55);
  transition: color 0.3s ease;
}

#nav a:hover {
  color: rgba(var(--full-color), 0.9);
}

#nav ul ul a {
  margin: 0;
}

#nav ul ul {
  display: none;
}

#logo {
  position: relative;
  display: block;
  height: 2.5em;
  margin-right: auto;
  color: #fff !important;
  background: none !important;
}

#logo:hover {
  box-shadow: none !important;
}
  
body[scrolled] #logo {
  opacity: 1;
}

#logo img {
  height: 100%;
}

#sidebar:not(:empty) {
  position: fixed;
  left: 0;
  top: var(--header-height);
  width: var(--sidebar-width);
  height: calc(100% - var(--header-height));
  padding: calc(var(--sidebar-width) / 2.75) 0;
  background: var(--mid-grey);
  box-shadow: var(--element-shadow-high);
  z-index: 1;
}

#sidebar:not(:empty) ~ main,
#sidebar:not(:empty) ~ #footer {
  width: calc(100% - var(--sidebar-width));
  margin-left: var(--sidebar-width);
}

#sidebar nav {
  flex-direction: column;
}

#sidebar nav > * {
  width: 100%;
  text-align: center;
}

#sidebar nav svg {
  margin: auto;
}

#footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.9em;
  padding: 1.5em 1.5em 1em;
  text-decoration: none;
  background: rgb(var(--black-grey) / 60%);
  border-top: 1px solid rgb(186 215 255 / 10%);
  box-shadow: 0 4px 3px 0 rgb(0 0 0 / 10%) inset;
}

#footer > div {
  max-width: 300px;
  margin: 0 2em;
}

#footer > div:last-child {
  flex: 1 1 100%;
  max-width: none;
  margin: 0 auto;
  text-align: center;
}

#footer div li {
  margin-bottom: 0.5em;
}

#footer > div > div {
  color: var(--subtle-text);
}

#footer a {
  text-decoration: none;
}

#footer hr {
  max-width: var(--max-width);
  margin: 1em auto 1.5em;
}


/* Spinner */



[loader] {
  font-size: 3em;
  height: 1em;
  width: 1em;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity ease, visibility linear;
  transition-duration: 0.5s;
  -webkit-mask-image: url("../../images/puff.svg");
  mask-image: var(--mask-svg);
  -webkit-mask-size: 100%;
  mask-size: 100%;
  z-index: -1;
}

[loader^="show"], [loaders^="show"] [loader] {
  visibility: visible;
  opacity: 1;
  z-index: 1;
}

[loader="hide"], [loaders="hide"] [loader] {
  transition-duration: 0.6s;
}

/* Keyframes */


/* Media Queries */

@media (max-width: 650px) {

  #header {
    transform: translateY(calc(var(--header-shift) * -1));
  }

  #nav:before {
    opacity: 1;
  }

  #nav_toggle,
  #nav_toggle_icon {
    display: block;
  }

  #nav_toggle:checked + ul,
  #nav > ul:hover {
    transform: translateX(0%) !important;
  }

  #nav > ul {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    padding: calc(var(--header-height) + 2em) 0 2em;
    background: var(--mid-grey);
    border-right: 1px solid rgba(255,255,255,.065);
    box-shadow: var(--element-shadow-high);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    height: calc(100vh + var(--header-shift));
    z-index: -1;
  }

  #nav li {
    margin: 0;
  }

  #nav > ul > li:after {
    content: "";
    display: block;
    height: 0;
    margin: 0.5em;
    border-top: 0.5px solid rgba(0 0 0 / 30%);
    border-bottom: 0.5px solid rgba(255 255 255 / 15%);
  }

  #nav ul a {
    padding: .85em 2em .85em 1em;
  }

  #nav ul ul a {
    padding-left: 3em;
  }

  #nav > ul > li {
    margin: 0;
    padding: 0;
  }

  #nav ul ul,
  #nav li {
    display: block;
    box-sizing: border-box;
  }

 

}

@media (min-width: 650px) {


  #global_header {
    display: none;
  }

  main > slide-panels > slide-panel > header {
    top: 0;
  }

  main > slide-panels > slide-panel > section {
    margin: 0;
  }
}

:root:not([origin*="localhost"]) .prerelease {
  display: none;
}