@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Global font ─────────────────────────────────────────── */
body, .btn, .form-control, .form-select, .table, .card,
.nav-link, h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── Accent colour: ESI navy ─────────────────────────────────
   Same navy as the timesheet portal (#1d406c). The ported screens use the
   theme's success palette as their accent throughout: buttons, table heads,
   the pager, focus rings and the login panel. Redefining the palette once
   here recolours all of it, including the rules in legacy.css, without
   touching a single view. Status badges reuse the same palette, so green is
   no longer available to signal success; anything that reports a state now
   carries the navy, which is consistent with the buttons beside it. */
:root {
    --esi-navy: #1d406c;
    --esi-navy-rgb: 29, 64, 108;
    --esi-navy-dark: #16324f;
    --esi-navy-subtle: #e9eef5;

    --vz-success: var(--esi-navy);
    --vz-success-rgb: var(--esi-navy-rgb);
    --vz-success-text-emphasis: var(--esi-navy-dark);
    --vz-success-bg-subtle: var(--esi-navy-subtle);
}

/* ── Topbar ──────────────────────────────────────────────────
   Light, so the logo and the account menu read against it, with the navy
   carried by the menu bar directly beneath. */
#page-topbar {
    background-color: #fff !important;
    border-bottom: 1px solid var(--vz-header-border) !important;
    box-shadow: none !important;
}

/* ── Horizontal menu bar — ESI navy ──────────────────────── */
[data-layout="horizontal"] .navbar-menu {
    background-color: var(--esi-navy) !important;
    box-shadow: 0 2px 4px rgba(15, 34, 58, 0.18) !important;
}

[data-layout="horizontal"] .navbar-menu .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.82) !important;
}

[data-layout="horizontal"] .navbar-menu .navbar-nav .nav-link:hover,
[data-layout="horizontal"] .navbar-menu .navbar-nav .nav-link.active,
[data-layout="horizontal"] .navbar-menu .navbar-nav .nav-link[aria-expanded="true"] {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
}

[data-layout="horizontal"] .navbar-menu .navbar-nav .nav-link i {
    color: rgba(255, 255, 255, 0.75) !important;
}

[data-layout="horizontal"] .navbar-menu .navbar-nav .nav-link:hover i,
[data-layout="horizontal"] .navbar-menu .navbar-nav .nav-link.active i,
[data-layout="horizontal"] .navbar-menu .navbar-nav .nav-link[aria-expanded="true"] i {
    color: #fff !important;
}

/* The theme paints a dropdown's caret with the primary blue while its item is
   active, hovered or open, which is all but invisible on the navy bar. */
[data-layout="horizontal"] .navbar-menu .navbar-nav .nav-item > .nav-link[data-bs-toggle="collapse"]:after {
    color: #fff !important;
}

/* The theme switches to a light panel for an open dropdown, so the links in
   it go back to body text rather than staying white on white. */
[data-layout="horizontal"] .navbar-menu .menu-dropdown {
    border-radius: 0 0 var(--vz-border-radius) var(--vz-border-radius) !important;
}

[data-layout="horizontal"] .navbar-menu .menu-dropdown .nav-link {
    color: var(--vz-body-color) !important;
    background-color: transparent !important;
}

[data-layout="horizontal"] .navbar-menu .menu-dropdown .nav-link:hover,
[data-layout="horizontal"] .navbar-menu .menu-dropdown .nav-link.active {
    color: var(--esi-navy) !important;
    background-color: var(--esi-navy-subtle) !important;
}

/* ── Navigation bar actions ────────────────────────────────
   The old panel put the records search and the settings menu at the right
   hand end of the menu row, which left the logo row carrying the brand and
   the signed in name alone. The bar is a fixed height, so the buttons are
   pinned to that height rather than padding it taller, which would push the
   page content down. */
[data-layout="horizontal"] .navbar-menu .nav-actions {
    display: flex;
    align-items: stretch;
}

