/* The Telerik Bootstrap theme derives --kendo-color-primary-on-surface from its primary
   colour, which renders as #0d6efd. Against the theme's own surface colour (#feffff) that
   measures 4.49:1, just under the 4.5:1 that WCAG 1.4.3 requires for normal text, so
   primary-coloured text such as inactive dock panel titles fails. This variable is used
   only for text and icons drawn on light surfaces, never for solid fills, so darkening it
   raises contrast without altering button or selection backgrounds. #0a58ca measures
   6.43:1 on the same surface. */
:root {
    --kendo-color-primary-on-surface: #0a58ca;
}

/* Links that open in a new tab must indicate it to sighted users as well as to screen
   reader users; the hidden text alone leaves sighted users with no warning. The icon is
   aria-hidden so it is not announced twice, and inherits the link colour so it keeps the
   link's contrast ratio. */
.new-tab-icon {
    width: 0.75em;
    height: 0.75em;
    margin-left: 0.25em;
    vertical-align: baseline;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

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

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: 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."
    }

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

.dropdown:hover > .dropdown-menu {
    display: block !important;
}

.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu.submenu-open > .dropdown-menu {
    display: block !important;
    left: 100%;
    margin-top: -37px;
}

/* Opening a menu by pointing at it means the menu is still being pointed at once an entry has been
   chosen, so the two rules above would hold it open until the pointer moved away. Bootstrap closes a
   menu by removing its "show" marker, which those rules override. Marking the menu as dismissed closes
   it straight away instead. The "show" test means a menu the visitor has deliberately opened again, by
   clicking or from the keyboard, is never held shut by a marker left over from an earlier choice, and
   the same goes for a second level opened from the keyboard. */
.dropdown.nav-dismissed > .dropdown-menu:not(.show),
.dropdown-submenu.nav-dismissed > .dropdown-menu:not(.show) {
    display: none !important;
}

/* The headings that open a menu are buttons so that they can be reached and operated from the
   keyboard. These put them back to looking exactly like the links around them, which a browser's own
   styling for buttons would otherwise change. */
.navbar button.nav-link {
    text-align: inherit;
}

.dropdown-submenu-toggle {
    cursor: pointer;
}

.dropdown-item {
    font-size: small; /* 13px */
}

.dropdown-toggle::after {
    font-size: var(--font-md);
    margin-bottom: -2px;
}

.dropdown-menu li a.active {
    color: #fff;
}

.custom-toggle-arrow {
    font-size: 18px;
    margin-top: 1px;
    line-height: 12px;
}

.carousel-item img {
    margin: 0 auto;
    max-width: 100%;
    display: block;
}



/* GRID template */
div.custom-ellipsis div,
/* OnCellRender */
.k-grid td.custom-ellipsis div,
/* OnRowRender */
.k-grid tr.custom-ellipsis .k-table-td div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.k-column-title {
    font-weight: bold;
}

.k-table-td div {
    margin: 0;
    padding: 0 5px
}

.k-table-td.right-align div {
    text-align: right;
}

.selectedCell {
    border: 1px solid black !important;
    background-color: transparent !important;
}
/* Keyboard focus indicator. Kendo's default draws the ring at 8% of the inverse colour, which composites to
   1.16:1 against both the plain and the selected row background - a clear failure of WCAG 2.1 SC 1.4.11, which
   asks for 3:1. Now that the arrow keys drive the selection the ring is load-bearing rather than decorative.
   70% is the lowest value that passes on both backgrounds, measured on the rendered pixels at 5.77:1 over a
   plain row and 4.86:1 over a selected one; 50% reaches only 2.84:1 over a selected row. Alpha only - the ring
   keeps Kendo's size, position and colour. */
.k-grid .k-table-tbody .k-table-td:focus,
.k-grid .k-table-tbody .k-table-td.k-focus,
.k-grid .k-table-tbody .k-table-row:focus,
.k-grid .k-table-tbody .k-table-row.k-focus {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--kendo-color-inverse) 70%, transparent);
}
/* The cell contents of a BaseGrid carry the click that selects the cell, so they have to cover the whole cell.
   Kendo pads the cell itself, which left the clickable part 24px tall inside a 40px cell: a click in the 8px
   above or below it reached the row but not the cell, so the row highlighted while the record shown by the
   Images, Record and Map tools stayed on the one before. Moving that padding onto the contents closes the gap
   without moving anything on screen. The :has() limits this to cells BaseGrid rendered, leaving any other
   Telerik grid alone. */
.k-grid td.k-table-td:has(> .grid-cell-content) {
    padding-block: 0;
    /* The same argument applies across the cell. Kendo's inline padding left 4px at each side of the cell
       outside the clickable contents, so a click within 4px of a column edge reached the row but not the
       cell - the horizontal twin of the gap above, and on a 180px column it is 8px of every cell. The
       contents below take that spacing over, so the text does not move. */
    padding-inline: 0;
    /* Gives the contents below a definite height to resolve their min-height against. Without it a percentage
       min-height has nothing to measure in a table cell and is silently ignored, so the contents would only
       happen to fill the cell when the font and padding added up to the row height by coincidence. The value
       inherited here is the row height that BaseGrid.RowHeight put on the row, so this does not restate it. */
    height: inherit;
}

