/* Kendo/Telerik overrides */
:root {
    --kendo-font-family: ProximaNova, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --kendo-color-on-app-surface: #0a0a0a;
}

a, .btn-link {
    color: #0071c1;
    cursor: pointer;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0;
}

.shadow-top {
    box-shadow: 0px 6px 16px 8px #00000014;
}

.shadow-bottom {
    box-shadow: 0px -6px 16px 2px #00000014;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}

body {
    margin: 0;
    height: 100vh;
    overflow-x: hidden;
    font-family: HalyardDisplay, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    background-color: #fff;
}

html:has(.beta-banner)::-webkit-scrollbar {
    display: none;
}

/* For Firefox */
html:has(.beta-banner) {
    scrollbar-width: none;
}

.gap-12px {
    gap: 0.75rem;
}

#wrapper {
    height: 100vh;
    display: flex;
    background-color: #f8f9fc !important;
}

#content-wrapper {
    background-color: #f8f9fc;
    background-color: #fff;
    overflow-x: hidden;
    flex-grow: 1;
}

#wrapper #content-wrapper #content {
    flex: 1 0 auto;
}

.container,
.container-fluid {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

li::marker {
    content: '';
    display: none;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.animated--fade-in {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 200ms;
    animation-duration: 200ms;
    -webkit-animation-timing-function: opacity cubic-bezier(0, 1, 0.4, 1);
    animation-timing-function: opacity cubic-bezier(0, 1, 0.4, 1);
}

.bg-gradient-primary {
    background-color: #637381;
    background-size: cover;
}


@media (min-width: 576px) {
    .topbar .dropdown {
        position: relative;
    }

        .topbar .dropdown .dropdown-menu {
            width: auto;
            right: 0;
        }

    .topbar .dropdown-list {
        width: 20rem !important;
    }

        .topbar .dropdown-list .dropdown-item .text-truncate {
            max-width: 13.375rem;
        }
}

.topbar.navbar-light .navbar-nav .nav-item .nav-link {
    color: #d1d3e2;
}

    .topbar.navbar-light .navbar-nav .nav-item .nav-link:hover {
        color: #b7b9cc;
    }

    .topbar.navbar-light .navbar-nav .nav-item .nav-link:active {
        color: #858796;
    }

.set-width-60px .k-drawer {
    width: 60px;
}

.set-width-60px .k-drawer-wrapper {
    width: 100%;
}

.taxInputLabel {
    color: #bfb2b2;
    font-size: 10px;
}

.k-grid tr.no-children td.k-hierarchy-cell {
    pointer-events: none;
}

/*Help and Contact Us Start*/
.tab-strip-content-container .k-tabstrip-content {
    overflow: visible;
}

/*Help and Contact Us End */
.ProductTourModal .k-window-titlebar {
    border-bottom: none !important;
}


/*Transaction Success Receipt Modal Start*/

div.k-window.EBizModal.TransactionSuccessReceipt {
    border-top: solid 4px var(--colors-stroke-success);
    width: 400px !important;
}

    div.k-window.EBizModal.TransactionSuccessReceipt .k-window-titlebar {
        height: 0px;
        padding: 0px;
    }

        div.k-window.EBizModal.TransactionSuccessReceipt .k-window-titlebar .k-window-title {
            display: none;
        }


    div.k-window.EBizModal.TransactionSuccessReceipt .k-window-content {
        margin-right: 8px;
        padding-right: 16px;
        padding-left: 24px;
        padding-top: 24px;
        margin-bottom: 7px;
        margin-top: 7px;
    }

    div.k-window.EBizModal.TransactionSuccessReceipt .k-window-title {
        margin: 0px;
        justify-content: center;
    }

    div.k-window.EBizModal.TransactionSuccessReceipt .k-svg-icon.success-light svg path {
        fill: var(--colors-content-success-light);
    }

    div.k-window.EBizModal.TransactionSuccessReceipt .k-window-titlebar-actions {
        display: none;
    }

/*Transaction Success Receipt Modal End */

/*Pager Settings*/
/* Flex container to align pager + icon side-by-side */
.custom-pager-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0.5rem;
    background-color: var(--kendo-color-surface, #f8f9fa);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
}

.custom-pager {
    flex: 1 1 auto;
    min-width: 0; /* allows shrinking properly */
    border-right: none;
}

    .custom-pager.k-pager:focus {
        box-shadow: none !important;
    }

/* Refresh icon styles */
.refresh-icon-wrapper {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 8px;
    margin-right: 4px;
    border-radius: 4px;
}

    .refresh-icon-wrapper:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }

.refresh-icon {
    color: #007bff; /* or any theme-appropriate color */
}

@media (max-width: 1300px) {
    .custom-pager.large-data .k-pager-numbers {
        display: none !important;
    }
}

@media (max-width: 1300px) {
    .custom-pager.large-data .k-pager-numbers-wrap > select.k-dropdown-list {
        display: flex !important;
    }
}

@media (max-width: 820px) {
    .custom-pager.large-data .k-pager-info {
        display: none !important;
    }
}

/*Batch Manager*/
.batch-tabstrip .k-tabstrip-content {
    overflow: visible !important;
}

.showAllBatchesGrid .align-right .k-cell-inner {
    justify-content: right;
}
/*End of Batch Manager*/
/* ===== Capture Transactions Modal Styling =====*/
.EBizModal:has(.captureTranModalContainer) .titleContainer svg path {
    stroke: var(--colors-stroke-warning);
}

/*Whats New Modal Start*/

.WhatsNewModal {
    box-shadow: 0 4px 20px 5px rgba(0, 0, 0, 0.08);
    max-height: calc(100vh - 128px);
    border-radius: 12px !important;
    border: none;
}

    .WhatsNewModal:focus {
        box-shadow: 0 4px 20px 5px rgba(0, 0, 0, 0.08);
    }

    .WhatsNewModal .closeIcon {
        cursor: pointer;
    }

    .WhatsNewModal .k-window-titlebar {
        background-color: var(--colors-fill-primary);
        border-bottom: none;
        padding: 0px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }

    .WhatsNewModal .k-window-titlebar-action {
        opacity: 1;
        padding: 0px;
        border: none;
    }

    .WhatsNewModal .k-svg-icon {
        padding: 0px;
    }

    .WhatsNewModal .k-window-title {
        display: flex;
        padding: 0px;
    }

    .WhatsNewModal .k-window-titlebar-actions .k-button:hover, .WhatsNewModal .k-window-titlebar-actions .k-button:focus {
        outline: none;
    }

    .WhatsNewModal .k-button-flat:focus::after, .k-button-flat.k-focus::after {
        opacity: 0 !important;
    }

    .WhatsNewModal .k-window-titlebar-actions .k-button:hover::before, .WhatsNewModal .k-button.k-hover::before {
        opacity: 0;
    }

    .WhatsNewModal .k-window-titlebar-actions {
        position: absolute;
        right: 13px;
        top: 84px;
    }

        .WhatsNewModal .k-window-titlebar-actions .k-icon-button .k-svg-icon svg {
            height: 36px !important;
        }

    .WhatsNewModal .titleContainer {
        gap: 8px;
        align-items: center;
        width: 100%;
        height: fit-content;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        margin-bottom: 12px;
    }

    .WhatsNewModal .title {
        color: var(--colors-content-primary);
    }

    .WhatsNewModal .k-window-content {
        padding: 2px 0px;
        background-color: var(--colors-fill-primary);
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        margin-right: 4px;
        margin-bottom: 1px;
    }

    .WhatsNewModal .k-actions {
        border-top: solid 1px var(--colors-stroke-light);
        padding: 0px;
    }

    .WhatsNewModal .footer-gap {
        gap: 12px;
    }

    .WhatsNewModal ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
        border-radius: 8px;
        background-color: var(--colors-fill-quatrenary);
    }

    .WhatsNewModal ::-webkit-scrollbar-track {
        border-radius: 8px;
    }

    .WhatsNewModal ::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background-color: #bcbebf;
        width: 4px;
        height: 4px;
    }

    .WhatsNewModal .modalContentWrapper {
        margin-bottom: 24px;
    }

    .WhatsNewModal .k-window-titlebar-action .k-svg-icon path {
        stroke: var(--base-white);
    }
