:root {
    /* Colors */
    --button-primary-bg: #3b5eda;
    --button-primary-hover-bg: #304AA1;
    --button-secondary-bg: #fff;
    --button-secondary-text: #666D7A;
    --button-secondary-hover-bg: #F8F8F8;
    --button-secondary-hover-text: #1E2024;
    --button-settings-bg: #e9e9e9;
    --button-settings-hover-bg: #DCDCDC;
    --button-border-color: #D2D2D2;
    --button-hover-border-color: #A9A9A9;
    --button-disabled-text: #8B8B8B;
    --filter-parent-background-colour: #fff;
    --filter-background-colour: #F6F6F6;
    --filter-menu-text-colour: #5A5A5A;
    --filter-menu-background-colour: #F2F2F2;
    --tab-label-colour: #495057;
    --tab-label-disabled: #adb5bd;
    --tab-label-hover: #3B5EDA1A;
    --header-info-card-color: #202d41;
    --header-info-card-background-color: #F3F4F5;
    --background-color-transparent: transparent;
    --grid-header-background-color: #E8E8E8;
    --multicolumn-dropdown-content-color: #1D1D1D;
    --multicolumn-dropdown-cell-active-color: #EFEFEF;
    --input-text-color: #000000;
    --input-background: #FFFFFF 0% 0% no-repeat padding-box;
    --button-font-color: #666D7A;
    --numeric-icon-bg-color: #EFEFEF;
    /* Typography */
    --button-font-family: 'Segoe UI', sans-serif;
    --button-font-size: 12px;
    --font-size-large: 18px;
    --font-size: 14px;
    --font-weight-small: 400;
    --button-font-weight: 600;
    --button-line-height: 16px;
    --button-letter-spacing: 0.12px;
    --button-font-color: #666D7A;
    --form-label-content-font: normal normal normal 14px/1px Segoe UI;
    --multicolumn-dropdown-content-font: normal normal normal 13px/1px Segoe UI;
    --multicolumn-dropdown-content-letter-spacing: 0.13px;
    --form-label-content-letter-spacing: 0.14px;
    --settings-bg-font: normal normal 600 12px/16px Segoe UI;
    /* Dimensions */
    --button-padding: 4px 8px;
    --button-border-radius: 4px;
    --button-border-width: 0.5px;
    --button-icon-size: 16px;
    --button-icon-gap-small: 4px;
    --button-icon-gap-large: 8px;
    --button-container-min-height: 32px;
    --button-container-margin: 5px;
    --button-collapsed-width: 33.81px;
    --button-collapsed-height: 32px;
    /* Loader */
    --button-loader-size: 18px;
    --button-loader-border-width: 4px;
    /* radius */
    --border-radius: 4px;
    /* border */
    --header-info-card-item-border: 0.5px solid #C5C5C5;
    --header-grid-item-border: 1px solid #D1D1D1;
    --header-info-card-item-border-radius: 3px;
    --notification-border-info: 2px solid #17a2b8;
    --notification-border-success: 2px solid #28a745;
    --notification-border-warning: 2px solid #ffc107;
    --notification-border-danger: 2px solid #dc3545;
    --notification-border-primary: 2px solid #007bff;
    --notification-border-secondary: 2px solid #6c757d;
    --notification-border-dark: 2px solid #343a40;
    --multicolumn-dropdown-cell-active-border: 0.5px solid #E6E6E6;
    --input-border: 0.5px solid #828585;
    --input-border-onhover: 0.5px solid #3b5eda;
    /*form*/
    --form-error-red: #CB0D0D;
    /* Size */
    --height-fill-parent: 100%;
    --weight-fill-parent: 100%;
    --form-input-height: 30px;
    --form-input-min-width: 240px;
    /*button*/
    --button-width-save: 66px;
    --button-width-cancel: 76px;
    --button-height: 32px;
    --button-font: normal normal 600 12px/16px Segoe UI;
    --button-letter-spacing: 0.12px;
    --button-border-radius: 4px;
    --button-margin-left: 5px;
    /*fonts*/
    --font-normal: normal normal normal 14px Segoe UI;
    --font-bold: normal normal bold 14px Segoe UI;
    /*letter spacing*/
    --letter-spacing-normal: 0.14px;
    /*Text colour*/
    --text-colour-normal: #5A5A5A;
    --text-input-colour-background-disabled: #f0f0f0;
    --text-input-colour-disabled: #a0a0a0;
    --text-input-border-color: #d0d0d0;
    /*error*/
    --error-colour: #000000;
    --error-background-colour: #FCF6F6;
    --error-border: 0.5px solid #CB0D0D;
    /*EUA Variables*/
    --bg-overlay: rgba(15, 18, 25, 0.72);
    --modal-bg: #ffffff;
    --surface-subtle: #f7f8fa;
    --surface-notice: #f0f4ff;
    --border: #e3e6ec;
    --border-strong: #c8cdd8;
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-muted: #8b93a4;
    --accent: #1a56db;
    --accent-dark: #1343bb;
    --accent-light: #eef3ff;
    --danger: #c0392b;
    --danger-light: #fff5f5;
    --danger-border: #f5c6c2;
    --green: #16a34a;
    --shadow-modal: 0 8px 48px rgba(0,0,0,0.18), 0 2px 12px rgba(0,0,0,0.08);
    --radius: 12px;
    --radius-sm: 7px;
    /*Tiles*/
    /*Tile main title*/
    --tile-main-title-font: normal normal bold 13px/17px Segoe UI;
    --tile-title-letter-spacing: 0.13px;
    --tile-title-color: #78808C;
    /*Tile sub title*/
    --tile-sub-title-font: normal normal normal 14px/21px Segoe UI;
    --tile-sub-title-letter-spacing: 0.16px;
    --tile-sub-title-color: #626B79;
    /*Tile total block*/
    --tile-total-height: 80px;
    --tile-total-bg: #F7F7F8;
    --tile-total-border-radius: 0px 0px 6px 6px;
    --tile-total-font: normal normal 600 14px/19px Segoe UI;
    --tile-total-letter-spacing: 0.14px;
    --tile-total-color: #4D5D75;
    --tile-total-value-font: normal normal 600 22px/30px Segoe UI;
    --tile-total-value-letter-spacing: 0.22px;
    --tile-total-value-color: #202D41;
    --tile-total-sub-text-font: normal normal normal 13px/17px Segoe UI;
    --tile-total-sub-text-letter-spacing: 0.13px;
    --tile-total-sub-text-color: #4D5D75;
    --tile-inner-item-left-margin: 10px;
    /*Tile total subtitle*/
    --tile-total-subtitle-font: normal normal normal 13px/17px Segoe UI;
    --tile-total-subtitle-letter-spacing: 0.13px;
    --tile-total-subtitle-color: #4D5D75;
    /*Tile age analysis — base colours (override per-domain vars below to customise)*/
    --tile-age-safe-bar: #4E6382;
    --tile-age-risk-bar: #D97374;
    /*Customer age analysis colours*/
    --tile-age-customer-safe-bar: var(--tile-age-safe-bar);
    --tile-age-customer-risk-bar: var(--tile-age-risk-bar);
    /*Supplier age analysis colours*/
    --tile-age-supplier-safe-bar: #1AA59C;
    --tile-age-supplier-risk-bar: #D58A3F;
    /*VAT tile colours*/
    --tile-vat-current-bar: #1AA59C;
    --tile-vat-previous-bar: #4E6382;
    /*Tile navigation button*/
    --tile-nav-button-bg: #FFFFFF;
    --tile-nav-button-hover-bg: #EEF1FB;
    --tile-nav-button-active-bg: #DDE3F7;
    --tile-nav-button-border-radius: 12px;
    --tile-nav-button-font: normal normal 600 12px/16px Segoe UI;
    --tile-nav-button-letter-spacing: 0.12px;
    --tile-nav-button-color: #3B5FDA;
    --tile-nav-button-padding: 4px 10px;
    --tile-nav-button-icon-size: 16px;
    --tile-nav-button-gap: 4px;
    --tile-nav-button-transition: background-color 150ms ease;
    --tile-nav-button-icon-transition: translate 150ms ease;
    --tile-nav-button-icon-hover-translate: 2px;
    /*Tile bank selector widget*/
    --tile-bank-link-font: normal normal 600 12px/16px Segoe UI;
    --tile-bank-link-letter-spacing: 0.12px;
    --tile-bank-link-color: #3B5FDA;
    --tile-bank-link-btn-bg: #F7F7F8;
    --tile-bank-link-btn-radius: 12px;
    /*Tile config form*/
    --tile-config-font: normal normal normal 14px/1px Segoe UI;
    --tile-config-letter-spacing: 0.14px;
    --tile-config-color: #5A5A5A;
    --tile-config-heading-font: normal normal bold 14px/1px Segoe UI;
    --tile-config-heading-letter-spacing: 0.14px;
    --tile-config-heading-color: #464C55;
    /*Tile dimensions*/
    --tile-height: 360px;
    /*Tile chart*/
    --tile-chart-height: 185px;
    --tile-chart-tooltip-title-font: normal normal bold 12px/16px Segoe UI;
    --tile-chart-tooltip-title-letter-spacing: 0.12px;
    --tile-chart-tooltip-title-color: #4D5D75;
    --tile-chart-tooltip-series-font: normal normal 600 12px/16px Segoe UI;
    --tile-chart-tooltip-series-letter-spacing: 0.12px;
    --tile-chart-tooltip-series-color: #4D5D75;
    --tile-chart-axis-label-font-family: Segoe UI, sans-serif;
    --tile-chart-axis-label-font-size: 13px;
    --tile-chart-axis-label-font-weight: 600;
    --tile-chart-axis-label-letter-spacing: 0.13px;
    --tile-chart-axis-label-color: #78808C;
    /*GL Tile*/
    --tile-olive-green: #92BF45;
    --tile-coral-red: #DE7676;
    --tile-slate-blue: #4E6382;
    --tile-amber-orange: #D58A3F;
    --tile-teal: #1AA59C;
    --tile-orchid-purple: #A168BC;
    --tile-golden-yellow: #DEC736;
    --tile-royal-blue: #5555B2;
    --tile-previous-year: #D2D8E0;
    --radius-sm: 7px; 
    /*grid*/
    --grid-bg: #ffffff;
    --grid-border-color: #C5C5C5;
    --grid-header-text-color: #4B4B4B;
    --grid-cell-dirty-bg: rgb(209, 231, 220.8);
    --grid-error-color: #CB0D0D;
    --grid-error-tooltip-bg: #FCF6F6;
    --grid-error-tooltip-color: #000000;
    --grid-error-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    /*DataGrid component*/
    --dg-primary-bg: #E8E8E8;
    --dg-primary-color: #3B5EDA;
    --dg-primary-text-color: #1D1D1D;
    --dg-pager-bg: #F3F4F5;
    --dg-font-family: 'Segoe UI', sans-serif;
    --dg-input-height: 30px;
    --dg-input-font-size: 13px;
    --dg-input-border-radius: 4px;
    --dg-input-bg: #FFFFFF;
    --dg-input-border-color: #828585;
    --dg-input-placeholder-color: #9ca3af;
    --dg-input-focus-border: #3B5EDA;
    --dg-input-focus-shadow: 0 0 0 2px rgba(59, 94, 218, 0.15);
    --dg-input-transition: border-color 0.15s ease, box-shadow 0.15s ease;
    --dg-dropdown-menu-bg: #F6F6F6;
    --dg-dropdown-menu-border: #C5C5C5;
    --dg-dropdown-menu-border-radius: 10px;
    --dg-dropdown-menu-shadow: 8px 8px 12px rgba(0, 0, 0, 0.25);
    --dg-dropdown-item-hover-bg: #EFEFEF;
    --dg-button-secondary-active-bg: #DCDCDC;
}