[data-layout="horizontal"] .navbar-menu .nav-actions .dropdown {
    display: flex;
}

[data-layout="horizontal"] .navbar-menu .nav-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.15rem;
    line-height: 1;
}

[data-layout="horizontal"] .navbar-menu .nav-actions .btn:hover,
[data-layout="horizontal"] .navbar-menu .nav-actions .btn:focus,
[data-layout="horizontal"] .navbar-menu .nav-actions .btn[aria-expanded="true"] {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
}

/* On the desktop bar the pair sits at the far right, beside the last menu
   item. Below it the theme moves the bar into the offcanvas drawer, where the
   menu runs down the panel, so the pair becomes a footer row under it. */
@media (min-width: 992px) {
    [data-layout="horizontal"] .navbar-menu .container-fluid {
        display: flex;
        align-items: stretch;
    }

    [data-layout="horizontal"] .navbar-menu .nav-actions {
        margin-left: auto;
    }
}

@media (max-width: 991.98px) {
    [data-layout="horizontal"] .navbar-menu .nav-actions {
        justify-content: flex-end;
        margin-top: 0.5rem;
        padding: 0.5rem 1.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.16);
    }
}

/* ── Signed in name ────────────────────────────────────────── */
.topbar-username {
    font-size: 0.8125rem;
    color: rgba(51, 51, 51, 0.85);
}

/* The desktop hamburger belongs to the collapsed menu, which horizontal does
   not have. Confined to the desktop breakpoint, because below it the theme
   turns the menu into an offcanvas panel and the hamburger is the only way to
   open it. */
@media (min-width: 992px) {
    [data-layout="horizontal"] .topnav-hamburger {
        display: none !important;
    }
}

/* ── Login card title ──────────────────────────────────────
   The timesheet login colours its heading with `.esirenavy-txt`. The same
   class here keeps the two sign in cards matching. */
.esirenavy-txt {
    color: var(--esi-navy) !important;
}

/* ── Login card logo ───────────────────────────────────────
   Set by width, not height. Bootstrap's `.img-fluid` sets `height: auto`,
   and a CSS rule beats an HTML `height` attribute, so a height on the tag
   was ignored and the logo kept drawing at its natural 823px width. A fixed
   width with `max-width: 100%` gives the same look and still shrinks to fit
   a phone, keeping the aspect ratio. */
.auth-logo img {
    width: 245px;
    max-width: 100%;
    height: auto;
}

/* ── Login page — ESI navy background, no photo ──────────── */
.auth-one-bg {
    background-image: none !important;
}
.auth-one-bg .bg-overlay {
    background: var(--esi-navy) !important;
    background-image: none !important;
    opacity: 1 !important;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary,
.btn-success {
    background-color: var(--esi-navy) !important;
    border-color: var(--esi-navy) !important;
}
.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus {
    background-color: var(--esi-navy-dark) !important;
    border-color: var(--esi-navy-dark) !important;
}

/* Outline primary is the theme's blue, not the navy accent, so bring it into
   the same palette. Filled on hover, with white text for contrast. */
.btn-outline-primary {
    color: var(--esi-navy) !important;
    border-color: var(--esi-navy) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--esi-navy) !important;
    border-color: var(--esi-navy) !important;
    color: #fff !important;
}

/* ── Focus rings ─────────────────────────────────────────── */
.form-control:focus, .form-select:focus {
    border-color: var(--esi-navy) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--esi-navy-rgb), 0.25) !important;
}

/* ── DataTables export buttons — gap between each ───────── */
div.dt-buttons { gap: 4px; display: inline-flex; flex-wrap: wrap; }
div.dt-buttons .btn-group { display: contents; }

/* The theme paints every `.dt-button` with the body text colour, which beats
   the `.btn-success` colour because it is the more specific rule. The buttons
   are navy, so their labels and Remix icons have to be pinned to white or
   they disappear into the background. */
