/*
 * Blazor
 */
#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  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."
}

/**
 * Reconnect Modal
 */
#components-reconnect-modal {
  display: none;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
  display: block;
}

/**
  * Loading Splash
  */
#loading-splash {
  width: 100vw;
  height: 100vh;
  background: rgb(22, 21, 20);

  --mud-palette-primary: rgb(218, 59, 1);
  --mud-palette-text-primary: rgb(200, 198, 196);
  --mud-palette-text-secondary: rgb(96, 94, 92);

  --mud-typography-subtitle1-size: 68px;
  --mud-typography-subtitle1-family: "Barlow", "sans-serif";
  --mud-typography-subtitle1-weight: 400;
  --mud-typography-subtitle1-lineheight: 76px;
  --mud-typography-subtitle1-letterspacing: normal;
  --mud-typography-subtitle1-text-transform: none;

  --mud-typography-subtitle2-size: 22px;
  --mud-typography-subtitle2-family: "Barlow", "sans-serif";
  --mud-typography-subtitle2-weight: 400;
  --mud-typography-subtitle2-lineheight: 30px;
  --mud-typography-subtitle2-letterspacing: normal;
  --mud-typography-subtitle2-text-transform: none;

}

#loading-splash .mud-typography-subtitle1:after {
  content: var(--blazor-load-percentage-text, "Loading");
}

.mud-progress-linear-bar {
  transform: translateX(calc(var(--blazor-load-percentage, 0) - 100%));
}

/*
 * Highlight.js
 */
pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em
}

code.hljs {
  padding: 3px 5px
}

.hljs {
  background: #1e1e1e;
  color: #BDBDBD
}

.hljs-keyword, .hljs-literal, .hljs-name, .hljs-symbol {
  color: #6C95EB
}

.hljs-link {
  color: #85C46C;
  text-decoration: underline
}

.hljs-built_in, .hljs-type {
  color: #6C95EB
}

.hljs-class {
  color: #C191FF;
}

.hljs-number {
  color: #ED94C0
}

.hljs-meta .hljs-string, .hljs-string {
  color: #d69d85
}

.hljs-regexp, .hljs-template-tag {
  color: #9a5334
}

.hljs-formula, .hljs-params, .hljs-subst {
  color: #E1BFFF
}

.hljs-function {
  color: #BDBDBD
}

.hljs-function .hljs-title {
  color: #39CC9B
}

.hljs-function .hljs-params {
  color: #BDBDBD
}

.hljs-title {
   color: #C191FF
 }

.hljs-comment, .hljs-quote {
  color: #85C46C;
  font-style: italic
}

.hljs-doctag {
  color: #85C46C
}

.hljs-meta, .hljs-meta .hljs-keyword, .hljs-tag {
  color: #9b9b9b
}

.hljs-template-variable, .hljs-variable {
  color: #bd63c5
}

.hljs-attr, .hljs-attribute {
  color: #9cdcfe
}

.hljs-section {
  color: gold
}

.hljs-emphasis {
  font-style: italic
}

.hljs-strong {
  font-weight: 700
}

.hljs-bullet, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-selector-pseudo, .hljs-selector-tag {
  color: #d7ba7d
}

.hljs-addition {
  background-color: #144212;
  display: inline-block;
  width: 100%
}

.hljs-deletion {
  background-color: #600;
  display: inline-block;
  width: 100%
}

/*
 * MudBlazor overrides
 */
/* xs */
:root {
  --mud-drawer-width-left: 300px !important;
}

/* md */
@media (min-width: 500px) {
  :root {
    --mud-drawer-width-left: 480px !important;
  }
}

/* sm */
@media (min-width: 600px) {
  :root {
    --mud-drawer-width-left: 480px !important;
  }
}

/* md */
@media (min-width: 960px) {
  :root {
    --mud-drawer-width-left: 360px !important;
  }
}

/* lg */
@media (min-width: 1280px) {
  :root {
    --mud-drawer-width-left: 420px !important;
  }
}

/* xl */
@media (min-width: 1920px) {
  :root {
    --mud-drawer-width-left: 480px !important;
  }
}

p a {
  color: var(--mud-palette-primary);
}

p a:active,
p a:hover,
p a:focus,
a.mud-nav-link:active,
a.mud-nav-link:hover,
a.mud-nav-link:focus {
  color: var(--mud-palette-secondary);
}

code {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 300;
}

var, .markdown code, code.paramref, code.typeparamref {
  padding: 1px 7px;
  background: var(--mud-palette-table-striped);
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 300;
  font-style: normal;
}

small {
  color: var(--mud-palette-text-secondary);
  font-size: 12px;
}

dl {
  display: grid;
  grid-template-columns: max-content auto;
  column-gap: 16px;
}

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

.mud-expand-panel-text {
  font-size: 14px;
  font-weight: 400;
}

.mud-nav-link {
  color: var(--mud-palette-text-primary);
}

.mud-typography-subtitle1 {
  color: var(--mud-palette-text-primary);
}

.mud-typography-subtitle2 {
  color: var(--mud-palette-text-secondary);
}

.mud-typography-caption {
  color: var(--mud-palette-text-secondary);
}

.mud-popover.mud-paper {
  background: var(--mud-palette-drawer-background);
}

.mud-progress-linear .mud-progress-linear-bar {
  transition: none;
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 400;
}

.markdown h1,
.markdown h2,
.markdown h3 {
  padding-bottom: .3em;
  border-bottom: 1px solid var(--mud-palette-divider);
}

.markdown p {
  margin-bottom: 16px;
}

.markdown :first-child {
  margin-top: 0 !important;
}

.markdown strong {
  font-weight: 700;
}

.markdown blockquote {
  padding: 0 1em;
  color: var(--mud-palette-text-secondary);
  border-left: .25em solid var(--mud-palette-divider);
}