span.badge.bg-success, span.badge.bg-secondary, button.btn-success {
    color:white;
}
/* Small flag icons for dropdown menus */
.flag.flag-xs {
    width: 1.25rem;
    height: 0.9rem;
    background-size: contain;
}

div.html-popover {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    user-select: none;
    padding: 5px;
}


a.pnl-item
{
    view-transition-class: pnl-item;
}
::view-transition-old(.card2,.pnl-item),
::view-transition-new(.card2,.pnl-item)
{
    animation: fade-out ease-out 0.5s;
    
}
div[data-tippy-root] > div{
    min-width: 300px;
    padding: 0.5em;
    border: #0a53be 1px solid;
    background: #fafafa;
    color: #050000;
}

/* charts follow the theme's font rather than one fixed face */
div.apexcharts-canvas *, .apexcharts-text tspan {
    font-family: var(--tblr-font-sans-serif, "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif) !important;
}

@media (max-width: 767.98px) {
    div.apexcharts-canvas {
        max-width: 100%;
    }
}

.apexcharts-pie-label {
    fill: #fff !important;
    stroke: rgba(0,0,0,0.6) !important;
    stroke-width: 3px !important;
    paint-order: stroke fill;
}

div.search-container > span {
    width: 100%;
}

tr[data-group-item]:not(.expand-group)
{
    display: none;
}



input
{
    
}
div[data-isinvalid] div.input-group.input-group-flat:not(:focus-within)
{
    border: 1px solid red;
}


tr.item-cancelled {
    text-decoration: line-through;color: red;
}

select:invalid
{    
    border-color: #d63939 !important;
    padding-right: calc(1.4285714286em + .875rem);
    background-image: url("/images/exclamation-circle.svg");
    background-repeat: no-repeat;
    background-position: right calc(.3571428572em + .21875rem) center;
    background-size: calc(.7142857143em + .4375rem) calc(.7142857143em + .4375rem)
}

input.form-control:invalid:not(.search-input)
{    
    border-color: #d63939 !important;
    padding-right: calc(1.4285714286em + .875rem);
    background-image: url("/images/exclamation-circle.svg");
    background-repeat: no-repeat;
    background-position: right calc(.3571428572em + .21875rem) center;
    background-size: calc(.7142857143em + .4375rem) calc(.7142857143em + .4375rem)
}

input.form-control:has(+span.input-icon-addon):invalid
{      
    background-position: right calc(1.8571428572em + .21875rem) center;
}

@media (max-width: 650px) {

    table.x-responsive thead {
        display: none;
    }

    table.x-responsive td {
        display: grid;
        gap: 0.5rem;
        grid-template-columns: 15ch auto auto;
        padding: 0.5rem 1rem;
        text-align: left;
    }

    table.x-responsive td:first-child {
        padding-top: 2rem;
    }

    table.x-responsive td:last-child {
        padding-bottom: 3rem;
    }

    table.x-responsive td::before {
        content: attr(data-cell) " : ";
        font-weight: 700;
        text-transform: capitalize;
    }

}
tr.font-italic{
    font-style: italic;
}
div.card.collapsible-card > div.card-header{
    cursor: pointer;
}

div.card.collapsible-card > div.card-header:not(.expand-card):before {
    font-family: "tabler-icons";
    content: "\ea61";/*ea5f down*/
    display: inline-block;
    margin-right: 10px;
    font-size: 1.2em;
    line-height: 1.556em;
    vertical-align: middle;
}

div.card.collapsible-card > div.expand-card:before {
    font-family: "tabler-icons";
    content: "\ea5f";/*ea5f down*/
    display: inline-block;
    margin-right: 10px;
    font-size: 1.2em;
    line-height: 1.556em;
    vertical-align: middle;
}

div.card.collapsible-card > div.card-header:not(.expand-card) + div.card-body {
    display: none;
}

div.card.collapsible-card > div.expand-card + div.card-body {
    display: block;
}



i.ti {
    font-size: 1.2rem;
}

i.ti-1_5x {
    font-size: 1.6rem;
}
i.ti-0_5x {
    font-size: 1.0rem;
}
i.ti-2x {
    font-size: 2rem;
}
i.ti-3x {
    font-size: 3rem;
}
i.ti-4x {
    font-size: 4rem;
}

div.letter p {
    margin-bottom: 0 !important;
    margin-top: 0;
}

.fc-h-event {
    background-color: transparent;
}

ul.validation-errors > li.validation-message {
    color: red;
}

.blink-icon {
    animation: blinker 1s linear infinite;
}

div.tooltip-wrapper > span {
    color: #6a6060;
    border: none;
    background-color: #f0f1f3;
    width: auto;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

/* Unhandled-error card: Blazor sets display:block on it; the script in _Host.cshtml fills it in. */
div#blazor-error-ui {
    display: none;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    z-index: 10001;
    width: 35rem;
    max-width: calc(100% - 2rem);
}

    div#blazor-error-ui .card {
        margin: 0;
    }

    div#blazor-error-ui .progress-bar {
        width: 0;
        transition: width 1s linear;
    }

