.telerik-pop {
    z-index: 44444;
}

.k-dialog-titlebar {
    background-color: #ff6358;
    color: white;
}

.swal2-container {
    z-index: 20000 !important;
}

.k-checkbox {
    border-color: purple !important;
    background-color: #ffffff;
}
.k-radio {
    --kendo-color-border: gray!important;
}


.myNumericTextbox .k-input-inner,
.myTextRight .k-input-inner {
    text-align: right;
}

/* Unified DropDown / ComboBox / MultiColumnComboBox control height */
.k-dropdownlist.k-picker,
.k-combobox.k-picker,
.k-combobox.k-input,
.k-multicolumncombobox.k-picker,
.k-multicolumncombobox.k-input {
    --kendo-input-height: 2.875rem;
    --kendo-input-md-height: 2.875rem;
    --kendo-input-lg-height: 2.875rem;
    --kendo-input-sm-height: 2.875rem;
}

.DisablesRowFormatting {
    background-color: gray !important;
    color: white !important;
}
/* template */
div.custom-ellipsis,
/* OnCellRender */
.k-grid td.custom-ellipsis,
/* OnRowRender */
.k-grid tr.custom-ellipsis .k-table-td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*begin สำหรับ loading แบบ transparent เต็มหน้า*/
.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(128, 128, 128, 0.5); /* สีเทาโปร่งใส */
    z-index: 9999; /* ให้แสดงอยู่ด้านหน้า */
    display: flex;
    align-items: center;
    justify-content: center;
}
/*end สำหรับ loading แบบ transparent เต็มหน้า*/

/* Telerik: disable popup/picker/dropdown/window animations project-wide */
.k-animation-container,
.k-child-animation-container,
.k-popup,
.k-list-container,
.k-adaptive-actionsheet,
.k-adaptive-actionsheet .k-actionsheet,
.k-actionsheet-container,
.k-window,
.k-dialog {
    transition: none !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
}

.k-actionsheet-container > .k-animation-container,
.k-actionsheet-container > .k-child-animation-container {
    transform: none !important;
}

.k-calendar,
.k-calendar .k-calendar-view,
.k-calendar .k-calendar-monthview,
.k-calendar .k-calendar-header,
.k-calendar .k-calendar-content,
.k-calendar .k-content,
.k-calendar .k-calendar-td,
.k-calendar .k-link,
.k-timeselector,
.k-timeselector .k-time-list,
.k-timeselector .k-time-header,
.k-timeselector .k-item,
.k-datetime-wrap,
.k-tabstrip:has(.k-calendar),
.k-tabstrip:has(.k-timeselector),
.k-list,
.k-list-content,
.k-list-ul,
.k-list-item,
.k-data-table {
    transition: none !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
}

/* Date/Time pickers: Set + Cancel full width, 50% each (Set left, Cancel right; Telerik 9.x renders Set first) */
.k-datetime-container .k-actions,
.k-calendar-container .k-actions,
.k-adaptive-actionsheet:has(.k-calendar) .k-actions,
.k-adaptive-actionsheet:has(.k-timeselector) .k-actions,
.k-adaptive-actionsheet:has(.k-datetime-wrap) .k-actions,
.k-adaptive-actionsheet .k-actions:has(.k-time-accept, .k-time-cancel) {
    display: flex !important;
    width: 100% !important;
    justify-content: stretch !important;
    flex-direction: row-reverse;
    gap: 0;
}

