:root {
    --atlas-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --atlas-font-size-base: 1rem;
    --atlas-font-size-sm: 0.875rem;
    --atlas-font-size-lg: 1.125rem;
    --atlas-color-primary: #0141A6;
    --atlas-color-primary-rgb: 1, 65, 166;
    --atlas-color-primary-hover: #1d4ed8;
    --atlas-color-primary-contrast: #ffffff;
    --atlas-color-secondary: #64748b;
    --atlas-color-secondary-rgb: 100, 116, 139;
    --atlas-color-surface: #ffffff;
    --atlas-color-surface-muted: #f4f6f8;
    --atlas-color-border: #d8dee4;
    --atlas-color-border-rgb: 216, 222, 228;
    --atlas-color-text: #1f2933;
    --atlas-color-text-rgb: 31, 41, 51;
    --atlas-color-text-muted: #64748b;
    --atlas-color-success: #26b050;
    --atlas-color-success-rgb: 38, 176, 80;
    --atlas-color-danger: #e50000;
    --atlas-color-danger-light: #f24f4f;
    --atlas-color-danger-rgb: 229, 0, 0;
    --atlas-color-danger-dark: #b32121;
    --atlas-color-focus: #258cfb;
    --atlas-color-checkbox-border: #929292;
    --atlas-color-warning-surface: lightyellow;
    --atlas-color-shadow: rgba(0, 0, 0, 0.2);
    --atlas-color-shadow-strong: rgba(0, 0, 0, 0.3);
    --atlas-color-overlay: rgba(0, 0, 0, 0.4);
    --atlas-color-nav-text: #d7d7d7;
    --atlas-color-nav-contrast: #ffffff;
    --atlas-color-nav-surface: rgba(0, 0, 0, 0.4);
    --atlas-color-nav-hover: rgba(255, 255, 255, 0.1);
    --atlas-color-nav-active: rgba(255, 255, 255, 0.37);
    --atlas-color-nav-toggle-active: rgba(255, 255, 255, 0.5);
    --atlas-space-1: 0.25rem;
    --atlas-space-2: 0.5rem;
    --atlas-space-3: 0.75rem;
    --atlas-space-4: 1rem;
    --atlas-space-5: 1.25rem;
    --atlas-space-6: 1.5rem;
    --atlas-space-8: 2rem;
    --atlas-border-width: 0.0625rem;
    --atlas-radius-sm: 0.25rem;
    --atlas-radius-md: 0.5rem;
    --atlas-header-height: 3.5rem;
}

/* Desktop layout minimum until mobile layouts are supported. */
html {
    min-width: 1440px;
    min-height: 800px;
}

html, body {
    font-family: var(--atlas-font-family);
    font-size: var(--atlas-font-size-base);
    color: var(--atlas-color-text);
}

.atlas-client-ready {
    display: none;
}

.atlas-client-ready + .atlas-global-loader {
    display: none;
}

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

.btn-primary {
    color: var(--atlas-color-primary-contrast);
    background-color: var(--atlas-color-primary);
    border-color: var(--atlas-color-primary-hover);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--atlas-color-surface), 0 0 0 0.25rem var(--atlas-color-focus);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

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

.invalid {
    outline: var(--atlas-border-width) solid var(--atlas-color-danger);
}

.validation-message {
    color: var(--atlas-color-danger);
}

.blazor-error-boundary {
    background: var(--atlas-color-danger-dark);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--atlas-color-primary-contrast);
}

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

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

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Override the standard MudBlazor theme with Atlas CSS variables. */
:root {
    --mud-palette-primary: var(--atlas-color-primary) !important;
    --mud-palette-primary-rgb: var(--atlas-color-primary-rgb) !important;
    --mud-palette-primary-darken: var(--atlas-color-primary-hover) !important;
    --mud-palette-primary-hover: rgba(var(--atlas-color-primary-rgb), 0.1) !important;
    --mud-palette-primary-text: var(--atlas-color-primary-contrast) !important;

    --mud-palette-secondary: var(--atlas-color-secondary) !important;
    --mud-palette-secondary-rgb: var(--atlas-color-secondary-rgb) !important;
    --mud-palette-secondary-hover: rgba(var(--atlas-color-secondary-rgb), 0.1) !important;
    --mud-palette-background: var(--atlas-color-surface-muted) !important;
    --mud-palette-background-gray: var(--atlas-color-surface-muted) !important;
    --mud-palette-surface: var(--atlas-color-surface) !important;
    --mud-palette-lines-default: var(--atlas-color-border) !important;
    --mud-palette-divider: var(--atlas-color-border) !important;
    --mud-palette-divider-rgb: var(--atlas-color-border-rgb) !important;
    --mud-palette-text-primary: var(--atlas-color-text) !important;
    --mud-palette-text-primary-rgb: var(--atlas-color-text-rgb) !important;
    --mud-palette-text-secondary: var(--atlas-color-text-muted) !important;
    --mud-palette-success: var(--atlas-color-success) !important;
    --mud-palette-success-rgb: var(--atlas-color-success-rgb) !important;
    --mud-palette-error: var(--atlas-color-danger) !important;
    --mud-palette-error-rgb: var(--atlas-color-danger-rgb) !important;

    --mud-typography-default-family: var(--atlas-font-family) !important;
    --mud-typography-default-size: var(--atlas-font-size-base) !important;
    --mud-typography-default-lineheight: 1.5 !important;
    --mud-typography-default-letterspacing: 0 !important;
    --mud-typography-body1-family: var(--atlas-font-family) !important;
    --mud-typography-body1-size: var(--atlas-font-size-base) !important;
    --mud-typography-body1-lineheight: 1.5 !important;
    --mud-typography-body1-letterspacing: 0 !important;
    --mud-typography-body2-family: var(--atlas-font-family) !important;
    --mud-typography-body2-size: var(--atlas-font-size-sm) !important;
    --mud-typography-body2-lineheight: 1.43 !important;
    --mud-typography-body2-letterspacing: 0 !important;
    --mud-typography-button-family: var(--atlas-font-family) !important;
    --mud-typography-button-size: var(--atlas-font-size-sm) !important;
    --mud-typography-button-lineheight: 1.75 !important;
    --mud-typography-button-letterspacing: 0 !important;
    --mud-typography-button-text-transform: none !important;
}