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

/* 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-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;
}

.card-img {
    max-height: 100%;
    width: auto;
    max-width: 100%;
}

/* The quote contact picker -- quote/addresses/includes/customer_contacts_inc.html.
   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);
}

/* 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;
}