:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  font-size: 15px;

  color-scheme: light dark;
  color: var(--font-color);
  background-color: var(--background-color);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  --background-color: light-dark(#e7edff, #0b0a0f);
  --foreground-color: light-dark(#f0f3ff, #17151e);
  --highlight-color: light-dark(oklch(0.833 0.061 287.073 / 50%), #2e2b4c);
  --hover-color: light-dark(oklch(0.833 0.061 287.073 / 75%), #3d3a66);
  --border-color: light-dark(#c5c3ef, #2e2b4c);
  --font-color: light-dark(#0b0a0f, #e7edff);
  --success-color: light-dark(#74e82c, #b3ff92);
  --notice-color: light-dark(#2e89ff, #92c1ff);
  --warning-color: light-dark(#ffc229, #ffdf91);
  --danger-color: light-dark(#ff2929, #ff9191);
  --link: light-dark(#6b6bff, #9e9eff);
  --accent-primary-color: #685bc4;
  --accent-secondary-color: #7b74cc;
  --accent-color: linear-gradient(
    to right,
    var(--accent-primary-color),
    var(--accent-secondary-color)
  );

  --btn-radius: 8px;

  overscroll-behavior-y: none;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/*Set box sizing to border box*/
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  padding: 0;
  margin: 0;
}

/* Inherit fonts and colors for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  background-color: inherit;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

li {
  list-style-type: none;
}

menu {
  margin: 0;
  padding: 0;
}

hr {
  border-color: var(--border-color);
}

dialog {
  border: 0;
  margin: 0;
  padding: 0;
  background-color: transparent;
}

button {
  border-radius: 8px;
  border: 0;
  font-size: 1em;
  font-family: inherit;
  cursor: pointer;
  padding-block: 0;
  padding-inline: 0;
  width: fit-content;
  height: fit-content;
  background-color: var(--foreground-color);
  color: var(--notice-color);
  padding: 0.2em;
}

.button {
  border-radius: 0.5em;
  margin: 0.5em;
  display: flex;
  padding: 0.5em;
  padding-inline: 1em;
  align-items: center;
}

a.button {
  cursor: pointer;
  width: fit-content;
  height: fit-content;
  background-color: var(--foreground-color);
  color: var(--notice-color);
  text-decoration: none;
}

.button:hover {
  background-color: var(--hover-color);
}

button[disabled],
.button[disabled] {
  opacity: 40%;
  cursor: not-allowed;
}

input,
textarea,
select {
  display: block;
  background-color: var(--foreground-color);
  border: solid var(--border-color) 0.05rem;
  outline: none;
  max-width: 50em;
  border-radius: 0.5em;
  padding: 0.5em;
  padding-inline: 1em;
  margin: 0.5em;
}

select:after {
  padding-right: 0.5em;
}

textarea {
  min-height: 5em;
  max-height: 100%;
  min-width: 100%;
  max-width: 100%;
}

.fake-link {
  color: var(--link);
  cursor: pointer;
  tab-index: 0;
  text-decoration-line: none;
}

.fake-link:hover {
  text-decoration: underline;
}

table {
  background-color: var(--background-color);
  border-collapse: collapse;
  margin-bottom: 0.5rem;
  width: 100%;
  table-layout: fixed;
}

table caption {
  text-align: left;
}

td,
th {
  padding: 0.4rem;
  text-align: left;
  vertical-align: top;
  word-wrap: break-word;
}

thead {
  border-bottom: 1px solid var(--border-color);
}

tfoot {
  border-top: 1px solid var(--border-color);
}

tbody tr:nth-child(even) {
  background-color: var(--foreground-color);
}

details > summary {
  cursor: pointer;
}

/*Blazor stuff, Fix Later*/
.validation-message {
  color: red;
}

#blazor-error-ui {
  display: none;
  background: lightyellow;
  color: black;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=)
      no-repeat 1rem/1.8rem,
    #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.lds-ellipsis,
.lds-ellipsis div {
  box-sizing: border-box;
}

.lds-ellipsis {
  position: fixed;
  width: 80px;
  height: 80px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.lds-ellipsis div {
  position: absolute;
  top: 33.33333px;
  width: 13.33333px;
  height: 13.33333px;
  border-radius: 50%;
  background: currentColor;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

.page {
  animation: fadein 150ms ease-in;
}

code {
  background-color: #050507;
  color: #fff9e7;
  border-radius: 0.2em;
  padding: 0.1em;
}

pre:has(code) {
  background-color: #050507;
  color: #fff9e7;
  padding: 0.5rem;
  border-radius: 0.5rem;
}

.lazy-component-target-internal {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.virtual-scroller-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 3rem;
  transition: height ease-out 250ms;
}

.virtual-scroller-button.hidden {
  height: 1px;
  overflow: clip;
  transition: height ease-out 250ms;
  opacity: 0;
}

/*@Is supported in all browsers*/
/*noinspection CssInvalidAtRule*/
@starting-style {
  .virtual-scroller-button {
    height: 1px;
  }
}

.placeholder {
  text-align: center;
  padding-top: 5rem;
}

@keyframes spinner {
  0% {
    rotate: 0deg;
  }
  50% {
    rotate: 180deg;
  }
  100% {
    rotate: 360deg;
  }
}

.ph.ph-spinner {
  animation: 3s spinner infinite;
}

.host {
  opacity: 0.5;
}

.lazy-component-target-internal.visible {
  transition: min-height 1s ease-in;
  min-height: 0;
}

.lazy-component-target-internal {
  min-height: var(--height);
}

/*@Is supported in all browsers*/
/*noinspection CssInvalidAtRule*/
@starting-style {
  .lazy-component-target-internal.visible {
    --height: 0px;
    min-height: var(--height);
  }
}