.refresh_card {
    cursor: pointer;
}

.select2-selection__clear {
    margin-right: 35px !important;
    margin-top: 3px !important;
}

ul.select2-results__options[aria-multiselectable="true"] .select2-results__option--selected {
    text-decoration: line-through;
}

.loadingoverlay {
    z-index: 1000 !important;
}

.help-box {
    background-color: rgba(255, 255, 255, 0.07);
}

tr.unread_message td {
    font-weight: bolder !important;
    color: rgb(13, 110, 253) !important;
}

/* A pink row to sit beside the theme's table-success and table-warning, which
   it has no pink for. Clearly pink rather than the theme's own pale
   table-danger, so it cannot be mistaken for the cream table-warning on a
   striped table (development request 323: a BOM line part-used, beside the
   orange of one with nothing used). Cells take the colour from
   --ct-table-bg; the striped/hover shades come from the rule below. */
.table-pink {
    --ct-table-color: #313a46;
    --ct-table-bg: #fbc8dc;
    --ct-table-border-color: #e6b5c9;
    color: var(--ct-table-color);
    border-color: var(--ct-table-border-color);
}

/* An orange row, which the theme has none of either: a parts enquiry line
   whose item has never been enquired about before (development request
   438), and the order lines bought from one. The note under the code says
   so in words, in the darker shade. */
.table-orange {
    --ct-table-color: #313a46;
    --ct-table-bg: #ffd3a8;
    --ct-table-border-color: #f0bd8c;
    color: var(--ct-table-color);
    border-color: var(--ct-table-border-color);
}

.first-time-note {
    color: #a34d00;
    font-weight: 600;
}

/* A link to an inactive customer, supplier or person in a type-ahead box,
   shown in amber rather than the theme's blue (development request 444).
   select2 puts each chip's text in its title, and the widget's label ends
   "(inactive)" (base.select2_widgets.active_state_label), so nothing has to
   mark the chip by hand. */
.select2-container .select2-selection--multiple .select2-selection__choice[title$="(inactive)"] {
    background-color: #fff3cd;
    color: #664d03;
}

.select2-container .select2-selection--multiple .select2-selection__choice[title$="(inactive)"] .select2-selection__choice__remove {
    color: #664d03;
    border-color: #ffda6a;
}

/* The theme hard-codes contextual table row hover/striped/active colours to
   near-black (--ct-table-*-bg: #313a46). On .table-striped this makes every
   other row of e.g. table-success revert to black instead of a shade of
   green. Use a darker/lighter shade of each row's own colour instead, so a
   coloured row stays readable and recognisably the same colour throughout. */
