/* App-wide skin over the theme, for all three portals (staff, client, linguist). Loaded by the masters BEFORE each
   page's own styles, so a page can still override it. House style: the ltriks-ui skill. Only theme elements are
   restyled here (dialogs, buttons, focus, toasts) - page layout is left to the pages and lt-panels.css. */

/* ---------------------------------------------------------------- dialogs: the side panels */
/* One header on every side-panel dialog: the dark-blue band of the redesigned dialogs with a white title and close.
   The old headers were a mix of white, slate "panel-primary" blocks with the panel's bottom margin, and alerts. */
.modal-aside .modal-header,
.modal-aside .modal-header.panel,
.modal-aside .modal-header.alert {
    margin: 0;
    padding: 18px 22px 16px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(120deg, #1f3a68, #2f5fa8);
    color: #fff;
    box-shadow: none;
}
/* a dialog that deletes or warns keeps a red band */
.modal-aside .modal-header.alert-danger,
.modal-aside .modal-header.panel-danger { background: linear-gradient(120deg, #7a2323, #a5342b); }
.modal-aside .modal-header .modal-title,
.modal-aside .modal-header h3,
.modal-aside .modal-header h4 {
    margin: 0;
    padding-right: 24px;   /* clear of the close button */
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
}
    .modal-aside .modal-header .modal-title .fa,
    .modal-aside .modal-header .modal-title .ti { color: #dbe6f5; }
.modal-aside .modal-header .text-muted,
.modal-aside .modal-header small { color: #dbe6f5; }
.modal-aside .modal-header a:not(.btn) { color: #fff; text-decoration: underline; }
.modal-aside .modal-header .close {
    margin-top: 0;
    color: #fff;
    opacity: .85;
    text-shadow: none;
    font-size: 24px;
}
    .modal-aside .modal-header .close:hover,
    .modal-aside .modal-header .close:focus { color: #fff; opacity: 1; }
.modal-aside .modal-body { padding: 18px 22px; }
/* the footer: the buttons on the right with a gap, on a quiet white strip */
.modal-aside .modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 14px 22px;
    background: #fff;
    border-top: 1px solid #e3e8f0;
}
    .modal-aside .modal-footer > * { margin: 0; }
    .modal-aside .modal-footer .pull-left { float: none !important; margin-right: auto; }
    .modal-aside .modal-footer .btn { border-radius: 6px; }
    .modal-aside .modal-footer .btn + .btn { margin-left: 0; }
    /* the old "Close" (an outline button) reads as the quiet secondary button */
    .modal-aside .modal-footer .btn-o {
        background: #fff;
        border-color: #cfd6e0;
        color: #2c3e50;
    }
        .modal-aside .modal-footer .btn-o:hover,
        .modal-aside .modal-footer .btn-o:focus {
            background: #f4f6fa !important;
            border-color: #b9c3d0;
            color: #1f2d3d;
        }
@media (max-width: 600px) {
    .modal-aside .modal-header { padding: 14px 16px 12px; }
    .modal-aside .modal-body { padding: 14px 16px; }
    .modal-aside .modal-footer { padding: 12px 16px; }
}

/* centred dialogs: rounded, no panel margin under the header */
.modal:not(.modal-aside) .modal-content { border-radius: 8px; }
.modal:not(.modal-aside) .modal-header.panel,
.modal:not(.modal-aside) .modal-header.alert { margin: 0; border-radius: 8px 8px 0 0; }

/* ---------------------------------------------------------------- buttons */
.btn { border-radius: 6px; }
/* The theme's extra blues render as the one main-action colour (btn-primary), so a page has one "main" colour. */
.btn-azure,
.btn-blue {
    background-color: #58748B;
    border-color: #58748B;
    color: #fff;
}
    .btn-azure:hover,
    .btn-blue:hover {
        background-color: #718ea5 !important;
        border-color: #718ea5;
        color: #fff;
    }
    .btn-azure:focus,
    .btn-blue:focus,
    .open .btn-azure.dropdown-toggle,
    .open .btn-blue.dropdown-toggle {
        background-color: #819aaf;
        border-color: #819aaf;
        color: #fff;
    }
    .btn-azure:active,
    .btn-azure.active,
    .btn-blue:active,
    .btn-blue.active {
        background-color: #4e677b !important;
        border-color: #4e677b;
        color: #fff;
    }
    .btn-azure.btn-o,
    .btn-blue.btn-o {
        background: transparent;
        border: 1px solid #58748B;
        color: #58748B;
    }
        .btn-azure.btn-o:hover,
        .btn-blue.btn-o:hover {
            background: #58748B !important;
            border-color: #58748B;
            color: #fff;
        }
    .btn-azure .caret,
    .btn-blue .caret { border-top-color: #fff; }

/* ---------------------------------------------------------------- keyboard focus */
/* the theme removes outlines (a:focus{outline:0 !important}); put a clear ring back for keyboard users */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input[type=radio]:focus-visible,
input[type=checkbox]:focus-visible {
    outline: 2px solid #2f5fa8 !important;
    outline-offset: 2px !important;
}

/* ---------------------------------------------------------------- the theme's Style Selector */
/* Its spinning gear floated over the right edge of every page, on top of the page's own buttons. The navbar's
   "Display settings" button opens the panel now, and the panel has a close button. */
.myappsettings > .btn { display: none; }
.myappsettings .panel-heading .close { margin-top: -2px; font-size: 22px; }

/* ---------------------------------------------------------------- toasts (showNotify -> ltNotify) */
#toast-container > div { border-radius: 8px; opacity: .97; box-shadow: 0 6px 18px rgba(16, 24, 40, .18); }
    #toast-container > div:hover { box-shadow: 0 8px 22px rgba(16, 24, 40, .24); }
#toast-container .toast-title { font-weight: 700; }

/* a field the server marked as missing (CssClass "form-control required") - the same red on every form */
.form-control.required { border-color: #d9534f !important; box-shadow: 0 0 0 3px rgba(217, 83, 79, .15) !important; }

/* the native file chooser's button in the house style (the page's own Upload button stays next to it) */
input[type=file]::file-selector-button { margin: 0 10px 0 0; padding: 5px 12px; border: 1px solid #ccd3df; border-radius: 6px; background: #fff; color: #2c3e50; font-weight: 600; font-size: 12.5px; cursor: pointer; }
input[type=file]::file-selector-button:hover { border-color: #9fb3d6; background: #f8faff; color: #1d4fb4; }
input[type=file].form-control { height: auto; padding: 5px 6px; font-size: 12.5px; color: #5a6577; }

/* ---------------------------------------------------------------- tabs (.tabbable > .nav-tabs - "tab-purple")
   A clean underline strip instead of the theme's grey frame and pale tab labels; the tab body stays a white box. */
.tabbable { background: transparent; padding: 0; }
.tabbable > .nav-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid #e3e8f0; background: transparent; }
    .tabbable > .nav-tabs:before, .tabbable > .nav-tabs:after { display: none; }   /* bootstrap's clearfix would take flex slots */
    .tabbable > .nav-tabs > li { float: none; margin-bottom: -1px; }
    .tabbable > .nav-tabs > li > a { min-width: 0; padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: #5a6577; font-size: 13px; font-weight: 600; box-shadow: none; }
    .tabbable > .nav-tabs > li > a:hover, .tabbable > .nav-tabs > li > a:focus { background: #f1f4f9; color: #1f2d3d; }
    .tabbable > .nav-tabs > li.active > a, .tabbable > .nav-tabs > li.active > a:hover, .tabbable > .nav-tabs > li.active > a:focus { background: transparent; border-bottom-color: #2f5fa8; color: #24508f; box-shadow: none; }
    .tabbable > .nav-tabs > li > a .fa, .tabbable > .nav-tabs > li > a [class^="ti-"] { margin-right: 5px; }
.tabbable > .tab-content { background: #fff; border: 1px solid #e3e8f0; border-top: 0; border-radius: 0 0 8px 8px; }
/* tabs over whole cards (a long page split up, e.g. Settings > AI translation): no white box around the cards */
.tabbable.lt-tabs-cards { margin-bottom: 14px; }
.tabbable.lt-tabs-cards > .tab-content { background: transparent; border: 0; border-radius: 0; padding: 14px 0 0; }

/* form readability on the older form-horizontal pages (project, quote, enquiry details): labels that read as labels,
   and read-only / disabled values that can still be read (the theme greys them to near-invisible) */
label.control-label { font-size: 12.5px; font-weight: 600; color: #4a5568; line-height: 1.3; }
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background-color: #f6f8fb; color: #3f4b5c; opacity: 1; cursor: default; }

/* ---------------------------------------------------------------- date range picker (bootstrap-daterangepicker 2.1.24)
   The plugin's own stylesheet is not in the repo (bower_components/bootstrap-datetimerangepicker has the .js and a
   .scss only) and the theme's plugins.css carries just its colours, so the ranges list and the two calendars stacked
   in one narrow column. This is the plugin's layout, prefixed so nothing leaks out of the picker. */
.daterangepicker { position: absolute; color: inherit; background: #fff; border-radius: 6px; width: 278px; max-width: none; padding: 6px; margin-top: 2px; top: 100px; left: 20px; border: 1px solid #d5dce8; box-shadow: 0 8px 24px rgba(16, 24, 40, .14); z-index: 10050; }
.daterangepicker.dropdown-menu { max-width: none; padding: 6px; }
.daterangepicker:before, .daterangepicker:after { position: absolute; display: inline-block; content: ''; }
.daterangepicker:before { top: -7px; border-right: 7px solid transparent; border-left: 7px solid transparent; border-bottom: 7px solid #d5dce8; }
.daterangepicker:after { top: -6px; border-right: 6px solid transparent; border-bottom: 6px solid #fff; border-left: 6px solid transparent; }
.daterangepicker.opensleft:before { right: 9px; }
.daterangepicker.opensleft:after { right: 10px; }
.daterangepicker.openscenter:before, .daterangepicker.openscenter:after { left: 0; right: 0; width: 0; margin-left: auto; margin-right: auto; }
.daterangepicker.opensright:before { left: 9px; }
.daterangepicker.opensright:after { left: 10px; }
.daterangepicker.dropup { margin-top: -5px; }
.daterangepicker.dropup:before { top: initial; bottom: -7px; border-bottom: initial; border-top: 7px solid #d5dce8; }
.daterangepicker.dropup:after { top: initial; bottom: -6px; border-bottom: initial; border-top: 6px solid #fff; }
.daterangepicker.single .ranges, .daterangepicker.single .calendar { float: none; }
.daterangepicker .calendar { display: none; max-width: 270px; margin: 4px; }
.daterangepicker.show-calendar .calendar { display: block; }
.daterangepicker .calendar.single .calendar-table { border: none; }
.daterangepicker .calendar-table { border: 1px solid #fff; padding: 4px; border-radius: 4px; background: #fff; }
.daterangepicker table { width: 100%; margin: 0; }
.daterangepicker td, .daterangepicker th { text-align: center; width: 20px; height: 20px; border-radius: 4px; border: 1px solid transparent; white-space: nowrap; cursor: pointer; min-width: 32px; }
.daterangepicker td.available:hover, .daterangepicker th.available:hover { background: #eef1f6; border-color: transparent; color: inherit; }
.daterangepicker td.week, .daterangepicker th.week { font-size: 80%; color: #ccc; }
.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date { background: #fff; border-color: transparent; color: #999; }
.daterangepicker td.in-range { background: #ebf1fb; border-color: transparent; color: #1f2d3d; border-radius: 0; }
.daterangepicker td.start-date { border-radius: 4px 0 0 4px; }
.daterangepicker td.end-date { border-radius: 0 4px 4px 0; }
.daterangepicker td.start-date.end-date { border-radius: 4px; }
.daterangepicker td.active, .daterangepicker td.active:hover { background: #2f5fa8; border-color: transparent; color: #fff; }
.daterangepicker th.month { width: auto; }
.daterangepicker td.disabled, .daterangepicker option.disabled { color: #999; cursor: not-allowed; text-decoration: line-through; }
.daterangepicker select.monthselect, .daterangepicker select.yearselect { font-size: 12px; padding: 1px; height: auto; margin: 0; cursor: default; }
.daterangepicker select.monthselect { margin-right: 2%; width: 56%; }
.daterangepicker select.yearselect { width: 40%; }
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect { width: 50px; margin-bottom: 0; }
.daterangepicker .input-mini { border: 1px solid #ccd3df; border-radius: 4px; color: #555; height: 30px; line-height: 30px; display: block; vertical-align: middle; margin: 0 0 5px 0; padding: 0 6px 0 28px; width: 100%; }
.daterangepicker .input-mini.active { border: 1px solid #2f5fa8; border-radius: 4px; }
.daterangepicker .daterangepicker_input { position: relative; }
.daterangepicker .daterangepicker_input i { position: absolute; left: 8px; top: 8px; }
.daterangepicker .calendar-time { text-align: center; margin: 5px auto; line-height: 30px; position: relative; padding-left: 28px; }
.daterangepicker .calendar-time select.disabled { color: #ccc; cursor: not-allowed; }
.daterangepicker .ranges { font-size: 11px; float: none; margin: 4px; text-align: left; }
.daterangepicker .ranges ul { list-style: none; margin: 0 auto; padding: 0; width: 100%; }
.daterangepicker .ranges li { font-size: 13px; padding: 3px 12px; margin-bottom: 8px; cursor: pointer; }
.daterangepicker .range_inputs { clear: both; padding: 0 4px 4px; text-align: right; }
@media (min-width: 564px) {
    .daterangepicker { width: auto; }
    .daterangepicker .ranges ul { width: 160px; }
    .daterangepicker.single .ranges ul { width: 100%; }
    .daterangepicker.single .calendar.left { clear: none; }
    .daterangepicker.single.ltr .ranges, .daterangepicker.single.ltr .calendar { float: left; }
    .daterangepicker.ltr { direction: ltr; text-align: left; }
    .daterangepicker.ltr .calendar.left { clear: left; margin-right: 0; }
    .daterangepicker.ltr .calendar.left .calendar-table { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 12px; }
    .daterangepicker.ltr .calendar.right { margin-left: 0; }
    .daterangepicker.ltr .calendar.right .calendar-table { border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; }
    .daterangepicker.ltr .left .daterangepicker_input { padding-right: 12px; }
    .daterangepicker.ltr .ranges, .daterangepicker.ltr .calendar { float: left; }
}
@media (min-width: 730px) {
    .daterangepicker .ranges { width: auto; }
    .daterangepicker.ltr .ranges { float: left; }
    .daterangepicker .calendar.left { clear: none !important; }
}

/* ---------------------------------------------------------------- staff header bar (enquiry/Main.master ul.lt-hdr)
   Labelled buttons (My tasks, Linguist search, SMS) on a neutral tint that shows on the dark AND the light header skins
   (their text colour is the skin's link colour), one accent button (New), a divider, then icon buttons (notifications,
   appearance, display settings, help, sign out) with a tooltip and a screen-reader label. Counts are small pills.
   Below 1280 px the three buttons keep only their icon and count (the words stay for screen readers); on phones the
   theme folds the bar into its menu. */
@media (min-width: 768px) {
    .navbar .navbar-right.lt-hdr { display: flex; align-items: center; min-height: 60px; }   /* the theme forces height:auto !important on header lists */
    .navbar .navbar-right.lt-hdr > li { float: none; padding: 0; }
    .navbar .navbar-right.lt-hdr > li:before { display: none; }   /* the theme's line between every item */
}
.navbar .navbar-right.lt-hdr > li > a.lt-hdr-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 36px; margin: 0 3px; padding: 0 12px;
    line-height: 1; font-size: 13px; font-weight: 600; letter-spacing: 0; white-space: nowrap;
    border: 1px solid rgba(127, 127, 127, .3); border-radius: 8px;
    background: rgba(127, 127, 127, .12); opacity: 1;
    transition: background-color .15s ease, border-color .15s ease;
}
    .navbar .navbar-right.lt-hdr > li > a.lt-hdr-btn:hover,
    .navbar .navbar-right.lt-hdr > li > a.lt-hdr-btn:focus,
    .navbar .navbar-right.lt-hdr > li.open > a.lt-hdr-btn { background: rgba(127, 127, 127, .24); border-color: rgba(127, 127, 127, .45); }
    .navbar .navbar-right.lt-hdr > li > a.lt-hdr-btn > i { font-size: 14px; top: 0; }
    .navbar .navbar-right.lt-hdr > li > a.lt-hdr-btn > i.lt-hdr-caret { font-size: 13px; margin-left: -2px; opacity: .75; }
.navbar .navbar-right.lt-hdr > li > a.lt-hdr-btn.is-accent,
.navbar .navbar-right.lt-hdr > li > a.lt-hdr-btn.is-accent:focus { background: #2f5fa8; border-color: #2f5fa8; color: #fff; }
    .navbar .navbar-right.lt-hdr > li > a.lt-hdr-btn.is-accent:hover,
    .navbar .navbar-right.lt-hdr > li.open > a.lt-hdr-btn.is-accent { background: #24508f; border-color: #24508f; color: #fff; }
    /* the light header skins force their grey on every header icon (!important) - not on the blue button */
    .navbar .navbar-collapse .navbar-right.lt-hdr > li > a.lt-hdr-btn.is-accent i { color: #fff !important; }
.lt-hdr-count {
    display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: #e8590c; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
    .lt-hdr-count.is-red { background: #e03131; }
    .lt-hdr-count:empty { display: none; }
.navbar .navbar-right.lt-hdr > li > a.lt-hdr-icon {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin: 0 1px; padding: 0; line-height: 1; border-radius: 8px; opacity: 1;
    transition: background-color .15s ease;
}
    .navbar .navbar-right.lt-hdr > li > a.lt-hdr-icon:hover,
    .navbar .navbar-right.lt-hdr > li > a.lt-hdr-icon:focus,
    .navbar .navbar-right.lt-hdr > li.open > a.lt-hdr-icon { background: rgba(127, 127, 127, .2); }
    .navbar .navbar-right.lt-hdr > li > a.lt-hdr-icon > i { font-size: 17px; top: 0; }
.lt-hdr-badge {
    position: absolute; top: 3px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    background: #e03131; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
}
    .lt-hdr-badge:empty { display: none; }
.navbar .navbar-right.lt-hdr > li.lt-hdr-sep { width: 1px; height: 24px; margin: 0 8px; background: rgba(127, 127, 127, .35); }
@media (max-width: 1279px) and (min-width: 768px) {
    .navbar .navbar-right.lt-hdr .lt-hdr-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .navbar .navbar-right.lt-hdr > li > a.lt-hdr-btn:not(.is-accent) { padding: 0 10px; }
}
.navbar .navbar-right.lt-hdr .lt-hdr-mlabel { display: none; }   /* the icon buttons' words - phones only (the bar folds into a list) */
@media (max-width: 767px) {
    .navbar .navbar-right.lt-hdr > li.lt-hdr-sep { display: none; }
    .navbar .navbar-right.lt-hdr > li > a.lt-hdr-btn,
    .navbar .navbar-right.lt-hdr > li > a.lt-hdr-icon { margin: 8px 12px; }
    .navbar .navbar-right.lt-hdr > li > a.lt-hdr-icon { width: auto; padding: 0 12px; justify-content: flex-start; }
    .navbar .navbar-right.lt-hdr .lt-hdr-mlabel { display: inline; margin-left: 10px; font-size: 14px; }
    .navbar .navbar-right.lt-hdr .lt-hdr-badge { position: static; margin-left: 8px; }
}
/* the header's menus: rounded, no theme arrow tip, icon column, hover in the house blue */
.navbar .navbar-right .dropdown-menu.lt-hdr-menu {
    min-width: 230px; margin-top: 6px; padding: 6px;
    border: 1px solid #e3e8ef; border-radius: 10px; box-shadow: 0 12px 30px rgba(16, 24, 40, .18);
}
    .navbar .navbar-right .dropdown-menu.lt-hdr-menu:before,
    .navbar .navbar-right .dropdown-menu.lt-hdr-menu:after { display: none; }
    .navbar .navbar-right .dropdown-menu.lt-hdr-menu.is-wide { width: 340px; }
.navbar .navbar-right .lt-hdr-menu > li > a {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px;
    color: #2c3e50; font-size: 13px; font-weight: 500; white-space: nowrap;
}
    .navbar .navbar-right .lt-hdr-menu > li > a > .fa:first-child { width: 16px; text-align: center; color: #5a6577; }
    .navbar .navbar-right .lt-hdr-menu > li > a:hover,
    .navbar .navbar-right .lt-hdr-menu > li > a:focus { background: #f2f5fa; color: #1d4fb4; }
    .navbar .navbar-right .lt-hdr-menu > li > a:hover > .fa:first-child { color: #1d4fb4; }
    .navbar .navbar-right .lt-hdr-menu > li > a.is-danger,
    .navbar .navbar-right .lt-hdr-menu > li > a.is-danger > .fa:first-child { color: #c92a2a; }
    .navbar .navbar-right .lt-hdr-menu > li > a.is-danger:hover { background: #fff1f0; color: #a61e1e; }
.navbar .navbar-right .lt-hdr-menu > li.dropdown-header { padding: 6px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #8a96a8; }
.navbar .navbar-right .lt-hdr-menu > li.divider { margin: 6px 4px; background: #eef0f3; }
.navbar .navbar-right .lt-hdr-menu > li.lt-hdr-who { padding: 6px 12px 4px; font-size: 11.5px; color: #8a96a8; }
    .navbar .navbar-right .lt-hdr-menu > li.lt-hdr-who > b { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: #2c3e50; }
/* the notification / unread-text lists inside those menus */
.lt-hdr-list > ul { max-height: 60vh; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.lt-hdr-list > ul > li { position: relative; list-style: none; border-bottom: 1px solid #f0f2f5; }
    .lt-hdr-list > ul > li:last-child { border-bottom: 0; }
.lt-hdr-note { display: flex; gap: 10px; padding: 9px 30px 9px 8px; border-radius: 6px; color: inherit; text-decoration: none; }
    .lt-hdr-note:hover, .lt-hdr-note:focus { background: #f2f5fa; color: inherit; text-decoration: none; }
.lt-hdr-note-icon { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; }
.lt-hdr-note-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lt-hdr-note-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #34495e; white-space: normal; }
.lt-hdr-note-text { font-size: 12.5px; line-height: 1.35; max-height: 2.7em; overflow: hidden; color: #5a6b7b; white-space: normal; }
.lt-hdr-note-time { font-size: 11px; color: #9aa7b3; }
.lt-hdr-note-x { position: absolute; top: 8px; right: 6px; z-index: 1; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #9aa7b3; }
    .lt-hdr-note-x:hover, .lt-hdr-note-x:focus { background: #fdecea; color: #c92a2a; text-decoration: none; }
.lt-hdr-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e03131; }
.lt-hdr-times { padding: 1px 7px; border-radius: 10px; background: #eef2f7; color: #6c7a89; font-size: 11px; font-weight: 600; }
.lt-hdr-none { display: block; padding: 14px 12px; color: #8a96a8; font-size: 12.5px; list-style: none; }
.lt-hdr-menu-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; padding: 8px 10px 4px; border-top: 1px solid #eef0f3; font-size: 12.5px; }
    .lt-hdr-menu-foot a { color: #1d4fb4; font-weight: 600; }

/* ---------------------------------------------------------------- LinguisTriks subscription banner (enquiry/Main.master,
   App_Code/SaasAccess.cs): trial ending, trial ended, payment failed - above every staff page of a self-serve portal */
.lt-saas-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 12px 15px 0; padding: 9px 14px;
    border: 1px solid #c9dcf3; border-radius: 8px; background: #eaf2fb; color: #1f3b63; font-size: 13px; line-height: 1.45; }
    .lt-saas-banner.is-warn { border-color: #f1cf96; background: #fff4e3; color: #6b4300; }
    .lt-saas-banner > .fa:first-child { font-size: 15px; }
    .lt-saas-banner .btn { margin: 0 0 0 auto; }
    .lt-saas-banner-note { margin-left: auto; font-style: italic; }

/* ---------------------------------------------------------------- appearance menu (header: Light / Dark / Dark grey / Match my device) */
.lt-theme-list > li > a { display: flex; align-items: center; gap: 8px; min-width: 190px; }
    .lt-theme-list > li > a > .fa:first-child { width: 16px; text-align: center; color: #5a6577; }
    .lt-theme-list .lt-theme-tick { margin-left: auto; visibility: hidden; color: #2f5fa8; }
html:not([data-lt-theme-pref]) .lt-theme-opt[data-v="light"] .lt-theme-tick,
html[data-lt-theme-pref="light"] .lt-theme-opt[data-v="light"] .lt-theme-tick,
html[data-lt-theme-pref="dark"] .lt-theme-opt[data-v="dark"] .lt-theme-tick,
html[data-lt-theme-pref="grey"] .lt-theme-opt[data-v="grey"] .lt-theme-tick,
html[data-lt-theme-pref="system"] .lt-theme-opt[data-v="system"] .lt-theme-tick { visibility: visible; }

/* ---------------------------------------------------------------- dark appearance
   The page is drawn inverted with the hue turned back: every page, card, table, dialog, drop-down and inline style goes
   dark at once, colours keep their hue. Pictures, video, maps and embedded documents are turned back to their real
   colours, and so are the parts of the header and the side menu that are dark ALREADY in the colour skin - the masters
   measure them and mark them data-lt-keep (ltKeepDarkParts, right after the header; the portals' skins differ and the
   staff Style Selector has six) - and drop-downs inside a kept part are turned dark again. The root may carry a filter
   without breaking fixed positioning (the header, dialogs and toasts stay where they are). Printing is never inverted.
   Two looks (the Appearance menu): "Dark" - a black background, the text lifted 15% (plain inverted grey text was too dim
   to read); "Dark grey, bright text" (html[data-lt-dark="grey"]) - a #1f1f1f background with brighter text, like Visual
   Studio's dark theme. The page filter is F = invert(p) hue-rotate(180deg) brightness(b); whatever is turned back gets
   the EXACT inverse, brightness(1/b) hue-rotate(180deg) invert(1) [+ contrast(1/(2p-1)) when p < 1] - change a look's
   numbers in pairs or pictures come out wrong. Nothing shows darker than the look's background (pictures included). */
html[data-lt-theme="dark"] { background: #fff; color-scheme: dark; filter: invert(1) hue-rotate(180deg) brightness(1.15); }
html[data-lt-theme="dark"] body { color-scheme: light; }   /* page controls are inverted with the page; only the page scrollbar is dark by itself */
html[data-lt-theme="dark"] img,
html[data-lt-theme="dark"] video,
html[data-lt-theme="dark"] picture,
html[data-lt-theme="dark"] iframe:not([src^="/"]),
html[data-lt-theme="dark"] .gm-style,
html[data-lt-theme="dark"] [data-lt-true-colors],
html[data-lt-theme="dark"] [data-lt-keep] { filter: brightness(.8696) hue-rotate(180deg) invert(1); }
html[data-lt-theme="dark"] [data-lt-keep] img,
html[data-lt-theme="dark"] [data-lt-keep] .gm-style { filter: none; }
html[data-lt-theme="dark"] [data-lt-keep] .dropdown-menu { filter: invert(1) hue-rotate(180deg) brightness(1.15); }
html[data-lt-theme="dark"] [data-lt-keep] .dropdown-menu img { filter: brightness(.8696) hue-rotate(180deg) invert(1); }
/* "Dark grey, bright text": the same rules with its own pair of filters (more specific, so they win) */
html[data-lt-theme="dark"][data-lt-dark="grey"] { filter: invert(.91) hue-rotate(180deg) brightness(1.35); }
html[data-lt-theme="dark"][data-lt-dark="grey"] img,
html[data-lt-theme="dark"][data-lt-dark="grey"] video,
html[data-lt-theme="dark"][data-lt-dark="grey"] picture,
html[data-lt-theme="dark"][data-lt-dark="grey"] iframe:not([src^="/"]),
html[data-lt-theme="dark"][data-lt-dark="grey"] .gm-style,
html[data-lt-theme="dark"][data-lt-dark="grey"] [data-lt-true-colors],
html[data-lt-theme="dark"][data-lt-dark="grey"] [data-lt-keep] { filter: brightness(.7407) hue-rotate(180deg) invert(1) contrast(1.2195); }
html[data-lt-theme="dark"][data-lt-dark="grey"] [data-lt-keep] img,
html[data-lt-theme="dark"][data-lt-dark="grey"] [data-lt-keep] .gm-style { filter: none; }
html[data-lt-theme="dark"][data-lt-dark="grey"] [data-lt-keep] .dropdown-menu { filter: invert(.91) hue-rotate(180deg) brightness(1.35); }
html[data-lt-theme="dark"][data-lt-dark="grey"] [data-lt-keep] .dropdown-menu img { filter: brightness(.7407) hue-rotate(180deg) invert(1) contrast(1.2195); }
/* the veils behind a dialog and the busy overlay: white here is dark on screen */
html[data-lt-theme="dark"] .modal-backdrop,
html[data-lt-theme="dark"] .blockOverlay { background-color: #fff !important; }
@media print {
    html[data-lt-theme="dark"], html[data-lt-theme="dark"] * { filter: none !important; }
}