/*Whats New Modal End*/
/*===== CSS for Side Panel Start ======*/
.ddlPopupInPanel.dropdown-popup-container,
.ddlPopupInModalPopup.dropdown-popup-container {
    z-index: 1350 !important;
}
/*===== CSS for Side Panel End ======*/
/*===== Reports Chart CSS styling ======*/
.k-animation-container:has(.ReportTooltipClass) {
    transform: translate(-20px, -20px) !important;
    z-index: 10000 !important;
}

.ReportTooltipClass {
    color: var(--colors-content-primary);
    padding: 8px 12px !important;
    border-radius: 8px !important;
    text-align: center !important;
    margin-left: -8px !important;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1) !important;
}

    .ReportTooltipClass.tooltipWhite, .chartTooltipClass.tooltipWhite {
        color: var(--colors-content-inverse-primary);
    }

/*===== Reports Chart CSS styling End ======*/
/*===== datepicker CSS styling ======*/
.datePickerPopup {
    width: auto !important;
}

/*===== datepicker CSS styling End ======*/

/*===== Dropdown Header Options (Batch Manager) ======*/

.simulated-ebiz-dropdown-item {
    width: 100% !important;
    height: 40px;
    color: var(--colors-content-primary);
    padding: 0px 12px !important;
    border-radius: 8px;
    display: flex;
    gap: 0.5rem;
    text-align: left;
    align-items: center;
    background-color: inherit;
    border: none;
    outline: none;
}

