:root {
  --color-0: #060609;
  --color-1: #111116;
  --color-2: #222229;
  --color-3: #333339;
  --color-4: #444449;
  --color-5: #555559;
  --color-6: #666669;
  --color-7: #777779;
  --color-8: #888889;
  --color-9: #999;
  --color-10: #aaa;
  --color-11: #bbb;
  --color-12: #ccc;
  --color-13: #ddd;
  --color-14: #eee;
  --color-15: #fff;
  --color-primary: #55a;
  --color-dangerous: #944;
  --color-accent: #f96;
  --border-radius: .25em;
  --border-radius-button: 10em;
  --page-transition-duration: 0ms;
  --page-transition-duration-short: 0ms;
  --page-transition-duration-long: 0ms; }
  :root:has(body.animations) {
    --page-transition-duration: 100ms;
    --page-transition-duration-short: 50ms;
    --page-transition-duration-long: 150ms; }

@font-face {
  font-family: rubik;
  src: url(res/rubik.ttf); }

@font-face {
  font-family: dejavu;
  src: url(res/dejavu.ttf); }

@keyframes status-animation-online {
  0% {
    outline-color: #3c30;
    outline-offset: 0; }
  25% {
    outline-color: #3c3c; }
  50% {
    outline-color: #3c30;
    outline-offset: .25em; } }

@keyframes status-animation-offline {
  0% {
    outline-color: #c220;
    outline-offset: 0;
    scale: .9; }
  25% {
    outline-color: #c229;
    scale: 1; }
  100% {
    outline-color: #c220;
    outline-offset: .25em;
    scale: .9; } }

::-webkit-scrollbar {
  width: .325em;
  height: .325em; }

::-webkit-scrollbar-track {
  background: var(--color-3); }

::-webkit-scrollbar-thumb {
  background: var(--color-5); }

::-webkit-scrollbar-thumb:hover {
  background: var(--color-7); }

::-webkit-scrollbar-corner {
  background: transparent; }

html, body {
  height: 100dvh; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--color-2); }

body,
input, textarea, button {
  font-family: rubik, sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: var(--color-14); }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

h1 {
  font-size: 1.75em; }

h2 {
  font-size: 1.5em; }

#queue-running-indicator {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none; }

h1::before {
  content: '';
  display: inline-block;
  background-image: url(res/loading-small.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1em;
  height: 1em;
  transition: var(--page-transition-duration-long);
  margin-right: 0;
  width: 0;
  opacity: 0;
  translate: 0 .125em; }

body:has(#queue-running-indicator.visible) h1::before {
  margin-right: .25em;
  width: 1em;
  opacity: 1; }

#app {
  display: flex;
  min-height: 100%; }

nav {
  flex: .2;
  display: flex;
  flex-direction: column;
  padding-block: 1.25em 3.25em;
  white-space: nowrap;
  overflow: hidden;
  min-width: 10em;
  max-width: 15em;
  background-color: var(--color-3); }
  nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center; }
  nav li {
    user-select: none;
    padding: .75em 1.25em; }
    nav li:hover {
      background-color: var(--color-4); }
    nav li:active, nav li.active {
      background-color: var(--color-5); }

#main {
  overflow: hidden;
  display: flex;
  flex: 1; }

#page {
  transition: var(--page-transition-duration);
  opacity: 0;
  translate: 0 -1em;
  overflow: auto;
  flex: 1; }
  #page.visible {
    opacity: 1;
    translate: 0 0; }
  #page h1 {
    margin: 1em 1em .5em; }

#page.fadeout {
  translate: 0 1em; }

.hidden {
  display: none !important; }

.loading {
  opacity: 0;
  translate: 1em 0;
  margin-right: 1.25em;
  transition: opacity var(--page-transition-duration), translate var(--page-transition-duration), margin-right var(--page-transition-duration); }
  .loading.loaded {
    opacity: 1;
    translate: 0 0;
    margin-right: unset; }

