/*  Styles applied to all pages  */
@keyframes spin {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}
:root {
  --color-layer: rgba(108, 99, 214, 0.2);
  --color-layer-double: rgba(108, 99, 214, 0.4);
  --color-layer-heavy: rgba(108, 99, 214, 0.75);
  --color-unlayer: rgba(255, 255, 255, 0.6);
  --color-unlayer-heavy: rgba(255, 255, 255, 0.95);
  --color-shadow: rgba(0, 0, 0, 0.1);
  --color-shadow-soft: rgba(0, 0, 0, 0.035);
}
body {
  color: #0a0079;
  font: 16px "main font", Helvetica, Arial, sans-serif;
  user-select: none;
}
img.loading-spinner {
  animation: spin 1.2s infinite linear;
}
.text-secondary,
input::placeholder {
  opacity: 0.5;
}
.body-block {
  margin-block: 1em;
}
.material,
input,
button,
a.button,
ul li,
ol li {
  border-radius: 0.5em;
  background-color: var(--color-layer);
  padding: 0.5em;
}
.material-border,
input,
button,
a.button,
hr {
  border-radius: 0.5em;
  border: 2px solid #0a0079;
}
.material-shadow,
input,
button,
a.button {
  box-shadow: #0a0079 2px 2px;
}
.material > :first-child,
.material-border > :first-child,
.material-shadow > :first-child {
  margin-block-start: 0;
}
.material > :last-child,
.material-border > :last-child,
.material-shadow > :last-child {
  margin-block-end: 0;
}
a {
  color: #0a0079;
}
p {
  margin-block: 0.5em;
}
input {
  color: #0a0079;
  background-color: white;
  font-size: inherit;
  padding-block: 0.6em;
  padding-inline: 1em;
}
input:disabled {
  opacity: 0.5 !important;
}
input::placeholder {
  color: #0a0079;
}
input[type="checkbox"].toggle-switch {
  --handle-size: 35%;
  all: unset;
  cursor: pointer;
  width: 2.2em;
  height: 1.2em;
  display: inline-block;
  vertical-align: text-bottom;
  translate: 0 0.9px;
  /* To compensate for border width */
  border: 1.8px solid #0a0079;
  border-radius: 1em;
  background-image: radial-gradient(circle, var(--color-layer-heavy), calc(var(--handle-size) - 2%), transparent calc(var(--handle-size) - 1%));
  background-position-x: -0.5em;
  /* OPTIONAL: if you want the transition to be animated */
  transition: background-position-x 0.075s ease-in-out;
}
input[type="checkbox"].toggle-switch:checked {
  border-color: transparent;
  background-color: #0a0079;
  background-image: radial-gradient(circle, var(--color-unlayer-heavy) calc(var(--handle-size) - 1%), transparent var(--handle-size));
  background-position-x: 0.5em;
}
input[type="checkbox"]:has(+ label) {
  margin-inline-end: 0.5em !important;
}
button,
a.button {
  background-color: white;
  display: inline-block;
  text-wrap: nowrap;
  cursor: pointer;
  padding-inline: 1em;
}
button:empty,
a.button:empty {
  padding-inline: 0.5em !important;
}
button:hover,
a.button:hover {
  background-color: var(--color-layer-double);
  translate: -1px -1px;
  box-shadow: #0a0079 3px 3px;
}
button:active,
a.button:active {
  background-color: var(--color-layer-heavy);
  translate: 2px 2px;
  box-shadow: none;
}
button > i.icon:not(:only-child),
a.button > i.icon:not(:only-child) {
  padding-inline-end: 0.5em;
}
button.danger,
a.button.danger {
  color: red;
  border-color: red;
  box-shadow: red 2px 2px;
}
button.danger:hover,
a.button.danger:hover {
  translate: -1px -1px;
  box-shadow: red 3px 3px;
}
button.danger:active,
a.button.danger:active {
  translate: 2px 2px;
  box-shadow: none;
}
button[disabled],
a.button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  translate: 2px 2px;
  border-style: dashed;
}
ul,
ol {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
progress {
  display: block;
  height: 0.5em;
  width: 100%;
}
progress::-webkit-progress-bar {
  background-color: #0a0079;
}
progress::-webkit-progress-value {
  background-color: #4335d3;
  background-image: linear-gradient(90deg, transparent, #6c63d6);
}
hr {
  border-width: 1.5px;
}
#logo {
  cursor: pointer;
  margin-block: 0.5em;
  margin-inline-start: 1em;
}
#version-counter::after {
  content: "1.0.0";
  font-family: monospace;
}
i.icon,
.icon-before::before,
.icon-after::after {
  display: inline-block;
  vertical-align: text-bottom;
  width: 1.3em;
  height: 1.3em;
  background-size: 100%;
  background-clip: content-box;
}
.icon-before::before,
.icon-after::after {
  content: "";
  background-image: var(--icon);
  background-position: center;
  background-repeat: no-repeat;
}
.icon-before:not(:empty)::before {
  margin-inline-end: 0.5em;
}
.icon-after:not(:empty)::after {
  margin-inline-start: 0.5em;
}
/*# sourceMappingURL=icons.css.map */