/*all inputs*/
input, select, textarea {
    color: var(--input-text-color) !important;
    font: var(--font-normal);
    letter-spacing: var(--letter-spacing-normal) !important;
    text-align: left;
    width: var(--weight-fill-parent);
    min-width: var(--form-input-min-width);
    height: var(--form-input-height);
}

.e-input-group.e-control-container.e-control-wrapper,
.e-numeric.e-valid-input.e-input-group.e-control-container.e-control-wrapper {
    background: var(--input-background) !important;
    border: var(--input-border) !important;
    border-radius: var(--border-radius) !important;
    opacity: 1;
}

/*all input have blue when on hover*/
.e-input-group:hover:not(.e-disabled),
.e-input-group.e-control-wrapper:hover:not(.e-disabled),
.e-numeric.e-valid-input.e-input-group:hover:not(.e-disabled),
.e-numeric.e-valid-input.e-input-group.e-control-wrapper:hover:not(.e-disabled) {
    border: var(--input-border-onhover) !important;
}

/*all inputs remove on active blue box shadow around*/
.e-input-group.e-control-container.e-control-wrapper.e-input-focus,
.e-numeric.e-valid-input.e-input-group.e-control-container.e-control-wrapper.e-input-focus {
    box-shadow: none !important;
}

.e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error),
.e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error) {
    box-shadow: none !important;
}
/*all labels*/
label {
    text-align: left;
    font: var(--font-normal);
    letter-spacing: var(--letter-spacing-normal) !important;
    color: var(--text-colour-normal);
}