/* ----------------------------------------------------------------------------------------------------------
   Grid density configuration points.

   Override these to change the look of the Explore grids without touching code. A project stylesheet is loaded
   after this file, so a single project can override them on its own:

       --bol-grid-font-size            unset, so cells and headers keep the page font (16px)
       --bol-grid-cell-padding-block   unset, so it follows the grid's Kendo size (4px at sm, 8px otherwise)
       --bol-grid-cell-padding-inline  unset, so it follows the grid's Kendo size the same way: 14px at sm
                                       and 18px otherwise, being a 10px indent plus the spacing moved off the
                                       cell. Setting it replaces the whole of that, so the value given is the
                                       distance from the column edge to the text.

   Row height is deliberately NOT one of them. It is written into every row as an inline style from
   BaseGrid.RowHeight, and the same property is divided into the measured grid height by ShowRecordAsync to work
   out how far it may scroll. A second copy of it in CSS could be edited on its own, and the markup, the scroll
   arithmetic and the stylesheet would then disagree without anything reporting an error. Nothing here states a
   row height - the cell above inherits it rather than declaring it - so nothing here can contradict it.

   The clickable contents must cover the whole cell, or clicks near any edge select the row without selecting
   the cell, and the Images, Record and Map tools then lag a record behind. That is what the height:inherit
   above protects vertically and the padding-inline:0 protects horizontally: the contents stretch to the full
   cell for any combination of these values, so the invariant holds rather than depending on the numbers
   happening to add up.

   The defaults do still add up exactly - a 16px font on a 1.5 line box is 24px, plus 4px above and below, which
   is the default RowHeight of 32px - so the text is centred. Smaller values simply sit a little high in the row.
   Larger ones are the one direction to be careful of, and not for the reason it looks: the row height is a
   floor rather than a cap, so the row grows instead of clipping - measured at 38px for a 20px font and 50px for
   28px. The clickable contents grow with it, so the invariant above still holds, but ShowRecordAsync and the
   virtual scroller both size their arithmetic on RowHeight, and rows taller than it make scroll-into-view land
   short. If the total here is raised past RowHeight, raise BaseGrid.RowHeight to match it.
   ---------------------------------------------------------------------------------------------------------- */
.k-grid td.k-table-td > .grid-cell-content {
    font-size: var(--bol-grid-font-size, inherit);
    padding-block: var(--bol-grid-cell-padding-block, var(--kendo-spacing-2, 0.5rem));
    padding-inline: var(--bol-grid-cell-padding-inline, calc(10px + var(--kendo-spacing-2, 0.5rem)));
    min-height: 100%;
    box-sizing: border-box;
}
/* The theme sets its own font size on the grid's table, which overrides anything inherited from the grid, so
   the size above has to be set on the cell contents themselves. The headers need the same treatment to stay in
   proportion with the cells, and are matched through the contents so only BaseGrid's grids are affected. */
.k-grid:has(td.k-table-td > .grid-cell-content) th.k-table-th {
    font-size: var(--bol-grid-font-size, inherit);
}
/* The padding moved off the cell has to keep tracking the grid's size, or it would hold the contents at the
   medium height and cancel the density the size class is there to apply. The theme spaces a small grid by
   spacing-1 and everything else by spacing-2, so these two rules reproduce that split as the default that an
   explicit --bol-grid-cell-padding-block overrides. */
.k-grid.k-grid-sm td.k-table-td > .grid-cell-content {
    padding-block: var(--bol-grid-cell-padding-block, var(--kendo-spacing-1, 0.25rem));
    padding-inline: var(--bol-grid-cell-padding-inline, calc(10px + var(--kendo-spacing-1, 0.25rem)));
}

/* ----------------------------------------------------------------------------------------------------------
   Filter row density.

   The grid's Size does not reach the filter row, so its inputs stayed at the medium metrics while the data
   rows went to small, leaving the filter row taller than the rows it filters. Measured, the 49.9px was a 24px
   line box, 6px above and below it inside the input, a 0.64px border each side, and 6px above and below that
   on the cell.

   These two are configuration points in the same way as the cell values above:

       --bol-grid-filter-input-padding-block   2px, inside the input, around its text
       --bol-grid-filter-cell-padding-block    2px, on the filter row cell, around the input

   Nothing here sets a height. The row is left to size to its contents, so whatever the inputs and their clear
   buttons need is what the row gets: these values can make it roomier but cannot squeeze it below the controls.
   That matters because a filter input that is shorter than its own text is unusable, and because the clear
   button in each filter cell is a click target - keep it at or above 24px square, which is the minimum target
   size the accessibility audit is measured against.

   Scoped through .grid-cell-content so only BaseGrid's grids are affected, leaving the Column Manager, Record
   and Summary grids and any other Telerik grid alone. */
.k-grid:has(td.k-table-td > .grid-cell-content) .k-filter-row > td,
.k-grid:has(td.k-table-td > .grid-cell-content) .k-filter-row > th {
    padding-block: var(--bol-grid-filter-cell-padding-block, 2px);
}
.k-grid:has(td.k-table-td > .grid-cell-content) .k-filter-row .k-input-inner {
    padding-block: var(--bol-grid-filter-input-padding-block, 2px);
}
/* Hides built in column header filtering section */
div.k-columnmenu-item-wrapper:has(span.k-svg-i-filter) {
    display: none !important;
}

.toolDiv {
    border: 1px solid black;
    background-color: #E0E0E0;
}


.toolwindow h2, .toolwindow h3, .toolwindow h4, .toolwindow h5� {
    font-size: 1.2rem;
}


.toolwindow small {
    font-size: .875em;
    text-transform: uppercase;
    display: block;
}

.bol-grid-container {
    width: calc(100vw - 20px);
    box-sizing: border-box;
    margin: 0;
    padding: 2em 1em;
}

/* Hidden off-screen by default, visible when focused */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-150%);
    z-index: 10000;
    padding: 0.75rem 1rem;
    background: #ffffff;
    color: #000000;
    border: 2px solid #000000;
    border-radius: 0 0 0.25rem 0;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.2;
}

    .skip-link:focus,
    .skip-link:focus-visible {
        transform: translateY(0);
        outline: 3px solid #005fcc;
        outline-offset: 2px;
        text-decoration: none;
    }