html,
body {
  font-family: var(--tkno-font-body);
  background-color: var(--tkno-color-bg);
  color: var(--tkno-color-text);
}

a,
.btn-link {
  color: var(--tkno-color-link);
}

a:hover,
.btn-link:hover {
  color: var(--tkno-color-link-hover);
}

.btn-primary {
  --bs-btn-color: var(--tkno-color-on-primary);
  --bs-btn-bg: var(--tkno-color-primary);
  --bs-btn-border-color: var(--tkno-color-primary-border);
  --bs-btn-hover-color: var(--tkno-color-on-primary);
  --bs-btn-hover-bg: var(--tkno-color-primary-border);
  --bs-btn-hover-border-color: var(--tkno-color-primary-border);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: var(--tkno-space-zero) var(--tkno-space-zero) var(--tkno-space-zero) var(--tkno-size-focus-ring-inner) var(--tkno-color-bg), var(--tkno-space-zero) var(--tkno-space-zero) var(--tkno-space-zero) var(--tkno-size-focus-ring-outer) var(--tkno-color-focus-ring);
}

.content {
  padding-top: var(--tkno-space-content);
}

h1:focus {
  outline: none;
}

.valid.modified:not([type="checkbox"]) {
  outline: var(--tkno-size-border) solid var(--tkno-color-success);
}

.invalid,
.validation-message {
  color: var(--tkno-color-danger);
}

.invalid {
  outline: var(--tkno-size-border) solid var(--tkno-color-danger);
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODg5IDkzLjgwNzJMMjM2LjMzOCA5My4wMTYyIDIzNi44NTggOTIuMTMxNCAyNTkuNDczIDUzLjYyOTQgMjU5Ljk2MSA1Mi43OTg1IDI2MC40MDcgNTIuMjY1OEMyNjEuMiA1MS40ODM3IDI2Mi4yOTYgNTEgMjYzLjUwNiA1MVoiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat var(--tkno-space-4) / var(--tkno-size-error-icon), var(--tkno-color-error-bg);
  padding: var(--tkno-space-error-banner);
  color: var(--tkno-color-error-text);
}

.blazor-error-boundary::after {
  content: "Oops! Noe gikk galt her. Pr\00F8 v igjen, og kontakt oss dersom feilen vedvarer.";
}

#blazor-error-ui {
  background: var(--tkno-color-error-ui-bg);
  bottom: var(--tkno-space-zero);
  box-shadow: var(--tkno-shadow-error-ui);
  display: none;
  left: var(--tkno-space-zero);
  padding: var(--tkno-space-error-ui);
  position: fixed;
  width: var(--tkno-size-full);
  z-index: var(--tkno-zindex-error-ui);
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: var(--tkno-space-dismiss-right);
  top: var(--tkno-space-dismiss-top);
}

.darker-border-checkbox.form-check-input {
  border-color: var(--tkno-color-border-strong);
}

.form-control::placeholder {
  color: color-mix(in srgb, var(--tkno-color-text) var(--tkno-opacity-muted-text), var(--tkno-color-transparent));
}

.btn-outline-secondary,
.btn-outline-primary {
  color: var(--tkno-color-text);
  border-color: var(--tkno-color-border);
}

.btn-outline-secondary:hover,
.btn-outline-primary:hover {
  color: var(--tkno-color-on-primary);
}

.card-img-top-fixed,
.card-img-top-fixed-no-fit {
  height: var(--tkno-size-card-image);
  padding: var(--tkno-space-image-inset);
}

.card-img-top-fixed {
  object-fit: contain;
}

.grid-image img {
  height: var(--tkno-size-grid-image);
  width: var(--tkno-size-grid-image);
}

.mode-btn.e-btn {
  background-color: var(--tkno-color-surface-alt);
  color: var(--tkno-color-text);
  border: var(--tkno-size-border) solid color-mix(in srgb, var(--tkno-color-text) var(--tkno-opacity-border), var(--tkno-color-transparent));
  padding: var(--tkno-space-mode-button);
  text-align: left;
}