.table-primary,
.table-secondary,
.table-success,
.table-info,
.table-warning,
.table-danger,
.table-pink,
.table-orange,
.table-light {
    --ct-table-hover-bg: color-mix(in srgb, var(--ct-table-bg) 85%, #000);
    --ct-table-hover-color: var(--ct-table-color);
    --ct-table-striped-bg: color-mix(in srgb, var(--ct-table-bg) 92%, #000);
    --ct-table-striped-color: var(--ct-table-color);
    --ct-table-active-bg: color-mix(in srgb, var(--ct-table-bg) 85%, #000);
    --ct-table-active-color: var(--ct-table-color);
}

.table-dark {
    --ct-table-hover-bg: color-mix(in srgb, var(--ct-table-bg) 85%, #fff);
    --ct-table-hover-color: var(--ct-table-color);
    --ct-table-striped-bg: color-mix(in srgb, var(--ct-table-bg) 92%, #fff);
    --ct-table-striped-color: var(--ct-table-color);
    --ct-table-active-bg: color-mix(in srgb, var(--ct-table-bg) 85%, #fff);
    --ct-table-active-color: var(--ct-table-color);
}

table {
    font-size: 80%;
}

.delete,
.delete_note,
.unlink,
.delete_comment,
.delete_comment_photo,
.rotate_comment_photo,
.rotate_task_file,
.layout-link,
.print_calendar,
.refresh_feeds,
.visible_to_installation,
.delete-quote,
.notification-item,
.rotate_base_file,
.delete-base-file,
.unlink-base-file,
.delete-quality-check,
.delete-maintenance-check,
.notification-message,
.logout,
.clock-out,
.confirm_required,
.general_modal_link,
.base_file_modal_link,
.postable_link,
.form_modal_link {
    cursor: pointer;
}

.thumb {
    margin-bottom: 30px;
}

.popover {
    max-width: 100%;
    /* Max Width of the popover (depending on the container!) */
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1, 1);
    }

    50% {
        -webkit-transform: scale(1.1, 1.1);
    }

    100% {
        -webkit-transform: scale(1, 1);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.1, 1.1);
    }

    100% {
        transform: scale(1, 1);
    }
}

.card-img-top {
    width: 100%;
    height: 20vw;
    object-fit: cover;
}

.avatar-circle {
    width: 48px;
    height: 48px;
    text-align: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

.initials {
    position: relative;
    top: 14px;
    /* 25% of parent */
    font-size: 24px;
    /* 50% of parent */
    line-height: 24px;
    /* 50% of parent */
    color: #fff;
    font-family: "Courier New", monospace;
    font-weight: bold;
}

.avatar-circle-sm {
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

.initials-sm {
    position: relative;
    top: 11px;
    /* 25% of parent */
    font-size: 20px;
    /* 50% of parent */
    line-height: 20px;
    /* 50% of parent */
    color: #fff;
    font-family: "Courier New", monospace;
    font-weight: bold;
}

.avatar-circle-lg {
    width: 100px;
    height: 100px;
    text-align: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

.initials-lg {
    position: relative;
    top: 25px;
    /* 25% of parent */
    font-size: 50px;
    /* 50% of parent */
    line-height: 50px;
    /* 50% of parent */
    color: #fff;
    font-family: "Courier New", monospace;
    font-weight: bold;
}

.card-img-container {
    height: 300px;
    /* Set a desired common height for all cards */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Fills the box above rather than sitting small in the middle of it. The
   card used to be given the EDMS's full-size rendering of the page, which was
   always bigger than the box and so was scaled down into it; it is given the
   stored thumbnail now, which is 255px wide and would otherwise leave the
   card half empty (development request 90). object-fit keeps the shape. */
.card-img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

/* The contact picker -- contacts/picker/picker_inc.html, beside the quote and
   purchase order contact forms.
   The customer's people, addresses, emails and phone numbers were four cards
   capped at 200px, each with its own scrollbar, so all four were clipped
   mid-entry. They are one accordion now and only the open list scrolls, so it
   can have the height the four were sharing.

   contact_picker_row is laid out here rather than with d-flex in the markup
   because the search box hides rows with d-none, and Bootstrap emits d-flex
   after d-none -- both are !important, so d-flex would win and the hidden
   rows would stay on screen. */
.contact-picker .accordion-button {
    padding: 0.5rem 0.75rem;
}

.contact-picker .accordion-body {
    max-height: 40vh;
    overflow-y: auto;
    padding: 0;
}

.contact-picker .contact_picker_row {
    align-items: flex-start;
    display: flex;
    font-size: 0.875rem;
    gap: 0.5rem;
}

/* min-width lets the row's own anchor shrink below its content, which is what
   text-truncate on the line of people underneath needs to bite: an address
   shared by eight of them would otherwise run to four lines and bury the
   addresses either side of it. */
.contact-picker .contact_picker_row > a:first-child {
    min-width: 0;
}

.contact-picker .contact_picker_search_group {
    max-width: 20rem;
}

/* The file preview opens over the form and general modals, so it needs to sit
   above them. It lives here rather than on the element because base_site.js
   stacks a modal opened over another one by setting an inline z-index and
   clearing it on the way out, and clearing takes an inline rule with it. */
#base_file_modal {
    z-index: 2000;
}

/* A modal opened over another one -- a reminder or a chat message arriving
   over a form, or a form opened from inside one of those -- gets a shade of
   its own, so what is underneath reads as being behind it rather than merging
   into it. .modal covers the viewport already, so its own background does the
   work of a backdrop.

   Bootstrap's backdrops are deliberately left where they are. Lifting one
   above the modal it belongs to would strand that modal underneath it as soon
   as whatever is on top closed, and this shade cannot: it belongs to the modal
   drawing it, and goes when that modal does. base_site.js sets .modal-stacked. */
.modal-stacked {
    background-color: rgba(0, 0, 0, 0.5);
}

/* A swipe that runs off the end of a modal's scrolling stops there rather than
   carrying on into the page behind (development request 404). Bootstrap locks
   the page with overflow: hidden on <body>, but Chrome on Android still hands
   the rest of the swipe to the browser: its address bar slid away behind the
   BOM pop-up on a Samsung tablet, the pop-up and its backdrop were left out of
   step with the screen under a white band, and nothing scrolled again until a
   reload. .modal scrolls a long form, .modal-body a modal-dialog-scrollable
   one, so both stop it. The page's own pull-to-refresh is off while a modal is
   up for the same reason. */
.modal,
.modal-body {
    overscroll-behavior: contain;
}

html:has(> body.modal-open) {
    overscroll-behavior: none;
}

/* The landing page tiles -- templates/index.html. Each is a btn-lg holding a
   fa-4x icon over a label, in a col-6 on phones. Three-quarters of a half
   column is about 75px on a 375px screen, so the 64px icon ran past the
   button on both sides and every label longer than "Chat" broke mid-word.
   The tile fills its column below the sm breakpoint and goes back to three
   quarters above it, where the columns are wide enough that a full-width
   tile would look like a bar. Flex column so the icon and label centre and
   every tile in a row is the height of the tallest, rather than a two-line
   label making one tile stick out below its neighbour. */
.landing-tile {
    align-items: center;
    display: inline-flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    width: 75%;
}

.landing-tile h6 {
    overflow-wrap: normal;
    word-break: normal;
}

@media (max-width: 575.98px) {
    .landing-tile {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        width: 100%;
    }
}

/* The topbar on a narrow screen -- base_site/base.html and the includes it
   pulls in under navbar_extras. Ten icons at the theme's 1rem gap want
   about 560px, so on a phone the bar ran off the right-hand edge and took
   the user menu with it: Logout was unreachable. Below lg the items that
   carry no count move into #topbar-collapse, a panel under the bar behind
   the "more" toggle, and below sm the four counters follow them, the toggle
   showing their total. base_site.js moves the nodes, because the badges are
   updated by id and so must be the same elements wherever they sit; these
   two rules hide an item still in the bar until it has, so the page does
   not flash the overflowing bar before the script runs. */
@media (max-width: 991.98px) {
    .topbar > .topbar-menu > .topbar-collapsible-lg {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .topbar > .topbar-menu > .topbar-collapsible-sm {
        display: none;
    }
}

.topbar-collapse {
    background: var(--ct-topbar-bg);
    border-bottom: var(--ct-theme-card-border-width) solid var(--ct-border-color);
    box-shadow: var(--ct-box-shadow);
    left: 0;
    position: absolute;
    right: 0;
    top: 100%;
}

/* In the panel each item is a row: icon, name, badges at the end. The theme
   sizes topbar links to the bar's height, which is far too tall for a row. */
.topbar-collapse .topbar-menu li {
    max-height: none;
}

.topbar-collapse .topbar-menu .nav-link {
    gap: 0.75rem;
    height: auto;
    padding: 0.6rem 1.25rem;
}

/* Some of the icons carry me-1 to sit off their badge in the bar; in the
   panel the gap does that, and the margin put their labels a step to the
   right of the others. */
.topbar-collapse .topbar-menu .nav-link .me-1 {
    margin-right: 0 !important;
}

.topbar-menu .topbar-item-label {
    display: none;
}

.topbar-collapse .topbar-item-label {
    display: block;
    flex-grow: 1;
}

/* Drag-to-reorder rows (base_site.js sortable_rows, development request 59).
   The row being dragged takes bootstrap-table's reorder-rows-on-drag-class,
   whose stylesheet is already loaded. */
.sortable_rows .drag_handle {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.sortable_rows .drag_handle:active {
    cursor: grabbing;
}

/* A bootstrap-table with a search in the box: part of the list is on show,
   and that part has no order worth saving. */
.sortable_rows.sortable_rows_paused .drag_handle {
    visibility: hidden;
}

/* The topbar's notification menu (notification_dropdown_inc.html, with one
   menu_item_inc.html per notification): drawn as the read and unread lists
   draw a notification, its icon saying what it is about, and the whole
   message shown over two lines rather than cut at fifty characters. */
@media (min-width: 576px) {
    .notification-list .notification_menu {
        width: 380px;
    }
}

.notification_menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--ct-border-color);
}

/* One scroll box for the list, where each item used to be a box of its
   own. */
.notification_menu-list {
    max-height: min(26rem, 60vh);
    overflow-y: auto;
}

.notification-list .notification_menu-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem 0.625rem 1rem;
    white-space: normal;
    border-bottom: 1px solid var(--ct-border-color);
}

.notification_menu-icon {
    flex: 0 0 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

.notification_menu-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.notification_menu-verb,
.notification_menu-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification_menu-verb {
    -webkit-line-clamp: 2;
    color: var(--ct-dark);
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.notification_menu-description {
    -webkit-line-clamp: 1;
    color: var(--ct-secondary-color);
    font-size: 0.75rem;
}

.notification_menu-meta {
    margin-top: 0.125rem;
    color: var(--ct-secondary-color);
    font-size: 0.7rem;
}

.notification_menu-dismiss {
    flex: 0 0 auto;
    padding: 0.125rem;
    border-radius: 50%;
    color: var(--ct-secondary-color);
    font-size: 1rem;
    line-height: 1;
}

.notification_menu-dismiss:hover {
    color: var(--ct-danger);
    background-color: var(--ct-tertiary-bg);
}

/* Faint until the pointer is on its notification; a touch screen has no
   hover to wait for, so it is shown in full there. */
@media (hover: hover) {
    .notification_menu-item:not(:hover) .notification_menu-dismiss {
        opacity: 0.4;
    }
}

.notification_menu-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: 0.8125rem;
}

.notification_menu-footer {
    display: flex;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
}

.notification_menu-footer .btn {
    flex: 1 1 0;
}

/* The file a notification is about (development request 332): the stored
   thumbnail, cropped square, on the right of the item. */
.notification_menu-thumbnail {
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border: 1px solid var(--ct-border-color);
}

/* The pop-up a new notification arrives as (notification_notify_inc.html
   round notification_toast_inc.html): the menu's item on a card of its own,
   a stripe of its kind's colour down the left (development request 332).
   bootstrap-notify places it and lays its link over the whole card. */
.notification_toast {
    width: 380px;
    max-width: calc(100vw - 2rem);
    overflow: hidden;
    border-radius: 0.375rem;
    /* Not --ct-dropdown-bg, the menu's own: the theme defines that only
       inside .dropdown-menu, so out here it was no colour at all and the
       pop-up's dark title vanished over the dark top bar. */
    background-color: var(--ct-secondary-bg);
    box-shadow: var(--ct-box-shadow-lg);
}

.notification_toast-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 2.25rem 0.75rem 0.875rem;
}

.notification_toast .notification_menu-description {
    -webkit-line-clamp: 2;
}

.notification_toast .notification_menu-thumbnail {
    flex-basis: 4rem;
    width: 4rem;
    height: 4rem;
}

/* The thumbnail opens the file's preview. bootstrap-notify stretches the
   pop-up's own link over the whole card at its z-index + 1 (1032), so the
   thumbnail is lifted above that, level with the cross, to be clickable. */
.notification_menu-preview {
    flex: 0 0 auto;
    display: flex;
    cursor: zoom-in;
}

.notification_toast .notification_menu-preview {
    position: relative;
    z-index: 1033;
}

.notification_toast .btn-close {
    font-size: 0.625rem;
}

/* A Bootstrap collapse trigger whose words follow its panel: Show All while
   it is closed, Hide while it is open. Bootstrap keeps .collapsed on the
   trigger while the panel is shut, so no script is needed. */
.collapse_toggle.collapsed .collapse_toggle-open,
.collapse_toggle:not(.collapsed) .collapse_toggle-closed {
    display: none;
}

/* A form's Take Photo (MultipleFileField(take_photo=True)) only where the
   pointer is a finger, as the upload panels offer theirs: on a desktop it
   would be a second button opening the same file picker. */
@media not all and (pointer: coarse) {
    .take_photo {
        display: none !important;
    }
}