html.f {
  --a: #0b75ff;
  --a-b: #0070ff;
  --a-hil: #0f78ff;
  --a-dark: #0070ff;
  --a-gray: #515151;
  --btn-fg: #f2f2f2cc;
  --btn-bg: rgba(128,128,128,0.15);
  --btn-h-fg: #ffffffc4;
  --btn-h-bg: rgba(45, 111, 234, 0.15);
  --btn-1-fg: var(--btn-fg);
  --btn-1-bg: var(--btn-bg);
  --btn-h-bs: var(--btn-bs);
  --btn-h-bb: var(--btn-bb);
  --btn-1-bs: 0 2px var(--a-hil), 0 0 .2em var(--bg-d3);
  --btn-1-bb: var(--btn-bb);
  --btn-1h-fg: var(--btn-1-fg);
  --btn-1h-bg: var(--btn-h-bg);
  --btn-1h-bs: var(--btn-1-bs);
  --btn-1h-bb: var(--btn-1-bb);
  --btn-bs: 0 0 2px var(--bg-d3);
  --op-aa-sh: 0 0 2px var(--bg-d3) inset;
  --sort-1: var(--a);
  --g-fg: var(--fg-max);
  --g-f-fg: var(--g-fg);
  --g-dfg: #73b0ff;
  --g-sel-fg: #fff;
  --g-sel-bg: #255095a6;
  --g-sel-b1: #3385eeb8;
  --g-sel-sh: #337bbbb0;
  --g-fsel-bg: #335edd;
  --g-fsel-b1: #44b9ff;
  --g-fsel-ts: #004288;
  --u2-tab-1-fg: #77b9ff;
  --u2-tab-1-bg: linear-gradient(to bottom,#333c55,#222 80%);
  --u2-tab-1-b1: #5594cc;
  --u2-tab-1-b2: #335488;
  --u2-tab-1-sh: #004288;
  --u2-b1-bg: var(--a);
  --u2-b2-bg: var(--a);
  --chk-fg: var(--fg-weak);
  --srv-2: var(--a-hil);
  --scroll: var(--a);
}

html.fy {
  --btn-fg: #282828cc;
  --btn-h-fg: #000000c4;
}

#srv_info > span:first-child::after {
  content: " - najlepszy hosting na Miners.pl";
}

html.f #tt {
  border-width: 2px 0 2px 0;
  border-bottom-color: var(--a-hil);
  border-top-color: var(--a-hil);
}

html.f #tt:not(.show) {
  opacity: 0;
  pointer-events: none;
}

html.f #opa_x {
  colot: transparent !important;
  background: url(/.hidden/logo.png) center center / contain no-repeat;
  margin-right: 0.5rem;
}

html.f #opa_x:focus {
  outline: none;
  background: url(/.hidden/logo.png) center center / contain no-repeat, var(--bg-u6);
}

html.f #detree {
  font-size: 0;
}

html.f #detree::before {
  content: "🍞";
  font-size: 1.5rem;
  padding: .3em .5em;
}



html.f :focus,
html.f :focus + label,
html.f #pctl :focus,
html.f .btn:focus {
  outline: var(--a) solid 1px;
  box-shadow: unset;
}

html.f .tgl.btn.on {
  box-shadow: var(--btn-1-bs) !important;
}

html.f #ggrid > a::before,
html.f #ggrid > a::before,
html.f #ggrid > a:focus::before,
html.f #ggrid > a:hover::before {
  font-size: 2em;
  margin: -0.2em -0.15em;
  color: var(--a-hil);
}

html.f #ops {
  margin: 1.7em 1.5em 0 1.5em;
  border-radius: .3em;
}

html.f #ops,
html.f .opbox,
html.f #path,
html.f #srch_form,
html.f .ghead,
html.f #tree,
html.f #wfp {
  background: var(--bg-u2);
  border: 1px solid var(--bg-u3);
  box-shadow: 0 0 .3em var(--bg-d3), 0 2px var(--a-dark);
}

html.fy #ops,
html.fy .opbox,
html.fy #path,
html.fy #srch_form,
html.fy .ghead,
html.fy #tree,
html.fy #wfp {
  box-shadow: 0 2px var(--a-dark);
}

html.f #wfp {
  border-radius: .3em;
  padding: .1em .25em;
  line-height: 2.3em;
  margin: 0.5em 0 0 0;
  position: fixed;
  bottom: 4em;
  width: 27rem;
}

html.f #repl {
  position: fixed;
  bottom: 7em;
  transform: translate(25.5em, 0);
}

html.f #op_up2k {
  padding: 2em 1em 0em 1em;
}

html.f #tree {
  border-radius: 0.3em 0.3em 0 0;
  margin-left: 1.5em;
}

html.f #wrap {
  padding-left: 1em;
}

html.f #tree a {
  color: var(--fg);
}

html.f #tree a.par,
html.f #tree a.hl {
  color: var(--g-dfg);
}

html.f .btn {
  border-radius: .2em;
}

html.f a:not(.btn) {
  color: var(--g-dfg);
}

html.f input[type="radio"]:checked + label,
html.f input[type="checkbox"]:checked + label {
  color: var(--fg-max);
}

html.f .opbox {
  margin: 1.5em 1.5em 0;
  box-shadow: 0 0 .3em var(--bg-d3), 0 2px var(--a-dark);
  border-radius: 0.3em;
}

html.f .opview select,
html.f .opview input[type="text"] {
  border-bottom-color: #999;
}

html.f .opview select:focus,
html.f .opview input[type="text"]:focus {
  border-bottom-color: var(--a-dark);
}

html.f #ggrid > a:not(:hover):not(:focus):not(.sel) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html.f #ggrid > a {
  margin: -0.4em;
  padding: 0.4em;
  height: fit-content;
}

html.f #ggrid > a.sel {
  box-shadow: 0 .1em 0.8em var(--g-sel-sh);
}

html.f #ggrid > a.dir > span {
  color: var(--g-fg);
}

html.f #ops a {
  transition: 0.3s box-shadow, 0.3s background-color;
}

html.f #ops a.act {
  border-bottom: none;
  box-shadow: var(--op-aa-sh), 0 0.3em var(--a-b);
}

html.f #toast {
  background: var(--bg-u2) !important;
  border-width: 4px 0;
}

html.f #toast a#toastc,
html.f #toast.vis a#toastc {
  right: 0em;
  left: unset;
  top: 1px;
  width: 0.5em;
  padding: 0.1em 0.5em;
  opacity: 1;
  border-radius: 0 0.5em;
}