/*date picker*/
.e-input-group:not(.e-disabled) .e-input-group-icon:hover,
.e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
    background: none;
}


.e-date-wrapper span.e-input-group-icon.e-date-icon.e-icons.e-active {
    background: none;
    color: #343a40;
}

/*form scrollable container*/
.scrollable-container {
    overflow: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    /*    height: calc(100% - 48px);*/
    border: 0.5px solid #c5c5c5;
    border-radius: 0px 0px 3px 3px;
    background: #F3F4F5 0% 0% no-repeat padding-box;
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 20px;
}


/*Dropdowns*/
.e-ddl.e-input-group.e-control-wrapper .e-ddl-icon::before {
    height: 75%;
    width: 100%;
    content: url('/images/dropdown-arrow-icon.svg');
}

.e-ddl.e-input-group.e-control-wrapper[aria-expanded="true"] .e-ddl-icon::before {
    content: url('/images/dropdown-arrow-up-icon.svg');
}

/*Numeric textbox spinners*/
.e-numeric > .e-input-group-icon.e-spin-down,
.e-numeric > .e-input-group-icon.e-spin-up {
    background-color: var( --numeric-icon-bg-color);
}

.e-numeric > .e-input-group-icon::before {
    height: 75%;
    width: 100%;
}

.e-numeric > .e-input-group-icon.e-spin-down::before {
    content: url('/images/dropdown-arrow-icon.svg');
}