input, textarea, button {
  color: var(--color-14);
  outline: none; }
  input[disabled]:not(.loading), input[disabled].loaded, textarea[disabled]:not(.loading), textarea[disabled].loaded, button[disabled]:not(.loading), button[disabled].loaded {
    opacity: .5; }

input, textarea {
  background-color: var(--color-3);
  border: none;
  padding: .325em .5em;
  border-radius: var(--border-radius); }
  input:focus, textarea:focus {
    background-color: var(--color-4); }
  input.select, textarea.select {
    cursor: default; }
    input.select:hover, textarea.select:hover {
      background-color: var(--color-4); }

textarea {
  resize: none;
  min-height: 8em; }

button {
  background-color: var(--color-5);
  border: none;
  padding: .325em .875em;
  filter: brightness(0.9);
  border-radius: var(--border-radius-button); }
  button:not([disabled]):hover {
    filter: brightness(1); }
  button:not([disabled]):active {
    filter: brightness(1.15); }
  button[style] {
    padding-left: 2.25em;
    background-repeat: no-repeat;
    background-size: 1.25em;
    background-position: .675em center; }
  button.primary {
    background-color: var(--color-primary); }
  button.dangerous {
    background-color: var(--color-dangerous); }

pre {
  font-family: dejavu;
  font-size: .95em;
  padding: 0;
  margin: 0; }

.overlay,
.overlay-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none; }

.overlay-backdrop {
  backdrop-filter: brightness(0.5) contrast(0.9) saturate(1.25);
  opacity: 0;
  transition: var(--page-transition-duration-long); }

body:has(.overlay:not(.no-backdrop)) .overlay-backdrop {
  opacity: 1;
  pointer-events: unset; }

.overlay .box {
  background-color: var(--color-3);
  box-shadow: 0 1em 6em -5em var(--color-0);
  display: flex;
  flex-direction: column;
  scale: 1.1;
  opacity: 0;
  transition: var(--page-transition-duration);
  max-height: calc(100% - 2em);
  max-width: calc(100% - 2em);
  overflow: auto;
  border-radius: var(--border-radius); }
  .overlay .box .content {
    flex: 1;
    padding-block: .5em; }
    .overlay .box .content .item {
      padding: .25em 2em .25em 1em;
      cursor: default;
      white-space: nowrap; }
      .overlay .box .content .item:hover {
        background-color: var(--color-4); }
      .overlay .box .content .item.selected {
        background-color: var(--color-5); }
      .overlay .box .content .item.disabled {
        color: var(--color-8); }
    .overlay .box .content .item[style] {
      padding-left: 2.125em;
      background-repeat: no-repeat;
      background-size: 1.125em;
      background-position: .5em center; }
    .overlay .box .content .separator {
      border-bottom: 0.125em dashed var(--color-5);
      margin-block: .5em; }

.overlay.no-backdrop .box {
  box-shadow: 0 0.75em 3.25em -2.25em var(--color-0); }

.overlay.visible {
  opacity: 1;
  pointer-events: unset; }
  .overlay.visible .box {
    scale: 1;
    opacity: 1; }

.overlay.dialog {
  display: flex;
  justify-content: center;
  align-items: center; }
  .overlay.dialog .content:has(.title) {
    padding: 1em 1.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5em; }
  .overlay.dialog .title {
    font-size: 1.5em; }
  .overlay.dialog .text {
    padding: .25em 0 .75em;
    text-align: center; }
  .overlay.dialog .buttons {
    display: flex;
    gap: .5em;
    justify-content: center; }

.overlay.context-menu .box {
  position: absolute;
  transform-origin: left top;
  transition: var(--page-transition-duration-short); }

.overlay.context-menu:not(.visible) .box {
  scale: 1 .75; }

.options {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2em; }
  .options > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .25em; }
    .options > div label {
      color: var(--color-9); }

input:has(+ button) {
  border-radius: 10em 0 0 10em;
  padding-left: 1em; }

input + button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: .675em; }

.searchbar {
  display: flex;
  padding-inline: 2em; }
  .searchbar input {
    flex: 1; }
  .searchbar input:focus {
    background-color: var(--color-3); }