#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: 3.5rem;
        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."
    }


.blazor-demo-dovita {
    cursor: pointer !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
}
/* ---------------------------------------------------------------------------
   DOvita addon buttons
   ---------------------------------------------------------------------------
   Shared skin for icon buttons that sit next to an input inside a Blazorise
   Addons group: the search buttons on the Level/Category/Theme/Unit/Country
   pickers and the prolong buttons on the client goal End Date field.

   These are deliberately flat - icon only, no background or border at rest - so
   they stay quiet next to the input instead of competing with it. Because a flat
   button gives no affordance on its own, the hover, focus and active states below
   are what make it read as clickable, so do not drop them.

   Selectors are qualified with the button element to raise specificity above
   Bootstrap's own .btn rules, which would otherwise win on the colour properties.

   Hex values are hardcoded because this file cannot reference DOvitaColorModel;
   the constant name is given in each comment.

   NOTE: duplicated in DOvita.ProApp and DOvita.AdminApp. DOvita.Shared.Components
   is a Razor class library with no wwwroot, so both host apps carry a copy. Keep
   the two in sync when changing this block.
   --------------------------------------------------------------------------- */
button.dovita-addon-button {
    /* Matches the Bootstrap .form-control height so the icon lines up with the
       input it sits beside, regardless of any wrapper (e.g. a Tooltip span). */
    height: calc(1.5em + .75rem + 2px);
    min-width: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .375rem;
    color: #1a3733; /* DOvitaColorModel.TimberGreen */
    box-shadow: none;
    transition: background-color .15s ease-in-out, color .15s ease-in-out, border-color .15s ease-in-out;
}

/* A soft tint rather than a solid fill, so the button lights up on hover without
   the boxed look returning. */
button.dovita-addon-button:hover {
    background-color: rgba(46, 99, 96, .12); /* DOvitaColorModel.DesignGuideMediumGreenBackground at 12% */
    border-color: transparent;
    color: #2E6360; /* DOvitaColorModel.DesignGuideMediumGreenBackground */
}

/* Keyboard users get a clearly visible ring - with no resting border, this is the
   only thing that shows which control is focused. */
button.dovita-addon-button:focus-visible {
    outline: none;
    background-color: rgba(46, 99, 96, .12);
    border-color: #00C195; /* DOvitaColorModel.DesignGuideLightGreenBackground */
    box-shadow: 0 0 0 .2rem rgba(0, 193, 149, .35);
    color: #2E6360; /* DOvitaColorModel.DesignGuideMediumGreenBackground */
    z-index: 3;
}

button.dovita-addon-button:active {
    background-color: rgba(26, 55, 51, .18); /* DOvitaColorModel.TimberGreen at 18% */
    color: #1a3733; /* DOvitaColorModel.TimberGreen */
}

/* Blazorise wraps tooltip-enabled buttons in an inline span, which would otherwise
   collapse to text height and leave the button vertically misaligned. */
.dovita-addon-button-host {
    display: inline-flex;
    align-items: stretch;
}
/* ---------------------------------------------------------------------------
   DOvita addon groups
   ---------------------------------------------------------------------------
   Applied to a Blazorise <Addons> group that contains a validated input.

   Bootstrap renders .invalid-feedback as a display:block, width:100% element
   INSIDE the .input-group flex row. That full-width item forces a flex line
   break, which pushes the addon button (the picker search icon, or the End Date
   prolong buttons) onto the next line as soon as the field shows an error.

   Taking the message out of flow and positioning it under the group keeps the
   input and its button on one line in both the valid and invalid state.
   --------------------------------------------------------------------------- */
.dovita-addon-group {
    position: relative;
    flex-wrap: nowrap;
}

.dovita-addon-group .invalid-feedback {
    position: absolute;
    top: 100%;
    left: 0;
}

/* Reserve room for the absolutely positioned message so it never covers the next field. */
.dovita-addon-group:has(.is-invalid) {
    margin-bottom: 1.5rem;
}