div.dt-buttons .btn-success,
div.dt-buttons .btn-success i,
div.dt-buttons .btn-success:hover,
div.dt-buttons .btn-success:focus,
div.dt-buttons .btn-success:hover i,
div.dt-buttons .btn-success:focus i {
    color: #fff !important;
}

/* ── DataTables column headers — navy, white text ────────── */
table.dataTable thead th,
table.dataTable thead td {
    background-color: var(--vz-success) !important;
    color: #fff !important;
    border-bottom: none !important;
    font-weight: 600;
}
/* The theme places the sort arrows absolutely but never makes the header cell
   positioned, so they were painted at the top right of the table wrapper, on
   the white toolbar, instead of inside their own column. Anchor them to the
   cell. */
table.dataTable thead th {
    position: relative;
}
/* Sort icons white, including the disabled states, so they stay legible on
   the navy header. */
table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:before,
table.dataTable thead th.sorting_desc:after,
table.dataTable thead th.sorting_asc_disabled:before,
table.dataTable thead th.sorting_asc_disabled:after,
table.dataTable thead th.sorting_desc_disabled:before,
table.dataTable thead th.sorting_desc_disabled:after {
    color: #fff !important;
}
table.dataTable thead th span.dt-column-order {
    color: rgba(255,255,255,0.8) !important;
}

/* ── DataTables striped rows — soft navy ─────────────────── */
table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--vz-success-bg-subtle) !important;
    box-shadow: none !important;
}
table.dataTable.table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: #fff !important;
    box-shadow: none !important;
}

/* ── Table links: navy ───────────────────────────────────────
   Row links defaulted to the theme's link blue, which fought the navy accent.
   Scope the rule to table bodies so every list screen inherits it. Buttons are
   left alone so their own colours survive, and the visited state repeats the
   navy rather than reverting to the browser's purple. */
table tbody a:not(.btn) {
    color: var(--esi-navy);
}
table tbody a:not(.btn):visited {
    color: var(--esi-navy);
}
table tbody a:not(.btn):hover,
table tbody a:not(.btn):focus {
    color: var(--esi-navy-dark);
    text-decoration: underline;
}

/* ── DataTables bordered grid ────────────────────────────────
   This DataTables sets `border-collapse: separate` on `table.dataTable`,
   and in the separated model only CELL borders are painted. Bootstrap's
   `.table-bordered` puts the horizontal lines on `tr`, so with the rows
   ignored the grid lost every horizontal line and the table had no bottom
   edge: it looked open at the bottom and right.
   Draw the grid on the cells instead. Only `right` and `bottom` are set so
   the shared edges do not double up, with the table supplying the left
   edge. `!important` also out-ranks the unused
   `fixedColumns.bootstrap5.min.css`, which zeroes the right edge. */
table.dataTable.table-bordered {
    border-left: var(--vz-border-width) solid var(--vz-border-color) !important;
}
table.dataTable.table-bordered > :not(caption) > * > * {
    border-width: 0 var(--vz-border-width) 0 0 !important;
}
table.dataTable.table-bordered > tbody > tr > * {
    border-bottom-width: var(--vz-border-width) !important;
}

/* ── DataTables pagination — navy, bottom right, every table ─
   This DataTables is 3.x, which renamed the old
   `div.dataTables_wrapper` / `div.dataTables_paginate` to
   `div.dt-container` / `div.dt-paging`. The 1.x names matched
   nothing, so the pager stayed Bootstrap blue. Keep the old
   selectors too so any table still on the 1.x markup also themes. */
div.dt-container div.dt-paging,
div.dataTables_wrapper div.dataTables_paginate {
    margin-top: 1.5rem !important;
    /* Clears the bottom of the card, since the zero-height auto-size
       helper DataTables 3 appends after this cannot provide the gap. */
    margin-bottom: 1.75rem !important;
    /* Pushes the pager to the right of the card whatever the row does. */
    display: flex !important;
    justify-content: flex-end !important;
}