@media (prefers-reduced-motion: reduce) {
    div#blazor-error-ui .progress-bar {
        transition: none;
    }
}

/* Reconnect dialog, drawn as a Tabler page loader (preview.tabler.io/page-loader.html): the whole
   viewport, the brand, and an indeterminate bar - the same on a phone as on a desktop, since it is
   the viewport that is filled rather than a fixed-width card.
   The markup lives in _Host.cshtml so that the page owns the state classes Blazor toggles here (its
   built-in dialog hides them inside a shadow root). */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    background: var(--tblr-body-bg, #f6f8fb);
}

    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal.components-reconnect-retrying,
    #components-reconnect-modal.components-reconnect-paused,
    #components-reconnect-modal.components-reconnect-failed,
    #components-reconnect-modal.components-reconnect-rejected,
    #components-reconnect-modal.components-reconnect-resume-failed {
        display: flex;
    }

    /* Wider than Tabler's own container-slim would allow on a phone, so the attempt line below the
       bar stays on one or two lines instead of wrapping word by word. */
    #components-reconnect-modal .container-slim {
        max-width: 22rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    #components-reconnect-modal img {
        max-height: 48px;
        width: auto;
    }

select:invalid {
    border-color: red;
}

div.validation-message {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 0.5em;
    color: #f64c4c;
    font-size: 0.8em;
    font-style: italic;
}

div.input-group-flat > div.form-select > span.me-2 {
    margin-top: 0.5em;
}

.popover {
    max-width: 600px;
    min-width: 400px;
    z-index: 2010; /* A value higher than 1010 that solves the problem */
}

i.ml-2 {
    margin-left: 0.5em !important;
}

i.mr-2 {
    margin-right: 0.5em !important;
}

i.la, i.lab {
    font-size: 1.5em;
}

i.la.mr-2 {
    margin-right: 0.5em !important;
}

i.lab.mr-2 {
    margin-right: 0.5em !important;
}

.text-right {
    text-align: right;
}

.overflow-y {
    overflow-y: scroll;
}

.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
}

.hover-selector {
    background-color: #c898f4 !important;
    color: #022051;
}

/* Standard syntax */
:fullscreen {
    background-color: whitesmoke;
}

a.full-screen:fullscreen {
    font-size: 1.5em;
    display: none;
}

a.close-full-screen:fullscreen {
    font-size: 1.5em;
}

td.thead-light {
    color: #656d77;
    font-size: .625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.6;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

div.page-break {
    page-break-before: always;
}

/* page-break-after works, as well */

@media print {
    ::-webkit-input-placeholder { /* WebKit browsers */
        color: transparent !important;
        text-shadow: none !important;
    }

    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: transparent;
    }

    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: transparent;
    }

    :-ms-input-placeholder { /* Internet Explorer 10+ */
        color: transparent;
    }
}


img.logo-small-full-dark {
    display: none;
}


.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    cursor: default;
}

select[placeholder]:invalid {
    color: orangered !important;
}

.ql-mention-list-item {
    cursor: pointer;
    line-height: 44px;
    font-size: 12px !important;
    padding: 0 20px;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #232e3c;
    background-color: #fff;
    border-color: rgba(101, 109, 119, .24);
    white-space: nowrap;
}

#notification-reader-panel .mention {
    background-color: var(--tblr-primary-lt) !important;
    color: var(--tblr-primary) !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-weight: 500;
    font-size: 0.875em;
    border: none !important;
}

#notification-reader-panel .comment-text a[href],
#notification-reader-panel a.btn,
#notification-reader-panel a[style*="background"] {
    background-color: var(--tblr-primary) !important;
    background: var(--tblr-primary) !important;
    color: #fff !important;
    border-radius: 50rem !important;
    border: none !important;
    padding: 8px 16px !important;
    text-align: center;
    text-decoration: none !important;
    display: inline-block;
    font-size: 0.875rem !important;
    font-weight: 500;
    line-height: 1.5;
}

