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

div.apexcharts-canvas *, .apexcharts-text tspan {
    font-family: 'Kanit' !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;
    }
}

div#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    background: #f95353;
    color: #fff;
    padding: 0.75rem 1.25rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .2);
}

    div#blazor-error-ui a.reload {
        color: #fff;
        text-decoration: underline;
        margin-left: 0.5rem;
    }

/* 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 */
.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-control.provider-picker-control .selectize-input {
    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;
}

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

/* Theme Base Gray Shade Variables */
/* Slate - Cool blue-gray */
.theme-base-slate,
[data-bs-theme-base="slate"] {
    --tblr-gray-50: #f8fafc;
    --tblr-gray-100: #f1f5f9;
    --tblr-gray-200: #e2e8f0;
    --tblr-gray-300: #cbd5e1;
    --tblr-gray-400: #94a3b8;
    --tblr-gray-500: #64748b;
    --tblr-gray-600: #475569;
    --tblr-gray-700: #334155;
    --tblr-gray-800: #1e293b;
    --tblr-gray-900: #0f172a;
}

/* Gray - Pure neutral gray */
.theme-base-gray,
[data-bs-theme-base="gray"] {
    --tblr-gray-50: #f9fafb;
    --tblr-gray-100: #f3f4f6;
    --tblr-gray-200: #e5e7eb;
    --tblr-gray-300: #d1d5db;
    --tblr-gray-400: #9ca3af;
    --tblr-gray-500: #6b7280;
    --tblr-gray-600: #4b5563;
    --tblr-gray-700: #374151;
    --tblr-gray-800: #1f2937;
    --tblr-gray-900: #111827;
}

/* Zinc - Cool gray with slight blue */
.theme-base-zinc,
[data-bs-theme-base="zinc"] {
    --tblr-gray-50: #fafafa;
    --tblr-gray-100: #f4f4f5;
    --tblr-gray-200: #e4e4e7;
    --tblr-gray-300: #d4d4d8;
    --tblr-gray-400: #a1a1aa;
    --tblr-gray-500: #71717a;
    --tblr-gray-600: #52525b;
    --tblr-gray-700: #3f3f46;
    --tblr-gray-800: #27272a;
    --tblr-gray-900: #18181b;
}

/* Neutral - True neutral gray (default) */
.theme-base-neutral,
[data-bs-theme-base="neutral"] {
    --tblr-gray-50: #fafafa;
    --tblr-gray-100: #f5f5f5;
    --tblr-gray-200: #e5e5e5;
    --tblr-gray-300: #d4d4d4;
    --tblr-gray-400: #a3a3a3;
    --tblr-gray-500: #737373;
    --tblr-gray-600: #525252;
    --tblr-gray-700: #404040;
    --tblr-gray-800: #262626;
    --tblr-gray-900: #171717;
}

/* Stone - Warm gray with slight brown */
.theme-base-stone,
[data-bs-theme-base="stone"] {
    --tblr-gray-50: #fafaf9;
    --tblr-gray-100: #f5f5f4;
    --tblr-gray-200: #e7e5e4;
    --tblr-gray-300: #d6d3d1;
    --tblr-gray-400: #a8a29e;
    --tblr-gray-500: #78716c;
    --tblr-gray-600: #57534e;
    --tblr-gray-700: #44403c;
    --tblr-gray-800: #292524;
    --tblr-gray-900: #1c1917;
}

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