div.dt-container div.dt-paging ul.pagination,
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    justify-content: flex-end !important;
    margin-bottom: 0 !important;
}

div.dt-container .page-item.active .page-link,
div.dataTables_wrapper .page-item.active .page-link {
    background-color: var(--vz-success) !important;
    border-color: var(--vz-success) !important;
    color: #fff !important;
}

div.dt-container .page-link,
div.dataTables_wrapper .page-link {
    color: var(--vz-success) !important;
}

div.dt-container .page-link:hover,
div.dataTables_wrapper .page-link:hover {
    background-color: var(--vz-success-bg-subtle) !important;
    border-color: var(--vz-success-bg-subtle) !important;
    color: var(--vz-success) !important;
}

/* Disabled edges stay legible rather than greyed out. */
div.dt-container .page-item.disabled .page-link,
div.dataTables_wrapper .page-item.disabled .page-link {
    color: var(--vz-success) !important;
    opacity: 0.45;
}

/* The "Showing 1 to 6 of 6 entries" line sits above the pager on the
   right; the last row in the container is DataTables 3's zero-height
   auto-size helper, so the bottom margin has to come from the pager. */
div.dt-container div.dt-info,
div.dataTables_wrapper div.dataTables_info {
    margin-top: 1.5rem !important;
    text-align: right !important;
}

/* ── Generate Tokens — in-flight submit ──────────────────────
   The button is disabled on submit so a second press cannot create a
   duplicate batch. The spinner reuses Bootstrap's keyframes. */
.js-generate-submit.is-busy i {
    display: inline-block;
    animation: spinner-border 0.75s linear infinite;
}
.js-generate-submit.is-busy {
    opacity: 0.65;
}

/* ── Dashboard stat cards — clickable hover ──────────────── */
a .card-animate {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a:hover .card-animate {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1) !important;
}

/* ── Token code display ──────────────────────────────────── */
code.token-code {
    font-size: 1rem;
    user-select: all;
    cursor: pointer;
}

/* ── Course topbar ───────────────────────────────────────── */
#course-topbar img { object-fit: contain; }