.e-numeric > .e-input-group-icon.e-spin-up::before {
    content: url('/images/dropdown-arrow-up-icon.svg');
}

/*Checkbox styling*/
/*color*/
.e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--button-primary-bg);
    border-color: var(--button-primary-bg);
}

/*remove input overlay and ensure color*/
.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check,
.e-checkbox-wrapper .e-checkbox:active + .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-checkbox:active + .e-frame.e-check {
    background-color: var(--button-primary-bg);
    border-color: var(--button-primary-bg);
    box-shadow: none !important;
}
/*remove input overlay and ensure color*/
.e-checkbox-wrapper .e-checkbox:focus + .e-frame,
.e-checkbox-wrapper .e-checkbox:active + .e-frame,
.e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame,
.e-css.e-checkbox-wrapper .e-checkbox:active + .e-frame {
    background-color: #fff;
    border-color: var(--button-primary-bg);
    box-shadow: none !important;
}

.e-multi-line-input.e-auto-width.e-input-group.e-control-container.e-control-wrapper {
    width: 100%;
}

/*google popup*/
.pac-container.pac-logo {
    z-index: 2000;
}

/* === Tile shimmer animations === */
@keyframes tile-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

@keyframes tile-shimmer-sweep {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* Overlay rendered inside tile components during refresh */
.tile-refresh-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.45);
    overflow: hidden;
}

.tile-refresh-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: tile-shimmer-sweep 1.2s ease-in-out infinite;
}