h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: 1rem/1.8rem, #b32121;
    padding: 0.5rem 1rem 1rem 3.7rem;
    color: white;
}

.error-title {
    font-size: 1.5em;
    text-decoration: underline
}

.blazor-success {
    background: 1rem/1.8rem, #21a3f3;
    padding: 0.5rem 1rem 1rem 3.7rem;
    color: black;
}

.success-title {
    font-size: 1.5em;
    text-decoration: underline
}

.blazor-warning {
    background: 1rem/1.8rem, var(--ts-orange);
    padding: 0.5rem 2rem 1rem 2rem;
    color: black;
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.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;
}

body {
    --ts-blue: #00578E;
    --ts-orange: #E48D1A;
    --ts-red: #E03A3E;
    --ts-light-blue: #6B95BE;
    --ts-lighter-blue: #D8E0ED;
    --bs-body-bg: #FAFBFD;
    --line-color: #DCE4EC;
    color: #003C63;
    font-family: 'Dax', 'Source Sans 3', 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.btn:active {
    --bs-btn-active-color: inherit;
    --bs-btn-active-bg: inherit;
    --bs-btn-active-border-color: inherit;
}

.btn-primary {
    --bs-btn-bg: var(--ts-blue);
    --bs-btn-color: #FFFFFF;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--ts-light-blue);
}

.btn-primary.disabled {
    --bs-btn-disabled-bg: var(--ts-light-blue);
    --bs-btn-disabled-color: #E9EFF6;
}

.btn-outline-primary {
    --bs-btn-color: #13212D;
    --bs-btn-border-color: #C9D5E0;
    --bs-btn-hover-color: #00578E;
    --bs-btn-hover-border-color: #00578E;
    --bs-btn-hover-bg: inherit;
}

.btn-outline-primary.disabled {
    --bs-btn-disabled-color: #4C5D6C;
    --bs-btn-disabled-border-color: var(--ts-light-blue);
}

.btn-outline-danger {
    --bs-btn-bg: inherit;
    --bs-btn-color: inherit;
    --bs-btn-border-color: var(--ts-red);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--ts-red);
}

.navbar {
    background-color: #FFFFFF;
    color: #13212D;
    --bs-border-color: var(--line-color);
}

.nav-link {
    color: #4C5D6C;
    --bs-btn-active-color: var(--ts-blue);
    --bs-btn-active-bg: #E9EFF6;
}

.nav-link:hover {
    color: var(--ts-blue);
    background-color: #E9EFF6;
}

.nav-link:focus {
    color: var(--ts-blue);
}

.nav-title {
    --bs-btn-color: var(--ts-blue);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-color: var(--ts-blue);
    --bs-btn-active-bg: #FFFFFF;
}

.nav-title:hover {
    color: var(--ts-light-blue);
    background-color: #FFFFFF;
}

.nav-title:focus {
    color: var(--ts-blue);
}

.bg-info {
    background-color: var(--ts-lighter-blue) !important;
}

.pg-head {
    padding: 1rem 1.5rem;
    margin: 1rem;
    border-radius: 1rem;
    background: linear-gradient(180deg, #F3F6FA, #FFFFFF);
    border: 1px solid var(--line-color);
    box-shadow: 0 1px 2px rgba(12,44,73,0.04);
}

.pg-item {
    margin: 1rem;
    background: #FFFFFF;
    border: 1px solid var(--line-color);
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 1px 2px rgba(12, 44, 73, 0.04);
}