@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
/*html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1:focus {
outline: none;
}
a, .btn-link {
color: #0071c1;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.content {
padding-top: 1.1rem;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
*/
/*#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."
}
*/
/* ==========================================================================
Servii Custom Theme Overrides
Base: Radzen Software theme
Primary: #405189 (professional navy-indigo)
--------------------------------------------------------------------------
This file overrides the Software theme's CSS variables. It must be loaded
AFTER the Radzen theme stylesheet so the cascade applies correctly.
Load order (e.g. in App.razor / _Host.cshtml / index.html):
Palette design: muted, desaturated accents chosen to sit quietly alongside
the navy primary. All functional colors share roughly the same lightness
and saturation range so no single alert type dominates the UI.
Tint/shade values are pre-computed using Radzen's SCSS formulas:
- *-light = mix(white, base, 12%) (16% for info/success/warning/danger)
- *-lighter = rgba(base, 0.16) (0.20 for secondary/info)
- *-dark = mix(black, base, 8%) (16% for info/success/warning/danger)
- *-darker = mix(black, base, 25%)
========================================================================== */
:root {
/* ----- Primary: #405189 (navy-indigo) ------------------------------- */
--rz-primary: #405189;
--rz-primary-light: #576797; /* mix(#fff, primary, 12%) */
--rz-primary-lighter: rgba(64, 81, 137, 0.16);
--rz-primary-dark: #3b4a7e; /* mix(#000, primary, 8%) */
--rz-primary-darker: #303c67; /* mix(#000, primary, 25%) */
--rz-on-primary: #ffffff;
--rz-on-primary-light: #ffffff;
--rz-on-primary-lighter: #303c67;
--rz-on-primary-dark: #ffffff;
--rz-on-primary-darker: #ffffff;
/* ----- Secondary: #7b859b (warm slate-grey) ------------------------- */
/* Neutral enough to disappear into chrome, warm enough not to feel cold */
--rz-secondary: #7b859b;
--rz-secondary-light: #8a93a6; /* mix(#fff, secondary, 12%) */
--rz-secondary-lighter: rgba(123, 133, 155, 0.20);
--rz-secondary-dark: #717a8f; /* mix(#000, secondary, 8%) */
--rz-secondary-darker: #5c6474; /* mix(#000, secondary, 25%) */
--rz-on-secondary: #ffffff;
--rz-on-secondary-light: #ffffff;
--rz-on-secondary-lighter: #5c6474;
--rz-on-secondary-dark: #ffffff;
--rz-on-secondary-darker: #ffffff;
/* ----- Info: #5b7ba0 (dusty steel-blue) ----------------------------- */
/* Sits in the same family as primary but lighter and less saturated */
--rz-info: #5b7ba0;
--rz-info-light: #6b88aa; /* mix(#fff, info, 16%) */
--rz-info-lighter: rgba(91, 123, 160, 0.20);
--rz-info-dark: #4d6786; /* mix(#000, info, 16%) */
--rz-info-darker: #445c78; /* mix(#000, info, 25%) */
--rz-on-info: #ffffff;
--rz-on-info-light: #ffffff;
--rz-on-info-lighter: #445c78;
--rz-on-info-dark: #ffffff;
--rz-on-info-darker: #ffffff;
/* ----- Success: #6b9b7a (sage green) -------------------------------- */
/* Desaturated, moss-toned — reads as positive without being cheerful */
--rz-success: #6b9b7a;
--rz-success-light: #7aa488; /* mix(#fff, success, 16%) */
--rz-success-lighter: rgba(107, 155, 122, 0.16);
--rz-success-dark: #5a8266; /* mix(#000, success, 16%) */
--rz-success-darker: #50745c; /* mix(#000, success, 25%) */
--rz-on-success: #ffffff;
--rz-on-success-light: #ffffff;
--rz-on-success-lighter: #50745c;
--rz-on-success-dark: #ffffff;
--rz-on-success-darker: #ffffff;
/* ----- Warning: #c8984a (muted gold) -------------------------------- */
/* Warm ochre rather than bright amber — still reads as caution */
--rz-warning: #c8984a;
--rz-warning-light: #cea25d; /* mix(#fff, warning, 16%) */
--rz-warning-lighter: rgba(200, 152, 74, 0.16);
--rz-warning-dark: #a87f3e; /* mix(#000, warning, 16%) */
--rz-warning-darker: #967238; /* mix(#000, warning, 25%) */
--rz-on-warning: #ffffff;
--rz-on-warning-light: #ffffff;
--rz-on-warning-lighter: #967238;
--rz-on-warning-dark: #ffffff;
--rz-on-warning-darker: #ffffff;
/* ----- Danger: #b06060 (dusty terracotta) --------------------------- */
/* Clearly reads as negative/destructive but without alarm-red panic */
--rz-danger: #b06060;
--rz-danger-light: #b77070; /* mix(#fff, danger, 16%) */
--rz-danger-lighter: rgba(176, 96, 96, 0.16);
--rz-danger-dark: #945151; /* mix(#000, danger, 16%) */
--rz-danger-darker: #844848; /* mix(#000, danger, 25%) */
--rz-on-danger: #ffffff;
--rz-on-danger-light: #ffffff;
--rz-on-danger-lighter: #844848;
--rz-on-danger-dark: #ffffff;
--rz-on-danger-darker: #ffffff;
/* ----- Link color --------------------------------------------------- */
--rz-link-color: var(--rz-primary-dark);
--rz-link-hover-color: var(--rz-primary-darker);
/* ----- Input focus ring -------------------------------------------- */
--rz-input-focus-shadow: 0 0 0 1px #ffffff,
0 0 0 3px rgba(64, 81, 137, 0.25);
}
/* ==========================================================================
Optional: custom tweaks below this line
-------------------------------------------------------------------------- */
/* Example — uncomment if you want the top AppBar to use the primary color:
.rz-appbar {
background-color: var(--rz-primary);
color: var(--rz-on-primary);
}
*/