.mode-btn.e-btn:hover,
.mode-btn.e-btn:focus,
.mode-btn.e-btn:active {
  background-color: color-mix(in srgb, var(--tkno-color-primary) var(--tkno-opacity-primary-hover), var(--tkno-color-surface-alt));
  color: var(--tkno-color-text);
  border-color: color-mix(in srgb, var(--tkno-color-primary) var(--tkno-opacity-primary-border), var(--tkno-color-transparent));
}

.mode-btn.selected {
  background-color: var(--tkno-color-nav-active);
  color: var(--tkno-color-text);
}

.feature-icon {
  width: var(--tkno-size-feature-icon);
  height: var(--tkno-size-feature-icon);
  border-radius: var(--tkno-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--tkno-color-primary) var(--tkno-opacity-primary-fill), var(--tkno-color-transparent));
  color: var(--tkno-color-feature-icon);
}

.feature-icon .bi {
  font-size: var(--tkno-size-icon);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--tkno-space-2);
  color: color-mix(in srgb, var(--tkno-color-nav-text) var(--tkno-opacity-nav-text), var(--tkno-color-transparent));
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

.back-link:hover {
  color: var(--tkno-color-nav-brand);
}

.mode-subtitle {
  color: color-mix(in srgb, var(--tkno-color-text) var(--tkno-opacity-muted-text), var(--tkno-color-transparent));
}

.panel-muted-text {
  color: var(--tkno-color-panel-text-muted);
}

.e-sidebar {
  background-color: var(--tkno-color-sidebar-bg) !important;
  color: var(--tkno-color-on-sidebar) !important;
  font-family: var(--tkno-font-body);
  font-size: var(--tkno-font-size-sm);
}

.e-sidebar-header {
  background-color: var(--tkno-color-sidebar-header-bg);
}

.e-sidebar .e-btn.e-flat {
  color: var(--tkno-color-panel-text) !important;
  border: 1px solid var(--tkno-color-panel-outline);
  background-color: var(--tkno-color-panel-surface);
}

.e-sidebar .e-btn.e-flat:hover,
.e-sidebar .e-btn.e-flat:focus-visible {
  background-color: var(--tkno-color-panel-hover);
}

[data-bs-theme] {
  --color-sf-primary: var(--tkno-color-primary);
  --color-sf-primary-bg-color: var(--tkno-color-primary);
  --color-sf-primary-border-color: var(--tkno-color-primary-border);
  --color-sf-primary-text: var(--tkno-color-on-primary);
  --color-sf-primary-text-color: var(--tkno-color-on-primary);
  --color-sf-content-bg-color: var(--tkno-color-surface);
  --color-sf-content-text-color: var(--tkno-color-text);
  --color-sf-border: var(--tkno-color-border);
  --color-sf-placeholder-text-color: var(--tkno-color-text-muted);
}

.e-sidebar .e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
.e-sidebar .e-float-input.e-control-wrapper:not(.e-error) input:read-only ~ label.e-float-text,
.e-sidebar .e-float-input.e-control-wrapper:not(.e-error) input:read-only ~ label.e-label-top.e-float-text,
.e-sidebar .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
.e-sidebar .e-float-input.e-control-wrapper:not(.e-error) textarea:valid ~ label.e-float-text,
.e-sidebar .e-float-input.e-control-wrapper:not(.e-error) textarea ~ label.e-label-top.e-float-text,
.e-sidebar .e-checkbox-wrapper .e-label,
.e-sidebar .e-checkbox-wrapper:hover .e-label {
  color: var(--tkno-color-on-sidebar);
}

.e-sidebar .e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
.e-sidebar .e-float-input.e-control-wrapper:not(.e-error) input:read-only ~ label.e-float-text,
.e-sidebar .e-float-input.e-control-wrapper:not(.e-error) input:read-only ~ label.e-label-top.e-float-text,
.e-sidebar .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
.e-sidebar .e-float-input.e-control-wrapper:not(.e-error) textarea:valid ~ label.e-float-text,
.e-sidebar .e-float-input.e-control-wrapper:not(.e-error) textarea ~ label.e-label-top.e-float-text {
  font-family: var(--tkno-font-body);
}