/* type ahead in td*/
td:has(span>div.dropdown) {
    min-width: 300px;
}

/* Let Bootstrap action dropdowns escape the .table-responsive overflow clip while open.
   Without this, a menu that extends below the row (e.g. the "..." actions on
   Statement Matching Rules) is cut off and appears invisible. Only relaxes overflow
   while a menu is actually open, so horizontal table scrolling is preserved otherwise. */
.table-responsive:has(.dropdown-menu.show) {
    overflow: visible;
}

td > span > div.dropdown > div.input-group > span.form-control {
    width: 230px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

/* Provider Picker Styles */
/* the dropdown hangs off <body> (or the open <dialog>), so it must sit above the modal content;
   two classes, because selectize.css loads after this file and sets its own z-index */
.selectize-dropdown.provider-picker-dropdown {
    z-index: 1210;
}

.provider-picker-item,
.provider-picker-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.provider-picker-option {
    padding: 0.5rem 0.75rem !important;
}

.provider-picker-item svg,
.provider-picker-option svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.provider-picker-item .ti,
.provider-picker-option .ti {
    flex-shrink: 0;
    font-size: 20px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selectize-dropdown .provider-picker-option {
    cursor: pointer;
}

.selectize-dropdown .provider-picker-option:hover {
    background-color: #f1f5f9;
}

/* Fix provider picker selectize input extra space */
.selectize-control.provider-picker-control {
    margin-bottom: 0;
}

/* selectize turns an open single picker into inline-block, which wraps the search box
   onto a second line and pushes the whole form down, so keep it flex while open too
   (selectize.css loads after this file, so the open rule needs the extra .single to win) */
.selectize-control.provider-picker-control .selectize-input,
.selectize-control.single.provider-picker-control .selectize-input.input-active {
    min-height: 38px;
    padding: 0.4375rem 0.75rem;
    display: flex;
    align-items: center;
}

.selectize-control.provider-picker-control .selectize-input > input {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1;
    width: 0 !important;
    opacity: 0;
}

.selectize-control.provider-picker-control .selectize-input.has-items > input {
    display: none;
}

/* with nothing chosen yet (AllowEmpty), the input is what carries the "[Please select]" placeholder */
.selectize-control.provider-picker-control .selectize-input:not(.has-items) > input {
    height: auto !important;
    width: 100% !important;
    opacity: 1;
}

/* Selectize with avatar — Tabler "tags with avatar" for the selected items,
   and an avatar row for every option in the dropdown. */
.selectize-control.multi .selectize-input > div.sz-avatar-item {
    display: inline-flex;
    align-items: center;
    vertical-align: top;
    gap: .375rem;
    padding: .125rem .375rem;
    background: var(--tblr-bg-surface, #fff);
    border: 1px solid var(--tblr-border-color, #dee2e6);
    border-radius: 999px;
    color: var(--tblr-body-color, #1e293b);
    line-height: 1.4;
}

.selectize-control.multi .selectize-input > div.sz-avatar-item.active {
    background: var(--tblr-bg-surface-secondary, #f1f5f9);
    border-color: var(--tblr-border-color-active, #cbd5e1);
}

.selectize-control.plugin-remove_button [data-value] .sz-avatar-item .remove,
.selectize-control.plugin-remove_button [data-value].sz-avatar-item .remove {
    border-left: 0;
    border-radius: 0 999px 999px 0;
}

/* Dropdown rows follow the Tabler "dropdown with avatar" menu: roomy rows, round photo, hover highlight.
   Selectize does not add its own .option class to a custom render, so the padding is set here. */
.sz-avatar-dropdown {
    border-radius: .5rem;
    padding: .25rem 0;
    overflow: hidden;
}

.selectize-dropdown .sz-avatar-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .75rem;
    padding-right: .75rem !important;
    line-height: 1.4;
}

.selectize-dropdown .sz-avatar-option.active {
    background: var(--tblr-bg-surface-secondary, #f1f5f9);
}

/* avatar-xs in Tabler v1.4.0 forces border-radius:2px, which beats avatar-rounded — keep it a circle. */
.sz-avatar-item .avatar,
.sz-avatar-option .avatar {
    flex-shrink: 0;
    border-radius: 50%;
}

.sz-avatar-option .avatar {
    --tblr-avatar-size: 1.5rem;
    --tblr-avatar-font-size: .6875rem;
}

.sz-avatar-initials {
    background-color: var(--tblr-bg-surface-secondary, #e2e8f0);
    color: var(--tblr-secondary, #667382);
    font-weight: 600;
}

.sz-avatar-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "Dark nav" and "Colored" from the theme settings. Tabler colours the navbars in .page but leaves their
   text in the page's own scheme; color-scheme is enough for the dark one, since Tabler 1.7 builds every
   surface and text colour with light-dark(). */
html[data-bs-navbar-theme=dark] .rx-navbar,
html[data-bs-navbar-theme=primary] .rx-navbar {
    color-scheme: dark;
}

html[data-bs-navbar-theme=primary] .rx-navbar {
    --tblr-navbar-bg: var(--tblr-primary);
    --tblr-navbar-border-color: transparent;
    /* muted text is a fixed mid gray, which all but disappears on a coloured bar */
    --tblr-muted: rgba(255, 255, 255, 0.75);
    --tblr-secondary-color: rgba(255, 255, 255, 0.75);
}

/* On a coloured bar only the bar's own text turns light. A field (the search box) is a white field on it,
   and a menu that drops down over the page belongs to the page, so both keep the page's light scheme -
   Colored always pairs with a light page. Menus in the sidebar open inline, as part of the bar. */
html[data-bs-navbar-theme=primary]:not([data-bs-theme=dark]) .rx-navbar :is(.form-control, .form-select, .input-group-text),
html[data-bs-navbar-theme=primary]:not([data-bs-theme=dark]) .rx-navbar:not(.navbar-vertical) .dropdown-menu {
    color-scheme: light;
    /* the bar's light muted text, put back to Tabler's own values (tabler.css :root) */
    --tblr-muted: oklch(55.55% 0 0deg);
    --tblr-secondary-color: color-mix(in oklab, var(--tblr-body-color) 75%, transparent);
}

/* Navigation = Sidebar (data-bs-navbar-position="combined"): the main menu in Tabler's vertical navbar,
   with the search at its top. Below md it is the menu the top bar's button drops open, so it comes after
   the top bar there, as the menu row does in the other mode. */
.rx-sidebar .search-form-container {
    padding: 0.75rem 1rem 0.25rem;
}

/* A shared station login gets no search at all. */
.rx-sidebar .search-form-container:empty {
    display: none;
}

html[data-bs-sidebar=folded] .rx-sidebar .search-form-container,
html[data-bs-sidebar=folded-hover] .rx-sidebar:not(:hover):not(:has(:focus-visible)) .search-form-container {
    display: none;
}

/* The menus hide their icons from md to lg ("d-md-none d-lg-inline-block"), to fit the row in the top bar.
   In the sidebar the icons are the only thing a folded sidebar shows, and the top bar has no menu button
   from md up, so on a tablet or a phone on its side the menu was an empty strip (RX_ER-242). */
.rx-sidebar .nav-link-icon.d-md-none {
    display: inline-block !important;
}

@media (max-width: 767.98px) {
    .page > .rx-sidebar {
        order: 1;
        min-height: 0;
        padding-block: 0;
    }

    .page > .page-wrapper {
        order: 2;
    }
}

/* Fix Tom-Select multi-select chips text visibility */
.ts-wrapper.multi .ts-control > div,
.ts-wrapper.multi .ts-control > div.item,
.ts-wrapper.multi.disabled .ts-control > div,
.ts-wrapper .ts-control .item,
.bg-azure,
.bg-primary {
    color: #ffffff !important;
}

/* Fix badge text visibility — override Tabler's color:#000!important on .text-bg-azure/.text-bg-primary */
.text-bg-azure.text-bg-azure,
.text-bg-primary.text-bg-primary,
.badge.bg-azure,
.badge.bg-primary,
.badge-list .badge {
    color: #ffffff !important;
}

/* Fix orange badge text visibility */
.badge.bg-orange {
    color: #ffffff !important;
}

/* Fix Thai text letter-spacing in nav-link */
.nav-pills .nav-link,
.nav-vertical .nav-link {
    letter-spacing: normal !important;
}



/* ---------------------------------------------------------------------------
   Touch sizing

   Measured on a phone, several controls that have to be hit precisely sat well
   under the 44px a fingertip needs: the date picker's Cancel/Apply at 28px and
   the card header icon buttons at 32px. Only raised where the pointer is coarse,
   so the desktop density these pages were laid out for is left alone.
   --------------------------------------------------------------------------- */
@media (pointer: coarse) {
    .btn,
    .btn-icon,
    .daterangepicker .drp-buttons .btn {
        min-height: 44px;
    }

    .btn-icon {
        min-width: 44px;
    }

    .dropdown-item {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    .daterangepicker td.available,
    .daterangepicker th.available {
        min-width: 40px;
        height: 40px;
    }
}


/* ---------------------------------------------------------------------------
   Dialogs on a phone

   Below md a dialog is already fullscreen (DialogServiceExtension sets
   ModalFullscreen.BelowMedium), so everything here is scoped to that width and
   the desktop layout these forms were drawn for is untouched.

   Measured on the manual attendance edit dialog at 393x852 before this block:
   the form was 1216px of content in a 794px window, and the three action
   buttons sat at y=1168 - 422px, more than a screen and a half, below the fold.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* Several dialogs draw their own .modal-footer as part of the component, which
       lands INSIDE the scrolling .modal-body and scrolls away with the form. The
       modal already carries .modal-dialog-scrollable, so the intent was always a
       footer that stays put: sticky gives it that without moving any markup. */
    .modal-body > .modal-footer {
        position: sticky;
        bottom: calc(var(--tblr-modal-padding, 1.5rem) * -1);
        z-index: 5;
        margin-inline: calc(var(--tblr-modal-padding, 1.5rem) * -1);
        margin-bottom: calc(var(--tblr-modal-padding, 1.5rem) * -1);
        padding-inline: var(--tblr-modal-padding, 1.5rem);
        background: var(--tblr-bg-surface, #fff);
        border-top: 1px solid var(--tblr-border-color, #e6e7e9);
    }

    /* The calendar is 351px tall and its positioning script only ever clamps
       horizontally - vertically it drops from the field and runs off the bottom of
       the screen whenever the field sits low, which on a form this long is most of
       them. As a sheet against the bottom edge the whole of it is on screen wherever
       the field happens to be. !important because the script writes top/left inline
       on every scroll event. */
    .daterangepicker.show-calendar {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 85vh;
        overflow-y: auto;
        border-radius: 1rem 1rem 0 0;
        box-shadow: 0 -0.5rem 1.5rem rgba(24, 36, 51, .18);
        z-index: 1060;
    }

    /* The arrow points at a field the sheet is no longer attached to. */
    .daterangepicker.show-calendar:after,
    .daterangepicker.show-calendar:before {
        display: none;
    }

    .daterangepicker.show-calendar .drp-calendar,
    .daterangepicker.show-calendar .drp-calendar.left,
    .daterangepicker.show-calendar .drp-calendar.right {
        max-width: 100%;
        width: 100%;
        float: none;
    }

    .daterangepicker.show-calendar .calendar-table {
        width: 100%;
    }

    /* Padding stacked twice over: the Tabs component draws a Card inside a modal
       that already pads its body, which cost 92px of a 393px screen - a quarter of
       the width, taken from the fields that need it most. */
    .modal-fullscreen-md-down .modal-body {
        padding: .75rem;
    }

    .modal-body > .modal-footer {
        bottom: -.75rem;
        margin-inline: -.75rem;
        margin-bottom: -.75rem;
        padding-inline: .75rem;
    }

    .modal-body .card > .card-body {
        padding: .75rem;
    }
}


/* ---------------------------------------------------------------------------
   Navbar burger

   Tabler draws the burger as three bars: the icon span is the middle one and
   its ::before/::after are the outer two, and the open state rotates them into
   a cross. The button is a 32px flex box that still carries the base
   0.75rem horizontal padding, which leaves 8px of content: the middle bar - a
   flex item - shrank to 8px while the pseudo-elements kept the full 1.25em, so
   closed looked ragged and open looked like a tick instead of a cross. Upstream
   Tabler has no padding here; putting it back squares the three bars up.
   --------------------------------------------------------------------------- */
.navbar-toggler {
    padding: 0;
}

/* a flex child that may shrink below its content, so text-truncate inside it works (Tabler has no such utility) */
.min-w-0 {
    min-width: 0 !important;
}

/* ---------------------------------------------------------------------------
   Toasts

   TabBlazor's ToastContainer is `position: fixed; right: 0` with no top, so it
   sat at the very top right, over the user name and the bell in the header.
   Start it below the header bar (about 72px) on every screen size; the
   safe-area inset keeps it clear of the notch in the installed iOS app.
   --------------------------------------------------------------------------- */
.toast-container {
    top: calc(72px + .5rem + env(safe-area-inset-top, 0px));
}