div.simulated-ebiz-dropdown-item:hover {
    background-color: var(--dropdown-dropdown-item-hover);
}

.simulated-ebiz-dropdown-item.selected {
    background-color: var(--dropdown-dropdown-item-selected) !important;
}

.simulated-ebiz-dropdown-item.not-selected {
    color: var(--colors-content-primary);
}

.simulated-ebiz-dropdown-item.selectable {
    cursor: pointer;
}

/*===== Dropdown Header Options (Batch Manager) End ======*/

/* Make the Calendar icon match hyperlink text color */
.date-icon-link .k-svg-icon path {
    fill: var(--colors-content-link) !important;
}

/* override drag and drop color scheme with blazor story*/
.k-drag-clue {
    background-color: var(--kendo-base-background, #f5f5f5) !important;
    border: none !important;
    box-shadow: none !important;
    color: #000000 !important;
}

/* override Original header while dragging */
.k-header.k-dragging {
    background-color: var(--kendo-base-background, #f5f5f5) !important;
    border: none !important;
    box-shadow: none !important;
    color: #000000 !important;
}

/* Override inverse tooltip text color for charts */
.k-chart-tooltip-inverse {
    color: var(--colors-content-primary);
}

/* Override Telerik Chat No-Data Template z-index from 100001 */
.k-chart-overlay {
    z-index: 100;
}

/*===== All Invoices Dropdown Popup Start ======*/
.all-invoices-actions-popup-sm {
    width: 115px !important;
    min-width: 100px;
}

.all-invoices-actions-popup-lg {
    width: 182px !important;
    min-width: 100px;
}
/*===== All Invoices Dropdown Popup End ======*/


/*===== Intercom Popup Start ======*/
div.intercom-messenger-frame {
    max-height: none !important;
    height: 100vh !important;
    width: 500px !important;
    right: 0px !important;
    bottom: 0px !important;
    border-radius: unset !important;
    transform-origin: top right !important;
}

.intercom-lightweight-app-messenger {
    transform-origin: top right !important;
}

/*===== Intercom Popup End ======*/

/* ===== Order PDF Viewer Modal styles targetting telerik pdf viewer (Sales Orders) ===== */
div.k-window.EBizModal.order-pdf-modal .k-window-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0;
}

div.k-window.EBizModal.order-pdf-modal .modalContentWrapper {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0;
}


/* Start Auto Pay Preview Payment Modal */
.preview-payment-modal .k-window-content {
    padding-top: 10px;
}
/* End Auto Pay Preview Payment Modal */


/* Weird thing with Pie Icon, it is assigned k-svg-i-33 classname */
.no-data-icon .k-svg-i-33 {
    width: auto;
    height: auto;
}

    .no-data-icon .k-svg-i-33 svg {
        width: 32px !important;
        fill: none !important;
    }

/* GLOBAL NO DATA FOUND STYLING FOR CHART */
.k-chart-overlay {
    background-color: var(--base-white);
    display: flex;
    justify-content: center;
}

.k-no-data {
    padding: 0 !important;
}

.gap-no-data-template {
    gap: .75rem !important;
}

.no-data-text {
    color: var(--gray-700);
}

.no-data-icon {
    background-color: var(--gray-200);
    height: 48px;
    width: 48px;
    display: flex;
    justify-content: center;
    align-content: center;
    border-radius: 8px;
}

.highlighted-row td,
.highlighted-row.k-master-row.k-table-alt-row .k-table-td.k-grid-content-sticky {
    background-color: var(--tables-base-cell-cell-selected-fill) !important;
}

/*========= CSS for MfaSetupManager Begin ====== */
/*=== Override MfaSetupManager PopUpClass ===*/
.mfa-dropdown-force {
    z-index: 10000 !important;
}
/* Force-collapse of footer in the mfa delete confirmation modal processing */
.mfa-processing-modal .footerStyle {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
/*========= CSS for MfaSetupManager End ====== */

/* All Sales Orders - Payment Status dropdown: remove height limit so no scrollbar */
.payment-status-dropdown-popup .dropdown-popup-inner {
    max-height: none !important;
    height: auto !important;
}

/*===== Grid Actions Column - Disabled State ======*/
.actions-column-disabled svg path {
    stroke: var(--colors-content-tertiary);
}
/*===== Grid Actions Column - Disabled State End ======*/
/*===== Small spinner ======= Start ====*/
.small-spinner-container {
    height: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .small-spinner-container div {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        -webkit-mask: radial-gradient( circle, transparent 45%, black 45% 100% );
        mask: radial-gradient( circle, transparent 45%, black 45% 100% );
        animation: spin 1s linear infinite;
        background: linear-gradient(92deg, var(--colors-fill-gray) 38%, transparent 70%);
    }
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/*===== Small spinner ======= End =====*/