/* ── Placeholders — smaller, sentence case ───────────────── */
.form-control::placeholder {
    font-size: 0.8rem;
    text-transform: none;
    opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Page width
   Velzon caps horizontal layout containers at 90% above 1024px, which left a
   wide margin either side of every card on a large monitor. The topbar, menu
   and page content use the full width here so their edges line up.
   -------------------------------------------------------------------------- */
@media (min-width: 1024.1px) {
    [data-layout="horizontal"] .layout-width,
    [data-layout="horizontal"] .container-fluid {
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   List screens
   The ported list views keep the card title in its own card above the table.
   Join the two cards so they read as the training portal's single card with a
   header and body, without editing every view.
   -------------------------------------------------------------------------- */
.content-body > .card:has(> .card-header):not(:has(> .card-body)) + .card:has(> .dataTables_wrapper) {
    margin-top: 0;
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.content-body > .card:has(> .card-header):not(:has(> .card-body)):has(+ .card > .dataTables_wrapper) {
    margin-bottom: 0;
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* DataTables puts its wrapper between the card and the table, so the wrapper
   carries the padding a card body would normally provide. */
.content-body > .card > .dataTables_wrapper {
    padding: 1.25rem;
}

/* An empty card body left by the ported views only adds space above the
   table. */
.content-body > .card > .card-body:empty {
    display: none;
}

/* The desktop card is wide enough for the table, and an overflow container
   would clip the row action menus. Keep the scroll container for phones and
   tablets only. */
@media (min-width: 1280px) {
    .content-body > .card .table-responsive {
        overflow: visible;
    }
}

/* Table toolbar and footer, matching the training portal. */
.dt-toolbar {
    row-gap: 0.75rem;
}
.dt-toolbar .dt-buttons {
    margin: 0;
}
.dt-toolbar .dataTables_filter {
    margin: 0;
    text-align: right;
}
.dt-toolbar .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    white-space: nowrap;
}
.dt-toolbar .dataTables_filter input {
    display: inline-block;
    width: 15rem;
    margin: 0;
}
.dt-footer .dataTables_info,
.dt-footer .dataTables_paginate {
    margin: 0 !important;
}
.dt-footer .dataTables_info {
    padding-top: 0.35rem;
    text-align: left !important;
}
.dt-footer .dataTables_paginate {
    display: flex !important;
    justify-content: flex-end !important;
}
.dt-footer .dataTables_paginate ul.pagination {
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .content-body > .card > .dataTables_wrapper {
        padding: 1rem;
    }
    .dt-toolbar .dataTables_filter {
        width: 100%;
        text-align: left;
    }
    .dt-toolbar .dataTables_filter label {
        display: flex;
        width: 100%;
    }
    .dt-toolbar .dataTables_filter input {
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
    }
}

/* ── Validation feedback ─────────────────────────────────────
   The error used to be a single alert at the top of the card, which a long
   form leaves off screen once the page reloads. The field that failed now
   carries the red border and its own message, marked by `esire/js/validation.js`
   from the flashdata the controller sends back. The same red is used by the
   jQuery Validate helpers in `legacy.css`, so both routes look alike. */
.form-control.is-invalid,
.form-select.is-invalid,
.form-control.esi-invalid,
.form-select.esi-invalid,
input.is-invalid,
input.esi-invalid,
textarea.is-invalid,
textarea.esi-invalid {
    border-color: var(--vz-danger) !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.form-control.esi-invalid:focus,
.form-select.esi-invalid:focus,
input.is-invalid:focus,
input.esi-invalid:focus,
textarea.is-invalid:focus,
textarea.esi-invalid:focus {
    border-color: var(--vz-danger) !important;
    box-shadow: 0 0 0 0.15rem rgba(var(--vz-danger-rgb), 0.25) !important;
}

/* jQuery Validate labels, which the ported scripts insert beside the field. */
label.esi-invalid,
.validation-invalid-label {
    display: block;
    margin-top: 0.25rem;
    margin-bottom: 0;
    font-size: 0.8125rem;
    color: var(--vz-danger-text-emphasis);
}

label.esi-valid,
.validation-valid-label {
    display: none;
}
.input-group:has(> .is-invalid) .input-group-text {
    border-color: var(--vz-danger);
    color: var(--vz-danger);
}

/* Choices.js replaces the select with its own control. */
.choices.is-invalid .choices__inner {
    border-color: var(--vz-danger) !important;
}

/* Visit filters, matching the elis control panel: a box showing a count sits
   beside its own Deselect All button on one line. */
.filter-group {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0.5rem;
    /* Fixed so the row looks identical whether the view puts the filters in a
       sized column (the report screens) or a content-sized one (the lists). */
    width: 24rem;
    max-width: 100%;
}
.filter-group .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
.filter-group .filter-menu {
    flex: 1 1 auto;
    min-width: 0;
}
.filter-menu-btn {
    width: 100%;
    min-width: 7rem;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}
.filter-menu-list {
    width: 18rem;
    max-height: 20rem;
    overflow-y: auto;
    padding: 0.25rem;
}
.filter-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #212529;
    cursor: pointer;
}
.filter-menu-item:hover,
.filter-menu-item:focus {
    background-color: var(--vz-primary-bg-subtle);
}
.filter-menu-item .form-check-input {
    margin: 0;
    float: none;
    flex: 0 0 auto;
    cursor: pointer;
}
.filter-menu-btn.esi-invalid,
.filter-menu-btn.is-invalid {
    border-color: var(--vz-danger) !important;
}

.invalid-feedback.d-block {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--vz-danger-text-emphasis);
}

/* The alert stays, so the message is still on the page after the toast goes. */
.alert-danger {
    border-color: var(--vz-danger);
    color: var(--vz-danger-text-emphasis);
}

/* Validation toasts inherit Velzon's `.swal2-popup` rules in `app.min.css`,
   which is all the Rainbows control panel relies on too, so there is nothing
   to restyle here. */

/* ── Date range picker ────────────────────────────────────────────────
   bootstrap-daterangepicker, as used on the elis control panel. Only the
   colours are overridden here: the stock stylesheet supplies the layout,
   the preset column, the second month and the Apply and Cancel buttons. */
div.daterangepicker {
    background-color: var(--vz-secondary-bg);
    border-color: var(--vz-border-color);
    font-family: inherit;
    z-index: 1060;
}

div.daterangepicker::after {
    border-bottom-color: var(--vz-secondary-bg);
}

div.daterangepicker::before {
    border-bottom-color: var(--vz-border-color);
}

div.daterangepicker .drp-buttons {
    border-top-color: var(--vz-border-color);
}

div.daterangepicker .calendar-table {
    background-color: var(--vz-secondary-bg);
    border-color: var(--vz-secondary-bg);
}

div.daterangepicker .calendar-table .next span,
div.daterangepicker .calendar-table .prev span {
    border-color: var(--vz-body-color);
}

div.daterangepicker td.available:hover,
div.daterangepicker th.available:hover {
    background-color: var(--vz-tertiary-bg);
}

div.daterangepicker td.off,
div.daterangepicker td.off.end-date,
div.daterangepicker td.off.in-range,
div.daterangepicker td.off.start-date {
    background-color: var(--vz-secondary-bg);
    color: var(--vz-secondary-color);
}

div.daterangepicker td.in-range {
    color: var(--vz-body-color);
    background-color: var(--vz-primary-bg-subtle);
}

div.daterangepicker td.active,
div.daterangepicker td.active:hover {
    background-color: var(--vz-success);
    color: #fff;
}

div.daterangepicker select.monthselect,
div.daterangepicker select.yearselect {
    background-color: var(--vz-secondary-bg);
    border-color: var(--vz-border-color);
}

div.daterangepicker .ranges li.active {
    background-color: var(--vz-success);
    color: #fff;
}

div.daterangepicker .drp-buttons .btn-primary {
    color: #fff !important;
    background-color: var(--vz-success) !important;
    border-color: var(--vz-success) !important;
}

/* The month and year bar across the top of the calendars, as on the elis
   control panel: one solid bar spanning both months, with the month and year
   dropdowns and the arrows in white. */
div.daterangepicker .calendar-table thead tr:first-child th {
    background-color: var(--vz-success);
    color: #fff;
    border-radius: 0;
}

div.daterangepicker .calendar-table thead tr:first-child th:hover {
    background-color: var(--vz-success-text-emphasis);
    color: #fff;
}

div.daterangepicker select.monthselect,
div.daterangepicker select.yearselect {
    color: #fff;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0.25rem;
    padding: 0 0.15rem;
}

div.daterangepicker select.monthselect option,
div.daterangepicker select.yearselect option {
    color: var(--vz-body-color);
    background-color: var(--vz-secondary-bg);
}

div.daterangepicker .calendar-table thead tr:first-child .prev span,
div.daterangepicker .calendar-table thead tr:first-child .next span {
    border-color: #fff;
}

/* The preset column reads as a list of links, not a set of blocks. */
div.daterangepicker .ranges li {
    padding: 0.3rem 0.75rem;
    color: var(--vz-body-color);
}

/* Recommendation summary cards, used by the recommendation lists. The theme
   gives every `.card-header` a white background, which left a white band above
   each coloured card. Clearing it lets the card's own colour fill the header
   too, so the whole block is one colour with white text from top to bottom. */
.summaryCards .summaryBoxes {
    border-radius: 0.5rem;
    overflow: hidden;
}

.summaryCards .summaryBoxes .card-header {
    background-color: transparent;
    border-bottom: 0;
}