.k-datetime-container .k-actions .k-button,
.k-calendar-container .k-actions .k-button,
.k-adaptive-actionsheet:has(.k-calendar) .k-actions .k-button,
.k-adaptive-actionsheet:has(.k-timeselector) .k-actions .k-button,
.k-adaptive-actionsheet:has(.k-datetime-wrap) .k-actions .k-button,
.k-adaptive-actionsheet .k-actions:has(.k-time-accept, .k-time-cancel) .k-button {
    flex: 1 1 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

/* Telerik adaptive popup (mobile): full-width + larger close button */
@media (max-width: 767.98px) {
    .k-adaptive-actionsheet.k-actionsheet,
    .k-adaptive-actionsheet .k-actionsheet {
        --kendo-actionsheet-width: 100%;
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        inset-inline-start: 0 !important;
        transform: none !important;
    }

    .k-actionsheet-container,
    .k-actionsheet-container > .k-animation-container,
    .k-actionsheet-container > .k-child-animation-container {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        padding: 0 !important;
        margin: 0 !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 50000 !important;
    }

    .k-adaptive-actionsheet.k-actionsheet-bottom,
    .k-adaptive-actionsheet.k-actionsheet-fullscreen {
        border-radius: 0 !important;
    }

    /* Mobile adaptive picker: full viewport height + touch scroll for virtual list */
    .k-adaptive-actionsheet.k-actionsheet-fullscreen,
    .k-adaptive-actionsheet.k-actionsheet-bottom,
    .k-adaptive-actionsheet.k-actionsheet,
    .k-adaptive-actionsheet .k-actionsheet {
        display: flex !important;
        flex-direction: column !important;
        inset: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
    }

    .k-adaptive-actionsheet .k-actionsheet-titlebar,
    .k-adaptive-actionsheet .k-actionsheet-jq .k-actionsheet-header,
    .k-actionsheet-jq .k-adaptive-actionsheet .k-actionsheet-header,
    .k-adaptive-actionsheet .k-actionsheet-footer,
    .k-adaptive-actionsheet .k-actionsheet-filter {
        flex-shrink: 0 !important;
    }

    .k-adaptive-actionsheet .k-actionsheet-content {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .k-adaptive-actionsheet .k-actionsheet-content > :not(.k-actionsheet-footer) {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .k-adaptive-actionsheet .k-list-container {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior: contain;
    }

    /* MultiColumnComboBox adaptive: extra chrome for filter + column headers */
    .k-adaptive-actionsheet:has(.k-data-table) {
        --adaptive-picker-chrome: 11.5rem;
    }

    .k-adaptive-actionsheet:has(.k-data-table) .k-actionsheet-content {
        flex: 1 1 0 !important;
        min-height: 0 !important;
    }

    .k-adaptive-actionsheet:has(.k-data-table) .k-list-container,
    .k-adaptive-actionsheet:has(.k-data-table) .k-virtual-content {
        flex: 1 1 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .k-adaptive-actionsheet .k-virtual-content,
    .k-adaptive-actionsheet .k-list-content {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        height: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior: contain;
    }

    .k-adaptive-actionsheet .k-actionsheet-titlebar,
    .k-adaptive-actionsheet .k-actionsheet-titlebar-group,
    .k-adaptive-actionsheet .k-actionsheet-content,
    .k-adaptive-actionsheet .k-actionsheet-footer,
    .k-adaptive-actionsheet .k-actionsheet-filter {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
    }

    .k-adaptive-actionsheet .k-actionsheet-titlebar .k-button,
    .k-adaptive-actionsheet .k-actionsheet-actions .k-button {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.75) !important;
        color: #495057 !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
    }

    .k-adaptive-actionsheet .k-actionsheet-titlebar .k-button:hover,
    .k-adaptive-actionsheet .k-actionsheet-titlebar .k-button:focus,
    .k-adaptive-actionsheet .k-actionsheet-titlebar .k-button:active {
        background: #ffffff !important;
        color: #212529 !important;
    }

    .k-adaptive-actionsheet .k-actionsheet-titlebar .k-button .k-svg-icon,
    .k-adaptive-actionsheet .k-actionsheet-titlebar .k-button .k-icon,
    .k-adaptive-actionsheet .k-actionsheet-actions .k-button .k-svg-icon,
    .k-adaptive-actionsheet .k-actionsheet-actions .k-button .k-icon {
        width: 1.25rem !important;
        height: 1.25rem !important;
        font-size: 1.25rem !important;
    }

    .k-adaptive-actionsheet .k-actionsheet-titlebar,
    .k-adaptive-actionsheet .k-actionsheet-jq .k-actionsheet-header,
    .k-actionsheet-jq .k-adaptive-actionsheet .k-actionsheet-header {
        display: flex !important;
        align-items: center !important;
        min-height: 56px !important;
        padding-block: 10px !important;
        padding-inline: 12px !important;
        gap: 8px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e9ecef !important;
        box-shadow: none;
    }

    .k-adaptive-actionsheet .k-actionsheet-titlebar-group {
        display: flex !important;
        align-items: center !important;
        flex: 1 1 auto !important;
        gap: 8px !important;
        padding: 0 !important;
    }

    .k-adaptive-actionsheet .k-actionsheet-content,
    .k-adaptive-actionsheet .k-actionsheet-footer,
    .k-adaptive-actionsheet .k-actionsheet-filter {
        padding-block: 8px !important;
        padding-inline: 8px !important;
    }

    /* Date/Time picker: Set + Cancel edge-to-edge, 50% each */
    .k-adaptive-actionsheet:has(.k-calendar) .k-actionsheet-content:has(.k-actions),
    .k-adaptive-actionsheet:has(.k-timeselector) .k-actionsheet-content:has(.k-actions),
    .k-adaptive-actionsheet:has(.k-datetime-wrap) .k-actionsheet-content:has(.k-actions) {
        padding-inline: 0 !important;
        padding-bottom: 0 !important;
    }

    .k-adaptive-actionsheet:has(.k-calendar) .k-actions,
    .k-adaptive-actionsheet:has(.k-timeselector) .k-actions,
    .k-adaptive-actionsheet:has(.k-datetime-wrap) .k-actions,
    .k-adaptive-actionsheet .k-actions:has(.k-time-accept, .k-time-cancel) {
        flex-shrink: 0 !important;
        margin-top: auto !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    .k-adaptive-actionsheet:has(.k-calendar) .k-actions .k-button,
    .k-adaptive-actionsheet:has(.k-timeselector) .k-actions .k-button,
    .k-adaptive-actionsheet:has(.k-datetime-wrap) .k-actions .k-button,
    .k-adaptive-actionsheet .k-actions:has(.k-time-accept, .k-time-cancel) .k-button {
        min-height: 48px !important;
        border-radius: 0 !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
    }

    .k-adaptive-actionsheet .k-list-filter,
    .k-adaptive-actionsheet .k-list-container,
    .k-adaptive-actionsheet .k-data-table,
    .k-adaptive-actionsheet .k-table {
        margin: 0 !important;
        padding: 0 !important;
    }

    .k-adaptive-actionsheet .k-data-table {
        table-layout: fixed;
        width: 100% !important;
    }

    .k-adaptive-actionsheet .k-data-table thead .k-table-th {
        padding-block: 8px !important;
        padding-inline: 8px !important;
        font-size: 15px !important;
        font-weight: 600;
        line-height: 1.25 !important;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .k-adaptive-actionsheet .k-data-table tbody .k-table-row {
        height: 35px !important;
        min-height: 35px !important;
        max-height: 35px !important;
    }

    .k-adaptive-actionsheet .k-virtual-content .k-table-row,
    .k-adaptive-actionsheet .k-virtual-list .k-table-row {
        height: 35px !important;
        min-height: 35px !important;
        max-height: 35px !important;
    }

    .k-adaptive-actionsheet .k-data-table tbody .k-table-td {
        height: 35px !important;
        max-height: 35px !important;
        padding-block: 4px !important;
        padding-inline: 8px !important;
        font-size: 15px !important;
        line-height: 1.25 !important;
        vertical-align: middle;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .k-adaptive-actionsheet .k-data-table .k-table-th,
    .k-adaptive-actionsheet .k-data-table .k-table-td,
    .k-adaptive-actionsheet .k-table-th,
    .k-adaptive-actionsheet .k-table-td {
        padding-block: 4px !important;
        padding-inline: 8px !important;
        font-size: 15px !important;
        line-height: 1.25 !important;
    }

    .k-adaptive-actionsheet .k-list-content,
    .k-adaptive-actionsheet .k-list-ul {
        --kendo-list-item-height: 35px;
    }

    .k-adaptive-actionsheet .k-list-item,
    .k-adaptive-actionsheet .k-virtual-list .k-list-item {
        height: 35px !important;
        min-height: 35px !important;
        max-height: 35px !important;
        padding-block: 6px !important;
        padding-inline: 12px !important;
        line-height: 1.25 !important;
        border-bottom: 1px solid #f0f0f0;
        box-sizing: border-box;
        align-items: center;
        overflow: hidden;
    }

    .k-adaptive-actionsheet .k-list-item-text {
        font-size: 15px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .k-adaptive-actionsheet .k-list-item.k-selected,
    .k-adaptive-actionsheet .k-list-item.k-focus {
        background-color: #fff8e1 !important;
        color: #212529 !important;
        box-shadow: inset 4px 0 0 #feca57;
    }

    .k-adaptive-actionsheet .k-actionsheet-title,
    .k-adaptive-actionsheet .k-actionsheet-titlebar .k-actionsheet-title {
        flex: 1 1 auto !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        color: #212529 !important;
        text-align: center !important;
        line-height: 1.4 !important;
        padding-inline: 8px !important;
        margin: 0 !important;
    }

    .k-adaptive-actionsheet .k-input,
    .k-adaptive-actionsheet .k-picker,
    .k-adaptive-actionsheet .k-searchbox {
        margin: 0 !important;
        font-size: 18px !important;
    }

    /* Mobile: full-width pickers (keep default Telerik unified appearance) */
    .k-dropdownlist.k-picker,
    .k-combobox.k-picker,
    .k-combobox.k-input,
    .k-multicolumncombobox.k-picker,
    .k-multicolumncombobox.k-input,
    .k-datepicker.k-input,
    .k-datetimepicker.k-input,
    .k-timepicker.k-input {
        width: 100% !important;
    }

    /* Telerik Window (mobile): fullscreen + larger controls */
    .k-animation-container:has(> .k-window),
    .k-child-animation-container:has(> .k-window) {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .k-window {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100dvh !important;
        max-width: 100% !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .k-window-content {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        font-size: 1.0625rem;
        padding: 12px !important;
        padding-bottom: 0 !important;
    }

    .k-window-content > div:not(.trip-window-actions):not(.trip-tankslot-window-actions):not(.fuel-picking-com-actions):not(.text-end),
    .k-window-content > .row {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .k-window-content .trip-window-actions,
    .k-window-content .text-end:has(.btn),
    .k-window-content .trip-tankslot-window-actions,
    .k-window-content .fuel-picking-com-actions,
    .k-window-content .d-flex.justify-content-end:has(.btn),
    .k-window-content .d-flex.flex-row-reverse:has(.btn) {
        margin-top: auto !important;
        flex-shrink: 0 !important;
        position: sticky !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 12px !important;
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
        background: #ffffff !important;
        border-top: 1px solid #e9ecef !important;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06) !important;
        z-index: 5 !important;
    }

    .k-window-titlebar {
        border-radius: 0 !important;
        min-height: 3.25rem !important;
        padding-block: 10px !important;
        padding-inline: 12px !important;
    }

    .k-window-titlebar strong,
    .k-window-titlebar .k-window-title,
    .k-window-titlebar h4 {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
    }

    .k-window-titlebar .k-window-action,
    .k-window-titlebar .k-button {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .k-window-content .col-12 > span,
    .k-window-content .col-12.mb-3 > span,
    .k-window-content label,
    .k-window-content .trip-journey-field-label {
        display: block;
        font-size: 1.0625rem !important;
        font-weight: 600;
        margin-bottom: 6px;
    }

    .k-window-content .k-picker,
    .k-window-content .k-dropdownlist,
    .k-window-content .k-multicolumncombobox,
    .k-window-content .k-numerictextbox,
    .k-window-content .k-textbox,
    .k-window-content .k-textarea,
    .k-window-content .k-datepicker,
    .k-window-content .k-datetimepicker,
    .k-window-content .k-timepicker,
    .k-window-content .k-combobox,
    .k-window-content .k-searchbox,
    .k-window-content .form-control {
        width: 100% !important;
        font-size: 1.0625rem !important;
        min-height: 46px;
    }

    .k-window-content .k-textbox.k-input,
    .k-window-content .k-numerictextbox.k-input,
    .k-window-content .k-datepicker.k-input,
    .k-window-content .k-datetimepicker.k-input,
    .k-window-content .k-timepicker.k-input {
        height: 46px !important;
        max-height: 46px !important;
    }

    /* DropDown / ComboBox / MultiColumnComboBox in window */
    .k-window-content .k-dropdownlist.k-picker,
    .k-window-content .k-combobox.k-picker,
    .k-window-content .k-combobox.k-input,
    .k-window-content .k-multicolumncombobox.k-picker,
    .k-window-content .k-multicolumncombobox.k-input {
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
    }

    .k-window-content .k-textbox .k-input-inner,
    .k-window-content .k-numerictextbox .k-input-inner,
    .k-window-content .k-datepicker .k-input-inner,
    .k-window-content .k-datetimepicker .k-input-inner,
    .k-window-content .k-timepicker .k-input-inner,
    .k-window-content .k-input-value-text {
        font-size: 1.0625rem !important;
        padding-block: 0.25rem;
    }

    .k-window-content .btn {
        min-height: 48px;
        font-size: 1.0625rem;
        font-weight: 600;
        padding: 10px 16px;
    }

    .k-window-content .k-button {
        min-height: 48px;
        font-size: 1.0625rem !important;
        padding: 10px 16px !important;
    }

    .k-window-content .text-end .btn,
    .k-window-content .trip-tankslot-window-actions .btn {
        min-height: 50px;
        font-size: 1.125rem;
    }

    .k-window-content .trip-window-actions,
    .k-window-content .text-end:has(.btn + .btn),
    .k-window-content .trip-tankslot-window-actions,
    .k-window-content .fuel-picking-com-actions,
    .k-window-content .d-flex.justify-content-end:has(.btn),
    .k-window-content .d-flex.flex-row-reverse:has(.btn) {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
    }

    .k-window-content .text-end:has(.btn + .btn) .btn,
    .k-window-content .trip-tankslot-window-actions .btn,
    .k-window-content .trip-window-actions .btn,
    .k-window-content .fuel-picking-com-actions .btn {
        flex: 1 1 calc(50% - 4px);
        max-width: calc(50% - 4px);
        margin: 0 !important;
    }

    .k-window-content .k-checkbox,
    .k-window-content .k-radio {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
}